@sapudex/web-components 0.225.0 → 2.0.0

package/src/Switch.ts

@@ -3,7 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import "@ui5/webcomponents/dist/Switch.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 
 import Icon from "@ui5/webcomponents/dist/Icon.js";
@@ -17,7 +17,7 @@ import SwitchTemplate from "./generated/templates/SwitchTemplate.lit.js";
 // Styles
 import SwitchCss from "./generated/themes/Switch.css.js";
 
-export enum SwitchColor {
+export enum UDExSwitchColor {
   NonSemantic = "Non-Semantic",
   Semantic = "Semantic",
 }
@@ -56,16 +56,19 @@ export enum SwitchColor {
  * @allowPreventDefault
  * @public
  */
-@event("change")
+@event("change", { cancelable: true, bubbles: true })
 class UDExSwitch extends UI5Element {
+  eventDetails!: {
+    "change": void
+  };
   /**
    * Defines the label near switch.
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    label!: string;
+  @property({ type: String })
+    label?: string;
 
   /**
    * Defines the color of the component.
@@ -73,8 +76,8 @@ class UDExSwitch extends UI5Element {
    * @default "Non-Semantic"
    * @public
    */
-  @property({ type: SwitchColor, defaultValue: SwitchColor.NonSemantic })
-    color!: `${SwitchColor}`;
+  @property()
+    color: `${UDExSwitchColor}` = UDExSwitchColor.NonSemantic;
 
   /**
    * Sets the accessible ARIA name of the component.
@@ -82,25 +85,24 @@ class UDExSwitch extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    accessibleName!: string;
+  @property({ type: String })
+    accessibleName: string = "";
 
   /**
    * Receives id (or many ids) of the elements that label the component.
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ defaultValue: "" })
-    accessibleNameRef!: string;
+  @property()
+    accessibleNameRef?: string;
 
   /**
    * Defines if the component is checked.
    *
-   * @default false
    * @public
    */
   @property({ type: Boolean })
-    checked!: boolean;
+    checked: boolean = false;
 
   /**
    * Defines whether the component is disabled.
@@ -117,8 +119,8 @@ class UDExSwitch extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    tooltip!: string;
+  @property({ type: String })
+    tooltip: string = "";
 
   onEnterDOM(): void {
     if (isDesktop()) {
@@ -129,13 +131,7 @@ class UDExSwitch extends UI5Element {
   handleSwitchClick(): void {
     if (!this.disabled) {
       this.checked = !this.checked;
-      this.fireEvent("change", null, true);
-    }
-  }
-
-  handleSwitchKeyDown(e: KeyboardEvent): void {
-    if (e.key === "Enter") {
-      this.handleSwitchClick();
+      this.fireDecoratorEvent("change");
     }
   }
 
@@ -150,7 +146,7 @@ class UDExSwitch extends UI5Element {
   }
 
   get isSemanticColor(): boolean {
-    return this.color === SwitchColor.Semantic;
+    return this.color === UDExSwitchColor.Semantic;
   }
 
   get ariaLabeledBy(): string {

package/src/Tab.ts

@@ -4,13 +4,14 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
-import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import TabNavigation from "./TabNavigation.js";
 import UDExBadge from "./Badge.js";
-import { Target } from "./types/common.js";
+import { UDExTarget } from "./types/common.js";
 import TabTemplate from "./generated/templates/TabTemplate.lit.js";
 import TabHeaderTemplate from "./generated/templates/TabHeaderTemplate.lit.js";
 import TabInOverflowTemplate from "./generated/templates/TabInOverflowTemplate.lit.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { ATTENTION_BADGE } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -136,8 +137,8 @@ class UDExTab extends UI5Element implements ITab {
    *
    * @public
    */
-  @property({ type: Target, defaultValue: Target._self })
-    target!: `${Target}`;
+  @property()
+    target: `${UDExTarget}` = UDExTarget._self;
 
   /**
    * Defines the tab.
@@ -183,6 +184,9 @@ class UDExTab extends UI5Element implements ITab {
   @slot({ type: Node, "default": true })
     content!: Array<Node>;
 
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
   getElementInHeader?: () => ITab | null;
   _individualSlot!: string;
 
@@ -194,12 +198,6 @@ class UDExTab extends UI5Element implements ITab {
     return null;
   }
 
-  static i18nBundle: I18nBundle;
-
-  static async onDefine(): Promise<void> {
-    UDExTab.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   get isOnSelectedTab(): boolean {
     return this._realTab === this;
   }

package/src/TabHeader.hbs

@@ -52,7 +52,7 @@
                 class="udex-tab-navigation__badge"
                 type="Number"
                 number-design="Blue"
-                size="Large">
+                size="Medium">
                 {{numberBadge}}
             </udex-badge>
         {{/if}}

package/src/TabNavigation.hbs

@@ -28,9 +28,12 @@
             <ui5-icon
                 class="udex-tab-navigation__button-more-icon"
                 name="navigation-down-arrow"
-            ></ui5-icon>
+                mode="Decorative">
+            </ui5-icon>
         </button>
-        {{tabNavigationPopover}}
+        {{#if this._overflowItems.length}}
+            {{tabNavigationPopover}}
+        {{/if}}
     </div>
     <div
         class="udex-tab-navigation__content"

package/src/TabNavigation.ts

@@ -3,13 +3,11 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import type { StyleData } from "@ui5/webcomponents-base/dist/types.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   isUp,
@@ -24,9 +22,12 @@ import {
   isTabNext,
   isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import type { ITab } from "./Tab.js";
+import type Tab from "./Tab.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import Tab, { ITab } from "./Tab.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
 
 // Templates
@@ -39,7 +40,7 @@ import TabInOverflowCss from "./generated/themes/TabInOverflow.css.js";
 
 const staticAreaTabStyles: Array<StyleData> = [];
 
-export enum SizeMoreButton {
+export enum UDExSizeMoreButton {
   Small = "Small",
   Medium = "Medium",
 }
@@ -49,6 +50,10 @@ export enum Mode {
   Dark = "Dark",
 }
 
+type UDExTabNavigationClickDetail = {
+  currentPage: number,
+}
+
 /**
  * @class
  *
@@ -78,25 +83,22 @@ export enum Mode {
 /**
  * Fires when the tab was clicked.
  *
- * @allowPreventDefault
- * @param { Number }
  * @public
  */
-@event("click", {
-  detail: {
-    currentPage: { type: Number },
-  },
-})
+@event("click", { bubbles: true })
 
 class UDExTabNavigation extends UI5Element {
+  eventDetails!: {
+    "click": UDExTabNavigationClickDetail,
+  };
   /**
    * Defines the size of the "More" button.
    *
    * @public
    * @default "Small"
   */
-  @property({ type: SizeMoreButton, defaultValue: "Small" })
-    sizeMoreButton!: `${SizeMoreButton}`;
+  @property()
+    UDExsizeMoreButton: `${UDExSizeMoreButton}` = "Small";
 
   /**
    * Defines the mode of the component.
@@ -104,8 +106,8 @@ class UDExTabNavigation extends UI5Element {
    * @public
    * @default "Light"
    */
-  @property({ type: Mode, defaultValue: "Light" })
-    mode!: Mode;
+  @property()
+    mode: `${Mode}` = Mode.Light;
 
   /**
    * Defines the background color of the component.
@@ -116,8 +118,8 @@ class UDExTabNavigation extends UI5Element {
   @property({ type: Boolean })
     iconWithoutBackground!: boolean;
 
-  @property({ type: String, defaultValue: "auto" })
-    tabWidth!: string;
+  @property({ type: String })
+    tabWidth: string = "auto";
 
   /**
    * Defines selected tab.
@@ -132,7 +134,7 @@ class UDExTabNavigation extends UI5Element {
    *
    * @private
    */
-  @property({ validator: Integer, noAttribute: true })
+  @property({ type: Number, noAttribute: true })
     _width?: number;
 
   /**
@@ -140,7 +142,7 @@ class UDExTabNavigation extends UI5Element {
    *
    * @private
    */
-  @property({ type: Object, multiple: true })
+  @property({ type: Object })
     _overflowItems!: Array<ITab>;
 
   /**
@@ -157,7 +159,9 @@ class UDExTabNavigation extends UI5Element {
   })
     items!: Array<ITab>;
 
-  static i18nBundle: any;
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
   _handleResizeBound: () => void;
   _popover?: Popover;
   _visibleTabs?: Array<ITab | HTMLElement>;
@@ -170,8 +174,15 @@ class UDExTabNavigation extends UI5Element {
     this._handleResizeBound = this._handleResize.bind(this);
   }
 
-  static async onDefine(): Promise<void> {
-    UDExTabNavigation.i18nBundle = await getI18nBundle("@sapudex/web-components");
+  onAfterRendering(): void {
+    if (this.items.length) {
+      this.setItemsInHeader();
+      this.setVisibleTabs();
+      this.applyTabIndex();
+    } else {
+      console.warn("You have to add the 'udex-tab' as a default slot to the udex-tab-navigation.");
+    }
+    this.initOutsideClick();
   }
 
   onEnterDOM(): void {
@@ -191,7 +202,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   emitClickEvent(pageIndex: number) {
-    this.fireEvent("click", { currentPage: pageIndex });
+    this.fireDecoratorEvent("click", { currentPage: pageIndex });
   }
 
   onBeforeRendering(): void {
@@ -248,7 +259,7 @@ class UDExTabNavigation extends UI5Element {
     return "-1";
   }
 
-  getAllCustomTags(tab: ITab, prefix: string) {
+  getAllCustomTags(tab: ITab, prefix: string): Element[] {
     const allElements = tab.querySelectorAll("*");
     return Array.from(allElements).filter(element => element.tagName.toLowerCase().startsWith(prefix.toLowerCase()));
   }
@@ -259,19 +270,8 @@ class UDExTabNavigation extends UI5Element {
     });
   }
 
-  onAfterRendering(): void {
-    if (this.items.length) {
-      this.setItemsInHeader();
-      this.setVisibleTabs();
-      this.applyTabIndex();
-    } else {
-      console.warn("You have to add the 'udex-tab' as a default slot to the udex-tab-navigation.");
-    }
-    this.initOutsideClick();
-  }
-
   initOutsideClick() {
-    if (this._popover?.opened) {
+    if (this._popover?.open) {
       this.handleOutsideClick();
     }
   }
@@ -346,7 +346,7 @@ class UDExTabNavigation extends UI5Element {
     this.hideLastVisibleTab(itemsDomRefs);
   }
 
-  getTabHeader() {
+  getTabHeader(): HTMLElement {
     return this.shadowRoot!.querySelector<HTMLElement>(`#${this.__id!}-header-tabs`)!;
   }
 
@@ -356,7 +356,7 @@ class UDExTabNavigation extends UI5Element {
     }
   }
 
-  getTotalItemsWidth(itemsDomRefs: Array<ITab>) {
+  getTotalItemsWidth(itemsDomRefs: Array<ITab>): number {
     let totalItemsWidth = 0;
     itemsDomRefs.forEach(item => {
       totalItemsWidth += this.getTabWidth(item);
@@ -376,12 +376,12 @@ class UDExTabNavigation extends UI5Element {
     return this.convertToPx(this.tabWidth, this.getButtonFontSize(itemDomRef)) + marginInlineEnd;
   }
 
-  getButtonFontSize(itemDomRef: HTMLElement) {
+  getButtonFontSize(itemDomRef: HTMLElement): number {
     const style = window.getComputedStyle(itemDomRef);
     return parseFloat(style.fontSize);
   }
 
-  convertToPx(value: string, baseFontSize: number) {
+  convertToPx(value: string, baseFontSize: number): number {
     const unit = value.match(/[a-zA-Z]+/)?.[0];
     const numericValue = parseFloat(value);
 
@@ -392,7 +392,7 @@ class UDExTabNavigation extends UI5Element {
     return numericValue * baseFontSize;
   }
 
-  getItemWidth(itemDomRef: HTMLElement) {
+  getItemWidth(itemDomRef: HTMLElement): number {
     const tabTitle = itemDomRef.innerText;
     const context = this.getItemContext();
     const { indentation, marginInlineEnd } = this.getItemIndentation(itemDomRef);
@@ -421,14 +421,14 @@ class UDExTabNavigation extends UI5Element {
     itemDomRef.style.maxWidth = `${maxWidth - marginInlineEnd}px`;
   }
 
-  private getItemContext() {
+  private getItemContext(): CanvasRenderingContext2D {
     const canvas = document.createElement("canvas");
     const context = canvas.getContext("2d")!;
     context.font = "700 16px '72 Brand Variable'";
     return context;
   }
 
-  private getItemIndentation(itemDomRef: HTMLElement) {
+  private getItemIndentation(itemDomRef: HTMLElement): { indentation: number, marginInlineEnd: number } {
     const styles = window.getComputedStyle(itemDomRef);
     const paddingInlineStart = Number.parseInt(styles.paddingInlineStart);
     const paddingInlineEnd = Number.parseInt(styles.paddingInlineEnd);
@@ -437,17 +437,17 @@ class UDExTabNavigation extends UI5Element {
     return { indentation, marginInlineEnd };
   }
 
-  private getMaxWidthItemTitle(tabTitle: string, context: CanvasRenderingContext2D, indentation: number) {
+  private getMaxWidthItemTitle(tabTitle: string, context: CanvasRenderingContext2D, indentation: number): number {
     const slicedFirstLineText = tabTitle.slice(0, this._maxTitleLength);
     return this.getItemTitleWidth(slicedFirstLineText, context, tabTitle, indentation);
   }
 
-  private getOverloadMaxWidthItemTitle(tabTitle: string, context: CanvasRenderingContext2D, indentation: number) {
+  private getOverloadMaxWidthItemTitle(tabTitle: string, context: CanvasRenderingContext2D, indentation: number): number {
     const slicedFirstLineText = tabTitle.slice(0, Math.ceil(tabTitle.length / 2));
     return this.getItemTitleWidth(slicedFirstLineText, context, tabTitle, indentation);
   }
 
-  private getItemTitleWidth(slicedFirstLineText: string, context: CanvasRenderingContext2D, tabTitle: string, indentation: number) {
+  private getItemTitleWidth(slicedFirstLineText: string, context: CanvasRenderingContext2D, tabTitle: string, indentation: number): number {
     const findLastSpaceIndex = slicedFirstLineText.lastIndexOf(" ");
     const firstLineText = slicedFirstLineText.slice(0, findLastSpaceIndex);
     const firstLineWidth = Math.ceil(context.measureText(firstLineText).width);
@@ -467,7 +467,7 @@ class UDExTabNavigation extends UI5Element {
     this.hideInappropriateTabs(lastVisibleTabIndex, itemsDomRefs);
   }
 
-  getRootTab(tab: Tab) {
+  getRootTab(tab: Tab): Tab {
     while (tab.hasAttribute("udex-tab")) {
       if (tab.parentElement!.hasAttribute("udex-tab-navigation")) {
         break;
@@ -479,7 +479,7 @@ class UDExTabNavigation extends UI5Element {
     return tab;
   }
 
-  getSelectedItemWidth(itemsDomRefs: Array<ITab>, selectedTabDomRef: ITab) {
+  getSelectedItemWidth(itemsDomRefs: Array<ITab>, selectedTabDomRef: ITab): number {
     const index = itemsDomRefs.indexOf(selectedTabDomRef);
     const width = this.getTabWidth(selectedTabDomRef);
 
@@ -488,7 +488,7 @@ class UDExTabNavigation extends UI5Element {
     return width;
   }
 
-  findLastVisibleItem(itemsDomRefs: Array<ITab>, containerWidth: number, selectedItemWidth: number, startIndex = 0) {
+  findLastVisibleItem(itemsDomRefs: Array<ITab>, containerWidth: number, selectedItemWidth: number, startIndex = 0): number {
     let lastVisibleIndex = startIndex - 1;
     let index = startIndex;
 
@@ -562,11 +562,11 @@ class UDExTabNavigation extends UI5Element {
     this.emitClickEvent(selectedTabIndex + 1);
   }
 
-  getMoreButton() {
+  getMoreButton(): HTMLElement {
     return this.shadowRoot!.querySelector<HTMLElement>(".udex-tab-navigation__button-more")!;
   }
 
-  getHeader() {
+  getHeader(): HTMLElement {
     return this.shadowRoot!.querySelector<HTMLElement>(`#${this.__id!}-header`)!;
   }
 
@@ -585,7 +585,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   handleTogglePopover() {
-    if (this._popover?.opened) {
+    if (this._popover?.open) {
       this.handleClosePopover();
     } else {
       this.handleOpenPopover();
@@ -593,16 +593,17 @@ class UDExTabNavigation extends UI5Element {
   }
 
   handleClosePopover() {
-    if (this._popover?.opened) {
-      this._popover.close();
+    if (this._popover?.open) {
+      this._popover.open = false;
       this.getMoreButton().classList.remove("udex-tab-navigation__button-more--toggled");
       this._isExpanded = false;
     }
   }
 
   handleOpenPopover() {
-    if (!this._popover?.opened) {
-      this._popover!.showAt(this.getMoreButton());
+    if (!this._popover?.open) {
+      this._popover!.opener = this.getMoreButton();
+      this._popover!.open = true;
       this.getMoreButton().classList.add("udex-tab-navigation__button-more--toggled");
       this._isExpanded = true;
     }
@@ -632,7 +633,7 @@ class UDExTabNavigation extends UI5Element {
     this._visibleTabs![nextSelectIndex].focus();
   }
 
-  getTabIndexById(id: string) {
+  getTabIndexById(id: string): number {
     return this._visibleTabs!.findIndex(tab => tab.id === id);
   }
 
@@ -707,7 +708,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   onFocusFirstItemPopover() {
-    if (this._popover?.opened) {
+    if (this._popover?.open) {
       const popoverItems = this.getItemsFromPopover();
       const firstPopoverItem = popoverItems[0];
       firstPopoverItem.setAttribute("tabindex", "0");
@@ -770,7 +771,7 @@ class UDExTabNavigation extends UI5Element {
     return Array.from(contentFromPopover.children) as Array<HTMLElement>;
   }
 
-  getPopoverTabIndexById(popoverItems: Array<HTMLElement>, id: string) {
+  getPopoverTabIndexById(popoverItems: Array<HTMLElement>, id: string): number {
     return popoverItems.findIndex(tab => tab.id === id);
   }
 
@@ -818,7 +819,7 @@ class UDExTabNavigation extends UI5Element {
   }
 
   get moreButtonText(): string {
-    return UDExTabNavigation.i18nBundle.getText(MORE) as string;
+    return UDExTabNavigation.i18nBundle.getText(MORE);
   }
 
   static registerStaticAreaTabStyles(styles: StyleData) {

package/src/TabNavigationPopover.hbs

@@ -1,18 +1,16 @@
 <ui5-popover
     id="{{_id}}-overflow-popover"
-    horizontal-align="Right"
-	placement-type="Bottom"
+    horizontal-align="End"
+    placement="Bottom"
     aria-orientation="vertical"
-    @ui5-after-open="{{onFocusFirstItemPopover}}"
+    @ui5-open="{{onFocusFirstItemPopover}}"
     hide-arrow
-    _hideHeader
->
+    _hideHeader>
     <div
         class="tab-navigation-popover"
         @click="{{handleOverflowItemClick}}"
         @keydown="{{handleFocusPopover}}"
-        role="tablist"
-    >
+        role="tablist">
         {{#each _overflowItems}}
             {{tabInOverflow}}
         {{/each}}

package/src/Table.ts

@@ -1,12 +1,9 @@
 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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import {
   isUp, isDown, isLeft, isRight,
@@ -15,8 +12,10 @@ import UDExTableHeaderRow from "./TableHeaderRow.js";
 import UDExTableRow from "./TableRow.js";
 import UDExTableCell from "./TableCell.js";
 import UDExTableGroupRow from "./TableGroupRow.js";
-import UDExTableHeaderCell from "./TableHeaderCell.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";
 
 // Styles
@@ -107,8 +106,8 @@ class UDExTable extends UI5Element {
    * @default 1000
    * @public
    */
-  @property({ defaultValue: 1000, type: Integer })
-    loadingDelay!: string;
+  @property({ type: Number })
+    loadingDelay: number = 1000;
 
   /**
    * Sticks the toolbar and header row to the top of the table.
@@ -179,12 +178,9 @@ class UDExTable extends UI5Element {
   @property({ type: Boolean })
     _verticalOffset?: boolean;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  static async onDefine() {
-    UDExTable.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   onAfterRendering() {
     if (this.stickyColumn) {
       this._setStickyAttrToCells();
@@ -363,7 +359,7 @@ class UDExTable extends UI5Element {
   }
 
   get _hasToolbar(): boolean {
-    return this.heading.length > 0 || this.actions.length > 0;
+    return this.heading?.length > 0 || this.actions?.length > 0;
   }
 
   get _tableMaxHeight(): string {

package/src/TableCell.ts

@@ -36,11 +36,11 @@ class UDExTableCell extends UDExTableCellBase {
   /**
    * Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    icon!: string;
+  @property({ type: String })
+    icon?: string;
 
   /**
    * Defines highlighted of the table cell.

package/src/TableCellBase.ts

@@ -3,9 +3,8 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 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 "@ui5/webcomponents-icons/dist/AllIcons.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import TableCellHorizontalAlign from "./types/Table.js";
+import type TableCellHorizontalAlign from "./types/Table.js";
 
 // Styles
 import TableCellBaseCss from "./generated/themes/TableCellBase.css.js";