@sapudex/web-components 2.22.0 → 2.23.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -878,49 +878,9 @@
         },
         {
           "name": "udex-country-selector",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-country-selector</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/CountrySelector.js\";</code>\n---\n\n\n### **Events:**\n - **before-open** - Fired before the dropdown pane is opened.\n- **open** - Fired after the dropdown pane is opened.\n- **before-close** - Fired before the dropdown pane is closed.\n- **close** - Fired after the dropdown pane is closed.\n- **change-search** - Fired event when the user submitted the value in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **selection-change** - \n- **select-all** - Fired event when the user clicks on the Select All header.\n- **first-icon-click** - Fired event when the user clicks on the first icon.\n- **second-icon-click** - Fired event when the user clicks on the second icon.\n\n### **Methods:**\n - **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-country-selector</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/CountrySelector.js\";</code>\n---\n",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "label",
-              "description": "Defines label text for the input field.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "accessible-name",
-              "description": "Defines the accessible ARIA name of the component.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "accessible-name-ref",
-              "description": "Receives id (or many ids) of the elements that label the component.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "required",
-              "description": "Defines whether the component is required.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "height",
-              "description": "Allows control over the height.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "disabled",
-              "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "readonly",
-              "description": "Defines whether the component is read-only.\n<br><br>\n<b>Note:</b> A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "displayonly",
-              "description": "Defines whether the component is display-only.\n<br><br>\n<b>Note:</b> A display-only component is not editable,\nbut still provides visual feedback upon user interaction, input border is not visible.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "preselected-country",
               "description": "Allows to define the initially preselected country.",
@@ -932,181 +892,156 @@
               "value": { "type": "string | undefined", "default": "\"\"" }
             },
             {
-              "name": "search-placeholder",
-              "description": "Defines the placeholder of the search.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
+              "name": "hide-flag-images",
+              "description": "Allows to hide the flag images in the country selector.",
+              "value": { "type": "boolean | undefined", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "preselected-country",
+                "description": "Allows to define the initially preselected country.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "blocked-country-codes",
+                "description": "Allows to define the list of blocked country.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "hide-flag-images",
+                "description": "Allows to hide the flag images in the country selector.",
+                "value": { "type": "boolean | undefined" }
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "udex-date-picker",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-date-picker</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/DatePicker.js\";</code>\n---\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n\n### **Methods:**\n - **isValid(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isInValidRangeRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.",
+          "doc-url": "",
+          "attributes": [
             {
-              "name": "value-state",
-              "description": "Defines the value state of the component.",
+              "name": "selection-mode",
+              "description": "Defines selection mode of the calendar component.",
               "value": {
-                "type": "\"Warning\" | \"Success\" | \"Error\" | \"Standard\"",
-                "default": "\"Standard\""
+                "type": "\"Single\" | \"Range\"",
+                "default": "\"Single\""
               }
             },
             {
-              "name": "supporting-text",
-              "description": "Defines supporting text under the country selector.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "hide-flag-images",
-              "value": { "type": "boolean | undefined" }
+              "name": "readonly",
+              "description": "Defines whether the component is read-only.\n<br><br>\n<b>Note:</b> A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "tab-navigation-enabled",
-              "description": "Enables tab navigation for the list.",
-              "value": { "type": "boolean | undefined", "default": "\"\"" }
+              "name": "required",
+              "description": "Defines whether the component is required.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "prevent-page-scroll",
-              "description": "Defines if page scrolling should be prevented within the list of items.",
+              "name": "disabled",
+              "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "busy",
-              "description": "Defines if the component would display a loading indicator.",
-              "value": { "type": "boolean | undefined", "default": "false" }
+              "name": "supporting-text",
+              "description": "Defines supporting text under the input field.",
+              "value": { "type": "string", "default": "\"\"" }
             },
             {
-              "name": "show-search-input",
-              "description": "Defines if the search input is visible.",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "value",
+              "description": "Defines the value of the input.",
+              "value": { "type": "string", "default": "\"\"" }
             },
             {
-              "name": "busy-delay",
-              "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
-              "value": { "type": "number", "default": "1000" }
+              "name": "accessible-name",
+              "description": "Sets the accessible ARIA name of the component.",
+              "value": { "type": "string", "default": "undefined" }
             },
             {
-              "name": "no-result-text",
-              "description": "Defines the \"no result\" text of the component.",
+              "name": "accessible-name-ref",
+              "description": "Receives id (or many ids) of the elements that label the component.",
               "value": { "type": "string", "default": "\"\"" }
             },
             {
-              "name": "select-all",
-              "description": "Defines the selectAll option of the component.",
-              "value": { "type": "boolean | undefined", "default": "false" }
-            },
-            {
-              "name": "select-all-label",
-              "description": "Defines label text for select all header.",
-              "value": { "type": "string", "default": "\"Select All\"" }
+              "name": "label",
+              "description": "Defines label text for the input field.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "mode",
-              "description": "Defines the mode of the component.",
+              "name": "value-state",
+              "description": "Defines the value state of the component.",
               "value": {
-                "type": "\"SingleSelect\" | \"MultiSelect\" | \"SingleContent\" | \"RadioGroup\"",
-                "default": "\"SingleSelect\""
+                "type": "\"Warning\" | \"Success\" | \"Error\" | \"Standard\"",
+                "default": "\"Standard\""
               }
             },
             {
-              "name": "default-accessible-role",
-              "description": "Defines the default accessible role for the list componnet.",
-              "value": { "type": "string", "default": "\"list\"" }
+              "name": "format-pattern",
+              "description": "Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").",
+              "value": { "type": "string", "default": "\"MMM dd, yyyy\"" }
             }
           ],
-          "slots": [{ "name": "default", "description": "Slot for items." }],
           "events": [
             {
-              "name": "before-open",
-              "description": "Fired before the dropdown pane is opened."
-            },
-            {
-              "name": "open",
-              "description": "Fired after the dropdown pane is opened."
-            },
-            {
-              "name": "before-close",
-              "description": "Fired before the dropdown pane is closed."
-            },
-            {
-              "name": "close",
-              "description": "Fired after the dropdown pane is closed."
-            },
-            {
-              "name": "change-search",
-              "description": "Fired event when the user submitted the value in the search."
-            },
-            {
-              "name": "reset-search",
-              "description": "Fired event when the user clicks on the reset button in the search."
-            },
-            {
-              "name": "submit-search",
-              "description": "Fired event when the user clicks on the submitted icon in the search."
-            },
-            { "name": "selection-change", "description": "" },
-            {
-              "name": "select-all",
-              "description": "Fired event when the user clicks on the Select All header."
-            },
-            {
-              "name": "first-icon-click",
-              "description": "Fired event when the user clicks on the first icon."
+              "name": "selection-change",
+              "description": "Fired when the selected dates change."
             },
             {
-              "name": "second-icon-click",
-              "description": "Fired event when the user clicks on the second icon."
+              "name": "value-state-change",
+              "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state."
             }
           ],
           "js": {
             "properties": [
               {
-                "name": "label",
-                "description": "Defines label text for the input field.",
-                "value": { "type": "string | undefined" }
-              },
-              {
-                "name": "accessible-name",
-                "description": "Defines the accessible ARIA name of the component.",
-                "value": { "type": "string | undefined" }
+                "name": "selection-mode",
+                "description": "Defines selection mode of the calendar component.",
+                "value": { "type": "\"Single\" | \"Range\"" }
               },
               {
-                "name": "accessible-name-ref",
-                "description": "Receives id (or many ids) of the elements that label the component.",
-                "value": { "type": "string" }
+                "name": "readonly",
+                "description": "Defines whether the component is read-only.\n<br><br>\n<b>Note:</b> A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
+                "value": { "type": "boolean" }
               },
               {
                 "name": "required",
                 "description": "Defines whether the component is required.",
                 "value": { "type": "boolean" }
               },
-              {
-                "name": "height",
-                "description": "Allows control over the height.",
-                "value": { "type": "string | undefined" }
-              },
               {
                 "name": "disabled",
                 "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "readonly",
-                "description": "Defines whether the component is read-only.\n<br><br>\n<b>Note:</b> A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
-                "value": { "type": "boolean" }
+                "name": "supporting-text",
+                "description": "Defines supporting text under the input field.",
+                "value": { "type": "string" }
               },
               {
-                "name": "displayonly",
-                "description": "Defines whether the component is display-only.\n<br><br>\n<b>Note:</b> A display-only component is not editable,\nbut still provides visual feedback upon user interaction, input border is not visible.",
-                "value": { "type": "boolean" }
+                "name": "value",
+                "description": "Defines the value of the input.",
+                "value": { "type": "string" }
               },
               {
-                "name": "preselected-country",
-                "description": "Allows to define the initially preselected country.",
+                "name": "accessible-name",
+                "description": "Sets the accessible ARIA name of the component.",
                 "value": { "type": "string" }
               },
               {
-                "name": "blocked-country-codes",
-                "description": "Allows to define the list of blocked country.",
-                "value": { "type": "string | undefined" }
+                "name": "accessible-name-ref",
+                "description": "Receives id (or many ids) of the elements that label the component.",
+                "value": { "type": "string" }
               },
               {
-                "name": "search-placeholder",
-                "description": "Defines the placeholder of the search.",
-                "value": { "type": "string" }
+                "name": "label",
+                "description": "Defines label text for the input field.",
+                "value": { "type": "string | undefined" }
               },
               {
                 "name": "value-state",
@@ -1116,253 +1051,15 @@
                 }
               },
               {
-                "name": "supporting-text",
-                "description": "Defines supporting text under the country selector.",
-                "value": { "type": "string | undefined" }
-              },
-              {
-                "name": "hide-flag-images",
-                "value": { "type": "boolean | undefined" }
-              },
+                "name": "format-pattern",
+                "description": "Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").",
+                "value": { "type": "string" }
+              }
+            ],
+            "events": [
               {
-                "name": "tab-navigation-enabled",
-                "description": "Enables tab navigation for the list.",
-                "value": { "type": "boolean | undefined" }
-              },
-              {
-                "name": "prevent-page-scroll",
-                "description": "Defines if page scrolling should be prevented within the list of items.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "busy",
-                "description": "Defines if the component would display a loading indicator.",
-                "value": { "type": "boolean | undefined" }
-              },
-              {
-                "name": "show-search-input",
-                "description": "Defines if the search input is visible.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "busy-delay",
-                "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
-                "value": { "type": "number" }
-              },
-              {
-                "name": "no-result-text",
-                "description": "Defines the \"no result\" text of the component.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "select-all",
-                "description": "Defines the selectAll option of the component.",
-                "value": { "type": "boolean | undefined" }
-              },
-              {
-                "name": "select-all-label",
-                "description": "Defines label text for select all header.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "mode",
-                "description": "Defines the mode of the component.",
-                "value": {
-                  "type": "\"SingleSelect\" | \"MultiSelect\" | \"SingleContent\" | \"RadioGroup\""
-                }
-              },
-              {
-                "name": "default-accessible-role",
-                "description": "Defines the default accessible role for the list componnet.",
-                "value": { "type": "string" }
-              }
-            ],
-            "events": [
-              {
-                "name": "before-open",
-                "description": "Fired before the dropdown pane is opened."
-              },
-              {
-                "name": "open",
-                "description": "Fired after the dropdown pane is opened."
-              },
-              {
-                "name": "before-close",
-                "description": "Fired before the dropdown pane is closed."
-              },
-              {
-                "name": "close",
-                "description": "Fired after the dropdown pane is closed."
-              },
-              {
-                "name": "change-search",
-                "description": "Fired event when the user submitted the value in the search."
-              },
-              {
-                "name": "reset-search",
-                "description": "Fired event when the user clicks on the reset button in the search."
-              },
-              {
-                "name": "submit-search",
-                "description": "Fired event when the user clicks on the submitted icon in the search."
-              },
-              { "name": "selection-change", "description": "" },
-              {
-                "name": "select-all",
-                "description": "Fired event when the user clicks on the Select All header."
-              },
-              {
-                "name": "first-icon-click",
-                "description": "Fired event when the user clicks on the first icon."
-              },
-              {
-                "name": "second-icon-click",
-                "description": "Fired event when the user clicks on the second icon."
-              }
-            ]
-          }
-        },
-        {
-          "name": "udex-date-picker",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-date-picker</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/DatePicker.js\";</code>\n---\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n\n### **Methods:**\n - **isValid(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isInValidRangeRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "selection-mode",
-              "description": "Defines selection mode of the calendar component.",
-              "value": {
-                "type": "\"Single\" | \"Range\"",
-                "default": "\"Single\""
-              }
-            },
-            {
-              "name": "readonly",
-              "description": "Defines whether the component is read-only.\n<br><br>\n<b>Note:</b> A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "required",
-              "description": "Defines whether the component is required.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "disabled",
-              "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "supporting-text",
-              "description": "Defines supporting text under the input field.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "value",
-              "description": "Defines the value of the input.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "accessible-name",
-              "description": "Sets the accessible ARIA name of the component.",
-              "value": { "type": "string", "default": "undefined" }
-            },
-            {
-              "name": "accessible-name-ref",
-              "description": "Receives id (or many ids) of the elements that label the component.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "label",
-              "description": "Defines label text for the input field.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "value-state",
-              "description": "Defines the value state of the component.",
-              "value": {
-                "type": "\"Warning\" | \"Success\" | \"Error\" | \"Standard\"",
-                "default": "\"Standard\""
-              }
-            },
-            {
-              "name": "format-pattern",
-              "description": "Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").",
-              "value": { "type": "string", "default": "\"MMM dd, yyyy\"" }
-            }
-          ],
-          "events": [
-            {
-              "name": "selection-change",
-              "description": "Fired when the selected dates change."
-            },
-            {
-              "name": "value-state-change",
-              "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "selection-mode",
-                "description": "Defines selection mode of the calendar component.",
-                "value": { "type": "\"Single\" | \"Range\"" }
-              },
-              {
-                "name": "readonly",
-                "description": "Defines whether the component is read-only.\n<br><br>\n<b>Note:</b> A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "required",
-                "description": "Defines whether the component is required.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "disabled",
-                "description": "Defines whether the component is in disabled state.\n<br><br>\n<b>Note:</b> A disabled component is completely noninteractive.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "supporting-text",
-                "description": "Defines supporting text under the input field.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "value",
-                "description": "Defines the value of the input.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "accessible-name",
-                "description": "Sets the accessible ARIA name of the component.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "accessible-name-ref",
-                "description": "Receives id (or many ids) of the elements that label the component.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "label",
-                "description": "Defines label text for the input field.",
-                "value": { "type": "string | undefined" }
-              },
-              {
-                "name": "value-state",
-                "description": "Defines the value state of the component.",
-                "value": {
-                  "type": "\"Warning\" | \"Success\" | \"Error\" | \"Standard\""
-                }
-              },
-              {
-                "name": "format-pattern",
-                "description": "Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").",
-                "value": { "type": "string" }
-              }
-            ],
-            "events": [
-              {
-                "name": "selection-change",
-                "description": "Fired when the selected dates change."
+                "name": "selection-change",
+                "description": "Fired when the selected dates change."
               },
               {
                 "name": "value-state-change",
@@ -1897,7 +1594,7 @@
             },
             {
               "name": "default-accessible-role",
-              "description": "Defines the default accessible role for the list componnet.",
+              "description": "Defines the default accessible role for the list component.",
               "value": { "type": "string", "default": "\"list\"" }
             }
           ],
@@ -2093,7 +1790,7 @@
               },
               {
                 "name": "default-accessible-role",
-                "description": "Defines the default accessible role for the list componnet.",
+                "description": "Defines the default accessible role for the list component.",
                 "value": { "type": "string" }
               }
             ],
@@ -6692,456 +6389,177 @@
           "events": [
             {
               "name": "sub-item-click",
-              "description": "Fires when item is clicked"
-            },
-            {
-              "name": "back-item-click",
-              "description": "Fires when back item is clicked"
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "is-back",
-                "description": "Defines back item.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "nested-items",
-                "description": "List of the nested items",
-                "value": { "type": "NavItem[]" }
-              },
-              {
-                "name": "mobile-link-title",
-                "description": "Defines an aria label for item",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "active",
-                "description": "Defines active state for the item",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "path",
-                "description": "Defines path for the item",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "target",
-                "description": "Defines target for the item",
-                "value": { "type": "UDExTarget" }
-              },
-              {
-                "name": "sub-title",
-                "description": "Defines subTitle for the item",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "label",
-                "description": "Defines label for the item",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "index",
-                "description": "Defines the index for the item.",
-                "value": { "type": "number" }
-              }
-            ],
-            "events": [
-              {
-                "name": "sub-item-click",
-                "description": "Fires when item is clicked"
-              },
-              {
-                "name": "back-item-click",
-                "description": "Fires when back item is clicked"
-              }
-            ]
-          }
-        },
-        {
-          "name": "udex-segmented-button",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-segmented-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SegmentedButton.js\";</code>\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "size",
-              "description": "Defines the size of the button.",
-              "value": {
-                "type": "\"Medium\" | \"Small\" | \"Large\"",
-                "default": "\"Medium\""
-              }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "size",
-                "description": "Defines the size of the button.",
-                "value": { "type": "\"Medium\" | \"Small\" | \"Large\"" }
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "udex-segmented-button-item",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-segmented-button-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SegmentedButtonItem.js\";</code>\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "size",
-              "description": "Defines the size of the button.",
-              "value": {
-                "type": "\"Medium\" | \"Small\" | \"Large\"",
-                "default": "\"Medium\""
-              }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "size",
-                "description": "Defines the size of the button.",
-                "value": { "type": "\"Medium\" | \"Small\" | \"Large\"" }
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "udex-select-box",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-select-box</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExSelectBox.js\";</code>\n---\n\n\n### **Events:**\n - **remove** - Fired event when the user clicks on the reset button in the search.\n- **show-more** - Fired event when the user clicks on the More button.\n- **before-open** - Fired before the dropdown pane is opened.\n- **selection-change** - \n- **select-all** - Fired event when the user clicks on the Select All header.\n- **submit-search** - Fired event when the user clicks on the submitted icon in the search.\n- **reset-search** - Fired event when the user clicks on the reset button in the search.\n- **change-search** - Fired event when the user submitted the value in the search.\n- **first-icon-click** - Fired event when the user clicks on the first icon.\n- **second-icon-click** - Fired event when the user clicks on the second icon.\n\n### **Methods:**\n - **close(): _void_** - Close the dropdown.\n- **resetSearch()** - Reset the search value.\n\n### **Slots:**\n - **default** - Slot for items.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "disable-target-overlap",
-              "description": "Determines if there is no enough space, the component can be placed\nover the target.",
-              "value": { "type": "boolean | undefined", "default": "false" }
-            },
-            {
-              "name": "required",
-              "description": "Defines whether the component is required.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "disabled",
-              "description": "Defines whether the component is in disabled state.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "label",
-              "description": "Defines label text for field container.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "accessible-name",
-              "description": "Defines the accessible ARIA name of the component.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "accessible-name-ref",
-              "description": "Receives id (or many ids) of the elements that label the component.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "readonly",
-              "description": "Defines whether the component is read-only.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "displayonly",
-              "description": "Defines whether the component is display-only.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "value-state",
-              "description": "Defines the value state of the trigger container.",
-              "value": {
-                "type": "\"Warning\" | \"Success\" | \"Error\" | \"Standard\"",
-                "default": "\"Standard\""
-              }
-            },
-            {
-              "name": "supporting-text",
-              "description": "Defines supporting text under the trigger container.",
-              "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "tooltip-placement",
-              "description": "Determines on which side of the component the Tooltip is displayed.",
-              "value": {
-                "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\"",
-                "default": "\"Bottom\""
-              }
-            },
-            {
-              "name": "tab-navigation-enabled",
-              "description": "Enables tab navigation for the list.",
-              "value": { "type": "boolean | undefined", "default": "\"\"" }
-            },
-            {
-              "name": "height",
-              "description": "Allows control over the height.",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "prevent-page-scroll",
-              "description": "Defines if page scrolling should be prevented within the list of items.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "busy",
-              "description": "Defines if the component would display a loading indicator.",
-              "value": { "type": "boolean | undefined", "default": "false" }
-            },
-            {
-              "name": "show-search-input",
-              "description": "Defines if the search input is visible.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "busy-delay",
-              "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
-              "value": { "type": "number", "default": "1000" }
-            },
-            {
-              "name": "no-result-text",
-              "description": "Defines the \"no result\" text of the component.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "search-placeholder",
-              "description": "Defines the placeholder of the search.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "select-all",
-              "description": "Defines the selectAll option of the component.",
-              "value": { "type": "boolean | undefined", "default": "false" }
-            },
-            {
-              "name": "select-all-label",
-              "description": "Defines label text for select all header.",
-              "value": { "type": "string", "default": "\"Select All\"" }
-            },
-            {
-              "name": "mode",
-              "description": "Defines the mode of the component.",
-              "value": {
-                "type": "\"SingleSelect\" | \"MultiSelect\" | \"SingleContent\" | \"RadioGroup\"",
-                "default": "\"SingleSelect\""
-              }
-            },
-            {
-              "name": "default-accessible-role",
-              "description": "Defines the default accessible role for the list componnet.",
-              "value": { "type": "string", "default": "\"list\"" }
-            }
-          ],
-          "slots": [{ "name": "default", "description": "Slot for items." }],
-          "events": [
-            {
-              "name": "remove",
-              "description": "Fired event when the user clicks on the reset button in the search."
-            },
-            {
-              "name": "show-more",
-              "description": "Fired event when the user clicks on the More button."
-            },
-            {
-              "name": "before-open",
-              "description": "Fired before the dropdown pane is opened."
-            },
-            { "name": "selection-change", "description": "" },
-            {
-              "name": "select-all",
-              "description": "Fired event when the user clicks on the Select All header."
-            },
-            {
-              "name": "submit-search",
-              "description": "Fired event when the user clicks on the submitted icon in the search."
-            },
-            {
-              "name": "reset-search",
-              "description": "Fired event when the user clicks on the reset button in the search."
-            },
-            {
-              "name": "change-search",
-              "description": "Fired event when the user submitted the value in the search."
-            },
-            {
-              "name": "first-icon-click",
-              "description": "Fired event when the user clicks on the first icon."
+              "description": "Fires when item is clicked"
             },
             {
-              "name": "second-icon-click",
-              "description": "Fired event when the user clicks on the second icon."
+              "name": "back-item-click",
+              "description": "Fires when back item is clicked"
             }
           ],
           "js": {
             "properties": [
               {
-                "name": "disable-target-overlap",
-                "description": "Determines if there is no enough space, the component can be placed\nover the target.",
-                "value": { "type": "boolean | undefined" }
-              },
-              {
-                "name": "required",
-                "description": "Defines whether the component is required.",
+                "name": "is-back",
+                "description": "Defines back item.",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "disabled",
-                "description": "Defines whether the component is in disabled state.",
-                "value": { "type": "boolean" }
+                "name": "nested-items",
+                "description": "List of the nested items",
+                "value": { "type": "NavItem[]" }
               },
               {
-                "name": "label",
-                "description": "Defines label text for field container.",
+                "name": "mobile-link-title",
+                "description": "Defines an aria label for item",
                 "value": { "type": "string" }
               },
               {
-                "name": "accessible-name",
-                "description": "Defines the accessible ARIA name of the component.",
-                "value": { "type": "string | undefined" }
-              },
-              {
-                "name": "accessible-name-ref",
-                "description": "Receives id (or many ids) of the elements that label the component.",
-                "value": { "type": "string | undefined" }
-              },
-              {
-                "name": "readonly",
-                "description": "Defines whether the component is read-only.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "displayonly",
-                "description": "Defines whether the component is display-only.",
+                "name": "active",
+                "description": "Defines active state for the item",
                 "value": { "type": "boolean" }
               },
               {
-                "name": "value-state",
-                "description": "Defines the value state of the trigger container.",
-                "value": {
-                  "type": "\"Warning\" | \"Success\" | \"Error\" | \"Standard\""
-                }
-              },
-              {
-                "name": "supporting-text",
-                "description": "Defines supporting text under the trigger container.",
-                "value": { "type": "string | undefined" }
-              },
-              {
-                "name": "tooltip-placement",
-                "description": "Determines on which side of the component the Tooltip is displayed.",
-                "value": {
-                  "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\""
-                }
+                "name": "path",
+                "description": "Defines path for the item",
+                "value": { "type": "string" }
               },
               {
-                "name": "tab-navigation-enabled",
-                "description": "Enables tab navigation for the list.",
-                "value": { "type": "boolean | undefined" }
+                "name": "target",
+                "description": "Defines target for the item",
+                "value": { "type": "UDExTarget" }
               },
               {
-                "name": "height",
-                "description": "Allows control over the height.",
-                "value": { "type": "string | undefined" }
+                "name": "sub-title",
+                "description": "Defines subTitle for the item",
+                "value": { "type": "string" }
               },
               {
-                "name": "prevent-page-scroll",
-                "description": "Defines if page scrolling should be prevented within the list of items.",
-                "value": { "type": "boolean" }
+                "name": "label",
+                "description": "Defines label for the item",
+                "value": { "type": "string" }
               },
               {
-                "name": "busy",
-                "description": "Defines if the component would display a loading indicator.",
-                "value": { "type": "boolean | undefined" }
-              },
+                "name": "index",
+                "description": "Defines the index for the item.",
+                "value": { "type": "number" }
+              }
+            ],
+            "events": [
               {
-                "name": "show-search-input",
-                "description": "Defines if the search input is visible.",
-                "value": { "type": "boolean" }
+                "name": "sub-item-click",
+                "description": "Fires when item is clicked"
               },
               {
-                "name": "busy-delay",
-                "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
-                "value": { "type": "number" }
-              },
+                "name": "back-item-click",
+                "description": "Fires when back item is clicked"
+              }
+            ]
+          }
+        },
+        {
+          "name": "udex-segmented-button",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-segmented-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SegmentedButton.js\";</code>\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "size",
+              "description": "Defines the size of the button.",
+              "value": {
+                "type": "\"Medium\" | \"Small\" | \"Large\"",
+                "default": "\"Medium\""
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
               {
-                "name": "no-result-text",
-                "description": "Defines the \"no result\" text of the component.",
-                "value": { "type": "string" }
-              },
+                "name": "size",
+                "description": "Defines the size of the button.",
+                "value": { "type": "\"Medium\" | \"Small\" | \"Large\"" }
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "udex-segmented-button-item",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-segmented-button-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SegmentedButtonItem.js\";</code>\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "size",
+              "description": "Defines the size of the button.",
+              "value": {
+                "type": "\"Medium\" | \"Small\" | \"Large\"",
+                "default": "\"Medium\""
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
               {
-                "name": "search-placeholder",
-                "description": "Defines the placeholder of the search.",
-                "value": { "type": "string" }
-              },
+                "name": "size",
+                "description": "Defines the size of the button.",
+                "value": { "type": "\"Medium\" | \"Small\" | \"Large\"" }
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "udex-select-box",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-select-box</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/UDExSelectBox.js\";</code>\n---\n\n\n### **Events:**\n - **remove** - Fired event when the user remove tag.\n- **show-more** - Fired event when the user clicks on the More button.\n\n### **Methods:**\n - **close(): _void_** - Close the dropdown.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "disable-target-overlap",
+              "description": "Determines if there is no enough space, the component can be placed\nover the target.",
+              "value": { "type": "boolean | undefined", "default": "false" }
+            },
+            {
+              "name": "tooltip-placement",
+              "description": "Determines on which side of the component the Tooltip is displayed.",
+              "value": {
+                "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\"",
+                "default": "\"Bottom\""
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "remove",
+              "description": "Fired event when the user remove tag."
+            },
+            {
+              "name": "show-more",
+              "description": "Fired event when the user clicks on the More button."
+            }
+          ],
+          "js": {
+            "properties": [
               {
-                "name": "select-all",
-                "description": "Defines the selectAll option of the component.",
+                "name": "disable-target-overlap",
+                "description": "Determines if there is no enough space, the component can be placed\nover the target.",
                 "value": { "type": "boolean | undefined" }
               },
               {
-                "name": "select-all-label",
-                "description": "Defines label text for select all header.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "mode",
-                "description": "Defines the mode of the component.",
+                "name": "tooltip-placement",
+                "description": "Determines on which side of the component the Tooltip is displayed.",
                 "value": {
-                  "type": "\"SingleSelect\" | \"MultiSelect\" | \"SingleContent\" | \"RadioGroup\""
+                  "type": "\"Start\" | \"End\" | \"Top\" | \"Bottom\""
                 }
-              },
-              {
-                "name": "default-accessible-role",
-                "description": "Defines the default accessible role for the list componnet.",
-                "value": { "type": "string" }
               }
             ],
             "events": [
               {
                 "name": "remove",
-                "description": "Fired event when the user clicks on the reset button in the search."
+                "description": "Fired event when the user remove tag."
               },
               {
                 "name": "show-more",
                 "description": "Fired event when the user clicks on the More button."
-              },
-              {
-                "name": "before-open",
-                "description": "Fired before the dropdown pane is opened."
-              },
-              { "name": "selection-change", "description": "" },
-              {
-                "name": "select-all",
-                "description": "Fired event when the user clicks on the Select All header."
-              },
-              {
-                "name": "submit-search",
-                "description": "Fired event when the user clicks on the submitted icon in the search."
-              },
-              {
-                "name": "reset-search",
-                "description": "Fired event when the user clicks on the reset button in the search."
-              },
-              {
-                "name": "change-search",
-                "description": "Fired event when the user submitted the value in the search."
-              },
-              {
-                "name": "first-icon-click",
-                "description": "Fired event when the user clicks on the first icon."
-              },
-              {
-                "name": "second-icon-click",
-                "description": "Fired event when the user clicks on the second icon."
               }
             ]
           }
@@ -9101,7 +8519,7 @@
         },
         {
           "name": "udex-text-field",
-          "description": "\n---\n\n\n### **Events:**\n - **input** - Fired when the value of the component changes at each keystroke.\n- **change** - Fired when the input operation has finished by pressing Enter or on focusout.",
+          "description": "\n---\n\n\n### **Events:**\n - **input** - Fired when the value of the component changes at each keystroke.\n- **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **blur** - Fired on input focusout.",
           "doc-url": "",
           "attributes": [
             {
@@ -9129,11 +8547,24 @@
               "description": "Defines the accessible ARIA name of the component.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "name",
+              "description": "Defines the name of the input element.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "accessible-name-ref",
               "description": "Receives id (or many ids) of the elements that label the component.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "field-ref",
+              "description": "Defines the ref of the input element.",
+              "value": {
+                "type": "((el: HTMLInputElement | null) => void) | { current: HTMLInputElement | null; } | undefined",
+                "default": "undefined"
+              }
+            },
             {
               "name": "accessible-icon-name",
               "description": "Defines the accessible ARIA name of the component.",
@@ -9214,7 +8645,8 @@
             {
               "name": "change",
               "description": "Fired when the input operation has finished by pressing Enter or on focusout."
-            }
+            },
+            { "name": "blur", "description": "Fired on input focusout." }
           ],
           "js": {
             "properties": [
@@ -9243,11 +8675,23 @@
                 "description": "Defines the accessible ARIA name of the component.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "name",
+                "description": "Defines the name of the input element.",
+                "value": { "type": "string" }
+              },
               {
                 "name": "accessible-name-ref",
                 "description": "Receives id (or many ids) of the elements that label the component.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "field-ref",
+                "description": "Defines the ref of the input element.",
+                "value": {
+                  "type": "((el: HTMLInputElement | null) => void) | { current: HTMLInputElement | null; } | undefined"
+                }
+              },
               {
                 "name": "accessible-icon-name",
                 "description": "Defines the accessible ARIA name of the component.",
@@ -9326,7 +8770,8 @@
               {
                 "name": "change",
                 "description": "Fired when the input operation has finished by pressing Enter or on focusout."
-              }
+              },
+              { "name": "blur", "description": "Fired on input focusout." }
             ]
           }
         },