@sapudex/web-components 0.117.1 → 0.127.6

package/src/HeroBanner.hbs

@@ -1,30 +1,34 @@
 <div class="{{heroBannerClasses}}" part="wrapper" style="background-color: {{wrapperBackgroundColor}}">
-  <div class="udex-hero-banner__container">
-    {{#if hasCustomBackgroundPicture}}
-      <slot name="backgroundPicture"></slot>
-    {{else if hasBackgroundImage}}
-      <picture>
-        <img loading="{{backgroundImageLoadingStrategy}}" src="{{backgroundImage}}" part="background-image" class="udex-hero-banner__background-image" alt="{{backgroundImageLabel}}" />
-      </picture>
-    {{/if}}
-
-    {{#if hasBackgroundVideo}}
+  {{#if hasBackgroundVideo}}
     <div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown={{_handleKeydown}} >
         <video ?autoplay="{{shouldVideoAutoplay}}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="{{backgroundVideoLabel}}">
             <source src="{{backgroundVideo}}" type="video/mp4" />
         </video>
         <div class="udex-hero-banner__background-video-overlay"></div>
+        {{#if hasBackgroundImage}}
+          <picture>
+            <img loading="{{backgroundImageLoadingStrategy}}" src="{{backgroundImage}}" part="background-image" class="udex-hero-banner__background-image" alt="{{backgroundImageLabel}}" />
+          </picture>
+        {{/if}}
         {{> hero-content}}
         <button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click={{_toggleMediaButton}}>
             <ui5-icon name={{mediaButtonIconName}}></ui5-icon>
         </button>
     </div>
     {{else}}
-    <div class="udex-hero-banner__content-container">
-        {{> hero-content}}
+    <div class="udex-hero-banner__container">
+      {{#if hasCustomBackgroundPicture}}
+        <slot name="backgroundPicture"></slot>
+      {{else if hasBackgroundImage}}
+        <picture>
+          <img loading="{{backgroundImageLoadingStrategy}}" src="{{backgroundImage}}" part="background-image" class="udex-hero-banner__background-image" alt="{{backgroundImageLabel}}" />
+        </picture>
+      {{/if}}
+      <div class="udex-hero-banner__content-container">
+          {{> hero-content}}
+      </div>
     </div>
-    {{/if}}
-  </div>
+  {{/if}}
 </div>
 
 {{#*inline "hero-content"}}

package/src/HeroBanner.ts

@@ -187,6 +187,9 @@ class UDExHeroBanner extends UI5Element {
 
   onEnterDOM() {
     if (this.backgroundVideo) {
+      if (this.backgroundColor) {
+        this.style.setProperty("--udexHeroBannerBackgroundVideoColor", `${this.wrapperBackgroundColor}`);
+      }
       this._video?.addEventListener("play", () => {
         this._calculateMediaButtonState();
       });

package/src/MastheadItem.hbs

@@ -7,7 +7,7 @@
         target="{{target}}"
         href="{{href}}"
         aria-labelledby="{{ariaLabelledBy}}"
-        aria-label="{{accessibleName}}">
+        aria-label="{{accessibleLabel}}">
         {{> content}}
     </a>
 {{else if isProfileBtn}}
@@ -17,7 +17,7 @@
         aria-expanded="{{selected}}"
         aria-labelledby="{{ariaLabelledBy}}"
         aria-haspopup="{{hasDropdownSlot}}"
-        aria-label="{{accessibleName}}"
+        aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
         @click="{{onClick}}">
         {{> content}}
@@ -33,7 +33,7 @@
         aria-expanded="{{selected}}"
         aria-labelledby="{{ariaLabelledBy}}"
         aria-haspopup="{{hasDropdownSlot}}"
-        aria-label="{{accessibleName}}"
+        aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
         @click="{{onClick}}">
         {{> content}}

package/src/MastheadItem.ts

@@ -18,6 +18,8 @@ import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
 
+const breakpointSizeM: number = 1279;
+
 export interface IMastheadItem {
   text?: string;
   selected?: boolean;
@@ -164,7 +166,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
    * @public
    */
   @property({ type: String, defaultValue: "" })
-    iconAlt?: string = "";
+    iconAlt?: string;
 
   /**
    * Hide active border for item
@@ -369,20 +371,24 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.hasDropdownSlot && !this.isProfileBtn && !this.icon.length;
   }
 
-  get isProfileBtn():boolean {
+  get isProfileBtn(): boolean {
     return this.getAttribute("slot") === "profile";
   }
 
-  get isExploreBtn():boolean {
+  get isExploreBtn(): boolean {
     return this.getAttribute("slot") === "exploreSAP";
   }
 
+  get accessibleLabel(): string {
+    return this.accessibleName || this.innerText;
+  }
+
   get isMenuItem(): boolean {
     return true;
   }
 
   get isMobile(): boolean {
-    return window.innerWidth < 1279;
+    return window.innerWidth < breakpointSizeM;
   }
 }
 

package/src/MastheadShell.hbs

@@ -23,7 +23,10 @@
     {{#if _isSearchVisible}}
         <div class="udex-masthead-shell__search-container">
             <slot name="search"></slot>
+        </div>
+        <div class="udex-masthead-shell__btn-holder">
             <udex-control-button
+                class="udex-masthead-shell__close-search-btn"
                 size="Small"
                 icon="decline"
                 accessible-name="{{closeButtonAccessibleName}}"
@@ -94,6 +97,7 @@
         <a
             role="link"
             href="{{homeUrl}}"
+            title="{{logoTitle}}"
             target="_self"
             aria-label="{{homepageAriaLabel}}"
             class="udex-masthead-shell__logo udex-masthead-shell__logo--link">

package/src/MastheadShell.ts

@@ -23,6 +23,7 @@ import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.l
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 
 const mobileMenuActiveClass: string = "udex-masthead-shell_mobile-menu-open";
+const breakpointSizeM: number = 1279;
 /**
  * @class
  *
@@ -173,6 +174,15 @@ class UDExMastheadShell extends UI5Element {
   @property({ type: String, defaultValue: "" })
     logoUrl!: string;
 
+  /**
+   * Defines the Logo default title
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String, defaultValue: "" })
+    logoTitle!: string;
+
   /**
    * Defines a site label. It will be displayed next to a logo.
    *
@@ -267,6 +277,10 @@ class UDExMastheadShell extends UI5Element {
   }
 
   _handleResize(): void {
+    if (this.isMobileView) {
+      this._isSearchVisible = false;
+    }
+
     if (this._shouldHandleResize) {
       this._mobileMenu?.showFirstLevelMenu();
       this.removeOverflowBody();
@@ -478,6 +492,10 @@ class UDExMastheadShell extends UI5Element {
   get hasMobileMenuButtons(): boolean {
     return !!this.mobileMenu.length;
   }
+
+  get isMobileView(): boolean {
+    return window.innerWidth <= breakpointSizeM;
+  }
 }
 
 UDExMastheadShell.define();

package/src/MessageStrip.ts

@@ -189,7 +189,7 @@ class UDExMessageStrip extends MessageStrip {
   }
 
   get _closeButtonText() {
-    return this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON);
+    return `${this.textStatus ?? ""} ${this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON)}`;
   }
 
   get iconProvided() {

package/src/Pagination.hbs

@@ -17,8 +17,9 @@
             <udex-button
             ?disabled="{{prevButtonDisbled}}"
             accessible-name="{{previousPageAccessibleName}}"
+            tooltip="{{previousBtnTooltip}}"
             size="Large"
-            icon="nav-back"
+            icon="navigation-left-arrow"
             design="Tertiary"
             @click="{{setPrevPage}}"
             ></udex-button>
@@ -45,7 +46,8 @@
         {{/if}}
         <li class="udex-pagination__item--next udex-pagination__item">
             <udex-button
-            ?disabled="{{nextButtonDisbled}}" 
+            ?disabled="{{nextButtonDisbled}}"
+            tooltip="{{nextBtnTooltip}}"
             accessible-name="{{nextPageAccessibleName}}"
             size="Large"
             icon="navigation-right-arrow"

package/src/Pagination.ts

@@ -6,6 +6,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   OF,
   PAGINATION_PAGE,
@@ -141,6 +142,12 @@ class UDExPagination extends UI5Element {
     this._mobileDisplayNumber = 5;
   }
 
+  onEnterDOM() {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+  }
+
   get nextButtonDisbled(): boolean {
     return this.currentPageIndex + 1 === this.pages;
   }
@@ -209,11 +216,19 @@ class UDExPagination extends UI5Element {
     return `${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
   }
 
+  get previousBtnTooltip(): string {
+    return !this.prevButtonDisbled ? `${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}` : "";
+  }
+
   get nextPageAccessibleName(): string {
     if (this.pages && this.currentPageIndex === (this.pages - 1)) { return UDExPagination.i18nBundle.getText(NEXT_PAGE); }
     return `${UDExPagination.i18nBundle.getText(NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
   }
 
+  get nextBtnTooltip(): string {
+    return !this.nextButtonDisbled ? `${UDExPagination.i18nBundle.getText(NEXT_PAGE)}` : "";
+  }
+
   get pagination(): Page[] {
     return this.setupPages(this.pages);
   }
@@ -312,8 +327,8 @@ class UDExPagination extends UI5Element {
 
     for (let index = startIndex; index < endIndex && index < pages; index++) {
       const isCurrent = index === this.currentPageIndex;
-      const accessibleName = isCurrent ? ` 
-      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : ` 
+      const accessibleName = isCurrent ? `
+      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : `
       ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}`;
       pagesCollection.push({
         index,
@@ -330,8 +345,8 @@ class UDExPagination extends UI5Element {
     const pagesCollection = [];
     for (let index = 0; index < pages; index++) {
       const isCurrent = index === this.currentPageIndex;
-      const accessibleName = isCurrent ? ` 
-      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : ` 
+      const accessibleName = isCurrent ? `
+      ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : `
       ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}`;
       pagesCollection.push({
         index,

package/src/PasswordField.hbs

@@ -1,5 +1,4 @@
-<div class="udex-password-field">
-  <udex-text-field
+<udex-text-field
     type={{type}}
     value="{{value}}"
     label="{{passwordLabel}}"
@@ -11,18 +10,8 @@
     supporting-text="{{supportingText}}"
     accessible-name="{{accessibleName}}"
     accessible-name-ref="{{accessibleNameRef}}"
-  ></udex-text-field>
-  {{#if renderShowButton}}
-    <udex-control-button
-      ?disabled="{{disabled}}"
-      id="show-button"
-      design="Default"
-      class="udex-password-field__button udex-password-field__button_show"
-      icon={{icon}}
-      size="Large"
-      accessible-name="{{showButtonTooltip}}"
-      tooltip={{showButtonTooltip}}
-      @click="{{handleShowPassword}}"
-      ></udex-control-button>
-  {{/if}}
-</div>
+    accessible-icon-name="{{showButtonTooltip}}"
+    show-button-tooltip="{{showButtonTooltip}}"
+    @ui5-click-icon="{{handleShowPassword}}"
+    icon="{{iconButton}}"
+></udex-text-field>

package/src/PasswordField.ts

@@ -6,15 +6,19 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExTextField from "./TextField.js";
-import UDExControlButton from "./ControlButton.js";
 import ValueState from "./types/common.js";
 
 import PasswordFieldTemplate from "./generated/templates/PasswordFieldTemplate.lit.js";
 
-// Styles
-
-import PasswordFieldCss from "./generated/themes/PasswordField.css.js";
+export enum InputType {
+  Password = "password",
+  Text = "text",
+}
 
+export enum IconType {
+  Hide = "hide",
+  Show = "show",
+}
 /**
  * @class
  *
@@ -36,19 +40,19 @@ import PasswordFieldCss from "./generated/themes/PasswordField.css.js";
 @customElement({
   tag: "udex-password-field",
   renderer: litRender,
-  styles: PasswordFieldCss,
   template: PasswordFieldTemplate,
-  dependencies: [UDExTextField, UDExControlButton],
+  dependencies: [UDExTextField],
 })
+
 class UDExPasswordField extends UI5Element {
   /**
    * Defines supporting text under the input field.
    *
    * @default ""
-   * @public
+   * @private
    */
-  @property({ type: String, noAttribute: true, defaultValue: "password" })
-    type!: string;
+  @property({ type: String, noAttribute: true, defaultValue: InputType.Password })
+    type!: InputType;
 
   /**
    * Defines whether the component is in disabled state.
@@ -109,8 +113,8 @@ class UDExPasswordField extends UI5Element {
    * @public
    */
 
-  @property({ type: ValueState, defaultValue: "Standard" })
-    valueState!: "Standard" | "Warning" | "Error" | "Success";
+  @property({ type: ValueState, defaultValue: ValueState.Standard })
+    valueState!: ValueState;
 
   /**
    * Defines supporting text under the input field.
@@ -139,8 +143,8 @@ class UDExPasswordField extends UI5Element {
    * @private
    */
 
-  @property({ type: String, noAttribute: true, defaultValue: "show" })
-    icon!: string;
+  @property({ type: String, noAttribute: true, defaultValue: IconType.Show })
+    icon!: IconType;
 
   /**
    * Defines the inner stored show password button tooltip.
@@ -149,7 +153,7 @@ class UDExPasswordField extends UI5Element {
    * @public
    */
 
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     showButtonTooltip!: string;
 
   /**
@@ -176,7 +180,7 @@ class UDExPasswordField extends UI5Element {
    * @default ""
    * @public
    */
-  @property()
+  @property({ type: String })
     accessibleName!: string;
 
   /**
@@ -184,7 +188,7 @@ class UDExPasswordField extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ defaultValue: "" })
+  @property({ type: String })
     accessibleNameRef!: string;
 
   static i18nBundle: I18nBundle;
@@ -193,20 +197,24 @@ class UDExPasswordField extends UI5Element {
     UDExPasswordField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
   }
 
-  handleShowPassword() {
-    const isPassword = this.type === "password";
+  handleShowPassword(): void {
+    const isPassword = this.type === InputType.Password;
 
-    this.icon = isPassword ? "hide" : "show";
-    this.type = isPassword ? "text" : "password";
+    this.icon = isPassword ? IconType.Hide : IconType.Show;
+    this.type = isPassword ? InputType.Text : InputType.Password;
   }
 
-  get passwordLabel() {
-    return `${this.label} ${this.showAsterisk && this.showAsterisk ? "*" : ""}`;
+  get passwordLabel(): string {
+    return `${this.label} ${this.showAsterisk ? "*" : ""}`;
   }
 
-  get renderShowButton() {
+  get renderShowButton(): boolean {
     return !this.disabled && !this.readonly && !this.displayonly && this.showButtonEnabled;
   }
+
+  get iconButton(): IconType | null {
+    return this.renderShowButton ? this.icon : null;
+  }
 }
 
 UDExPasswordField.define();

package/src/PhoneNumberField.hbs

@@ -6,8 +6,9 @@
 >
     {{#if label}}
         <label
+            id="udex-phone-number-field__label"
             class="udex-phone-number-field__label"
-            for="phone"
+            for="{{this._id}}-phone"
         >
             {{label}}
             {{#if required}}
@@ -17,7 +18,7 @@
     {{/if}}
     <udex-dropdown
         class="udex-phone-number-field__dropdown"
-        id="dropdown-menu"
+        id="{{this._id}}_dropdown-menu"
         horizontal-align="Left"
         height="{{height}}"
     >
@@ -54,7 +55,11 @@
                 ?disabled="{{isButtonDisabled}}"
                 aria-disabled="{{isButtonDisabled}}"
                 aria-haspopup="true"
+                aria-label="{{countrySelectorAriaLabel}}"
                 accessible-name="{{countrySelectorAriaLabel}}"
+                aria-expanded="{{_dropdownExpanded}}"
+                aria-controls="{{this._id}}_dropdown-menu"
+                role="combobox"
                 @click="{{onClick}}"
             >
                 <div class="udex-phone-number-field__open-button-text">
@@ -70,7 +75,7 @@
         {{/unless}}
         <input
             class="udex-phone-number-field__input"
-            id="phone"
+            id="{{this._id}}-phone"
             type="tel"
             .value="{{value}}"
             placeholder="{{phoneFormat}}"

package/src/PhoneNumberField.ts

@@ -199,6 +199,14 @@ class UDExPhoneNumberField extends UI5Element {
   @property({ type: String, noAttribute: true, defaultValue: OpenButtonIcon.iconDown })
     buttonIcon!: string;
 
+  /**
+   * Defines the open button icon
+   *
+   * @private
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _dropdownExpanded!: boolean;
+
   /**
    * Defines the phone format of the input
    *
@@ -267,7 +275,7 @@ class UDExPhoneNumberField extends UI5Element {
   }
 
   get countrySelectorAriaLabel() {
-    return this.accessibleName || UDExPhoneNumberField.i18nBundle.getText(COUNTRY_SELECT);
+    return this.accessibleName || `${this.label} ${UDExPhoneNumberField.i18nBundle.getText(COUNTRY_SELECT)}`;
   }
 
   get countryIso() {
@@ -391,9 +399,11 @@ class UDExPhoneNumberField extends UI5Element {
 
   handleDropdownOpen() {
     this.buttonIcon = OpenButtonIcon.iconUp;
+    this._dropdownExpanded = true;
   }
   handleDropdownClose() {
     this.buttonIcon = OpenButtonIcon.iconDown;
+    this._dropdownExpanded = false;
   }
 
   autoSelectCountry(value: string) {

package/src/RatingBar.hbs

@@ -0,0 +1,11 @@
+<div class="udex-rating-bar__container">
+    <div aria-hidden="true" class="udex-rating-bar__rating">{{validatedRating}}</div>
+	<ui5-icon role="img" aria-labelledby="ratingDescription" name="favorite" class="udex-rating__icon"></ui5-icon>
+    <div class="udex-rating-bar__track">
+        <div class="udex-rating-bar__progress"></div>
+    </div>
+    {{#if showPercentage}}
+        <div role="note" class="udex-rating-bar__percentage">{{validatedPercentage}}</div>
+    {{/if}}
+    <span id="ratingDescription" class="hidden-text">{{_ratingDescription}}</span>
+</div>

package/src/RatingBar.ts

@@ -0,0 +1,113 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import { STARS } from "./generated/i18n/i18n-defaults.js";
+import RatingBarTemplate from "./generated/templates/RatingBarTemplate.lit.js";
+
+// Styles
+import RatingBarCss from "./generated/themes/RatingBar.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-rating-bar</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/RatingBar.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-rating-bar",
+  renderer: litRender,
+  styles: RatingBarCss,
+  template: RatingBarTemplate,
+  dependencies: [Icon],
+})
+
+class UDExRatingBar extends UI5Element {
+  /**
+    * Defines the associated rating.
+    *
+    * @default 0
+    * @public
+    */
+  @property({ type: Number, defaultValue: 0, validator: Integer })
+    rating!: number;
+
+  /**
+    * Defines the percentage.
+    *
+    * @default 0
+    * @public
+    */
+  @property({ type: Number, defaultValue: 0, validator: Integer })
+    percentage!: number;
+
+  /**
+    * Defines wether the percentage is shown or not.
+    *
+    * @default false
+    * @public
+    */
+  @property({ type: Boolean })
+    showPercentage!: boolean;
+
+  static i18nBundle: I18nBundle;
+
+  _minRating: number = 0;
+  _maxRating: number = 5;
+  _minPercentage: number = 0;
+  _maxPercentage: number = 100;
+
+  static async onDefine() {
+    UDExRatingBar.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+  }
+
+  onBeforeRendering(): void {
+    this.style.setProperty("--udex-rating-bar-progress", `${this.percentage}%`);
+  }
+
+  get validatedRating(): number {
+    if (this.rating > this._maxRating) {
+      console.warn("UDEx RatingBar: The rating shouldn't be more than 5.");
+      return this._maxRating;
+    }
+    if (this.rating < this._minRating) {
+      console.warn("UDEx RatingBar: The rating shouldn't be less than 0.");
+      return this._minRating;
+    }
+    return this.rating;
+  }
+
+  get validatedPercentage(): string {
+    if (this.percentage > this._maxPercentage) {
+      console.warn("UDEx RatingBar: The percentage shouldn't be more than 100.");
+      return `${this._maxPercentage}%`;
+    }
+    if (this.percentage < this._minPercentage) {
+      console.warn("UDEx RatingBar: The percentage shouldn't be less than 0.");
+      return `${this._minPercentage}%`;
+    }
+    return `${this.percentage}%`;
+  }
+
+  get _ratingDescription(): string {
+    return `${this.validatedRating} ${UDExRatingBar.i18nBundle.getText(STARS)}`;
+  }
+}
+
+UDExRatingBar.define();
+
+export default UDExRatingBar;