@sapudex/web-components 2.33.0 → 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.33.0",
+  "version": "2.34.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2053,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.",
@@ -2144,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.",
@@ -2232,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.",
@@ -2319,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.",
@@ -2408,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.",
@@ -2502,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.",
@@ -3696,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.",
@@ -3794,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.",
@@ -3949,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.",
@@ -4104,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.",
@@ -4201,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.",
@@ -4299,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.",
@@ -7323,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.",
@@ -7417,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.",
@@ -7509,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.",
@@ -7609,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.",
@@ -7698,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.",
@@ -7792,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.",

package/package.json

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

package/src/ListItem.hbs

@@ -89,6 +89,18 @@
                         <span class="udex-list__supporting-text" part="supporting">{{supportingText}}</span>
                     {{/if}}
                     <slot part="content"></slot>
+                    {{#if hasRating}}
+                        <udex-rating-indicator
+                            aria-label="{{ratingAriaLabel}}"
+                            value="{{rating}}"
+                            rating-count="{{ratingCount}}"
+                            total-count="{{totalCount}}"
+                            max="{{ratingMax}}"
+                            display="{{_displayRating}}"
+                            disabled
+                            readonly>
+                        </udex-rating-indicator>
+                    {{/if}}
                 </div>
                 {{#if additionalText}}<div class="udex-list__add-text" part="additional-text">{{additionalText}}</div>{{/if}}
                 <div class="udex-list__btn-wrap">
@@ -103,6 +115,18 @@
                 <div class="udex-list__text-holder">
                     <slot part="content"></slot>
                     {{#if supportingText}}<span class="udex-list__supporting-text" part="supporting">{{supportingText}}</span>{{/if}}
+                    {{#if hasRating}}
+                        <udex-rating-indicator
+                            aria-label="{{ratingAriaLabel}}"
+                            value="{{rating}}"
+                            rating-count="{{ratingCount}}"
+                            total-count="{{totalCount}}"
+                            max="{{ratingMax}}"
+                            display="{{_displayRating}}"
+                            disabled
+                            readonly>
+                        </udex-rating-indicator>
+                    {{/if}}
                 </div>
                 {{#if additionalText}}<div class="udex-list__add-text" part="additional-text">{{additionalText}}</div>{{/if}}
                 <div class="udex-list__btn-wrap">
@@ -130,7 +154,7 @@
               </div>
             {{/if}}
         </div>
-      <div class="hidden" id="{{this._id}}-invisibleText">{{accessibleListItemName}}</div>
-      <div class="hidden" id="{{this._id}}-invisibleText-describedby">{{itemState}}</div>
+        <div class="hidden" id="{{this._id}}-invisibleText">{{accessibleListItemName}}</div>
+        <div class="hidden" id="{{this._id}}-invisibleText-describedby">{{itemState}}</div>
     </div>
 {{/inline}}

package/src/ListItem.ts

@@ -13,13 +13,14 @@ import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import UDExAvatar, { UDExAvatarShape, UDExAvatarSize } from "./Avatar.js";
 import UDExButton from "./Button.js";
 import UDExStatusBadge from "./StatusBadge.js";
+import UDExRatingIndicator, { UDExDisplayType } from "./RatingIndicator.js";
 import type UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
 import { UDExListItemSize, UDExListMode, UDExAdditionalTextState } from "./types/List.js";
 import UDExRadioButton from "./RadioButton.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
-  INDETERMINATE, SELECTED, UNSELECTED,
+  INDETERMINATE, SELECTED, UNSELECTED, RATING_INDICATOR_TEXT, RATING_COUNT_TITLE, TOTAL,
 } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 
@@ -71,6 +72,7 @@ type UDExListItemItemPressEventDetail = {
     UDExRadioButton,
     UDExCheckbox,
     UDExStatusBadge,
+    UDExRatingIndicator,
     Icon,
   ],
 })
@@ -235,6 +237,8 @@ class UDExListItem extends UDExListItemBase {
   @property({ type: String })
     _additionalClassName!: string;
 
+  _displayRating: UDExDisplayType = UDExDisplayType.Desktop;
+
   deactivate: () => void;
 
   @i18n("@sapudex/web-components")
@@ -402,6 +406,13 @@ class UDExListItem extends UDExListItemBase {
   get itemState(): string {
     return this.selected ? "Selected" : "Not selected";
   }
+
+  get ratingAriaLabel(): string {
+    const ratingText = this.ratingCount ? `${translate(UDExListItem, RATING_COUNT_TITLE)} ${this.ratingCount}` : "";
+    const totalText = this.totalCount ? `${translate(UDExListItem, TOTAL)} ${this.totalCount}` : "";
+    const ratingTitleText = translate(UDExListItem, RATING_INDICATOR_TEXT);
+    return [...[ratingText, totalText].filter(Boolean), `${ratingTitleText} ${this.rating} of ${this.ratingMax}`].join(", ");
+  }
 }
 
 UDExListItem.define();

package/src/ListItemBase.ts

@@ -70,6 +70,42 @@ type UDExListItemBaseAccordionClickEventDetail = {
 class UDExListItemBase extends UI5Element {
   eventDetails!: UDExListItemBaseEvents;
 
+  /**
+   * Defines the number of displayed rating symbols.
+   *
+   * @default 5
+   * @public
+   */
+  @property({ type: Number })
+    ratingMax: number = 5;
+
+  /**
+   * Defines the value of the rating.
+   * Use for rating indicator to represent aggregated review scores within list items
+   *
+   * @public
+   */
+  @property({ type: String })
+    rating?: string;
+
+  /**
+   * Defines the number of the rating.
+   * Use for the rating indicator
+   *
+   * @public
+   */
+  @property({ type: String })
+    ratingCount?: string;
+
+  /**
+   * The number of total votes.
+   * Use for the rating indicator
+   *
+   * @public
+   */
+  @property({ type: String })
+    totalCount?: string;
+
   /**
    * Defines the <code>label</code> for the item.
    *
@@ -313,6 +349,10 @@ class UDExListItemBase extends UI5Element {
   get expanded(): boolean {
     return !this.collapsed;
   }
+
+  get hasRating(): boolean {
+    return !!this.rating;
+  }
 }
 
 export default UDExListItemBase;

package/src/MastheadItem.ts

@@ -44,8 +44,9 @@ export interface IMastheadItem {
 
 export type CategoryItem = {
   title: string;
-  url: string;
+  url?: string;
   externalLink: boolean;
+  subItems?: CategoryItem[];
 };
 
 export type SubMenuLinkItem = {