fix(core): avatar group bugs

closes (#12369)[#12369]

## Description
- Add maxVisibleItems input to limit the number of visible avatars in AvatarGroupHostComponent, retaining default behavior when unset

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

@@ -1,4 +1,5 @@
 <ng-content></ng-content>
+<pre>{{_avatars.length}}</pre>
 @if (type === 'individual') {
     <fd-avatar-group-host
         #avatarGroupHostComponent
@@ -58,6 +59,7 @@
     <fd-popover [placement]="popoverPlacement" [noArrow]="false" [focusAutoCapture]="true" fdkResizeObserver (resized)="_detectChanges()">
         <fd-popover-control>
             <fd-avatar-group-host
+                [maxVisibleItems]="maxVisibleItems"
                 #avatarGroupHostComponent
                 [type]="type"
                 [size]="size"

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

@@ -17,12 +17,12 @@ import {
 import {
     DynamicPortalComponent,
     FocusableItemDirective,
-    FocusableListDirective,
+    FocusableListDirective, Nullable,
     ResizeObserverDirective,
     RtlService
 } from '@fundamental-ngx/cdk/utils';
 import { PopoverModule } from '@fundamental-ngx/core/popover';
-import { Placement } from '../shared';
+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';
@@ -105,6 +105,13 @@ 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>;

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/docs/core/avatar-group/examples/group-type/avatar-group-test-example/avatar-group-test-example.component.html

@@ -1,4 +1,4 @@
-<fd-avatar-group  [circle]="true" [popoverPlacement]="'bottom'" [size]="'m'" type="group" overflowPopoverTitle="Team members">
+<fd-avatar-group [maxVisibleItems]="3" [circle]="true" [popoverPlacement]="'bottom'" [size]="'m'" type="group" overflowPopoverTitle="Team members">
     @for (person of people; track person) { @if (!person.imageUrl &&
     !person.glyph) {
         <fd-avatar