@ui5/webcomponents-fiori 2.21.0 → 2.22.0-rc.1

package/dist/vscode.html-custom-data.json

@@ -1112,7 +1112,7 @@
     },
     {
       "name": "ui5-timeline",
-      "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n\n---\n\n\n\n\n### **Events:**\n - **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.",
+      "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n### Header Bar\n\nThe Timeline supports a `header-bar` slot for search, filter, and sort functionality.\nUse the `ui5-timeline-header-bar` component in this slot.\nThe Timeline fires `search`, `filter`, and `sort` events that the application should handle\nby adding, removing, or reordering items in the DOM. The Timeline itself does not perform\nfiltering or sorting — it renders whatever items are provided in the default slot.\n\n\n---\n\n\n\n\n### **Events:**\n - **filter** - Fired when the user changes filter selection in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the filter selection.\n- **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n- **search** - Fired when the user performs a search in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the search results.\n- **sort** - Fired when the user changes sort order in the header bar.\n\n**Note:** The Timeline does not perform sorting. The application should handle\nthis event and reorder the items in the DOM accordingly.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.\n- **headerBar** - Defines the header bar of the timeline.\nUse `ui5-timeline-header-bar` for filtering, sorting, and search functionality.\n\n**Note:** The Timeline fires `search`, `filter`, and `sort` events when the user interacts\nwith the header bar. The application should handle these events to filter/sort the items.",
       "attributes": [
         {
           "name": "accessible-name",
@@ -1146,6 +1146,23 @@
       ],
       "references": []
     },
+    {
+      "name": "ui5-timeline-filter-option",
+      "description": "### Overview\n\nThe `ui5-timeline-filter-option` component defines individual filter values within a `ui5-timeline-header-bar`.\nIt represents a single selectable option that users can choose to filter timeline items.\n\n### Usage\n\nThe `ui5-timeline-filter-option` is used as a child component within `ui5-timeline-header-bar`.\nEach option represents a specific value that can be used for filtering.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/TimelineFilterOption.js\";`\n\n\n---\n\n\n",
+      "attributes": [
+        {
+          "name": "selected",
+          "description": "Defines if the filter option is selected.",
+          "values": []
+        },
+        {
+          "name": "text",
+          "description": "Defines the text of the filter option.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "ui5-timeline-group-item",
       "description": "### Overview\n\nAn entry posted on the timeline.\nIt is intented to represent a group of `<ui5-timeline-item>`s.\n\n**Note**: Please do not use empty groups in order to preserve the intended design.\n\n\n---\n\n\n\n\n### **Events:**\n - **toggle** - Fired when the group item is expanded or collapsed.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline-group-item`.",
@@ -1163,6 +1180,48 @@
       ],
       "references": []
     },
+    {
+      "name": "ui5-timeline-header-bar",
+      "description": "### Overview\n\nThe `ui5-timeline-header-bar` component provides search, filter, and sort functionality\nfor the `ui5-timeline` component. It is designed to be slotted into the `header-bar` slot\nof the Timeline.\n\n### Usage\n\nThe component fires events (`search`, `filter`, `sort`) that the application should handle\nto filter/sort the timeline items. The Timeline component itself does not perform any\nfiltering or sorting - this is the responsibility of the application.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/TimelineHeaderBar.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **filter** - Fired when the user changes filter selection.\n- **search** - Fired when the user performs a search.\n- **sort** - Fired when the user changes sort order.\n\n### **Slots:**\n - **default** - Filter options to display in the filter dialog.",
+      "attributes": [
+        {
+          "name": "filter-by",
+          "description": "The current filter category label.",
+          "values": []
+        },
+        {
+          "name": "search-value",
+          "description": "The current search value.",
+          "values": []
+        },
+        {
+          "name": "show-filter",
+          "description": "Shows the filter button.",
+          "values": []
+        },
+        {
+          "name": "show-filter-by-date",
+          "description": "Shows the filter by date option.",
+          "values": []
+        },
+        {
+          "name": "show-search",
+          "description": "Shows the search input field.",
+          "values": []
+        },
+        {
+          "name": "show-sort",
+          "description": "Shows the sort button.",
+          "values": []
+        },
+        {
+          "name": "sort-order",
+          "description": "The current sort order.",
+          "values": [{ "name": "Ascending" }, { "name": "Descending" }]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "ui5-timeline-item",
       "description": "### Overview\n\nAn entry posted on the timeline.\n\n\n---\n\n\n\n\n### **Events:**\n - **name-click** - Fired when the item name is pressed either with a\nclick/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `name-clickable`\nattribute is not set.\n\n### **Slots:**\n - **default** - Defines the content of the `ui5-timeline-item`.",
@@ -1605,8 +1664,13 @@
     },
     {
       "name": "ui5-view-settings-dialog",
-      "description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened.\n- **cancel** - Fired when cancel button is activated.\n- **close** - Fired after the dialog is closed.\n- **confirm** - Fired when confirmation button is activated.\n- **open** - Fired after the dialog is opened.\n\n### **Methods:**\n - **setConfirmedSettings(settings: _VSDSettings_): _void_** - Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:\n\n### **Slots:**\n - **filterItems** - Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n- **groupItems** - Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n- **sortItems** - Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n\n### **CSS Parts:**\n - **header** - Used to style the header.",
+      "description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened.\n- **cancel** - Fired when cancel button is activated.\n- **close** - Fired after the dialog is closed.\n- **confirm** - Fired when confirmation button is activated.\n- **open** - Fired after the dialog is opened.\n- **reset-click** - Fired when the Reset button is clicked.\n\n**Note:** Use this event to reset the state of custom tab content,\nas the component cannot detect changes within custom tabs.\n\n### **Methods:**\n - **setConfirmedSettings(settings: _VSDSettings_): _void_** - Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:\n\n### **Slots:**\n - **customTabs** - Defines custom tabs for the dialog.\n\nThe custom tabs are rendered after the built-in tabs (`Sort`, `Filter`, `Group`).\n\n**Note:** If you want to use this slot, you need to import the item: `import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js\";`\n- **filterItems** - Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n- **groupItems** - Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n- **sortItems** - Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n\n### **CSS Parts:**\n - **header** - Used to style the header.",
       "attributes": [
+        {
+          "name": "enable-reset",
+          "description": "Defines whether the Reset button is always enabled.\n\n**Note:** By default, the Reset button is only enabled when the dialog settings\ndiffer from their initial state. Set this property to `true` to keep the Reset\nbutton always enabled, which is useful when working with custom tabs\nwhose internal state changes cannot be detected by the component.",
+          "values": []
+        },
         {
           "name": "group-descending",
           "description": "Defines the initial group order.",
@@ -1625,6 +1689,28 @@
       ],
       "references": []
     },
+    {
+      "name": "ui5-view-settings-dialog-custom-tab",
+      "description": "### Overview\n\nThe `ui5-view-settings-dialog-custom-tab` component allows defining custom tabs for the `ui5-view-settings-dialog`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the custom tab content.\n- **default** - Defines the custom tab content.",
+      "attributes": [
+        {
+          "name": "icon",
+          "description": "Defines the icon of the custom tab.\n\n**Note:** If not provided, the tab should not be rendered.",
+          "values": []
+        },
+        {
+          "name": "title",
+          "description": "Defines the title of the custom tab.\n\n**Note:** It is displayed in the dialog header when this tab is selected.",
+          "values": []
+        },
+        {
+          "name": "tooltip",
+          "description": "Defines the tooltip of the custom tab button.\n\n**Note:** It is shown on the segmented button item.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "ui5-wizard",
       "description": "### Overview\n\nThe `ui5-wizard` helps users to complete a complex task by dividing it into sections and guiding them through it.\nIt has two main areas - a navigation area at the top showing the step sequence and a content area below it.\n\n### Structure\n#### Navigation area\nThe top most area of the `ui5-wizard` is occupied by the navigation area.\nIt shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.\n\n-  Steps can have different visual representations - numbers or icons.\n-  Steps might have labels for better readability - titleText and subTitleText.\n-  Steps are defined by using the `ui5-wizard-step` as slotted element within the `ui5-wizard`.\n\n**Note:** If no selected step is defined, the first step will be auto selected.\n\n**Note:** If multiple selected steps are defined, the last step will be selected.\n\n### Keyboard Handling\nThe user can navigate using the following keyboard shortcuts:\n\n#### Wizard Progress Navigation\n\n\t- [Left] or [Down] - Focus moves backward to the WizardProgressNavAnchors.\n\t- [Up] or [Right] - Focus moves forward to the WizardProgressNavAnchor.\n\t- [Space] / [Enter] or [Return] - Selects an active step\n\t- [Home] or [PAGE UP] - Focus goes to the first step\n\t- [End] or [PAGE DOWN] - Focus goes to the last step\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`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n#### Content\nThe content occupies the main part of the page. It can hold any type of HTML elements.\nIt's defined by using the `ui5-wizard-step` as slotted element within the `ui5-wizard`.\n\n### Scrolling\nThe component handles user scrolling by selecting the closest step, based on the current scroll position\nand scrolls to particular place, when the user clicks on the step within the navigation area.\n\n**Important:** In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height.\nThe component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page.\n\n**For example:**\n\n```html\n<ui5-dialog style=\"height: 80%\">\n\t<ui5-wizard></ui5-wizard>\n</ui5-dialog>\n```\n\n#### Moving to next step\nThe `ui5-wizard-step` provides the necessary API and it's up to the user of the component to use it to move to the next step.\nYou have to set its `selected` property (and remove the `disabled` one if set) to `true`.\nThe `ui5-wizard` will automatically scroll to the content of the newly selected step.\n\nThe Fiori 3 guidelines recommends having a \"nextStep\" button in the content area.\nYou can place a button, or any other type of element to trigger step change, inside the `ui5-wizard-step`,\nand show/hide it when certain fields are filled or user defined criteria is met.\n\n### Usage\n#### When to use:\nWhen the user has to accomplish a long or unfamiliar task.\n\n#### When not to use:\nWhen the task has less than 3 steps.\n\n### Responsive Behavior\nOn small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap.\nTapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/Wizard.js\";` (includes <ui5-wizard-step/>)\n\n\n---\n\n\n\n\n### **Events:**\n - **step-change** - Fired when the step is changed by user interaction - either with scrolling,\nor by clicking on the steps within the component header.\n\n### **Slots:**\n - **default** - Defines the steps.\n\n**Note:** Use the available `ui5-wizard-step` component.\n\n### **CSS Parts:**\n - **navigator** - Used to style the progress navigator of the `ui5-wizard`.\n- **step-content** - Used to style a `ui5-wizard-step` container.",

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-fiori",
-  "version": "2.21.0",
+  "version": "2.22.0-rc.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2667,7 +2667,7 @@
         },
         {
           "name": "ui5-timeline",
-          "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n---\n\n\n### **Events:**\n - **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.",
+          "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n### Header Bar\n\nThe Timeline supports a `header-bar` slot for search, filter, and sort functionality.\nUse the `ui5-timeline-header-bar` component in this slot.\nThe Timeline fires `search`, `filter`, and `sort` events that the application should handle\nby adding, removing, or reordering items in the DOM. The Timeline itself does not perform\nfiltering or sorting — it renders whatever items are provided in the default slot.\n---\n\n\n### **Events:**\n - **filter** - Fired when the user changes filter selection in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the filter selection.\n- **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n- **search** - Fired when the user performs a search in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the search results.\n- **sort** - Fired when the user changes sort order in the header bar.\n\n**Note:** The Timeline does not perform sorting. The application should handle\nthis event and reorder the items in the DOM accordingly.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.\n- **headerBar** - Defines the header bar of the timeline.\nUse `ui5-timeline-header-bar` for filtering, sorting, and search functionality.\n\n**Note:** The Timeline fires `search`, `filter`, and `sort` events when the user interacts\nwith the header bar. The application should handle these events to filter/sort the items.",
           "doc-url": "",
           "attributes": [
             {
@@ -2706,12 +2706,28 @@
             {
               "name": "default",
               "description": "Determines the content of the `ui5-timeline`."
+            },
+            {
+              "name": "headerBar",
+              "description": "Defines the header bar of the timeline.\nUse `ui5-timeline-header-bar` for filtering, sorting, and search functionality.\n\n**Note:** The Timeline fires `search`, `filter`, and `sort` events when the user interacts\nwith the header bar. The application should handle these events to filter/sort the items."
             }
           ],
           "events": [
+            {
+              "name": "filter",
+              "description": "Fired when the user changes filter selection in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the filter selection."
+            },
             {
               "name": "load-more",
               "description": "Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`."
+            },
+            {
+              "name": "search",
+              "description": "Fired when the user performs a search in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the search results."
+            },
+            {
+              "name": "sort",
+              "description": "Fired when the user changes sort order in the header bar.\n\n**Note:** The Timeline does not perform sorting. The application should handle\nthis event and reorder the items in the DOM accordingly."
             }
           ],
           "js": {
@@ -2743,13 +2759,58 @@
               }
             ],
             "events": [
+              {
+                "name": "filter",
+                "description": "Fired when the user changes filter selection in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the filter selection."
+              },
               {
                 "name": "load-more",
                 "description": "Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`."
+              },
+              {
+                "name": "search",
+                "description": "Fired when the user performs a search in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the search results."
+              },
+              {
+                "name": "sort",
+                "description": "Fired when the user changes sort order in the header bar.\n\n**Note:** The Timeline does not perform sorting. The application should handle\nthis event and reorder the items in the DOM accordingly."
               }
             ]
           }
         },
+        {
+          "name": "ui5-timeline-filter-option",
+          "description": "### Overview\n\nThe `ui5-timeline-filter-option` component defines individual filter values within a `ui5-timeline-header-bar`.\nIt represents a single selectable option that users can choose to filter timeline items.\n\n### Usage\n\nThe `ui5-timeline-filter-option` is used as a child component within `ui5-timeline-header-bar`.\nEach option represents a specific value that can be used for filtering.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/TimelineFilterOption.js\";`\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "selected",
+              "description": "Defines if the filter option is selected.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "text",
+              "description": "Defines the text of the filter option.",
+              "value": { "type": "string", "default": "\"\"" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "selected",
+                "description": "Defines if the filter option is selected.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "text",
+                "description": "Defines the text of the filter option.",
+                "value": { "type": "string" }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "ui5-timeline-group-item",
           "description": "### Overview\n\nAn entry posted on the timeline.\nIt is intented to represent a group of `<ui5-timeline-item>`s.\n\n**Note**: Please do not use empty groups in order to preserve the intended design.\n---\n\n\n### **Events:**\n - **toggle** - Fired when the group item is expanded or collapsed.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline-group-item`.",
@@ -2799,6 +2860,124 @@
             ]
           }
         },
+        {
+          "name": "ui5-timeline-header-bar",
+          "description": "### Overview\n\nThe `ui5-timeline-header-bar` component provides search, filter, and sort functionality\nfor the `ui5-timeline` component. It is designed to be slotted into the `header-bar` slot\nof the Timeline.\n\n### Usage\n\nThe component fires events (`search`, `filter`, `sort`) that the application should handle\nto filter/sort the timeline items. The Timeline component itself does not perform any\nfiltering or sorting - this is the responsibility of the application.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/TimelineHeaderBar.js\";`\n---\n\n\n### **Events:**\n - **filter** - Fired when the user changes filter selection.\n- **search** - Fired when the user performs a search.\n- **sort** - Fired when the user changes sort order.\n\n### **Slots:**\n - **default** - Filter options to display in the filter dialog.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "filter-by",
+              "description": "The current filter category label.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "search-value",
+              "description": "The current search value.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "show-filter",
+              "description": "Shows the filter button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "show-filter-by-date",
+              "description": "Shows the filter by date option.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "show-search",
+              "description": "Shows the search input field.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "show-sort",
+              "description": "Shows the sort button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "sort-order",
+              "description": "The current sort order.",
+              "value": {
+                "type": "\"Ascending\" | \"Descending\"",
+                "default": "\"Ascending\""
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Filter options to display in the filter dialog."
+            }
+          ],
+          "events": [
+            {
+              "name": "filter",
+              "description": "Fired when the user changes filter selection."
+            },
+            {
+              "name": "search",
+              "description": "Fired when the user performs a search."
+            },
+            {
+              "name": "sort",
+              "description": "Fired when the user changes sort order."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "filter-by",
+                "description": "The current filter category label.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "search-value",
+                "description": "The current search value.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "show-filter",
+                "description": "Shows the filter button.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "show-filter-by-date",
+                "description": "Shows the filter by date option.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "show-search",
+                "description": "Shows the search input field.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "show-sort",
+                "description": "Shows the sort button.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "sort-order",
+                "description": "The current sort order.",
+                "value": { "type": "\"Ascending\" | \"Descending\"" }
+              }
+            ],
+            "events": [
+              {
+                "name": "filter",
+                "description": "Fired when the user changes filter selection."
+              },
+              {
+                "name": "search",
+                "description": "Fired when the user performs a search."
+              },
+              {
+                "name": "sort",
+                "description": "Fired when the user changes sort order."
+              }
+            ]
+          }
+        },
         {
           "name": "ui5-timeline-item",
           "description": "### Overview\n\nAn entry posted on the timeline.\n---\n\n\n### **Events:**\n - **name-click** - Fired when the item name is pressed either with a\nclick/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `name-clickable`\nattribute is not set.\n\n### **Slots:**\n - **default** - Defines the content of the `ui5-timeline-item`.",
@@ -3908,9 +4087,14 @@
         },
         {
           "name": "ui5-view-settings-dialog",
-          "description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened.\n- **cancel** - Fired when cancel button is activated.\n- **close** - Fired after the dialog is closed.\n- **confirm** - Fired when confirmation button is activated.\n- **open** - Fired after the dialog is opened.\n\n### **Methods:**\n - **setConfirmedSettings(settings: _VSDSettings_): _void_** - Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:\n\n### **Slots:**\n - **filterItems** - Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n- **groupItems** - Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n- **sortItems** - Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n\n### **CSS Parts:**\n - **header** - Used to style the header.",
+          "description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened.\n- **cancel** - Fired when cancel button is activated.\n- **close** - Fired after the dialog is closed.\n- **confirm** - Fired when confirmation button is activated.\n- **open** - Fired after the dialog is opened.\n- **reset-click** - Fired when the Reset button is clicked.\n\n**Note:** Use this event to reset the state of custom tab content,\nas the component cannot detect changes within custom tabs.\n\n### **Methods:**\n - **setConfirmedSettings(settings: _VSDSettings_): _void_** - Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:\n\n### **Slots:**\n - **customTabs** - Defines custom tabs for the dialog.\n\nThe custom tabs are rendered after the built-in tabs (`Sort`, `Filter`, `Group`).\n\n**Note:** If you want to use this slot, you need to import the item: `import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js\";`\n- **filterItems** - Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n- **groupItems** - Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n- **sortItems** - Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n\n### **CSS Parts:**\n - **header** - Used to style the header.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "enable-reset",
+              "description": "Defines whether the Reset button is always enabled.\n\n**Note:** By default, the Reset button is only enabled when the dialog settings\ndiffer from their initial state. Set this property to `true` to keep the Reset\nbutton always enabled, which is useful when working with custom tabs\nwhose internal state changes cannot be detected by the component.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "group-descending",
               "description": "Defines the initial group order.",
@@ -3928,6 +4112,10 @@
             }
           ],
           "slots": [
+            {
+              "name": "customTabs",
+              "description": "Defines custom tabs for the dialog.\n\nThe custom tabs are rendered after the built-in tabs (`Sort`, `Filter`, `Group`).\n\n**Note:** If you want to use this slot, you need to import the item: `import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js\";`"
+            },
             {
               "name": "filterItems",
               "description": "Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`"
@@ -3961,10 +4149,19 @@
             {
               "name": "open",
               "description": "Fired after the dialog is opened."
+            },
+            {
+              "name": "reset-click",
+              "description": "Fired when the Reset button is clicked.\n\n**Note:** Use this event to reset the state of custom tab content,\nas the component cannot detect changes within custom tabs."
             }
           ],
           "js": {
             "properties": [
+              {
+                "name": "enable-reset",
+                "description": "Defines whether the Reset button is always enabled.\n\n**Note:** By default, the Reset button is only enabled when the dialog settings\ndiffer from their initial state. Set this property to `true` to keep the Reset\nbutton always enabled, which is useful when working with custom tabs\nwhose internal state changes cannot be detected by the component.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "group-descending",
                 "description": "Defines the initial group order.",
@@ -4001,10 +4198,67 @@
               {
                 "name": "open",
                 "description": "Fired after the dialog is opened."
+              },
+              {
+                "name": "reset-click",
+                "description": "Fired when the Reset button is clicked.\n\n**Note:** Use this event to reset the state of custom tab content,\nas the component cannot detect changes within custom tabs."
               }
             ]
           }
         },
+        {
+          "name": "ui5-view-settings-dialog-custom-tab",
+          "description": "### Overview\n\nThe `ui5-view-settings-dialog-custom-tab` component allows defining custom tabs for the `ui5-view-settings-dialog`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the custom tab content.\n- **default** - Defines the custom tab content.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "icon",
+              "description": "Defines the icon of the custom tab.\n\n**Note:** If not provided, the tab should not be rendered.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "title",
+              "description": "Defines the title of the custom tab.\n\n**Note:** It is displayed in the dialog header when this tab is selected.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "tooltip",
+              "description": "Defines the tooltip of the custom tab button.\n\n**Note:** It is shown on the segmented button item.",
+              "value": { "type": "string", "default": "\"\"" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Defines the custom tab content."
+            },
+            {
+              "name": "default",
+              "description": "Defines the custom tab content."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "icon",
+                "description": "Defines the icon of the custom tab.\n\n**Note:** If not provided, the tab should not be rendered.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "title",
+                "description": "Defines the title of the custom tab.\n\n**Note:** It is displayed in the dialog header when this tab is selected.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "tooltip",
+                "description": "Defines the tooltip of the custom tab button.\n\n**Note:** It is shown on the segmented button item.",
+                "value": { "type": "string" }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "ui5-wizard",
           "description": "### Overview\n\nThe `ui5-wizard` helps users to complete a complex task by dividing it into sections and guiding them through it.\nIt has two main areas - a navigation area at the top showing the step sequence and a content area below it.\n\n### Structure\n#### Navigation area\nThe top most area of the `ui5-wizard` is occupied by the navigation area.\nIt shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.\n\n-  Steps can have different visual representations - numbers or icons.\n-  Steps might have labels for better readability - titleText and subTitleText.\n-  Steps are defined by using the `ui5-wizard-step` as slotted element within the `ui5-wizard`.\n\n**Note:** If no selected step is defined, the first step will be auto selected.\n\n**Note:** If multiple selected steps are defined, the last step will be selected.\n\n### Keyboard Handling\nThe user can navigate using the following keyboard shortcuts:\n\n#### Wizard Progress Navigation\n\n\t- [Left] or [Down] - Focus moves backward to the WizardProgressNavAnchors.\n\t- [Up] or [Right] - Focus moves forward to the WizardProgressNavAnchor.\n\t- [Space] / [Enter] or [Return] - Selects an active step\n\t- [Home] or [PAGE UP] - Focus goes to the first step\n\t- [End] or [PAGE DOWN] - Focus goes to the last step\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`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n#### Content\nThe content occupies the main part of the page. It can hold any type of HTML elements.\nIt's defined by using the `ui5-wizard-step` as slotted element within the `ui5-wizard`.\n\n### Scrolling\nThe component handles user scrolling by selecting the closest step, based on the current scroll position\nand scrolls to particular place, when the user clicks on the step within the navigation area.\n\n**Important:** In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height.\nThe component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page.\n\n**For example:**\n\n```html\n<ui5-dialog style=\"height: 80%\">\n\t<ui5-wizard></ui5-wizard>\n</ui5-dialog>\n```\n\n#### Moving to next step\nThe `ui5-wizard-step` provides the necessary API and it's up to the user of the component to use it to move to the next step.\nYou have to set its `selected` property (and remove the `disabled` one if set) to `true`.\nThe `ui5-wizard` will automatically scroll to the content of the newly selected step.\n\nThe Fiori 3 guidelines recommends having a \"nextStep\" button in the content area.\nYou can place a button, or any other type of element to trigger step change, inside the `ui5-wizard-step`,\nand show/hide it when certain fields are filled or user defined criteria is met.\n\n### Usage\n#### When to use:\nWhen the user has to accomplish a long or unfamiliar task.\n\n#### When not to use:\nWhen the task has less than 3 steps.\n\n### Responsive Behavior\nOn small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap.\nTapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents-fiori/dist/Wizard.js\";` (includes <ui5-wizard-step/>)\n---\n\n\n### **Events:**\n - **step-change** - Fired when the step is changed by user interaction - either with scrolling,\nor by clicking on the steps within the component header.\n\n### **Slots:**\n - **default** - Defines the steps.\n\n**Note:** Use the available `ui5-wizard-step` component.\n\n### **CSS Parts:**\n - **navigator** - Used to style the progress navigator of the `ui5-wizard`.\n- **step-content** - Used to style a `ui5-wizard-step` container.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.21.0",
+  "version": "2.22.0-rc.1",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.21.0",
-    "@ui5/webcomponents-base": "2.21.0",
-    "@ui5/webcomponents-icons": "2.21.0",
-    "@ui5/webcomponents-theming": "2.21.0",
+    "@ui5/webcomponents": "2.22.0-rc.1",
+    "@ui5/webcomponents-base": "2.22.0-rc.1",
+    "@ui5/webcomponents-icons": "2.22.0-rc.1",
+    "@ui5/webcomponents-theming": "2.22.0-rc.1",
     "@zxing/library": "^0.21.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.21.0",
+    "@ui5/webcomponents-tools": "2.22.0-rc.1",
     "cypress": "15.9.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "yarn": "^1.22.22"
   },
-  "gitHead": "a0d9146d9d08f171cabe6d826f104897261a139b"
+  "gitHead": "00afa74564cad7075396a487d66411ed6564e747"
 }