fix(core): address Avatar Group issues

libs/core/avatar-group/avatar-group.component.html

@@ -14,7 +14,7 @@
         (resized)="_detectChanges()"
     >
         @for (item of _avatars; track item) {
-            <fd-popover [noArrow]="false" [focusAutoCapture]="true">
+            <fd-popover [placement]="popoverPlacement" [noArrow]="false" [focusAutoCapture]="true">
                 <fd-popover-control tabindex="-1" (click)="outletItem.element.focus()">
                     <ng-template
                         #outletItem="fdAvatarGroupItemPortal"
@@ -33,6 +33,7 @@
             </fd-popover>
         }
         <fd-popover
+            [placement]="popoverPlacement"
             [noArrow]="false"
             [focusAutoCapture]="true"
             *fdAvatarGroupInternalOverflowButton="avatarGroupHostComponent._hiddenItems(); let hiddenItems"
@@ -52,9 +53,17 @@
         </fd-popover>
     </fd-avatar-group-host>
 } @else {
-    <fd-popover [noArrow]="false" [focusAutoCapture]="true" fdkResizeObserver (resized)="_detectChanges()">
+    <fd-popover
+        [placement]="popoverPlacement"
+        [noArrow]="false"
+        [focusAutoCapture]="true"
+        fdkResizeObserver
+        (resized)="_detectChanges()"
+        (isOpenChange)="handlePopoverOpen($event)"
+    >
         <fd-popover-control>
             <fd-avatar-group-host
+                [maxVisibleItems]="maxVisibleItems"
                 #avatarGroupHostComponent
                 [type]="type"
                 [size]="size"
@@ -108,6 +117,10 @@
             [ngTemplateOutletContext]="{ hiddenItems: hiddenItems }"
         />
     } @else {
-        <fd-default-avatar-group-overflow-body [avatars]="hiddenItems" [overflowPopoverTitle]="overflowPopoverTitle" />
+        <fd-default-avatar-group-overflow-body
+            (back)="handleBack()"
+            [avatars]="hiddenItems"
+            [overflowPopoverTitle]="overflowPopoverTitle"
+        />
     }
 </ng-template>

libs/core/avatar-group/avatar-group.component.ts

@@ -9,6 +9,7 @@ import {
     ContentChildren,
     Input,
     QueryList,
+    ViewChild,
     ViewChildren,
     ViewEncapsulation,
     computed,
@@ -18,10 +19,12 @@ import {
     DynamicPortalComponent,
     FocusableItemDirective,
     FocusableListDirective,
+    Nullable,
     ResizeObserverDirective,
     RtlService
 } from '@fundamental-ngx/cdk/utils';
 import { PopoverModule } from '@fundamental-ngx/core/popover';
+import { Placement } from '@fundamental-ngx/core/shared';
 import { AvatarGroupHostComponent } from './components/avatar-group-host.component';
 import { AvatarGroupOverflowButtonComponent } from './components/avatar-group-overflow-button.component';
 import { DefaultAvatarGroupOverflowBodyComponent } from './components/default-avatar-group-overflow-body/default-avatar-group-overflow-body.component';
@@ -88,6 +91,10 @@ export class AvatarGroupComponent implements AvatarGroupHostConfig {
     @Input()
     size: AvatarGroupHostConfig['size'] = 'l';
 
+    /** Popover placement */
+    @Input()
+    popoverPlacement: Placement | null = null;
+
     /**
      * The title which is displayed when user opens the overflow popover.
      * This takes effect only when default overflow popover body is used,
@@ -96,10 +103,20 @@ export class AvatarGroupComponent implements AvatarGroupHostConfig {
     @Input()
     overflowPopoverTitle: string;
 
+    /**
+     * The maximum number of visible avatar items.
+     **/
+    @Input()
+    maxVisibleItems: Nullable<number> = null;
+
     /** @hidden */
     @ViewChildren(AvatarGroupItemRendererDirective)
     _avatarRenderers: QueryList<AvatarGroupItemRendererDirective>;
 
+    /** @hidden */
+    @ViewChild(DefaultAvatarGroupOverflowBodyComponent)
+    defaultAvatarGroupOverflowBody: DefaultAvatarGroupOverflowBodyComponent;
+
     /** @hidden */
     @ContentChildren(AvatarGroupItemDirective)
     _avatars: QueryList<AvatarGroupItemDirective>;
@@ -121,8 +138,23 @@ export class AvatarGroupComponent implements AvatarGroupHostConfig {
     /** @hidden */
     private readonly _rtlService = inject(RtlService, { optional: true });
 
+    private opened = false;
+
     /** @hidden */
     _detectChanges(): void {
         this._cdr.detectChanges();
     }
+
+    /** @hidden */
+    handlePopoverOpen(isOpen: boolean): void {
+        this.opened = isOpen;
+        if (isOpen) {
+            this.defaultAvatarGroupOverflowBody._avatarGroupItemPortals.first.setTabbable(true);
+        }
+    }
+
+    /** @hidden */
+    handleBack(): void {
+        this.handlePopoverOpen(this.opened);
+    }
 }

libs/core/avatar-group/components/avatar-group-host.component.ts

@@ -72,6 +72,12 @@ export class AvatarGroupHostComponent
     @Input()
     items: QueryList<AvatarGroupItemDirective>;
 
+    /**
+     * The maximum number of visible avatar items.
+     **/
+    @Input()
+    maxVisibleItems: Nullable<number> = null;
+
     /**
      * @hidden
      * The portals to be rendered in the avatar group.
@@ -166,12 +172,18 @@ export class AvatarGroupHostComponent
                 continue;
             }
             accWidth += item.width;
-            if (accWidth <= containerWidth) {
+            if (accWidth <= containerWidth && (!this.maxVisibleItems || visibleItems.length < this.maxVisibleItems)) {
                 visibleItems.push(item);
             } else if (!item.forceVisibility) {
                 hiddenItems.push(item);
             }
         }
+
+        // Ensure we don't exceed the maxVisibleItems limit
+        if (this.maxVisibleItems && visibleItems.length > this.maxVisibleItems) {
+            hiddenItems.unshift(...visibleItems.splice(this.maxVisibleItems));
+        }
+
         /* take last item from the visibleItems which is not forced to be visible and push it to the hiddenItems
          * This is done to free up the space for the overflow button
          */

libs/core/avatar-group/components/avatar-group-overflow-button.component.ts

@@ -2,7 +2,6 @@ import {
     ChangeDetectionStrategy,
     Component,
     forwardRef,
-    HostBinding,
     inject,
     Input,
     OnChanges,
@@ -29,7 +28,8 @@ import { AVATAR_GROUP_HOST_CONFIG } from '../tokens';
     selector: 'fd-avatar-group-overflow-button',
     template: ` <ng-content></ng-content>`,
     host: {
-        role: 'button'
+        role: 'button',
+        class: 'fd-avatar--circle'
     },
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
@@ -51,13 +51,6 @@ export class AvatarGroupOverflowButtonComponent
     @Input()
     size: Size = 'l';
 
-    /**
-     * Whether the overflow button should be displayed as a circle.
-     */
-    @Input()
-    @HostBinding('class.fd-avatar--circle')
-    circle = false;
-
     /**
      * A number from 1 to 10 representing the background color of the Avatar.
      */

libs/core/avatar-group/components/default-avatar-group-overflow-body/default-avatar-group-overflow-body.component.ts

@@ -5,8 +5,10 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
+    EventEmitter,
     Input,
     OnDestroy,
+    Output,
     QueryList,
     Renderer2,
     ViewChildren,
@@ -54,6 +56,10 @@ export class DefaultAvatarGroupOverflowBodyComponent implements AfterViewInit, O
     @Input()
     overflowPopoverTitle: string;
 
+    /** @hidden */
+    @Output()
+    back = new EventEmitter<void>();
+
     /** @hidden */
     @ViewChildren(AvatarGroupItemRendererDirective)
     _avatarGroupItemPortals: QueryList<AvatarGroupItemRendererDirective>;
@@ -122,5 +128,6 @@ export class DefaultAvatarGroupOverflowBodyComponent implements AfterViewInit, O
     _openOverflowMain(): void {
         this._overflowPopoverStage = 'main';
         this._changeDetectorRef.detectChanges();
+        this.back.emit();
     }
 }