@govbr-ds/webcomponents 2.1.0 → 2.1.1

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,619 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h } from "@stencil/core";
+import { FloatingUIManager } from "../../shared/utils/floating-ui";
+import { generateUniqueId } from "../../shared/utils/id";
+import { handleNavigationClick } from "../../shared/utils/navigation";
+/**
+ * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System 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-crumb.
+ *
+ * @part nav - Elemento nav do breadcrumb.
+ * @part list - Lista ordenada de itens do breadcrumb.
+ */
+export class Breadcrumb {
+    constructor() {
+        /**
+         * Largura interna dos itens do breadcrumb.
+         */
+        this.contentWidth = 0;
+        /**
+         * Lista interna de itens normalizados usada na renderização do breadcrumb.
+         */
+        this.innerCrumbs = [];
+        /**
+         * 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'.
+         */
+        this.isFolderOpen = false;
+        /**
+         * 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.
+         */
+        this.isSmallScreen = false;
+        /**
+         * Define se o breadcrumb deve truncar os itens por falta de espaço.
+         */
+        this.isTruncate = false;
+        /**
+         * Largura do container pai do breadcrumb.
+         */
+        this.parentWidth = 0;
+        /**
+         * Define o estado oculto ou visível do tooltip.
+         */
+        this.showTooltip = false;
+        /**
+         * Define o posicionamento do tooltip na tela.
+         */
+        this.tooltipText = '';
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Caso não seja fornecido, o valor padrão será /.
+         * @deprecated Use `homeHref`.
+         */
+        this.homeUrl = '/';
+        /**
+         * 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.
+         */
+        this.navigationMode = 'native';
+        this.hasLoaded = false;
+        this.defaultCrumbs = [
+            { label: 'Página 01', href: '/pagina-01' },
+            { label: 'Página 02', href: '/pagina-02' },
+            { label: 'Página Atual', active: true },
+        ];
+        this.widthCalculationFrame = null;
+        this.crumbKeys = new WeakMap();
+        this.crumbKeySequence = 0;
+        this.registerCrumbItems = () => {
+            const assignedElements = this.slotElement
+                ? this.slotElement.assignedElements()
+                : Array.from(this.el.querySelectorAll('br-crumb'));
+            const crumbElements = assignedElements.filter((el) => ['br-crumb', 'br-breadcrumb-item'].includes(el.tagName?.toLowerCase()));
+            this.innerCrumbs = crumbElements.map((element) => {
+                const el = element;
+                const item = {
+                    label: el.label || el.getAttribute('label') || '',
+                    href: el.href || el.getAttribute('href') || undefined,
+                    target: this.normalizeTarget(el.target || el.getAttribute('target')),
+                    home: el.home === true,
+                    active: el.active === true,
+                };
+                this.crumbKeys.set(item, this.getCrumbKey(element));
+                return item;
+            });
+            if (this.hasLoaded) {
+                this.contentWidth = 0;
+                this.isTruncate = false;
+                this.calculateItemsWidth();
+            }
+        };
+        this.handleNavigation = (event, href) => {
+            handleNavigationClick({
+                event,
+                href,
+                navigationMode: this.navigationMode,
+                brNavigate: this.brNavigate,
+            });
+        };
+        /**
+         * Atualiza os estados de largura do breadcrumb ao detectar mudanças no container pai.
+         */
+        this.updateContainerSize = (entries) => {
+            for (const entry of entries) {
+                const containerWidth = entry.contentRect.width;
+                if (containerWidth === this.parentWidth)
+                    continue;
+                this.isSmallScreen = containerWidth < 570;
+                this.parentWidth = containerWidth;
+                this.calculateItemsWidth();
+            }
+        };
+    }
+    /**
+     * Adiciona o 'resizeObserver' para checar o tamanho do container pai.
+     */
+    connectedCallback() {
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(this.updateContainerSize);
+            if (this.el.parentElement !== null) {
+                this.resizeObserver.observe(this.el.parentElement);
+            }
+        }
+    }
+    /**
+     * Remove o 'resizeObserver'.
+     */
+    disconnectedCallback() {
+        if (this.resizeObserver != null) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.widthCalculationFrame !== null) {
+            cancelAnimationFrame(this.widthCalculationFrame);
+            this.widthCalculationFrame = null;
+        }
+        this.cleanupTooltipPosition();
+    }
+    /**
+     * Executa cálculos de largura após o componente ser carregado.
+     */
+    componentWillLoad() {
+        this.registerCrumbItems();
+    }
+    componentDidLoad() {
+        this.hasLoaded = true;
+        this.calculateItemsWidth();
+    }
+    handleCrumbPropsChange() {
+        this.registerCrumbItems();
+    }
+    get effectiveHomeHref() {
+        return this.homeHref ?? this.homeUrl;
+    }
+    normalizeTarget(target) {
+        const allowedTargets = ['_blank', '_self', '_parent', '_top'];
+        return allowedTargets.includes(target) ? target : undefined;
+    }
+    /**
+     * 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'.
+     */
+    truncateText(word) {
+        return word.length > truncateCharactersLimit ? `${word.slice(0, truncateCharactersLimit)}...` : word;
+    }
+    isTruncatedLabel(text) {
+        return text.length > truncateCharactersLimit;
+    }
+    /**
+     * Exibe o tooltip e define seu posicionamento, caso o usuário realize o 'mouse over'.
+     */
+    handleMouseOver(event, text) {
+        if (this.isTruncatedLabel(text)) {
+            const hoveredElement = event.currentTarget ?? event.target;
+            if (!hoveredElement)
+                return;
+            this.hoveredElement = hoveredElement;
+            this.tooltipText = text;
+            this.showTooltip = true;
+            requestAnimationFrame(() => this.positionTooltip());
+        }
+    }
+    /**
+     * Esconde o tooltip caso o usuário realize o 'mouse out'.
+     */
+    handleMouseOut() {
+        this.cleanupTooltipPosition();
+        this.showTooltip = false;
+    }
+    positionTooltip() {
+        if (this.hoveredElement == null || this.tooltipElement == null)
+            return;
+        this.cleanupTooltipPosition();
+        this.floatingManager = new FloatingUIManager({
+            triggerElement: this.hoveredElement,
+            contentElement: this.tooltipElement,
+            arrowElement: this.tooltipArrowElement,
+            placement: 'top',
+        });
+        this.floatingManager.start();
+    }
+    cleanupTooltipPosition() {
+        this.floatingManager?.stop();
+        this.floatingManager = undefined;
+    }
+    /**
+     * 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
+     */
+    getParsedItems() {
+        if (this.innerCrumbs.length > 0) {
+            return this.innerCrumbs;
+        }
+        if (!this.crumbs || this.crumbs === '') {
+            return this.defaultCrumbs;
+        }
+        try {
+            const parsed = typeof this.crumbs === 'string' ? JSON.parse(this.crumbs) : this.crumbs;
+            return Array.isArray(parsed) && parsed.length > 0 ? parsed : this.defaultCrumbs;
+        }
+        catch {
+            console.error('Invalid JSON format for crumbs:', this.crumbs);
+            return this.defaultCrumbs;
+        }
+    }
+    getCrumbKey(item) {
+        let key = this.crumbKeys.get(item);
+        if (!key) {
+            key = `breadcrumb-crumb-${++this.crumbKeySequence}`;
+            this.crumbKeys.set(item, key);
+        }
+        return key;
+    }
+    /**
+     * Ao clicar no botão HOME, direciona o usuário para a URL configurada.
+     */
+    handleHomeClick(event) {
+        if (handleNavigationClick({
+            event,
+            href: this.effectiveHomeHref,
+            navigationMode: this.navigationMode,
+            brNavigate: this.brNavigate,
+        })) {
+            return;
+        }
+        window.location.href = this.effectiveHomeHref;
+    }
+    /**
+     * Altera o estado do botão 'Folder', caso a lista dropdown esteja aberta ou fechada.
+     */
+    toggleFolder() {
+        this.isFolderOpen = !this.isFolderOpen;
+    }
+    /**
+     * Define as classes CSS usadas no breadcrumb.
+     */
+    getCssClassMap() {
+        return {
+            'br-breadcrumb': true,
+            small: this.isSmallScreen,
+        };
+    }
+    /**
+     * Calcula a largura total dos itens do breadcrumb para determinar se precisa de truncamento.
+     */
+    calculateItemsWidth() {
+        if (this.widthCalculationFrame !== null)
+            return;
+        this.widthCalculationFrame = requestAnimationFrame(() => {
+            this.widthCalculationFrame = null;
+            if (this.parentWidth <= 0 || this.isSmallScreen)
+                return;
+            if (this.isTruncate) {
+                if (this.contentWidth <= this.parentWidth) {
+                    this.isTruncate = false;
+                    requestAnimationFrame(() => this.calculateItemsWidth());
+                }
+                return;
+            }
+            const items = this.el.shadowRoot?.querySelectorAll('.crumb');
+            if (items) {
+                let totalWidth = 0;
+                items.forEach((item) => {
+                    totalWidth += item.getBoundingClientRect().width;
+                });
+                this.contentWidth = totalWidth;
+                this.isTruncate = this.contentWidth > this.parentWidth;
+            }
+        });
+    }
+    /**
+     * Renderiza botão Home
+     */
+    renderHomeButton() {
+        const buttonFolderClass = this.isFolderOpen ? 'fa6-solid:folder-minus' : 'fa6-solid:folder-plus';
+        return (h("li", null, h("br-button", { id: `${this.customId}-home-trigger`, shape: "circle", "prop:ariaLabel": this.isSmallScreen ? 'Exibir lista de páginas' : 'Voltar para Home', onClick: this.isSmallScreen ? () => this.toggleFolder() : (event) => this.handleHomeClick(event) }, h("br-icon", { iconName: `${this.isSmallScreen ? buttonFolderClass : 'fa6-solid:house'}`, width: "12", height: "12" }))));
+    }
+    /**
+     * Renderiza botão Folder no comportamento truncado
+     */
+    renderTruncateButton() {
+        if (this.isTruncate && !this.isSmallScreen) {
+            const buttonFolderClass = this.isFolderOpen ? 'fa6-solid:folder-minus' : 'fa6-solid:folder-plus';
+            return (h("li", { class: "buttonFolderGroup" }, h("br-icon", { class: "br-icon", iconName: "fa6-solid:chevron-right", width: "12", height: "12" }), h("br-button", { id: `${this.customId}-folder-trigger`, shape: "circle", "prop:ariaLabel": this.isFolderOpen ? 'Recolher lista de páginas' : 'Exibir lista de páginas', onClick: () => this.toggleFolder(), onKeyDown: (event) => this.handleKeyDown(event) }, h("br-icon", { iconName: buttonFolderClass, width: "12", height: "12" }))));
+        }
+        return null;
+    }
+    /**
+     * Renderiza itens do Breadcrumb no comportamento mobile ou truncado
+     */
+    renderBreadcrumbItems() {
+        const parsedItems = this.getParsedItems();
+        if (this.isSmallScreen || this.isTruncate) {
+            return this.renderCollapsedBreadcrumbItems(parsedItems);
+        }
+        return this.renderDesktopBreadcrumbItems(parsedItems);
+    }
+    renderCollapsedBreadcrumbItems(parsedItems) {
+        const lastItem = parsedItems[parsedItems.length - 2];
+        return (h("li", { class: "buttonFolderGroup" }, this.isTruncate && !this.isSmallScreen && lastItem ? (h("span", null, h("br-icon", { class: "br-icon", iconName: "fa6-solid:chevron-right", width: "12", height: "12" }), h("a", { id: `${this.customId}-next-crumb`, href: lastItem.href || 'javascript:void(0)', target: lastItem.target || '_self', onClick: (event) => this.handleNavigation(event, lastItem.href), onMouseOver: (event) => this.handleMouseOver(event, lastItem.label), onMouseOut: () => this.handleMouseOut(), onFocus: (event) => this.handleMouseOver(event, lastItem.label), onBlur: () => this.handleMouseOut() }, this.truncateText(lastItem.label)))) : null, this.renderMobileActiveItem(parsedItems), this.renderBreadcrumbList(parsedItems)));
+    }
+    renderDesktopBreadcrumbItems(parsedItems) {
+        return parsedItems.map((item, index) => (h("li", { key: this.getCrumbKey(item), class: `crumb ${item.home ? 'home' : ''}`, "data-active": item.active ? 'active' : null, "aria-label": `Página ${index + 1} de ${parsedItems.length}` }, this.renderBreadcrumbLink(item))));
+    }
+    /**
+     * Renderiza item da página atual
+     */
+    renderMobileActiveItem(parsedItems) {
+        const activeItem = parsedItems.find((item) => item.active);
+        if (!activeItem)
+            return null;
+        return (h("span", { class: "mobile-active-page" }, h("br-icon", { class: "br-icon", iconName: "fa6-solid:chevron-right", width: "12", height: "12" }), h("span", { "aria-current": "page", "data-active": "active" }, activeItem.label)));
+    }
+    /**
+     * Renderiza lista dropdown contendo os itens do Breadcrumb
+     */
+    renderBreadcrumbList(parsedItems) {
+        return (h("br-list", { class: this.isFolderOpen ? 'mobile-crumb-list show' : 'mobile-crumb-list' }, this.isSmallScreen && (h("div", { role: "group", "aria-label": `Página 1 de ${parsedItems.length}` }, h("br-item", { isInteractive: true, href: this.effectiveHomeHref, target: "_self", navigationMode: this.navigationMode }, "P\u00E1gina Inicial"), h("span", { class: "br-divider" }))), parsedItems.map((item, index) => this.renderBreadcrumbListItem(item, index, parsedItems.length))));
+    }
+    shouldSkipFloatingListItem(index, totalItems) {
+        return this.isTruncate && !this.isSmallScreen && index === totalItems - 2;
+    }
+    getListItemAriaLabel(index, totalItems) {
+        if (this.isTruncate && !this.isSmallScreen) {
+            return `Página ${index + 1} de ${totalItems - 2}`;
+        }
+        return `Página ${index + 2} de ${totalItems}`;
+    }
+    /**
+     * 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 && isTruncate && !isSmallScreen`).
+     */
+    getListItemKeyDownHandler() {
+        return (event) => {
+            if (event.key !== 'Tab') {
+                return;
+            }
+            this.handleKeyDownOut(event);
+            this.toggleFolder();
+        };
+    }
+    renderBreadcrumbListItem(item, index, totalItems) {
+        if (item.active || this.shouldSkipFloatingListItem(index, totalItems)) {
+            return null;
+        }
+        return (h("div", { key: this.getCrumbKey(item), role: "group", "aria-label": this.getListItemAriaLabel(index, totalItems) }, h("br-item", { customId: index === 0 ? 'firstElementList' : undefined, "aria-label": this.isTruncatedLabel(item.label) ? item.label : null, isInteractive: true, href: item.href || 'javascript:void(0)', target: item.target ?? '_self', navigationMode: this.navigationMode, onMouseOver: (event) => this.handleMouseOver(event, item.label), onFocus: (event) => this.handleMouseOver(event, item.label), onMouseOut: () => this.handleMouseOut(), onBlur: () => this.handleMouseOut(), onKeyDown: this.getListItemKeyDownHandler() }, this.truncateText(item.label)), h("span", { class: "br-divider" })));
+    }
+    /**
+     * Renderiza itens do Breadcrumb no formato desktop
+     */
+    renderBreadcrumbLink(item) {
+        return item.active ? (h("span", null, h("br-icon", { class: "br-icon", iconName: "fa6-solid:chevron-right", width: "12", height: "12" }), h("span", { "aria-current": "page" }, item.label))) : (h("span", null, h("br-icon", { class: "br-icon", iconName: "fa6-solid:chevron-right", width: "12", height: "12" }), h("a", { href: item.href || 'javascript:void(0)', "aria-label": this.isTruncatedLabel(item.label) ? item.label : null, target: item.target ?? '_self', onClick: (event) => this.handleNavigation(event, item.href), onMouseOver: (event) => this.handleMouseOver(event, item.label), onFocus: (event) => this.handleMouseOver(event, item.label), onMouseOut: () => this.handleMouseOut(), onBlur: () => this.handleMouseOut() }, this.truncateText(item.label))));
+    }
+    /**
+     * Renderiza Tooltip
+     */
+    renderTooltip() {
+        if (!this.showTooltip)
+            return null;
+        return (h("div", { class: "tooltip-box", ref: (el) => {
+                this.tooltipElement = el;
+            } }, this.tooltipText, h("div", { class: "tooltip-arrow", ref: (el) => {
+                this.tooltipArrowElement = el;
+            } })));
+    }
+    /**
+     * Controla navegação pelo teclado após lista de itens aberta
+     * Dispara foco no primeiro item da lista flutuante
+     */
+    handleKeyDown(event) {
+        if (event.key === 'Tab' && this.isFolderOpen && this.isTruncate && !this.isSmallScreen) {
+            setTimeout(() => {
+                const element = this.el.shadowRoot?.getElementById('firstElementList');
+                if (element) {
+                    element.focus();
+                }
+            }, 0); // Aguarda um ciclo de renderização
+        }
+    }
+    /**
+     * Ao finalizar navegação por teclado dentro da lista, dispara foco no item fora da lista flutuante
+     */
+    handleKeyDownOut(event) {
+        if (event.key === 'Tab' && this.isFolderOpen && this.isTruncate && !this.isSmallScreen) {
+            setTimeout(() => {
+                const element = this.el.shadowRoot?.getElementById('nextCrumb');
+                if (element) {
+                    element.focus();
+                }
+            }, 0);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'e40c3457a244437ad080d04a68bad56600b39387' }, h("div", { key: '70b36dbf89f4c849c76e2de6bd59850ca0813115', style: { display: 'none' } }, h("slot", { key: '8de3de4fd2f49c04ac5c1443b9bad45bc3a828ad', ref: (el) => {
+                this.slotElement = el;
+            }, onSlotchange: this.registerCrumbItems })), h("nav", { key: 'c94b9ab332fe3dffe6c9accb0d02e497ce9f3b6a', class: this.getCssClassMap(), "aria-label": "Breadcrumbs", part: "nav" }, h("ol", { key: 'c5a98927ba213b4ac0d60bbee2781de5380da1b4', class: "crumb-list", part: "list" }, this.renderHomeButton(), this.renderTruncateButton(), this.renderBreadcrumbItems())), this.renderTooltip()));
+    }
+    static get is() { return "br-breadcrumb"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["breadcrumb.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["breadcrumb.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico do componente.\nQuando omitido, um valor \u00E9 gerado automaticamente.\n\n> **Padr\u00E3o:** valor \u00FAnico gerado por generateUniqueId()."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            },
+            "homeUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `homeHref`."
+                        }],
+                    "text": "Caso n\u00E3o seja fornecido, o valor padr\u00E3o ser\u00E1 /."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "home-url",
+                "defaultValue": "'/'"
+            },
+            "homeHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL can\u00F4nica da p\u00E1gina inicial. Quando informada, tem preced\u00EAncia sobre `homeUrl`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "home-href"
+            },
+            "crumbs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | BreadcrumbItem[]",
+                    "resolved": "BreadcrumbItem[] | string",
+                    "references": {
+                        "BreadcrumbItem": {
+                            "location": "import",
+                            "path": "./breadcrumb.types",
+                            "id": "src/components/breadcrumb/breadcrumb.types.ts::BreadcrumbItem",
+                            "referenceLocation": "BreadcrumbItem"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o array de objetos que receber\u00E1 os nomes e links do breadcrumb.\nDefine valor padr\u00E3o do breadcrumb 'defaultCrumbs'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "crumbs"
+            },
+            "navigationMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BrNavigationMode",
+                    "resolved": "\"event\" | \"native\"",
+                    "references": {
+                        "BrNavigationMode": {
+                            "location": "import",
+                            "path": "../global.types",
+                            "id": "src/components/global.types.ts::BrNavigationMode",
+                            "referenceLocation": "BrNavigationMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controla como os links do breadcrumb integram a navega\u00E7\u00E3o mantendo `href` real nos itens naveg\u00E1veis.\n- `native` (padr\u00E3o): preserva o comportamento do navegador, conforme HTML/W3C.\n- `event`: emite `brNavigate`; se o evento for cancelado, bloqueia a navega\u00E7\u00E3o nativa para a SPA assumir.\nCliques com modificadores, bot\u00E3o do meio ou `target` diferente de `_self` permanecem nativos."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "navigation-mode",
+                "defaultValue": "'native'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "contentWidth": {},
+            "innerCrumbs": {},
+            "isFolderOpen": {},
+            "isSmallScreen": {},
+            "isTruncate": {},
+            "parentWidth": {},
+            "showTooltip": {},
+            "tooltipText": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brNavigate",
+                "name": "brNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento cancel\u00E1vel emitido em `navigation-mode=\"event\"` para cliques prim\u00E1rios sem modificadores em links `_self`.\nChame `event.preventDefault()` no listener para impedir a navega\u00E7\u00E3o nativa e entregar `event.detail.href` ao roteador da SPA."
+                },
+                "complexType": {
+                    "original": "BrNavigateDetail",
+                    "resolved": "BrNavigateDetail",
+                    "references": {
+                        "BrNavigateDetail": {
+                            "location": "import",
+                            "path": "../global.types",
+                            "id": "src/components/global.types.ts::BrNavigateDetail",
+                            "referenceLocation": "BrNavigateDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "brCrumbPropsChange",
+                "method": "handleCrumbPropsChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+/**
+ * Limite de caracteres para o truncamento
+ */
+const truncateCharactersLimit = 20;

package/dist/collection/components/breadcrumb/breadcrumb.types.js

@@ -0,0 +1 @@
+export {};