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,8 +33,10 @@
             </fd-popover>
         }
         <fd-popover
+            [placement]="popoverPlacement"
             [noArrow]="false"
             [focusAutoCapture]="true"
+            (isOpenChange)="handlePopoverOpen($event)"
             *fdAvatarGroupInternalOverflowButton="avatarGroupHostComponent._hiddenItems(); let hiddenItems"
         >
             <fd-popover-control tabindex="-1">
@@ -52,9 +54,17 @@
         </fd-popover>
     </fd-avatar-group-host>
 } @else {
-    <fd-popover [noArrow]="false" [focusAutoCapture]="true" fdkResizeObserver (resized)="_detectChanges()">
-        <fd-popover-control>
+    <fd-popover
+        [placement]="popoverPlacement"
+        [noArrow]="false"
+        [focusAutoCapture]="false"
+        fdkResizeObserver
+        (resized)="_detectChanges()"
+        (isOpenChange)="handlePopoverOpen($event)"
+    >
+        <fd-popover-control tabindex="-1">
             <fd-avatar-group-host
+                [maxVisibleItems]="maxVisibleItems"
                 #avatarGroupHostComponent
                 [type]="type"
                 [size]="size"

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

@@ -8,20 +8,25 @@ import {
     ContentChild,
     ContentChildren,
     Input,
+    OnInit,
     QueryList,
+    ViewChild,
     ViewChildren,
     ViewEncapsulation,
     computed,
-    inject
+    inject,
+    signal
 } from '@angular/core';
 import {
     DynamicPortalComponent,
     FocusableItemDirective,
     FocusableListDirective,
+    Nullable,
     ResizeObserverDirective,
     RtlService
 } from '@fundamental-ngx/cdk/utils';
-import { PopoverModule } from '@fundamental-ngx/core/popover';
+import { PopoverModule, PopoverService } 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';
@@ -44,7 +49,8 @@ import { AvatarGroupHostConfig } from './types';
         {
             provide: AVATAR_GROUP_HOST_CONFIG,
             useExisting: AvatarGroupComponent
-        }
+        },
+        PopoverService
     ],
     imports: [
         AvatarGroupHostComponent,
@@ -61,7 +67,7 @@ import { AvatarGroupHostConfig } from './types';
         ResizeObserverDirective
     ]
 })
-export class AvatarGroupComponent implements AvatarGroupHostConfig {
+export class AvatarGroupComponent implements AvatarGroupHostConfig, OnInit {
     /**
      * The AvatarGroup control has two group types:
      *
@@ -88,6 +94,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 +106,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>;
@@ -112,6 +132,9 @@ export class AvatarGroupComponent implements AvatarGroupHostConfig {
     @ContentChild(AvatarGroupOverflowBodyDirective)
     _avatarGroupPopoverBody: AvatarGroupOverflowBodyDirective;
 
+    /** @hidden */
+    opened = signal(false);
+
     /** @hidden */
     _contentDirection$ = computed<Direction>(() => (this._rtlService?.rtlSignal() ? 'rtl' : 'ltr'));
 
@@ -121,6 +144,19 @@ export class AvatarGroupComponent implements AvatarGroupHostConfig {
     /** @hidden */
     private readonly _rtlService = inject(RtlService, { optional: true });
 
+    /** @hidden */
+    private _popoverService = inject(PopoverService);
+
+    /** @hidden */
+    ngOnInit(): void {
+        this._popoverService._forceFocus.set(true);
+    }
+
+    /** @hidden */
+    handlePopoverOpen($event: boolean): void {
+        this.opened.set($event);
+    }
+
     /** @hidden */
     _detectChanges(): void {
         this._cdr.detectChanges();

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.html

@@ -27,11 +27,11 @@
     navigationDirection="horizontal"
 >
     @if (_overflowPopoverStage === 'main') {
-        @for (item of avatars; track item) {
+        @for (avatar of avatars(); track avatar) {
             <ng-template
                 cdkPortalOutlet
                 fdAvatarGroupItemPortal
-                [avatarGroupItem]="item.avatarGroupItem"
+                [avatarGroupItem]="avatar.avatarGroupItem"
                 [forceVisibility]="true"
             >
             </ng-template>

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

@@ -5,13 +5,16 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
+    EventEmitter,
     Input,
     OnDestroy,
+    Output,
     QueryList,
     Renderer2,
     ViewChildren,
     ViewEncapsulation,
-    inject
+    inject,
+    input
 } from '@angular/core';
 import { FocusableListDirective, RtlService, elementClick$ } from '@fundamental-ngx/cdk/utils';
 import { BarModule } from '@fundamental-ngx/core/bar';
@@ -42,18 +45,16 @@ import { AvatarGroupItemDirective } from '../../directives/avatar-group-item.dir
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DefaultAvatarGroupOverflowBodyComponent implements AfterViewInit, OnDestroy {
-    /**
-     * List of avatars to be rendered in the overflow popover.
-     **/
-    @Input()
-    avatars: Iterable<AvatarGroupItemRendererDirective> = [];
-
     /**
      * Title of the overflow popover.
      * */
     @Input()
     overflowPopoverTitle: string;
 
+    /** @hidden */
+    @Output()
+    back = new EventEmitter<void>();
+
     /** @hidden */
     @ViewChildren(AvatarGroupItemRendererDirective)
     _avatarGroupItemPortals: QueryList<AvatarGroupItemRendererDirective>;
@@ -73,6 +74,12 @@ export class DefaultAvatarGroupOverflowBodyComponent implements AfterViewInit, O
     get isRtl(): boolean {
         return !!this._rtlService?.rtl.value;
     }
+
+    /**
+     * List of avatars to be rendered in the overflow popover.
+     **/
+    avatars = input<AvatarGroupItemRendererDirective[]>([]);
+
     /** @hidden */
     private _itemClickSubscription: Subscription;
 
@@ -122,5 +129,6 @@ export class DefaultAvatarGroupOverflowBodyComponent implements AfterViewInit, O
     _openOverflowMain(): void {
         this._overflowPopoverStage = 'main';
         this._changeDetectorRef.detectChanges();
+        this.back.emit();
     }
 }

libs/core/avatar-group/directives/avatar-group-item-renderer.directive.ts

@@ -1,6 +1,7 @@
 import { CdkPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
-import { Directive, EmbeddedViewRef, Input, OnInit, ViewContainerRef, inject } from '@angular/core';
+import { Directive, EmbeddedViewRef, Input, OnInit, ViewContainerRef, effect, inject } from '@angular/core';
 import { FDK_FOCUSABLE_ITEM_DIRECTIVE, FocusableItem, Nullable } from '@fundamental-ngx/cdk/utils';
+import { AvatarGroupComponent } from '@fundamental-ngx/core/avatar-group';
 import { BehaviorSubject, Observable, fromEvent } from 'rxjs';
 import { filter, switchMap } from 'rxjs/operators';
 import { AVATAR_GROUP_HOST_CONFIG } from '../tokens';
@@ -118,6 +119,11 @@ export class AvatarGroupItemRendererDirective implements OnInit, FocusableItem {
             filter((element) => !!element),
             switchMap((element) => fromEvent(element as unknown as HTMLElement, 'keydown') as Observable<KeyboardEvent>)
         );
+        effect(() => {
+            const config = this._hostConfig as AvatarGroupComponent;
+            this.setTabbable(config.type === 'individual' || config.opened());
+            this._isFocusable = config.type === 'individual' || config.opened();
+        });
     }
 
     /** @hidden */
@@ -147,8 +153,6 @@ export class AvatarGroupItemRendererDirective implements OnInit, FocusableItem {
         this._embeddedViewRef = this._portalOutlet.attach(this._templatePortal);
         this._embeddedViewRef.detectChanges();
         this._element$.next(this.element);
-        this.setTabbable(this._hostConfig.type === 'individual');
-        this._isFocusable = this._hostConfig.type === 'individual';
     }
 
     /**

libs/core/popover/popover-body/popover-body.component.ts

@@ -146,9 +146,10 @@ export class PopoverBodyComponent implements AfterViewInit {
     @HostListener('document:click', ['$event.target'])
     onClick(targetElement: HTMLElement): void {
         const clickedInside = this._elementRef.nativeElement.contains(targetElement);
-        if (!clickedInside) {
-            // Call the focus logic if clicked outside the popover
+        if (!clickedInside && this._focusAutoCapture) {
             this._focusFirstTabbableElement();
+        } else {
+            this._focusFirstTabbableElement(true);
         }
     }
 

libs/core/popover/popover-service/popover.service.ts

@@ -17,7 +17,8 @@ import {
     Renderer2,
     TemplateRef,
     ViewContainerRef,
-    inject
+    inject,
+    signal
 } from '@angular/core';
 import { Observable, Subject, merge } from 'rxjs';
 import { distinctUntilChanged, filter, startWith, takeUntil } from 'rxjs/operators';
@@ -46,6 +47,9 @@ export class PopoverService extends BasePopoverClass {
     /** Template content displayed inside popover body */
     templateContent: Nullable<TemplateRef<any>>;
 
+    /** Whether to focus the first item on space key press */
+    _forceFocus = signal(false);
+
     /** @hidden */
     _onLoad = new Subject<ElementRef>();
 
@@ -127,6 +131,13 @@ export class PopoverService extends BasePopoverClass {
                 this._removeOverlay(this._modalBodyClass, this._modalTriggerClass);
             }
         });
+
+        // Add keydown listener for space key
+        this._renderer.listen('document', 'keydown', (event: KeyboardEvent) => {
+            if (event.code === 'Space' && this.isOpen) {
+                this._storeAndFocusFirstTabbable();
+            }
+        });
     }
 
     /**
@@ -588,11 +599,16 @@ export class PopoverService extends BasePopoverClass {
     /** @hidden */
     private _focusFirstTabbableElement(focusLastElement = true): void {
         if (focusLastElement && this.focusAutoCapture) {
-            this._lastActiveElement = <HTMLElement>document.activeElement;
-            this._getPopoverBody()?._focusFirstTabbableElement();
+            this._storeAndFocusFirstTabbable();
         }
     }
 
+    /** @hidden */
+    private _storeAndFocusFirstTabbable(): void {
+        this._lastActiveElement = <HTMLElement>document.activeElement;
+        this._getPopoverBody()?._focusFirstTabbableElement(true);
+    }
+
     /** @hidden */
     private _focusLastActiveElementBeforeOpen(focusLastElement = true): void {
         if (focusLastElement && this.restoreFocusOnClose && this.focusAutoCapture && this._lastActiveElement) {

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

@@ -9,7 +9,6 @@
     <fd-avatar-group-default-example></fd-avatar-group-default-example>
 </component-example>
 <code-example [exampleFiles]="avatarGroupDefaultExample"></code-example>
-
 <fd-docs-section-title id="group" componentName="AvatarGroup"> Group Type Standard Usage </fd-docs-section-title>
 <description>
     <p>