/** * ## Design System * * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/avatar?tab=designer). */ 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; gerado automaticamente quando omitido. */ 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; /** * Permite definir a cor de fundo do componente. * Aceita os seguintes formatos de cor: * - Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc. * - Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc. * - Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc. * - Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc. * - Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc. * - Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc. * Se não especificada, usa a cor padrão do tema. */ readonly bgColor: 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; }