@sapudex/web-components 2.24.0 → 2.25.0

package/src/Search.ts

@@ -41,6 +41,7 @@ import type SearchInputSuggestion from "./features/SearchSuggestionsPopover.js";
 import retryUntilSuccessful from "./utils/retryUntilSuccessful.js";
 import sanitizeString from "./utils/sanitizeString.js";
 import UDExButton from "./Button.js";
+import translate from "./utils/translate.js";
 
 import SearchTemplate from "./SearchTemplate.js";
 
@@ -634,7 +635,7 @@ class UDExSearch extends UI5Element {
       const hasDataLabels = this.hasDataLabel(parsedData);
 
       if (this.shouldShowPopover(parsedData, hasDataLabels)) {
-        this.setDropdownLabels(hasDataLabels, parsedData);
+        this.setDropdownLabels(parsedData);
         this.suggestedList = this.getListWithSuggestion(this.getSuggestedList(hasDataLabels, parsedData), "suggested");
         this.recommendedList = this.getListWithSuggestion(this.getRecommendedList(hasDataLabels, parsedData), "recommended");
       }
@@ -649,26 +650,42 @@ class UDExSearch extends UI5Element {
     return Object.values(parsedData).some(item => Object.prototype.hasOwnProperty.call(item, "label"));
   }
 
+  private hasSuggestedLabel(parsedData: SuggestionRecommendLists) {
+    if (parsedData.suggested) {
+      const suggestedData = parsedData.suggested as SuggestionData;
+      return Object.prototype.hasOwnProperty.call(parsedData.suggested, "label") ? !!suggestedData.label : false;
+    }
+    return false;
+  }
+
+  private hasRecommendedLabel(parsedData: SuggestionRecommendLists): boolean {
+    if (parsedData.recommended) {
+      const recommendedData = parsedData.recommended as RecommendData;
+      return Object.prototype.hasOwnProperty.call(parsedData.recommended, "label") ? !!recommendedData.label : false;
+    }
+    return false;
+  }
+
   private resetSuggestedRecommendedLists() {
     this.suggestedList = [];
     this.recommendedList = [];
   }
 
-  private setDropdownLabels(hasDataLabels: boolean, parsedData: SuggestionRecommendLists) {
-    this._suggestionLabel = this.getSuggestionLabel(hasDataLabels, parsedData);
-    this._recommendLabel = this.getRecommendLabel(hasDataLabels, parsedData);
+  private setDropdownLabels(parsedData: SuggestionRecommendLists) {
+    this._suggestionLabel = this.getSuggestionLabel(parsedData);
+    this._recommendLabel = this.getRecommendLabel(parsedData);
   }
 
-  private getRecommendLabel(hasDataLabels: boolean, parsedData: SuggestionRecommendLists): string {
-    return hasDataLabels
+  private getRecommendLabel(parsedData: SuggestionRecommendLists): string {
+    return this.hasRecommendedLabel(parsedData)
       ? (parsedData.recommended as RecommendData).label || ""
-      : UDExSearch.i18nBundle.getText(RECOMMENDED_TEXT);
+      : translate(UDExSearch, RECOMMENDED_TEXT);
   }
 
-  private getSuggestionLabel(hasDataLabels: boolean, parsedData: SuggestionRecommendLists): string {
-    return hasDataLabels
+  private getSuggestionLabel(parsedData: SuggestionRecommendLists): string {
+    return this.hasSuggestedLabel(parsedData)
       ? (parsedData.suggested as SuggestionData).label || ""
-      : UDExSearch.i18nBundle.getText(SUGGESTED_TEXT);
+      : translate(UDExSearch, SUGGESTED_TEXT);
   }
 
   private getRecommendedList(hasDataLabels: boolean, parsedData: SuggestionRecommendLists) {
@@ -712,7 +729,7 @@ class UDExSearch extends UI5Element {
         icon: itemWithCustomIcon ? item.icon : SearchIcon,
         hasCustomIcon: itemWithCustomIcon,
         id: `${idName}-${index}`,
-        suggestionDescription: sanitizeString(`${label}, ${idName} ${index + 1} ${UDExSearch.i18nBundle.getText(OF)} ${suggestedList.length}`),
+        suggestionDescription: sanitizeString(`${label}, ${idName} ${index + 1} ${translate(UDExSearch, OF)} ${suggestedList.length}`),
       };
     });
   }
@@ -1113,7 +1130,7 @@ class UDExSearch extends UI5Element {
   }
 
   get effectivePlaceholder() {
-    return !this.voiceActiveClass ? this.label : `${UDExSearch.i18nBundle.getText(LISTENING)}...`;
+    return !this.voiceActiveClass ? this.label : `${translate(UDExSearch, LISTENING)}...`;
   }
 
   onSpeechStart(): void {
@@ -1178,7 +1195,7 @@ class UDExSearch extends UI5Element {
   }
 
   get noResultMessage(): string {
-    return this.noResultText || UDExSearch.i18nBundle.getText(NO_MATCHES_FOUND);
+    return this.noResultText || translate(UDExSearch, NO_MATCHES_FOUND);
   }
 
   get showNoResultMessage(): boolean {
@@ -1285,8 +1302,8 @@ class UDExSearch extends UI5Element {
   get accInfo() {
     return {
       "ariaLabel": this.accessibleName || undefined,
-      "accessibleNameResetIcon": this.accessibleNameResetIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_RESET_ICON),
-      "accessibleNameSearchIcon": this.accessibleNameSearchIcon || UDExSearch.i18nBundle.getText(ACCESSIBLE_NAME_SEARCH_ICON),
+      "accessibleNameResetIcon": this.accessibleNameResetIcon || translate(UDExSearch, ACCESSIBLE_NAME_RESET_ICON),
+      "accessibleNameSearchIcon": this.accessibleNameSearchIcon || translate(UDExSearch, ACCESSIBLE_NAME_SEARCH_ICON),
     };
   }
 
@@ -1296,14 +1313,14 @@ class UDExSearch extends UI5Element {
 
   get tooltipInfo() {
     return {
-      "tooltipResetButton": this.tooltipResetButton || UDExSearch.i18nBundle.getText(TOOLTIP_RESET_BUTTON),
-      "tooltipVoiceButton": this.tooltipVoiceButton || UDExSearch.i18nBundle.getText(TOOLTIP_VOICE_BUTTON),
-      "tooltipSubmitButton": this.tooltipSubmitButton || UDExSearch.i18nBundle.getText(TOOLTIP_SUBMIT_BUTTON),
+      "tooltipResetButton": this.tooltipResetButton || translate(UDExSearch, TOOLTIP_RESET_BUTTON),
+      "tooltipVoiceButton": this.tooltipVoiceButton || translate(UDExSearch, TOOLTIP_VOICE_BUTTON),
+      "tooltipSubmitButton": this.tooltipSubmitButton || translate(UDExSearch, TOOLTIP_SUBMIT_BUTTON),
     };
   }
 
   get suggestionsAccessibleName(): string {
-    return UDExSearch.i18nBundle.getText(AVAILABLE_VALUES);
+    return translate(UDExSearch, AVAILABLE_VALUES);
   }
 
   get showNonInteractiveButton(): boolean {

package/src/SearchTemplate.tsx

@@ -23,7 +23,7 @@ export default function SearchTemplate(this: UDExSearch) {
       <div class={`udex-search__root ${this.searchClasses}`}>
         { this.isShowSearchHomePrefix ? renderSearchHomePrefix.call(this) : "" }
 
-        <form role="search" class={`udex-search__container ${this.focusClasses} ${this.isNotEmptyClass}`}>
+        <form class={`udex-search__container ${this.focusClasses} ${this.isNotEmptyClass}`}>
           { this.labelAnimationDisabled ? renderInputWithStaticLabel.call(this) : renderInputWithAnimatedLabel.call(this) }
 
           {

package/src/SearchableListBase.ts

@@ -16,6 +16,7 @@ import type UDExListItem from "./ListItem.js";
 import type UDExFilterMenuItem from "./FilterMenuItem.js";
 import { SHOW_SEARCH_AFTER_COUNT, UDExPopoverPart } from "./types/SearchableListBase.js";
 import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 export type UDExItemFromList = UDExListItemBase | UDExListGroupHeaderBase | null | undefined;
 
@@ -50,7 +51,7 @@ export type UDExSearchableListBaseEvents = {
  * @class
  *
  * A class to serve as a foundation
- * for the <code>UDExFilterMenu</code> and <code>UDExSelectBox</code> classes.
+ * for the <code>UDExFilterMenu</code> ,<code>UDExSelectBox</code> and <code>UDExCountrySelector</code> classes.
  *
  * @constructor
  * @author SAP SE
@@ -558,11 +559,11 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get noMatchesFoundText(): string {
-    return UDExSearchableListBase.i18nBundle.getText(NO_MATCHES_FOUND);
+    return translate(UDExSearchableListBase, NO_MATCHES_FOUND);
   }
 
   get resultReturnedText(): string {
-    return UDExSearchableListBase.i18nBundle.getText(RESULT_RETURNED);
+    return translate(UDExSearchableListBase, RESULT_RETURNED);
   }
 
   get isListEmpty(): boolean {

package/src/SecondaryNavigation.ts

@@ -22,6 +22,7 @@ import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigati
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
@@ -501,7 +502,7 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   get moreButtonText(): string {
-    return UDExSecondaryNavigation.i18nBundle.getText(MORE);
+    return translate(UDExSecondaryNavigation, MORE);
   }
 
   get parsedItems(): Array<NavItem> {

package/src/SecondaryNavigationSubItem.ts

@@ -11,6 +11,7 @@ import { BACK_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import SecondaryNavigationSubItemTemplate from "./generated/templates/SecondaryNavigationSubItemTemplate.lit.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import SecondaryNavigationSubItemCss from "./generated/themes/SecondaryNavigationSubItem.css.js";
@@ -119,7 +120,7 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   }
 
   get backButtonAriaLabel(): string {
-    const label = UDExSecondaryNavigationSubItem.i18nBundle.getText(BACK_BUTTON_LABEL);
+    const label = translate(UDExSecondaryNavigationSubItem, BACK_BUTTON_LABEL);
     return `${label} ${this.itemLabel}`;
   }
 }

package/src/SelectBase.ts

@@ -20,8 +20,9 @@ import UDExValueState from "./types/common.js";
 import type { UDExSearchableListBaseEvents } from "./SearchableListBase.js";
 import { getTokensCountText } from "@ui5/webcomponents/dist/Tokenizer.js";
 import isLetterKey from "./utils/isLetterKeyPressed.js";
+import translate from "./utils/translate.js";
 
-export type UDExSelectBaseEvents = {
+type UDExSelectBaseEvents = {
   "open": void,
   "close": void,
   "before-close": void,
@@ -31,19 +32,11 @@ export type UDExSelectBaseEvents = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- *
- *
- * <h3>Usage</h3>
- *
- * For the <code>udex-select-box</code>
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@sapudex/web-components/dist/UDExSelectBox.js";</code>
+ * A class to serve as a foundation
+ * for the <code>UDExCountrySelector</code> and <code>UDExSelectBox</code> classes.
  *
  * @constructor
  * @extends UDExSearchableListBase
- * @tagname udex-select-box
  * @public
  */
 
@@ -539,7 +532,7 @@ class UDExSelectBase extends UDExSearchableListBase {
 
   get accInfo(): { ariaLabel: string } {
     return {
-      "ariaLabel": getAllAccessibleNameRefTexts(this) || this.accessibleName || this.label || UDExSelectBase.i18nBundle.getText(COUNTRY_SELECT),
+      "ariaLabel": getAllAccessibleNameRefTexts(this) || this.accessibleName || this.label || translate(UDExSelectBase, COUNTRY_SELECT),
     };
   }
 
@@ -578,3 +571,4 @@ class UDExSelectBase extends UDExSearchableListBase {
 }
 
 export default UDExSelectBase;
+export type { UDExSelectBaseEvents };

package/src/SelectBox.ts

@@ -63,7 +63,7 @@ type UDExSelectBoxRemoveEventDetail = {
  * <code>import "@sapudex/web-components/dist/UDExSelectBox.js";</code>
  *
  * @constructor
- * @extends UDExSearchableListBase
+ * @extends UDExSelectBase
  * @tagname udex-select-box
  * @public
  */

package/src/SocialMediaButton.ts

@@ -11,6 +11,7 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { SOCIAL_MEDIA_BUTTON } from "./generated/i18n/i18n-defaults.js";
 import { UDExTarget } from "./types/common.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import SocialMediaButtonCss from "./generated/themes/SocialMediaButton.css.js";
@@ -157,7 +158,7 @@ class UDExSocialMediaButton extends UI5Element {
   }
 
   get buttonAccessibleName(): string {
-    return this.accessibleName || UDExSocialMediaButton.i18nBundle.getText(SOCIAL_MEDIA_BUTTON);
+    return this.accessibleName || translate(UDExSocialMediaButton, SOCIAL_MEDIA_BUTTON);
   }
 
   get imageSlot(): boolean {

package/src/StatusBadge.ts

@@ -19,6 +19,7 @@ import {
   STATUS_BADGE_SUCCESS_TITLE,
   STATUS_BADGE_WARNING_TITLE,
 } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 import StatusBadgeTemplate from "./StatusBadgeTemplate.js";
 
@@ -105,21 +106,21 @@ class UDExStatusBadge extends UI5Element {
   }
 
   get badgeAccessibleName(): string {
-    return `${this.accessibleName ? this.accessibleName : UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_TEXT)}`;
+    return `${this.accessibleName ? this.accessibleName : translate(UDExStatusBadge, STATUS_BADGE_TEXT)}`;
   }
 
   get ariaTitle(): string {
     switch (IconMapping[this.valueState]) {
     case IconMapping.Edit:
-      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_EDIT_TITLE);
+      return translate(UDExStatusBadge, STATUS_BADGE_EDIT_TITLE);
     case IconMapping.Information:
-      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_INFORMATION_TITLE);
+      return translate(UDExStatusBadge, STATUS_BADGE_INFORMATION_TITLE);
     case IconMapping.Success:
-      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_SUCCESS_TITLE);
+      return translate(UDExStatusBadge, STATUS_BADGE_SUCCESS_TITLE);
     case IconMapping.Error:
-      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_ERROR_TITLE);
+      return translate(UDExStatusBadge, STATUS_BADGE_ERROR_TITLE);
     case IconMapping.Warning:
-      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_WARNING_TITLE);
+      return translate(UDExStatusBadge, STATUS_BADGE_WARNING_TITLE);
     }
   }
 }

package/src/StepInput.ts

@@ -15,6 +15,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { STEPINPUT_DEC_ICON_TITLE, STEPINPUT_INC_ICON_TITLE } from "./generated/i18n/i18n-defaults.js";
 import UDExValueState, { valueStateToControlButtonDesign } from "./types/common.js";
 import StepInputTemplate from "./StepInputTemplate.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import StepInputCss from "./generated/themes/StepInput.css.js";
@@ -258,15 +259,21 @@ class UDExStepInput extends UI5Element {
   }
 
   get decIconTitle() {
+    const text = translate(UDExStepInput, STEPINPUT_DEC_ICON_TITLE)?.split(" ");
     return [
-      UDExStepInput.i18nBundle.getText(STEPINPUT_DEC_ICON_TITLE),
+      text[0],
+      this.accessibleName || this.label,
+      text[1] || "",
       this.step.toFixed(this._getNumberPrecision(this.step)),
     ].join(" ");
   }
 
   get incIconTitle() {
+    const text = translate(UDExStepInput, STEPINPUT_INC_ICON_TITLE)?.split(" ");
     return [
-      UDExStepInput.i18nBundle.getText(STEPINPUT_INC_ICON_TITLE),
+      text[0],
+      this.accessibleName || this.label,
+      text[1] || "",
       this.step.toFixed(this._getNumberPrecision(this.step)),
     ].join(" ");
   }

package/src/StepInputTemplate.tsx

@@ -27,8 +27,10 @@ export default function StepInputTemplate(this: UDExStepInput) {
         <UDExControlButton
           class="udex-step-input__button udex-step-input__button_dec"
           title={this.decIconTitle}
-          accessible-name={this.decIconTitle}
+          accessibleName={this.decIconTitle}
+          tooltip={this.decIconTitle}
           icon="less"
+          iconOnly
           size="Large"
           design={this.controlButtonDesign}
           onClick={this._decValue}
@@ -42,8 +44,10 @@ export default function StepInputTemplate(this: UDExStepInput) {
         <UDExControlButton
           class="udex-step-input__button udex-step-input__button_inc"
           title={this.incIconTitle}
-          accessible-name={this.incIconTitle}
+          accessibleName={this.incIconTitle}
+          tooltip={this.incIconTitle}
           icon="add"
+          iconOnly
           size="Large"
           design={this.controlButtonDesign}
           onClick={this._incValue}

package/src/Tab.ts

@@ -16,6 +16,7 @@ import { ATTENTION_BADGE } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import TabInOverflowCss from "./generated/themes/TabInOverflow.css.js";
+import translate from "./utils/translate.js";
 
 export interface ITab extends UI5Element {
   getTabInHeaderDomRef: () => ITab | null;
@@ -257,7 +258,7 @@ class UDExTab extends UI5Element implements ITab {
   }
 
   get accessibleNameText(): string {
-    return this.accessibleName || (this.showAttentionBadge ? `, ${UDExTab.i18nBundle.getText(ATTENTION_BADGE)}` : "");
+    return this.accessibleName || (this.showAttentionBadge ? `, ${translate(UDExTab, ATTENTION_BADGE)}` : "");
   }
 
   get linkTabIndex(): string {

package/src/TabNavigation.ts

@@ -27,6 +27,7 @@ import TabNavigationPopoverTemplate from "./generated/templates/TabNavigationPop
 // Styles
 import TabNavigationCss from "./generated/themes/TabNavigation.css.js";
 import TabInOverflowCss from "./generated/themes/TabInOverflow.css.js";
+import translate from "./utils/translate.js";
 
 const staticAreaTabStyles: Array<StyleData> = [];
 
@@ -825,7 +826,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   get moreButtonText(): string {
-    return UDExTabNavigation.i18nBundle.getText(MORE);
+    return translate(UDExTabNavigation, MORE);
   }
 
   static registerStaticAreaTabStyles(styles: StyleData) {

package/src/Table.ts

@@ -1,25 +1,24 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import {
   isUp, isDown, isLeft, isRight,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import UDExTableHeaderRow from "./TableHeaderRow.js";
-import UDExTableRow from "./TableRow.js";
-import UDExTableCell from "./TableCell.js";
+import type UDExTableHeaderRow from "./TableHeaderRow.js";
+import type UDExTableRow from "./TableRow.js";
 import UDExTableGroupRow from "./TableGroupRow.js";
-import UDExBusyIndicator from "./BusyIndicator.js";
 import type UDExTableHeaderCell from "./TableHeaderCell.js";
 import { TABLE_NO_DATA_FOUND } from "./generated/i18n/i18n-defaults.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import TableTemplate from "./generated/templates/TableTemplate.lit.js";
+import TableTemplate from "./TableTemplate.js";
 
 // Styles
 import TableCss from "./generated/themes/Table.css.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
+import translate from "./utils/translate.js";
 
 export type TableBaseRow = UDExTableHeaderRow | UDExTableRow;
 
@@ -47,16 +46,9 @@ export type KeyBoardItem = {
  */
 @customElement({
   tag: "udex-table",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [TableCss, getEffectiveScrollbarStyle()],
   template: TableTemplate,
-  dependencies: [
-    UDExBusyIndicator,
-    UDExTableHeaderRow,
-    UDExTableRow,
-    UDExTableCell,
-    UDExTableGroupRow,
-  ],
 })
 
 class UDExTable extends UI5Element {
@@ -355,7 +347,7 @@ class UDExTable extends UI5Element {
   }
 
   get _effectiveNoDataText() {
-    return this.noDataText || UDExTable.i18nBundle.getText(TABLE_NO_DATA_FOUND);
+    return this.noDataText || translate(UDExTable, TABLE_NO_DATA_FOUND);
   }
 
   get _hasToolbar(): boolean {

package/src/TableCell.ts

@@ -1,8 +1,8 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import UDExTableCellBase from "./TableCellBase.js";
-import TableCellTemplate from "./generated/templates/TableCellTemplate.lit.js";
+import TableCellTemplate from "./TableCellTemplate.js";
 
 // Styles
 import TableCellCss from "./generated/themes/TableCell.css.js";
@@ -26,7 +26,7 @@ import TableCellCss from "./generated/themes/TableCell.css.js";
  */
 @customElement({
   tag: "udex-table-cell",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [UDExTableCellBase.styles, TableCellCss],
   template: TableCellTemplate,
   dependencies: [],

package/src/TableCellBase.ts

@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import type UDExTableCellHorizontalAlign from "./types/Table.js";
 
@@ -20,7 +19,6 @@ import TableCellBaseCss from "./generated/themes/TableCellBase.css.js";
 @customElement({
   renderer: litRender,
   styles: TableCellBaseCss,
-  dependencies: [Icon],
 })
 
 abstract class UDExTableCellBase extends UI5Element {
@@ -59,7 +57,7 @@ abstract class UDExTableCellBase extends UI5Element {
 
   _individualSlot?: string;
 
-  protected ariaRole: string = "gridcell";
+  protected ariaRole: string = "cell";
 
   onBeforeRendering() {
     this.setAttribute("role", this.ariaRole);

package/src/TableCellTemplate.tsx

@@ -0,0 +1,21 @@
+import type UDExTableCell from "./TableCell.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+
+export default function TableCellTemplate(this: UDExTableCell) {
+  return (
+    <>
+      {
+        this.icon ? (
+          renderTableCellIcon.call(this)
+        ) : ""
+      }
+      <slot></slot>
+    </>
+  );
+}
+
+function renderTableCellIcon(this: UDExTableCell) {
+  return (
+    <UI5Icon class="udex-table-cell__icon" name={this.icon}></UI5Icon>
+  );
+}

package/src/TableGroupRow.ts

@@ -2,12 +2,11 @@ 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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
-import UDExTableRow from "./TableRow.js";
+import type UDExTableRow from "./TableRow.js";
 
-import TableGroupRowTemplate from "./generated/templates/TableGroupRowTemplate.lit.js";
+import TableGroupRowTemplate from "./TableGroupRowTemplate.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 
 // Styles
@@ -32,10 +31,9 @@ import TableGroupRowCss from "./generated/themes/TableGroupRow.css.js";
  */
 @customElement({
   tag: "udex-table-group-row",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: TableGroupRowCss,
   template: TableGroupRowTemplate,
-  dependencies: [UDExTableRow, UI5Icon],
 })
 
 class UDExTableGroupRow extends UI5Element {

package/src/TableGroupRowTemplate.tsx

@@ -0,0 +1,36 @@
+import type UDExTableGroupRow from "./TableGroupRow.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+export default function TableCellTemplate(this: UDExTableGroupRow) {
+  return (
+    <>
+      {
+        this.collapsible ? (
+          <button
+            id="udex-table-group-opener"
+            class="udex-table-grow-btn"
+            aria-expanded={this.expanded}
+            onClick={this.toggleExpanded}
+          >
+            <span class="udex-table-grow">
+              <UI5Icon
+                class="udex-table-grow__icon"
+                name={slimArrowRight}
+              ></UI5Icon>
+              {this.groupTitle}
+            </span>
+          </button>
+        ) : (
+          <div class="udex-table-grow-btn">
+            <span class="udex-table-grow">{this.groupTitle}</span>
+          </div>
+        )
+      }
+
+      <div class="udex-table-grow-rows" onKeyDown={this.handleEscapeKey}>
+        <slot></slot>
+      </div>
+    </>
+  );
+}

package/src/TableHeaderCell.ts

@@ -1,7 +1,7 @@
 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 TableHeaderCellTemplate from "./generated/templates/TableHeaderCellTemplate.lit.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
+import TableHeaderCellTemplate from "./TableHeaderCellTemplate.js";
 import UDExTableCellBase from "./TableCellBase.js";
 
 // Styles
@@ -26,10 +26,9 @@ import TableHeaderCellCss from "./generated/themes/TableHeaderCell.css.js";
  */
 @customElement({
   tag: "udex-table-header-cell",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [UDExTableCellBase.styles, TableHeaderCellCss],
   template: TableHeaderCellTemplate,
-  dependencies: [...UDExTableCellBase.dependencies],
 })
 
 class UDExTableHeaderCell extends UDExTableCellBase {

package/src/TableHeaderCellTemplate.tsx

@@ -0,0 +1,36 @@
+import type UDExTableHeaderCell from "./TableHeaderCell.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+
+export default function TableCellTemplate(this: UDExTableHeaderCell) {
+  return (
+    <>
+      {
+        this._hasIcons ? (
+          <div class="udex-table-header-cell-wrap">
+            {
+              this.iconStart ? (
+                <UI5Icon
+                  class="udex-table-header-cell-wrap__icon"
+                  name={this.iconStart}
+                ></UI5Icon>
+              ) : ""
+            }
+
+            <slot></slot>
+
+            {
+              this.iconEnd ? (
+                <UI5Icon
+                  class="udex-table-header-cell-wrap__icon"
+                  name={this.iconEnd}
+                ></UI5Icon>
+              ) : ""
+            }
+          </div>
+        ) : (
+          <slot></slot>
+        )
+      }
+    </>
+  );
+}