@govbr-ds/webcomponents/dist/types/components/avatar/avatar.d.ts

Biblioteca de Web Components baseado no GovBR-DS

/**
 * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/avatar?tab=designer).
 *
 * @example
 * ```html
 * <br-avatar src="/img/avatar.png" alt="Usuário"></br-avatar>
 * ```
 */
export declare class Avatar {
    /**
     * Referência ao elemento host do componente.
     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
     */
    el: HTMLBrAvatarElement;
    /**
     * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
     */
    density: 'small' | 'medium' | 'large';
    /**
     * Identificador único.
     * Caso não seja fornecido, um ID gerado automaticamente será usado.
     */
    readonly customId: string;
    /**
     * URL da imagem a ser exibida no avatar do tipo 'fotográfico'.
     * Deve ser uma URL válida que aponta para a imagem desejada.
     */
    readonly src: string;
    /**
     * Texto alternativo (alt) associado à imagem do avatar. Essencial para acessibilidade.
     * Deve descrever de forma clara e concisa o conteúdo da imagem, por exemplo: "Foto de perfil de João Silva".
     */
    readonly alt = "Foto de perfil do usu\u00E1rio";
    /**
     * Força a exibição do ícone padrão, sobrescreve outras opções (texto ou imagem).
     * Útil para manter consistência visual ou quando se deseja um avatar neutro independente do conteúdo disponível.
     */
    readonly isIconic: boolean;
    /**
     * Conteúdo textual do avatar.
     * Apenas o primeiro caractere será exibido em maiúscula.
     */
    readonly text: string;
    /**
     * Define se o avatar está desabilitado
     */
    readonly disabled = false;
    /**
     * Cor de fundo personalizada para o avatar do tipo texto
     */
    readonly textBackgroundColor: string;
    private hasError;
    /**
     * Observa mudanças na propriedade density para validação e sincronização com atributo DOM.
     * Garante que apenas valores válidos sejam aceitos e atualiza o atributo no elemento host.
     */
    handleDensityChange(newValue: 'small' | 'medium' | 'large'): void;
    componentWillLoad(): void;
    componentDidUpdate(): void;
    /**
     * Gera um mapa de classes CSS com base nas propriedades do componente.
     * @returns {CssClassMap} Objeto contendo as classes CSS aplicadas.
     */
    private getCssClassMap;
    /**
     * Verifica se uma string possui conteúdo válido (não vazia após remover espaços em branco).
     * @param value - String a ser verificada
     * @returns {boolean} true se a string possui conteúdo
     */
    private hasContent;
    private readonly handleImageError;
    /**
     * Obtém as classes CSS para o elemento content.
     * @returns {string} Classes CSS do content
     */
    private getContentClasses;
    /**
     * Define a variável CSS para cor de fundo personalizada para o avatar texto.
     */
    private setCustomBackgroundColor;
    /**
     * Gera aria-label apropriado baseado no tipo de avatar
     * Prioriza aria-label do host, senão gera automaticamente
     */
    private getAriaLabel;
    /**
     * Obtém o valor do token do DS para altura do ícone
     */
    private getIconSize;
    /**
     * Obtém o valor do token do DS para largura do ícone (altura + 8px)
     */
    private getIconWidth;
    /**
     * Renderiza o avatar do tipo 'letra/texto'.
     * Exibe a primeira letra do texto em maiúscula.
     */
    private renderTextAvatar;
    /**
     * Renderiza o avatar do tipo 'fotográfico/imagem'.
     * Exibe uma imagem carregada via URL.
     */
    private renderImageAvatar;
    /**
     * Renderiza o avatar do tipo 'icônico'.
     * Exibe um ícone padrão (fa-solid:user) posicionado na base do avatar.
     */
    private renderIconAvatar;
    /**
     * Método principal de renderização do avatar.
     * Prioridade: isIconic > texto > imagem > ícone (padrão)
     */
    private renderAvatar;
    render(): any;
}