@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/dist/AvatarGroup.d.ts

@@ -1,9 +1,24 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 import Button from "./Button.js";
-import type Avatar from "./Avatar.js";
+import AvatarSize from "./types/AvatarSize.js";
 import AvatarGroupType from "./types/AvatarGroupType.js";
+import AvatarColorScheme from "./types/AvatarColorScheme.js";
+import type { IButton } from "./Button.js";
+/**
+ * Interface for components that represent an avatar and may be slotted in numerous higher-order components such as `ui5-avatar-group`
+ * @public
+ */
+interface IAvatarGroupItem extends HTMLElement, ITabbable {
+    еffectiveBackgroundColor: AvatarColorScheme;
+    size: `${AvatarSize}`;
+    effectiveSize: AvatarSize;
+    interactive: boolean;
+}
+type AvatarGroupAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup">;
 type AvatarGroupClickEventDetail = {
     targetRef: HTMLElement;
     overflowButtonClicked: boolean;
@@ -11,7 +26,7 @@ type AvatarGroupClickEventDetail = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
  * 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.
@@ -19,122 +34,99 @@ type AvatarGroupClickEventDetail = {
  * 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>
+ * The `AvatarGroup` component has two group types:
+ *
+ * - `Group` type: The avatars are displayed as partially overlapped on
+ * top of each other and the entire group has one click/tap area.
+ * - `Individual` type: The avatars are displayed side-by-side and each
+ * avatar has its own click/tap area.
+ *
+ * ### Usage
  *
- * <h3>Responsive Behavior</h3>
+ * Use the `AvatarGroup` if:
+ *
+ * - You want to display a group of avatars.
+ * - You want to display several avatars which have something in common.
+ *
+ * Do not use the `AvatarGroup` if:
+ *
+ * - You want to display a single avatar.
+ * - You want to display a gallery for simple images.
+ * - You want to use it for other visual content than avatars.
+ *
+ * ### Responsive Behavior
  *
  * 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>
+ * ### Keyboard Handling
  * 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>
+ * `type` Individual:
+ *
+ * - [Tab] - Move focus to the overflow button
+ * - [Left] - Navigate one avatar to the left
+ * - [Right] - Navigate one avatar to the right
+ * - [Home] - Navigate to the first avatar
+ * - [End] - Navigate to the last avatar
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
+ *
+ * `type` Group:
  *
+ * - [Tab] - Move focus to the next interactive element after the component
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.AvatarGroup
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-avatar-group
+ * @extends UI5Element
  * @since 1.0.0-rc.11
  * @public
  */
 declare class AvatarGroup extends UI5Element {
     /**
-     * Defines the mode of the <code>AvatarGroup</code>.
-     *
-     * @type {sap.ui.webc.main.types.AvatarGroupType}
-     * @name sap.ui.webc.main.AvatarGroup.prototype.type
-     * @defaultValue "Group"
+     * Defines the mode of the `AvatarGroup`.
+     * @default "Group"
      * @public
      */
     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
+     * Defines the additional accessibility attributes that will be applied to the component.
+     * The following field is supported:
+     *
+     * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+     * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+     *
+     * @public
+     * @since 2.0.0
+     * @default {}
      */
-    ariaHaspopup: string;
+    accessibilityAttributes: AvatarGroupAccessibilityAttributes;
     /**
      * @private
      */
     _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.
+     * Defines the items of the component. Use the `ui5-avatar` component as an item.
+     *
+     * **Note:** 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
      */
-    items: Array<Avatar>;
+    items: Array<IAvatarGroupItem>;
     /**
      * 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
+     *
+     * **Note:** We recommend using the `ui5-button` component.
+     *
+     * **Note:** If this slot is not used, the component will display the built-in overflow button.
      * @public
      * @since 1.0.0-rc.13
      */
-    overflowButton: Array<Button>;
+    overflowButton: Array<IButton>;
     static i18nBundle: I18nBundle;
     _onResizeHandler: () => void;
     _colorIndex: number;
@@ -143,36 +135,30 @@ declare class AvatarGroup extends UI5Element {
     constructor();
     static onDefine(): Promise<void>;
     /**
-     * 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
+     * Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.
+     * @default []
      * @public
      */
-    get hiddenItems(): Avatar[];
+    get hiddenItems(): IAvatarGroupItem[];
     /**
-     * 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 []
+     * Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.
+     * @default []
      * @public
      */
-    get colorScheme(): string[];
-    get _customOverflowButton(): Button | undefined;
+    get colorScheme(): AvatarColorScheme[];
+    get _customOverflowButton(): IButton | undefined;
     get _ariaLabelText(): string;
     get _overflowButtonAriaLabelText(): string | undefined;
-    get _containerAriaHasPopup(): string | undefined;
+    get _containerAriaHasPopup(): ("dialog" | "grid" | "listbox" | "menu" | "tree") | undefined;
     get _overflowButtonAccAttributes(): {
-        hasPopup: string | undefined;
+        hasPopup: ("dialog" | "grid" | "listbox" | "menu" | "tree") | undefined;
     };
     get _role(): "button" | "group";
     get _hiddenStartIndex(): number;
     get _overflowBtnHidden(): boolean;
     get _isGroup(): boolean;
     get _itemsCount(): number;
-    get _groupTabIndex(): "0" | "-1";
+    get _groupTabIndex(): "-1" | "0";
     get _overflowButton(): Button | null;
     /**
      * Return the effective overflow button width
@@ -215,7 +201,7 @@ declare class AvatarGroup extends UI5Element {
      * Returns the total width to item excluding the item width
      * RTL/LTR aware
      * @private
-     * @param {HTMLElement} item
+     * @param item
      */
     _getWidthToItem(item: HTMLElement): number;
     /**
@@ -225,7 +211,7 @@ declare class AvatarGroup extends UI5Element {
     _overflowItems(): void;
     _getNextBackgroundColor(): number;
     _setHiddenItems(hiddenItems: number): void;
-    _getAriaHasPopup(): string | undefined;
+    _getAriaHasPopup(): ("dialog" | "grid" | "listbox" | "menu" | "tree") | undefined;
 }
 export default AvatarGroup;
-export type { AvatarGroupClickEventDetail, };
+export type { AvatarGroupClickEventDetail, AvatarGroupAccessibilityAttributes, IAvatarGroupItem, };

package/dist/AvatarGroup.js

@@ -15,6 +15,7 @@ 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 { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Button from "./Button.js";
 import AvatarSize from "./types/AvatarSize.js";
 import AvatarGroupType from "./types/AvatarGroupType.js";
@@ -52,7 +53,7 @@ const offsets = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
  * 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.
@@ -60,66 +61,53 @@ const offsets = {
  * 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>
+ * The `AvatarGroup` component has two group types:
  *
- * <h3>Responsive Behavior</h3>
+ * - `Group` type: The avatars are displayed as partially overlapped on
+ * top of each other and the entire group has one click/tap area.
+ * - `Individual` type: The avatars are displayed side-by-side and each
+ * avatar has its own click/tap area.
+ *
+ * ### Usage
+ *
+ * Use the `AvatarGroup` if:
+ *
+ * - You want to display a group of avatars.
+ * - You want to display several avatars which have something in common.
+ *
+ * Do not use the `AvatarGroup` if:
+ *
+ * - You want to display a single avatar.
+ * - You want to display a gallery for simple images.
+ * - You want to use it for other visual content than avatars.
+ *
+ * ### Responsive Behavior
  *
  * 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>
+ * ### Keyboard Handling
  * 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>
+ * `type` Individual:
  *
+ * - [Tab] - Move focus to the overflow button
+ * - [Left] - Navigate one avatar to the left
+ * - [Right] - Navigate one avatar to the right
+ * - [Home] - Navigate to the first avatar
+ * - [End] - Navigate to the last avatar
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
+ *
+ * `type` Group:
+ *
+ * - [Tab] - Move focus to the next interactive element after the component
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.AvatarGroup
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ui5-avatar-group
+ * @extends UI5Element
  * @since 1.0.0-rc.11
  * @public
  */
@@ -139,26 +127,20 @@ let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
         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
+     * Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.
+     * @default []
      * @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 []
+     * Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.
+     * @default []
      * @public
      */
     get colorScheme() {
-        return this.items.map(avatar => avatar._effectiveBackgroundColor);
+        return this.items.map(avatar => avatar.еffectiveBackgroundColor);
     }
     get _customOverflowButton() {
         return this.overflowButton.length ? this.overflowButton[0] : undefined;
@@ -244,11 +226,11 @@ let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
         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",
+                "ui5-avatar-group-overflow-btn-xs": this.firstAvatarSize === AvatarSize.XS,
+                "ui5-avatar-group-overflow-btn-s": this.firstAvatarSize === AvatarSize.S,
+                "ui5-avatar-group-overflow-btn-m": this.firstAvatarSize === AvatarSize.M,
+                "ui5-avatar-group-overflow-btn-l": this.firstAvatarSize === AvatarSize.L,
+                "ui5-avatar-group-overflow-btn-xl": this.firstAvatarSize === AvatarSize.XL,
             },
         };
     }
@@ -262,6 +244,9 @@ let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
         this._prepareAvatars();
     }
     onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
         ResizeHandler.register(this, this._onResizeHandler);
     }
     onExitDOM() {
@@ -332,7 +317,7 @@ let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
             // 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];
+                avatar.style.marginInlineEnd = offsets[avatar.effectiveSize][this.type];
             }
         });
     }
@@ -343,7 +328,7 @@ let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
      * Returns the total width to item excluding the item width
      * RTL/LTR aware
      * @private
-     * @param {HTMLElement} item
+     * @param item
      */
     _getWidthToItem(item) {
         const isRTL = this.effectiveDir === "rtl";
@@ -406,18 +391,15 @@ let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
         }
     }
     _getAriaHasPopup() {
-        if (this.ariaHaspopup === "") {
-            return;
-        }
-        return this.ariaHaspopup;
+        return this.accessibilityAttributes.hasPopup;
     }
 };
 __decorate([
     property({ type: AvatarGroupType, defaultValue: AvatarGroupType.Group })
 ], AvatarGroup.prototype, "type", void 0);
 __decorate([
-    property()
-], AvatarGroup.prototype, "ariaHaspopup", void 0);
+    property({ type: Object })
+], AvatarGroup.prototype, "accessibilityAttributes", void 0);
 __decorate([
     property({ noAttribute: true })
 ], AvatarGroup.prototype, "_overflowButtonText", void 0);
@@ -436,28 +418,32 @@ AvatarGroup = AvatarGroup_1 = __decorate([
         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
-    */
+     * 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
+     * @public
+     * @since 1.0.0-rc.11
+     */
     ,
     event("click", {
         detail: {
+            /**
+            * @public
+            */
             targetRef: { type: HTMLElement },
+            /**
+            * @public
+            */
             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
-    */
+     * Fired when the count of visible `ui5-avatar` elements in the
+     * component has changed
+     * @public
+     * @since 1.0.0-rc.13
+     */
     ,
     event("overflow")
 ], AvatarGroup);