dap-design-system/dist/components/avatar/avatar.component.d.ts

Official design system for the DÁP (dap.gov.hu)

import { AvatarShape, AvatarVariant } from '../../dap-design-system';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as UserUserLine } from '../icons/user/user-user-line/user-user-line.component';
import { default as DapDSSpinner } from '../spinner/spinner.component';
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 {
    static tagName: string;
    static dependencies: {
        'dap-ds-icon-user-line': typeof UserUserLine;
        'dap-ds-spinner': typeof DapDSSpinner;
    };
    /** The shape of the avatar
     * @default circle
     * @type { 'circle' | 'rounded' | 'square' }
     * @example
     * ```html
     * <dap-ds-avatar shape="circle">
     * <dap-ds-avatar shape="rounded">
     * <dap-ds-avatar shape="square">
     * ```
     */
    shape: AvatarShape;
    /** The variant type of the avatar
     * @default image
     * @type { 'image' | 'initials' | 'icon' }
     * @example
     * ```html
     * <dap-ds-avatar variant="image">
     * <dap-ds-avatar variant="initials">
     * <dap-ds-avatar variant="icon">
     * ```
     */
    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 {};