import type { BrDensity } from '../global.types'; /** * O `br-magic-button` é o botão de ação flutuante (FAB) que destaca a ação primária ou mais frequente da tela. * * Pode ser exibido apenas com ícone (formato circular) ou expandido com texto descritivo. * * ```html * * Criar documento * ``` * * ### Quando usar * * - Ação principal e dominante da tela em dispositivos móveis ou interfaces focadas em uma tarefa única. * * ### Quando evitar * * - Múltiplas ações de mesma importância: use `br-button`. * - Ações secundárias ou destrutivas. * * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/magic-button?tab=designer). * * @category Ações * @status stable * @slot default - Conteúdo interno do botão (texto ou ícone). * @slot icon - Ícone customizado do botão. Quando utilizado, a prop `icon` é ignorada. * * @part container - Wrapper principal do magic-button. * @part button - Elemento button interno. * */ export declare class MagicButton { /** * Referência ao elemento host do componente. * Utilize esta propriedade para acessar e manipular o elemento DOM associado ao componente. */ el: HTMLBrMagicButtonElement; /** * Identificador único do componente. * Quando omitido, um valor é gerado automaticamente. * * > **Padrão:** valor único gerado por generateUniqueId(). * */ customId: string; /** * Texto do rótulo do botão. * Utilizado como conteúdo principal quando presente. */ label: string; /** * Ícone como identificador Iconify (ex.: `fa6-solid:star`) ou nome simples (ex.: `question`, * resolvido como `fa6-solid:question` no registro SVG local), renderizado pelo `br-icon`. * Para classes CSS (ex.: Font Awesome) ou SVGs personalizados, use o slot `icon`, a forma preferida. * Uso descontinuado: classes CSS nesta prop (ex.: `fas fa-star`) não são exibidas no Shadow DOM * e geram aviso. */ icon: string; /** * Define a densidade visual do componente. * * - `small`: Alta densidade (componente menor, mais compacto e com menos espaçamento). * - `medium`: Densidade intermediária, padrão recomendado para a maioria dos casos. * - `large`: Baixa densidade (componente maior, mais espaçamento e altura). * * Valores inválidos usam `medium`. */ density: BrDensity; /** * Define se o botão terá formato circular. * Aplica contorno arredondado completo quando `true` e não houver `label`. */ circle: boolean; /** * Define o rótulo acessível usado por tecnologias assistivas. * */ ariaLabel: string; /** * Gera o mapeamento de classes CSS baseado nas propriedades de densidade. * @returns Mapa de classes CSS para o container do botão mágico. */ private getCssClassMap; /** * Gera o mapeamento de classes CSS para aplicar o estilo de botão circular. * @returns Mapa contendo a classe `circle` quando aplicável. */ private getCircleClass; /** * Retorna a classe de CSS para posicionar ícone e label juntos. * @returns `label-icon` quando houver `label` e `icon`; string vazia caso contrário. */ private getLabelIconClass; /** * Mantém a API legada `icon="question"` sem transformar o valor em uma * requisição implícita ao Iconify. Identificadores sem coleção usam o * registro local Font Awesome 6; valores já qualificados continuam intactos. */ private getIconName; /** Fallback do slot `icon`: somente identificadores Iconify; classes CSS geram aviso. */ private renderIconFallback; /** * Renderiza o componente. */ render(): any; }