@sapudex/web-components 0.225.0 → 2.0.0

package/{package-scripts.js → package-scripts.cjs}

@@ -9,7 +9,7 @@ const scripts = getScripts(options);
 
 // Change baseline Vite dev server config to not open app in browser since we use Storybook
 const customWatchBundle = scripts.watch.bundle.split(' ');
-customWatchBundle[1] = './config/dev-server.js';
+customWatchBundle[1] = './config/dev-server.mjs';
 scripts.watch.bundle = customWatchBundle.join(' ');
 
 module.exports = {

package/package.json

@@ -1,6 +1,7 @@
 {
+  "type": "module",
   "name": "@sapudex/web-components",
-  "version": "0.225.0",
+  "version": "2.0.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -17,6 +18,8 @@
     "start:devserver": "wc-dev start",
     "build": "wc-dev build",
     "test": "wc-dev test",
+    "test:cypress": "node run-cypress.js",
+    "test:cypress-open": "cypress open --component --browser chrome",
     "create-ui5-element": "wc-create-ui5-element",
     "prepack": "npm run build"
   },
@@ -30,19 +33,22 @@
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.0",
-    "@ui5/webcomponents": "1.24.23",
-    "@ui5/webcomponents-base": "1.24.23",
-    "@ui5/webcomponents-fiori": "1.24.23",
-    "@ui5/webcomponents-icons": "1.24.23",
-    "@ui5/webcomponents-theming": "1.24.23",
+    "@ui5/webcomponents": "2.10.0",
+    "@ui5/webcomponents-base": "2.10.0",
+    "@ui5/webcomponents-fiori": "2.10.0",
+    "@ui5/webcomponents-icons": "2.10.0",
+    "@ui5/webcomponents-theming": "2.10.0",
     "@vimeo/player": "^2.24.0",
+    "cypress-real-events": "^1.14.0",
     "video.js": "8.22.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.24.23",
+    "@ui5/cypress-ct-ui5-webc": "^0.0.4",
+    "@ui5/webcomponents-tools": "2.10.0",
     "chromedriver": "138.0.1",
     "cross-env": "^7.0.3",
-    "typescript": "^4.9.4",
+    "cypress": "^14.3.3",
+    "typescript": "^5.6.2",
     "wdio-chromedriver-service": "^8.1.1",
     "webdriverio": "^8.16.12"
   },

package/run-cypress.js

@@ -0,0 +1,12 @@
+import { execSync } from "child_process";
+import path from "path";
+
+const inputSpec = process.argv[2];
+
+const specArg = inputSpec
+  ? `--spec ${path.resolve("cypress/specs", inputSpec)}`
+  : "";
+
+const command = `npx cypress run --component --browser chrome ${specArg}`;
+
+execSync(command, { stdio: "inherit" });

package/src/Accordion.ts

@@ -2,8 +2,8 @@ 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 event from "@ui5/webcomponents-base/dist/decorators/event.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import "@ui5/webcomponents-icons/dist/feeder-arrow.js";
@@ -14,11 +14,14 @@ import {
 import AccordionTemplate from "./generated/templates/AccordionTemplate.lit.js";
 import { COLLAPSE_ALL, EXPAND_ALL } from "./generated/i18n/i18n-defaults.js";
 import UDExButton from "./Button.js";
-import UDExAccordionItem from "./AccordionItem.js";
 
 // Styles
 import AccordionCss from "./generated/themes/Accordion.css.js";
+import type UDExAccordionItem from "./AccordionItem.js";
 
+type UDExAccordionToggleItemsEventDetail = {
+  isOpen: boolean
+}
 /**
  * @class
  *
@@ -47,19 +50,15 @@ import AccordionCss from "./generated/themes/Accordion.css.js";
 })
 
 /**
- * Triggered when the user click on on Expand/Collapse All button.
+ * Triggered when the user clicks on the Expand/Collapse All button..
  *
- * @event sap.ui.webc.web-components.UDExAccordion#toggleItems
  * @public
  */
-@event("toggle-items", {
-  detail:
-    {
-      isOpen:
-        { type: Boolean },
-    },
-})
+@event("toggle-items", { bubbles: true })
 class UDExAccordion extends UI5Element {
+  eventDetails!: {
+    "toggle-items": UDExAccordionToggleItemsEventDetail,
+  };
   /**
    * Used internally to store expand/collapse button state.
    *
@@ -90,20 +89,17 @@ class UDExAccordion extends UI5Element {
    */
   @slot({ type: HTMLElement, "default": true, individualSlots: true }) _items!: Array<UDExAccordionItem>;
 
-  _activeItemIndex: number;
-
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
+  _activeItemIndex: number;
+
   constructor() {
     super();
     this._allExpanded = false;
     this._activeItemIndex = -1;
   }
 
-  static async onDefine() {
-    UDExAccordion.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   get toggleAllText(): string {
     return this._allExpanded
       ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)
@@ -130,7 +126,7 @@ class UDExAccordion extends UI5Element {
     e.preventDefault();
     this._allExpanded = !this._allExpanded;
     this.toggleOpenItems(this._allExpanded);
-    this.fireEvent("toggle-items", { isOpen: this._allExpanded });
+    this.fireDecoratorEvent("toggle-items", { isOpen: this._allExpanded });
   }
 
   toggleOpenItems(isOpen: boolean) {

package/src/AccordionItem.hbs

@@ -10,17 +10,18 @@
     <div class="udex-accordion-item__icon-wrapper">
         <ui5-icon
             class="udex-accordion-item__icon"
-            name="slim-arrow-right">
+            name="slim-arrow-right"
+            mode="Decorative">
         </ui5-icon>
     </div>
     <span class="udex-accordion-item__title">
-        {{title}}
+        {{label}}
         {{#if numberBadge}}
             <udex-badge
                 class="udex-accordion-item__badge"
                 number-design="Blue"
                 type="Number"
-                size="Large">
+                size="Medium">
                 {{numberBadge}}
             </udex-badge>
         {{/if}}

package/src/AccordionItem.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 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 { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import "@ui5/webcomponents-icons/dist/AllIcons.js";
-import "@ui5/webcomponents-icons/dist/feeder-arrow.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import UDExBadge from "./Badge.js";
 
@@ -47,11 +46,14 @@ import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
  * Triggered when the user focuses on an accordion item.
  * @public
  */
-@event("accordion-item-focus")
+@event("accordion-item-focus", { bubbles: true })
 
 class UDExAccordionItem extends UI5Element {
+  eventDetails!: {
+    "accordion-item-focus": void,
+  };
   /**
-   * Defines the Badge at the end of the title item.
+   * Defines the Badge at the end of the label item.
    *
    * @default ""
    * @public
@@ -59,14 +61,12 @@ class UDExAccordionItem extends UI5Element {
   @property() numberBadge!: string;
 
   /**
-   * Defines the title of the accordion item component.
-   * TODO: With transition to UI5 2.x, change "title" attribute name.
-   * Title property is also valid HTML attribute that results in showing hover tooltip and is read by screen readers.
+   * Defines the label of the accordion item component.
    *
    * @default ""
    * @public
    */
-  @property() title!: string;
+  @property() label!: string;
 
   /**
    * Defines if the accordion item is expanded by default
@@ -136,7 +136,7 @@ class UDExAccordionItem extends UI5Element {
   }
 
   focusHandler() {
-    this.fireEvent("accordion-item-focus");
+    this.fireDecoratorEvent("accordion-item-focus");
   }
 
   keydownHandler(e: KeyboardEvent) {

package/src/Assets.ts

@@ -5,11 +5,8 @@ import "./generated/json-imports/Themes.js";
 import "./generated/json-imports/i18n.js";
 
 import { registerCustomThemePropertiesLoader } from "@ui5/webcomponents-base/dist/AssetRegistry.js";
+import variablesOverwrite from "./AssetsVariables.js";
 
-const customThemeLoader = async () => {
-  return (
-    await import("./generated/assets/themes/overrides/@ui5/webcomponents/sap_glow/parameters-bundle.css.json")
-  ).default;
-};
+const customThemeLoader = () => Promise.resolve(variablesOverwrite);
 
 registerCustomThemePropertiesLoader("@ui5/webcomponents", "sap_glow", customThemeLoader);

package/src/AssetsVariables.ts

@@ -0,0 +1,52 @@
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+
+const variablesOverwrite = `:root {
+  /* Browser Scrollbar */
+  ${getScopedVarName("browser_scrollbar_border_radius")}: var(--udexRadiusM, 8px);
+
+  /* Tooltip */
+  ${getScopedVarName("--_ui5_popover_box_shadow")}: 0px 0px 0px 1px var(--udexColorGrey4);
+
+  /* Tokenizer */
+  ${getScopedVarName("--_ui5_tokenizer_padding")}: var(--udexSpacer12, 12px);
+
+  /* Carousel */
+  ${getScopedVarName("--ui5_carousel_active_dot_background")}: var(--udexColorBlue8, #0057D2);
+  ${getScopedVarName("--ui5_carousel_active_dot_border")}: 1px solid var(--udexColorBlue8, #0057D2);
+
+  /* Calendar & Date Picker */
+  ${getScopedVarName("--_ui5_daypicker_daynames_container_height")}: 42px;
+  ${getScopedVarName("--_ui5_daypicker_dayname_color")}: var(--udexColorGrey6, #5B738B);
+  ${getScopedVarName("--_ui5_daypicker_item_now_border_color")}: var(--udexColorPink8, #A100C2);
+  ${getScopedVarName("--_ui5_daypicker_item_weeekend_filter")}: none;
+  ${getScopedVarName("--_ui5_daypicker_item_select_between_border")}: 1px solid var(--udexColorBlue9, #0040B0);
+  ${getScopedVarName("--_ui5_calendar_header_middle_button_focus_outline")}: 1px solid var(--udexColorBlue9, #0040B0);
+  ${getScopedVarName("--_ui5_calendar_header_arrow_button_box_shadow")}: none;
+  ${getScopedVarName("--_ui5_calendar_header_padding")}: 0;
+
+  udex-search {
+    ${getScopedVarName("--_ui5_button_pressed_focused_border_color")}: transparent;
+  }
+
+  .sapUiSizeCompact,
+  .ui5-content-density-compact,
+  [data-ui5-compact-size] {
+    /* Calendar & Date Picker */
+    ${getScopedVarName("--_ui5_calendar_width")}: 371px;
+    ${getScopedVarName("--_ui5_calendar_height")}: auto;
+    ${getScopedVarName("--_ui5_calendar_top_bottom_padding")}: var(--udexSpacer8, 8px);
+    ${getScopedVarName("--_ui5_calendar_left_right_padding")}: var(--udexSpacer8, 8px);
+    ${getScopedVarName("--_ui5_calendar_header_height")}: 42px;
+    ${getScopedVarName("--_ui5_calendar_header_arrow_button_width")}: 42px;
+    ${getScopedVarName("--_ui5_day_picker_item_width")}: 42px;
+    ${getScopedVarName("--_ui5_day_picker_item_height")}: 42px;
+    ${getScopedVarName("--_ui5_daypicker_weekname_color")}: var(--udexColorGrey6, #5B738B);
+    ${getScopedVarName("--_ui5_daypicker_item_weeekend_filter")}: none;
+    ${getScopedVarName("--_ui5_month_picker_item_height")}: 36px;
+    ${getScopedVarName("--_ui5_monthpicker_item_margin")}: -8px 0 var(--udexSpacer16, 16px) 0;
+    ${getScopedVarName("--_ui5_year_picker_item_height")}: 36px;
+    ${getScopedVarName("--_ui5_yearpicker_item_margin")}: -8px 0 var(--udexSpacer16, 16px) 0;
+  }
+`;
+
+export default variablesOverwrite;

package/src/Avatar.hbs

@@ -4,7 +4,7 @@
     initials="{{initials}}"
     ?interactive="{{interactive}}"
     accessible-name="{{avatarAccessibleName}}"
-    color-scheme="{{getUI5AvatarColorScheme}}"
+    color-scheme="{{getUDExAvatarColorScheme}}"
     fallback-icon="{{fallbackIcon}}"
     icon="{{icon}}"
     shape="{{shape}}"

package/src/Avatar.ts

@@ -3,17 +3,19 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import Avatar from "@ui5/webcomponents/dist/Avatar.js";
-import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from "./generated/i18n/i18n-defaults.js";
 
 // Template
 import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js";
 
 // Styles
-import AvatarCss from "./generated/themes/Avatar.css";
+import AvatarCss from "./generated/themes/Avatar.css.js";
 
-export enum AvatarColorScheme {
+export enum UDExAvatarColorScheme {
   Mango = "Mango",
   Red = "Red",
   Raspberry = "Raspberry",
@@ -27,12 +29,12 @@ export enum AvatarColorScheme {
   Neutral = "Neutral",
 }
 
-export enum AvatarShape {
+export enum UDExAvatarShape {
   Circle = "Circle",
   Square = "Square",
 }
 
-export enum AvatarSize {
+export enum UDExAvatarSize {
   XS = "XS",
   S = "S",
   M = "M",
@@ -78,15 +80,26 @@ const udexToUi5ColorSchemeMap = {
   template: AvatarTemplate,
   dependencies: [Avatar],
 })
+
+/**
+ * Fires when the avatar is clicked.
+ *
+ * @public
+ */
+@event("click", { bubbles: true })
+
 class UDExAvatar extends UI5Element {
+  eventDetails!: {
+    "click": void,
+  };
   /**
    * Defines the displayed initials.
    *
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    initials!: string;
+  @property({ type: String })
+    initials: string = "";
 
   /**
    * Defines if the avatar is interactive (focusable and pressable).
@@ -100,11 +113,11 @@ class UDExAvatar extends UI5Element {
   /**
    * Defines the text alternative of the component.
    *
-   * @default ""
+   * @default undefined
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    accessibleName!: string;
+  @property({ type: String })
+    accessibleName?: string;
 
   /**
    * Defines the design of the component.
@@ -112,8 +125,8 @@ class UDExAvatar extends UI5Element {
    * @default "Blue"
    * @public
    */
-  @property({ type: AvatarColorScheme, defaultValue: AvatarColorScheme.Blue })
-    colorScheme!: `${AvatarColorScheme}`;
+  @property()
+    colorScheme: `${UDExAvatarColorScheme}` = UDExAvatarColorScheme.Blue;
 
   /**
    * Defines whether the component is disabled.
@@ -130,8 +143,8 @@ class UDExAvatar extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    fallbackIcon!: string;
+  @property({ type: String })
+    fallbackIcon: string = "";
 
   /**
    * Defines the name of the UI5 Icon, that will be displayed.
@@ -139,8 +152,8 @@ class UDExAvatar extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" })
-    icon!: string;
+  @property({ type: String })
+    icon: string = "";
 
   /**
    * Defines the shape of the component.
@@ -148,8 +161,8 @@ class UDExAvatar extends UI5Element {
    * @default "Circle"
    * @public
    */
-  @property({ type: AvatarShape, defaultValue: AvatarShape.Circle })
-    shape!: `${AvatarShape}`;
+  @property()
+    shape: `${UDExAvatarShape}` = UDExAvatarShape.Circle;
 
   /**
    * Defines predefined size of the component.
@@ -157,8 +170,8 @@ class UDExAvatar extends UI5Element {
    * @default "S"
    * @public
    */
-  @property({ type: AvatarSize, defaultValue: AvatarSize.S })
-    size!: `${AvatarSize}`;
+  @property()
+    size: `${UDExAvatarSize}` = UDExAvatarSize.S;
 
   /**
    * Defines the displaying attention badge.
@@ -187,20 +200,16 @@ class UDExAvatar extends UI5Element {
   @slot({ type: HTMLElement })
     badge!: Array<HTMLElement>;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  static async onDefine(): Promise<void> {
-    UDExAvatar.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   onAfterRendering(): void {
     this.title = this.initials;
   }
-
   handleClick(e: Event) {
     e.stopPropagation();
     if (this.interactive) {
-      this.fireEvent("click");
+      this.fireDecoratorEvent("click");
     }
   }
 
@@ -209,9 +218,9 @@ class UDExAvatar extends UI5Element {
    * @default "S"
    * @private
    */
-  get effectiveSize(): AvatarSize {
+  get effectiveSize(): UDExAvatarSize {
     // we read the attribute, because the "size" property will always have a default value
-    return this.getAttribute("size") as AvatarSize || this.size;
+    return this.getAttribute("size") as UDExAvatarSize || this.size;
   }
 
   /**
@@ -219,12 +228,12 @@ class UDExAvatar extends UI5Element {
    * @default "Blue"
    * @private
    */
-  get effectiveBackgroundColor(): AvatarColorScheme {
+  get effectiveBackgroundColor(): UDExAvatarColorScheme {
     // we read the attribute, because the "background-color" property will always have a default value
-    return this.getAttribute("color-scheme") as AvatarColorScheme || this.colorScheme;
+    return this.getAttribute("color-scheme") as UDExAvatarColorScheme || this.colorScheme;
   }
 
-  get getUI5AvatarColorScheme(): string {
+  get getUDExAvatarColorScheme(): string {
     return udexToUi5ColorSchemeMap[this.colorScheme];
   }
 

package/src/AvatarGroup.ts

@@ -1,32 +1,33 @@
-import AvatarGroup, { IAvatarGroupItem } from "@ui5/webcomponents/dist/AvatarGroup.js";
+import type { IAvatarGroupItem } from "@ui5/webcomponents/dist/AvatarGroup.js";
+import AvatarGroup from "@ui5/webcomponents/dist/AvatarGroup.js";
 import AvatarGroupType from "@ui5/webcomponents/dist/types/AvatarGroupType.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 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/dist/renderer/JsxRenderer.js";
 
 // Styles
 import UI5AvatarGroupCss from "@ui5/webcomponents/dist/generated/themes/AvatarGroup.css.js";
 
-import UDExAvatar, { AvatarColorScheme, AvatarSize } from "./Avatar.js";
+import UDExAvatar, { UDExAvatarColorScheme, UDExAvatarSize } from "./Avatar.js";
 
 const avatarOffsets = {
-  [AvatarSize.XS]: {
+  [UDExAvatarSize.XS]: {
     [AvatarGroupType.Individual]: "0.0625rem",
     [AvatarGroupType.Group]: "-0.75rem",
   },
-  [AvatarSize.S]: {
+  [UDExAvatarSize.S]: {
     [AvatarGroupType.Individual]: "0.125rem",
     [AvatarGroupType.Group]: "-1.25rem",
   },
-  [AvatarSize.M]: {
+  [UDExAvatarSize.M]: {
     [AvatarGroupType.Individual]: "0.125rem",
     [AvatarGroupType.Group]: "-1.625rem",
   },
-  [AvatarSize.L]: {
+  [UDExAvatarSize.L]: {
     [AvatarGroupType.Individual]: "0.125rem",
     [AvatarGroupType.Group]: "-2rem",
   },
-  [AvatarSize.XL]: {
+  [UDExAvatarSize.XL]: {
     [AvatarGroupType.Individual]: "0.25rem",
     [AvatarGroupType.Group]: "-2.75rem",
   },
@@ -52,7 +53,7 @@ const avatarOffsets = {
  */
 @customElement({
   tag: "udex-avatar-group",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [UI5AvatarGroupCss],
   dependencies: [UDExAvatar],
 })
@@ -103,7 +104,7 @@ class UDExAvatarGroup extends AvatarGroup {
 
   _prepareAvatars() {
     this._colorIndex = 0;
-    const visibleColors = Object.values(AvatarColorScheme);
+    const visibleColors = Object.values(UDExAvatarColorScheme);
 
     this.items.forEach((avatar, index) => {
       if (++this._colorIndex > visibleColors.length - 3) {

package/src/Badge.ts

@@ -3,7 +3,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 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 "@ui5/webcomponents/dist/Badge.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 
 import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
@@ -11,17 +10,10 @@ import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
 // Styles
 import BadgeCss from "./generated/themes/Badge.css.js";
 import IconPlacement from "./types/IconPlacement.js";
-import { NumberBadgeDesign, TextBadgeDesign } from "./types/BadgeDesign.js";
 
-export enum BadgeType {
-  Text = "Text",
-  Number = "Number",
-}
-
-export enum BadgeSize {
-  Small = "Small",
-  Large = "Large",
-}
+import {
+  UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign,
+} from "./types/BadgeDesign.js";
 
 /**
  * @class
@@ -54,17 +46,17 @@ class UDExBadge extends UI5Element {
    * @default "Text"
    * @public
    */
-  @property({ type: BadgeType, defaultValue: BadgeType.Text })
-    type!: `${BadgeType}`;
+  @property()
+    type: `${UDExTypeBadgeDesign}` = UDExTypeBadgeDesign.Text;
 
   /**
    * Defines the size of the component.
    *
-   * @default "Large"
+   * @default "Medium"
    * @public
    */
-  @property({ type: BadgeSize, defaultValue: BadgeSize.Large })
-    size!: `${BadgeSize}`;
+  @property()
+    size: `${UDExSizeBadgeDesign}` = UDExSizeBadgeDesign.Medium;
 
   /**
    * Defines the design of text type component.
@@ -72,24 +64,24 @@ class UDExBadge extends UI5Element {
    * @default "Info"
    * @public
    */
-  @property({ defaultValue: TextBadgeDesign.Info })
-    design!: `${TextBadgeDesign}`;
+  @property()
+    design: `${UDExTextBadgeDesign}` = UDExTextBadgeDesign.Information;
   /**
    * Defines the design of number type component.
    *
    * @default "Blue"
    * @public
    */
-  @property({ defaultValue: NumberBadgeDesign.Blue })
-    numberDesign!: `${NumberBadgeDesign}`;
+  @property()
+    numberDesign: `${UDExNumberBadgeDesign}` = UDExNumberBadgeDesign.Blue;
   /**
    * Defines icon placement if icon was provided
   *
   * @default "End"
   * @public
   */
-  @property({ type: IconPlacement, defaultValue: IconPlacement.End })
-    iconPlacement? : `${IconPlacement}`;
+    @property()
+      iconPlacement: `${IconPlacement}` = IconPlacement.End;
   /**
    * Defines icon name
   *
@@ -124,7 +116,7 @@ class UDExBadge extends UI5Element {
   }
 
   get badgeClasses(): string {
-    if (this.type === BadgeType.Text) {
+    if (this.type !== UDExTypeBadgeDesign.Number) {
       return this.textClasses;
     }