@ui5/webcomponents 0.0.0-ca2fa23d3 → 0.0.0-cad512aa3

package/dist/AvatarGroup.js

@@ -0,0 +1,465 @@
+var __decorate = (this && this.__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;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+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 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 AvatarSize from "./types/AvatarSize.js";
+import AvatarGroupType from "./types/AvatarGroupType.js";
+import AvatarColorScheme from "./types/AvatarColorScheme.js";
+import { AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL, AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL, AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL, AVATAR_GROUP_ARIA_LABEL_GROUP, AVATAR_GROUP_MOVE, } from "./generated/i18n/i18n-defaults.js";
+// Styles
+import AvatarGroupCss from "./generated/themes/AvatarGroup.css.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}`;
+// based on RTL/LTR a margin-left/right is set respectfully
+const offsets = {
+    [AvatarSize.XS]: {
+        [AvatarGroupType.Individual]: "0.0625rem",
+        [AvatarGroupType.Group]: "-0.75rem",
+    },
+    [AvatarSize.S]: {
+        [AvatarGroupType.Individual]: "0.125rem",
+        [AvatarGroupType.Group]: "-1.25rem",
+    },
+    [AvatarSize.M]: {
+        [AvatarGroupType.Individual]: "0.125rem",
+        [AvatarGroupType.Group]: "-1.625rem",
+    },
+    [AvatarSize.L]: {
+        [AvatarGroupType.Individual]: "0.125rem",
+        [AvatarGroupType.Group]: " -2rem",
+    },
+    [AvatarSize.XL]: {
+        [AvatarGroupType.Individual]: "0.25rem",
+        [AvatarGroupType.Group]: "-2.75rem",
+    },
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * Displays a group of avatars arranged horizontally. It is useful to visually
+ * showcase a group of related avatars, such as, project team members or employees.
+ *
+ * The component allows you to display the avatars in different sizes,
+ * depending on your use case.
+ *
+ * The <code>AvatarGroup</code> component has two group types:
+ * <ul>
+ * <li><code>Group</code> type: The avatars are displayed as partially overlapped on
+ * top of each other and the entire group has one click/tap area.</li>
+ * <li><code>Individual</code> type: The avatars are displayed side-by-side and each
+ * avatar has its own click/tap area.</li>
+ * </ul>
+ *
+ * <h3>Responsive Behavior</h3>
+ *
+ * When the available space is less than the width required to display all avatars,
+ * an overflow visualization appears as a button placed at the end with the same shape
+ * and size as the avatars. The visualization displays the number of avatars that have overflowed
+ * and are not currently visible.
+ *
+ * <h3>Usage</h3>
+ *
+ * Use the <code>AvatarGroup</code> if:
+ * <ul>
+ * <li>You want to display a group of avatars.</li>
+ * <li>You want to display several avatars which have something in common.</li>
+ * </ul>
+ *
+ * Do not use the <code>AvatarGroup</code> if:
+ * <ul>
+ * <li>You want to display a single avatar.</li>
+ * <li>You want to display a gallery for simple images.</li>
+ * <li>You want to use it for other visual content than avatars.</li>
+ * </ul>
+ *
+ * <h3>Keyboard Handling</h3>
+ * The component provides advanced keyboard handling.
+ * When focused, the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ * <br>
+ * - <code>type</code> Individual:
+ * <br>
+ * <ul>
+ * <li>[TAB] - Move focus to the overflow button</li>
+ * <li>[LEFT] - Navigate one avatar to the left</li>
+ * <li>[RIGHT] - Navigate one avatar to the right</li>
+ * <li>[HOME] - Navigate to the first avatar</li>
+ * <li>[END] - Navigate to the last avatar</li>
+ * <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li>
+ * </ul>
+ * <br>
+ * - <code>type</code> Group:
+ * <br>
+ * <ul>
+ * <li>[TAB] - Move focus to the next interactive element after the component</li>
+ * <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li>
+ * </ul>
+ * <br>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.AvatarGroup
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-avatar-group
+ * @since 1.0.0-rc.11
+ * @public
+ */
+let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
+    constructor() {
+        super();
+        this._itemNavigation = new ItemNavigation(this, {
+            getItemsCallback: () => {
+                return this._isGroup ? [] : this.items.slice(0, this._hiddenStartIndex);
+            },
+        });
+        this._colorIndex = 0;
+        this._hiddenItems = 0;
+        this._onResizeHandler = this._onResize.bind(this);
+    }
+    static async onDefine() {
+        AvatarGroup_1.i18nBundle = await 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[]}
+     * @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 {sap.ui.webc.main.types.AvatarColorScheme[]}
+     * @name sap.ui.webc.main.AvatarGroup.prototype.colorScheme
+     * @defaultValue []
+     * @public
+     */
+    get colorScheme() {
+        return this.items.map(avatar => avatar._effectiveBackgroundColor);
+    }
+    get _customOverflowButton() {
+        return this.overflowButton.length ? this.overflowButton[0] : undefined;
+    }
+    get _ariaLabelText() {
+        const hiddenItemsCount = this.hiddenItems.length;
+        const typeLabelKey = this._isGroup ? AVATAR_GROUP_ARIA_LABEL_GROUP : AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL;
+        // avatar type label
+        let text = AvatarGroup_1.i18nBundle.getText(typeLabelKey);
+        // add displayed-hidden avatars label
+        text += ` ${AvatarGroup_1.i18nBundle.getText(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_1.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL)}`;
+        }
+        else {
+            // the container role is "group", add the "how to navigate" message
+            text += ` ${AvatarGroup_1.i18nBundle.getText(AVATAR_GROUP_MOVE)}`;
+        }
+        return text;
+    }
+    get _overflowButtonAriaLabelText() {
+        return this._isGroup ? undefined : AvatarGroup_1.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL);
+    }
+    get _containerAriaHasPopup() {
+        return this._isGroup ? this._getAriaHasPopup() : undefined;
+    }
+    get _overflowButtonAccAttributes() {
+        return {
+            hasPopup: this._isGroup ? undefined : this._getAriaHasPopup(),
+        };
+    }
+    get _role() {
+        return this._isGroup ? "button" : "group";
+    }
+    get _hiddenStartIndex() {
+        return this._itemsCount - this._hiddenItems;
+    }
+    get _overflowBtnHidden() {
+        return this._hiddenItems === 0;
+    }
+    get _isGroup() {
+        return this.type === AvatarGroupType.Group;
+    }
+    get _itemsCount() {
+        return this.items.length;
+    }
+    get _groupTabIndex() {
+        return this._isGroup ? "0" : "-1";
+    }
+    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
+     *
+     * 1) In case of "Group", (LTR/RTL aware) button width is qual to second item offset left/right
+     * 2) In case of "Individual" group type width is directly taken from button element
+     * @private
+     */
+    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) : ltrEffectiveWidth;
+        }
+        return button.offsetWidth;
+    }
+    get firstAvatarSize() {
+        return this.items[0].size;
+    }
+    get classes() {
+        return {
+            overflowButton: {
+                "ui5-avatar-group-overflow-btn": true,
+                "ui5-avatar-group-overflow-btn-xs": this.firstAvatarSize === "XS",
+                "ui5-avatar-group-overflow-btn-s": this.firstAvatarSize === "S",
+                "ui5-avatar-group-overflow-btn-m": this.firstAvatarSize === "M",
+                "ui5-avatar-group-overflow-btn-l": this.firstAvatarSize === "L",
+                "ui5-avatar-group-overflow-btn-xl": this.firstAvatarSize === "XL",
+            },
+        };
+    }
+    onAfterRendering() {
+        this._overflowItems();
+    }
+    onBeforeRendering() {
+        if (this._customOverflowButton) {
+            this._customOverflowButton.nonInteractive = this._isGroup;
+        }
+        this._prepareAvatars();
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._onResizeHandler);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._onResizeHandler);
+    }
+    _onResize() {
+        this._overflowItems();
+    }
+    _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 (isEnter(e)) {
+                this._fireGroupEvent(e.target);
+            }
+            else if (isSpace(e)) {
+                // prevent scrolling
+                e.preventDefault();
+            }
+        }
+    }
+    _onkeyup(e) {
+        if (!e.shiftKey && isSpace(e) && this._isGroup) {
+            this._fireGroupEvent(e.target);
+            e.preventDefault();
+        }
+    }
+    _fireGroupEvent(targetRef) {
+        const isOverflowButtonClicked = targetRef.classList.contains(OVERFLOW_BTN_CLASS) || targetRef === this._customOverflowButton;
+        this.fireEvent("click", {
+            targetRef,
+            overflowButtonClicked: isOverflowButtonClicked,
+        });
+    }
+    _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 = target.hasAttribute("ui5-button");
+        e.stopPropagation();
+        if (this._isGroup || isButton) {
+            this._fireGroupEvent(target);
+        }
+    }
+    _onUI5Click(e) {
+        const target = e.target;
+        // when noConflict=true only ui5-avatar will fire ui5-click event
+        const isAvatar = target.hasAttribute("ui5-avatar");
+        e.stopPropagation();
+        if (isAvatar) {
+            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() {
+        this._colorIndex = 0;
+        this.items.forEach((avatar, index) => {
+            const colorIndex = this._getNextBackgroundColor();
+            avatar.interactive = !this._isGroup;
+            if (!avatar.getAttribute("_color-scheme")) {
+                // AvatarGroup respects colors set to ui5-avatar
+                avatar.setAttribute("_color-scheme", AvatarColorScheme[`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 the browser automatically sets left or right margin to avatars
+                avatar.style.marginInlineEnd = offsets[avatar._effectiveSize][this.type];
+            }
+        });
+    }
+    _onfocusin(e) {
+        this._itemNavigation.setCurrentItem(e.target);
+    }
+    /**
+     * Returns the total width to item excluding the item width
+     * RTL/LTR aware
+     * @private
+     * @param {HTMLElement} item
+     */
+    _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
+            if (!itemOffsetParent) {
+                return 0;
+            }
+            return itemOffsetParent.offsetWidth - item.offsetLeft - item.offsetWidth;
+        }
+        return ltrWidthToItem;
+    }
+    /**
+     * Overflows items that were not able to fit the container
+     * @private
+     */
+    _overflowItems() {
+        if (this.items.length < 2) {
+            // no need to overflow avatars
+            return;
+        }
+        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;
+            if (index !== this._itemsCount - 1 || this._customOverflowButton) {
+                totalWidth += this._overflowButtonEffectiveWidth;
+            }
+            if (totalWidth > this.offsetWidth) {
+                hiddenItems = this._itemsCount - index;
+                break;
+            }
+        }
+        // hide the items that did not fit the container size
+        this._setHiddenItems(hiddenItems);
+    }
+    _getNextBackgroundColor() {
+        // counter is to automatically assign background colors to avatars, `Accent10` is the highest color value
+        if (++this._colorIndex > 10) {
+            this._colorIndex = 1;
+        }
+        return this._colorIndex;
+    }
+    _setHiddenItems(hiddenItems) {
+        const shouldFireEvent = this._hiddenItems !== hiddenItems;
+        this._hiddenItems = hiddenItems;
+        this.items.forEach((item, index) => {
+            item.hidden = index >= this._hiddenStartIndex;
+        });
+        this._overflowButtonText = `+${hiddenItems > 99 ? 99 : hiddenItems}`;
+        if (shouldFireEvent) {
+            this.fireEvent("overflow");
+        }
+    }
+    _getAriaHasPopup() {
+        if (this.ariaHaspopup === "") {
+            return;
+        }
+        return this.ariaHaspopup;
+    }
+};
+__decorate([
+    property({ type: AvatarGroupType, defaultValue: AvatarGroupType.Group })
+], AvatarGroup.prototype, "type", void 0);
+__decorate([
+    property()
+], AvatarGroup.prototype, "ariaHaspopup", void 0);
+__decorate([
+    property({ noAttribute: true })
+], AvatarGroup.prototype, "_overflowButtonText", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], AvatarGroup.prototype, "items", void 0);
+__decorate([
+    slot()
+], AvatarGroup.prototype, "overflowButton", void 0);
+AvatarGroup = AvatarGroup_1 = __decorate([
+    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")
+], AvatarGroup);
+AvatarGroup.define();
+export default AvatarGroup;
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../src/AvatarGroup.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 ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.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.js\";\n\nimport {\n\tisEnter,\n\tisSpace,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport Button from \"./Button.js\";\nimport type Avatar from \"./Avatar\";\nimport AvatarSize from \"./types/AvatarSize.js\";\nimport AvatarGroupType from \"./types/AvatarGroupType.js\";\nimport AvatarColorScheme from \"./types/AvatarColorScheme.js\";\n\nimport {\n\tAVATAR_GROUP_DISPLAYED_HIDDEN_LABEL,\n\tAVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL,\n\tAVATAR_GROUP_ARIA_LABEL_INDIVIDUAL,\n\tAVATAR_GROUP_ARIA_LABEL_GROUP,\n\tAVATAR_GROUP_MOVE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AvatarGroupCss from \"./generated/themes/AvatarGroup.css.js\";\n\n// Template\nimport AvatarGroupTemplate from \"./generated/templates/AvatarGroupTemplate.lit.js\";\n\nconst OVERFLOW_BTN_CLASS = \"ui5-avatar-group-overflow-btn\";\nconst AVATAR_GROUP_OVERFLOW_BTN_SELECTOR = `.${OVERFLOW_BTN_CLASS}`;\n\n// based on RTL/LTR a margin-left/right is set respectfully\nconst offsets = {\n\t[AvatarSize.XS]: {\n\t\t[AvatarGroupType.Individual]: \"0.0625rem\",\n\t\t[AvatarGroupType.Group]: \"-0.75rem\",\n\t},\n\t[AvatarSize.S]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \"-1.25rem\",\n\t},\n\t[AvatarSize.M]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \"-1.625rem\",\n\t},\n\t[AvatarSize.L]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \" -2rem\",\n\t},\n\t[AvatarSize.XL]: {\n\t\t[AvatarGroupType.Individual]: \"0.25rem\",\n\t\t[AvatarGroupType.Group]: \"-2.75rem\",\n\t},\n};\n\ntype AvatarGroupClickEventDetail = {\n\ttargetRef: HTMLElement,\n\toverflowButtonClicked: boolean,\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * Displays a group of avatars arranged horizontally. It is useful to visually\n * showcase a group of related avatars, such as, project team members or employees.\n *\n * The component allows you to display the avatars in different sizes,\n * depending on your use case.\n *\n * The <code>AvatarGroup</code> component has two group types:\n * <ul>\n * <li><code>Group</code> type: The avatars are displayed as partially overlapped on\n * top of each other and the entire group has one click/tap area.</li>\n * <li><code>Individual</code> type: The avatars are displayed side-by-side and each\n * avatar has its own click/tap area.</li>\n * </ul>\n *\n * <h3>Responsive Behavior</h3>\n *\n * When the available space is less than the width required to display all avatars,\n * an overflow visualization appears as a button placed at the end with the same shape\n * and size as the avatars. The visualization displays the number of avatars that have overflowed\n * and are not currently visible.\n *\n * <h3>Usage</h3>\n *\n * Use the <code>AvatarGroup</code> if:\n * <ul>\n * <li>You want to display a group of avatars.</li>\n * <li>You want to display several avatars which have something in common.</li>\n * </ul>\n *\n * Do not use the <code>AvatarGroup</code> if:\n * <ul>\n * <li>You want to display a single avatar.</li>\n * <li>You want to display a gallery for simple images.</li>\n * <li>You want to use it for other visual content than avatars.</li>\n * </ul>\n *\n * <h3>Keyboard Handling</h3>\n * The component provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n * <br>\n * - <code>type</code> Individual:\n * <br>\n * <ul>\n * <li>[TAB] - Move focus to the overflow button</li>\n * <li>[LEFT] - Navigate one avatar to the left</li>\n * <li>[RIGHT] - Navigate one avatar to the right</li>\n * <li>[HOME] - Navigate to the first avatar</li>\n * <li>[END] - Navigate to the last avatar</li>\n * <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li>\n * </ul>\n * <br>\n * - <code>type</code> Group:\n * <br>\n * <ul>\n * <li>[TAB] - Move focus to the next interactive element after the component</li>\n * <li>[SPACE],[ENTER],[RETURN] - Trigger <code>ui5-click</code> event</li>\n * </ul>\n * <br>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.AvatarGroup\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-avatar-group\n * @since 1.0.0-rc.11\n * @public\n */\n\n@customElement({\n\ttag: \"ui5-avatar-group\",\n\trenderer: litRender,\n\ttemplate: AvatarGroupTemplate,\n\tstyles: AvatarGroupCss,\n\tdependencies: [Button],\n})\n/**\n* Fired when the component is activated either with a\n* click/tap or by using the Enter or Space key.\n* @param {HTMLElement} targetRef The DOM ref of the clicked item.\n* @param {boolean} overflowButtonClicked indicates if the overflow button is clicked\n* @event sap.ui.webc.main.AvatarGroup#click\n* @public\n* @since 1.0.0-rc.11\n*/\n@event(\"click\", {\n\tdetail: {\n\t\ttargetRef: { type: HTMLElement },\n\t\toverflowButtonClicked: { type: Boolean },\n\t},\n})\n\n/**\n* Fired when the count of visible <code>ui5-avatar</code> elements in the\n* component has changed\n* @event sap.ui.webc.main.AvatarGroup#overflow\n* @public\n* @since 1.0.0-rc.13\n*/\n@event(\"overflow\")\n\nclass AvatarGroup extends UI5Element {\n\t/**\n\t * Defines the mode of the <code>AvatarGroup</code>.\n\t * <br><br>\n\t * Available options are:\n\t * <ul>\n\t * <li><code>Group</code></li>\n\t * <li><code>Individual</code></li>\n\t * </ul>\n\t * @type {sap.ui.webc.main.types.AvatarGroupType}\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.type\n\t * @defaultValue \"Group\"\n\t * @public\n\t */\n\t@property({ type: AvatarGroupType, defaultValue: AvatarGroupType.Group })\n\ttype!: AvatarGroupType;\n\n\t/**\n\t * Defines the aria-haspopup value of the component on:\n\t * <br><br>\n\t * <ul>\n\t * <li> the whole container when <code>type</code> property is <code>Group</code></li>\n\t * <li> the default \"More\" overflow button when <code>type</code> is <code>Individual</code></li>\n\t * </ul>\n\t * <br><br>\n\t * @type String\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.ariaHaspopup\n\t * @since 1.0.0-rc.15\n\t * @protected\n\t */\n\t@property()\n\tariaHaspopup!: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\t_overflowButtonText!: string;\n\n\t/**\n\t * Defines the items of the component. Use the <code>ui5-avatar</code> component as an item.\n\t * <br><br>\n\t * <b>Note:</b> The UX guidelines recommends using avatars with \"Circle\" shape.\n\t * Moreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\n\t * as the built-in overflow action has \"Circle\" shape.\n\t * @type {sap.ui.webc.main.IAvatar[]}\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.default\n\t * @slot items\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array<Avatar>;\n\n\t/**\n\t * Defines the overflow button of the component.\n\t * <b>Note:</b> We recommend using the <code>ui5-button</code> component.\n\t * <br><br>\n\t * <b>Note:</b> If this slot is not used, the component will\n\t * display the built-in overflow button.\n\t * @type {HTMLElement}\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.overflowButton\n\t * @slot overflowButton\n\t * @public\n\t * @since 1.0.0-rc.13\n\t */\n\t@slot()\n\toverflowButton!: Array<Button>;\n\n\tstatic i18nBundle: I18nBundle;\n\t_onResizeHandler: () => void;\n\t_colorIndex: number;\n\t_hiddenItems: number;\n\t_itemNavigation: ItemNavigation;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._itemNavigation = new ItemNavigation(this, {\n\t\t\tgetItemsCallback: () => {\n\t\t\t\treturn this._isGroup ? [] : this.items.slice(0, this._hiddenStartIndex);\n\t\t\t},\n\t\t});\n\t\tthis._colorIndex = 0;\n\t\tthis._hiddenItems = 0;\n\t\tthis._onResizeHandler = this._onResize.bind(this);\n\t}\n\n\tstatic async onDefine() {\n\t\tAvatarGroup.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\t/**\n\t * Returns an array containing the <code>ui5-avatar</code> instances that are currently not displayed due to lack of space.\n\t * @readonly\n\t * @type {HTMLElement[]}\n\t * @defaultValue []\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.hiddenItems\n\t * @public\n\t */\n\tget hiddenItems() {\n\t\treturn this.items.slice(this._hiddenStartIndex);\n\t}\n\n\t/**\n\t * Returns an array containing the <code>AvatarColorScheme</code> values that correspond to the avatars in the component.\n\t * @readonly\n\t * @type {sap.ui.webc.main.types.AvatarColorScheme[]}\n\t * @name sap.ui.webc.main.AvatarGroup.prototype.colorScheme\n\t * @defaultValue []\n\t * @public\n\t */\n\tget colorScheme() {\n\t\treturn this.items.map(avatar => avatar._effectiveBackgroundColor);\n\t}\n\n\tget _customOverflowButton() {\n\t\treturn this.overflowButton.length ? this.overflowButton[0] : undefined;\n\t}\n\n\tget _ariaLabelText() {\n\t\tconst hiddenItemsCount = this.hiddenItems.length;\n\t\tconst typeLabelKey = this._isGroup ? AVATAR_GROUP_ARIA_LABEL_GROUP : AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL;\n\n\t\t// avatar type label\n\t\tlet text = AvatarGroup.i18nBundle.getText(typeLabelKey);\n\n\t\t// add displayed-hidden avatars label\n\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL, this._itemsCount - hiddenItemsCount, hiddenItemsCount)}`;\n\n\t\tif (this._isGroup) {\n\t\t\t// the container role is \"button\", add the message for complete list activation\n\t\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL)}`;\n\t\t} else {\n\t\t\t// the container role is \"group\", add the \"how to navigate\" message\n\t\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_MOVE)}`;\n\t\t}\n\n\t\treturn text;\n\t}\n\n\tget _overflowButtonAriaLabelText() {\n\t\treturn this._isGroup ? undefined : AvatarGroup.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL);\n\t}\n\n\tget _containerAriaHasPopup() {\n\t\treturn this._isGroup ? this._getAriaHasPopup() : undefined;\n\t}\n\n\tget _overflowButtonAccAttributes() {\n\t\treturn {\n\t\t\thasPopup: this._isGroup ? undefined : this._getAriaHasPopup(),\n\t\t};\n\t}\n\n\tget _role() {\n\t\treturn this._isGroup ? \"button\" : \"group\";\n\t}\n\n\tget _hiddenStartIndex() {\n\t\treturn this._itemsCount - this._hiddenItems;\n\t}\n\n\tget _overflowBtnHidden() {\n\t\treturn this._hiddenItems === 0;\n\t}\n\n\tget _isGroup() {\n\t\treturn this.type === AvatarGroupType.Group;\n\t}\n\n\tget _itemsCount() {\n\t\treturn this.items.length;\n\t}\n\n\tget _groupTabIndex() {\n\t\treturn this._isGroup ? \"0\" : \"-1\";\n\t}\n\n\tget _overflowButton() {\n\t\treturn this.shadowRoot!.querySelector<Button>(AVATAR_GROUP_OVERFLOW_BTN_SELECTOR);\n\t}\n\n\t/**\n\t * Return the effective overflow button width\n\t * Differences are that when in \"Group\" type the button is offset and overlaps the avatars\n\t *\n\t * 1) In case of \"Group\", (LTR/RTL aware) button width is qual to second item offset left/right\n\t * 2) In case of \"Individual\" group type width is directly taken from button element\n\t * @private\n\t */\n\tget _overflowButtonEffectiveWidth() {\n\t\tconst button = this._customOverflowButton ? this._customOverflowButton : this._overflowButton;\n\t\t// if in \"Group\" mode overflow button size is equal to the offset from second item\n\n\t\tif (!button) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tif (this._isGroup) {\n\t\t\tlet item: HTMLElement = this.items[1];\n\t\t\tconst ltrEffectiveWidth = item.offsetLeft - this.offsetLeft;\n\n\t\t\t// in some cases when second avatar is overflowed the offset of the button is the right one\n\t\t\tif (!item || item.hidden) {\n\t\t\t\titem = button;\n\t\t\t}\n\n\t\t\treturn this.effectiveDir === \"rtl\" ? this._getWidthToItem(item) : ltrEffectiveWidth;\n\t\t}\n\n\t\treturn button.offsetWidth;\n\t}\n\n\tget firstAvatarSize() {\n\t\treturn this.items[0].size;\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\toverflowButton: {\n\t\t\t\t\"ui5-avatar-group-overflow-btn\": true,\n\t\t\t\t\"ui5-avatar-group-overflow-btn-xs\": this.firstAvatarSize === \"XS\",\n\t\t\t\t\"ui5-avatar-group-overflow-btn-s\": this.firstAvatarSize === \"S\",\n\t\t\t\t\"ui5-avatar-group-overflow-btn-m\": this.firstAvatarSize === \"M\",\n\t\t\t\t\"ui5-avatar-group-overflow-btn-l\": this.firstAvatarSize === \"L\",\n\t\t\t\t\"ui5-avatar-group-overflow-btn-xl\": this.firstAvatarSize === \"XL\",\n\t\t\t},\n\t\t};\n\t}\n\n\tonAfterRendering() {\n\t\tthis._overflowItems();\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this._customOverflowButton) {\n\t\t\tthis._customOverflowButton.nonInteractive = this._isGroup;\n\t\t}\n\n\t\tthis._prepareAvatars();\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._onResizeHandler);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._onResizeHandler);\n\t}\n\n\t_onResize() {\n\t\tthis._overflowItems();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\t// when type is \"Individual\" the ui5-avatar and ui5-button both\n\t\t// fire \"click\" event when SPACE or ENTER are pressed and\n\t\t// AvatarGroup \"click\" is fired in their handlers (_onClick, _onUI5Click).\n\t\tif (this._isGroup) {\n\t\t\tif (isEnter(e)) {\n\t\t\t\tthis._fireGroupEvent(e.target as HTMLElement);\n\t\t\t} else if (isSpace(e)) {\n\t\t\t\t// prevent scrolling\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (!e.shiftKey && isSpace(e) && this._isGroup) {\n\t\t\tthis._fireGroupEvent(e.target as HTMLElement);\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_fireGroupEvent(targetRef: HTMLElement) {\n\t\tconst isOverflowButtonClicked = targetRef.classList.contains(OVERFLOW_BTN_CLASS) || targetRef === this._customOverflowButton;\n\n\t\tthis.fireEvent<AvatarGroupClickEventDetail>(\"click\", {\n\t\t\ttargetRef,\n\t\t\toverflowButtonClicked: isOverflowButtonClicked,\n\t\t});\n\t}\n\n\t_onClick(e: MouseEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\t// no matter the value of noConflict, the ui5-button and the group container (div) always fire a native click event\n\t\tconst isButton = target.hasAttribute(\"ui5-button\");\n\t\te.stopPropagation();\n\n\t\tif (this._isGroup || isButton) {\n\t\t\tthis._fireGroupEvent(target);\n\t\t}\n\t}\n\n\t_onUI5Click(e: MouseEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\t// when noConflict=true only ui5-avatar will fire ui5-click event\n\t\tconst isAvatar = target.hasAttribute(\"ui5-avatar\");\n\t\te.stopPropagation();\n\n\t\tif (isAvatar) {\n\t\t\tthis._fireGroupEvent(target);\n\t\t}\n\t}\n\n\t/**\n\t * Modifies avatars to the needs of avatar group properties. Respects already set size and background color.\n\t * Set the margins (offsets) based on RTL/LTR.\n\t * @private\n\t */\n\t_prepareAvatars() {\n\t\tthis._colorIndex = 0;\n\n\t\tthis.items.forEach((avatar, index) => {\n\t\t\tconst colorIndex = this._getNextBackgroundColor();\n\t\t\tavatar.interactive = !this._isGroup;\n\n\t\t\tif (!avatar.getAttribute(\"_color-scheme\")) {\n\t\t\t\t// AvatarGroup respects colors set to ui5-avatar\n\t\t\t\tavatar.setAttribute(\"_color-scheme\", AvatarColorScheme[`Accent${colorIndex}` as keyof typeof AvatarColorScheme]);\n\t\t\t}\n\n\t\t\t// last avatar should not be offset as it breaks the container width and focus styles are no set correctly\n\t\t\tif (index !== this._itemsCount - 1 || this._customOverflowButton) {\n\t\t\t\t// based on RTL the browser automatically sets left or right margin to avatars\n\t\t\t\tavatar.style.marginInlineEnd = offsets[avatar._effectiveSize][this.type];\n\t\t\t}\n\t\t});\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tthis._itemNavigation.setCurrentItem(e.target as Avatar);\n\t}\n\n\t/**\n\t * Returns the total width to item excluding the item width\n\t * RTL/LTR aware\n\t * @private\n\t * @param {HTMLElement} item\n\t */\n\t_getWidthToItem(item: HTMLElement) {\n\t\tconst isRTL = this.effectiveDir === \"rtl\";\n\t\tconst ltrWidthToItem = item.offsetLeft - this.offsetLeft;\n\n\t\tif (isRTL) {\n\t\t\tconst itemOffsetParent = item.offsetParent as HTMLElement;\n\n\t\t\t// in RTL the total width is equal to difference of the parent container width and\n\t\t\t// how much is the item offset to the left minus its offsetWidth\n\n\t\t\tif (!itemOffsetParent) {\n\t\t\t\treturn 0;\n\t\t\t}\n\n\t\t\treturn itemOffsetParent.offsetWidth - item.offsetLeft - item.offsetWidth;\n\t\t}\n\n\t\treturn ltrWidthToItem;\n\t}\n\n\t/**\n\t * Overflows items that were not able to fit the container\n\t * @private\n\t */\n\t_overflowItems() {\n\t\tif (this.items.length < 2) {\n\t\t\t// no need to overflow avatars\n\t\t\treturn;\n\t\t}\n\n\t\tlet hiddenItems = 0;\n\n\t\tfor (let index = 0; index < this._itemsCount; index++) {\n\t\t\tconst item: Avatar = this.items[index];\n\n\t\t\t// show item to determine if it will fit the new container size\n\t\t\titem.hidden = false;\n\n\t\t\t// container width to current item + item width (avatar)\n\t\t\t// used to determine whether the following items will fit the container or not\n\t\t\tlet totalWidth = this._getWidthToItem(item) + item.offsetWidth;\n\n\t\t\tif (index !== this._itemsCount - 1 || this._customOverflowButton) {\n\t\t\t\ttotalWidth += this._overflowButtonEffectiveWidth;\n\t\t\t}\n\n\t\t\tif (totalWidth > this.offsetWidth) {\n\t\t\t\thiddenItems = this._itemsCount - index;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t// hide the items that did not fit the container size\n\t\tthis._setHiddenItems(hiddenItems);\n\t}\n\n\t_getNextBackgroundColor() {\n\t\t// counter is to automatically assign background colors to avatars, `Accent10` is the highest color value\n\t\tif (++this._colorIndex > 10) {\n\t\t\tthis._colorIndex = 1;\n\t\t}\n\t\treturn this._colorIndex;\n\t}\n\n\t_setHiddenItems(hiddenItems: number) {\n\t\tconst shouldFireEvent = this._hiddenItems !== hiddenItems;\n\n\t\tthis._hiddenItems = hiddenItems;\n\n\t\tthis.items.forEach((item, index) => {\n\t\t\titem.hidden = index >= this._hiddenStartIndex;\n\t\t});\n\n\t\tthis._overflowButtonText = `+${hiddenItems > 99 ? 99 : hiddenItems}`;\n\n\t\tif (shouldFireEvent) {\n\t\t\tthis.fireEvent(\"overflow\");\n\t\t}\n\t}\n\n\t_getAriaHasPopup() {\n\t\tif (this.ariaHaspopup === \"\") {\n\t\t\treturn;\n\t\t}\n\n\t\treturn this.ariaHaspopup;\n\t}\n}\n\nAvatarGroup.define();\n\nexport default AvatarGroup;\nexport type {\n\tAvatarGroupClickEventDetail,\n};\n"]}

package/dist/Badge.d.ts

@@ -0,0 +1,79 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.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
+ */
+declare 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
+     */
+    colorScheme: string;
+    /**
+     * Defines if the badge has an icon.
+     * @private
+     */
+    _hasIcon: boolean;
+    /**
+     * Defines if the badge has only an icon (and no text).
+     * @private
+     */
+    _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
+     */
+    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
+     */
+    icon: Array<HTMLElement>;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    onBeforeRendering(): void;
+    get hasText(): boolean;
+    get hasIcon(): boolean;
+    get iconOnly(): boolean;
+    get badgeDescription(): string;
+}
+export default Badge;