@sixbell-telco/sdk/components/avatar/src/avatar.component.d.ts

A collection of reusable components designed for use in Sixbell Telco Angular projects

import * as i0 from "@angular/core";
/**
 * Represents a user object for the avatar component.
 *
 * @property {string} displayName - The full display name of the user.
 * @property {string} firstInitial - The first initial of the user's name.
 * @property {string} lastInitial - The last initial of the user's name (optional).
 * @property {string} role - The role of the user.
 */
export type AvatarUser = {
    displayName: string;
    firstInitial: string;
    lastInitial?: string;
    role: string;
};
/**
 * Possible presence indicator states.
 */
export type AvatarPresenceProps = 'online' | 'offline' | null | undefined;
/**
 * CSS class generator for the avatar inner container.
 *
 * Generates Tailwind CSS classes based on variant, shape, and size following DaisyUI patterns.
 */
export declare const avatarInnerComponent: (props?: ({
    variant?: "primary" | "secondary" | "tertiary" | "accent" | null | undefined;
    shape?: "square" | "rounded" | null | undefined;
    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
 * Possible values for the avatar variant.
 */
export type AvatarVariantProps = 'primary' | 'secondary' | 'tertiary' | 'accent' | null | undefined;
/**
 * Possible values for the avatar shape.
 */
export type AvatarShapeProps = 'square' | 'rounded' | null | undefined;
/**
 * Possible values for the avatar size.
 */
export type AvatarSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | null | undefined;
/**
 * Configuration properties for the avatar component.
 */
export type AvatarProps = {
    variant?: AvatarVariantProps;
    shape?: AvatarShapeProps;
    size?: AvatarSizeProps;
    presence?: AvatarPresenceProps;
};
/**
 * A customizable avatar component following DaisyUI v5 patterns.
 *
 * @remarks
 * This component uses Angular's signal-based inputs for reactive state management.
 * It follows DaisyUI's avatar component structure and supports relative text sizing using em units.
 *
 * @example
 * ```html
 * <st-avatar
 *   [variant]="'neutral'"
 *   [shape]="'rounded'"
 *   [size]="'md'"
 *   [user]="userObject"
 *   [ring]="true"
 *   [presence]="'online'"
 *   [image]="userImageUrl"
 *   [showNameAndRole]="true">
 * </st-avatar>
 * ```
 */
export declare class AvatarComponent {
    /**
     * Specifies the visual variant of the avatar.
     *
     * @default neutral
     */
    variant: import("@angular/core").InputSignal<AvatarVariantProps>;
    /**
     * Specifies the shape of the avatar (e.g., square or rounded).
     *
     * @default square
     */
    shape: import("@angular/core").InputSignal<AvatarShapeProps>;
    /**
     * Specifies the size of the avatar.
     *
     * @default sm
     */
    size: import("@angular/core").InputSignal<AvatarSizeProps>;
    /**
     * Enables or disables a ring effect on the avatar based on the current variant.
     *
     * @default true
     */
    ring: import("@angular/core").InputSignal<boolean>;
    /**
     * Specifies the presence indicator state.
     *
     * @default undefined
     */
    presence: import("@angular/core").InputSignal<AvatarPresenceProps>;
    /**
     * The user data used to display avatar initials when no image is provided.
     *
     * @remarks This property is required.
     */
    user: import("@angular/core").InputSignal<AvatarUser>;
    /**
     * URL of the user's avatar image.
     *
     * @default undefined
     */
    image: import("@angular/core").InputSignal<string | undefined>;
    /**
     * Flag indicating whether the user's name and role should be displayed.
     *
     * @default false
     */
    showNameAndRole: import("@angular/core").InputSignal<boolean>;
    /**
     * Computed property that returns the initials derived from the user's name.
     *
     * @returns {string} The concatenated initials in uppercase.
     */
    initials: import("@angular/core").Signal<string>;
    /**
     * Computes the CSS classes for the avatar container following DaisyUI patterns.
     *
     * @returns {string} Combined classes including presence indicators.
     */
    containerClass: import("@angular/core").Signal<string>;
    /**
     * Computes the CSS classes for the avatar inner element.
     *
     * @returns {string} Combined Tailwind CSS classes.
     */
    componentClass: import("@angular/core").Signal<string>;
    /**
     * Computes the CSS classes for the text size of the user's name.
     *
     * @returns {string} Tailwind CSS classes for text sizing.
     */
    nameTextSizeClass: import("@angular/core").Signal<string>;
    /**
     * Computes the CSS classes for the text size of the user's role.
     *
     * @returns {string} Tailwind CSS classes for text sizing.
     */
    roleTextSizeClass: import("@angular/core").Signal<string>;
    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "st-avatar", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ring": { "alias": "ring"; "required": false; "isSignal": true; }; "presence": { "alias": "presence"; "required": false; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "showNameAndRole": { "alias": "showNameAndRole"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}