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

Biblioteca de Web Components baseado no GovBR-DS

interface BreadcrumbItem {
    label: string;
    url?: string;
    target?: string;
    home?: boolean;
    active?: boolean;
}
export declare class Breadcrumb {
    el: HTMLBrBreadcrumbElement;
    elementInternals: ElementInternals;
    /**
     * Identificador único.
     * Caso não seja fornecido, um ID gerado automaticamente será usado.
     */
    readonly customId: string;
    /**
     * URL para home.
     * Caso não seja fornecido, o valor padrão será /.
     */
    homeUrl: string;
    /**
     * Define o array de objetos que receberá os nomes e links do breadcrumb.
     * Define valor padrão do breadcrumb 'defaultCrumbs'.
     */
    crumbs: string | BreadcrumbItem[];
    private defaultCrumbs;
    /**
     * Define o estado oculto ou visível do tooltip.
     */
    showTooltip: boolean;
    /**
     * Define o posicionamento do tooltip na tela.
     */
    tooltipPosition: {
        x: number;
        y: number;
    };
    /**
     * Define o texto do tooltip.
     */
    tooltipText: string;
    /**
     * 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 interna dos itens do breadcrumb.
     */
    larguraInterna: number;
    /**
     * Largura do container pai do breadcrumb.
     */
    larguraPai: number;
    /**
     * 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;
    /**
     * 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 'charactersNumberTruncate'.
     */
    private trunc;
    /**
     * 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;
    /**
     * 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;
    /**
     * Ao clicar no botão HOME, direciona o usuário para URL passada na propriedade 'homeUrl'.
     */
    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 o estado 'isSmallScreen' com base no tamanho do container pai, se menor que 570px.
     */
    private resizeObserver;
    /**
     * Atualiza os estados de largura do breadcrumb ao detectar mudanças no container pai.
     */
    private updateContainerSize;
    /**
     * Adiciona o 'resizeObserver' para checar o tamanho do container pai.
     */
    connectedCallback(): void;
    /**
     * Remove o 'resizeObserver'.
     */
    disconnectedCallback(): void;
    /**
     * Calcula a largura total dos itens do breadcrumb para determinar se precisa de truncamento.
     */
    private calcularLarguraItens;
    /**
     * Executa cálculos de largura após o componente ser carregado.
     */
    componentDidLoad(): void;
    /**
     * 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;
    /**
     * Renderiza item da página atual
     */
    private renderMobileActiveItem;
    /**
     * Renderiza Lista dropdown contendo os itens do Breadcrumb
     */
    private renderBreadcrumbList;
    /**
     * 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;
}
export {};