@ui5/webcomponents 0.0.0-453158269 → 0.0.0-4738ea0dc

package/src/{AvatarGroup.js → AvatarGroup.ts}

@@ -3,11 +3,21 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.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 {
 	isEnter,
 	isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import Button from "./Button.js";
+import type Avatar from "./Avatar";
+import AvatarSize from "./types/AvatarSize.js";
+import AvatarGroupType from "./types/AvatarGroupType.js";
+import AvatarColorScheme from "./types/AvatarColorScheme.js";
 
 import {
 	AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL,
@@ -17,15 +27,11 @@ import {
 	AVATAR_GROUP_MOVE,
 } from "./generated/i18n/i18n-defaults.js";
 
-// Template
-import AvatarGroupTemplate from "./generated/templates/AvatarGroupTemplate.lit.js";
 // Styles
 import AvatarGroupCss from "./generated/themes/AvatarGroup.css.js";
 
-import Button from "./Button.js";
-import AvatarSize from "./types/AvatarSize.js";
-import AvatarGroupType from "./types/AvatarGroupType.js";
-import AvatarColorScheme from "./types/AvatarColorScheme.js";
+// Template
+import AvatarGroupTemplate from "./generated/templates/AvatarGroupTemplate.lit.js";
 
 const OVERFLOW_BTN_CLASS = "ui5-avatar-group-overflow-btn";
 const AVATAR_GROUP_OVERFLOW_BTN_SELECTOR = `.${OVERFLOW_BTN_CLASS}`;
@@ -54,110 +60,9 @@ const offsets = {
 	},
 };
 
-/**
- * @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.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: {},
-	},
+type AvatarGroupClickEventDetail = {
+	targetRef: HTMLElement,
+	overflowButtonClicked: boolean,
 };
 
 /**
@@ -227,13 +132,119 @@ const metadata = {
  *
  * @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
  */
+
+@customElement({
+	tag: "ui5-avatar-group",
+	renderer: litRender,
+	template: AvatarGroupTemplate,
+	styles: AvatarGroupCss,
+	dependencies: [Button],
+})
+/**
+* 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
+*/
+@event("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
+*/
+@event("overflow")
+
 class AvatarGroup extends UI5Element {
+	/**
+	 * 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 {sap.ui.webc.main.types.AvatarGroupType}
+	 * @name sap.ui.webc.main.AvatarGroup.prototype.type
+	 * @defaultValue "Group"
+	 * @public
+	 */
+	@property({ type: AvatarGroupType, defaultValue: AvatarGroupType.Group })
+	type!: AvatarGroupType;
+
+	/**
+	 * 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
+	 * @name sap.ui.webc.main.AvatarGroup.prototype.ariaHaspopup
+	 * @since 1.0.0-rc.15
+	 * @protected
+	 */
+	@property()
+	ariaHaspopup!: string;
+
+	/**
+	 * @private
+	 */
+	@property({ noAttribute: true })
+	_overflowButtonText!: string;
+
+	/**
+	 * 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.webc.main.IAvatar[]}
+	 * @name sap.ui.webc.main.AvatarGroup.prototype.default
+	 * @slot items
+	 * @public
+	 */
+	@slot({ type: HTMLElement, "default": true })
+	items!: Array<Avatar>;
+
+	/**
+	 * 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}
+	 * @name sap.ui.webc.main.AvatarGroup.prototype.overflowButton
+	 * @slot overflowButton
+	 * @public
+	 * @since 1.0.0-rc.13
+	 */
+	@slot()
+	overflowButton!: Array<Button>;
+
+	static i18nBundle: I18nBundle;
+	_onResizeHandler: () => void;
+	_colorIndex: number;
+	_hiddenItems: number;
+	_itemNavigation: ItemNavigation;
+
 	constructor() {
 		super();
 
@@ -242,34 +253,11 @@ class AvatarGroup extends UI5Element {
 				return this._isGroup ? [] : this.items.slice(0, this._hiddenStartIndex);
 			},
 		});
-
 		this._colorIndex = 0;
 		this._hiddenItems = 0;
 		this._onResizeHandler = this._onResize.bind(this);
 	}
 
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return AvatarGroupTemplate;
-	}
-
-	static get styles() {
-		return AvatarGroupCss;
-	}
-
-	static get dependencies() {
-		return [
-			Button,
-		];
-	}
-
 	static async onDefine() {
 		AvatarGroup.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
@@ -277,8 +265,9 @@ class AvatarGroup extends UI5Element {
 	/**
 	 * 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() {
@@ -288,7 +277,8 @@ class AvatarGroup extends UI5Element {
 	/**
 	 * 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
 	 */
@@ -360,7 +350,7 @@ class AvatarGroup extends UI5Element {
 	}
 
 	get _overflowButton() {
-		return this.shadowRoot.querySelector(AVATAR_GROUP_OVERFLOW_BTN_SELECTOR);
+		return this.shadowRoot!.querySelector<Button>(AVATAR_GROUP_OVERFLOW_BTN_SELECTOR);
 	}
 
 	/**
@@ -374,15 +364,21 @@ class AvatarGroup extends UI5Element {
 	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];
+			let item: HTMLElement = 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;
+			return this.effectiveDir === "rtl" ? this._getWidthToItem(item) : ltrEffectiveWidth;
 		}
 
 		return button.offsetWidth;
@@ -429,53 +425,55 @@ class AvatarGroup extends UI5Element {
 		this._overflowItems();
 	}
 
-	_onkeydown(event) {
+	_onkeydown(e: KeyboardEvent) {
 		// 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 (isEnter(event)) {
-				this._fireGroupEvent(event.target);
-			} else if (isSpace(event)) {
+			if (isEnter(e)) {
+				this._fireGroupEvent(e.target as HTMLElement);
+			} else if (isSpace(e)) {
 				// prevent scrolling
-				event.preventDefault();
+				e.preventDefault();
 			}
 		}
 	}
 
-	_onkeyup(event) {
-		if (!event.shiftKey && isSpace(event) && this._isGroup) {
-			this._fireGroupEvent(event.target);
-			event.preventDefault();
+	_onkeyup(e: KeyboardEvent) {
+		if (!e.shiftKey && isSpace(e) && this._isGroup) {
+			this._fireGroupEvent(e.target as HTMLElement);
+			e.preventDefault();
 		}
 	}
 
-	_fireGroupEvent(targetRef) {
+	_fireGroupEvent(targetRef: HTMLElement) {
 		const isOverflowButtonClicked = targetRef.classList.contains(OVERFLOW_BTN_CLASS) || targetRef === this._customOverflowButton;
 
-		this.fireEvent("click", {
+		this.fireEvent<AvatarGroupClickEventDetail>("click", {
 			targetRef,
 			overflowButtonClicked: isOverflowButtonClicked,
 		});
 	}
 
-	_onClick(event) {
+	_onClick(e: MouseEvent) {
+		const target = e.target as HTMLElement;
 		// 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: MouseEvent) {
+		const target = e.target as HTMLElement;
 		// 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);
 		}
 	}
 
@@ -485,7 +483,6 @@ class AvatarGroup extends UI5Element {
 	 * @private
 	 */
 	_prepareAvatars() {
-		const RTL = this.effectiveDir === "rtl";
 		this._colorIndex = 0;
 
 		this.items.forEach((avatar, index) => {
@@ -494,20 +491,19 @@ class AvatarGroup extends UI5Element {
 
 			if (!avatar.getAttribute("_color-scheme")) {
 				// AvatarGroup respects colors set to ui5-avatar
-				avatar.setAttribute("_color-scheme", AvatarColorScheme[`Accent${colorIndex}`]);
+				avatar.setAttribute("_color-scheme", AvatarColorScheme[`Accent${colorIndex}` as keyof typeof AvatarColorScheme]);
 			}
 
 			// 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: FocusEvent) {
+		this._itemNavigation.setCurrentItem(e.target as Avatar);
 	}
 
 	/**
@@ -516,17 +512,24 @@ class AvatarGroup extends UI5Element {
 	 * @private
 	 * @param {HTMLElement} item
 	 */
-	_getWidthToItem(item) {
+	_getWidthToItem(item: HTMLElement) {
 		const isRTL = this.effectiveDir === "rtl";
+		const ltrWidthToItem = item.offsetLeft - this.offsetLeft;
 
 		if (isRTL) {
+			const itemOffsetParent = item.offsetParent as HTMLElement;
+
 			// 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;
+		return ltrWidthToItem;
 	}
 
 	/**
@@ -542,7 +545,7 @@ class AvatarGroup extends UI5Element {
 		let hiddenItems = 0;
 
 		for (let index = 0; index < this._itemsCount; index++) {
-			const item = this.items[index];
+			const item: Avatar = this.items[index];
 
 			// show item to determine if it will fit the new container size
 			item.hidden = false;
@@ -573,7 +576,7 @@ class AvatarGroup extends UI5Element {
 		return this._colorIndex;
 	}
 
-	_setHiddenItems(hiddenItems) {
+	_setHiddenItems(hiddenItems: number) {
 		const shouldFireEvent = this._hiddenItems !== hiddenItems;
 
 		this._hiddenItems = hiddenItems;
@@ -601,3 +604,6 @@ class AvatarGroup extends UI5Element {
 AvatarGroup.define();
 
 export default AvatarGroup;
+export type {
+	AvatarGroupClickEventDetail,
+};

package/src/Badge.ts

@@ -0,0 +1,133 @@
+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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
+
+// Template
+import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
+
+import { BADGE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import badgeCss from "./generated/themes/Badge.css.js";
+
+/**
+ * @class
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-badge</code> is a small non-interactive component which contains text information and color chosen from a list of predefined color schemes.
+ * It serves the purpose to attract the user attention to some piece of information (state, quantity, condition, etc.).
+ *
+ * <h3>Usage Guidelines</h3>
+ * <ul>
+ * <li>If the text is longer than the width of the component, it doesn’t wrap, it shows ellipsis.</li>
+ * <li>When truncated, the full text is not visible, therefore, it’s recommended to make more space for longer texts to be fully displayed.</li>
+ * <li>Colors are not semantic and have no visual representation in High Contrast Black (sap_belize_hcb) theme.</li>
+ * </ul>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Badge";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.Badge
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-badge
+ * @since 0.12.0
+ * @public
+ */
+@customElement({
+	tag: "ui5-badge",
+	languageAware: true,
+	renderer: litRender,
+	template: BadgeTemplate,
+	styles: badgeCss,
+})
+class Badge extends UI5Element {
+	/**
+	 * 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}
+	 * @name sap.ui.webc.main.Badge.prototype.colorScheme
+	 * @defaultvalue "1"
+	 * @public
+	 */
+	@property({ defaultValue: "1" })
+	colorScheme!: string;
+
+	/**
+	 * Defines if the badge has an icon.
+	 * @private
+	 */
+	@property({ type: Boolean })
+	_hasIcon!: boolean;
+
+	/**
+	 * Defines if the badge has only an icon (and no text).
+	 * @private
+	 */
+	@property({ type: Boolean })
+	_iconOnly!: boolean;
+
+	/**
+	 * 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[]}
+	 * @name sap.ui.webc.main.Badge.prototype.default
+	 * @slot
+	 * @public
+	 */
+	@slot({ type: Node, "default": true })
+	text!: Array<Node>;
+
+	/**
+	 * Defines the icon to be displayed in the component.
+	 *
+	 * @type {sap.ui.webc.main.IIcon[]}
+	 * @name sap.ui.webc.main.Badge.prototype.icon
+	 * @slot
+	 * @public
+	 */
+	@slot()
+	icon!: Array<HTMLElement>;
+
+	static i18nBundle: I18nBundle;
+
+	static async onDefine() {
+		Badge.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
+
+	onBeforeRendering() {
+		this._hasIcon = this.hasIcon;
+		this._iconOnly = this.iconOnly;
+	}
+
+	get hasText() {
+		return willShowContent(this.text);
+	}
+
+	get hasIcon() {
+		return !!this.icon.length;
+	}
+
+	get iconOnly() {
+		return this.hasIcon && !this.hasText;
+	}
+
+	get badgeDescription() {
+		return Badge.i18nBundle.getText(BADGE_DESCRIPTION);
+	}
+}
+
+Badge.define();
+
+export default Badge;