@sapudex/web-components 2.33.0 → 2.35.0

package/package.json

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

package/src/CountrySelector.ts

@@ -6,6 +6,8 @@ import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import "@ui5/webcomponents-icons/dist/navigation-up-arrow.js";
 import type { Country } from "./data/CountryListISO3166.js";
 import { CountryListDB } from "./data/CountryListISO3166.js";
+import IllustratedMessage from "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";
+import "@ui5/webcomponents-fiori/dist/illustrations/NoSearchResults.js";
 import UDExSearch from "./Search.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExList from "./List.js";
@@ -63,6 +65,7 @@ type UDExCountrySelectorChangeSearchEventDetail = {
     UDExDropdown,
     UDExTextField,
     UDExStatusMessage,
+    IllustratedMessage,
   ],
 })
 

package/src/FilterMenu.ts

@@ -11,6 +11,8 @@ import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRo
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import UDExBusyIndicator from "./BusyIndicator.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
+import IllustratedMessage from "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";
+import "@ui5/webcomponents-fiori/dist/illustrations/NoSearchResults.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
@@ -80,6 +82,7 @@ type UDExFilterMenuResetClickEventDetail = {
   styles: [FilterMenuCss, SearchableListCss, getEffectiveScrollbarStyle()],
   template: FilterMenuTemplate,
   dependencies: [
+    IllustratedMessage,
     Popover,
     Icon,
     UDExBusyIndicator,

package/src/ListGroupHeader.hbs

@@ -125,6 +125,8 @@
 
 {{#*inline "single-group-header"}}
     <div class="udex-list__group-content udex-list__group-header-wrap {{sizeClass}}" part="group-item">
+        {{#if typeNumber}}<span class="udex-list__number">{{numberOfItem}}.</span>{{/if}}
+        {{#if typeCircle}}<span class="udex-list__circle">&#x2022;</span>{{/if}}
         {{#if typeIcon}}
             <ui5-icon
                 class="udex-list__icon"
@@ -145,13 +147,15 @@
 
 {{#*inline "single-group-header-collapsible"}}
     <div class="udex-list__group-content udex-list__group-header-wrap {{sizeClass}}" part="group-item"
-        id="{{this._id}}_group-content__focusable"
-        role="button"
-        tabindex="0"
-        @keydown="{{handleKeyDown}}"
-        _tab-index="{{_effectiveTabIndex}}"
-        aria-expanded="{{expanded}}"
-        aria-controls="{{ariaControlsId}}">
+    id="{{this._id}}_group-content__focusable"
+    role="button"
+    tabindex="0"
+    @keydown="{{handleKeyDown}}"
+    _tab-index="{{_effectiveTabIndex}}"
+    aria-expanded="{{expanded}}"
+    aria-controls="{{ariaControlsId}}">
+        {{#if typeNumber}}<span class="udex-list__number">{{numberOfItem}}.</span>{{/if}}
+        {{#if typeCircle}}<span class="udex-list__circle">&#x2022;</span>{{/if}}
         {{#if typeIcon}}
             <ui5-icon
                 class="udex-list__icon"

package/src/ListItem.hbs

@@ -56,6 +56,8 @@
                  <span class="udex-list__flag" style="background-position: {{flagPosition}}"></span>
             </div>
         {{/if}}
+        {{#if typeNumber}}<span class="udex-list__number">{{numberOfItem}}.</span>{{/if}}
+        {{#if typeCircle}}<span class="udex-list__circle">&#x2022;</span>{{/if}}
         {{#if typeIcon}}
             <ui5-icon
                 class="udex-list__icon"
@@ -89,6 +91,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 +117,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 +156,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.
    *
@@ -298,6 +334,14 @@ class UDExListItemBase extends UI5Element {
     return this.modeMultiSelect || this.modeRadioGroup;
   }
 
+  get typeNumber(): boolean {
+    return this.type === UDExListStyleType.Number;
+  }
+
+  get typeCircle(): boolean {
+    return this.type === UDExListStyleType.Circle;
+  }
+
   get typeIcon(): boolean {
     return this.type === UDExListStyleType.Icon;
   }
@@ -313,6 +357,10 @@ class UDExListItemBase extends UI5Element {
   get expanded(): boolean {
     return !this.collapsed;
   }
+
+  get hasRating(): boolean {
+    return !!this.rating;
+  }
 }
 
 export default UDExListItemBase;

package/src/MastheadItem.hbs

@@ -24,6 +24,7 @@
     <button
         id="{{this._id}}"
         class="udex-masthead-item__btn udex-masthead-item__profile-btn {{additionalClass}}"
+        tabindex="0"
         aria-expanded="{{buttonAriaExpanded}}"
         aria-describedby="{{ariaDescribedBy}}"
         aria-controls="{{this._id}}_dropdown"
@@ -41,6 +42,7 @@
         role="{{accessibleRoleName}}"
         id="{{this._id}}"
         class="udex-masthead-item__btn {{additionalClass}}"
+        tabindex="0"
         aria-expanded="{{buttonAriaExpanded}}"
         aria-controls="{{this._id}}_dropdown"
         aria-describedby="{{ariaDescribedBy}}"

package/src/MastheadItem.ts

@@ -8,7 +8,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/search.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isEscape, isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
@@ -44,8 +44,9 @@ export interface IMastheadItem {
 
 export type CategoryItem = {
   title: string;
-  url: string;
+  url?: string;
   externalLink: boolean;
+  subItems?: CategoryItem[];
 };
 
 export type SubMenuLinkItem = {
@@ -323,6 +324,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: Boolean })
     _imageLoadError = false;
 
+  /**
+   * Defines if the item has the dropdown with four columns menu
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _hasFourColumnsMenu = false;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -337,6 +346,9 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
 
   onBeforeRendering(): void {
     this.label = this.eventItemTitle;
+    if (this.hasFourColumnsMenu && !this.isExploreBtn) {
+      this._hasFourColumnsMenu = true;
+    }
   }
 
   onAfterRendering(): void {
@@ -397,6 +409,20 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
         this.handleKeyEscape();
       }
     }
+    if (isTabNext(e) && this.isDropdownOpened) {
+      const button = this.getDomElement(".udex-masthead-item__btn, .udex-masthead-item__profile-btn");
+      if (button && e.currentTarget === button) {
+        this.handleTabIntoDropdown(e);
+      }
+    }
+  }
+
+  handleTabIntoDropdown(e: KeyboardEvent): void {
+    const menu = this.getSlottedNodes<UDExMastheadMenu>("dropdown")[0];
+    if (menu && typeof menu.focusFirstItem === "function") {
+      e.preventDefault();
+      menu.focusFirstItem();
+    }
   }
 
   handleKeyEscape(): void {
@@ -703,6 +729,15 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   get imageLoadError(): boolean {
     return this._imageLoadError && this.isCountrySelectorBtn;
   }
+
+  get dropdownMenu(): UDExMastheadMenu | undefined {
+    return this.getSlottedNodes<UDExMastheadMenu>("dropdown")
+      .find(el => el instanceof UDExMastheadMenu);
+  }
+
+  get hasFourColumnsMenu(): boolean {
+    return !!this.dropdownMenu?.hasFourColumns;
+  }
 }
 
 UDExMastheadItem.define();

package/src/MastheadMenu.hbs

@@ -77,6 +77,41 @@
             <li>
                 {{#if this.isDivider}}
                     <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
+                {{else if this.subItems}}
+                    {{#if this.url}}
+                        <udex-masthead-menu-item
+                            part="menu-item"
+                            accessible-role="link"
+                            exportparts="menu-item"
+                            @click="{{../../../handleMenuItemClick}}"
+                            url="{{this.url}}"
+                            label="{{this.title}}"
+                            class="udex-masthead-menu__sub-category">
+                        </udex-masthead-menu-item>
+                    {{else}}
+                        <span class="udex-masthead-menu__sub-category">{{this.title}}</span>
+                    {{/if}}
+                    <ul class="udex-masthead-menu__sub-list" aria-label="{{this.title}}">
+                        {{#each this.subItems}}
+                            <li>
+                                {{#if this.isDivider}}
+                                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
+                                {{else}}
+                                    <udex-masthead-menu-item
+                                        part="menu-item"
+                                        accessible-role="link"
+                                        exportparts="menu-item"
+                                        exportparts="badge"
+                                        @click="{{../../../../handleMenuItemClick}}"
+                                        badge="{{this.badge}}"
+                                        ?external-link="{{this.externalLink}}"
+                                        url="{{this.url}}"
+                                        label="{{this.title}}">
+                                    </udex-masthead-menu-item>
+                                {{/if}}
+                            </li>
+                        {{/each}}
+                    </ul>
                 {{else}}
                     <udex-masthead-menu-item
                         part="menu-item"

package/src/MastheadMenu.ts

@@ -29,9 +29,10 @@ const rowClass = "udex-masthead-menu_with-one-column";
 
 export type Item = {
   title: string;
-  url: string;
+  url?: string;
   externalLink: boolean;
   isDivider?: boolean;
+  subItems?: Item[];
 };
 
 export type SubMenuLinkItem = {
@@ -155,14 +156,12 @@ class UDExMastheadMenu extends UI5Element {
 
   handleHomeKey(e: KeyboardEvent): void {
     e.preventDefault();
-    const firstItem = this.links[0];
-    firstItem.focus();
+    this.focusInnerElement(this.links[0]);
   }
 
   handleEndKey(e: KeyboardEvent): void {
     e.preventDefault();
-    const lastItem = this.links[this.links.length - 1];
-    lastItem.focus();
+    this.focusInnerElement(this.links[this.links.length - 1]);
   }
 
   handlePreviousItemFocus(e: KeyboardEvent): void {
@@ -207,7 +206,7 @@ class UDExMastheadMenu extends UI5Element {
     if (this._scrollIntoView) {
       this.scrollToItem(this.links[previousSelectIndex]);
     }
-    this.links[previousSelectIndex].focus();
+    this.focusInnerElement(this.links[previousSelectIndex]);
   }
 
   focusNextItem(item: UDExMastheadMenuItem): void {
@@ -216,13 +215,24 @@ class UDExMastheadMenu extends UI5Element {
     if (this._scrollIntoView) {
       this.scrollToItem(this.links[nextSelectIndex]);
     }
-    this.links[nextSelectIndex].focus();
+    this.focusInnerElement(this.links[nextSelectIndex]);
   }
 
   getCurrentIndex(item: UDExMastheadMenuItem): number {
     return this.links.indexOf(item);
   }
 
+  focusFirstItem(): void {
+    const firstItem = this.links[0];
+    if (firstItem) {
+      this.focusInnerElement(firstItem);
+    }
+  }
+
+  private focusInnerElement(item: UDExMastheadMenuItem): void {
+    item.shadowRoot?.querySelector<HTMLElement>(".udex-masthead-menu-item")?.focus();
+  }
+
   scrollToItem(item: UDExMastheadMenuItem): void {
     item.scrollIntoView({ block: this._scrollIntoView?.toLowerCase() as ScrollLogicalPosition });
   }
@@ -260,6 +270,10 @@ class UDExMastheadMenu extends UI5Element {
   get overviewHeaderLinkText(): string {
     return translate(UDExMastheadMenu, OVERVIEW);
   }
+
+  get hasFourColumns(): boolean {
+    return this.itemsList.some(item => item.subMenuLinkItems.length === 4);
+  }
 }
 
 UDExMastheadMenu.define();

package/src/MastheadMobileMenu.hbs

@@ -205,17 +205,48 @@
         </li>
     {{/if}}
     {{#each _category.items}}
-        {{#if this.url}}
+        {{#if this.subItems}}
             <li class="udex-masthead-mobile-menu__list-item" role="none">
-                <udex-masthead-menu-item
-                    part="menu-item"
-                    @click="{{../handleMobileCategoryItemEvent}}"
-                    label="{{this.title}}"
-                    url="{{this.url}}"
-                    third-level
-                    has-border>
-                </udex-masthead-menu-item>
+                {{#if this.url}}
+                    <udex-masthead-menu-item
+                        part="menu-item"
+                        @click="{{../handleMobileCategoryItemEvent}}"
+                        label="{{this.title}}"
+                        url="{{this.url}}"
+                        class="udex-masthead-mobile-menu__sub-category"
+                        third-level>
+                    </udex-masthead-menu-item>
+                {{else}}
+                    <span class="udex-masthead-mobile-menu__sub-category">{{this.title}}</span>
+                {{/if}}
+                <ul class="udex-masthead-mobile-menu__sub-list" aria-label="{{this.title}}">
+                    {{#each this.subItems}}
+                        {{#if this.url}}
+                            <li class="udex-masthead-mobile-menu__list-item" role="none">
+                                <udex-masthead-menu-item
+                                    part="menu-item"
+                                    @click="{{../../handleMobileCategoryItemEvent}}"
+                                    label="{{this.title}}"
+                                    url="{{this.url}}"
+                                    third-level>
+                                </udex-masthead-menu-item>
+                            </li>
+                        {{/if}}
+                    {{/each}}
+                </ul>
             </li>
+        {{else}}
+            {{#if this.url}}
+                <li class="udex-masthead-mobile-menu__list-item" role="none">
+                    <udex-masthead-menu-item
+                        part="menu-item"
+                        @click="{{../handleMobileCategoryItemEvent}}"
+                        label="{{this.title}}"
+                        url="{{this.url}}"
+                        third-level>
+                    </udex-masthead-menu-item>
+                </li>
+            {{/if}}
         {{/if}}
     {{/each}}
 {{/inline}}

package/src/MastheadShell.hbs

@@ -151,6 +151,7 @@
             @click="{{handleLogoClick}}"
             role="link"
             href="{{homeUrl}}"
+            tabindex="0"
             title="{{logoTitle}}"
             target="_self"
             aria-label="{{homepageAriaLabel}}"
@@ -178,6 +179,7 @@
             @click="{{handleSiteLabelClick}}"
             role="link"
             href="{{siteLabelUrl}}"
+            tabindex="0"
             title="{{siteLabelTitle}}"
             target="_self"
             aria-label="{{siteLabelAriaLabel}}"
@@ -196,6 +198,7 @@
                 class="udex-masthead-shell__co-brand-link"
                 @click="{{handleCoBrandClick}}"
                 href="{{coBrandUrl}}"
+                tabindex="0"
                 title="{{coBrandTitle}}"
                 aria-label="{{coBrandAriaLabel}}"
                 target="_self"

package/src/SearchableListBase.hbs

@@ -16,7 +16,15 @@
     </span>
 {{/if}}
 {{#if isListEmpty}}
-    <div class="udex-no-result"><span>{{getNoResultText}}</span></div>
+    <div class="udex-no-result">
+        <ui5-illustrated-message
+            name="NoSearchResults"
+            design="Dot"
+            title-text=" "
+            subtitle-text=" ">
+        </ui5-illustrated-message>
+        <span>{{getNoResultText}}</span>
+    </div>
 {{else if busy}}
     <udex-busy-indicator
         class="udex-busy-indicator"
@@ -62,6 +70,10 @@
                                 ?divider="{{this.divider}}"
                                 ?disabled="{{this.disabled}}"
                                 ?selected="{{this.selected}}"
+                                rating="{{this.rating}}"
+                                total-count="{{this.totalCount}}"
+                                rating-count="{{this.ratingCount}}"
+                                rating-max="{{this.ratingMax}}"
                                 label="{{this.label}}">
                                 {{{this.innerHTML}}}
                             </udex-list-item>
@@ -99,6 +111,10 @@
                                 ?divider="{{this.divider}}"
                                 ?disabled="{{this.disabled}}"
                                 ?selected="{{this.selected}}"
+                                rating="{{this.rating}}"
+                                total-count="{{this.totalCount}}"
+                                rating-count="{{this.ratingCount}}"
+                                rating-max="{{this.ratingMax}}"
                                 label="{{this.label}}">
                                 {{{this.innerHTML}}}
                             </udex-list-item>
@@ -118,6 +134,10 @@
                     ?controlled="{{this.controlled}}"
                     ?divider="{{this.divider}}"
                     ?selected="{{this.item.selected}}"
+                    rating="{{this.item.rating}}"
+                    total-count="{{this.item.totalCount}}"
+                    rating-count="{{this.item.ratingCount}}"
+                    rating-max="{{this.item.ratingMax}}"
                     label="{{this.item.label}}"
                     accessible-role="{{../listItemRole}}">
                     {{{this.item.innerHTML}}}

package/src/SearchableListBase.ts

@@ -14,8 +14,9 @@ import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import type UDExList from "./List.js";
 import type UDExListItem from "./ListItem.js";
 import type UDExFilterMenuItem from "./FilterMenuItem.js";
+import type UDExSelectBoxItem from "./SelectBoxItem.js";
 import { SHOW_SEARCH_AFTER_COUNT, UDExPopoverPart } from "./types/SearchableListBase.js";
-import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
+import { NO_MATCHES_FOUND, RESULT_RETURNED, STARS } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 
 export type UDExItemFromList = UDExListItemBase | UDExListGroupHeaderBase | null | undefined;
@@ -403,6 +404,10 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   checkAndUpdateLabel(item: UDExListItemBase | UDExListGroupHeaderBase, str: string): boolean {
+    if (item.ratingCount) {
+      return this.isIncludes(item.ratingCount, str);
+    }
+
     if (!item.label) {
       console.warn("A label property is required for the item");
       return false;
@@ -597,7 +602,7 @@ class UDExSearchableListBase extends UI5Element {
     content.style.maxHeight = this.height || "";
   }
 
-  _setItemsModeAndControl(items: Array<UDExFilterMenuItem>) {
+  _setItemsModeAndControl(items: Array<UDExFilterMenuItem | UDExSelectBoxItem>) {
     items.forEach(item => {
       item.mode = this.mode;
       item.controlled = this.isControlled;
@@ -617,6 +622,10 @@ class UDExSearchableListBase extends UI5Element {
     return translate(UDExSearchableListBase, RESULT_RETURNED);
   }
 
+  get startsText(): string {
+    return translate(UDExSearchableListBase, STARS);
+  }
+
   get isListEmpty(): boolean {
     return this._filteredItems.length === 0;
   }