@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
140 lines (139 loc) • 5.01 kB
TypeScript
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} part1 - The first part of the user's name (used for initials).
* @property {string} part2 - The second part of the user's name (used for initials).
* @property {string} role - The role of the user.
*/
export type AvatarUser = {
displayName: string;
firstInitial: string;
lastInitial?: string;
role: string;
};
/**
* Possible avatar types.
*/
export type AvatarTypes = 'quick' | 'profile';
/**
* CSS class generator for the avatar component.
*
* Generates Tailwind CSS classes based on variant, shape, and size.
*/
export declare const avatarComponent: (props?: ({
variant?: "neutral" | "neutralSecondary" | "neutralTertiary" | null | undefined;
shape?: "square" | "rounded" | null | undefined;
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
* Possible values for the avatar variant.
*/
export type AvatarVariantProps = 'neutral' | 'neutralSecondary' | 'neutralTertiary' | 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' | null | undefined;
/**
* Configuration properties for the avatar component.
*/
export type AvatarProps = {
variant?: AvatarVariantProps;
shape?: AvatarShapeProps;
size?: AvatarSizeProps;
};
/**
* A customizable avatar component for displaying user images or initials.
*
* @remarks
* This component uses Angular's signal-based inputs for reactive state management.
* It computes various CSS classes dynamically based on the provided properties.
*
* @example
* ```html
* <st-avatar
* [variant]="'neutral'"
* [shape]="'rounded-sm'"
* [size]="'md'"
* [user]="userObject"
* [shadow]="true"
* [image]="userImageUrl"
* [showNameAndRole]="true">
* </st-avatar>
* ```
*/
export declare class AvatarComponent {
/**
* Specifies the visual variant of the avatar.
*
* @default neutralTertiary
*/
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 shadow effect on the avatar.
*
* @default false
*/
shadow: import("@angular/core").InputSignal<boolean>;
/**
* 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 based on variant, shape, and size.
*
* @returns {string} Combined Tailwind CSS classes.
*/
componentClass: import("@angular/core").Signal<string>;
/**
* Computes the CSS classes for the avatar container.
*
* @returns {string} Combined classes that include placeholder and shadow effects.
*/
containerClass: import("@angular/core").Signal<string>;
/**
* Computes the CSS classes for the text size of the user's name and role.
*
* @returns {string} Tailwind CSS classes for text sizing.
*/
nameAndRoleTextSizeClass: 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; }; "shadow": { "alias": "shadow"; "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>;
}