@openui5/sap.ui.webc.main 1.115.0 → 1.116.0

package/src/sap/ui/webc/main/thirdparty/AvatarGroup.js

@@ -1,4 +1,4 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/Keys", "./generated/i18n/i18n-defaults", "./generated/templates/AvatarGroupTemplate.lit", "./generated/themes/AvatarGroup.css", "./Button", "./types/AvatarSize", "./types/AvatarGroupType", "./types/AvatarColorScheme"], function (_exports, _UI5Element, _LitRenderer, _ResizeHandler, _ItemNavigation, _i18nBundle, _Keys, _i18nDefaults, _AvatarGroupTemplate, _AvatarGroup, _Button, _AvatarSize, _AvatarGroupType, _AvatarColorScheme) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/Keys", "./Button", "./types/AvatarSize", "./types/AvatarGroupType", "./types/AvatarColorScheme", "./generated/i18n/i18n-defaults", "./generated/themes/AvatarGroup.css", "./generated/templates/AvatarGroupTemplate.lit"], function (_exports, _UI5Element, _LitRenderer, _ResizeHandler, _ItemNavigation, _i18nBundle, _customElement, _property, _slot, _event, _Keys, _Button, _AvatarSize, _AvatarGroupType, _AvatarColorScheme, _i18nDefaults, _AvatarGroup, _AvatarGroupTemplate) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -9,20 +9,27 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   _LitRenderer = _interopRequireDefault(_LitRenderer);
   _ResizeHandler = _interopRequireDefault(_ResizeHandler);
   _ItemNavigation = _interopRequireDefault(_ItemNavigation);
-  _AvatarGroupTemplate = _interopRequireDefault(_AvatarGroupTemplate);
-  _AvatarGroup = _interopRequireDefault(_AvatarGroup);
+  _customElement = _interopRequireDefault(_customElement);
+  _property = _interopRequireDefault(_property);
+  _slot = _interopRequireDefault(_slot);
+  _event = _interopRequireDefault(_event);
   _Button = _interopRequireDefault(_Button);
   _AvatarSize = _interopRequireDefault(_AvatarSize);
   _AvatarGroupType = _interopRequireDefault(_AvatarGroupType);
   _AvatarColorScheme = _interopRequireDefault(_AvatarColorScheme);
+  _AvatarGroup = _interopRequireDefault(_AvatarGroup);
+  _AvatarGroupTemplate = _interopRequireDefault(_AvatarGroupTemplate);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-  // Template
-
-  // Styles
-
+  var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  var AvatarGroup_1;
   const OVERFLOW_BTN_CLASS = "ui5-avatar-group-overflow-btn";
   const AVATAR_GROUP_OVERFLOW_BTN_SELECTOR = `.${OVERFLOW_BTN_CLASS}`;
-
   // based on RTL/LTR a margin-left/right is set respectfully
   const offsets = {
     [_AvatarSize.default.XS]: {
@@ -46,114 +53,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       [_AvatarGroupType.default.Group]: "-2.75rem"
     }
   };
-
-  /**
-   * @public
-   */
-  const metadata = {
-    tag: "ui5-avatar-group",
-    managedSlots: true,
-    properties: /** @lends sap.ui.webcomponents.main.AvatarGroup.prototype */{
-      /**
-      	 * Defines the mode of the <code>AvatarGroup</code>.
-       * <br><br>
-       * Available options are:
-       * <ul>
-       * <li><code>Group</code></li>
-       * <li><code>Individual</code></li>
-       * </ul>
-       * @type {AvatarGroupType}
-       * @defaultValue "Group"
-       * @public
-       */
-      type: {
-        type: String,
-        defaultValue: _AvatarGroupType.default.Group
-      },
-      /**
-       * Defines the aria-haspopup value of the component on:
-       * <br><br>
-       * <ul>
-       * <li> the whole container when <code>type</code> property is <code>Group</code></li>
-       * <li> the default "More" overflow button when <code>type</code> is <code>Individual</code></li>
-       * </ul>
-       * <br><br>
-       * @type String
-       * @since 1.0.0-rc.15
-       * @protected
-       */
-      ariaHaspopup: {
-        type: String
-      },
-      /**
-       * @private
-       */
-      _overflowButtonText: {
-        type: String,
-        noAttribute: true
-      }
-    },
-    slots: /** @lends sap.ui.webcomponents.main.AvatarGroup.prototype */{
-      /**
-       * Defines the items of the component. Use the <code>ui5-avatar</code> component as an item.
-       * <br><br>
-       * <b>Note:</b> The UX guidelines recommends using avatars with "Circle" shape.
-       * Moreover, if you use avatars with "Square" shape, there will be visual inconsistency
-       * as the built-in overflow action has "Circle" shape.
-       * @type {sap.ui.webcomponents.main.IAvatar[]}
-       * @slot items
-       * @public
-       */
-      "default": {
-        type: HTMLElement,
-        propertyName: "items"
-      },
-      /**
-       * Defines the overflow button of the component.
-       * <b>Note:</b> We recommend using the <code>ui5-button</code> component.
-       * <br><br>
-       * <b>Note:</b> If this slot is not used, the component will
-       * display the built-in overflow button.
-       * @type {HTMLElement}
-       * @slot overflowButton
-       * @public
-       * @since 1.0.0-rc.13
-       */
-      overflowButton: {
-        type: HTMLElement
-      }
-    },
-    events: /** @lends sap.ui.webcomponents.main.AvatarGroup.prototype */{
-      /**
-      * Fired when the component is activated either with a
-      * click/tap or by using the Enter or Space key.
-      * @param {HTMLElement} targetRef The DOM ref of the clicked item.
-      * @param {boolean} overflowButtonClicked indicates if the overflow button is clicked
-      * @event
-      * @public
-      * @since 1.0.0-rc.11
-      */
-      click: {
-        detail: {
-          targetRef: {
-            type: HTMLElement
-          },
-          overflowButtonClicked: {
-            type: Boolean
-          }
-        }
-      },
-      /**
-      * Fired when the count of visible <code>ui5-avatar</code> elements in the
-      * component has changed
-      * @event
-      * @public
-      * @since 1.0.0-rc.13
-      */
-      overflow: {}
-    }
-  };
-
   /**
    * @class
    *
@@ -221,13 +120,13 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    *
    * @constructor
    * @author SAP SE
-   * @alias sap.ui.webcomponents.main.AvatarGroup
-   * @extends UI5Element
+   * @alias sap.ui.webc.main.AvatarGroup
+   * @extends sap.ui.webc.base.UI5Element
    * @tagname ui5-avatar-group
    * @since 1.0.0-rc.11
    * @public
    */
-  class AvatarGroup extends _UI5Element.default {
+  let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends _UI5Element.default {
     constructor() {
       super();
       this._itemNavigation = new _ItemNavigation.default(this, {
@@ -239,40 +138,25 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       this._hiddenItems = 0;
       this._onResizeHandler = this._onResize.bind(this);
     }
-    static get metadata() {
-      return metadata;
-    }
-    static get render() {
-      return _LitRenderer.default;
-    }
-    static get template() {
-      return _AvatarGroupTemplate.default;
-    }
-    static get styles() {
-      return _AvatarGroup.default;
-    }
-    static get dependencies() {
-      return [_Button.default];
-    }
     static async onDefine() {
-      AvatarGroup.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
+      AvatarGroup_1.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
     }
-
     /**
      * Returns an array containing the <code>ui5-avatar</code> instances that are currently not displayed due to lack of space.
      * @readonly
-     * @type { HTMLElement[] }
+     * @type {HTMLElement[]}
      * @defaultValue []
+     * @name sap.ui.webc.main.AvatarGroup.prototype.hiddenItems
      * @public
      */
     get hiddenItems() {
       return this.items.slice(this._hiddenStartIndex);
     }
-
     /**
      * Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component.
      * @readonly
-     * @type { AvatarColorScheme[] }
+     * @type {sap.ui.webc.main.types.AvatarColorScheme[]}
+     * @name sap.ui.webc.main.AvatarGroup.prototype.colorScheme
      * @defaultValue []
      * @public
      */
@@ -285,23 +169,21 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get _ariaLabelText() {
       const hiddenItemsCount = this.hiddenItems.length;
       const typeLabelKey = this._isGroup ? _i18nDefaults.AVATAR_GROUP_ARIA_LABEL_GROUP : _i18nDefaults.AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL;
-
       // avatar type label
-      let text = AvatarGroup.i18nBundle.getText(typeLabelKey);
-
+      let text = AvatarGroup_1.i18nBundle.getText(typeLabelKey);
       // add displayed-hidden avatars label
-      text += ` ${AvatarGroup.i18nBundle.getText(_i18nDefaults.AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL, this._itemsCount - hiddenItemsCount, hiddenItemsCount)}`;
+      text += ` ${AvatarGroup_1.i18nBundle.getText(_i18nDefaults.AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL, this._itemsCount - hiddenItemsCount, hiddenItemsCount)}`;
       if (this._isGroup) {
         // the container role is "button", add the message for complete list activation
-        text += ` ${AvatarGroup.i18nBundle.getText(_i18nDefaults.AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL)}`;
+        text += ` ${AvatarGroup_1.i18nBundle.getText(_i18nDefaults.AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL)}`;
       } else {
         // the container role is "group", add the "how to navigate" message
-        text += ` ${AvatarGroup.i18nBundle.getText(_i18nDefaults.AVATAR_GROUP_MOVE)}`;
+        text += ` ${AvatarGroup_1.i18nBundle.getText(_i18nDefaults.AVATAR_GROUP_MOVE)}`;
       }
       return text;
     }
     get _overflowButtonAriaLabelText() {
-      return this._isGroup ? undefined : AvatarGroup.i18nBundle.getText(_i18nDefaults.AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL);
+      return this._isGroup ? undefined : AvatarGroup_1.i18nBundle.getText(_i18nDefaults.AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL);
     }
     get _containerAriaHasPopup() {
       return this._isGroup ? this._getAriaHasPopup() : undefined;
@@ -332,7 +214,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get _overflowButton() {
       return this.shadowRoot.querySelector(AVATAR_GROUP_OVERFLOW_BTN_SELECTOR);
     }
-
     /**
      * Return the effective overflow button width
      * Differences are that when in "Group" type the button is offset and overlaps the avatars
@@ -344,14 +225,17 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get _overflowButtonEffectiveWidth() {
       const button = this._customOverflowButton ? this._customOverflowButton : this._overflowButton;
       // if in "Group" mode overflow button size is equal to the offset from second item
+      if (!button) {
+        return 0;
+      }
       if (this._isGroup) {
         let item = this.items[1];
-
+        const ltrEffectiveWidth = item.offsetLeft - this.offsetLeft;
         // in some cases when second avatar is overflowed the offset of the button is the right one
         if (!item || item.hidden) {
           item = button;
         }
-        return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : item.offsetLeft - this.offsetLeft;
+        return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : ltrEffectiveWidth;
       }
       return button.offsetWidth;
     }
@@ -388,23 +272,23 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _onResize() {
       this._overflowItems();
     }
-    _onkeydown(event) {
+    _onkeydown(e) {
       // when type is "Individual" the ui5-avatar and ui5-button both
       // fire "click" event when SPACE or ENTER are pressed and
       // AvatarGroup "click" is fired in their handlers (_onClick, _onUI5Click).
       if (this._isGroup) {
-        if ((0, _Keys.isEnter)(event)) {
-          this._fireGroupEvent(event.target);
-        } else if ((0, _Keys.isSpace)(event)) {
+        if ((0, _Keys.isEnter)(e)) {
+          this._fireGroupEvent(e.target);
+        } else if ((0, _Keys.isSpace)(e)) {
           // prevent scrolling
-          event.preventDefault();
+          e.preventDefault();
         }
       }
     }
-    _onkeyup(event) {
-      if (!event.shiftKey && (0, _Keys.isSpace)(event) && this._isGroup) {
-        this._fireGroupEvent(event.target);
-        event.preventDefault();
+    _onkeyup(e) {
+      if (!e.shiftKey && (0, _Keys.isSpace)(e) && this._isGroup) {
+        this._fireGroupEvent(e.target);
+        e.preventDefault();
       }
     }
     _fireGroupEvent(targetRef) {
@@ -414,30 +298,30 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         overflowButtonClicked: isOverflowButtonClicked
       });
     }
-    _onClick(event) {
+    _onClick(e) {
+      const target = e.target;
       // no matter the value of noConflict, the ui5-button and the group container (div) always fire a native click event
-      const isButton = event.target.hasAttribute("ui5-button");
-      event.stopPropagation();
+      const isButton = target.hasAttribute("ui5-button");
+      e.stopPropagation();
       if (this._isGroup || isButton) {
-        this._fireGroupEvent(event.target);
+        this._fireGroupEvent(target);
       }
     }
-    _onUI5Click(event) {
+    _onUI5Click(e) {
+      const target = e.target;
       // when noConflict=true only ui5-avatar will fire ui5-click event
-      const isAvatar = event.target.hasAttribute("ui5-avatar");
-      event.stopPropagation();
+      const isAvatar = target.hasAttribute("ui5-avatar");
+      e.stopPropagation();
       if (isAvatar) {
-        this._fireGroupEvent(event.target);
+        this._fireGroupEvent(target);
       }
     }
-
     /**
      * Modifies avatars to the needs of avatar group properties. Respects already set size and background color.
      * Set the margins (offsets) based on RTL/LTR.
      * @private
      */
     _prepareAvatars() {
-      const RTL = this.effectiveDir === "rtl";
       this._colorIndex = 0;
       this.items.forEach((avatar, index) => {
         const colorIndex = this._getNextBackgroundColor();
@@ -446,19 +330,16 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
           // AvatarGroup respects colors set to ui5-avatar
           avatar.setAttribute("_color-scheme", _AvatarColorScheme.default[`Accent${colorIndex}`]);
         }
-
         // last avatar should not be offset as it breaks the container width and focus styles are no set correctly
         if (index !== this._itemsCount - 1 || this._customOverflowButton) {
-          // based on RTL margin left or right is set to avatars
-          avatar.style[`margin-${RTL ? "left" : "right"}`] = offsets[avatar._effectiveSize][this.type];
+          // based on RTL the browser automatically sets left or right margin to avatars
+          avatar.style.marginInlineEnd = offsets[avatar._effectiveSize][this.type];
         }
       });
     }
-    _onfocusin(event) {
-      const target = event.target;
-      this._itemNavigation.setCurrentItem(target);
+    _onfocusin(e) {
+      this._itemNavigation.setCurrentItem(e.target);
     }
-
     /**
      * Returns the total width to item excluding the item width
      * RTL/LTR aware
@@ -467,16 +348,18 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
      */
     _getWidthToItem(item) {
       const isRTL = this.effectiveDir === "rtl";
+      const ltrWidthToItem = item.offsetLeft - this.offsetLeft;
       if (isRTL) {
+        const itemOffsetParent = item.offsetParent;
         // in RTL the total width is equal to difference of the parent container width and
         // how much is the item offset to the left minus its offsetWidth
-        return item.offsetParent.offsetWidth - item.offsetLeft - item.offsetWidth;
+        if (!itemOffsetParent) {
+          return 0;
+        }
+        return itemOffsetParent.offsetWidth - item.offsetLeft - item.offsetWidth;
       }
-
-      // in LTR the width is equal to item.offsetLeft
-      return item.offsetLeft - this.offsetLeft;
+      return ltrWidthToItem;
     }
-
     /**
      * Overflows items that were not able to fit the container
      * @private
@@ -489,10 +372,8 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       let hiddenItems = 0;
       for (let index = 0; index < this._itemsCount; index++) {
         const item = this.items[index];
-
         // show item to determine if it will fit the new container size
         item.hidden = false;
-
         // container width to current item + item width (avatar)
         // used to determine whether the following items will fit the container or not
         let totalWidth = this._getWidthToItem(item) + item.offsetWidth;
@@ -504,7 +385,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
           break;
         }
       }
-
       // hide the items that did not fit the container size
       this._setHiddenItems(hiddenItems);
     }
@@ -532,7 +412,52 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       return this.ariaHaspopup;
     }
-  }
+  };
+  __decorate([(0, _property.default)({
+    type: _AvatarGroupType.default,
+    defaultValue: _AvatarGroupType.default.Group
+  })], AvatarGroup.prototype, "type", void 0);
+  __decorate([(0, _property.default)()], AvatarGroup.prototype, "ariaHaspopup", void 0);
+  __decorate([(0, _property.default)({
+    noAttribute: true
+  })], AvatarGroup.prototype, "_overflowButtonText", void 0);
+  __decorate([(0, _slot.default)({
+    type: HTMLElement,
+    "default": true
+  })], AvatarGroup.prototype, "items", void 0);
+  __decorate([(0, _slot.default)()], AvatarGroup.prototype, "overflowButton", void 0);
+  AvatarGroup = AvatarGroup_1 = __decorate([(0, _customElement.default)({
+    tag: "ui5-avatar-group",
+    renderer: _LitRenderer.default,
+    template: _AvatarGroupTemplate.default,
+    styles: _AvatarGroup.default,
+    dependencies: [_Button.default]
+  })
+  /**
+  * Fired when the component is activated either with a
+  * click/tap or by using the Enter or Space key.
+  * @param {HTMLElement} targetRef The DOM ref of the clicked item.
+  * @param {boolean} overflowButtonClicked indicates if the overflow button is clicked
+  * @event sap.ui.webc.main.AvatarGroup#click
+  * @public
+  * @since 1.0.0-rc.11
+  */, (0, _event.default)("click", {
+    detail: {
+      targetRef: {
+        type: HTMLElement
+      },
+      overflowButtonClicked: {
+        type: Boolean
+      }
+    }
+  })
+  /**
+  * Fired when the count of visible <code>ui5-avatar</code> elements in the
+  * component has changed
+  * @event sap.ui.webc.main.AvatarGroup#overflow
+  * @public
+  * @since 1.0.0-rc.13
+  */, (0, _event.default)("overflow")], AvatarGroup);
   AvatarGroup.define();
   var _default = AvatarGroup;
   _exports.default = _default;

package/src/sap/ui/webc/main/thirdparty/Badge.js

@@ -1,4 +1,4 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/util/isDefaultSlotProvided", "./generated/templates/BadgeTemplate.lit", "./generated/i18n/i18n-defaults", "./generated/themes/Badge.css"], function (_exports, _UI5Element, _LitRenderer, _i18nBundle, _isDefaultSlotProvided, _BadgeTemplate, _i18nDefaults, _Badge) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/util/willShowContent", "./generated/templates/BadgeTemplate.lit", "./generated/i18n/i18n-defaults", "./generated/themes/Badge.css"], function (_exports, _UI5Element, _customElement, _property, _slot, _LitRenderer, _i18nBundle, _willShowContent, _BadgeTemplate, _i18nDefaults, _Badge) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -6,77 +6,22 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   });
   _exports.default = void 0;
   _UI5Element = _interopRequireDefault(_UI5Element);
+  _customElement = _interopRequireDefault(_customElement);
+  _property = _interopRequireDefault(_property);
+  _slot = _interopRequireDefault(_slot);
   _LitRenderer = _interopRequireDefault(_LitRenderer);
-  _isDefaultSlotProvided = _interopRequireDefault(_isDefaultSlotProvided);
+  _willShowContent = _interopRequireDefault(_willShowContent);
   _BadgeTemplate = _interopRequireDefault(_BadgeTemplate);
   _Badge = _interopRequireDefault(_Badge);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-  // Template
-
-  // Styles
-
-  /**
-   * @public
-   */
-  const metadata = {
-    tag: "ui5-badge",
-    languageAware: true,
-    properties: /** @lends sap.ui.webcomponents.main.Badge.prototype */{
-      /**
-       * Defines the color scheme of the component.
-       * There are 10 predefined schemes. Each scheme applies different values for the <code>background-color</code> and <code>border-color</code>.
-       * To use one you can set a number from <code>"1"</code> to <code>"10"</code>. The <code>colorScheme</code> <code>"1"</code> will be set by default.
-       * <br><br>
-       * <b>Note:</b> Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.
-       * @type {string}
-       * @defaultvalue "1"
-       * @public
-       */
-      colorScheme: {
-        type: String,
-        defaultValue: "1"
-      },
-      /**
-       * Defines if the badge has an icon.
-       * @private
-       */
-      _hasIcon: {
-        type: Boolean
-      },
-      /**
-       * Defines if the badge has only an icon (and no text).
-       * @private
-       */
-      _iconOnly: {
-        type: Boolean
-      }
-    },
-    managedSlots: true,
-    slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */{
-      /**
-       * Defines the text of the component.
-       * <br><b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
-       *
-       * @type {Node[]}
-       * @slot
-       * @public
-       */
-      "default": {
-        type: Node
-      },
-      /**
-       * Defines the icon to be displayed in the component.
-       *
-       * @type {sap.ui.webcomponents.main.IIcon}
-       * @slot
-       * @public
-       */
-      icon: {
-        type: HTMLElement
-      }
-    }
+  var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
-
+  var Badge_1;
   /**
    * @class
    * <h3 class="comment-api-title">Overview</h3>
@@ -97,34 +42,22 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    *
    * @constructor
    * @author SAP SE
-   * @alias sap.ui.webcomponents.main.Badge
-   * @extends sap.ui.webcomponents.base.UI5Element
+   * @alias sap.ui.webc.main.Badge
+   * @extends sap.ui.webc.base.UI5Element
    * @tagname ui5-badge
    * @since 0.12.0
    * @public
    */
-  class Badge extends _UI5Element.default {
-    static get metadata() {
-      return metadata;
-    }
-    static get render() {
-      return _LitRenderer.default;
-    }
-    static get template() {
-      return _BadgeTemplate.default;
-    }
-    static get styles() {
-      return _Badge.default;
-    }
+  let Badge = Badge_1 = class Badge extends _UI5Element.default {
     static async onDefine() {
-      Badge.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
+      Badge_1.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
     }
     onBeforeRendering() {
       this._hasIcon = this.hasIcon;
       this._iconOnly = this.iconOnly;
     }
     get hasText() {
-      return (0, _isDefaultSlotProvided.default)(this);
+      return (0, _willShowContent.default)(this.text);
     }
     get hasIcon() {
       return !!this.icon.length;
@@ -133,9 +66,30 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return this.hasIcon && !this.hasText;
     }
     get badgeDescription() {
-      return Badge.i18nBundle.getText(_i18nDefaults.BADGE_DESCRIPTION);
+      return Badge_1.i18nBundle.getText(_i18nDefaults.BADGE_DESCRIPTION);
     }
-  }
+  };
+  __decorate([(0, _property.default)({
+    defaultValue: "1"
+  })], Badge.prototype, "colorScheme", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Badge.prototype, "_hasIcon", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], Badge.prototype, "_iconOnly", void 0);
+  __decorate([(0, _slot.default)({
+    type: Node,
+    "default": true
+  })], Badge.prototype, "text", void 0);
+  __decorate([(0, _slot.default)()], Badge.prototype, "icon", void 0);
+  Badge = Badge_1 = __decorate([(0, _customElement.default)({
+    tag: "ui5-badge",
+    languageAware: true,
+    renderer: _LitRenderer.default,
+    template: _BadgeTemplate.default,
+    styles: _Badge.default
+  })], Badge);
   Badge.define();
   var _default = Badge;
   _exports.default = _default;