import { AvatarShape, AvatarVariant } from '../../dap-design-system'; import { DdsElement } from '../../internal/dds-hu-element'; declare const AvatarBaseWithSized: typeof DdsElement & { new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface; prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface; }; /** * `dap-ds-avatar` * @summary Avatar component can be used to display user profile images, initials, or icons. * @element dap-ds-avatar * @title - Avatar * * @slot icon - The icon to display when variant is 'icon'. * @slot fallback - Custom fallback content when image fails to load. * * @event dds-load - Fired when the image loads successfully. * @event dds-error - Fired when the image fails to load. * * @csspart base - The main avatar container. * @csspart img - The avatar image. * @csspart initials - The initials container. * @csspart icon - The icon container. * @csspart fallback - The fallback content container. * @csspart loading - The loading indicator. * * @cssproperty --dds-avatar-border-radius - The border radius of the avatar (default: 50%) * @cssproperty --dds-avatar-background-color - The background color of the avatar (default: var(--dds-neutral-200)) * @cssproperty --dds-avatar-border-width - The border width of the avatar (default: 0) * @cssproperty --dds-avatar-border-color - The color of the avatar's border (default: transparent) * @cssproperty --dds-avatar-border-style - The style of the avatar's border (default: solid) * @cssproperty --dds-avatar-transition - The transition property for the avatar (default: all 0.2s ease-in-out) * @cssproperty --dds-avatar-text-color - The text color for initials (default: var(--dds-text-neutral-strong)) * @cssproperty --dds-avatar-font-weight - The font weight for initials (default: var(--dds-font-weight-bold)) * @cssproperty --dds-avatar-lg-size - Size for large avatars (default: var(--dds-avatar-size-lg)) * @cssproperty --dds-avatar-md-size - Size for medium avatars (default: var(--dds-avatar-size-md)) * @cssproperty --dds-avatar-sm-size - Size for small avatars (default: var(--dds-avatar-size-sm)) * @cssproperty --dds-avatar-xs-size - Size for extra small avatars (default: var(--dds-avatar-size-xs)) * @cssproperty --dds-avatar-xxs-size - Size for extra extra small avatars (default: var(--dds-avatar-size-xxs)) * @cssproperty --dds-avatar-font-size-lg - Font size for large avatars (default: var(--dds-font-2xl)) * @cssproperty --dds-avatar-font-size-md - Font size for medium avatars (default: var(--dds-font-lg)) * @cssproperty --dds-avatar-font-size-sm - Font size for small avatars (default: var(--dds-font-base)) * @cssproperty --dds-avatar-font-size-xs - Font size for extra small avatars (default: var(--dds-font-sm)) * @cssproperty --dds-avatar-font-size-xxs - Font size for extra extra small avatars (default: var(--dds-font-xs)) * @cssproperty --dds-avatar-hover-transform - Transform applied on hover for interactive avatars (default: scale(1.05)) * @cssproperty --dds-avatar-active-transform - Transform applied when active for interactive avatars (default: scale(0.95)) * @cssproperty --dds-avatar-focus-ring - Focus ring style for interactive avatars (default: 0 0 0 2px var(--dds-focus-outer-ring)) * @cssproperty --dds-avatar-loading-background - Background color when loading (default: var(--dds-neutral-100)) * @cssproperty --dds-avatar-error-background - Background color when image fails to load (default: var(--dds-negative-100)) * @cssproperty --dds-avatar-error-color - Text color when image fails to load (default: var(--dds-negative-600)) * * @property { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' } size - The size of the avatar. Default is `md`. * @property {string} sizeMap - Responsive size map (e.g. "md:lg"). */ export default class DapDSAvatar extends AvatarBaseWithSized { /** The shape of the avatar * @default circle * @type { 'circle' | 'rounded' | 'square' } * @example * ```html * * * * ``` */ shape: AvatarShape; /** The variant type of the avatar * @default image * @type { 'image' | 'initials' | 'icon' } * @example * ```html * * * * ``` */ variant: AvatarVariant; /** The source of the avatar image */ src: string; /** The alt text of the avatar */ alt: string; /** The initials to display when variant is 'initials' */ initials: string; /** Accessible label for the avatar */ label: string; /** Loading state indicator */ loading: boolean; /** Whether the avatar is interactive (clickable) */ interactive: boolean; /** The width of the avatar. This will override the size */ width: number; /** The height of the avatar. This will override the size */ height: number; private hasImageError; constructor(); private isImageLoading; static readonly styles: import('lit').CSSResult; private handleImageLoad; private handleImageError; private handleClick; private generateInitials; private mapSizeToSpinnerSize; private renderImage; private renderInitials; private renderIcon; private renderFallback; private renderLoading; private renderContent; render(): import('lit-html').TemplateResult; } export {};