ngx-com 0.0.1 → 0.0.4

package/fesm2022/ngx-com-components-avatar.mjs

@@ -0,0 +1,772 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, ElementRef, input, output, contentChild, linkedSignal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, Renderer2, contentChildren, signal, effect } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ComIcon } from 'ngx-com/components/icon';
+import { cva } from 'class-variance-authority';
+
+/**
+ * Directive to provide a custom template for avatar content.
+ *
+ * When this directive is used, the avatar ignores the `src`, `name`, and
+ * default icon fallback — the template has full control over the content.
+ * Use this for company logos, emoji avatars, or custom graphics.
+ *
+ * @example Company logo
+ * ```html
+ * <com-avatar name="Acme Corp" size="lg" color="primary">
+ *   <ng-template comAvatarCustom let-initials="initials">
+ *     <img src="/logos/acme.svg" class="size-full object-contain p-1" alt="Acme Corp" />
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ *
+ * @example Emoji avatar
+ * ```html
+ * <com-avatar name="Bot" color="accent" variant="filled">
+ *   <ng-template comAvatarCustom>
+ *     <span class="text-lg">🤖</span>
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ *
+ * @example Adaptive content using size context
+ * ```html
+ * <com-avatar name="Jane" [size]="avatarSize">
+ *   <ng-template comAvatarCustom let-size="size">
+ *     @if (size === 'xs' || size === 'sm') {
+ *       <span class="text-xs">👤</span>
+ *     } @else {
+ *       <img src="/custom-avatar.png" class="size-full object-cover" />
+ *     }
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ */
+class ComAvatarCustom {
+    templateRef = inject(TemplateRef);
+    /**
+     * Static type guard for template type checking.
+     * Enables type-safe access to context properties in templates.
+     */
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAvatarCustom, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComAvatarCustom, isStandalone: true, selector: "ng-template[comAvatarCustom]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAvatarCustom, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[comAvatarCustom]',
+                }]
+        }] });
+
+/** Colors available for auto-color generation. */
+const AUTO_COLORS = ['primary', 'accent', 'warn'];
+/**
+ * Deterministically generates a color index from a name string.
+ * The same name always produces the same color.
+ */
+function nameToColorIndex(name) {
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+        hash = name.charCodeAt(i) + ((hash << 5) - hash);
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    return Math.abs(hash) % AUTO_COLORS.length;
+}
+/**
+ * Resolves an auto color to a concrete color based on the name.
+ * Falls back to 'muted' when name is empty or undefined.
+ */
+function resolveAutoColor(color, name) {
+    if (color !== 'auto') {
+        return color;
+    }
+    if (!name?.trim()) {
+        return 'muted';
+    }
+    return AUTO_COLORS[nameToColorIndex(name)];
+}
+/**
+ * Generates initials from a display name.
+ *
+ * @param name - The display name to extract initials from
+ * @param maxLength - Maximum number of characters (default: 2)
+ * @returns Uppercase initials, or empty string if name is empty
+ *
+ * @example
+ * ```ts
+ * getInitials('Jane Doe')       // 'JD'
+ * getInitials('Jane')           // 'JA'
+ * getInitials('Jane Marie Doe') // 'JD' (first + last)
+ * getInitials('j')              // 'J'
+ * getInitials('')               // ''
+ * ```
+ */
+function getInitials(name, maxLength = 2) {
+    const trimmed = name.trim();
+    if (!trimmed) {
+        return '';
+    }
+    const words = trimmed.split(/\s+/);
+    if (words.length === 1) {
+        // Single word: take first N characters
+        return words[0].slice(0, maxLength).toUpperCase();
+    }
+    // Multiple words: first char of first word + first char of last word
+    const first = words[0].charAt(0);
+    const last = words[words.length - 1].charAt(0);
+    return (first + last).slice(0, maxLength).toUpperCase();
+}
+/**
+ * CVA variants for the avatar container.
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-subtle`, `--color-accent-subtle-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-subtle`, `--color-warn-subtle-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`,
+ *         `--color-border`, `--color-background`, `--color-foreground`, `--color-ring`
+ */
+const avatarVariants = cva([
+    'com-avatar',
+    'relative overflow-hidden inline-flex items-center justify-center',
+    'shrink-0 select-none',
+], {
+    variants: {
+        size: {
+            xs: 'size-5',
+            sm: 'size-7',
+            md: 'size-9',
+            lg: 'size-12',
+            xl: 'size-16',
+            '2xl': 'size-24',
+        },
+        shape: {
+            circle: 'rounded-full',
+            rounded: 'rounded-lg',
+        },
+        interactive: {
+            true: [
+                'cursor-pointer',
+                'hover:ring-2 hover:ring-ring',
+                'active:scale-95',
+                'transition-all duration-150',
+            ],
+            false: 'cursor-default',
+        },
+    },
+    compoundVariants: [
+        // Smaller rounded corners for xs/sm sizes
+        { shape: 'rounded', size: 'xs', class: 'rounded-md' },
+        { shape: 'rounded', size: 'sm', class: 'rounded-md' },
+    ],
+    defaultVariants: {
+        size: 'md',
+        shape: 'circle',
+        interactive: false,
+    },
+});
+/**
+ * CVA variants for the avatar color/variant styling.
+ * These are applied based on the resolved color and variant.
+ */
+const avatarColorVariants = cva('', {
+    variants: {
+        variant: {
+            soft: '',
+            filled: '',
+            outline: 'ring-2 ring-background bg-background text-foreground',
+        },
+        color: {
+            primary: '',
+            accent: '',
+            muted: '',
+            warn: '',
+        },
+    },
+    compoundVariants: [
+        // Soft variants
+        { variant: 'soft', color: 'primary', class: 'bg-primary-subtle text-primary-subtle-foreground' },
+        { variant: 'soft', color: 'accent', class: 'bg-accent-subtle text-accent-subtle-foreground' },
+        { variant: 'soft', color: 'warn', class: 'bg-warn-subtle text-warn-subtle-foreground' },
+        { variant: 'soft', color: 'muted', class: 'bg-muted text-muted-foreground' },
+        // Filled variants
+        { variant: 'filled', color: 'primary', class: 'bg-primary text-primary-foreground' },
+        { variant: 'filled', color: 'accent', class: 'bg-accent text-accent-foreground' },
+        { variant: 'filled', color: 'warn', class: 'bg-warn text-warn-foreground' },
+        { variant: 'filled', color: 'muted', class: 'bg-muted-foreground text-muted' },
+    ],
+    defaultVariants: {
+        variant: 'soft',
+        color: 'primary',
+    },
+});
+/** Font size classes for initials, keyed by avatar size. */
+const AVATAR_INITIALS_SIZES = {
+    xs: 'text-[0.5rem]',
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base',
+    xl: 'text-xl',
+    '2xl': 'text-3xl',
+};
+/** Ring width classes for outline variant, keyed by avatar size. */
+const AVATAR_OUTLINE_RING_SIZES = {
+    xs: 'ring-1',
+    sm: 'ring-[1.5px]',
+    md: 'ring-2',
+    lg: 'ring-2',
+    xl: 'ring-2',
+    '2xl': 'ring-[3px]',
+};
+
+/**
+ * Avatar component — displays a user's profile image, initials, or a fallback icon.
+ *
+ * Handles the full lifecycle of image loading with a graceful fallback chain:
+ * 1. Custom template (via `comAvatarCustom` directive) — if provided, always wins
+ * 2. Image — if `src` is provided and loads successfully
+ * 3. Initials — if `name` is provided, auto-generated from the name
+ * 4. Default icon — generic user silhouette via `com-icon`
+ *
+ * **Note:** The default fallback icon requires the `User` icon from lucide-angular
+ * to be registered via `provideComIcons({ User })` in your application config.
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-subtle`, `--color-accent-subtle-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-subtle`, `--color-warn-subtle-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`,
+ *         `--color-border`, `--color-background`, `--color-foreground`, `--color-ring`
+ *
+ * @example Simple image avatar
+ * ```html
+ * <com-avatar src="/photos/jane.jpg" name="Jane Doe" />
+ * ```
+ *
+ * @example Initials fallback (no image)
+ * ```html
+ * <com-avatar name="Jane Doe" />
+ * <!-- renders "JD" with auto-computed background color -->
+ * ```
+ *
+ * @example Explicit color and shape
+ * ```html
+ * <com-avatar name="John Smith" color="primary" variant="filled" />
+ * <com-avatar name="Alice" color="accent" shape="rounded" />
+ * ```
+ *
+ * @example Sizes — from badge to profile header
+ * ```html
+ * <!-- Tiny: inside a badge or inline with text -->
+ * <com-avatar name="JD" size="xs" />
+ *
+ * <!-- Small: list items, comments -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" size="sm" />
+ *
+ * <!-- Medium: default, cards -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" />
+ *
+ * <!-- Large: profile sidebar -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" size="lg" />
+ *
+ * <!-- Extra large: profile hero -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" size="xl" />
+ *
+ * <!-- 2XL: full profile page header -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" size="2xl" />
+ * ```
+ *
+ * @example Default icon fallback (no name, no image)
+ * ```html
+ * <!-- Shows generic user icon -->
+ * <com-avatar />
+ * ```
+ *
+ * @example Interactive (clickable, for menus)
+ * ```html
+ * <com-avatar
+ *   src="/photos/me.jpg"
+ *   name="My Profile"
+ *   [interactive]="true"
+ *   (click)="openProfileMenu()"
+ * />
+ * ```
+ *
+ * @example With status indicator (composed externally)
+ * ```html
+ * <!-- The avatar itself doesn't own the status dot — the consumer composes it -->
+ * <div class="relative inline-flex">
+ *   <com-avatar src="/photos/jane.jpg" name="Jane" size="sm" />
+ *   <span class="absolute bottom-0 right-0 size-2.5 rounded-full bg-success ring-2 ring-background"></span>
+ * </div>
+ * ```
+ *
+ * @example Custom template — company logo with fallback
+ * ```html
+ * <com-avatar name="Acme Corp" size="lg" color="primary">
+ *   <ng-template comAvatarCustom let-initials="initials">
+ *     <img src="/logos/acme.svg" class="size-full object-contain p-1" alt="Acme Corp" />
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ *
+ * @example Custom template — emoji avatar
+ * ```html
+ * <com-avatar name="Bot" color="accent" variant="filled">
+ *   <ng-template comAvatarCustom>
+ *     <span class="text-lg">🤖</span>
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ *
+ * @example Inline with text
+ * ```html
+ * <span class="inline-flex items-center gap-2">
+ *   <com-avatar name="Jane Doe" size="xs" />
+ *   <span class="text-sm">Jane Doe</span>
+ * </span>
+ * ```
+ *
+ * @example Avatar in a badge context
+ * ```html
+ * <!-- Works at xs/sm sizes without breaking layout -->
+ * <div class="flex items-center gap-1.5 rounded-pill bg-muted px-2 py-0.5">
+ *   <com-avatar name="Jane" size="xs" />
+ *   <span class="text-xs">Jane Doe</span>
+ *   <button class="text-muted-foreground hover:text-foreground">
+ *     <com-icon name="x" size="xs" />
+ *   </button>
+ * </div>
+ * ```
+ *
+ * @example Outline variant (good for overlapping stacks)
+ * ```html
+ * <div class="flex -space-x-2">
+ *   <com-avatar src="/photos/a.jpg" name="Alice" size="sm" variant="outline" />
+ *   <com-avatar src="/photos/b.jpg" name="Bob" size="sm" variant="outline" />
+ *   <com-avatar src="/photos/c.jpg" name="Carol" size="sm" variant="outline" />
+ *   <com-avatar name="+3" size="sm" variant="outline" color="muted" />
+ * </div>
+ * ```
+ */
+class ComAvatar {
+    /** Host element reference (used by ComAvatarGroup). */
+    elementRef = inject(ElementRef);
+    // ─── Content ───
+    /** Image URL for the avatar. */
+    src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : []));
+    /** Alt text for the image. Falls back to `name` if not provided. */
+    alt = input(...(ngDevMode ? [undefined, { debugName: "alt" }] : []));
+    /** User's display name — used to generate initials and as aria fallback. */
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    // ─── CVA Variants ───
+    /** Size variant. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Color variant. 'auto' deterministically picks a color based on the name. */
+    color = input('auto', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    /** Shape variant. */
+    shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    /** Visual style variant. */
+    variant = input('soft', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    // ─── Behavior ───
+    /** When true, renders as a button with hover/active states. */
+    interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : []));
+    // ─── Outputs ───
+    /** Emits when the image fails to load (after fallback kicks in). */
+    imageError = output();
+    /** Emits when the image loads successfully. */
+    imageLoaded = output();
+    // ─── Template Projection ───
+    /** Custom template for full control over avatar content. */
+    customTemplate = contentChild(ComAvatarCustom, ...(ngDevMode ? [{ debugName: "customTemplate" }] : []));
+    // ─── Internal State ───
+    /**
+     * Current image loading state.
+     * Resets to 'loading' or 'idle' when `src` changes.
+     */
+    imageState = linkedSignal({ ...(ngDevMode ? { debugName: "imageState" } : {}), source: this.src,
+        computation: (src) => src ? 'loading' : 'idle' });
+    // ─── Computed Values ───
+    /** Resolved color (handles 'auto' based on name). */
+    resolvedColor = computed(() => resolveAutoColor(this.color(), this.name()), ...(ngDevMode ? [{ debugName: "resolvedColor" }] : []));
+    /** Computed initials from the name. */
+    computedInitials = computed(() => {
+        const name = this.name();
+        return name ? getInitials(name) : '';
+    }, ...(ngDevMode ? [{ debugName: "computedInitials" }] : []));
+    /** Template context for custom templates. */
+    templateContext = computed(() => ({
+        $implicit: this.name(),
+        initials: this.computedInitials(),
+        size: this.size(),
+    }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
+    /** CSS classes for the host element. */
+    hostClasses = computed(() => {
+        const baseClasses = avatarVariants({
+            size: this.size(),
+            shape: this.shape(),
+            interactive: this.interactive(),
+        });
+        const colorClasses = this.variant() === 'outline'
+            ? avatarColorVariants({ variant: 'outline' })
+            : avatarColorVariants({
+                variant: this.variant(),
+                color: this.resolvedColor(),
+            });
+        // Add outline ring size for outline variant
+        const ringClass = this.variant() === 'outline'
+            ? AVATAR_OUTLINE_RING_SIZES[this.size()]
+            : '';
+        return [baseClasses, colorClasses, ringClass].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    /** Font size class for initials. */
+    initialsSizeClass = computed(() => AVATAR_INITIALS_SIZES[this.size()], ...(ngDevMode ? [{ debugName: "initialsSizeClass" }] : []));
+    /** Icon size for the fallback icon (same as avatar size). */
+    iconSize = this.size;
+    // ─── Event Handlers ───
+    /** @internal Handles successful image load. */
+    onImageLoad() {
+        this.imageState.set('loaded');
+        this.imageLoaded.emit();
+    }
+    /** @internal Handles image load error. */
+    onImageError() {
+        this.imageState.set('error');
+        this.imageError.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComAvatar, isStandalone: true, selector: "com-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageError: "imageError", imageLoaded: "imageLoaded" }, host: { properties: { "class": "hostClasses()", "attr.role": "interactive() ? \"button\" : \"img\"", "attr.tabindex": "interactive() ? 0 : null", "attr.aria-label": "alt() || name() || \"User avatar\"" } }, queries: [{ propertyName: "customTemplate", first: true, predicate: ComAvatarCustom, descendants: true, isSignal: true }], exportAs: ["comAvatar"], ngImport: i0, template: `
+    <!-- Layer 1: Background content (initials, icon, or custom template) -->
+    @if (customTemplate(); as template) {
+      <!-- Custom template — full consumer control -->
+      <ng-container
+        [ngTemplateOutlet]="template.templateRef"
+        [ngTemplateOutletContext]="templateContext()"
+      />
+    } @else if (computedInitials()) {
+      <!-- Initials -->
+      <span
+        aria-hidden="true"
+        class="font-medium leading-none"
+        [class]="initialsSizeClass()"
+      >
+        {{ computedInitials() }}
+      </span>
+    } @else {
+      <!-- Default icon fallback -->
+      <com-icon name="user" [size]="iconSize()" aria-hidden="true" />
+    }
+
+    <!-- Layer 2: Image (overlays the fallback when loaded) -->
+    @if (src() && !customTemplate()) {
+      <img
+        [src]="src()"
+        [alt]="alt() || name() || 'Avatar'"
+        class="absolute inset-0 size-full object-cover transition-opacity duration-200"
+        [class.opacity-0]="imageState() !== 'loaded'"
+        [class.opacity-100]="imageState() === 'loaded'"
+        [style.border-radius]="'inherit'"
+        (load)="onImageLoad()"
+        (error)="onImageError()"
+      />
+    }
+
+    <!-- Screen reader text -->
+    <span class="sr-only">{{ alt() || name() || 'User avatar' }}</span>
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAvatar, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-avatar', exportAs: 'comAvatar', template: `
+    <!-- Layer 1: Background content (initials, icon, or custom template) -->
+    @if (customTemplate(); as template) {
+      <!-- Custom template — full consumer control -->
+      <ng-container
+        [ngTemplateOutlet]="template.templateRef"
+        [ngTemplateOutletContext]="templateContext()"
+      />
+    } @else if (computedInitials()) {
+      <!-- Initials -->
+      <span
+        aria-hidden="true"
+        class="font-medium leading-none"
+        [class]="initialsSizeClass()"
+      >
+        {{ computedInitials() }}
+      </span>
+    } @else {
+      <!-- Default icon fallback -->
+      <com-icon name="user" [size]="iconSize()" aria-hidden="true" />
+    }
+
+    <!-- Layer 2: Image (overlays the fallback when loaded) -->
+    @if (src() && !customTemplate()) {
+      <img
+        [src]="src()"
+        [alt]="alt() || name() || 'Avatar'"
+        class="absolute inset-0 size-full object-cover transition-opacity duration-200"
+        [class.opacity-0]="imageState() !== 'loaded'"
+        [class.opacity-100]="imageState() === 'loaded'"
+        [style.border-radius]="'inherit'"
+        (load)="onImageLoad()"
+        (error)="onImageError()"
+      />
+    }
+
+    <!-- Screen reader text -->
+    <span class="sr-only">{{ alt() || name() || 'User avatar' }}</span>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, ComIcon], host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': 'interactive() ? "button" : "img"',
+                        '[attr.tabindex]': 'interactive() ? 0 : null',
+                        '[attr.aria-label]': 'alt() || name() || "User avatar"',
+                    }, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], imageError: [{ type: i0.Output, args: ["imageError"] }], imageLoaded: [{ type: i0.Output, args: ["imageLoaded"] }], customTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComAvatarCustom), { isSignal: true }] }] } });
+
+/** Spacing between overlapping avatars, keyed by size. */
+const AVATAR_GROUP_SPACING = {
+    xs: '-0.375rem', // -6px, ~30% of 20px
+    sm: '-0.5rem', // -8px, ~29% of 28px
+    md: '-0.625rem', // -10px, ~28% of 36px
+    lg: '-0.75rem', // -12px, ~25% of 48px
+    xl: '-1rem', // -16px, ~25% of 64px
+    '2xl': '-1.5rem', // -24px, ~25% of 96px
+};
+/** Ring width for visual separation, keyed by size. */
+const AVATAR_GROUP_RING = {
+    xs: '1px',
+    sm: '1.5px',
+    md: '2px',
+    lg: '2px',
+    xl: '2px',
+    '2xl': '3px',
+};
+/**
+ * Avatar group directive — displays multiple avatars in an overlapping stack.
+ *
+ * Apply this directive to a container element with `com-avatar` children.
+ * The directive handles negative spacing, ring styling for visual separation,
+ * and optionally limits the visible avatars with an overflow indicator.
+ *
+ * **Note:** Child avatars should use `variant="outline"` for best visual results,
+ * as this provides the ring that separates overlapping avatars. The directive
+ * adds `ring-background` to ensure proper visual separation.
+ *
+ * @tokens `--color-background`, `--color-muted`, `--color-muted-foreground`
+ *
+ * @example Basic usage
+ * ```html
+ * <div comAvatarGroup>
+ *   <com-avatar src="/photos/a.jpg" name="Alice" variant="outline" />
+ *   <com-avatar src="/photos/b.jpg" name="Bob" variant="outline" />
+ *   <com-avatar src="/photos/c.jpg" name="Carol" variant="outline" />
+ * </div>
+ * ```
+ *
+ * @example With max limit and overflow indicator
+ * ```html
+ * <div comAvatarGroup [max]="3">
+ *   <com-avatar src="/photos/a.jpg" name="Alice" variant="outline" />
+ *   <com-avatar src="/photos/b.jpg" name="Bob" variant="outline" />
+ *   <com-avatar src="/photos/c.jpg" name="Carol" variant="outline" />
+ *   <com-avatar src="/photos/d.jpg" name="Dave" variant="outline" />
+ *   <com-avatar src="/photos/e.jpg" name="Eve" variant="outline" />
+ * </div>
+ * <!-- Shows 3 avatars + "+2" indicator -->
+ * ```
+ *
+ * @example Different sizes
+ * ```html
+ * <div comAvatarGroup size="sm">
+ *   <com-avatar name="A" size="sm" variant="outline" />
+ *   <com-avatar name="B" size="sm" variant="outline" />
+ * </div>
+ *
+ * <div comAvatarGroup size="lg">
+ *   <com-avatar name="A" size="lg" variant="outline" />
+ *   <com-avatar name="B" size="lg" variant="outline" />
+ * </div>
+ * ```
+ *
+ * @example Reversed stacking (last avatar on top)
+ * ```html
+ * <div comAvatarGroup [reverse]="true">
+ *   <com-avatar name="First" variant="outline" />
+ *   <com-avatar name="Second" variant="outline" />
+ *   <com-avatar name="Third (on top)" variant="outline" />
+ * </div>
+ * ```
+ */
+class ComAvatarGroup {
+    renderer = inject(Renderer2);
+    elementRef = inject(ElementRef);
+    /** Query all child ComAvatar components. */
+    avatars = contentChildren(ComAvatar, ...(ngDevMode ? [{ debugName: "avatars" }] : []));
+    /**
+     * Size variant — should match child avatar sizes for proper spacing.
+     * If not provided, defaults to 'md'.
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /**
+     * Maximum number of avatars to display.
+     * When exceeded, remaining avatars are hidden and an overflow indicator shows "+N".
+     * Set to 0 or undefined for unlimited.
+     */
+    max = input(...(ngDevMode ? [undefined, { debugName: "max" }] : []));
+    /**
+     * When true, reverses the stacking order (last avatar on top instead of first).
+     * Also reverses the visual order via flex-row-reverse.
+     */
+    reverse = input(false, ...(ngDevMode ? [{ debugName: "reverse" }] : []));
+    /** Overflow element reference for cleanup. */
+    overflowElement = null;
+    /** Track the number of hidden avatars. */
+    overflowCount = signal(0, ...(ngDevMode ? [{ debugName: "overflowCount" }] : []));
+    /** Whether to show the overflow indicator. */
+    showOverflow = computed(() => this.overflowCount() > 0, ...(ngDevMode ? [{ debugName: "showOverflow" }] : []));
+    constructor() {
+        // Apply styling to avatars when they change
+        effect(() => {
+            const avatarList = this.avatars();
+            const maxCount = this.max();
+            const size = this.size();
+            const isReverse = this.reverse();
+            this.applyAvatarStyles(avatarList, maxCount, size, isReverse);
+        });
+    }
+    /**
+     * Applies overlapping styles to child avatars and manages visibility.
+     */
+    applyAvatarStyles(avatars, max, size, reverse) {
+        const spacing = AVATAR_GROUP_SPACING[size];
+        const ringWidth = AVATAR_GROUP_RING[size];
+        const total = avatars.length;
+        const visibleCount = max && max > 0 ? Math.min(max, total) : total;
+        const hiddenCount = total - visibleCount;
+        this.overflowCount.set(hiddenCount);
+        avatars.forEach((avatar, index) => {
+            const hostEl = avatar['elementRef']?.nativeElement
+                ?? this.getAvatarElement(index);
+            if (!hostEl)
+                return;
+            // Determine if this avatar should be visible
+            const isVisible = index < visibleCount;
+            // Apply visibility
+            this.renderer.setStyle(hostEl, 'display', isVisible ? 'inline-flex' : 'none');
+            if (!isVisible)
+                return;
+            // Apply negative margin for overlap (not on first visible item)
+            if (index > 0) {
+                const marginProp = reverse ? 'marginRight' : 'marginLeft';
+                this.renderer.setStyle(hostEl, marginProp, spacing);
+            }
+            // Apply z-index for stacking (first on top by default, last on top if reverse)
+            const zIndex = reverse ? index + 1 : total - index;
+            this.renderer.setStyle(hostEl, 'zIndex', zIndex.toString());
+            this.renderer.setStyle(hostEl, 'position', 'relative');
+            // Add ring for visual separation
+            this.renderer.setStyle(hostEl, 'boxShadow', `0 0 0 ${ringWidth} var(--color-background)`);
+        });
+        // Manage overflow indicator
+        this.updateOverflowIndicator(hiddenCount, size, spacing, reverse, visibleCount);
+    }
+    /**
+     * Gets the native element of an avatar by index.
+     */
+    getAvatarElement(index) {
+        const children = this.elementRef.nativeElement.querySelectorAll('com-avatar');
+        return children[index];
+    }
+    /**
+     * Creates or updates the overflow indicator element.
+     */
+    updateOverflowIndicator(count, size, spacing, reverse, _visibleCount) {
+        if (count <= 0) {
+            // Remove existing overflow element
+            if (this.overflowElement) {
+                this.renderer.removeChild(this.elementRef.nativeElement, this.overflowElement);
+                this.overflowElement = null;
+            }
+            return;
+        }
+        // Create overflow element if it doesn't exist
+        let el = this.overflowElement;
+        if (!el) {
+            el = this.renderer.createElement('span');
+            this.renderer.addClass(el, 'com-avatar-group__overflow');
+            this.overflowElement = el;
+        }
+        // Apply size-specific classes and styles
+        const sizeClasses = this.getOverflowSizeClasses(size);
+        const ringWidth = AVATAR_GROUP_RING[size];
+        // Reset classes and reapply
+        el.className = 'com-avatar-group__overflow';
+        sizeClasses.forEach(cls => this.renderer.addClass(el, cls));
+        // Apply base styles
+        this.renderer.setStyle(el, 'display', 'inline-flex');
+        this.renderer.setStyle(el, 'alignItems', 'center');
+        this.renderer.setStyle(el, 'justifyContent', 'center');
+        this.renderer.setStyle(el, 'borderRadius', '9999px');
+        this.renderer.setStyle(el, 'backgroundColor', 'var(--color-muted)');
+        this.renderer.setStyle(el, 'color', 'var(--color-muted-foreground)');
+        this.renderer.setStyle(el, 'fontWeight', '500');
+        this.renderer.setStyle(el, 'position', 'relative');
+        this.renderer.setStyle(el, 'zIndex', '0');
+        this.renderer.setStyle(el, 'boxShadow', `0 0 0 ${ringWidth} var(--color-background)`);
+        this.renderer.setStyle(el, 'userSelect', 'none');
+        // Apply negative margin
+        const marginProp = reverse ? 'marginRight' : 'marginLeft';
+        this.renderer.setStyle(el, marginProp, spacing);
+        // Update text content
+        el.textContent = `+${count}`;
+        // Ensure it's in the DOM at the correct position
+        if (!el.parentElement) {
+            if (reverse) {
+                // Insert at the beginning for reverse mode
+                this.renderer.insertBefore(this.elementRef.nativeElement, el, this.elementRef.nativeElement.firstChild);
+            }
+            else {
+                // Append at the end for normal mode
+                this.renderer.appendChild(this.elementRef.nativeElement, el);
+            }
+        }
+    }
+    /**
+     * Returns size-specific classes for the overflow indicator.
+     */
+    getOverflowSizeClasses(size) {
+        const sizeMap = {
+            xs: ['size-5', 'text-[0.5rem]'],
+            sm: ['size-7', 'text-xs'],
+            md: ['size-9', 'text-sm'],
+            lg: ['size-12', 'text-base'],
+            xl: ['size-16', 'text-xl'],
+            '2xl': ['size-24', 'text-3xl'],
+        };
+        return sizeMap[size];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.0", type: ComAvatarGroup, isStandalone: true, selector: "[comAvatarGroup]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.flex-row-reverse": "reverse()" }, classAttribute: "com-avatar-group inline-flex items-center" }, queries: [{ propertyName: "avatars", predicate: ComAvatar, isSignal: true }], exportAs: ["comAvatarGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAvatarGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comAvatarGroup]',
+                    exportAs: 'comAvatarGroup',
+                    host: {
+                        class: 'com-avatar-group inline-flex items-center',
+                        '[class.flex-row-reverse]': 'reverse()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { avatars: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ComAvatar), { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }] } });
+
+// Public API for the avatar component
+// Main component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComAvatar, ComAvatarCustom, ComAvatarGroup, avatarColorVariants, avatarVariants, getInitials };
+//# sourceMappingURL=ngx-com-components-avatar.mjs.map