import { AvatarComponent } from '@agorapulse/ui-components/avatar';
import { CustomTooltipType, TooltipDirective } from '@agorapulse/ui-components/tooltip';
import * as i0 from '@angular/core';
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';

class AvatarGroupComponent {
    avatars = input.required(...(ngDevMode ? [{ debugName: "avatars", transform: (value) => [...value].reverse() }] : [{
            transform: (value) => [...value].reverse(),
        }]));
    size = input(24, ...(ngDevMode ? [{ debugName: "size" }] : []));
    maxAvatars = input(5, ...(ngDevMode ? [{ debugName: "maxAvatars" }] : []));
    showAvatarDescriptionTooltip = input(true, ...(ngDevMode ? [{ debugName: "showAvatarDescriptionTooltip" }] : []));
    visibleAvatars = computed(() => {
        const max = this.maxAvatars();
        const all = this.avatars();
        return all.slice(0, max);
    }, ...(ngDevMode ? [{ debugName: "visibleAvatars" }] : []));
    // avatars not displayed in the group but shown in the tooltip
    tooltipAvatars = computed(() => {
        const max = this.maxAvatars();
        const all = this.avatars();
        return all.slice(max);
    }, ...(ngDevMode ? [{ debugName: "tooltipAvatars" }] : []));
    overflowCount = computed(() => {
        const total = this.avatars().length;
        const max = this.maxAvatars();
        if (total <= max) {
            return 0;
        }
        const result = total - max;
        if (result > 99) {
            return 99;
        }
        return result;
    }, ...(ngDevMode ? [{ debugName: "overflowCount" }] : []));
    hasOverflow = computed(() => this.overflowCount() > 0, ...(ngDevMode ? [{ debugName: "hasOverflow" }] : []));
    CustomTooltipType = CustomTooltipType;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AvatarGroupComponent, isStandalone: true, selector: "ap-avatar-group", inputs: { avatars: { classPropertyName: "avatars", publicName: "avatars", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxAvatars: { classPropertyName: "maxAvatars", publicName: "maxAvatars", isSignal: true, isRequired: false, transformFunction: null }, showAvatarDescriptionTooltip: { classPropertyName: "showAvatarDescriptionTooltip", publicName: "showAvatarDescriptionTooltip", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "\"Avatar group\"" } }, ngImport: i0, template: "<div class=\"avatars-group\">\n    @if (hasOverflow()) {\n        <div\n            class=\"overflow-counter\"\n            apTooltip\n            apTooltipTrigger=\"click\"\n            [apTooltipType]=\"CustomTooltipType.LIST\"\n            [apTooltipListItems]=\"tooltipAvatars()\"\n            [attr.data-size]=\"size()\">\n            <span class=\"overflow-text\">+{{ overflowCount() }}</span>\n        </div>\n    }\n\n    <div class=\"avatars-list\">\n        @for (avatar of visibleAvatars(); track $index) {\n            <ap-avatar\n                apTooltip\n                [apTooltipType]=\"CustomTooltipType.LIST\"\n                [apTooltipListItems]=\"[avatar]\"\n                [profilePicture]=\"avatar.profilePicture\"\n                [alt]=\"avatar.alt ?? ''\"\n                [network]=\"avatar.network\"\n                [size]=\"size()\"\n                [username]=\"avatar.username\"\n                [showInitials]=\"avatar.showInitials\"\n                [bigNetwork]=\"avatar.bigNetwork ?? false\"\n                [anonymous]=\"avatar.anonymous ?? false\"\n                [online]=\"avatar.online ?? false\"\n                [rounded]=\"avatar.rounded ?? true\" />\n        }\n    </div>\n</div>\n", styles: [".avatars-group,.avatars-list{display:inline-flex;flex-direction:row-reverse;align-items:center;padding-left:2px}.avatars-group ap-avatar{cursor:default}.avatars-group ap-avatar,.avatars-group .overflow-counter{margin-inline-start:-2px}.overflow-counter{display:flex;align-items:center;justify-content:center;background-color:var(--ref-color-grey-10);border-radius:24px;transition:background-color var(--ref-animation-short);cursor:pointer}.overflow-counter:focus-visible{background-color:var(--ref-color-grey-20);outline:3px solid var(--ref-color-electric-blue-100);outline-offset:1px}.overflow-counter:hover{background-color:var(--ref-color-grey-20)}.overflow-counter:active{background-color:var(--ref-color-grey-40)}.overflow-text{color:var(--ref-color-grey-80);font-family:var(--ref-font-family);font-weight:700;line-height:1em;text-align:center}.overflow-counter[data-size=\"16\"]{width:16px;height:16px}.overflow-counter[data-size=\"16\"] .overflow-text{font-size:8px}.overflow-counter[data-size=\"24\"]{width:24px;height:24px}.overflow-counter[data-size=\"24\"] .overflow-text{font-size:10px}.overflow-counter[data-size=\"32\"]{width:32px;height:32px}.overflow-counter[data-size=\"32\"] .overflow-text{font-size:12px}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AvatarGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ap-avatar-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AvatarComponent, TooltipDirective], host: {
                        role: 'group',
                        '[attr.aria-label]': '"Avatar group"',
                    }, template: "<div class=\"avatars-group\">\n    @if (hasOverflow()) {\n        <div\n            class=\"overflow-counter\"\n            apTooltip\n            apTooltipTrigger=\"click\"\n            [apTooltipType]=\"CustomTooltipType.LIST\"\n            [apTooltipListItems]=\"tooltipAvatars()\"\n            [attr.data-size]=\"size()\">\n            <span class=\"overflow-text\">+{{ overflowCount() }}</span>\n        </div>\n    }\n\n    <div class=\"avatars-list\">\n        @for (avatar of visibleAvatars(); track $index) {\n            <ap-avatar\n                apTooltip\n                [apTooltipType]=\"CustomTooltipType.LIST\"\n                [apTooltipListItems]=\"[avatar]\"\n                [profilePicture]=\"avatar.profilePicture\"\n                [alt]=\"avatar.alt ?? ''\"\n                [network]=\"avatar.network\"\n                [size]=\"size()\"\n                [username]=\"avatar.username\"\n                [showInitials]=\"avatar.showInitials\"\n                [bigNetwork]=\"avatar.bigNetwork ?? false\"\n                [anonymous]=\"avatar.anonymous ?? false\"\n                [online]=\"avatar.online ?? false\"\n                [rounded]=\"avatar.rounded ?? true\" />\n        }\n    </div>\n</div>\n", styles: [".avatars-group,.avatars-list{display:inline-flex;flex-direction:row-reverse;align-items:center;padding-left:2px}.avatars-group ap-avatar{cursor:default}.avatars-group ap-avatar,.avatars-group .overflow-counter{margin-inline-start:-2px}.overflow-counter{display:flex;align-items:center;justify-content:center;background-color:var(--ref-color-grey-10);border-radius:24px;transition:background-color var(--ref-animation-short);cursor:pointer}.overflow-counter:focus-visible{background-color:var(--ref-color-grey-20);outline:3px solid var(--ref-color-electric-blue-100);outline-offset:1px}.overflow-counter:hover{background-color:var(--ref-color-grey-20)}.overflow-counter:active{background-color:var(--ref-color-grey-40)}.overflow-text{color:var(--ref-color-grey-80);font-family:var(--ref-font-family);font-weight:700;line-height:1em;text-align:center}.overflow-counter[data-size=\"16\"]{width:16px;height:16px}.overflow-counter[data-size=\"16\"] .overflow-text{font-size:8px}.overflow-counter[data-size=\"24\"]{width:24px;height:24px}.overflow-counter[data-size=\"24\"] .overflow-text{font-size:10px}.overflow-counter[data-size=\"32\"]{width:32px;height:32px}.overflow-counter[data-size=\"32\"] .overflow-text{font-size:12px}\n"] }]
        }], propDecorators: { avatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatars", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxAvatars: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxAvatars", required: false }] }], showAvatarDescriptionTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAvatarDescriptionTooltip", required: false }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { AvatarGroupComponent };
//# sourceMappingURL=agorapulse-ui-components-avatar-group.mjs.map
