@sapudex/web-components 2.32.1 → 2.34.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.32.1",
+  "version": "2.34.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -440,6 +440,11 @@
               "name": "show-items",
               "description": "Defines how many breadcrumb items should be visible",
               "value": { "type": "number", "default": "3" }
+            },
+            {
+              "name": "show-current-page",
+              "description": "Defines whether the current page item is displayed in the main navigation path.\nWhen set to `true`, the current page is shown as a non-interactive label at the end of the breadcrumb trail.\nBy default, the current page is hidden from the main path and only visible in the dropdown.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -465,6 +470,11 @@
                 "name": "show-items",
                 "description": "Defines how many breadcrumb items should be visible",
                 "value": { "type": "number" }
+              },
+              {
+                "name": "show-current-page",
+                "description": "Defines whether the current page item is displayed in the main navigation path.\nWhen set to `true`, the current page is shown as a non-interactive label at the end of the breadcrumb trail.\nBy default, the current page is hidden from the main path and only visible in the dropdown.",
+                "value": { "type": "boolean" }
               }
             ],
             "events": [
@@ -2043,6 +2053,26 @@
               "description": "Defines non-interactive the group header.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "rating-max",
+              "description": "Defines the number of displayed rating symbols.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "rating",
+              "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-count",
+              "description": "Defines the number of the rating.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "total-count",
+              "description": "The number of total votes.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "label",
               "description": "Defines the <code>label</code> for the item.",
@@ -2134,6 +2164,26 @@
                 "description": "Defines non-interactive the group header.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "rating-max",
+                "description": "Defines the number of displayed rating symbols.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "rating",
+                "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-count",
+                "description": "Defines the number of the rating.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "total-count",
+                "description": "The number of total votes.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "label",
                 "description": "Defines the <code>label</code> for the item.",
@@ -2222,6 +2272,26 @@
               "name": "_is-filter-select-all-item",
               "value": { "type": "boolean | undefined", "default": "false" }
             },
+            {
+              "name": "rating-max",
+              "description": "Defines the number of displayed rating symbols.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "rating",
+              "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-count",
+              "description": "Defines the number of the rating.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "total-count",
+              "description": "The number of total votes.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "label",
               "description": "Defines the <code>label</code> for the item.",
@@ -2309,6 +2379,26 @@
                 "name": "_is-filter-select-all-item",
                 "value": { "type": "boolean | undefined" }
               },
+              {
+                "name": "rating-max",
+                "description": "Defines the number of displayed rating symbols.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "rating",
+                "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-count",
+                "description": "Defines the number of the rating.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "total-count",
+                "description": "The number of total votes.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "label",
                 "description": "Defines the <code>label</code> for the item.",
@@ -2398,6 +2488,26 @@
               "description": "Defines non-interactive the group header.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "rating-max",
+              "description": "Defines the number of displayed rating symbols.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "rating",
+              "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-count",
+              "description": "Defines the number of the rating.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "total-count",
+              "description": "The number of total votes.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "label",
               "description": "Defines the <code>label</code> for the item.",
@@ -2492,6 +2602,26 @@
                 "description": "Defines non-interactive the group header.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "rating-max",
+                "description": "Defines the number of displayed rating symbols.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "rating",
+                "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-count",
+                "description": "Defines the number of the rating.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "total-count",
+                "description": "The number of total votes.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "label",
                 "description": "Defines the <code>label</code> for the item.",
@@ -3686,6 +3816,26 @@
               "description": "Defines non-interactive the group header.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "rating-max",
+              "description": "Defines the number of displayed rating symbols.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "rating",
+              "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-count",
+              "description": "Defines the number of the rating.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "total-count",
+              "description": "The number of total votes.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "label",
               "description": "Defines the <code>label</code> for the item.",
@@ -3784,6 +3934,26 @@
                 "description": "Defines non-interactive the group header.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "rating-max",
+                "description": "Defines the number of displayed rating symbols.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "rating",
+                "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-count",
+                "description": "Defines the number of the rating.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "total-count",
+                "description": "The number of total votes.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "label",
                 "description": "Defines the <code>label</code> for the item.",
@@ -3939,6 +4109,26 @@
               "description": "Defines the role attribute of component",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "rating-max",
+              "description": "Defines the number of displayed rating symbols.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "rating",
+              "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-count",
+              "description": "Defines the number of the rating.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "total-count",
+              "description": "The number of total votes.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "label",
               "description": "Defines the <code>label</code> for the item.",
@@ -4094,6 +4284,26 @@
                 "description": "Defines the role attribute of component",
                 "value": { "type": "string" }
               },
+              {
+                "name": "rating-max",
+                "description": "Defines the number of displayed rating symbols.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "rating",
+                "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-count",
+                "description": "Defines the number of the rating.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "total-count",
+                "description": "The number of total votes.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "label",
                 "description": "Defines the <code>label</code> for the item.",
@@ -4191,6 +4401,26 @@
               "description": "Defines non-interactive the group header.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "rating-max",
+              "description": "Defines the number of displayed rating symbols.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "rating",
+              "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-count",
+              "description": "Defines the number of the rating.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "total-count",
+              "description": "The number of total votes.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "label",
               "description": "Defines the <code>label</code> for the item.",
@@ -4289,6 +4519,26 @@
                 "description": "Defines non-interactive the group header.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "rating-max",
+                "description": "Defines the number of displayed rating symbols.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "rating",
+                "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-count",
+                "description": "Defines the number of the rating.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "total-count",
+                "description": "The number of total votes.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "label",
                 "description": "Defines the <code>label</code> for the item.",
@@ -7313,6 +7563,26 @@
               "description": "Defines non-interactive the group header.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "rating-max",
+              "description": "Defines the number of displayed rating symbols.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "rating",
+              "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-count",
+              "description": "Defines the number of the rating.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "total-count",
+              "description": "The number of total votes.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "divider",
               "description": "Defines whether a visual separator should be rendered after the item.",
@@ -7407,6 +7677,26 @@
                 "description": "Defines non-interactive the group header.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "rating-max",
+                "description": "Defines the number of displayed rating symbols.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "rating",
+                "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-count",
+                "description": "Defines the number of the rating.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "total-count",
+                "description": "The number of total votes.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "divider",
                 "description": "Defines whether a visual separator should be rendered after the item.",
@@ -7499,6 +7789,26 @@
                 "default": "\"None\""
               }
             },
+            {
+              "name": "rating-max",
+              "description": "Defines the number of displayed rating symbols.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "rating",
+              "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-count",
+              "description": "Defines the number of the rating.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "total-count",
+              "description": "The number of total votes.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "label",
               "description": "Defines the <code>label</code> for the item.",
@@ -7599,6 +7909,26 @@
                   "type": "\"Information\" | \"Warning\" | \"None\" | \"Success\" | \"Error\""
                 }
               },
+              {
+                "name": "rating-max",
+                "description": "Defines the number of displayed rating symbols.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "rating",
+                "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-count",
+                "description": "Defines the number of the rating.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "total-count",
+                "description": "The number of total votes.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "label",
                 "description": "Defines the <code>label</code> for the item.",
@@ -7688,6 +8018,26 @@
               "description": "Defines non-interactive the group header.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "rating-max",
+              "description": "Defines the number of displayed rating symbols.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "rating",
+              "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rating-count",
+              "description": "Defines the number of the rating.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "total-count",
+              "description": "The number of total votes.\nUse for the rating indicator",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "label",
               "description": "Defines the <code>label</code> for the item.",
@@ -7782,6 +8132,26 @@
                 "description": "Defines non-interactive the group header.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "rating-max",
+                "description": "Defines the number of displayed rating symbols.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "rating",
+                "description": "Defines the value of the rating.\nUse for rating indicator to represent aggregated review scores within list items",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "rating-count",
+                "description": "Defines the number of the rating.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "total-count",
+                "description": "The number of total votes.\nUse for the rating indicator",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "label",
                 "description": "Defines the <code>label</code> for the item.",
@@ -8447,6 +8817,11 @@
               "value": {
                 "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
               }
+            },
+            {
+              "name": "item-count-text",
+              "description": "Defines the item count text displayed above the tab label in Process Tab variant.\nOnly rendered when the tab navigation uses the Process Tab variant.",
+              "value": { "type": "string | undefined" }
             }
           ],
           "slots": [
@@ -8508,6 +8883,11 @@
                 "value": {
                   "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
                 }
+              },
+              {
+                "name": "item-count-text",
+                "description": "Defines the item count text displayed above the tab label in Process Tab variant.\nOnly rendered when the tab navigation uses the Process Tab variant.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []
@@ -8564,7 +8944,12 @@
             },
             {
               "name": "icon-without-background",
-              "description": "Defines the background color of the component.",
+              "description": "!DEPRECATED! Defines the background color of the component.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "process-tab",
+              "description": "Enables the Process Tab variant, where each tab displays an icon\nalongside an optional item count text above the label.",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
@@ -8627,7 +9012,12 @@
               },
               {
                 "name": "icon-without-background",
-                "description": "Defines the background color of the component.",
+                "description": "!DEPRECATED! Defines the background color of the component.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "process-tab",
+                "description": "Enables the Process Tab variant, where each tab displays an icon\nalongside an optional item count text above the label.",
                 "value": { "type": "boolean" }
               }
             ],

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.32.1",
+  "version": "2.34.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/Breadcrumbs.ts

@@ -4,7 +4,7 @@ import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import { isTabNext, isTabPrevious, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import type { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -20,8 +20,10 @@ import {
   AVAILABLE_VALUES,
   BREADCRUMBS_ARIA_LABEL,
   BREADCRUMBS_OVERFLOW_ARIA_LABEL,
+  OF,
 } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 
 // Styles
 import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
@@ -105,6 +107,17 @@ class UDExBreadcrumbs extends UI5Element {
   @property({ type: Number })
     showItems: number = 3;
 
+  /**
+   * Defines whether the current page item is displayed in the main navigation path.
+   * When set to `true`, the current page is shown as a non-interactive label at the end of the breadcrumb trail.
+   * By default, the current page is hidden from the main path and only visible in the dropdown.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    showCurrentPage: boolean = false;
+
   /**
    * Indicates if dropdown is opened
    *
@@ -112,7 +125,7 @@ class UDExBreadcrumbs extends UI5Element {
    * @private
    */
   @property({ noAttribute: true, type: Boolean })
-    _dropdownOpened!: boolean;
+    _dropdownOpened: boolean = false;
 
   /**
    * Defines the component items.
@@ -249,11 +262,6 @@ class UDExBreadcrumbs extends UI5Element {
       e.preventDefault();
       this._dropdownArrowLink.focus();
       this._toggleDropdown();
-      return;
-    }
-
-    if (isEscape(e)) {
-      this._toggleDropdown();
     }
   }
 
@@ -313,6 +321,13 @@ class UDExBreadcrumbs extends UI5Element {
     return this._getItems().filter(i => this._isItemVisible(i));
   }
 
+  get _triggerAccessibilityAttributes(): Pick<AccessibilityAttributes, "hasPopup" | "expanded"> {
+    return {
+      hasPopup: "listbox" as const,
+      expanded: this._dropdownOpened ? "true" : "false",
+    };
+  }
+
   get _triggerClass(): string {
     const rootClass = "udex-breadcrumbs";
     return this._dropdownOpened ? `${rootClass} ${rootClass}__trigger--opened` : rootClass;
@@ -329,6 +344,10 @@ class UDExBreadcrumbs extends UI5Element {
   get _dropdownAccessibleNameText(): string {
     return translate(UDExBreadcrumbs, AVAILABLE_VALUES);
   }
+
+  get _ofText(): string {
+    return translate(UDExBreadcrumbs, OF);
+  }
 }
 
 UDExBreadcrumbs.define();