@ui5/webcomponents 2.16.0-rc.1 → 2.16.0-rc.3

package/dist/custom-elements.json

@@ -2804,7 +2804,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`",
+          "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Hidden Items\n\nCarousel items can be conditionally hidden by adding the `hidden` attribute to any child element.\nHidden items are automatically excluded from carousel navigation and will not be displayed or counted in pagination.\nThis allows for dynamic showing or hiding of carousel items without affecting the overall carousel behavior.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`",
           "name": "Carousel",
           "cssParts": [
             {
@@ -2815,7 +2815,7 @@
           "slots": [
             {
               "name": "default",
-              "description": "Defines the content of the component."
+              "description": "Defines the content of the component.\n\n**Note:** Items with the `hidden` attribute will be automatically excluded from carousel navigation and page calculations.\nThey will not be displayed or accessible via keyboard navigation. See [sample](./#carousel-with-hidden-items)."
             }
           ],
           "members": [
@@ -2869,16 +2869,6 @@
               "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.",
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "_currentSlideIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Defines the current first visible item in the viewport.\nDefault value is 0, which means the first item in the viewport.",
-              "privacy": "public"
-            },
             {
               "kind": "field",
               "name": "hidePageIndicator",
@@ -2988,6 +2978,17 @@
               ],
               "description": "Changes the currently displayed page.",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "visibleItemsIndices",
+              "type": {
+                "text": "Array<number>"
+              },
+              "description": "The indices of the currently visible items of the component.",
+              "privacy": "public",
+              "default": "[]",
+              "readonly": true
             }
           ],
           "events": [
@@ -3052,15 +3053,6 @@
                 "text": "boolean"
               }
             },
-            {
-              "description": "Defines the current first visible item in the viewport.\nDefault value is 0, which means the first item in the viewport.",
-              "name": "_current-slide-index",
-              "default": "0",
-              "fieldName": "_currentSlideIndex",
-              "type": {
-                "text": "number"
-              }
-            },
             {
               "description": "Defines the visibility of the page indicator.\nIf set to true the page indicator will be hidden.",
               "name": "hide-page-indicator",
@@ -3114,6 +3106,15 @@
               "type": {
                 "text": "\"Content\" | \"Navigation\""
               }
+            },
+            {
+              "description": "The indices of the currently visible items of the component.",
+              "name": "visible-items-indices",
+              "default": "[]",
+              "fieldName": "visibleItemsIndices",
+              "type": {
+                "text": "any"
+              }
             }
           ],
           "superclass": {
@@ -7845,7 +7846,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "### Overview\n\nThe `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\nIt allows users to select a date range from a predefined set of options or enter custom dates.\n\n### Usage\n\nThe component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\nIt can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\nEvery option should be registered using the `DynamicDateRange.register` method.\n\nIf needed, you can also create a range of dates based on specific option using the `toDates` method.\n\n### Standard Options\n\nThe component comes with a set of standard options, including:\n- \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n- \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n- \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n- \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n- \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n- \"LASTDAYS\" - Represents Last X Days from today. An example value is `{ operator: \"LASTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTWEEKS\" - Represents Last X Weeks from today. An example value is `{ operator: \"LASTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTMONTHS\" - Represents Last X Months from today. An example value is `{ operator: \"LASTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTQUARTERS\" - Represents Last X Quarters from today. An example value is `{ operator: \"LASTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTYEARS\" - Represents Last X Years from today. An example value is `{ operator: \"LASTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"NEXTDAYS\" - Represents Next X Days from today. An example value is `{ operator: \"NEXTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTWEEKS\" - Represents Next X Weeks from today. An example value is `{ operator: \"NEXTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTMONTHS\" - Represents Next X Months from today. An example value is `{ operator: \"NEXTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTQUARTERS\" - Represents Next X Quarters from today. An example value is `{ operator: \"NEXTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTYEARS\" - Represents Next X Years from today. An example value is `{ operator: \"NEXTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`",
+          "description": "### Overview\n\nThe `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\nIt allows users to select a date range from a predefined set of options or enter custom dates.\n\n### Usage\n\nThe component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\nIt can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\nEvery option should be registered using the `DynamicDateRange.register` method.\n\nIf needed, you can also create a range of dates based on specific option using the `toDates` method.\n\n### Standard Options\n\nThe component comes with a set of standard options, including:\n- \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n- \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n- \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n- \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n- \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n- \"DATETIMERANGE\" - Represents a range of dates with times. An example value is `{ operator: \"DATETIMERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateTimeRange.js\";`\n- \"FROMDATETIME\" - Represents a range from date and time. An example value is `{ operator: \"FROMDATETIME\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/FromDateTime.js\";`\n- \"TODATETIME\" - Represents a range to date and time. An example value is `{ operator: \"TODATETIME\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/ToDateTime.js\";`\n- \"LASTDAYS\" - Represents Last X Days from today. An example value is `{ operator: \"LASTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTWEEKS\" - Represents Last X Weeks from today. An example value is `{ operator: \"LASTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTMONTHS\" - Represents Last X Months from today. An example value is `{ operator: \"LASTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTQUARTERS\" - Represents Last X Quarters from today. An example value is `{ operator: \"LASTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTYEARS\" - Represents Last X Years from today. An example value is `{ operator: \"LASTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"NEXTDAYS\" - Represents Next X Days from today. An example value is `{ operator: \"NEXTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTWEEKS\" - Represents Next X Weeks from today. An example value is `{ operator: \"NEXTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTMONTHS\" - Represents Next X Months from today. An example value is `{ operator: \"NEXTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTQUARTERS\" - Represents Next X Quarters from today. An example value is `{ operator: \"NEXTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTYEARS\" - Represents Next X Years from today. An example value is `{ operator: \"NEXTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`",
           "name": "DynamicDateRange",
           "members": [
             {
@@ -8732,6 +8733,16 @@
               "description": "Defines column span of the component,\ne.g how many columns the group should span to.",
               "default": "undefined",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "accessibleName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the accessible ARIA name of the component.",
+              "default": "undefined",
+              "privacy": "public"
             }
           ],
           "attributes": [
@@ -8761,6 +8772,15 @@
               "type": {
                 "text": "number | undefined"
               }
+            },
+            {
+              "description": "Defines the accessible ARIA name of the component.",
+              "name": "accessible-name",
+              "default": "undefined",
+              "fieldName": "accessibleName",
+              "type": {
+                "text": "string | undefined"
+              }
             }
           ],
           "superclass": {
@@ -11767,6 +11787,23 @@
               "description": "Indicates if the menu is open.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "PopoverPlacement",
+                "references": [
+                  {
+                    "name": "PopoverPlacement",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/PopoverPlacement.js"
+                  }
+                ]
+              },
+              "default": "\"Bottom\"",
+              "description": "Determines on which side the component is placed at.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "horizontalAlign",
@@ -11892,13 +11929,22 @@
                 "text": "boolean"
               }
             },
+            {
+              "description": "Determines on which side the component is placed at.",
+              "name": "placement",
+              "default": "\"Bottom\"",
+              "fieldName": "placement",
+              "type": {
+                "text": "\"Top\" | \"Bottom\" | \"Start\" | \"End\""
+              }
+            },
             {
               "description": "Determines the horizontal alignment of the menu relative to its opener control.",
               "name": "horizontal-align",
               "default": "\"Start\"",
               "fieldName": "horizontalAlign",
               "type": {
-                "text": "\"Center\" | \"Start\" | \"End\" | \"Stretch\""
+                "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\""
               }
             },
             {
@@ -14906,7 +14952,7 @@
               "default": "\"Center\"",
               "fieldName": "horizontalAlign",
               "type": {
-                "text": "\"Center\" | \"Start\" | \"End\" | \"Stretch\""
+                "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\""
               }
             },
             {
@@ -16863,7 +16909,7 @@
               "default": "\"Center\"",
               "fieldName": "horizontalAlign",
               "type": {
-                "text": "\"Center\" | \"Start\" | \"End\" | \"Stretch\""
+                "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\""
               },
               "inheritedFrom": {
                 "name": "Popover",
@@ -20325,7 +20371,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelection](../TableSelection) - adds selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Selects the first cell of the row\n* <kbd>Space</kbd> - Toggles the selection of the row\n* <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows\n* <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row\n* <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* <kbd>F2</kbd> - Focuses the first tabbable element in the row\n* <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Navigates right\n* <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column\n* <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column\n* <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell\n* <kbd>Enter</kbd> - Focuses the first tabbable cell content\n* <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";`\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)",
+          "description": "### Overview\n\nThe `ui5-table` component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner.\nTo render the `ui5-table`, you need to define the columns and rows. You can use the provided `ui5-table-header-row` and `ui5-table-row` components for this purpose.\n\n### Features\n\nThe `ui5-table` can be enhanced in its functionalities by applying different features.\nFeatures can be slotted into the `features` slot, to enable them in the component.\nFeatures need to be imported separately, as they are not enabled by default.\n\nThe following features are currently available:\n\n* [TableSelectionMulti](../TableSelectionMulti) - adds multi-selection capabilities to the table\n* [TableSelectionSingle](../TableSelectionSingle) - adds single-selection capabilities to the table\n* [TableGrowing](../TableGrowing) - provides growing capabilities to load more data\n* [TableVirtualizer](../TableVirtualizer) - adds virtualization capabilities to the table\n\n### Keyboard Handling\n\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\nFurthermore, you can interact with `ui5-table` via the following keys:\n\nIf the focus is on a row, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Selects the first cell of the row\n* <kbd>Space</kbd> - Toggles the selection of the row\n* <kbd>Ctrl/Cmd + A</kbd> - In multi selection mode, toggles the selection of all rows\n* <kbd>Home</kbd> - Navigates to the first row, if the focus is on the first row, navigates to the header row\n* <kbd>End</kbd> - Navigates to the last row, if the focus is on the last row, navigates to the growing button\n* <kbd>Page Up</kbd> - Navigates one page up, if the focus is on the first row, navigates to the header row\n* <kbd>Page Down</kbd> - Navigates one page down, if the focus is on the last row, navigates to the growing button\n* <kbd>F2</kbd> - Focuses the first tabbable element in the row\n* <kbd>F7</kbd> - If focus position is remembered, moves focus to the corresponding focus position row, otherwise to the first tabbable element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\nIf the focus is on a cell, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Navigates down\n* <kbd>Up</kbd> - Navigates up\n* <kbd>Right</kbd> - Navigates right\n* <kbd>Left</kbd> - Navigates left, if the focus is on the first cell of the row, the focus is moved to the row.\n* <kbd>Home</kbd> - Navigates to the first cell of the current row, if the focus is on the first cell, navigates to the corresponding row\n* <kbd>End</kbd> - Navigates to the last cell of the current row, if the focus is on the last cell, navigates to the corresponding row\n* <kbd>Page Up</kbd> - Navigates one page up while keeping the focus in same column\n* <kbd>Page Down</kbd> - Navigates one page down while keeping the focus in same column\n* <kbd>F2</kbd> - Toggles the focus between the first tabbable cell content and the cell\n* <kbd>Enter</kbd> - Focuses the first tabbable cell content\n* <kbd>F7</kbd> - If the focus is on an interactive element inside a row, moves focus to the corresponding row and remembers the focus position of the element within the row\n* <kbd>[Shift]Tab</kbd> - Move focus to the element in the tab chain outside the table\n\nIf the focus is on an interactive cell content, the following keyboard shortcuts are available:\n* <kbd>Down</kbd> - Move the focus to the interactive element in the same column of the previous row, unless the focused element prevents the default\n* <kbd>Up</kbd> - Move the focus to the interactive element in the same column of the next row, unless the focused element prevents the default\n* <kbd>[Shift]Tab</kbd> - Move the focus to the element in the tab chain\n\n### Accessibility\n\nThe `ui5-table` follows the [ARIA grid design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).\nThis pattern enables cell-based keyboard navigation and, as explained above, we also support row-based keyboard navigation.\nSince the grid design pattern does not inherently provide row-based keyboard behavior, if the focus is on a row, not only the row information but also the corresponding column headers for each cell must be announced.\nThis can only be achieved through a custom accessibility announcement.\nTo support this, UI5 Web Components expose its own accessibility metadata via the `accessibilityInfo` property.\nThe `ui5-table` uses this information to create the required custom announcements dynamically.\nIf you include custom web components inside table cells that are not part of the standard UI5 Web Components set, their accessibility information can be provided using the `data-ui5-table-acc-text` attribute.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Table.js\";` (`ui5-table`)\\\n`import \"@ui5/webcomponents/dist/TableRow.js\";` (`ui5-table-row`)\\\n`import \"@ui5/webcomponents/dist/TableCell.js\";` (`ui5-table-cell`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderRow.js\";` (`ui5-table-header-row`)\\\n`import \"@ui5/webcomponents/dist/TableHeaderCell.js\";` (`ui5-table-header-cell`)",
           "name": "Table",
           "slots": [
             {
@@ -20422,6 +20468,16 @@
               "default": "0",
               "description": "Defines the maximum number of row actions that is displayed, which determines the width of the row action column.\n\n**Note:** It is recommended to use a maximum of 3 row actions, as exceeding this limit may take up too much space on smaller screens.",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "alternateRowColors",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the table rows are displayed with alternating background colors.",
+              "privacy": "public"
             }
           ],
           "events": [
@@ -20545,6 +20601,15 @@
               "type": {
                 "text": "number"
               }
+            },
+            {
+              "description": "Determines whether the table rows are displayed with alternating background colors.",
+              "name": "alternate-row-colors",
+              "default": "false",
+              "fieldName": "alternateRowColors",
+              "type": {
+                "text": "boolean"
+              }
             }
           ],
           "superclass": {
@@ -20630,7 +20695,7 @@
               "default": "undefined",
               "fieldName": "horizontalAlign",
               "type": {
-                "text": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined"
+                "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
               },
               "inheritedFrom": {
                 "name": "TableCellBase",
@@ -20699,7 +20764,7 @@
               "default": "undefined",
               "fieldName": "horizontalAlign",
               "type": {
-                "text": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined"
+                "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
               }
             }
           ],
@@ -21053,7 +21118,7 @@
               "default": "undefined",
               "fieldName": "horizontalAlign",
               "type": {
-                "text": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined"
+                "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
               },
               "inheritedFrom": {
                 "name": "TableCellBase",
@@ -23117,6 +23182,22 @@
             "module": "dist/TextArea.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "BaseTextArea",
+          "declaration": {
+            "name": "TextArea",
+            "module": "dist/TextArea.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ui5-textarea",
+          "declaration": {
+            "name": "TextArea",
+            "module": "dist/TextArea.js"
+          }
+        },
         {
           "kind": "custom-element-definition",
           "name": "ui5-textarea",
@@ -27648,6 +27729,48 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/dynamic-date-range-options/DateTimeRange.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DateTimeRange"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "DateTimeRange",
+            "module": "dist/dynamic-date-range-options/DateTimeRange.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/dynamic-date-range-options/FromDateTime.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FromDateTime"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FromDateTime",
+            "module": "dist/dynamic-date-range-options/FromDateTime.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/dynamic-date-range-options/LastNextUtils.js",
@@ -27717,6 +27840,27 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/dynamic-date-range-options/ToDateTime.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ToDateTime"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ToDateTime",
+            "module": "dist/dynamic-date-range-options/ToDateTime.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/dynamic-date-range-options/Today.js",

package/dist/dynamic-date-range-options/DateTimeRange.d.ts

@@ -0,0 +1,25 @@
+import type { DynamicDateRangeValue, IDynamicDateRangeOption } from "../DynamicDateRange.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
+/**
+ * @class
+ * @constructor
+ * @public
+ * @since 2.16.0
+ */
+declare class DateTimeRange implements IDynamicDateRangeOption {
+    template: JsxTemplate;
+    constructor();
+    parse(value: string): DynamicDateRangeValue;
+    _parseDate(value: string): Date | undefined;
+    format(value: DynamicDateRangeValue): string;
+    _formatDate(date: Date): string;
+    toDates(value: DynamicDateRangeValue): Array<Date>;
+    get text(): string;
+    get operator(): string;
+    get icon(): string;
+    isValidString(value: string): boolean;
+    getFormatPattern(): string;
+    getFormat(): DateFormat;
+}
+export default DateTimeRange;

package/dist/dynamic-date-range-options/DateTimeRange.js

@@ -0,0 +1,82 @@
+import DateTimeRangeTemplate from "./DateTimeRangeTemplate.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import { DYNAMIC_DATE_TIME_RANGE_TEXT, } from "../generated/i18n/i18n-defaults.js";
+import { dateTimeRangeOptionToDates } from "./toDates.js";
+import DynamicDateRange from "../DynamicDateRange.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+const DEFAULT_DELIMITER = "-";
+/**
+ * @class
+ * @constructor
+ * @public
+ * @since 2.16.0
+ */
+class DateTimeRange {
+    constructor() {
+        this.template = DateTimeRangeTemplate;
+    }
+    parse(value) {
+        const returnValue = { operator: this.operator, values: [] };
+        if (!value) {
+            return returnValue;
+        }
+        const splitValue = value.split(DEFAULT_DELIMITER);
+        const startDate = this._parseDate(splitValue[0].trim());
+        const endDate = this._parseDate(splitValue[1].trim());
+        returnValue.values = [startDate, endDate];
+        if (returnValue.values[0].getTime() > returnValue.values[1].getTime()) {
+            returnValue.values.reverse();
+        }
+        return returnValue;
+    }
+    _parseDate(value) {
+        return this.getFormat().parse(value);
+    }
+    format(value) {
+        const valuesArray = value?.values;
+        if (!valuesArray || valuesArray.length !== 2 || !valuesArray[0] || !valuesArray[1]) {
+            return "";
+        }
+        const startDate = this._formatDate(valuesArray[0]);
+        const endDate = this._formatDate(valuesArray[1]);
+        return `${startDate} ${DEFAULT_DELIMITER} ${endDate}`;
+    }
+    _formatDate(date) {
+        return this.getFormat().format(date);
+    }
+    toDates(value) {
+        return dateTimeRangeOptionToDates(value);
+    }
+    get text() {
+        return DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT);
+    }
+    get operator() {
+        return "DATETIMERANGE";
+    }
+    get icon() {
+        return "appointment-2";
+    }
+    isValidString(value) {
+        const splitValue = value.split(DEFAULT_DELIMITER);
+        const startDate = this._parseDate(splitValue[0].trim());
+        const endDate = this._parseDate(splitValue[1].trim());
+        if (!startDate || !endDate || Number.isNaN(startDate.getTime()) || Number.isNaN(endDate.getTime())) {
+            return false;
+        }
+        return true;
+    }
+    getFormatPattern() {
+        const localeData = getCachedLocaleDataInstance(getLocale());
+        return localeData.getCombinedDateTimePattern("medium", "medium");
+    }
+    getFormat() {
+        return DateFormat.getDateInstance({
+            strictParsing: true,
+            pattern: this.getFormatPattern(),
+        });
+    }
+}
+DynamicDateRange.register("DATETIMERANGE", DateTimeRange);
+export default DateTimeRange;
+//# sourceMappingURL=DateTimeRange.js.map

package/dist/dynamic-date-range-options/DateTimeRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeRange.js","sourceRoot":"","sources":["../../src/dynamic-date-range-options/DateTimeRange.ts"],"names":[],"mappings":"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","sourcesContent":["import DateTimeRangeTemplate from \"./DateTimeRangeTemplate.js\";\nimport type { DynamicDateRangeValue, IDynamicDateRangeOption } from \"../DynamicDateRange.js\";\nimport DateFormat from \"@ui5/webcomponents-localization/dist/DateFormat.js\";\nimport type { JsxTemplate } from \"@ui5/webcomponents-base/dist/index.js\";\nimport {\n\tDYNAMIC_DATE_TIME_RANGE_TEXT,\n} from \"../generated/i18n/i18n-defaults.js\";\nimport { dateTimeRangeOptionToDates } from \"./toDates.js\";\nimport DynamicDateRange from \"../DynamicDateRange.js\";\nimport getCachedLocaleDataInstance from \"@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js\";\nimport getLocale from \"@ui5/webcomponents-base/dist/locale/getLocale.js\";\n\nconst DEFAULT_DELIMITER = \"-\";\n\n/**\n * @class\n * @constructor\n * @public\n * @since 2.16.0\n */\n\nclass DateTimeRange implements IDynamicDateRangeOption {\n\ttemplate: JsxTemplate;\n\n\tconstructor() {\n\t\tthis.template = DateTimeRangeTemplate;\n\t}\n\n\tparse(value: string): DynamicDateRangeValue {\n\t\tconst returnValue = { operator: this.operator, values: [] } as DynamicDateRangeValue;\n\n\t\tif (!value) {\n\t\t\treturn returnValue;\n\t\t}\n\t\tconst splitValue = value.split(DEFAULT_DELIMITER);\n\t\tconst startDate = this._parseDate(splitValue[0].trim()) as Date;\n\t\tconst endDate = this._parseDate(splitValue[1].trim()) as Date;\n\n\t\treturnValue.values = [startDate, endDate];\n\n\t\tif (returnValue.values[0].getTime() > returnValue.values[1].getTime()) {\n\t\t\treturnValue.values.reverse();\n\t\t}\n\n\t\treturn returnValue;\n\t}\n\n\t_parseDate(value: string): Date | undefined {\n\t\treturn this.getFormat().parse(value) as Date;\n\t}\n\n\tformat(value: DynamicDateRangeValue) {\n\t\tconst valuesArray = value?.values as Array<Date>;\n\n\t\tif (!valuesArray || valuesArray.length !== 2 || !valuesArray[0] || !valuesArray[1]) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst startDate = this._formatDate(valuesArray[0]);\n\t\tconst endDate = this._formatDate(valuesArray[1]);\n\n\t\treturn `${startDate} ${DEFAULT_DELIMITER} ${endDate}`;\n\t}\n\n\t_formatDate(date: Date) {\n\t\treturn this.getFormat().format(date);\n\t}\n\n\ttoDates(value: DynamicDateRangeValue): Array<Date> {\n\t\treturn dateTimeRangeOptionToDates(value);\n\t}\n\n\tget text(): string {\n\t\treturn DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT);\n\t}\n\n\tget operator() {\n\t\treturn \"DATETIMERANGE\";\n\t}\n\n\tget icon() {\n\t\treturn \"appointment-2\";\n\t}\n\n\tisValidString(value: string): boolean {\n\t\tconst splitValue = value.split(DEFAULT_DELIMITER);\n\t\tconst startDate = this._parseDate(splitValue[0].trim()) as Date;\n\t\tconst endDate = this._parseDate(splitValue[1].trim()) as Date;\n\n\t\tif (!startDate || !endDate || Number.isNaN(startDate.getTime()) || Number.isNaN(endDate.getTime())) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t}\n\n\tgetFormatPattern() {\n\t\tconst localeData = getCachedLocaleDataInstance(getLocale());\n\t\treturn localeData.getCombinedDateTimePattern(\"medium\", \"medium\");\n\t}\n\n\tgetFormat(): DateFormat {\n\t\treturn DateFormat.getDateInstance({\n\t\t\tstrictParsing: true,\n\t\t\tpattern: this.getFormatPattern(),\n\t\t});\n\t}\n}\n\nDynamicDateRange.register(\"DATETIMERANGE\", DateTimeRange);\n\nexport default DateTimeRange;\n"]}

package/dist/dynamic-date-range-options/DateTimeRangeTemplate.d.ts

@@ -0,0 +1,2 @@
+import DynamicDateRange from "../DynamicDateRange.js";
+export default function DateTimeRangeTemplate(this: DynamicDateRange): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/dynamic-date-range-options/DateTimeRangeTemplate.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import DynamicDateRange from "../DynamicDateRange.js";
+import DateTimePicker from "../DateTimePicker.js";
+import Label from "../Label.js";
+import { DYNAMIC_DATE_TIME_RANGE_TEXT_TO_LABEL, DYNAMIC_DATE_TIME_RANGE_TEXT_FROM_LABEL, } from "../generated/i18n/i18n-defaults.js";
+export default function DateTimeRangeTemplate() {
+    const currentOperator = this.currentValue?.operator || "DATETIMERANGE";
+    const getDateFromValue = (index = 0) => {
+        if (this.value?.operator === currentOperator && this.value.values && this.value.values.length === 2) {
+            return this.getOption(this.value.operator)?.format(this.value)?.split("-")[index].trim();
+        }
+        return undefined;
+    };
+    const handleSelectionChange = () => {
+        const fromPicker = this.shadowRoot?.querySelector("[ui5-datetime-picker]#from-picker");
+        const toPicker = this.shadowRoot?.querySelector("[ui5-datetime-picker]#to-picker");
+        const fromDateValue = fromPicker.dateValue;
+        const toDateValue = toPicker.dateValue;
+        // If there are no dates selected, clear the value
+        if (!(fromDateValue && toDateValue)) {
+            this.currentValue = {
+                operator: currentOperator,
+                values: []
+            };
+            return;
+        }
+        const newValue = [fromDateValue, toDateValue];
+        if (newValue[0] && newValue[1] && newValue[0].getTime() > newValue[1].getTime()) {
+            newValue.reverse();
+        }
+        this.currentValue = {
+            operator: currentOperator,
+            values: newValue,
+        };
+    };
+    return (_jsxs("div", { class: "ui5-last-next-container ui5-last-next-container-padded", children: [_jsx(Label, { class: "ui5-ddr-label", children: DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT_FROM_LABEL) }), _jsx(DateTimePicker, { id: "from-picker", onChange: handleSelectionChange, value: getDateFromValue() }), _jsx(Label, { class: "ui5-ddr-label", children: DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT_TO_LABEL) }), _jsx(DateTimePicker, { id: "to-picker", onChange: handleSelectionChange, value: getDateFromValue(1) })] }));
+}
+//# sourceMappingURL=DateTimeRangeTemplate.js.map

package/dist/dynamic-date-range-options/DateTimeRangeTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeRangeTemplate.js","sourceRoot":"","sources":["../../src/dynamic-date-range-options/DateTimeRangeTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AACtD,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAClD,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,EACN,qCAAqC,EACrC,uCAAuC,GACvC,MAAM,oCAAoC,CAAC;AAE5C,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC5C,MAAM,eAAe,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,IAAI,eAAe,CAAC;IAEvE,MAAM,gBAAgB,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,EAAE;QACtC,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,KAAK,eAAe,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACrG,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;QAC1F,CAAC;QACD,OAAO,SAAS,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,mCAAmC,CAAmB,CAAC;QACzG,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,iCAAiC,CAAmB,CAAC;QAErG,MAAM,aAAa,GAAG,UAAU,CAAC,SAAS,CAAC;QAC3C,MAAM,WAAW,GAAG,QAAQ,CAAC,SAAS,CAAC;QAEvC,kDAAkD;QAClD,IAAI,CAAC,CAAC,aAAa,IAAI,WAAW,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,YAAY,GAAG;gBACnB,QAAQ,EAAE,eAAe;gBACzB,MAAM,EAAE,EAAE;aACV,CAAC;YACF,OAAO;QACR,CAAC;QAED,MAAM,QAAQ,GAAG,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;QAE9C,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;YACjF,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpB,CAAC;QAED,IAAI,CAAC,YAAY,GAAG;YACnB,QAAQ,EAAE,eAAe;YACzB,MAAM,EAAE,QAAQ;SAChB,CAAC;IACH,CAAC,CAAC;IACF,OAAO,CACN,eAAK,KAAK,EAAC,wDAAwD,aAClE,KAAC,KAAK,IAAC,KAAK,EAAC,eAAe,YAAE,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,uCAAuC,CAAC,GAAS,EACnH,KAAC,cAAc,IACd,EAAE,EAAC,aAAa,EAChB,QAAQ,EAAE,qBAAqB,EAC/B,KAAK,EAAE,gBAAgB,EAAE,GACT,EACjB,KAAC,KAAK,IAAC,KAAK,EAAC,eAAe,YAAE,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,qCAAqC,CAAC,GAAS,EACjH,KAAC,cAAc,IACd,EAAE,EAAC,WAAW,EACd,QAAQ,EAAE,qBAAqB,EAC/B,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GACV,IACZ,CACN,CAAC;AACH,CAAC","sourcesContent":["import DynamicDateRange from \"../DynamicDateRange.js\";\nimport DateTimePicker from \"../DateTimePicker.js\";\nimport Label from \"../Label.js\";\nimport {\n\tDYNAMIC_DATE_TIME_RANGE_TEXT_TO_LABEL,\n\tDYNAMIC_DATE_TIME_RANGE_TEXT_FROM_LABEL,\n} from \"../generated/i18n/i18n-defaults.js\";\n\nexport default function DateTimeRangeTemplate(this: DynamicDateRange) {\n\tconst currentOperator = this.currentValue?.operator || \"DATETIMERANGE\";\n\n\tconst getDateFromValue = (index = 0) => {\n\t\tif (this.value?.operator === currentOperator && this.value.values && this.value.values.length === 2) {\n\t\t\treturn this.getOption(this.value.operator)?.format(this.value)?.split(\"-\")[index].trim();\n\t\t}\n\t\treturn undefined;\n\t};\n\n\tconst handleSelectionChange = () => {\n\t\tconst fromPicker = this.shadowRoot?.querySelector(\"[ui5-datetime-picker]#from-picker\") as DateTimePicker;\n\t\tconst toPicker = this.shadowRoot?.querySelector(\"[ui5-datetime-picker]#to-picker\") as DateTimePicker;\n\n\t\tconst fromDateValue = fromPicker.dateValue;\n\t\tconst toDateValue = toPicker.dateValue;\n\n\t\t// If there are no dates selected, clear the value\n\t\tif (!(fromDateValue && toDateValue)) {\n\t\t\tthis.currentValue = {\n\t\t\t\toperator: currentOperator,\n\t\t\t\tvalues: []\n\t\t\t};\n\t\t\treturn;\n\t\t}\n\n\t\tconst newValue = [fromDateValue, toDateValue];\n\n\t\tif (newValue[0] && newValue[1] && newValue[0].getTime() > newValue[1].getTime()) {\n\t\t\tnewValue.reverse();\n\t\t}\n\n\t\tthis.currentValue = {\n\t\t\toperator: currentOperator,\n\t\t\tvalues: newValue,\n\t\t};\n\t};\n\treturn (\n\t\t<div class=\"ui5-last-next-container ui5-last-next-container-padded\">\n\t\t\t<Label class=\"ui5-ddr-label\">{DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT_FROM_LABEL)}</Label>\n\t\t\t<DateTimePicker\n\t\t\t\tid=\"from-picker\"\n\t\t\t\tonChange={handleSelectionChange}\n\t\t\t\tvalue={getDateFromValue()}>\n\t\t\t</DateTimePicker>\n\t\t\t<Label class=\"ui5-ddr-label\">{DynamicDateRange.i18nBundle.getText(DYNAMIC_DATE_TIME_RANGE_TEXT_TO_LABEL)}</Label>\n\t\t\t<DateTimePicker\n\t\t\t\tid=\"to-picker\"\n\t\t\t\tonChange={handleSelectionChange}\n\t\t\t\tvalue={getDateFromValue(1)}>\n\t\t\t</DateTimePicker>\n\t\t</div>\n\t);\n}\n"]}

package/dist/dynamic-date-range-options/FromDateTime.d.ts

@@ -0,0 +1,36 @@
+import type { DynamicDateRangeValue, IDynamicDateRangeOption } from "../DynamicDateRange.js";
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
+/**
+ * @class
+ * @constructor
+ * @public
+ * @since 2.11.0
+ */
+declare class FromDateTime implements IDynamicDateRangeOption {
+    template: JsxTemplate;
+    private _showTimeView;
+    private _currentDateValue;
+    constructor();
+    parse(value: string): DynamicDateRangeValue;
+    format(value: DynamicDateRangeValue): string;
+    toDates(value: DynamicDateRangeValue): Array<Date>;
+    resetState?: (() => void) | undefined;
+    get text(): string;
+    get operator(): string;
+    get icon(): string;
+    get showDateView(): boolean;
+    get showTimeView(): boolean;
+    get btnDateLabel(): string;
+    get btnTimeLabel(): string;
+    get fromText(): string;
+    getDateValue(date: Date | undefined): string;
+    getTimeValue(date: Date | undefined): string;
+    _dateTimeSwitchChange(): void;
+    isValidString(value: string): boolean;
+    getFormat(): DateFormat;
+    getDateFormat(): DateFormat;
+    getTimeFormat(): DateFormat;
+    handleSelectionChange(e: CustomEvent, value: DynamicDateRangeValue | undefined): DynamicDateRangeValue | undefined;
+}
+export default FromDateTime;