import type { IconFlip, IconRotate, IconSource } from './icon.types'; /** * O componente `br-icon` fornece uma maneira flexível e dinâmica de incorporar ícones nas aplicações. * Ele aceita arquivos de imagem da aplicação por URL, SVG inline e conteúdo via slot. * Nomes Iconify por `iconName` continuam disponíveis somente para compatibilidade legada. * * Com opções para especificar a altura e largura, adicionar classes CSS personalizadas, e definir como o ícone * deve ser rotacionado ou espelhado, o `br-icon` oferece aos desenvolvedores as ferramentas necessárias para * integrar ícones de forma consistente com o estilo e design de suas aplicações, melhorando a experiência do usuário * e a clareza das interfaces. * * @category Identidade * @status stable * @slot - Conteúdo customizado do ícone. Pode receber elementos como ``, `` ou componentes de outras bibliotecas. * * @part icon - Elemento interno que representa o ícone renderizado. * @part image - Elemento img interno quando `src` é usado. * @part svg - Elemento interno que recebe SVG inline quando `svg` é usado. * @part slot - Elemento interno que recebe conteúdo via slot. */ export declare class Icon { /** * Referência ao elemento host do componente. * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente. */ el: HTMLBrIconElement; /** Texto alternativo para ícones informativos. Sem label, o ícone é decorativo. */ label?: string; /** * Nome do ícone a ser exibido utilizando a biblioteca Iconify. * * @deprecated O Iconify não é mais a fonte prioritária. Use `src` com um asset * controlado pela aplicação, `svg` ou o slot padrão. */ /** @deprecated Use `src`, `svg` ou o slot padrão. */ iconName?: string; /** * URL ou caminho local para um arquivo de imagem que será usado como ícone. * O caminho é resolvido pelo navegador no contexto da aplicação consumidora, * portanto pode ser relativo (`./assets/icone.svg`), absoluto (`/assets/icone.svg`) * ou uma URL completa. * Aceita SVG, PNG, WebP e outros formatos suportados pelo elemento `img`. */ src?: string; /** * Conteúdo SVG inline a ser renderizado como ícone. * * Use apenas SVGs confiáveis e sanitizados pela aplicação. */ svg?: string; /** * Define explicitamente a origem do ícone. * Quando `auto`, o componente prioriza slot, SVG inline e imagem por URL. * Iconify fica apenas como fallback de compatibilidade quando nenhuma fonte própria foi informada. */ source: IconSource; /** * Define a altura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc. * O valor padrão é '16'. O tamanho pode ser sobrescrito independentemente da largura. */ height: string; /** * Identificador único do componente. * Quando omitido, um valor é gerado automaticamente. * * > **Padrão:** valor único gerado por generateUniqueId(). * */ customId: string; /** * Define a largura do ícone. Pode ser especificada em qualquer unidade CSS válida, como pixels (px), ems (em), rems (rem), etc. * O valor padrão é '16'. A largura pode ser sobrescrita independentemente da altura. */ width: string; /** * Permite adicionar classes CSS adicionais ao ícone. * Use esta propriedade para aplicar estilos personalizados ao ícone, além dos estilos padrão. */ cssClasses?: string; /** * Exibe o rótulo e o controle na mesma linha. * */ /** @deprecated Use `inline`. */ isInline?: boolean; /** Renderiza o ícone inline. Quando informada, tem precedência sobre `isInline`. */ inline?: boolean; /** * Define o ângulo de rotação do ícone. */ rotate?: IconRotate; /** * Define o tipo de espelhamento do ícone. */ flip?: IconFlip; /** * Determina se o ícone pode receber foco. * Se definido como verdadeiro, o ícone pode ser navegado usando Tab. * O valor padrão é `false`. */ /** @deprecated Use `focusable`. */ isFocusable?: boolean; /** Torna o ícone focável. Quando informada, tem precedência sobre `isFocusable`. */ focusable?: boolean; /** * Controla o comportamento de carregamento do ícone. * * Comportamento: * - Padrão (propriedade não definida): carregamento imediato aplicando `noobserver` para evitar problemas de layout shift * - `lazy={true}`: ativa o carregamento tardio nativo para imagens em `src` e o observer do Iconify no fallback legado * - `lazy={false}`: carregamento imediato * * **Nota**: O padrão foi alterado para carregamento imediato para resolver problemas de deslocamento de layout * que ocorriam quando ícones eram carregados depois do conteúdo inicial. * * SVG inline e conteúdo em slot não precisam de carregamento tardio, pois já estão disponíveis no DOM. */ lazy?: boolean; private hasDefaultSlot; private cachedSvgMarkup; private cachedSvgKey; private iconifyReady?; componentWillLoad(): void; private shouldLoadIconify; private ensureIconify; componentDidLoad(): void; /** * Retorna o valor efetivo para o comportamento "lazy" do ícone. * * Explicação: * - Se o atributo 'lazy' estiver presente no elemento, o método retorna o valor da propriedade this.lazy (true ou false). * - Se o atributo 'lazy' NÃO estiver presente, assume-se o comportamento padrão, retornando false (ou seja, carregamento imediato ativado). * * Isso permite distinguir entre o caso em que o usuário explicitamente define lazy={true} (carregamento lazy) * e o caso em que o atributo não é informado (carregamento imediato por padrão). */ private get effectiveLazy(); private get resolvedSource(); private get transformStyle(); private get svgMarkup(); private get mediaSize(); private toCssSize; private get mediaStyleSize(); private get accessibilityAttributes(); private updateDefaultSlot; private renderIconifyIcon; private renderImageIcon; private renderSvgIcon; private renderSlottedIcon; private renderIcon; render(): any; }