import { type EventEmitter } from '../../stencil-public-runtime'; import type { BrNavigateDetail, BrNavigationMode } from '../global.types'; import type { BreadcrumbItem } from './breadcrumb.types'; /** * O `br-breadcrumb` mostra o caminho até a página atual e permite voltar aos níveis anteriores. * * ### Como montar * * 1. Declare um `br-breadcrumb-item` para cada nível, do início até a página atual. * 2. Use `home` no primeiro item para exibir o ícone de página inicial. * 3. Marque a página atual com `active`: ela aparece sem link e com `aria-current="page"`. * * ```html * * * * * * ``` * * Os mesmos itens podem ser passados em `crumbs`, como array ou texto JSON. Quando falta espaço, os níveis intermediários são agrupados; `truncate-after` define a partir de quantos itens isso acontece. * * ### Navegação em SPA * * Com `navigation-mode="event"`, o clique em um item emite `brNavigate`. Cancele o evento e passe o endereço para o roteador: * * ```js * breadcrumb.addEventListener('brNavigate', (event) => { * event.preventDefault(); * router.push(event.detail.href); * }); * ``` * * ### Quando usar * * - Páginas com dois ou mais níveis de hierarquia. * * ### Quando evitar * * - Navegação sem hierarquia. * - Etapas de um processo: use `br-wizard` ou `br-step`. * * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/breadcrumb?tab=designer). * * @category Navegação * @status stable * @slot default - Itens de breadcrumb declarados via elementos br-breadcrumb-item. O elemento br-crumb é aceito apenas por compatibilidade. * * @part nav - Elemento nav do breadcrumb. * @part list - Lista ordenada de itens do breadcrumb. */ export declare class Breadcrumb { el: HTMLBrBreadcrumbElement; /** * Largura interna dos itens do breadcrumb. */ contentWidth: number; /** * Lista interna de itens normalizados usada na renderização do breadcrumb. */ innerCrumbs: BreadcrumbItem[]; /** * Define o estado do botão 'Folder'. * Caso a lista dropdown esteja oculta o ícone no botão será 'folder-plus'. * Caso a lista dropdown esteja visível o ícone no botão será 'folder-minus'. */ isFolderOpen: boolean; /** * Define o estado isSmallScreen, usado para verificar a largura do container pai e aplicar as mudanças do formato mobile. * No formato mobile o breadcrumb apresenta um comportamento específico. */ isSmallScreen: boolean; /** * Define se o breadcrumb deve truncar os itens por falta de espaço. */ isTruncate: boolean; /** * Largura do container pai do breadcrumb. */ parentWidth: number; /** * Define o estado oculto ou visível do tooltip. */ showTooltip: boolean; /** * Define o posicionamento do tooltip na tela. */ tooltipText: string; /** * Identificador único do componente. * Quando omitido, um valor é gerado automaticamente. * * > **Padrão:** valor único gerado por generateUniqueId(). * */ customId: string; /** * Caso não seja fornecido, o valor padrão será /. * @deprecated Use `homeHref`. */ homeUrl: string; /** URL padrão da página inicial. Quando informada, tem precedência sobre `homeUrl`. */ homeHref?: string; /** * Quantidade máxima de crumbs exibidos antes de ativar o modo truncado. * Quando omitida, o truncamento continua sendo decidido apenas pelo espaço disponível. * Valores inválidos são ignorados. */ truncateAfter?: number; /** * Fornece os nomes e links do breadcrumb. * Use uma string JSON no atributo HTML ou um array de `BreadcrumbItem` por property binding. * Cada item deve ter `label` string e pode ter `href`, `target`, `home` e `active`. * Itens inválidos são ignorados; se nenhum item válido restar, usa `defaultCrumbs` e avisa no console. * * @example * ```html * * ``` * @example * ```js * const breadcrumb = document.querySelector('br-breadcrumb'); * breadcrumb.crumbs = [ * { label: 'Início', href: '/' }, * { label: 'Serviço', active: true }, * ]; * ``` */ crumbs: string | BreadcrumbItem[]; /** * Controla como os links do breadcrumb integram a navegação mantendo `href` real nos itens navegáveis. * - `native` (padrão): preserva o comportamento do navegador, conforme HTML/W3C. * - `event`: emite `brNavigate`; se o evento for cancelado, bloqueia a navegação nativa para a SPA assumir. * Cliques com modificadores, botão do meio ou `target` diferente de `_self` permanecem nativos. * Valores inválidos usam `native`. */ navigationMode: BrNavigationMode; private get effectiveNavigationMode(); /** * Evento cancelável emitido em `navigation-mode="event"` para cliques primários sem modificadores em links `_self`. * Chame `event.preventDefault()` no listener para impedir a navegação nativa e entregar `event.detail.href` ao roteador da SPA. */ brNavigate: EventEmitter; /** * Adiciona o 'resizeObserver' para checar o tamanho do container pai. */ connectedCallback(): void; /** * Remove o 'resizeObserver'. */ disconnectedCallback(): void; /** * Executa cálculos de largura após o componente ser carregado. */ componentWillLoad(): void; componentDidLoad(): void; handleCrumbPropsChange(): void; private slotElement; private hasLoaded; private defaultCrumbs; private floatingManager?; private hoveredElement?; private tooltipElement?; private tooltipArrowElement?; /** * Atualiza o estado 'isSmallScreen' com base no tamanho do container pai, se menor que 570px. */ private resizeObserver; private widthCalculationFrame; private readonly crumbKeys; private crumbKeySequence; private get effectiveHomeHref(); private get effectiveTruncateAfter(); private get shouldTruncateByCount(); private get shouldRenderTruncated(); private normalizeTarget; private registerCrumbItems; /** * Verifica se o texto do link contém mais de 20 caracteres e realiza o truncamento deste caso positivo. * O número de caracteres pode ser configurado na variável 'truncateCharactersLimit'. */ private truncateText; private isTruncatedLabel; /** * Exibe o tooltip e define seu posicionamento, caso o usuário realize o 'mouse over'. */ private handleMouseOver; /** * Esconde o tooltip caso o usuário realize o 'mouse out'. */ private handleMouseOut; private handleNavigation; private positionTooltip; private cleanupTooltipPosition; /** * Converte de string para JSON o valor passado na propriedade 'crumbs'. * Retorna o valor padrão do Breadcrumbs caso crumbs seja vazio ou inválido */ private getParsedItems; private getCrumbKey; /** * Ao clicar no botão HOME, direciona o usuário para a URL configurada. */ private handleHomeClick; /** * Altera o estado do botão 'Folder', caso a lista dropdown esteja aberta ou fechada. */ private toggleFolder; /** * Define as classes CSS usadas no breadcrumb. */ private getCssClassMap; /** * Atualiza os estados de largura do breadcrumb ao detectar mudanças no container pai. */ private updateContainerSize; /** * Calcula a largura total dos itens do breadcrumb para determinar se precisa de truncamento. */ private calculateItemsWidth; /** * Renderiza botão Home */ private renderHomeButton; /** * Renderiza botão Folder no comportamento truncado */ private renderTruncateButton; /** * Renderiza itens do Breadcrumb no comportamento mobile ou truncado */ private renderBreadcrumbItems; private renderCollapsedBreadcrumbItems; private renderDesktopBreadcrumbItems; /** * Renderiza item da página atual */ private renderMobileActiveItem; /** * Renderiza lista dropdown contendo os itens do Breadcrumb */ private renderBreadcrumbList; private shouldSkipFloatingListItem; private getListItemAriaLabel; /** * Com o roving tabindex de `br-list` (apenas um item por vez alcançável via Tab), * o item de onde o usuário sai da lista via Tab pode ser qualquer um -- não mais * necessariamente o de índice `totalItems - 3` como antes, quando todo item era * um tab stop nativo e Tab sempre percorria a lista em ordem sequencial. Por isso * o handler de saída é anexado a todo item; `handleKeyDownOut` já valida internamente * se a saída deve de fato ocorrer (`isFolderOpen && shouldRenderTruncated && !isSmallScreen`). */ private getListItemKeyDownHandler; private renderBreadcrumbListItem; /** * Renderiza itens do Breadcrumb no formato desktop */ private renderBreadcrumbLink; /** * Renderiza Tooltip */ private renderTooltip; /** * Controla navegação pelo teclado após lista de itens aberta * Dispara foco no primeiro item da lista flutuante */ private handleKeyDown; /** * Ao finalizar navegação por teclado dentro da lista, dispara foco no item fora da lista flutuante */ private handleKeyDownOut; render(): any; }