@sapudex/web-components 2.28.0 → 2.30.0

package/src/MastheadCountrySelector.ts

@@ -32,6 +32,7 @@ export type Country = {
   displayTitle: string,
   countryCode: string,
   url: string,
+  active: boolean,
 };
 
 type UDExMastheadCountrySelectorRegionClickEventDetail = {
@@ -127,6 +128,25 @@ class UDExMastheadCountrySelector extends UI5Element {
     "country-selector-search": UDExMastheadCountrySelectorSearchEventDetail,
     "region-item-click": UDExMastheadCountrySelectorRegionClickEventDetail
   };
+
+  /**
+   * Defines active country code of the regions menu
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    activeCountryCode !: string;
+
+  /**
+   * Defines active country url of the regions menu
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    activeCountryUrl!: string;
+
   /**
    * Defines title of the regions menu
    *
@@ -279,11 +299,8 @@ class UDExMastheadCountrySelector extends UI5Element {
   }
 
   handleBackKeyboard(e: KeyboardEvent): void {
-    if (isLeft(e) && !this.isRtlDirection) {
-      return this.backToRegions();
-    }
-    if (isRight(e) && this.isRtlDirection) {
-      return this.backToRegions();
+    if ((isLeft(e) && !this.isRtlDirection) || (isRight(e) && this.isRtlDirection)) {
+      this.backToRegions();
     }
   }
 
@@ -562,6 +579,12 @@ class UDExMastheadCountrySelector extends UI5Element {
     this.countryListHolder.classList.remove(`${this._countriesListHolderClassName}_scrollable`);
   }
 
+  isActiveCountry(countryCode: string, url: string): boolean {
+    const matchedURL = this.activeCountryUrl?.toUpperCase() === url.toUpperCase();
+    const matchedCode = this.activeCountryCode?.toUpperCase() === countryCode.toUpperCase();
+    return matchedURL && matchedCode;
+  }
+
   get scrollBottomCountriesList(): number {
     const countriesList = this.countryListHolder;
     return countriesList.scrollHeight - countriesList.scrollTop - countriesList.clientHeight;
@@ -590,7 +613,14 @@ class UDExMastheadCountrySelector extends UI5Element {
   }
 
   get regionsData(): Array<Region> {
-    return this.regions ? JSON.parse(this.regions) as Array<Region> : [];
+    const regions: Array<Region> = this.regions ? JSON.parse(this.regions) as Array<Region> : [];
+    return regions.map(region => ({
+      ...region,
+      countries: region.countries.map(country => ({
+        ...country,
+        active: this.isActiveCountry(country.countryCode, country.url),
+      })),
+    }));
   }
 
   get isRtlDirection(): boolean {

package/src/MastheadItem.hbs

@@ -21,23 +21,21 @@
         </span>
     {{/if}}
 {{else if isProfileBtn}}
-    <span
+    <button
         id="{{this._id}}"
-        class="udex-masthead-item__btn {{additionalClass}}"
-        aria-expanded="{{selected}}"
+        class="udex-masthead-item__btn udex-masthead-item__profile-btn {{additionalClass}}"
+        aria-expanded="{{buttonAriaExpanded}}"
         aria-describedby="{{ariaDescribedBy}}"
         aria-controls="{{this._id}}_dropdown"
-        aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
         @click="{{handleItemClick}}"
+        @click-default="{{handleItemClick}}"
         @mousedown="{{handleMouseDown}}"
         @mouseup="{{handleMouseUp}}">
         {{> content}}
-    </span>
-    {{#if isDropdownOpened}}
-        {{> dropdown}}
-    {{/if}}
+    </button>
+    {{> dropdown}}
 {{else}}
     <button
         role="{{accessibleRoleName}}"
@@ -46,7 +44,6 @@
         aria-expanded="{{buttonAriaExpanded}}"
         aria-controls="{{this._id}}_dropdown"
         aria-describedby="{{ariaDescribedBy}}"
-        aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
         @mousedown="{{handleMouseDown}}"
@@ -54,9 +51,7 @@
         @click="{{handleItemClick}}">
         {{> content}}
     </button>
-    {{#if isDropdownOpened}}
-        {{> dropdown}}
-    {{/if}}
+    {{> dropdown}}
 {{/if}}
 
 {{#*inline "content"}}
@@ -69,13 +64,23 @@
             mode="Decorative">
         </ui5-icon>
     {{else if image}}
-        <div class="udex-masthead-item__image-wrap">
-            <img
-                class="udex-masthead-item__image"
-                id="{{this._id}}_image-alt"
-                src="{{image}}"
-                alt="{{imageAlt}}"/>
-        </div>
+        {{#if imageLoadError}}
+            <ui5-icon
+                class="udex-masthead-item__icon"
+                name="sap-icon://world"
+                mode="Decorative">
+            </ui5-icon>
+        {{else}}
+            <div class="udex-masthead-item__image-wrap">
+                <img
+                    class="udex-masthead-item__image"
+                    id="{{this._id}}_image-alt"
+                    src="{{image}}"
+                    aria-hidden="{{isCountrySelectorBtn}}"
+                    alt="{{imageAlt}}"
+                    @error="{{handleImageError}}"/>
+            </div>
+        {{/if}}
         {{#if imageAlt}}
             <span
                 id="image-desc"
@@ -98,13 +103,17 @@
 {{/inline}}
 
 {{#*inline "dropdown"}}
+    {{#if isDropdownOpened}}
     <div
         id="{{this._id}}_dropdown"
         class="udex-masthead-item__dropdown"
         @keydown="{{handleKeyDown}}"
         @focusout="{{handleFocusout}}">
-        <div class="udex-masthead-item__dropdown-holder">
-            <slot name="dropdown"></slot>
-        </div>
+          <div class="udex-masthead-item__dropdown-holder">
+              <slot name="dropdown"></slot>
+          </div>
     </div>
+    {{else}}
+      <div id="{{this._id}}_dropdown"></div>
+    {{/if}}
 {{/inline}}

package/src/MastheadItem.ts

@@ -10,13 +10,13 @@ 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 { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import type UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import "@ui5/webcomponents-icons/dist/world.js";
 import type UDExMastheadShell from "./MastheadShell.js";
 import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
 import { UDExTarget } from "./types/common.js";
@@ -315,6 +315,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @property({ type: Boolean })
     _isMenuCloseBtn?: boolean;
 
+  /**
+   * Defines if the image failed to load
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _imageLoadError = false;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -339,10 +347,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
       this.setDropdownInsetStart();
     }
 
-    if (this.shouldFocusFirstElement) {
-      this.applyFocusToFirstElement();
-    }
-
     this.handleOutsideClick();
   }
 
@@ -432,6 +436,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
+  handleImageError(): void {
+    this._imageLoadError = true;
+  }
+
   fireDropdownEvents(): void {
     if (this.hasDropdownSlot) {
       const { Open, Close } = UDExMastheadDropdownItemAction;
@@ -511,13 +519,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     this.fireDropdownCloseEvent(this.accessibleName || this.eventItemTitle, UDExMastheadDropdownItemAction.Close);
   }
 
-  async applyFocusToFirstElement(): Promise<void> {
-    const focusedElement = await getFirstFocusableElement(this.dropdownHolder);
-    if (focusedElement) {
-      focusedElement.focus();
-    }
-  }
-
   getDomElement(selector: string): HTMLElement | undefined | null {
     return this.shadowRoot?.querySelector(`${selector}`);
   }
@@ -607,10 +608,6 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return labels.length ? labels.join(" ").trim() : undefined;
   }
 
-  get shouldFocusFirstElement(): boolean {
-    return this.isDropdownOpened && !this._preventFocusOut;
-  }
-
   get isDropdownOpened(): boolean {
     return this.hasDropdownSlot && this.selected;
   }
@@ -688,9 +685,14 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get buttonAriaExpanded(): boolean | undefined {
-    if (!this.isSearchBtn) {
-      return this.selected;
+    if (!this.hasDropdownSlot) {
+      return undefined;
     }
+    return this.selected || false;
+  }
+
+  get imageLoadError(): boolean {
+    return this._imageLoadError && this.isCountrySelectorBtn;
   }
 }
 

package/src/MastheadMenu.ts

@@ -9,7 +9,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/action.js";
 import {
-  isUp, isDown, isTabNext, isTabPrevious, isHome, isEnd,
+  isTabNext, isTabPrevious, isHome, isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExBadge from "./Badge.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
@@ -139,11 +139,11 @@ class UDExMastheadMenu extends UI5Element {
     const isFirstItem = e.target === this.links[0];
     const isLastItem = e.target === this.links[this.links.length - 1];
 
-    if (isUp(e) || (isTabPrevious(e) && !isFirstItem)) {
-      this.handleUpArrow(e);
+    if (isTabPrevious(e) && !isFirstItem) {
+      this.handlePreviousItemFocus(e);
     }
-    if (isDown(e) || (isTabNext(e) && !isLastItem)) {
-      this.handleDownArrow(e);
+    if (isTabNext(e) && !isLastItem) {
+      this.handleNextItemFocus(e);
     }
     if (isHome(e)) {
       this.handleHomeKey(e);
@@ -165,13 +165,13 @@ class UDExMastheadMenu extends UI5Element {
     lastItem.focus();
   }
 
-  handleUpArrow(e: KeyboardEvent): void {
+  handlePreviousItemFocus(e: KeyboardEvent): void {
     e.preventDefault();
     const currentItem = e.target as UDExMastheadMenuItem;
     this.focusPreviousItem(currentItem);
   }
 
-  handleDownArrow(e: KeyboardEvent): void {
+  handleNextItemFocus(e: KeyboardEvent): void {
     e.preventDefault();
     const currentItem = e.target as UDExMastheadMenuItem;
     this.focusNextItem(currentItem);
@@ -239,10 +239,11 @@ class UDExMastheadMenu extends UI5Element {
     return parsedItems.map((mainItem: MenuItem) => {
       mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((subMenu: SubMenuLinkItem) => {
         subMenu.categoryId = `${id++}`;
-        subMenu.items = subMenu.items.map((item: Item) => ({
+
+        subMenu.items = subMenu.items ? subMenu.items.map((item: Item) => ({
           ...item,
           ...(item.title === "-" && { isDivider: true }),
-        }));
+        })) : [];
 
         return subMenu;
       });

package/src/MastheadMobileMenu.hbs

@@ -38,7 +38,7 @@
                                 class="udex-masthead-mobile-menu__back-item"
                                 @click="{{handleBackToMenuItems}}"
                                 label="{{_clickedItem.innerText}}"
-                                aria-has-popup="true"
+                                aria-haspopup="true"
                                 type="Button"
                                 is-back
                                 has-border
@@ -58,7 +58,7 @@
                         @click="{{handleBackToCategories}}"
                         label="{{_category.category}}"
                         type="Button"
-                        aria-has-popup="true"
+                        aria-haspopup="true"
                         has-border
                         icon-start
                         is-back
@@ -77,7 +77,7 @@
             @click="{{handleExploreSapClick}}"
             @keydown="{{handleLeftRightKeys}}"
             accessible-role-text="button"
-            aria-has-popup="true"
+            aria-haspopup="true"
             type="Button"
             first-level-btn
             first-level
@@ -96,7 +96,7 @@
                     part="menu-item"
                     @click="{{../handleMenuItemClick}}"
                     label="{{this.innerText}}"
-                    aria-has-popup="true"
+                    aria-haspopup="true"
                     id="{{this._id}}"
                     type="Button"
                     first-level-btn
@@ -141,7 +141,7 @@
                         @click="{{../handleMenuCategoryClick}}"
                         id="{{@index}}"
                         label="{{this.category}}"
-                        aria-has-popup="true"
+                        aria-haspopup="true"
                         type="Button"
                         second-level-btn
                         second-level

package/src/MessageStrip.ts

@@ -64,6 +64,24 @@ class UDExMessageStrip extends MessageStrip {
   @property({ type: Boolean })
     hideCloseButton!: boolean;
 
+  /**
+   * Defines accessible name for close icon
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    closeIconAccessibleName!: string;
+
+  /**
+   * Defines tooltip for close icon
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    closeIconTooltip!: string;
+
   /**
    * Defines the content of the component.
    *
@@ -126,7 +144,7 @@ class UDExMessageStrip extends MessageStrip {
   }
 
   get _closeButtonText(): string {
-    return `${this.textStatus ?? ""} ${this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON)}`;
+    return this.closeIconTooltip || `${this.textStatus ?? ""} ${this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON)}`;
   }
 
   get isNotIconStatusType(): boolean {

package/src/MessageStripTemplate.tsx

@@ -54,6 +54,7 @@ export default function MessageStripTemplate(this: UDExMessageStrip) {
           design={UDExButtonDesign.Tertiary}
           onClick={this._closeClick}
           tooltip={this._closeButtonText}
+          accessibleName={this.closeIconAccessibleName}
           part="close-button"
         />
       )}

package/src/Pagination.ts

@@ -364,7 +364,7 @@ class UDExPagination extends UI5Element {
       return;
     }
 
-    if (!this._pages.length || this._visiblePages.length < this.displayNumber) {
+    if (!this._pages.length || this._visiblePages.length !== this.displayNumber) {
       this._firstPageIndex = 0;
       this._lastPageIndex = pages > this.displayNumber ? this.displayNumber : pages;
       this._pageFocusedManually = false;

package/src/PromoTile.ts

@@ -16,10 +16,10 @@ import type UDExButton from "./Button.js";
 import UDExButtonSize from "./types/ButtonSize.js";
 import UDExButtonDesign from "./types/ButtonDesign.js";
 import { UDExPromoTileColorScheme, UDExPromoTileMode } from "./types/PromoTile.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import PromoTileCss from "./generated/themes/PromoTile.css.js";
-import translate from "./utils/translate.js";
 
 export enum UDExOrientation {
   Vertical = "Vertical",
@@ -72,6 +72,15 @@ class UDExPromoTile extends UI5Element {
   @slot({ type: HTMLElement, "default": true })
     content!: Array<HTMLElement>;
 
+  /**
+   * Defines the custom pictogram of the Promo Tile.
+   *
+   * @slot pictogram
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    pictogram?: Array<HTMLElement>;
+
   /**
    * Defines the orientation of the Promo Tile component.
    *
@@ -199,9 +208,7 @@ class UDExPromoTile extends UI5Element {
   }
 
   getButton(): UDExButton | undefined {
-    return this.shadowRoot!.querySelector<UDExButton>(
-      "[udex-button]",
-    )!;
+    return this.shadowRoot!.querySelector<UDExButton>("[udex-button]")!;
   }
 
   applyColorScheme(): void {
@@ -250,6 +257,11 @@ class UDExPromoTile extends UI5Element {
     return color;
   }
 
+  handleCTAButtonClick(e: Event) {
+    e.preventDefault();
+    this.fireDecoratorEvent("button-click");
+  }
+
   get isMobile(): boolean {
     return BreakpointUtils.isAtMost("S");
   }
@@ -259,7 +271,7 @@ class UDExPromoTile extends UI5Element {
   }
 
   get _showPictogram(): boolean {
-    return !!this.icon || !!this.logoUrl;
+    return !!this.icon || !!this.logoUrl || !!this.pictogram?.length;
   }
 
   get _showLogo(): boolean {
@@ -269,11 +281,6 @@ class UDExPromoTile extends UI5Element {
   get _imageLabel(): string {
     return this.imageLabel || translate(UDExPromoTile, PROMO_TILE_ICON);
   }
-
-  handleCTAButtonClick(e: Event) {
-    e.preventDefault();
-    this.fireDecoratorEvent("button-click");
-  }
 }
 
 UDExPromoTile.define();

package/src/PromoTileTemplate.tsx

@@ -18,22 +18,26 @@ export default function PromoTileTemplate(this: UDExPromoTile) {
           part="image"
           class={{
             "udex-promo-tile__pictogram": true,
-            "udex-promo-tile__pictogram--logo": this.logoUrl
+            "udex-promo-tile__pictogram--logo": this.logoUrl && !this.pictogram?.length
           }}
           title={this._imageLabel}>
-          {this.icon &&
-            <UI5Icon
-              class={`${rootClass}__icon`}
-              name={this.icon?.toLowerCase()}
-              mode={IconMode.Decorative}
-              accessibleName={this._imageLabel}>
-            </UI5Icon>}
-          {this._showLogo &&
-            <img
-              src={this.logoUrl}
-              class={`${rootClass}__icon`}
-              aria-label={this._imageLabel}
-              alt={this._imageLabel} />}
+          <slot slot="pictogram" name="pictogram">
+            {this.icon &&
+              <UI5Icon
+                class={`${rootClass}__icon`}
+                name={this.icon?.toLowerCase()}
+                mode={IconMode.Decorative}
+                accessibleName={this._imageLabel}>
+              </UI5Icon>
+            }
+            {this._showLogo &&
+              <img
+                src={this.logoUrl}
+                class={`${rootClass}__icon`}
+                aria-label={this._imageLabel}
+                alt={this._imageLabel} />
+            }
+          </slot>
         </div>
       }
       <div part="content" class={`${rootClass}__content`}>

package/src/ReviewItem.ts

@@ -8,7 +8,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ReviewItemTemplate from "./ReviewItemTemplate.js";
-import { READ_LESS, READ_MORE } from "./generated/i18n/i18n-defaults.js";
+import { SHOW_LESS, SHOW_MORE } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 
 // Styles
@@ -73,14 +73,6 @@ class UDExReviewItem extends UI5Element {
   @property({ type: String })
     text!: string;
 
-  /**
-   * Defines whether button for showing truncated text is shown.
-   * @default 2
-   * @private
-   */
-  @property({ type: Number })
-    _textLineLimit: number = 2;
-
   /**
    * Defines whether the text is expanded.
    * @default false
@@ -123,23 +115,30 @@ class UDExReviewItem extends UI5Element {
   @slot()
     date!: Array<HTMLElement>;
 
+  /**
+   * Slot for custom content.
+   *
+   * @slot
+   */
+  @slot()
+    content?: Array<HTMLElement>;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
   _handleResizeBound: ResizeObserverCallback;
   _textElement!: HTMLElement;
   _visibleText!: string;
-  _maxHeight: number = 48;
+  _maxHeight: number = 90;
   _maxRating: number = 5;
   _minRating: number = 0;
 
   constructor() {
     super();
-    this._handleResizeBound = this._checkTextOverflow.bind(this);
+    this._handleResizeBound = this._handleResize.bind(this);
   }
 
   onEnterDOM(): void {
-    this._maxHeight = 48;
     this._completeText = this.text;
     ResizeHandler.register(this, this._handleResizeBound);
   }
@@ -149,19 +148,22 @@ class UDExReviewItem extends UI5Element {
   }
 
   onAfterRendering(): void {
-    this._textElement = this.getTextElement();
-    this._checkTextOverflow();
+    this._textElement = this.textElement;
+    if (this.text) {
+      this._checkTextOverflow();
+    }
+  }
+
+  _handleResize(): void {
+    if (this.text) {
+      this._checkTextOverflow();
+    }
   }
 
   _toggleText() {
     this._textExpanded = !this._textExpanded;
-    if (this._textExpanded) {
-      this._completeText = this.text;
-      this._textElement.classList.add("udex-review-item__text-expanded");
-    } else {
-      this._textElement.classList.remove("udex-review-item__text-expanded");
-      this._completeText = this._visibleText;
-    }
+    this._completeText = this._textExpanded ? this.text : this._visibleText;
+    this._textElement.classList.toggle("udex-review-item__text-expanded", this._textExpanded);
   }
 
   _checkTextOverflow() {
@@ -169,18 +171,26 @@ class UDExReviewItem extends UI5Element {
 
     const canvas = document.createElement("canvas");
     const context = canvas.getContext("2d")!;
-    context.font = `16px sans-serif`;
+    context.font = "16px sans-serif";
 
-    let currentLineWidth = 0;
+    const maxWidth = this._textElement.offsetWidth;
     let visibleText = "";
+    const lineHeight = 22; // Approximate line height for 16px font
+
+    for (let i = 0; i < words.length; i++) {
+      const testText = visibleText + (visibleText ? " " : "") + words[i];
+      const metrics = context.measureText(testText);
+      const textWidth = metrics.width;
+
+      const estimatedLines = Math.ceil(textWidth / maxWidth);
+      const estimatedHeight = estimatedLines * lineHeight;
 
-    words.forEach(word => {
-      const wordWidth = context.measureText(`${word} `).width;
-      if (currentLineWidth + wordWidth <= 2 * this._textElement.offsetWidth) {
-        visibleText += `${word} `;
-        currentLineWidth += wordWidth;
+      if (estimatedHeight > this._maxHeight) {
+        break;
       }
-    });
+
+      visibleText = testText;
+    }
 
     this._visibleText = visibleText;
     if (!this._textExpanded) {
@@ -190,8 +200,13 @@ class UDExReviewItem extends UI5Element {
     this._showTextExpander = (!this._textExpanded && this._completeText.length < this.text.length) || (this._textExpanded && visibleText.length < this.text.length);
   }
 
+  get textElement(): HTMLElement {
+    const textElement = this.shadowRoot?.getElementById("udex-review-item__text");
+    return textElement!;
+  }
+
   get buttonText(): string {
-    return this._textExpanded ? translate(UDExReviewItem, READ_LESS) : translate(UDExReviewItem, READ_MORE);
+    return this._textExpanded ? translate(UDExReviewItem, SHOW_LESS) : translate(UDExReviewItem, SHOW_MORE);
   }
 
   get reviewItemClasses(): string {
@@ -210,11 +225,6 @@ class UDExReviewItem extends UI5Element {
     }
     return this.rating;
   }
-
-  getTextElement(): HTMLElement {
-    const textElement = this.shadowRoot?.getElementById("udex-review-item__text");
-    return textElement!;
-  }
 }
 
 UDExReviewItem.define();