@fundamental-ngx/core 0.46.0-rc.4 → 0.46.0-rc.40

package/avatar/avatar.component.d.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnInit, Renderer2 } from '@angular/core';
-import { ColorAccent, Size, CssClassBuilder } from '@fundamental-ngx/cdk/utils';
-import { Nullable } from '@fundamental-ngx/cdk/utils';
+import { ColorAccent, CssClassBuilder, Nullable, Size } from '@fundamental-ngx/cdk/utils';
 import * as i0 from "@angular/core";
 export declare class AvatarComponent implements OnChanges, OnInit, CssClassBuilder, OnChanges {
     readonly elementRef: ElementRef;
@@ -115,5 +114,5 @@ export declare class AvatarComponent implements OnChanges, OnInit, CssClassBuild
     /** @hidden */
     private _showDefaultIcon;
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, [null, null, null, { attribute: "tabindex"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "fd-avatar", never, { "class": { "alias": "class"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "label": { "alias": "label"; "required": false; }; "size": { "alias": "size"; "required": false; }; "glyph": { "alias": "glyph"; "required": false; }; "zoomGlyph": { "alias": "zoomGlyph"; "required": false; }; "circle": { "alias": "circle"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; "contain": { "alias": "contain"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tile": { "alias": "tile"; "required": false; }; "border": { "alias": "border"; "required": false; }; "colorAccent": { "alias": "colorAccent"; "required": false; }; "random": { "alias": "random"; "required": false; }; "clickable": { "alias": "clickable"; "required": false; }; "image": { "alias": "image"; "required": false; }; "alterIcon": { "alias": "alterIcon"; "required": false; }; "backupImage": { "alias": "backupImage"; "required": false; }; }, { "avatarClicked": "avatarClicked"; "zoomGlyphClicked": "zoomGlyphClicked"; }, never, ["*"], false, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "fd-avatar", never, { "class": { "alias": "class"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "label": { "alias": "label"; "required": false; }; "size": { "alias": "size"; "required": false; }; "glyph": { "alias": "glyph"; "required": false; }; "zoomGlyph": { "alias": "zoomGlyph"; "required": false; }; "circle": { "alias": "circle"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; "contain": { "alias": "contain"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "tile": { "alias": "tile"; "required": false; }; "border": { "alias": "border"; "required": false; }; "colorAccent": { "alias": "colorAccent"; "required": false; }; "random": { "alias": "random"; "required": false; }; "clickable": { "alias": "clickable"; "required": false; }; "image": { "alias": "image"; "required": false; }; "alterIcon": { "alias": "alterIcon"; "required": false; }; "backupImage": { "alias": "backupImage"; "required": false; }; }, { "avatarClicked": "avatarClicked"; "zoomGlyphClicked": "zoomGlyphClicked"; }, never, ["*"], true, never, false>;
 }

package/avatar/avatar.module.d.ts

@@ -1,8 +1,7 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./avatar.component";
-import * as i2 from "@angular/common";
 export declare class AvatarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AvatarModule, [typeof i1.AvatarComponent], [typeof i2.CommonModule], [typeof i1.AvatarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AvatarModule, never, [typeof i1.AvatarComponent], [typeof i1.AvatarComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AvatarModule>;
 }

package/avatar-group/README.md

@@ -1,25 +1,7 @@
-# AvatarGroup
+# core-src-lib-avatar-group
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project avatar-group` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project avatar-group`.
-
-> Note: Don't forget to add `--project avatar-group` or else it will be added to the default project in your `angular.json` file.
-
-## Build
-
-Run `ng build avatar-group` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build avatar-group`, go to the dist folder `cd dist/avatar-group` and run `npm publish`.
+This library was generated with [Nx](https://nx.dev).
 
 ## Running unit tests
 
-Run `ng test avatar-group` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+Run `nx test core-src-lib-avatar-group` to execute the unit tests.

package/avatar-group/avatar-group.component.d.ts

@@ -1,77 +1,54 @@
-import { AfterViewInit, ElementRef, OnChanges, OnDestroy, OnInit, QueryList } from '@angular/core';
-import { ViewportRuler } from '@angular/cdk/overlay';
-import { Nullable } from '@fundamental-ngx/cdk/utils';
-import { ColorAccent, RtlService, Size } from '@fundamental-ngx/cdk/utils';
+import { QueryList } from '@angular/core';
+import { Observable } from 'rxjs';
+import { AvatarGroupItemRendererDirective } from './directives/avatar-group-item-renderer.directive';
 import { AvatarGroupItemDirective } from './directives/avatar-group-item.directive';
-import { AvatarGroupInterface } from './avatar-group.interface';
+import { AvatarGroupOverflowBodyDirective } from './directives/avatar-group-overflow-body.directive';
+import { AvatarGroupOverflowButtonDirective } from './directives/avatar-group-overflow-button.directive';
+import { AvatarGroupHostConfig } from './types';
 import * as i0 from "@angular/core";
-export type AvatarGroupType = 'group' | 'individual';
-export type AvatarGroupOverflowButtonColor = 'neutral' | 'random' | ColorAccent;
-export declare class AvatarGroupComponent implements AvatarGroupInterface, OnChanges, OnInit, AfterViewInit, OnDestroy {
-    private readonly _viewportRuler;
-    private _rtlService;
-    /** Id of the Avatar Group. */
-    id: string;
-    /** Apply user custom class. */
-    class: string;
-    /** The size of the Avatar Group. Options include: *xs*, *s*, *m*, *l* and *xl* (default: *s*). */
-    size: Size;
-    /** The type of the Avatar Group. Options include: *group* and *individual* (default: *group*). */
-    type: AvatarGroupType;
-    /** Aria-label for Avatar Group. */
-    ariaLabel: Nullable<string>;
-    /** Counter for all avatars. */
-    allItemsCount: number;
-    /** Counter for visible in overflow popover avatars. */
-    overflowItemsCount: number;
-    /** @hidden Avatar Group items. */
-    mainItems: QueryList<AvatarGroupItemDirective>;
-    /** @hidden */
-    avatarGroupContainer: ElementRef<HTMLDivElement>;
-    /** @hidden */
-    rootClassNames: Record<string, boolean | undefined | null>;
-    /** @hidden */
-    get isGroupType(): boolean;
-    /** @hidden */
-    private get _avatarGroupWidth();
-    /** @hidden */
-    private get _avatarGroupItemWidth();
-    /** @hidden */
-    private get _avatarGroupItemWithMarginsWidth();
-    /** @hidden FocusKeyManager instance */
-    private _keyboardEventsManager;
-    /** @hidden */
-    private readonly _subscription;
-    /** @hidden handles rtl service */
-    private _dir;
-    /** @hidden */
-    constructor(_viewportRuler: ViewportRuler, _rtlService: RtlService);
-    /** @hidden */
-    ngOnInit(): void;
-    /** @hidden */
-    ngOnChanges(): void;
-    /** @hidden */
-    ngAfterViewInit(): void;
-    /** @hidden */
-    ngOnDestroy(): void;
-    /** @hidden */
-    keyUpHandler(event: KeyboardEvent): void;
-    /** @hidden */
-    _setActiveItem(item: AvatarGroupItemDirective): void;
-    /** @hidden */
-    private _onResize;
-    /** @hidden */
-    private _reset;
-    /** @hidden */
-    private _collapseItems;
-    /** @hidden */
-    private _listenForItemChanges;
-    /** @hidden */
-    private _assignCssClasses;
-    /** @hidden */
-    private _setKeyboardEventsManager;
-    /** @hidden Rtl change subscription */
-    private _subscribeToRtl;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupComponent, [null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarGroupComponent, "fd-avatar-group", never, { "id": { "alias": "id"; "required": false; }; "class": { "alias": "class"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, {}, ["mainItems"], ["*"], false, never, false>;
+export declare class AvatarGroupComponent implements AvatarGroupHostConfig {
+    /**
+     * The AvatarGroup control has two group types:
+     *
+     * `group`: The avatars are displayed as partially overlapped on top of each other and the entire group has one click/tap area.
+     * `individual`: The avatars are displayed side-by-side and each avatar has its own click/tap area.
+     * */
+    type: AvatarGroupHostConfig['type'];
+    /**
+     * Orientation of the AvatarGroup control.
+     *
+     * `horizontal`: The avatars are displayed horizontally.
+     * `vertical`: The avatars are displayed vertically.
+     */
+    orientation: AvatarGroupHostConfig['orientation'];
+    /**
+     * The spacing between the items depends on the size of the avatars in the group.
+     * The size is also used for the default overflow button.
+     * `xs`, `s`, `m`, `l`, `xl`
+     */
+    size: AvatarGroupHostConfig['size'];
+    /**
+     * The title which is displayed when user opens the overflow popover.
+     * This takes effect only when default overflow popover body is used,
+     * otherwise the title should be set on the custom overflow popover body component.
+     */
+    overflowPopoverTitle: string;
+    /** @hidden */
+    _avatarRenderers: QueryList<AvatarGroupItemRendererDirective>;
+    /** @hidden */
+    _avatars: QueryList<AvatarGroupItemDirective>;
+    /** @hidden */
+    _overflowButton: AvatarGroupOverflowButtonDirective;
+    /** @hidden */
+    _avatarGroupPopoverBody: AvatarGroupOverflowBodyDirective;
+    /** @hidden */
+    _contentDirection$: Observable<'rtl' | 'ltr'>;
+    /** @hidden */
+    private _cdr;
+    /** @hidden */
+    _trackByFn(_: number, item: AvatarGroupItemDirective): AvatarGroupItemDirective;
+    /** @hidden */
+    _detectChanges(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarGroupComponent, "fd-avatar-group", never, { "type": { "alias": "type"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "size": { "alias": "size"; "required": false; }; "overflowPopoverTitle": { "alias": "overflowPopoverTitle"; "required": false; }; }, {}, ["_overflowButton", "_avatarGroupPopoverBody", "_avatars"], ["*"], true, never, false>;
 }

package/avatar-group/avatar-group.module.d.ts

@@ -1,15 +1,12 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./avatar-group.component";
 import * as i2 from "./directives/avatar-group-item.directive";
-import * as i3 from "./directives/avatar-group-focusable-avatar.directive";
-import * as i4 from "./directives/avatar-group-popover-control.directive";
-import * as i5 from "./directives/avatar-group-overflow-body.directive";
-import * as i6 from "./directives/avatar-group-overflow-item.directive";
-import * as i7 from "./directives/avatar-group-overflow-button.directive";
-import * as i8 from "./directives/avatar-group-overflow-button-text.directive";
-import * as i9 from "@angular/common";
+import * as i3 from "./components/avatar-group-overflow-button.component";
+import * as i4 from "./directives/avatar-group-overflow-button.directive";
+import * as i5 from "./components/avatar-group-overflow-body/avatar-group-overflow-body.component";
+import * as i6 from "./directives/avatar-group-overflow-body.directive";
 export declare class AvatarGroupModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AvatarGroupModule, [typeof i1.AvatarGroupComponent, typeof i2.AvatarGroupItemDirective, typeof i3.AvatarGroupFocusableAvatarDirective, typeof i4.AvatarGroupPopoverControlDirective, typeof i5.AvatarGroupOverflowBodyDirective, typeof i6.AvatarGroupOverflowItemDirective, typeof i7.AvatarGroupOverflowButtonDirective, typeof i8.AvatarGroupOverflowButtonTextDirective], [typeof i9.CommonModule], [typeof i1.AvatarGroupComponent, typeof i2.AvatarGroupItemDirective, typeof i3.AvatarGroupFocusableAvatarDirective, typeof i4.AvatarGroupPopoverControlDirective, typeof i5.AvatarGroupOverflowBodyDirective, typeof i6.AvatarGroupOverflowItemDirective, typeof i7.AvatarGroupOverflowButtonDirective, typeof i8.AvatarGroupOverflowButtonTextDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AvatarGroupModule, never, [typeof i1.AvatarGroupComponent, typeof i2.AvatarGroupItemDirective, typeof i3.AvatarGroupOverflowButtonComponent, typeof i4.AvatarGroupOverflowButtonDirective, typeof i5.AvatarGroupOverflowBodyComponent, typeof i6.AvatarGroupOverflowBodyDirective], [typeof i1.AvatarGroupComponent, typeof i2.AvatarGroupItemDirective, typeof i3.AvatarGroupOverflowButtonComponent, typeof i4.AvatarGroupOverflowButtonDirective, typeof i5.AvatarGroupOverflowBodyComponent, typeof i6.AvatarGroupOverflowBodyDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AvatarGroupModule>;
 }

package/avatar-group/components/avatar-group-host.component.d.ts

@@ -0,0 +1,61 @@
+import { AfterViewInit, ElementRef, OnChanges, OnInit, QueryList, SimpleChanges } from '@angular/core';
+import { CssClassBuilder, HasElementRef, Nullable } from '@fundamental-ngx/cdk/utils';
+import { Observable } from 'rxjs';
+import { AvatarGroupItemRendererDirective } from '../directives/avatar-group-item-renderer.directive';
+import { AvatarGroupItemDirective } from '../directives/avatar-group-item.directive';
+import { AvatarGroupHostConfig } from '../types';
+import * as i0 from "@angular/core";
+export declare class AvatarGroupHostComponent implements OnInit, AfterViewInit, OnChanges, HasElementRef, AvatarGroupHostConfig, CssClassBuilder {
+    /**
+     * The class to apply to the host element.
+     **/
+    class: Nullable<string>;
+    /**
+     * The type of the avatar group.
+     * Options include 'individual' and 'group'.
+     **/
+    type: AvatarGroupHostConfig['type'];
+    /**
+     * The orientation of the avatar group.
+     * Options include 'horizontal' and 'vertical'.
+     **/
+    orientation: AvatarGroupHostConfig['orientation'];
+    /**
+     * The size of the avatar group.
+     * Options include 'xs', 's', 'm', 'l', and 'xl'.
+     **/
+    size: AvatarGroupHostConfig['size'];
+    /**
+     * The items to be rendered in the avatar group.
+     **/
+    items: QueryList<AvatarGroupItemDirective>;
+    /**
+     * @hidden
+     * The portals to be rendered in the avatar group.
+     **/
+    _portals: QueryList<AvatarGroupItemRendererDirective>;
+    /** @hidden */
+    _resizeEmitter: Observable<ResizeObserverEntry[]>;
+    /** The reference to the host element */
+    elementRef: ElementRef<any>;
+    /** @hidden */
+    _hiddenItems: import("@angular/core").WritableSignal<AvatarGroupItemRendererDirective[]>;
+    /** @hidden */
+    private readonly _destroyRef;
+    /** @hidden */
+    private _cdr;
+    /** @hidden */
+    private _onChanges$;
+    /** @hidden */
+    buildComponentCssClass(): string[];
+    /** @hidden */
+    ngOnInit(): void;
+    /** @hidden */
+    ngOnChanges(changes: SimpleChanges): void;
+    /** @hidden */
+    ngAfterViewInit(): void;
+    /** @hidden */
+    private _calculateVisibility;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupHostComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarGroupHostComponent, "fd-avatar-group-host", never, { "class": { "alias": "class"; "required": false; }; "type": { "alias": "type"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "size": { "alias": "size"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, {}, ["_portals"], ["*"], true, never, false>;
+}

package/avatar-group/components/avatar-group-overflow-body/avatar-group-overflow-body.component.d.ts

@@ -0,0 +1,16 @@
+import * as i0 from "@angular/core";
+/**
+ * Avatar group overflow body component, used to provide a template for the avatar group overflow body.
+ */
+export declare class AvatarGroupOverflowBodyComponent {
+    /** Remove the padding from the overflow body. */
+    noPadding: boolean;
+    /** Hide horizontal scrollbar from the overflow body. */
+    noHorizontalScroll: boolean;
+    /** Hide vertical scrollbar from the overflow body. */
+    noVerticalScroll: boolean;
+    /** Additional popover body class */
+    additionalPopoverBodyClass: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupOverflowBodyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarGroupOverflowBodyComponent, "fd-avatar-group-overflow-body", never, { "noPadding": { "alias": "noPadding"; "required": false; }; "noHorizontalScroll": { "alias": "noHorizontalScroll"; "required": false; }; "noVerticalScroll": { "alias": "noVerticalScroll"; "required": false; }; "additionalPopoverBodyClass": { "alias": "additionalPopoverBodyClass"; "required": false; }; }, {}, never, ["[fd-popover-body-header]", "[fd-avatar-group-overflow-body-content]"], true, never, false>;
+}

package/avatar-group/components/avatar-group-overflow-button.component.d.ts

@@ -0,0 +1,36 @@
+import { OnChanges, OnInit } from '@angular/core';
+import { ColorAccent, CssClassBuilder, FocusableItemDirective, Nullable, Size } from '@fundamental-ngx/cdk/utils';
+import * as i0 from "@angular/core";
+/**
+ * Avatar group overflow button component.
+ * This is used for the overflow button template.
+ * Although any content can be projected as the overflow button, this component provides some styling and accessibility features.
+ */
+export declare class AvatarGroupOverflowButtonComponent extends FocusableItemDirective implements OnChanges, OnInit, CssClassBuilder {
+    /**
+     * Size of the overflow button.
+     */
+    size: Size;
+    /**
+     * Whether the overflow button should be displayed as a circle.
+     */
+    circle: boolean;
+    /**
+     * A number from 1 to 10 representing the background color of the Avatar.
+     */
+    colorAccent: Nullable<ColorAccent>;
+    /**
+     * The class to apply to the host element.
+     **/
+    class: Nullable<string>;
+    /** @hidden */
+    constructor();
+    /** @hidden */
+    buildComponentCssClass(): string[];
+    /** @hidden */
+    ngOnInit(): void;
+    /** @hidden */
+    ngOnChanges(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupOverflowButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarGroupOverflowButtonComponent, "fd-avatar-group-overflow-button", never, { "size": { "alias": "size"; "required": false; }; "circle": { "alias": "circle"; "required": false; }; "colorAccent": { "alias": "colorAccent"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never, false>;
+}

package/avatar-group/components/default-avatar-group-overflow-body/default-avatar-group-overflow-body.component.d.ts

@@ -0,0 +1,42 @@
+import { AfterViewInit, OnDestroy, QueryList } from '@angular/core';
+import { AvatarGroupItemRendererDirective } from '../../directives/avatar-group-item-renderer.directive';
+import { AvatarGroupItemDirective } from '../../directives/avatar-group-item.directive';
+import * as i0 from "@angular/core";
+export declare class DefaultAvatarGroupOverflowBodyComponent implements AfterViewInit, OnDestroy {
+    /**
+     * List of avatars to be rendered in the overflow popover.
+     **/
+    avatars: Iterable<AvatarGroupItemRendererDirective>;
+    /**
+     * Title of the overflow popover.
+     * */
+    overflowPopoverTitle: string;
+    /** @hidden */
+    _avatarGroupItemPortals: QueryList<AvatarGroupItemRendererDirective>;
+    /** @hidden */
+    _overflowPopoverStage: 'main' | 'details';
+    /** @hidden */
+    _selectedItem: AvatarGroupItemDirective;
+    /** @hidden */
+    get _isDetailStage(): boolean;
+    /** @hidden */
+    get isRtl(): boolean;
+    /** @hidden */
+    private _itemClickSubscription;
+    /** @hidden */
+    private readonly _changeDetectorRef;
+    /** @hidden */
+    private readonly _renderer;
+    /** @hidden */
+    private readonly _rtlService;
+    /** @hidden */
+    _trackByFn(_: number, item: AvatarGroupItemRendererDirective): AvatarGroupItemRendererDirective;
+    /** @hidden */
+    ngAfterViewInit(): void;
+    /** @hidden */
+    ngOnDestroy(): void;
+    /** @hidden */
+    _openOverflowMain(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DefaultAvatarGroupOverflowBodyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DefaultAvatarGroupOverflowBodyComponent, "fd-default-avatar-group-overflow-body", never, { "avatars": { "alias": "avatars"; "required": false; }; "overflowPopoverTitle": { "alias": "overflowPopoverTitle"; "required": false; }; }, {}, never, never, true, never, false>;
+}

package/avatar-group/directives/avatar-group-internal-overflow-button.directive.d.ts

@@ -0,0 +1,27 @@
+import { OnDestroy } from '@angular/core';
+import { AvatarGroupItemRendererDirective } from './avatar-group-item-renderer.directive';
+import * as i0 from "@angular/core";
+export declare class AvatarGroupInternalOverflowButtonDirective implements OnDestroy {
+    /**
+     * List of hidden items to be rendered in the overflow popover.
+     **/
+    set hiddenItems(value: AvatarGroupItemRendererDirective[] | null);
+    /** @hidden */
+    private readonly _templateRef;
+    /** @hidden */
+    private readonly _viewContainerRef;
+    /** @hidden */
+    private _embeddedView?;
+    /** @hidden */
+    static ngTemplateContextGuard(_directive: AvatarGroupInternalOverflowButtonDirective, context: unknown): context is {
+        $implicit: AvatarGroupItemRendererDirective[];
+    };
+    /** @hidden */
+    ngOnDestroy(): void;
+    /** @hidden */
+    private _show;
+    /** @hidden */
+    private _hide;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupInternalOverflowButtonDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AvatarGroupInternalOverflowButtonDirective, "[fdAvatarGroupInternalOverflowButton]", never, { "hiddenItems": { "alias": "fdAvatarGroupInternalOverflowButton"; "required": false; }; }, {}, never, never, true, never, false>;
+}

package/avatar-group/directives/avatar-group-item-renderer.directive.d.ts

@@ -0,0 +1,81 @@
+import { OnInit } from '@angular/core';
+import { FocusableItem, Nullable } from '@fundamental-ngx/cdk/utils';
+import { Observable } from 'rxjs';
+import { AvatarGroupItemDirective } from './avatar-group-item.directive';
+import * as i0 from "@angular/core";
+export declare class AvatarGroupItemRendererDirective implements OnInit, FocusableItem {
+    /**
+     * Avatar group item to be rendered.
+     **/
+    avatarGroupItem: AvatarGroupItemDirective;
+    /**
+     * Whether the item should be forced to be visible.
+     **/
+    forceVisibility: boolean;
+    /**
+     * HTML element of the item.
+     **/
+    element$: Observable<Nullable<HTMLElement>>;
+    /** @hidden */
+    keydown: Observable<KeyboardEvent>;
+    /**
+     * Whether the item is visible.
+     **/
+    get visible(): boolean;
+    /**
+     * Currently rendered element's HTMLElement.
+     **/
+    get element(): HTMLElement;
+    /**
+     * Rendered element's width or it's last saved width.
+     **/
+    get width(): number;
+    /**
+     * Rendered element's height or it's last saved height.
+     **/
+    get height(): number;
+    /** @hidden */
+    private _portalOutlet;
+    /** @hidden */
+    private _viewContainerRef;
+    /**
+     * @hidden
+     **/
+    private _element$;
+    /** @hidden */
+    private _templatePortal?;
+    /** @hidden */
+    private _isFocusable;
+    /** @hidden */
+    private _embeddedViewRef;
+    /** @hidden */
+    private _lastSavedWidth;
+    /** @hidden */
+    private _lastSavedHeight;
+    /** @hidden */
+    private _hostConfig;
+    /** @hidden */
+    constructor();
+    /** @hidden */
+    ngOnInit(): void;
+    /**
+     * Hides the item.
+     **/
+    hide(): void;
+    /**
+     * Shows the item.
+     **/
+    show(): void;
+    /**
+     * Whether the item is focusable.
+     **/
+    isFocusable: () => boolean;
+    /**
+     * Sets the tabbable state of the item.
+     **/
+    setTabbable(tabbable: boolean): void;
+    /** @hidden */
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupItemRendererDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AvatarGroupItemRendererDirective, "[fdAvatarGroupItemPortal]", ["fdAvatarGroupItemPortal"], { "avatarGroupItem": { "alias": "avatarGroupItem"; "required": false; }; "forceVisibility": { "alias": "forceVisibility"; "required": false; }; }, {}, never, never, true, never, false>;
+}

package/avatar-group/directives/avatar-group-item.directive.d.ts

@@ -1,20 +1,27 @@
-import { ElementRef } from '@angular/core';
-import { FocusableOption } from '@angular/cdk/a11y';
-import { AvatarGroupInterface } from '../avatar-group.interface';
+import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class AvatarGroupItemDirective implements FocusableOption {
-    private readonly _elementRef;
-    private readonly _component;
-    /** Item disable state */
-    disabled: boolean;
+/**
+ * Avatar group item directive, used to provide a template for the avatar group item.
+ */
+export declare class AvatarGroupItemDirective {
+    /**
+     * Text, which will be displayed when in overflow popover and activated
+     * */
+    title: string;
+    /**
+     * If set to true, item will never be hidden in overflow popover
+     * */
+    forceVisibility: boolean;
     /** @hidden */
-    constructor(_elementRef: ElementRef<HTMLElement>, _component: AvatarGroupInterface);
+    _templateRef: TemplateRef<void>;
+    /**
+     * Template for the details of the avatar group item.
+     * This template it used to render additional information in the overflow popover.
+     * */
+    set details(detailsTemplate: TemplateRef<void> | string);
+    get details(): TemplateRef<void>;
     /** @hidden */
-    get _element(): HTMLElement;
-    /** Handler for mouse events */
-    onClick(): void;
-    /** @hidden */
-    focus(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupItemDirective, [null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AvatarGroupItemDirective, "[fd-avatar-group-item]", never, {}, {}, never, never, false, never, false>;
+    private _details;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AvatarGroupItemDirective, "[fdAvatarGroupItem]", never, { "title": { "alias": "fdAvatarGroupItemTitle"; "required": false; }; "forceVisibility": { "alias": "fdAvatarGroupItemForceVisibility"; "required": false; }; "details": { "alias": "fdAvatarGroupItem"; "required": false; }; }, {}, never, never, true, never, false>;
 }

package/avatar-group/directives/avatar-group-overflow-body.directive.d.ts

@@ -1,40 +1,15 @@
-import { AfterViewInit, OnDestroy, QueryList } from '@angular/core';
-import { FocusableOption } from '@angular/cdk/a11y';
-import { HasElementRef, RtlService } from '@fundamental-ngx/cdk/utils';
-import { FocusableWithElementRef } from '../tokens';
+import { TemplateRef } from '@angular/core';
+import { AvatarGroupItemRendererDirective } from './avatar-group-item-renderer.directive';
 import * as i0 from "@angular/core";
-export declare class AvatarGroupOverflowBodyDirective implements AfterViewInit, OnDestroy {
-    private _rtlService;
-    /** Remove the padding from the overflow body. */
-    noPadding: boolean;
-    /** Hide horizontal scrollbar from the overflow body. */
-    noHorizontalScroll: boolean;
-    /** Hide vertical scrollbar from the overflow body. */
-    noVerticalScroll: boolean;
-    /** @hidden Avatar Group Overflow items. */
-    overflowItems: QueryList<FocusableWithElementRef>;
-    /** @hidden FocusKeyManager instance */
-    private _keyboardEventsManager;
-    /** @hidden */
-    private readonly _subscription;
-    /** @hidden handles rtl service */
-    private _dir;
-    /** @hidden */
-    constructor(_rtlService: RtlService);
-    /** @hidden */
-    ngAfterViewInit(): void;
-    /** @hidden */
-    ngOnDestroy(): void;
-    /** @hidden */
-    keyUpHandler(event: KeyboardEvent): void;
-    /** @hidden */
-    _setActiveItem(item: FocusableOption & HasElementRef): void;
-    /** @hidden */
-    private _listenForItemChanges;
-    /** @hidden */
-    private _setKeyboardEventsManager;
-    /** @hidden Rtl change subscription */
-    private _subscribeToRtl;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupOverflowBodyDirective, [{ optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AvatarGroupOverflowBodyDirective, "[fd-avatar-group-overflow-body]", never, { "noPadding": { "alias": "noPadding"; "required": false; }; "noHorizontalScroll": { "alias": "noHorizontalScroll"; "required": false; }; "noVerticalScroll": { "alias": "noVerticalScroll"; "required": false; }; }, {}, ["overflowItems"], never, false, never, false>;
+/**
+ * Avatar group overflow body directive, used to provide a template for the avatar group overflow body.
+ * If nothing is provided, default overflow body will be used.
+ */
+export declare class AvatarGroupOverflowBodyDirective {
+    /** @hidden */
+    readonly _templateRef: TemplateRef<{
+        hiddenItems: AvatarGroupItemRendererDirective[];
+    }>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupOverflowBodyDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AvatarGroupOverflowBodyDirective, "[fdAvatarGroupOverflowBody]", never, {}, {}, never, never, true, never, false>;
 }

package/avatar-group/directives/avatar-group-overflow-button.directive.d.ts

@@ -1,29 +1,15 @@
-import { ElementRef, OnChanges, OnInit } from '@angular/core';
-import { Size } from '@fundamental-ngx/cdk/utils';
-import { CssClassBuilder } from '@fundamental-ngx/cdk/utils';
-import { AvatarGroupOverflowButtonColor } from '../avatar-group.component';
+import { TemplateRef } from '@angular/core';
+import { AvatarGroupItemRendererDirective } from './avatar-group-item-renderer.directive';
 import * as i0 from "@angular/core";
-export declare class AvatarGroupOverflowButtonDirective implements OnInit, OnChanges, CssClassBuilder {
-    readonly elementRef: ElementRef;
-    /** User's custom classes. */
-    class: string;
-    /** The size of the overflow button.
-     * Should be the same as the Avatar Group and Avatar size.
-     * Options include: *xs*, *s*, *m*, *l* and *xl* (default: *s*). */
-    size: Size;
-    /** A number from 1 to 10 representing the background color of the Avatar Group's overflow button.
-     * Options include: *neutral*, *random*, *1*, *2*, *3*, *4*, *5*, *6*, *7*, *8*, *9*, *10* (default: *neutral*). */
-    color: AvatarGroupOverflowButtonColor;
-    /** @hidden */
-    constructor(elementRef: ElementRef);
-    /** @hidden */
-    ngOnInit(): void;
-    /** @hidden */
-    ngOnChanges(): void;
-    /** @hidden */
-    buildComponentCssClass(): string[];
-    /** @hidden */
-    private _getMoreButtonColorCssClass;
+/**
+ * Avatar group overflow button directive, used to provide a template for the avatar group overflow button.
+ * If nothing is provided, default overflow button will be used.
+ */
+export declare class AvatarGroupOverflowButtonDirective {
+    /** @hidden */
+    readonly _templateRef: TemplateRef<{
+        hiddenItems: AvatarGroupItemRendererDirective[];
+    }>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarGroupOverflowButtonDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AvatarGroupOverflowButtonDirective, "[fd-avatar-group-overflow-button]", never, { "class": { "alias": "class"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, never, false, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AvatarGroupOverflowButtonDirective, "[fdAvatarGroupOverflowButton]", never, {}, {}, never, never, true, never, false>;
 }