@sapudex/web-components 0.225.0 → 2.0.0

package/dist/Avatar.d.ts

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-export declare enum AvatarColorScheme {
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+export declare enum UDExAvatarColorScheme {
     Mango = "Mango",
     Red = "Red",
     Raspberry = "Raspberry",
@@ -13,11 +13,11 @@ export declare enum AvatarColorScheme {
     Transparent = "Transparent",
     Neutral = "Neutral"
 }
-export declare enum AvatarShape {
+export declare enum UDExAvatarShape {
     Circle = "Circle",
     Square = "Square"
 }
-export declare enum AvatarSize {
+export declare enum UDExAvatarSize {
     XS = "XS",
     S = "S",
     M = "M",
@@ -42,6 +42,9 @@ export declare enum AvatarSize {
  * @public
  */
 declare class UDExAvatar extends UI5Element {
+    eventDetails: {
+        "click": void;
+    };
     /**
      * Defines the displayed initials.
      *
@@ -59,17 +62,17 @@ declare class UDExAvatar extends UI5Element {
     /**
      * Defines the text alternative of the component.
      *
-     * @default ""
+     * @default undefined
      * @public
      */
-    accessibleName: string;
+    accessibleName?: string;
     /**
      * Defines the design of the component.
      *
      * @default "Blue"
      * @public
      */
-    colorScheme: `${AvatarColorScheme}`;
+    colorScheme: `${UDExAvatarColorScheme}`;
     /**
      * Defines whether the component is disabled.
      *
@@ -97,14 +100,14 @@ declare class UDExAvatar extends UI5Element {
      * @default "Circle"
      * @public
      */
-    shape: `${AvatarShape}`;
+    shape: `${UDExAvatarShape}`;
     /**
      * Defines predefined size of the component.
      *
      * @default "S"
      * @public
      */
-    size: `${AvatarSize}`;
+    size: `${UDExAvatarSize}`;
     /**
      * Defines the displaying attention badge.
      *
@@ -127,7 +130,6 @@ declare class UDExAvatar extends UI5Element {
      */
     badge: Array<HTMLElement>;
     static i18nBundle: I18nBundle;
-    static onDefine(): Promise<void>;
     onAfterRendering(): void;
     handleClick(e: Event): void;
     /**
@@ -135,14 +137,14 @@ declare class UDExAvatar extends UI5Element {
      * @default "S"
      * @private
      */
-    get effectiveSize(): AvatarSize;
+    get effectiveSize(): UDExAvatarSize;
     /**
      * Returns the effective background color.
      * @default "Blue"
      * @private
      */
-    get effectiveBackgroundColor(): AvatarColorScheme;
-    get getUI5AvatarColorScheme(): string;
+    get effectiveBackgroundColor(): UDExAvatarColorScheme;
+    get getUDExAvatarColorScheme(): string;
     get imageSlot(): boolean;
     get badgeSlot(): boolean;
     get udexAvatarClass(): string;

package/dist/Avatar.js

@@ -10,40 +10,41 @@ 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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.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";
-export var AvatarColorScheme;
-(function (AvatarColorScheme) {
-    AvatarColorScheme["Mango"] = "Mango";
-    AvatarColorScheme["Red"] = "Red";
-    AvatarColorScheme["Raspberry"] = "Raspberry";
-    AvatarColorScheme["Pink"] = "Pink";
-    AvatarColorScheme["Indigo"] = "Indigo";
-    AvatarColorScheme["Blue"] = "Blue";
-    AvatarColorScheme["Teal"] = "Teal";
-    AvatarColorScheme["Green"] = "Green";
-    AvatarColorScheme["Grey"] = "Grey";
-    AvatarColorScheme["Transparent"] = "Transparent";
-    AvatarColorScheme["Neutral"] = "Neutral";
-})(AvatarColorScheme || (AvatarColorScheme = {}));
-export var AvatarShape;
-(function (AvatarShape) {
-    AvatarShape["Circle"] = "Circle";
-    AvatarShape["Square"] = "Square";
-})(AvatarShape || (AvatarShape = {}));
-export var AvatarSize;
-(function (AvatarSize) {
-    AvatarSize["XS"] = "XS";
-    AvatarSize["S"] = "S";
-    AvatarSize["M"] = "M";
-    AvatarSize["L"] = "L";
-    AvatarSize["XL"] = "XL";
-})(AvatarSize || (AvatarSize = {}));
+import AvatarCss from "./generated/themes/Avatar.css.js";
+export var UDExAvatarColorScheme;
+(function (UDExAvatarColorScheme) {
+    UDExAvatarColorScheme["Mango"] = "Mango";
+    UDExAvatarColorScheme["Red"] = "Red";
+    UDExAvatarColorScheme["Raspberry"] = "Raspberry";
+    UDExAvatarColorScheme["Pink"] = "Pink";
+    UDExAvatarColorScheme["Indigo"] = "Indigo";
+    UDExAvatarColorScheme["Blue"] = "Blue";
+    UDExAvatarColorScheme["Teal"] = "Teal";
+    UDExAvatarColorScheme["Green"] = "Green";
+    UDExAvatarColorScheme["Grey"] = "Grey";
+    UDExAvatarColorScheme["Transparent"] = "Transparent";
+    UDExAvatarColorScheme["Neutral"] = "Neutral";
+})(UDExAvatarColorScheme || (UDExAvatarColorScheme = {}));
+export var UDExAvatarShape;
+(function (UDExAvatarShape) {
+    UDExAvatarShape["Circle"] = "Circle";
+    UDExAvatarShape["Square"] = "Square";
+})(UDExAvatarShape || (UDExAvatarShape = {}));
+export var UDExAvatarSize;
+(function (UDExAvatarSize) {
+    UDExAvatarSize["XS"] = "XS";
+    UDExAvatarSize["S"] = "S";
+    UDExAvatarSize["M"] = "M";
+    UDExAvatarSize["L"] = "L";
+    UDExAvatarSize["XL"] = "XL";
+})(UDExAvatarSize || (UDExAvatarSize = {}));
 const udexToUi5ColorSchemeMap = {
     Mango: "Accent1",
     Red: "Accent2",
@@ -75,8 +76,50 @@ const udexToUi5ColorSchemeMap = {
  * @public
  */
 let UDExAvatar = UDExAvatar_1 = class UDExAvatar extends UI5Element {
-    static async onDefine() {
-        UDExAvatar_1.i18nBundle = await getI18nBundle("@sapudex/web-components");
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the displayed initials.
+         *
+         * @default ""
+         * @public
+         */
+        this.initials = "";
+        /**
+         * Defines the design of the component.
+         *
+         * @default "Blue"
+         * @public
+         */
+        this.colorScheme = UDExAvatarColorScheme.Blue;
+        /**
+         * Defines the name of the fallback icon.
+         *
+         * @default ""
+         * @public
+         */
+        this.fallbackIcon = "";
+        /**
+         * Defines the name of the UI5 Icon, that will be displayed.
+         *
+         * @default ""
+         * @public
+         */
+        this.icon = "";
+        /**
+         * Defines the shape of the component.
+         *
+         * @default "Circle"
+         * @public
+         */
+        this.shape = UDExAvatarShape.Circle;
+        /**
+         * Defines predefined size of the component.
+         *
+         * @default "S"
+         * @public
+         */
+        this.size = UDExAvatarSize.S;
     }
     onAfterRendering() {
         this.title = this.initials;
@@ -84,7 +127,7 @@ let UDExAvatar = UDExAvatar_1 = class UDExAvatar extends UI5Element {
     handleClick(e) {
         e.stopPropagation();
         if (this.interactive) {
-            this.fireEvent("click");
+            this.fireDecoratorEvent("click");
         }
     }
     /**
@@ -105,7 +148,7 @@ let UDExAvatar = UDExAvatar_1 = class UDExAvatar extends UI5Element {
         // we read the attribute, because the "background-color" property will always have a default value
         return this.getAttribute("color-scheme") || this.colorScheme;
     }
-    get getUI5AvatarColorScheme() {
+    get getUDExAvatarColorScheme() {
         return udexToUi5ColorSchemeMap[this.colorScheme];
     }
     get imageSlot() {
@@ -129,31 +172,31 @@ let UDExAvatar = UDExAvatar_1 = class UDExAvatar extends UI5Element {
     }
 };
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExAvatar.prototype, "initials", void 0);
 __decorate([
     property({ type: Boolean })
 ], UDExAvatar.prototype, "interactive", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExAvatar.prototype, "accessibleName", void 0);
 __decorate([
-    property({ type: AvatarColorScheme, defaultValue: AvatarColorScheme.Blue })
+    property()
 ], UDExAvatar.prototype, "colorScheme", void 0);
 __decorate([
     property({ type: Boolean })
 ], UDExAvatar.prototype, "disabled", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExAvatar.prototype, "fallbackIcon", void 0);
 __decorate([
-    property({ type: String, defaultValue: "" })
+    property({ type: String })
 ], UDExAvatar.prototype, "icon", void 0);
 __decorate([
-    property({ type: AvatarShape, defaultValue: AvatarShape.Circle })
+    property()
 ], UDExAvatar.prototype, "shape", void 0);
 __decorate([
-    property({ type: AvatarSize, defaultValue: AvatarSize.S })
+    property()
 ], UDExAvatar.prototype, "size", void 0);
 __decorate([
     property({ type: Boolean })
@@ -164,6 +207,9 @@ __decorate([
 __decorate([
     slot({ type: HTMLElement })
 ], UDExAvatar.prototype, "badge", void 0);
+__decorate([
+    i18n("@sapudex/web-components")
+], UDExAvatar, "i18nBundle", void 0);
 UDExAvatar = UDExAvatar_1 = __decorate([
     customElement({
         tag: "udex-avatar",
@@ -172,6 +218,13 @@ UDExAvatar = UDExAvatar_1 = __decorate([
         template: AvatarTemplate,
         dependencies: [Avatar],
     })
+    /**
+     * Fires when the avatar is clicked.
+     *
+     * @public
+     */
+    ,
+    event("click", { bubbles: true })
 ], UDExAvatar);
 UDExAvatar.define();
 export default UDExAvatar;

package/dist/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport Avatar from \"@ui5/webcomponents/dist/Avatar.js\";\nimport I18nBundle, { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport AvatarTemplate from \"./generated/templates/AvatarTemplate.lit.js\";\n\n// Styles\nimport AvatarCss from \"./generated/themes/Avatar.css\";\n\nexport enum AvatarColorScheme {\n  Mango = \"Mango\",\n  Red = \"Red\",\n  Raspberry = \"Raspberry\",\n  Pink = \"Pink\",\n  Indigo = \"Indigo\",\n  Blue = \"Blue\",\n  Teal = \"Teal\",\n  Green = \"Green\",\n  Grey = \"Grey\",\n  Transparent = \"Transparent\",\n  Neutral = \"Neutral\",\n}\n\nexport enum AvatarShape {\n  Circle = \"Circle\",\n  Square = \"Square\",\n}\n\nexport enum AvatarSize {\n  XS = \"XS\",\n  S = \"S\",\n  M = \"M\",\n  L = \"L\",\n  XL = \"XL\",\n}\n\nconst udexToUi5ColorSchemeMap = {\n  Mango: \"Accent1\",\n  Red: \"Accent2\",\n  Raspberry: \"Accent3\",\n  Pink: \"Accent4\",\n  Indigo: \"Accent5\",\n  Blue: \"Accent6\",\n  Teal: \"Accent7\",\n  Green: \"Accent8\",\n  Grey: \"Accent10\",\n  Transparent: \"Accent6\",\n  Neutral: \"Accent6\",\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-avatar</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Avatar.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-avatar\",\n  renderer: litRender,\n  styles: AvatarCss,\n  template: AvatarTemplate,\n  dependencies: [Avatar],\n})\nclass UDExAvatar extends UI5Element {\n  /**\n   * Defines the displayed initials.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    initials!: string;\n\n  /**\n   * Defines if the avatar is interactive (focusable and pressable).\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    interactive!: boolean;\n\n  /**\n   * Defines the text alternative of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    accessibleName!: string;\n\n  /**\n   * Defines the design of the component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property({ type: AvatarColorScheme, defaultValue: AvatarColorScheme.Blue })\n    colorScheme!: `${AvatarColorScheme}`;\n\n  /**\n   * Defines whether the component is disabled.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the name of the fallback icon.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    fallbackIcon!: string;\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    icon!: string;\n\n  /**\n   * Defines the shape of the component.\n   *\n   * @default \"Circle\"\n   * @public\n   */\n  @property({ type: AvatarShape, defaultValue: AvatarShape.Circle })\n    shape!: `${AvatarShape}`;\n\n  /**\n   * Defines predefined size of the component.\n   *\n   * @default \"S\"\n   * @public\n   */\n  @property({ type: AvatarSize, defaultValue: AvatarSize.S })\n    size!: `${AvatarSize}`;\n\n  /**\n   * Defines the displaying attention badge.\n   *\n   * @public\n   * @default false\n   */\n    @property({ type: Boolean })\n      showAttentionBadge!: boolean;\n\n  /**\n   * Receives the desired <img> tag\n   *\n   * @slot image\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    image!: Array<HTMLElement>;\n\n  /**\n   * Defines the optional badge that will be used for visual affordance.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    badge!: Array<HTMLElement>;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine(): Promise<void> {\n    UDExAvatar.i18nBundle = await getI18nBundle(\"@sapudex/web-components\");\n  }\n\n  onAfterRendering(): void {\n    this.title = this.initials;\n  }\n\n  handleClick(e: Event) {\n    e.stopPropagation();\n    if (this.interactive) {\n      this.fireEvent(\"click\");\n    }\n  }\n\n  /**\n   * Returns the effective avatar size.\n   * @default \"S\"\n   * @private\n   */\n  get effectiveSize(): AvatarSize {\n    // we read the attribute, because the \"size\" property will always have a default value\n    return this.getAttribute(\"size\") as AvatarSize || this.size;\n  }\n\n  /**\n   * Returns the effective background color.\n   * @default \"Blue\"\n   * @private\n   */\n  get effectiveBackgroundColor(): AvatarColorScheme {\n    // we read the attribute, because the \"background-color\" property will always have a default value\n    return this.getAttribute(\"color-scheme\") as AvatarColorScheme || this.colorScheme;\n  }\n\n  get getUI5AvatarColorScheme(): string {\n    return udexToUi5ColorSchemeMap[this.colorScheme];\n  }\n\n  get imageSlot(): boolean {\n    return !!this.image.length;\n  }\n\n  get badgeSlot(): boolean {\n    return !!this.badge.length;\n  }\n\n  get udexAvatarClass(): string {\n    let avatarClass = \"udex-avatar\";\n\n    if (this.imageSlot) {\n      avatarClass += \" udex-avatar--with-image\";\n    }\n\n    return avatarClass;\n  }\n\n  get avatarAccessibleName(): string {\n    let accName = `${this.accessibleName ? this.accessibleName : `${UDExAvatar.i18nBundle.getText(AVATAR_TEXT)} ${this.initials}`}`;\n    accName += ` ${this.disabled ? UDExAvatar.i18nBundle.getText(DISABLED) : \"\"}`;\n    accName += ` ${this.showAttentionBadge ? UDExAvatar.i18nBundle.getText(ATTENTION_BADGE) : \"\"}`;\n    return accName;\n  }\n}\n\nUDExAvatar.define();\n\nexport default UDExAvatar;\n"]}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport Avatar from \"@ui5/webcomponents/dist/Avatar.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport AvatarTemplate from \"./generated/templates/AvatarTemplate.lit.js\";\n\n// Styles\nimport AvatarCss from \"./generated/themes/Avatar.css.js\";\n\nexport enum UDExAvatarColorScheme {\n  Mango = \"Mango\",\n  Red = \"Red\",\n  Raspberry = \"Raspberry\",\n  Pink = \"Pink\",\n  Indigo = \"Indigo\",\n  Blue = \"Blue\",\n  Teal = \"Teal\",\n  Green = \"Green\",\n  Grey = \"Grey\",\n  Transparent = \"Transparent\",\n  Neutral = \"Neutral\",\n}\n\nexport enum UDExAvatarShape {\n  Circle = \"Circle\",\n  Square = \"Square\",\n}\n\nexport enum UDExAvatarSize {\n  XS = \"XS\",\n  S = \"S\",\n  M = \"M\",\n  L = \"L\",\n  XL = \"XL\",\n}\n\nconst udexToUi5ColorSchemeMap = {\n  Mango: \"Accent1\",\n  Red: \"Accent2\",\n  Raspberry: \"Accent3\",\n  Pink: \"Accent4\",\n  Indigo: \"Accent5\",\n  Blue: \"Accent6\",\n  Teal: \"Accent7\",\n  Green: \"Accent8\",\n  Grey: \"Accent10\",\n  Transparent: \"Accent6\",\n  Neutral: \"Accent6\",\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-avatar</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Avatar.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-avatar\",\n  renderer: litRender,\n  styles: AvatarCss,\n  template: AvatarTemplate,\n  dependencies: [Avatar],\n})\n\n/**\n * Fires when the avatar is clicked.\n *\n * @public\n */\n@event(\"click\", { bubbles: true })\n\nclass UDExAvatar extends UI5Element {\n  eventDetails!: {\n    \"click\": void,\n  };\n  /**\n   * Defines the displayed initials.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    initials: string = \"\";\n\n  /**\n   * Defines if the avatar is interactive (focusable and pressable).\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    interactive!: boolean;\n\n  /**\n   * Defines the text alternative of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  /**\n   * Defines the design of the component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property()\n    colorScheme: `${UDExAvatarColorScheme}` = UDExAvatarColorScheme.Blue;\n\n  /**\n   * Defines whether the component is disabled.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the name of the fallback icon.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    fallbackIcon: string = \"\";\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    icon: string = \"\";\n\n  /**\n   * Defines the shape of the component.\n   *\n   * @default \"Circle\"\n   * @public\n   */\n  @property()\n    shape: `${UDExAvatarShape}` = UDExAvatarShape.Circle;\n\n  /**\n   * Defines predefined size of the component.\n   *\n   * @default \"S\"\n   * @public\n   */\n  @property()\n    size: `${UDExAvatarSize}` = UDExAvatarSize.S;\n\n  /**\n   * Defines the displaying attention badge.\n   *\n   * @public\n   * @default false\n   */\n    @property({ type: Boolean })\n      showAttentionBadge!: boolean;\n\n  /**\n   * Receives the desired <img> tag\n   *\n   * @slot image\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    image!: Array<HTMLElement>;\n\n  /**\n   * Defines the optional badge that will be used for visual affordance.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    badge!: Array<HTMLElement>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  onAfterRendering(): void {\n    this.title = this.initials;\n  }\n  handleClick(e: Event) {\n    e.stopPropagation();\n    if (this.interactive) {\n      this.fireDecoratorEvent(\"click\");\n    }\n  }\n\n  /**\n   * Returns the effective avatar size.\n   * @default \"S\"\n   * @private\n   */\n  get effectiveSize(): UDExAvatarSize {\n    // we read the attribute, because the \"size\" property will always have a default value\n    return this.getAttribute(\"size\") as UDExAvatarSize || this.size;\n  }\n\n  /**\n   * Returns the effective background color.\n   * @default \"Blue\"\n   * @private\n   */\n  get effectiveBackgroundColor(): UDExAvatarColorScheme {\n    // we read the attribute, because the \"background-color\" property will always have a default value\n    return this.getAttribute(\"color-scheme\") as UDExAvatarColorScheme || this.colorScheme;\n  }\n\n  get getUDExAvatarColorScheme(): string {\n    return udexToUi5ColorSchemeMap[this.colorScheme];\n  }\n\n  get imageSlot(): boolean {\n    return !!this.image.length;\n  }\n\n  get badgeSlot(): boolean {\n    return !!this.badge.length;\n  }\n\n  get udexAvatarClass(): string {\n    let avatarClass = \"udex-avatar\";\n\n    if (this.imageSlot) {\n      avatarClass += \" udex-avatar--with-image\";\n    }\n\n    return avatarClass;\n  }\n\n  get avatarAccessibleName(): string {\n    let accName = `${this.accessibleName ? this.accessibleName : `${UDExAvatar.i18nBundle.getText(AVATAR_TEXT)} ${this.initials}`}`;\n    accName += ` ${this.disabled ? UDExAvatar.i18nBundle.getText(DISABLED) : \"\"}`;\n    accName += ` ${this.showAttentionBadge ? UDExAvatar.i18nBundle.getText(ATTENTION_BADGE) : \"\"}`;\n    return accName;\n  }\n}\n\nUDExAvatar.define();\n\nexport default UDExAvatar;\n"]}

package/dist/AvatarGroup.js

@@ -8,28 +8,28 @@ 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",
     },
@@ -91,7 +91,7 @@ let UDExAvatarGroup = 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) {
                 this._colorIndex = 1;
@@ -110,7 +110,7 @@ let UDExAvatarGroup = class UDExAvatarGroup extends AvatarGroup {
 UDExAvatarGroup = __decorate([
     customElement({
         tag: "udex-avatar-group",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: [UI5AvatarGroupCss],
         dependencies: [UDExAvatar],
     })

package/dist/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../src/AvatarGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import AvatarGroup, { IAvatarGroupItem } from \"@ui5/webcomponents/dist/AvatarGroup.js\";\nimport AvatarGroupType from \"@ui5/webcomponents/dist/types/AvatarGroupType.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\n// Styles\nimport UI5AvatarGroupCss from \"@ui5/webcomponents/dist/generated/themes/AvatarGroup.css.js\";\n\nimport UDExAvatar, { AvatarColorScheme, AvatarSize } from \"./Avatar.js\";\n\nconst avatarOffsets = {\n  [AvatarSize.XS]: {\n    [AvatarGroupType.Individual]: \"0.0625rem\",\n    [AvatarGroupType.Group]: \"-0.75rem\",\n  },\n  [AvatarSize.S]: {\n    [AvatarGroupType.Individual]: \"0.125rem\",\n    [AvatarGroupType.Group]: \"-1.25rem\",\n  },\n  [AvatarSize.M]: {\n    [AvatarGroupType.Individual]: \"0.125rem\",\n    [AvatarGroupType.Group]: \"-1.625rem\",\n  },\n  [AvatarSize.L]: {\n    [AvatarGroupType.Individual]: \"0.125rem\",\n    [AvatarGroupType.Group]: \"-2rem\",\n  },\n  [AvatarSize.XL]: {\n    [AvatarGroupType.Individual]: \"0.25rem\",\n    [AvatarGroupType.Group]: \"-2.75rem\",\n  },\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-avatar-group</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AvatarGroup.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends AvatarGroup\n * @public\n */\n@customElement({\n  tag: \"udex-avatar-group\",\n  renderer: litRender,\n  styles: [UI5AvatarGroupCss],\n  dependencies: [UDExAvatar],\n})\n\nclass UDExAvatarGroup extends AvatarGroup {\n  constructor() {\n    super();\n\n    this._itemNavigation = new ItemNavigation(this, {\n      getItemsCallback: () => {\n        return this._isGroup\n          ? []\n          : this.items.slice(0, this._hiddenStartIndex).map(\n            item => item.shadowRoot?.firstElementChild as IAvatarGroupItem,\n          );\n      },\n    });\n  }\n  onEnterDOM(): void {\n    super.onEnterDOM();\n    const container: HTMLElement = this.shadowRoot?.querySelector(\".ui5-avatar-group-items\") as HTMLElement;\n    container?.addEventListener(\"mouseenter\", this._onHover.bind(this, true));\n    container?.addEventListener(\"mouseleave\", this._onHover.bind(this, false));\n  }\n\n  onExitDOM(): void {\n    super.onExitDOM();\n    const container: HTMLElement = this.shadowRoot?.querySelector(\".ui5-avatar-group-items\") as HTMLElement;\n    container?.removeEventListener(\"mouseenter\", this._onHover.bind(this, true));\n    container?.removeEventListener(\"mouseleave\", this._onHover.bind(this, false));\n  }\n\n  _onHover(hover: boolean) {\n    if (this._isGroup) {\n      this.items.every(avatar => {\n        avatar.toggleAttribute(\"hover\", hover);\n        return !avatar.hidden;\n      });\n    }\n  }\n\n  _onfocusin(e: FocusEvent) {\n    const targetItem = this._isGroup\n      ? e.currentTarget\n      : (e.target as HTMLElement).shadowRoot?.firstElementChild;\n    this._itemNavigation.setCurrentItem(targetItem as IAvatarGroupItem);\n  }\n\n  _prepareAvatars() {\n    this._colorIndex = 0;\n    const visibleColors = Object.values(AvatarColorScheme);\n\n    this.items.forEach((avatar, index) => {\n      if (++this._colorIndex > visibleColors.length - 3) {\n        this._colorIndex = 1;\n      }\n      avatar.interactive = !this._isGroup;\n      avatar.toggleAttribute(\"ui5-avatar\", true);\n\n      if (!avatar.getAttribute(\"color-scheme\")) {\n        avatar.setAttribute(\"color-scheme\", visibleColors[this._colorIndex]);\n      }\n\n      if (index !== this._itemsCount - 1 || this._customOverflowButton) {\n        avatar.style.marginInlineEnd = avatarOffsets[avatar.effectiveSize][this.type];\n      }\n    });\n  }\n}\n\nUDExAvatarGroup.define();\n\nexport default UDExAvatarGroup;\n"]}
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../src/AvatarGroup.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,WAAW,MAAM,wCAAwC,CAAC;AACjE,OAAO,eAAe,MAAM,kDAAkD,CAAC;AAC/E,OAAO,cAAc,MAAM,yDAAyD,CAAC;AACrF,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAE/E,SAAS;AACT,OAAO,iBAAiB,MAAM,6DAA6D,CAAC;AAE5F,OAAO,UAAU,EAAE,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEhF,MAAM,aAAa,GAAG;IACpB,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE;QACnB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,WAAW;QACzC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,UAAU;KACpC;IACD,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;QAClB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,UAAU;QACxC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,UAAU;KACpC;IACD,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;QAClB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,UAAU;QACxC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,WAAW;KACrC;IACD,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;QAClB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,UAAU;QACxC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,OAAO;KACjC;IACD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE;QACnB,CAAC,eAAe,CAAC,UAAU,CAAC,EAAE,SAAS;QACvC,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,UAAU;KACpC;CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AAQH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IACvC;QACE,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,IAAI,EAAE;YAC9C,gBAAgB,EAAE,GAAG,EAAE;gBACrB,OAAO,IAAI,CAAC,QAAQ;oBAClB,CAAC,CAAC,EAAE;oBACJ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAC/C,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,iBAAqC,CAC/D,CAAC;YACN,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IACD,UAAU;QACR,KAAK,CAAC,UAAU,EAAE,CAAC;QACnB,MAAM,SAAS,GAAgB,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,yBAAyB,CAAgB,CAAC;QACxG,SAAS,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;QAC1E,SAAS,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAC7E,CAAC;IAED,SAAS;QACP,KAAK,CAAC,SAAS,EAAE,CAAC;QAClB,MAAM,SAAS,GAAgB,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,yBAAyB,CAAgB,CAAC;QACxG,SAAS,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;QAC7E,SAAS,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAChF,CAAC;IAED,QAAQ,CAAC,KAAc;QACrB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;gBACxB,MAAM,CAAC,eAAe,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;gBACvC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;YACxB,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,UAAU,CAAC,CAAa;QACtB,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ;YAC9B,CAAC,CAAC,CAAC,CAAC,aAAa;YACjB,CAAC,CAAE,CAAC,CAAC,MAAsB,CAAC,UAAU,EAAE,iBAAiB,CAAC;QAC5D,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,UAA8B,CAAC,CAAC;IACtE,CAAC;IAED,eAAe;QACb,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACrB,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;QAE3D,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACnC,IAAI,EAAE,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAClD,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;YACvB,CAAC;YACD,MAAM,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YACpC,MAAM,CAAC,eAAe,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;YAE3C,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,CAAC;gBACzC,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;YACvE,CAAC;YAED,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBACjE,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAChF,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AAhEK,eAAe;IAPpB,aAAa,CAAC;QACb,GAAG,EAAE,mBAAmB;QACxB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,iBAAiB,CAAC;QAC3B,YAAY,EAAE,CAAC,UAAU,CAAC;KAC3B,CAAC;GAEI,eAAe,CAgEpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,CAAC","sourcesContent":["import type { IAvatarGroupItem } from \"@ui5/webcomponents/dist/AvatarGroup.js\";\nimport AvatarGroup from \"@ui5/webcomponents/dist/AvatarGroup.js\";\nimport AvatarGroupType from \"@ui5/webcomponents/dist/types/AvatarGroupType.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\n// Styles\nimport UI5AvatarGroupCss from \"@ui5/webcomponents/dist/generated/themes/AvatarGroup.css.js\";\n\nimport UDExAvatar, { UDExAvatarColorScheme, UDExAvatarSize } from \"./Avatar.js\";\n\nconst avatarOffsets = {\n  [UDExAvatarSize.XS]: {\n    [AvatarGroupType.Individual]: \"0.0625rem\",\n    [AvatarGroupType.Group]: \"-0.75rem\",\n  },\n  [UDExAvatarSize.S]: {\n    [AvatarGroupType.Individual]: \"0.125rem\",\n    [AvatarGroupType.Group]: \"-1.25rem\",\n  },\n  [UDExAvatarSize.M]: {\n    [AvatarGroupType.Individual]: \"0.125rem\",\n    [AvatarGroupType.Group]: \"-1.625rem\",\n  },\n  [UDExAvatarSize.L]: {\n    [AvatarGroupType.Individual]: \"0.125rem\",\n    [AvatarGroupType.Group]: \"-2rem\",\n  },\n  [UDExAvatarSize.XL]: {\n    [AvatarGroupType.Individual]: \"0.25rem\",\n    [AvatarGroupType.Group]: \"-2.75rem\",\n  },\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-avatar-group</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AvatarGroup.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends AvatarGroup\n * @public\n */\n@customElement({\n  tag: \"udex-avatar-group\",\n  renderer: jsxRenderer,\n  styles: [UI5AvatarGroupCss],\n  dependencies: [UDExAvatar],\n})\n\nclass UDExAvatarGroup extends AvatarGroup {\n  constructor() {\n    super();\n\n    this._itemNavigation = new ItemNavigation(this, {\n      getItemsCallback: () => {\n        return this._isGroup\n          ? []\n          : this.items.slice(0, this._hiddenStartIndex).map(\n            item => item.shadowRoot?.firstElementChild as IAvatarGroupItem,\n          );\n      },\n    });\n  }\n  onEnterDOM(): void {\n    super.onEnterDOM();\n    const container: HTMLElement = this.shadowRoot?.querySelector(\".ui5-avatar-group-items\") as HTMLElement;\n    container?.addEventListener(\"mouseenter\", this._onHover.bind(this, true));\n    container?.addEventListener(\"mouseleave\", this._onHover.bind(this, false));\n  }\n\n  onExitDOM(): void {\n    super.onExitDOM();\n    const container: HTMLElement = this.shadowRoot?.querySelector(\".ui5-avatar-group-items\") as HTMLElement;\n    container?.removeEventListener(\"mouseenter\", this._onHover.bind(this, true));\n    container?.removeEventListener(\"mouseleave\", this._onHover.bind(this, false));\n  }\n\n  _onHover(hover: boolean) {\n    if (this._isGroup) {\n      this.items.every(avatar => {\n        avatar.toggleAttribute(\"hover\", hover);\n        return !avatar.hidden;\n      });\n    }\n  }\n\n  _onfocusin(e: FocusEvent) {\n    const targetItem = this._isGroup\n      ? e.currentTarget\n      : (e.target as HTMLElement).shadowRoot?.firstElementChild;\n    this._itemNavigation.setCurrentItem(targetItem as IAvatarGroupItem);\n  }\n\n  _prepareAvatars() {\n    this._colorIndex = 0;\n    const visibleColors = Object.values(UDExAvatarColorScheme);\n\n    this.items.forEach((avatar, index) => {\n      if (++this._colorIndex > visibleColors.length - 3) {\n        this._colorIndex = 1;\n      }\n      avatar.interactive = !this._isGroup;\n      avatar.toggleAttribute(\"ui5-avatar\", true);\n\n      if (!avatar.getAttribute(\"color-scheme\")) {\n        avatar.setAttribute(\"color-scheme\", visibleColors[this._colorIndex]);\n      }\n\n      if (index !== this._itemsCount - 1 || this._customOverflowButton) {\n        avatar.style.marginInlineEnd = avatarOffsets[avatar.effectiveSize][this.type];\n      }\n    });\n  }\n}\n\nUDExAvatarGroup.define();\n\nexport default UDExAvatarGroup;\n"]}

package/dist/Badge.d.ts

@@ -1,15 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import "@ui5/webcomponents/dist/Badge.js";
 import IconPlacement from "./types/IconPlacement.js";
-import { NumberBadgeDesign, TextBadgeDesign } from "./types/BadgeDesign.js";
-export declare enum BadgeType {
-    Text = "Text",
-    Number = "Number"
-}
-export declare enum BadgeSize {
-    Small = "Small",
-    Large = "Large"
-}
+import { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign } from "./types/BadgeDesign.js";
 /**
  * @class
  *
@@ -34,35 +25,35 @@ declare class UDExBadge extends UI5Element {
      * @default "Text"
      * @public
      */
-    type: `${BadgeType}`;
+    type: `${UDExTypeBadgeDesign}`;
     /**
      * Defines the size of the component.
      *
-     * @default "Large"
+     * @default "Medium"
      * @public
      */
-    size: `${BadgeSize}`;
+    size: `${UDExSizeBadgeDesign}`;
     /**
      * Defines the design of text type component.
      *
      * @default "Info"
      * @public
      */
-    design: `${TextBadgeDesign}`;
+    design: `${UDExTextBadgeDesign}`;
     /**
      * Defines the design of number type component.
      *
      * @default "Blue"
      * @public
      */
-    numberDesign: `${NumberBadgeDesign}`;
+    numberDesign: `${UDExNumberBadgeDesign}`;
     /**
      * Defines icon placement if icon was provided
     *
     * @default "End"
     * @public
     */
-    iconPlacement?: `${IconPlacement}`;
+    iconPlacement: `${IconPlacement}`;
     /**
      * Defines icon name
     *

package/dist/Badge.js

@@ -9,23 +9,12 @@ 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";
 // Styles
 import BadgeCss from "./generated/themes/Badge.css.js";
 import IconPlacement from "./types/IconPlacement.js";
-import { NumberBadgeDesign, TextBadgeDesign } from "./types/BadgeDesign.js";
-export var BadgeType;
-(function (BadgeType) {
-    BadgeType["Text"] = "Text";
-    BadgeType["Number"] = "Number";
-})(BadgeType || (BadgeType = {}));
-export var BadgeSize;
-(function (BadgeSize) {
-    BadgeSize["Small"] = "Small";
-    BadgeSize["Large"] = "Large";
-})(BadgeSize || (BadgeSize = {}));
+import { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign, } from "./types/BadgeDesign.js";
 /**
  * @class
  *
@@ -44,6 +33,44 @@ export var BadgeSize;
  * @public
  */
 let UDExBadge = class UDExBadge extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the type of the component.
+         *
+         * @default "Text"
+         * @public
+         */
+        this.type = UDExTypeBadgeDesign.Text;
+        /**
+         * Defines the size of the component.
+         *
+         * @default "Medium"
+         * @public
+         */
+        this.size = UDExSizeBadgeDesign.Medium;
+        /**
+         * Defines the design of text type component.
+         *
+         * @default "Info"
+         * @public
+         */
+        this.design = UDExTextBadgeDesign.Information;
+        /**
+         * Defines the design of number type component.
+         *
+         * @default "Blue"
+         * @public
+         */
+        this.numberDesign = UDExNumberBadgeDesign.Blue;
+        /**
+         * Defines icon placement if icon was provided
+        *
+        * @default "End"
+        * @public
+        */
+        this.iconPlacement = IconPlacement.End;
+    }
     get startIcon() {
         return !!this.icon && this.iconPlacement === IconPlacement.Start;
     }
@@ -57,26 +84,26 @@ let UDExBadge = class UDExBadge extends UI5Element {
         return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;
     }
     get badgeClasses() {
-        if (this.type === BadgeType.Text) {
+        if (this.type !== UDExTypeBadgeDesign.Number) {
             return this.textClasses;
         }
         return this.numberClasses;
     }
 };
 __decorate([
-    property({ type: BadgeType, defaultValue: BadgeType.Text })
+    property()
 ], UDExBadge.prototype, "type", void 0);
 __decorate([
-    property({ type: BadgeSize, defaultValue: BadgeSize.Large })
+    property()
 ], UDExBadge.prototype, "size", void 0);
 __decorate([
-    property({ defaultValue: TextBadgeDesign.Info })
+    property()
 ], UDExBadge.prototype, "design", void 0);
 __decorate([
-    property({ defaultValue: NumberBadgeDesign.Blue })
+    property()
 ], UDExBadge.prototype, "numberDesign", void 0);
 __decorate([
-    property({ type: IconPlacement, defaultValue: IconPlacement.End })
+    property()
 ], UDExBadge.prototype, "iconPlacement", void 0);
 __decorate([
     property()

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport \"@ui5/webcomponents/dist/Badge.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\n\nimport BadgeTemplate from \"./generated/templates/BadgeTemplate.lit.js\";\n\n// Styles\nimport BadgeCss from \"./generated/themes/Badge.css.js\";\nimport IconPlacement from \"./types/IconPlacement.js\";\nimport { NumberBadgeDesign, TextBadgeDesign } from \"./types/BadgeDesign.js\";\n\nexport enum BadgeType {\n  Text = \"Text\",\n  Number = \"Number\",\n}\n\nexport enum BadgeSize {\n  Small = \"Small\",\n  Large = \"Large\",\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Badge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-badge\",\n  renderer: litRender,\n  styles: BadgeCss,\n  template: BadgeTemplate,\n  dependencies: [Icon],\n})\nclass UDExBadge extends UI5Element {\n  /**\n   * Defines the type of the component.\n   *\n   * @default \"Text\"\n   * @public\n   */\n  @property({ type: BadgeType, defaultValue: BadgeType.Text })\n    type!: `${BadgeType}`;\n\n  /**\n   * Defines the size of the component.\n   *\n   * @default \"Large\"\n   * @public\n   */\n  @property({ type: BadgeSize, defaultValue: BadgeSize.Large })\n    size!: `${BadgeSize}`;\n\n  /**\n   * Defines the design of text type component.\n   *\n   * @default \"Info\"\n   * @public\n   */\n  @property({ defaultValue: TextBadgeDesign.Info })\n    design!: `${TextBadgeDesign}`;\n  /**\n   * Defines the design of number type component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property({ defaultValue: NumberBadgeDesign.Blue })\n    numberDesign!: `${NumberBadgeDesign}`;\n  /**\n   * Defines icon placement if icon was provided\n  *\n  * @default \"End\"\n  * @public\n  */\n  @property({ type: IconPlacement, defaultValue: IconPlacement.End })\n    iconPlacement? : `${IconPlacement}`;\n  /**\n   * Defines icon name\n  *\n  * @default \"\"\n  * @public\n  */\n  @property()\n    icon!: string;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    default!: Array<Node>;\n\n  get startIcon(): boolean {\n    return !!this.icon && this.iconPlacement === IconPlacement.Start;\n  }\n\n  get endIcon(): boolean {\n    return !!this.icon && this.iconPlacement === IconPlacement.End;\n  }\n\n  get textClasses(): string {\n    return `udex-badge udex-badge--text udex-badge--${this.design.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get numberClasses(): string {\n    return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get badgeClasses(): string {\n    if (this.type === BadgeType.Text) {\n      return this.textClasses;\n    }\n\n    return this.numberClasses;\n  }\n}\n\nUDExBadge.define();\n\nexport default UDExBadge;\n"]}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAEnD,OAAO,aAAa,MAAM,4CAA4C,CAAC;AAEvE,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AACvD,OAAO,aAAa,MAAM,0BAA0B,CAAC;AAErD,OAAO,EACL,qBAAqB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,GACrF,MAAM,wBAAwB,CAAC;AAEhC;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACE;;;;;WAKG;QAED,SAAI,GAA6B,mBAAmB,CAAC,IAAI,CAAC;QAE5D;;;;;WAKG;QAED,SAAI,GAA6B,mBAAmB,CAAC,MAAM,CAAC;QAE9D;;;;;WAKG;QAED,WAAM,GAA6B,mBAAmB,CAAC,WAAW,CAAC;QACrE;;;;;WAKG;QAED,iBAAY,GAA+B,qBAAqB,CAAC,IAAI,CAAC;QACxE;;;;;UAKE;QAEE,kBAAa,GAAuB,aAAa,CAAC,GAAG,CAAC;IAyC5D,CAAC;IAvBC,IAAI,SAAS;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;IACnE,CAAC;IAED,IAAI,OAAO;QACT,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,CAAC;IACjE,CAAC;IAED,IAAI,WAAW;QACb,OAAO,2CAA2C,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IACvH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,6CAA6C,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IAC/H,CAAC;IAED,IAAI,YAAY;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,mBAAmB,CAAC,MAAM,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC,WAAW,CAAC;QAC1B,CAAC;QAED,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;CACF,CAAA;AA3EG;IADD,QAAQ,EAAE;uCACiD;AAS1D;IADD,QAAQ,EAAE;uCACmD;AAS5D;IADD,QAAQ,EAAE;yCAC0D;AAQnE;IADD,QAAQ,EAAE;+CAC6D;AAQpE;IADD,QAAQ,EAAE;gDAC6C;AAQxD;IADD,QAAQ,EAAE;uCACK;AAQd;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACd;AA1DpB,SAAS;IAPd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,aAAa;QACvB,YAAY,EAAE,CAAC,IAAI,CAAC;KACrB,CAAC;GACI,SAAS,CAmFd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\n\nimport BadgeTemplate from \"./generated/templates/BadgeTemplate.lit.js\";\n\n// Styles\nimport BadgeCss from \"./generated/themes/Badge.css.js\";\nimport IconPlacement from \"./types/IconPlacement.js\";\n\nimport {\n  UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign,\n} from \"./types/BadgeDesign.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Badge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-badge\",\n  renderer: litRender,\n  styles: BadgeCss,\n  template: BadgeTemplate,\n  dependencies: [Icon],\n})\nclass UDExBadge extends UI5Element {\n  /**\n   * Defines the type of the component.\n   *\n   * @default \"Text\"\n   * @public\n   */\n  @property()\n    type: `${UDExTypeBadgeDesign}` = UDExTypeBadgeDesign.Text;\n\n  /**\n   * Defines the size of the component.\n   *\n   * @default \"Medium\"\n   * @public\n   */\n  @property()\n    size: `${UDExSizeBadgeDesign}` = UDExSizeBadgeDesign.Medium;\n\n  /**\n   * Defines the design of text type component.\n   *\n   * @default \"Info\"\n   * @public\n   */\n  @property()\n    design: `${UDExTextBadgeDesign}` = UDExTextBadgeDesign.Information;\n  /**\n   * Defines the design of number type component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property()\n    numberDesign: `${UDExNumberBadgeDesign}` = UDExNumberBadgeDesign.Blue;\n  /**\n   * Defines icon placement if icon was provided\n  *\n  * @default \"End\"\n  * @public\n  */\n    @property()\n      iconPlacement: `${IconPlacement}` = IconPlacement.End;\n  /**\n   * Defines icon name\n  *\n  * @default \"\"\n  * @public\n  */\n  @property()\n    icon!: string;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    default!: Array<Node>;\n\n  get startIcon(): boolean {\n    return !!this.icon && this.iconPlacement === IconPlacement.Start;\n  }\n\n  get endIcon(): boolean {\n    return !!this.icon && this.iconPlacement === IconPlacement.End;\n  }\n\n  get textClasses(): string {\n    return `udex-badge udex-badge--text udex-badge--${this.design.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get numberClasses(): string {\n    return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get badgeClasses(): string {\n    if (this.type !== UDExTypeBadgeDesign.Number) {\n      return this.textClasses;\n    }\n\n    return this.numberClasses;\n  }\n}\n\nUDExBadge.define();\n\nexport default UDExBadge;\n"]}