@govbr-ds/webcomponents 2.1.0 → 2.1.1

package/dist/collection/components/header/header.js

@@ -0,0 +1,1131 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h, } from "@stencil/core";
+import { BREAKPOINTS, BreakpointObserver } from "../../shared/utils/breakpoint-observer";
+import { generateUniqueId } from "../../shared/utils/id";
+import { handleNavigationClick } from "../../shared/utils/navigation";
+import { createRafBatcher } from "../../shared/utils/raf-batcher";
+/**
+ * Nomes das áreas do cabeçalho.
+ */
+const HeaderSlotNames = {
+    LOGO: 'logo',
+    SIGNATURE: 'signature',
+    LINKS: 'links',
+    FUNCTIONS: 'functions',
+    SEARCH_ICON: 'search-icon',
+    SEARCH: 'search',
+    ACCESS: 'access',
+    MENU_TRIGGER: 'menu-trigger',
+    CAPTION: 'caption',
+    SUBCAPTION: 'subcaption',
+};
+const ALL_BREAKPOINTS = BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL);
+const FROM_SMALL_BREAKPOINTS = BreakpointObserver.getBreakpoints('from', BREAKPOINTS.SMALL);
+const UNTIL_MEDIUM_BREAKPOINTS = BreakpointObserver.getBreakpoints('until', BREAKPOINTS.MEDIUM);
+function createHeaderAreaConfig(name, loose = ALL_BREAKPOINTS, compact = ALL_BREAKPOINTS, options = {}) {
+    return {
+        cssClassMap: {
+            [`header-${name}`]: true,
+        },
+        breakpoints: {
+            loose: [...loose],
+            compact: [...compact],
+        },
+        hasContent: false,
+        isVisible: false,
+        ...options,
+    };
+}
+/**
+ * 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/header?tab=designer).
+ *
+ * ### Acionamento de Menu Associado
+ * Para integrar o cabeçalho com um menu (`br-menu`), passe um botão no slot `menu-trigger` com os seguintes atributos:
+ * - `data-toggle="menu"`
+ * - `data-target="#id-do-menu"` (substitua pelo ID ou `customId` do seu `br-menu`)
+ *
+ * O componente `br-menu` escuta a esses atributos no escopo do documento e controlará automaticamente sua visibilidade.
+ *
+ * @category Estrutura
+ * @status stable
+ * @slot logo - Slot para a logo do cabeçalho.
+ * @slot signature - Slot para a assinatura visual da organização.
+ * @slot links - Slot para links de navegação principais.
+ * @slot functions - Slot para botões de ação no cabeçalho.
+ * @slot search - Slot para o campo de busca.
+ * @slot access - Slot para o botão de acesso ou autenticação.
+ * @slot menu-trigger - Slot para o botão que abre o menu.
+ * @slot caption - Slot para o título do cabeçalho.
+ * @slot subcaption - Slot para o subtítulo do cabeçalho.
+ *
+ * @part header - Elemento header principal.
+ * @part top - Área superior do header.
+ * @part top-left - Área superior esquerda (logo + assinatura).
+ * @part top-right - Área superior direita (links + funções + busca + acesso).
+ * @part bottom - Área inferior do header.
+ * @part bottom-left - Área inferior esquerda (menu + título).
+ * @part bottom-right - Área inferior direita (busca expandida).
+ */
+export class Header {
+    constructor() {
+        this.hasLoaded = false;
+        this.headerSyncFrame = null;
+        this.monitoredSlots = [];
+        /**
+         * Representa as configurações da área do cabeçalho.
+         */
+        this.headerArea = {
+            [HeaderSlotNames.LOGO]: createHeaderAreaConfig(HeaderSlotNames.LOGO),
+            [HeaderSlotNames.SIGNATURE]: createHeaderAreaConfig(HeaderSlotNames.SIGNATURE, FROM_SMALL_BREAKPOINTS, []),
+            [HeaderSlotNames.LINKS]: createHeaderAreaConfig(HeaderSlotNames.LINKS),
+            [HeaderSlotNames.FUNCTIONS]: createHeaderAreaConfig(HeaderSlotNames.FUNCTIONS),
+            [HeaderSlotNames.SEARCH_ICON]: createHeaderAreaConfig(HeaderSlotNames.SEARCH_ICON, UNTIL_MEDIUM_BREAKPOINTS, ALL_BREAKPOINTS, {
+                event: {
+                    click: this.handleSearchIconClick.bind(this),
+                    focus: this.handleSearchIconFocus.bind(this),
+                },
+            }),
+            [HeaderSlotNames.SEARCH]: createHeaderAreaConfig(HeaderSlotNames.SEARCH, ALL_BREAKPOINTS, ALL_BREAKPOINTS, {
+                isActive: false,
+            }),
+            [HeaderSlotNames.ACCESS]: createHeaderAreaConfig(HeaderSlotNames.ACCESS),
+            [HeaderSlotNames.MENU_TRIGGER]: createHeaderAreaConfig(HeaderSlotNames.MENU_TRIGGER),
+            [HeaderSlotNames.CAPTION]: createHeaderAreaConfig(HeaderSlotNames.CAPTION),
+            [HeaderSlotNames.SUBCAPTION]: createHeaderAreaConfig(HeaderSlotNames.SUBCAPTION, FROM_SMALL_BREAKPOINTS, FROM_SMALL_BREAKPOINTS),
+        };
+        /**
+         * Texto exibido como título do cabeçalho.
+         */
+        this.caption = null;
+        /**
+         * URL associada ao título do cabeçalho.
+         */
+        this.captionUrl = null;
+        /**
+         * Identificador único do componente.
+         * Quando omitido, um valor é gerado automaticamente.
+         *
+         * > **Padrão:** valor único gerado por generateUniqueId().
+         *
+         */
+        this.customId = generateUniqueId();
+        /**
+         * 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).
+         *
+         */
+        this.density = 'medium';
+        /**
+         * Ativa o modo compacto do cabeçalho.
+         * @deprecated Use `compact`.
+         */
+        this.isCompact = false;
+        /**
+         * Fixa o cabeçalho no topo durante a rolagem.
+         * @deprecated Use `sticky`.
+         */
+        this.isSticky = false;
+        /**
+         * Texto da assinatura exibida ao lado da logo.
+         */
+        this.signature = null;
+        /**
+         * Define qual lista encolhe primeiro quando o espaço é limitado.
+         */
+        this.shrinkFirst = 'functions';
+        /**
+         * Texto exibido como subtítulo do cabeçalho.
+         */
+        this.subcaption = null;
+        /**
+         * URL associada ao subtítulo do cabeçalho.
+         */
+        this.subcaptionUrl = null;
+        /**
+         * Controla como os links internos do cabeçalho integram a navegação mantendo `href` real.
+         * - `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.
+         */
+        this.navigationMode = 'native';
+        /**
+         * Define a largura do container interno do cabeçalho.
+         * - `contained`: largura máxima limitada pela grade no breakpoint desktop (`container-lg`).
+         * - `full`: sempre ocupa 100% da largura disponível (`container-fluid`).
+         */
+        this.layoutWidth = 'contained';
+        /**
+         * Elemento responsável pela rolagem do cabeçalho.
+         */
+        this.scrollTarget = null;
+        /** Indica que o estado compacto atual foi derivado da rolagem. */
+        this.compactFromScroll = false;
+        this.headerResizeBatcher = createRafBatcher(() => {
+            this.headerWidthChange.emit({ id: this.customId, listNames: ['links', 'functions'], shrink: false });
+        });
+        this.handleNavigation = (event, href) => {
+            handleNavigationClick({
+                event,
+                href,
+                navigationMode: this.navigationMode,
+                brNavigate: this.brNavigate,
+            });
+        };
+        /**
+         * Manipula as mudanças de breakpoint.
+         * @param breakpoint O breakpoint ativo.
+         */
+        this.handleBreakpointChange = (breakpoint) => {
+            this.currentBreakpoint = breakpoint;
+            Object.keys(this.headerArea).forEach((area) => {
+                const name = area;
+                this.controlHeaderAreaUpdateStates(name);
+            });
+        };
+        /**
+         * Manipula o evento de scroll da janela ou do ancestral rolável.
+         */
+        this.handleScroll = () => {
+            const target = this.scrollTarget;
+            if (target == null)
+                return;
+            const scrollTop = this.getScrollTop(target);
+            const atTop = scrollTop === 0;
+            const shouldBeCompact = (this.sticky ?? this.isSticky) && !atTop;
+            if (this.isCompact !== shouldBeCompact) {
+                const oldHeight = this.el.offsetHeight;
+                this.compactFromScroll = shouldBeCompact;
+                this.isCompact = shouldBeCompact;
+                requestAnimationFrame(() => {
+                    const newHeight = this.el.offsetHeight;
+                    const heightDiff = oldHeight - newHeight;
+                    if (shouldBeCompact && heightDiff !== 0) {
+                        // ponytail: preserve the viewport while compacting; never return to 0 or the scroll listener oscillates.
+                        this.setScrollTop(target, Math.max(1, scrollTop - Math.max(heightDiff, 0)));
+                    }
+                });
+                this.handleBreakpointChange(this.currentBreakpoint);
+            }
+        };
+        /**
+         * Manipula o clique no botão de fechar busca.
+         */
+        this.handleSearchCloseClick = () => {
+            this.updateHeaderArea(HeaderSlotNames.SEARCH, {
+                isActive: false,
+                isVisible: this.isAreaVisibleAtCurrentBreakpoint(HeaderSlotNames.SEARCH),
+            });
+        };
+        /**
+         * Manipula o clique no botão de acionamento do menu.
+         */
+        this.handleMenuTriggerClick = () => {
+            this.brMenuToggle.emit();
+        };
+        this.handleSlotChange = (event) => {
+            const slot = event.target;
+            const slotName = slot.name;
+            if (this.isHeaderSlotName(slotName)) {
+                const hasDefaultSignature = slotName === HeaderSlotNames.SIGNATURE &&
+                    typeof this.signature === 'string' &&
+                    this.signature.trim().length > 0;
+                this.updateHeaderArea(slotName, { hasContent: slot.assignedNodes().length > 0 || hasDefaultSignature });
+            }
+        };
+    }
+    /**
+     * Observa mudanças na propriedade isCompact.
+     * @param newValue O novo valor de isCompact.
+     */
+    watchIsCompact(newValue) {
+        if (this.compact !== undefined && this.compact !== newValue)
+            this.compact = newValue;
+        if (!this.hasLoaded) {
+            this.verifyListSpace(this.shrinkFirst);
+            return;
+        }
+        this.headerCompactChange.emit({ parentId: this.customId, isCompact: newValue });
+        this.brHeaderCompactChange.emit({ parentId: this.customId, compact: newValue });
+        this.verifyListSpace(this.shrinkFirst);
+    }
+    watchCompact(newValue) {
+        if (newValue !== undefined && newValue !== this.isCompact)
+            this.isCompact = newValue;
+    }
+    watchIsSticky() {
+        if (this.sticky === undefined)
+            this.syncScrollListener();
+    }
+    watchSticky() {
+        this.syncScrollListener();
+    }
+    /**
+     * Ciclo de vida do componente.
+     * Executado quando o componente é conectado ao DOM.
+     */
+    connectedCallback() {
+        if (this.compact !== undefined)
+            this.isCompact = this.compact;
+        const hasSignature = Boolean(this.signature && this.signature.trim().length > 0);
+        this.headerArea[HeaderSlotNames.SIGNATURE].hasContent = hasSignature;
+        this.headerArea[HeaderSlotNames.SIGNATURE].isVisible = hasSignature;
+        this.setBreakpointObserver();
+        this.syncHeaderAreaStates();
+        this.slotContentObserver = new MutationObserver(() => {
+            if (this.headerSyncFrame !== null)
+                return;
+            this.headerSyncFrame = requestAnimationFrame(() => {
+                this.headerSyncFrame = null;
+                this.syncHeaderAreaStates();
+            });
+        });
+        this.slotContentObserver.observe(this.el, { childList: true });
+        if (typeof ResizeObserver !== 'undefined') {
+            this.headerResizeObserver = new ResizeObserver(() => this.handleListResize());
+            this.headerResizeObserver.observe(this.el);
+        }
+        queueMicrotask(() => this.syncScrollListener());
+    }
+    /**
+     * Ciclo de vida do componente.
+     * Executado quando o componente é desconectado do DOM.
+     */
+    disconnectedCallback() {
+        this.slotContentObserver?.disconnect();
+        this.headerResizeObserver?.disconnect();
+        this.unsetScrollListener();
+        this.breakpointObserver.unsubscribe(this.handleBreakpointChange);
+        this.breakpointObserver.destroy();
+        this.headerResizeBatcher.cancel();
+        if (this.headerSyncFrame !== null) {
+            cancelAnimationFrame(this.headerSyncFrame);
+            this.headerSyncFrame = null;
+        }
+        this.monitoredSlots.forEach((slot) => {
+            slot.removeEventListener('slotchange', this.handleSlotChange);
+        });
+        this.monitoredSlots = [];
+    }
+    /**
+     * Ciclo de vida do componente.
+     * Executado uma vez após o componente ser totalmente carregado ao DOM.
+     */
+    componentDidLoad() {
+        this.monitorSlotContent();
+        this.verifyListSpace(this.shrinkFirst);
+        this.syncScrollListener();
+        void this.handleHeaderListUpdate;
+        void this.handleListResize;
+        queueMicrotask(() => {
+            this.hasLoaded = true;
+        });
+    }
+    onMenuStateChange(ev) {
+        const triggerSlot = this.el.querySelector('[slot="menu-trigger"]');
+        if (triggerSlot) {
+            const target = triggerSlot.getAttribute('data-target')?.replace(/^#/, '');
+            if (target && target !== ev.detail.sourceId)
+                return;
+            const icon = triggerSlot.querySelector('br-icon');
+            if (icon) {
+                icon.iconName = ev.detail.open ? 'fa6-solid:xmark' : 'fa6-solid:bars';
+            }
+            if (triggerSlot.hasAttribute('aria-expanded')) {
+                triggerSlot.setAttribute('aria-expanded', ev.detail.open.toString());
+            }
+        }
+    }
+    /**
+     * Listener para o evento 'headerListUpdate', disparado pelos componentes filhos 'br-header-list'.
+     * O evento contém o ID do componente pai e o nome da lista.
+     */
+    handleHeaderListUpdate(event) {
+        if (event.detail.id === this.customId) {
+            requestAnimationFrame(() => {
+                switch (event.detail.listName) {
+                    case 'functions':
+                        this.verifyListSpace('links');
+                        break;
+                    case 'links':
+                        this.verifyListSpace('functions');
+                        break;
+                }
+            });
+        }
+    }
+    handleListResize() {
+        this.headerResizeBatcher.schedule(undefined);
+    }
+    /**
+     * Reinicializa o estado das listas do cabeçalho, disparando o evento de redimensionamento.
+     * Pode ser chamado externamente para forçar a atualização das listas.
+     */
+    async resetHeaderList() {
+        this.handleListResize();
+    }
+    /**
+     * Manipula o clique no ícone de busca.
+     */
+    handleSearchIconClick() {
+        this.updateHeaderArea(HeaderSlotNames.SEARCH, {
+            isVisible: true,
+            isActive: true,
+        });
+    }
+    /**
+     * Manipula o foco no ícone de busca.
+     */
+    handleSearchIconFocus() {
+        this.el.shadowRoot.querySelectorAll('slot[name="links"], slot[name="functions"]').forEach((slot) => {
+            const brHeaderList = slot
+                .assignedElements()
+                .find((el) => el.tagName.toLowerCase() === 'br-header-list');
+            if (brHeaderList != null) {
+                brHeaderList.closeList();
+            }
+        });
+    }
+    /**
+     *
+     * Controla a atualização dos estados da área do cabeçalho.
+     * @param name O nome da área do cabeçalho.
+     */
+    controlHeaderAreaUpdateStates(name) {
+        const isVisible = this.isAreaVisibleAtCurrentBreakpoint(name);
+        switch (name) {
+            case HeaderSlotNames.SEARCH:
+                this.updateHeaderArea(name, {
+                    isVisible,
+                    isActive: isVisible ? null : this.headerArea[name]?.isActive,
+                });
+                break;
+            default:
+                this.updateHeaderArea(name, {
+                    isVisible,
+                });
+        }
+    }
+    /**
+     * Retorna um mapa de classes CSS para o componente.
+     * @returns Um objeto contendo as classes CSS a serem aplicadas.
+     */
+    getCssClassMap() {
+        return {
+            'br-header': true,
+            compact: this.isCompact,
+            small: this.density === 'small' && !this.isCompact,
+            large: this.density === 'large' && !this.isCompact,
+        };
+    }
+    /**
+     * Verifica se um valor é um nome de slot de cabeçalho válido.
+     * @param value O valor a ser verificado.
+     * @returns Um valor booleano indicando se o valor é um nome de slot de cabeçalho válido.
+     */
+    isHeaderSlotName(value) {
+        return Object.values(HeaderSlotNames).includes(value);
+    }
+    /**
+     * Verifica se a área deve aparecer no breakpoint e no modo atuais.
+     * @param name O nome da área do cabeçalho.
+     * @returns Verdadeiro quando a área deve estar visível.
+     */
+    isAreaVisibleAtCurrentBreakpoint(name) {
+        const mode = this.isCompact ? 'compact' : 'loose';
+        return this.headerArea[name]?.breakpoints[mode]?.includes(this.currentBreakpoint);
+    }
+    /**
+     * Monitora as mudanças de conteúdo dos slots.
+     */
+    monitorSlotContent() {
+        this.monitoredSlots = Array.from(this.el.shadowRoot.querySelectorAll('slot'));
+        this.monitoredSlots.forEach((slot) => {
+            slot.addEventListener('slotchange', this.handleSlotChange);
+        });
+    }
+    /**
+     * Configura o observador de mudanças de breakpoint.
+     */
+    setBreakpointObserver() {
+        this.breakpointObserver = new BreakpointObserver();
+        this.breakpointObserver.subscribe(this.handleBreakpointChange);
+    }
+    /**
+     * Retorna a janela ou o ancestral que controla a rolagem do cabeçalho.
+     */
+    getScrollTarget() {
+        let ancestor = this.el.parentElement;
+        while (ancestor !== null && ancestor !== document.body && ancestor !== document.documentElement) {
+            const { overflow, overflowY } = getComputedStyle(ancestor);
+            if (/(auto|scroll|overlay)/.test(`${overflow} ${overflowY}`))
+                return ancestor;
+            ancestor = ancestor.parentElement;
+        }
+        return window;
+    }
+    getScrollTop(target) {
+        return target === window ? window.scrollY : target.scrollTop;
+    }
+    setScrollTop(target, scrollTop) {
+        if (target === window)
+            window.scrollTo(window.scrollX, scrollTop);
+        else
+            target.scrollTop = scrollTop;
+    }
+    /** Sincroniza o listener com o estado sticky efetivo. */
+    syncScrollListener() {
+        this.unsetScrollListener();
+        if (!(this.sticky ?? this.isSticky) || !this.el.isConnected) {
+            if (this.compactFromScroll && this.isCompact)
+                this.isCompact = false;
+            this.compactFromScroll = false;
+            return;
+        }
+        this.scrollTarget = this.getScrollTarget();
+        this.scrollTarget.addEventListener('scroll', this.handleScroll, { passive: true });
+        this.handleScroll();
+    }
+    /**
+     * Atualiza o estado da área do cabeçalho com base no conteúdo dos slots.
+     */
+    syncHeaderAreaStates() {
+        this.el.querySelectorAll('[slot]').forEach((element) => {
+            const slotName = element.slot;
+            if (this.isHeaderSlotName(slotName)) {
+                this.updateHeaderArea(slotName, {
+                    hasContent: true,
+                    isVisible: this.isAreaVisibleAtCurrentBreakpoint(slotName),
+                });
+            }
+        });
+    }
+    /**
+     * Remove o listener do alvo de rolagem atual.
+     */
+    unsetScrollListener() {
+        this.scrollTarget?.removeEventListener('scroll', this.handleScroll);
+        this.scrollTarget = null;
+    }
+    /**
+     * Atualiza a área do cabeçalho.
+     * @param name O nome da área do cabeçalho.
+     * @param updates As atualizações a serem aplicadas.
+     */
+    updateHeaderArea(name, updates) {
+        this.headerArea = {
+            ...this.headerArea,
+            [name]: { ...this.headerArea[name], ...updates },
+        };
+    }
+    /**
+     * Verifica o espaço disponível para uma lista específica no cabeçalho.
+     * @param listName O nome da lista a ser verificada.
+     */
+    verifyListSpace(listName) {
+        const shadowRoot = this.el.shadowRoot;
+        if (!shadowRoot)
+            return;
+        let style;
+        let paddingLeft = 0;
+        let paddingRight = 0;
+        let totalWidth = 0;
+        let bottomLeftWidth = 0;
+        let topLeftWidth = 0;
+        let topRightWidth = 0;
+        let availableWidth = 0;
+        if (this.isCompact) {
+            style = window.getComputedStyle(this.el);
+            paddingLeft = parseFloat(style.paddingLeft) || 0;
+            paddingRight = parseFloat(style.paddingRight) || 0;
+            totalWidth = this.el.clientWidth - paddingLeft - paddingRight;
+            bottomLeftWidth = shadowRoot.querySelector('.header-bottom-left')?.clientWidth || 0;
+            topRightWidth = shadowRoot.querySelector('.header-top-right')?.clientWidth || 0;
+            availableWidth = totalWidth - bottomLeftWidth;
+        }
+        else {
+            totalWidth = shadowRoot.querySelector('.header-top')?.clientWidth || 0;
+            topLeftWidth = shadowRoot.querySelector('.header-top-left')?.clientWidth || 0;
+            topRightWidth = shadowRoot.querySelector('.header-top-right')?.clientWidth || 0;
+            availableWidth = totalWidth - topLeftWidth;
+        }
+        const isOverflowing = topRightWidth > availableWidth;
+        if (isOverflowing) {
+            this.headerWidthChange.emit({ id: this.customId, listNames: [listName], shrink: true });
+        }
+    }
+    /**
+     * Renderiza o conteúdo padrão do título.
+     * @returns Um elemento JSX representando o conteúdo padrão do título.
+     */
+    renderDefaultCaptionContent() {
+        return typeof this.caption === 'string' && this.caption.trim().length > 0 ? (typeof this.captionUrl === 'string' && this.captionUrl.trim().length > 0 ? (h("a", { href: this.captionUrl, class: "caption-link", onClick: (event) => this.handleNavigation(event, this.captionUrl) }, this.caption)) : (h("span", { class: "caption-text" }, this.caption))) : null;
+    }
+    /**
+     * Renderiza o conteúdo padrão da assinatura.
+     * @returns Um elemento JSX representando o conteúdo padrão da assinatura.
+     */
+    renderDefaultSignatureContent() {
+        return typeof this.signature === 'string' && this.signature.trim().length > 0 ? (h("span", { class: "signature-text" }, this.signature)) : null;
+    }
+    /**
+     * Renderiza o conteúdo padrão do subtítulo.
+     * @returns Um elemento JSX representando o conteúdo padrão do subtítulo.
+     */
+    renderDefaultSubcaptionContent() {
+        return typeof this.subcaption === 'string' && this.subcaption.trim().length > 0 ? (typeof this.subcaptionUrl === 'string' && this.subcaptionUrl.trim().length > 0 ? (h("a", { href: this.subcaptionUrl, class: "subcaption-link", onClick: (event) => this.handleNavigation(event, this.subcaptionUrl) }, this.subcaption)) : (h("span", { class: "subcaption-text" }, this.subcaption))) : null;
+    }
+    /**
+     * Renderiza o divisor entre as áreas do cabeçalho.
+     * @param mainArea A área principal do cabeçalho.
+     * @param secondaryAreas As áreas secundárias do cabeçalho.
+     * @returns Um elemento JSX representando o divisor entre as áreas do cabeçalho.
+     */
+    renderDivider(mainArea, secondaryAreas = []) {
+        const isVisible = this.headerArea[mainArea]?.hasContent &&
+            this.headerArea[mainArea]?.isVisible &&
+            secondaryAreas.some((area) => this.headerArea[area]?.hasContent && this.headerArea[area]?.isVisible);
+        return h("br-divider", { orientation: "vertical", class: "header-divider", hidden: !isVisible });
+    }
+    /**
+     * Renderiza a área do cabeçalho.
+     * @param name O nome da área do cabeçalho.
+     * @returns Um elemento JSX representando a área do cabeçalho.
+     */
+    renderHeaderArea(name) {
+        const area = this.headerArea[name];
+        const events = typeof area?.event?.click === 'function'
+            ? {
+                onClick: area.event.click,
+                onFocusin: area.event.focus,
+            }
+            : {};
+        return (h("div", { class: area?.cssClassMap, hidden: !(area?.isVisible || area?.isActive), "is-active": area?.isActive, ...events }, h("slot", { name: name }, this.renderSlotDefaultContent(name)), name === HeaderSlotNames.SEARCH && area?.isActive && this.renderSearchCloseButton()));
+    }
+    /**
+     * Renderiza o botão de fechar busca.
+     * @returns Um elemento JSX representando o botão de fechar busca.
+     */
+    renderSearchCloseButton() {
+        return (h("br-button", { class: "search-close", shape: "circle", density: "small", emphasis: "tertiary", style: { position: 'absolute', right: 'var(--spacing-scale-2x)', zIndex: '2' }, onClick: this.handleSearchCloseClick, "prop:ariaLabel": "Fechar busca" }, h("br-icon", { iconName: "fa7-solid:close", width: "32", height: "32" })));
+    }
+    /**
+     * Renderiza o conteúdo padrão do slot.
+     * @param name O nome do slot.
+     * @returns Um elemento JSX representando o conteúdo padrão do slot.
+     */
+    renderSlotDefaultContent(name) {
+        switch (name) {
+            case HeaderSlotNames.CAPTION:
+                return this.renderDefaultCaptionContent();
+            case HeaderSlotNames.SUBCAPTION:
+                return this.renderDefaultSubcaptionContent();
+            case HeaderSlotNames.SIGNATURE:
+                return this.renderDefaultSignatureContent();
+            case HeaderSlotNames.MENU_TRIGGER:
+                return (h("br-button", { shape: "circle", density: "small", emphasis: "tertiary", "aria-label": "Abrir menu", onClick: this.handleMenuTriggerClick }, h("br-icon", { iconName: "fa6-solid:bars", width: "16", height: "16" })));
+            default:
+                return null;
+        }
+    }
+    /**
+     * Renderiza o componente.
+     * @returns JSX.Element
+     */
+    render() {
+        return (h(Host, { key: '8bc09796fafc335700311f66a36175e37a2b22ba', className: "mb-4" }, h("header", { key: 'c5d701eacc69607275a11c1551ed7d673f091189', id: this.customId, class: this.getCssClassMap(), part: "header" }, h("div", { key: 'cdf3c2774bd5ef9ceee9cff6a03bd3ecbe55f6b6', class: this.layoutWidth === 'full' ? 'container-fluid' : 'container-lg' }, h("div", { key: '1788724e44fa9e405e9f487dc51e6b3921d257b7', class: "header-top", part: "top" }, h("div", { key: 'f6bb5590253a751a221458902e050082bd80625a', class: "header-top-left", part: "top-left" }, this.renderHeaderArea(HeaderSlotNames.LOGO), this.renderDivider(HeaderSlotNames.LOGO, [HeaderSlotNames.SIGNATURE]), this.renderHeaderArea(HeaderSlotNames.SIGNATURE)), h("div", { key: '91fb7d67290cfbe8a7019c2921c46bee73cccf8a', class: "header-top-right", part: "top-right" }, this.renderHeaderArea(HeaderSlotNames.LINKS), this.renderDivider(HeaderSlotNames.LINKS, [HeaderSlotNames.FUNCTIONS, HeaderSlotNames.SEARCH_ICON]), this.renderHeaderArea(HeaderSlotNames.FUNCTIONS), this.renderDivider(HeaderSlotNames.FUNCTIONS, [HeaderSlotNames.SEARCH_ICON]), this.renderHeaderArea(HeaderSlotNames.SEARCH_ICON), this.renderHeaderArea(HeaderSlotNames.ACCESS))), h("div", { key: 'ae6085ef79127e501d963889cdc5e616a91b1f50', class: "header-bottom", part: "bottom" }, h("div", { key: 'b76815e61385d014fa9bc0b5c87387ff2a3b4243', class: "header-bottom-left", part: "bottom-left" }, this.renderHeaderArea(HeaderSlotNames.MENU_TRIGGER), h("div", { key: '18f69d8cefd705f8084a0ca81e3d0c8cb59b8241', class: "header-caption-wrapper" }, this.renderHeaderArea(HeaderSlotNames.CAPTION), this.renderHeaderArea(HeaderSlotNames.SUBCAPTION))), h("div", { key: 'e9609c0ef168d7da4a909715512250cf5dcc8ebe', class: {
+                'header-bottom-right': true,
+                'is-active': this.headerArea[HeaderSlotNames.SEARCH]?.isActive,
+            }, part: "bottom-right" }, this.renderHeaderArea(HeaderSlotNames.SEARCH)))))));
+    }
+    static get is() { return "br-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "caption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto exibido como t\u00EDtulo do cabe\u00E7alho."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "caption",
+                "defaultValue": "null"
+            },
+            "captionUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL associada ao t\u00EDtulo do cabe\u00E7alho."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "caption-url",
+                "defaultValue": "null"
+            },
+            "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()"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeaderDensity",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "HeaderDensity": {
+                            "location": "import",
+                            "path": "./header.types",
+                            "id": "src/components/header/header.types.ts::HeaderDensity",
+                            "referenceLocation": "HeaderDensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a densidade visual do componente.\n\n- `small`: Alta densidade (componente menor, mais compacto e com menos espa\u00E7amento).\n- `medium`: Densidade intermedi\u00E1ria, padr\u00E3o recomendado para a maioria dos casos.\n- `large`: Baixa densidade (componente maior, mais espa\u00E7amento e altura)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "density",
+                "defaultValue": "'medium'"
+            },
+            "isCompact": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `compact`."
+                        }],
+                    "text": "Ativa o modo compacto do cabe\u00E7alho."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-compact",
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado compacto can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `isCompact`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "compact"
+            },
+            "isSticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `sticky`."
+                        }],
+                    "text": "Fixa o cabe\u00E7alho no topo durante a rolagem."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-sticky",
+                "defaultValue": "false"
+            },
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fixa o cabe\u00E7alho no topo. Quando informado, tem preced\u00EAncia sobre `isSticky`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "sticky"
+            },
+            "signature": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto da assinatura exibida ao lado da logo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "signature",
+                "defaultValue": "null"
+            },
+            "shrinkFirst": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeaderShrinkFirst",
+                    "resolved": "\"functions\" | \"links\"",
+                    "references": {
+                        "HeaderShrinkFirst": {
+                            "location": "import",
+                            "path": "./header.types",
+                            "id": "src/components/header/header.types.ts::HeaderShrinkFirst",
+                            "referenceLocation": "HeaderShrinkFirst"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define qual lista encolhe primeiro quando o espa\u00E7o \u00E9 limitado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "shrink-first",
+                "defaultValue": "'functions'"
+            },
+            "subcaption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto exibido como subt\u00EDtulo do cabe\u00E7alho."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "subcaption",
+                "defaultValue": "null"
+            },
+            "subcaptionUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL associada ao subt\u00EDtulo do cabe\u00E7alho."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "subcaption-url",
+                "defaultValue": "null"
+            },
+            "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 internos do cabe\u00E7alho integram a navega\u00E7\u00E3o mantendo `href` real.\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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "navigation-mode",
+                "defaultValue": "'native'"
+            },
+            "layoutWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeaderLayoutWidth",
+                    "resolved": "\"contained\" | \"full\"",
+                    "references": {
+                        "HeaderLayoutWidth": {
+                            "location": "import",
+                            "path": "./header.types",
+                            "id": "src/components/header/header.types.ts::HeaderLayoutWidth",
+                            "referenceLocation": "HeaderLayoutWidth"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a largura do container interno do cabe\u00E7alho.\n- `contained`: largura m\u00E1xima limitada pela grade no breakpoint desktop (`container-lg`).\n- `full`: sempre ocupa 100% da largura dispon\u00EDvel (`container-fluid`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout-width",
+                "defaultValue": "'contained'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "headerArea": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "headerCompactChange",
+                "name": "headerCompactChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "headerCompactChange"
+                        }],
+                    "text": "Evento disparado quando o cabe\u00E7alho entra ou sai do modo compacto.\nO evento cont\u00E9m os detalhes do estado compacto e o ID do componente pai."
+                },
+                "complexType": {
+                    "original": "{ parentId: string; isCompact: boolean }",
+                    "resolved": "{ parentId: string; isCompact: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "brHeaderCompactChange",
+                "name": "brHeaderCompactChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento can\u00F4nico emitido quando o modo compacto muda."
+                },
+                "complexType": {
+                    "original": "HeaderCompactChangeDetail",
+                    "resolved": "HeaderCompactChangeDetail",
+                    "references": {
+                        "HeaderCompactChangeDetail": {
+                            "location": "import",
+                            "path": "./header.types",
+                            "id": "src/components/header/header.types.ts::HeaderCompactChangeDetail",
+                            "referenceLocation": "HeaderCompactChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "headerWidthChange",
+                "name": "headerWidthChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "headerWidthChange"
+                        }],
+                    "text": "Evento disparado para indicar qual lista deve encolher primeiro.\nO evento cont\u00E9m os detalhes do ID do componente pai e o nome da lista."
+                },
+                "complexType": {
+                    "original": "{ id: string; listNames: ('links' | 'functions')[]; shrink: boolean }",
+                    "resolved": "{ id: string; listNames: (\"links\" | \"functions\")[]; shrink: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "brMenuToggle",
+                "name": "brMenuToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "brMenuToggle"
+                        }],
+                    "text": "Evento disparado para alternar o estado de um menu associado."
+                },
+                "complexType": {
+                    "original": "{ target?: string }",
+                    "resolved": "{ target?: string; }",
+                    "references": {}
+                }
+            }, {
+                "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 methods() {
+        return {
+            "resetHeaderList": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reinicializa o estado das listas do cabe\u00E7alho, disparando o evento de redimensionamento.\nPode ser chamado externamente para for\u00E7ar a atualiza\u00E7\u00E3o das listas.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isCompact",
+                "methodName": "watchIsCompact"
+            }, {
+                "propName": "compact",
+                "methodName": "watchCompact"
+            }, {
+                "propName": "isSticky",
+                "methodName": "watchIsSticky"
+            }, {
+                "propName": "sticky",
+                "methodName": "watchSticky"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "brMenuOpenChange",
+                "method": "onMenuStateChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "headerListUpdate",
+                "method": "handleHeaderListUpdate",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}