import * as i0 from '@angular/core'; import { TemplateRef, ElementRef, InputSignal, OutputEmitterRef, Signal, WritableSignal } from '@angular/core'; /** Avatar size variants. */ type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; /** Avatar color variants. */ type AvatarColor = 'primary' | 'accent' | 'muted' | 'warn' | 'auto'; /** Avatar shape variants. */ type AvatarShape = 'circle' | 'rounded'; /** Avatar variant types. */ type AvatarVariant = 'soft' | 'filled' | 'outline'; /** Resolved color (excludes 'auto' which is computed at runtime). */ type ResolvedAvatarColor = Exclude; /** * 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('') // '' * ``` */ declare function getInitials(name: string, maxLength?: number): string; /** * 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` */ declare const avatarVariants: (props?: { size?: AvatarSize; shape?: AvatarShape; interactive?: boolean; }) => string; /** * CVA variants for the avatar color/variant styling. * These are applied based on the resolved color and variant. */ declare const avatarColorVariants: (props?: { variant?: AvatarVariant; color?: ResolvedAvatarColor; }) => string; /** * Template context provided to custom avatar templates. * * @example * ```html * * *

* * * ``` */ interface AvatarTemplateContext { /** The `name` input value (default for `let-name`). */ $implicit: string | undefined; /** Computed initials from the name. */ initials: string; /** Current size variant, allowing templates to adapt. */ size: AvatarSize; } /** * 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. * * @tokens none * * @example Company logo * ```html * * * Acme Corp

* * * ``` * * @example Emoji avatar * ```html * * * 🤖 * * * ``` * * @example Adaptive content using size context * ```html * * * @if (size === 'xs' || size === 'sm') { * 👤 * } @else { *

* } * * * ``` */ declare class ComAvatarCustom { readonly templateRef: TemplateRef; /** * Static type guard for template type checking. * Enables type-safe access to context properties in templates. */ static ngTemplateContextGuard(_dir: ComAvatarCustom, ctx: unknown): ctx is AvatarTemplateContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** Image loading state. */ type ImageState = 'idle' | 'loading' | 'loaded' | 'error'; /** * 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 * * ``` * * @example Initials fallback (no image) * ```html * * * ``` * * @example Explicit color and shape * ```html * * * ``` * * @example Sizes — from badge to profile header * ```html * * * * * * * * * * * * * * * * * * ``` * * @example Default icon fallback (no name, no image) * ```html * * * ``` * * @example Interactive (clickable, for menus) * ```html * * ``` * * @example With status indicator (composed externally) * ```html * *

* * *

* ``` * * @example Custom template — company logo with fallback * ```html * * * Acme Corp

* * * ``` * * @example Custom template — emoji avatar * ```html * * * 🤖 * * * ``` * * @example Inline with text * ```html * * * Jane Doe * * ``` * * @example Avatar in a badge context * ```html * *

* * Jane Doe * *

* ``` * * @example Outline variant (good for overlapping stacks) * ```html *

* * * * *

* ``` */ declare class ComAvatar { /** Host element reference (used by ComAvatarGroup). */ readonly elementRef: ElementRef; /** Image URL for the avatar. */ readonly src: InputSignal; /** Alt text for the image. Falls back to `name` if not provided. */ readonly alt: InputSignal; /** User's display name — used to generate initials and as aria fallback. */ readonly name: InputSignal; /** Size variant. */ readonly size: InputSignal; /** Color variant. 'auto' deterministically picks a color based on the name. */ readonly color: InputSignal; /** Shape variant. */ readonly shape: InputSignal; /** Visual style variant. */ readonly variant: InputSignal; /** When true, renders as a button with hover/active states. */ readonly interactive: InputSignal; /** Emits when the image fails to load (after fallback kicks in). */ readonly imageError: OutputEmitterRef; /** Emits when the image loads successfully. */ readonly imageLoaded: OutputEmitterRef; /** Custom template for full control over avatar content. */ readonly customTemplate: Signal; /** * Current image loading state. * Resets to 'loading' or 'idle' when `src` changes. */ protected readonly imageState: WritableSignal; /** Resolved color (handles 'auto' based on name). */ protected readonly resolvedColor: Signal; /** Computed initials from the name. */ readonly computedInitials: Signal; /** Template context for custom templates. */ protected readonly templateContext: Signal; /** CSS classes for the host element. */ protected readonly hostClasses: Signal; /** Font size class for initials. */ protected readonly initialsSizeClass: Signal; /** Icon size for the fallback icon (same as avatar size). */ protected readonly iconSize: Signal; /** @internal Handles successful image load. */ protected onImageLoad(): void; /** @internal Handles image load error. */ protected onImageError(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * 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 *

* * * *

* ``` * * @example With max limit and overflow indicator * ```html *

* * * * * *

* * ``` * * @example Different sizes * ```html *

* * *

* *

* * *

* ``` * * @example Reversed stacking (last avatar on top) * ```html *

* * * *

* ``` */ declare class ComAvatarGroup { private readonly renderer; private readonly elementRef; /** Query all child ComAvatar components. */ private readonly avatars; /** * Size variant — should match child avatar sizes for proper spacing. * If not provided, defaults to 'md'. */ readonly size: InputSignal; /** * 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. */ readonly max: InputSignal; /** * When true, reverses the stacking order (last avatar on top instead of first). * Also reverses the visual order via flex-row-reverse. */ readonly reverse: InputSignal; /** Overflow element reference for cleanup. */ private overflowElement; /** Track the number of hidden avatars. */ protected readonly overflowCount: WritableSignal; /** Whether to show the overflow indicator. */ protected readonly showOverflow: Signal; constructor(); /** * Applies overlapping styles to child avatars and manages visibility. */ private applyAvatarStyles; /** * Gets the native element of an avatar by index. */ private getAvatarElement; /** * Creates or updates the overflow indicator element. */ private updateOverflowIndicator; /** * Returns size-specific classes for the overflow indicator. */ private getOverflowSizeClasses; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } export { ComAvatar, ComAvatarCustom, ComAvatarGroup, avatarColorVariants, avatarVariants, getInitials }; export type { AvatarColor, AvatarShape, AvatarSize, AvatarTemplateContext, AvatarVariant, ResolvedAvatarColor };