@govbr-ds/webcomponents 2.0.0-next.57 → 2.0.0-next.58

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

@@ -0,0 +1,901 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { __awaiter } from "tslib";
+import { h, Host } from "@stencil/core";
+import { BreakpointObserver, BREAKPOINTS } from "../../utils/breakpoint-observer";
+import Helpers from "../../utils/helpers";
+/**
+ * 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',
+};
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/header?tab=designer).
+ *
+ * @slot logo - Área para inserção da logo
+ * @slot signature - Área para inserção da assinatura
+ * @slot links - Área para inserção dos links
+ * @slot functions - Área para inserção dos botões de função
+ * @slot search - Área para inserção do campo de busca
+ * @slot access - Área para inserção do botão de acesso
+ * @slot menu-trigger - Área para inserção do botão de menu
+ * @slot caption - Área para inserção do título do header
+ * @slot subcaption - Área para inserção do subtítulo do header
+ */
+export class Header {
+    constructor() {
+        /**
+         * Indica o texto exibido como título do header.
+         * @default null
+         */
+        this.caption = null;
+        /**
+         * Indica a URL associada ao título do header.
+         * @default null
+         */
+        this.captionUrl = null;
+        /**
+         * Identificador único.
+         * Caso não seja fornecido, um ID gerado automaticamente será usado.
+         */
+        this.customId = Helpers.generateUniqueId();
+        /**
+         * Indica a densidade do cabeçalho.
+         * Pode ser 'small', 'medium' ou 'large'.
+         * @default 'medium'
+         */
+        this.density = 'medium';
+        /**
+         * Indica se o cabeçalho deve ser exibido em um modo compacto.
+         * Quando definido como true, o cabeçalho será renderizado em um estilo compacto.
+         * @default false
+         */
+        this.isCompact = false;
+        /**
+         * Indica se o cabeçalho deve ser exibido em um modo fixo.
+         * Quando definido como true, o cabeçalho será fixo no topo da página durante a rolagem.
+         * @default false
+         */
+        this.isSticky = false;
+        /**
+         * Indica o texto exibido como assinatura do header.
+         * @default null
+         */
+        this.signature = null;
+        /**
+         * Indica qual lista deve encolher primeiro quando o espaço for limitado.
+         * Pode ser 'links' ou 'functions'.
+         * @default 'functions'
+         */
+        this.shrinkFirst = 'functions';
+        /**
+         * Indica o texto exibido como subtítulo do header.
+         * @default null
+         */
+        this.subcaption = null;
+        /**
+         * Indica a URL associada ao subtítulo do header.
+         * @default null
+         */
+        this.subcaptionUrl = null;
+        /**
+         * Representa as configurações da área do cabeçalho.
+         */
+        this.headerArea = {
+            [HeaderSlotNames.LOGO]: {
+                cssClassMap: {
+                    'header-logo': true,
+                },
+                breakpoints: {
+                    loose: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL)],
+                    compact: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL)],
+                },
+                hasContent: false,
+                isVisible: false,
+            },
+            [HeaderSlotNames.SIGNATURE]: {
+                cssClassMap: {
+                    'header-signature': true,
+                },
+                breakpoints: {
+                    loose: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.SMALL)],
+                    compact: [],
+                },
+                hasContent: Boolean(this.signature && this.signature.trim().length > 0),
+                isVisible: Boolean(this.signature && this.signature.trim().length > 0),
+            },
+            [HeaderSlotNames.LINKS]: {
+                cssClassMap: {
+                    'header-links': true,
+                },
+                breakpoints: {
+                    loose: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL)],
+                    compact: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL)],
+                },
+                hasContent: false,
+                isVisible: false,
+            },
+            [HeaderSlotNames.FUNCTIONS]: {
+                cssClassMap: {
+                    'header-functions': true,
+                },
+                breakpoints: {
+                    loose: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL)],
+                    compact: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL)],
+                },
+                hasContent: false,
+                isVisible: false,
+            },
+            [HeaderSlotNames.SEARCH_ICON]: {
+                cssClassMap: {
+                    'header-search-icon': true,
+                },
+                breakpoints: {
+                    loose: [...BreakpointObserver.getBreakpoints('until', BREAKPOINTS.MEDIUM)],
+                    compact: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL)],
+                },
+                hasContent: false,
+                isVisible: false,
+                event: {
+                    click: this.handleSearchIconClick.bind(this),
+                    focus: this.handleSearchIconFocus.bind(this),
+                },
+            },
+            [HeaderSlotNames.SEARCH]: {
+                cssClassMap: {
+                    'header-search': true,
+                },
+                breakpoints: {
+                    loose: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.LARGE)],
+                    compact: [],
+                },
+                hasContent: false,
+                isVisible: false,
+                isActive: false,
+            },
+            [HeaderSlotNames.ACCESS]: {
+                cssClassMap: {
+                    'header-access': true,
+                },
+                breakpoints: {
+                    loose: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL)],
+                    compact: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL)],
+                },
+                hasContent: false,
+                isVisible: false,
+            },
+            [HeaderSlotNames.MENU_TRIGGER]: {
+                cssClassMap: {
+                    'header-menu-trigger': true,
+                },
+                breakpoints: {
+                    loose: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL)],
+                    compact: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL)],
+                },
+                hasContent: false,
+                isVisible: false,
+            },
+            [HeaderSlotNames.CAPTION]: {
+                cssClassMap: {
+                    'header-caption': true,
+                },
+                breakpoints: {
+                    loose: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL)],
+                    compact: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.X_SMALL)],
+                },
+                hasContent: false,
+                isVisible: false,
+            },
+            [HeaderSlotNames.SUBCAPTION]: {
+                cssClassMap: {
+                    'header-subcaption': true,
+                },
+                breakpoints: {
+                    loose: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.SMALL)],
+                    compact: [...BreakpointObserver.getBreakpoints('from', BREAKPOINTS.SMALL)],
+                },
+                hasContent: false,
+                isVisible: false,
+            },
+        };
+        /**
+         * Armazena a posição de scroll do elemento pai.
+         */
+        this.parentScrollTop = 0;
+        /**
+         * Timeout para o evento de redimensionamento.
+         */
+        this.resizeTimeout = null;
+        /**
+         * Manipula o evento de scroll no elemento pai.
+         */
+        this.handleParentScroll = () => {
+            const parent = this.el.parentElement;
+            if (parent == null)
+                return;
+            const atTop = parent.scrollTop === 0;
+            const shouldBeCompact = this.isSticky && !atTop;
+            if (this.isCompact !== shouldBeCompact) {
+                this.parentScrollTop = parent.scrollTop;
+                this.isCompact = shouldBeCompact;
+                requestAnimationFrame(() => {
+                    parent.scrollTop = this.parentScrollTop;
+                });
+                this.handleBreakpointChange(this.currentBreakpoint);
+            }
+        };
+        /**
+         * Manipula o clique no botão de fechar busca.
+         */
+        this.handleSearchCloseClick = () => {
+            var _a, _b;
+            this.updateHeaderArea(HeaderSlotNames.SEARCH, {
+                isActive: false,
+                isVisible: (_b = (_a = this.headerArea[HeaderSlotNames.SEARCH]) === null || _a === void 0 ? void 0 : _a.breakpoints[`${this.isCompact ? 'compact' : 'loose'}`]) === null || _b === void 0 ? void 0 : _b.includes(this.currentBreakpoint),
+            });
+        };
+    }
+    /**
+     * Observa mudanças na propriedade isCompact.
+     * @param newValue O novo valor de isCompact.
+     */
+    watchIsCompact(newValue) {
+        this.headerCompactChange.emit({ parentId: this.customId, isCompact: newValue });
+        this.verifyListSpace(this.shrinkFirst);
+    }
+    /**
+     * 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;
+                }
+            });
+        }
+    }
+    /**
+     * Listener para o evento 'resize' da janela.
+     * Dispara o evento de redimensionamento do cabeçalho após um breve atraso de 100ms
+     */
+    handleListResize() {
+        clearTimeout(this.resizeTimeout);
+        this.resizeTimeout = window.setTimeout(() => {
+            this.headerWidthChange.emit({ id: this.customId, listNames: ['links', 'functions'], shrink: false });
+        }, 100);
+    }
+    /**
+     * Ciclo de vida do componente.
+     * Executado quando o componente é conectado ao DOM.
+     */
+    connectedCallback() {
+        this.setBreakpointObserver();
+        this.syncHeaderAreaStates();
+        this.setScrollOnParent();
+    }
+    /**
+     * Ciclo de vida do componente.
+     * Executado uma vez após o componente ser totalmente carregado ao DOM.
+     */
+    componentDidLoad() {
+        this.monitorSlotContent();
+        this.headerCompactChange.emit({ parentId: this.customId, isCompact: this.isCompact });
+        this.verifyListSpace(this.shrinkFirst);
+        void this.handleHeaderListUpdate;
+        void this.handleListResize;
+    }
+    /**
+     * Ciclo de vida do componente.
+     * Executado quando o componente é desconectado do DOM.
+     */
+    disconnectedCallback() {
+        this.unsetScrollOnParent();
+        this.breakpointObserver.unsubscribe(this.handleBreakpointChange.bind(this));
+        this.breakpointObserver.destroy();
+        clearTimeout(this.resizeTimeout);
+    }
+    /**
+     * 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.
+     */
+    resetHeaderList() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.handleListResize();
+        });
+    }
+    /**
+     * Manipula as mudanças de breakpoint.
+     * @param breakpoint O breakpoint ativo.
+     */
+    handleBreakpointChange(breakpoint) {
+        this.currentBreakpoint = breakpoint;
+        Object.keys(this.headerArea).forEach((area) => {
+            const name = area;
+            this.controlHeaderAreaUpdateStates(name);
+        });
+    }
+    /**
+     * 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) {
+        var _a, _b, _c;
+        const state = (_b = (_a = this.headerArea[name]) === null || _a === void 0 ? void 0 : _a.breakpoints[`${this.isCompact ? 'compact' : 'loose'}`]) === null || _b === void 0 ? void 0 : _b.includes(this.currentBreakpoint);
+        switch (name) {
+            case HeaderSlotNames.SEARCH:
+                this.updateHeaderArea(name, {
+                    isVisible: state,
+                    isActive: state ? null : (_c = this.headerArea[name]) === null || _c === void 0 ? void 0 : _c.isActive,
+                });
+                break;
+            default:
+                this.updateHeaderArea(name, {
+                    isVisible: state,
+                });
+        }
+    }
+    /**
+     * 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);
+    }
+    /**
+     * Monitora as mudanças de conteúdo dos slots.
+     */
+    monitorSlotContent() {
+        this.el.shadowRoot.querySelectorAll('slot').forEach((slot) => {
+            slot.addEventListener('slotchange', () => {
+                const slotName = slot.name;
+                if (this.isHeaderSlotName(slotName)) {
+                    this.updateHeaderArea(slotName, { hasContent: slot.assignedNodes().length > 0 });
+                }
+            });
+        });
+    }
+    /**
+     * Configura o observador de mudanças de breakpoint.
+     */
+    setBreakpointObserver() {
+        this.breakpointObserver = new BreakpointObserver();
+        this.breakpointObserver.subscribe(this.handleBreakpointChange.bind(this));
+    }
+    /**
+     * Configura o evento de scroll no elemento pai.
+     */
+    setScrollOnParent() {
+        const parent = this.el.parentElement;
+        if (this.isSticky && parent !== null) {
+            parent.addEventListener('scroll', this.handleParentScroll);
+            this.handleParentScroll();
+        }
+    }
+    /**
+     * Atualiza o estado da área do cabeçalho com base no conteúdo dos slots.
+     */
+    syncHeaderAreaStates() {
+        this.el.querySelectorAll('[slot]').forEach((element) => {
+            var _a, _b;
+            const slotName = element.slot;
+            if (this.isHeaderSlotName(slotName)) {
+                this.headerArea[slotName].hasContent = true;
+                this.headerArea[slotName].isVisible = (_b = (_a = this.headerArea[slotName]) === null || _a === void 0 ? void 0 : _a.breakpoints[`${this.isCompact ? 'compact' : 'loose'}`]) === null || _b === void 0 ? void 0 : _b.includes(this.currentBreakpoint);
+            }
+        });
+    }
+    /**
+     * Remove scroll event listener from parent element.
+     */
+    unsetScrollOnParent() {
+        const parent = this.el.parentElement;
+        if (this.isSticky && parent !== null) {
+            parent.removeEventListener('scroll', this.handleParentScroll);
+        }
+    }
+    /**
+     * 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 = Object.assign(Object.assign({}, this.headerArea), { [name]: Object.assign(Object.assign({}, 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) {
+        var _a, _b, _c, _d, _e;
+        let style, paddingLeft, paddingRight, totalWidth, bottomLeftWidth, topLeftWidth, topRightWidth, availableWidth;
+        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 = ((_a = this.el.shadowRoot.querySelector('.header-bottom-left')) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+            topRightWidth = ((_b = this.el.shadowRoot.querySelector('.header-top-right')) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
+            availableWidth = totalWidth - bottomLeftWidth;
+        }
+        else {
+            totalWidth = ((_c = this.el.shadowRoot.querySelector('.header-top')) === null || _c === void 0 ? void 0 : _c.clientWidth) || 0;
+            topLeftWidth = ((_d = this.el.shadowRoot.querySelector('.header-top-left')) === null || _d === void 0 ? void 0 : _d.clientWidth) || 0;
+            topRightWidth = ((_e = this.el.shadowRoot.querySelector('.header-top-right')) === null || _e === void 0 ? void 0 : _e.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" }, 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" }, 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 = []) {
+        var _a, _b;
+        const isVisible = ((_a = this.headerArea[mainArea]) === null || _a === void 0 ? void 0 : _a.hasContent) &&
+            ((_b = this.headerArea[mainArea]) === null || _b === void 0 ? void 0 : _b.isVisible) &&
+            secondaryAreas.some((area) => { var _a, _b; return ((_a = this.headerArea[area]) === null || _a === void 0 ? void 0 : _a.hasContent) && ((_b = this.headerArea[area]) === null || _b === void 0 ? void 0 : _b.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) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return (h("div", { class: (_a = this.headerArea[name]) === null || _a === void 0 ? void 0 : _a.cssClassMap, hidden: !((_b = this.headerArea[name]) === null || _b === void 0 ? void 0 : _b.isVisible) && !((_c = this.headerArea[name]) === null || _c === void 0 ? void 0 : _c.isActive), "is-active": (_d = this.headerArea[name]) === null || _d === void 0 ? void 0 : _d.isActive, onClick: (_f = (_e = this.headerArea[name]) === null || _e === void 0 ? void 0 : _e.event) === null || _f === void 0 ? void 0 : _f.click, onFocusin: (_h = (_g = this.headerArea[name]) === null || _g === void 0 ? void 0 : _g.event) === null || _h === void 0 ? void 0 : _h.focus }, h("slot", { name: name }, this.renderSlotDefaultContent(name)), name === HeaderSlotNames.SEARCH && ((_j = this.headerArea[name]) === null || _j === void 0 ? void 0 : _j.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", onClick: this.handleSearchCloseClick, "aria-label": "Fechar busca" }, h("br-icon", { iconName: "fa7-solid:close" })));
+    }
+    /**
+     * 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();
+            default:
+                return null;
+        }
+    }
+    /**
+     * Renderiza o componente.
+     * @returns JSX.Element
+     */
+    render() {
+        var _a;
+        return (h(Host, { key: '36ace829a4acd29e6eec7739204843817bc1948c' }, h("header", { key: 'f2e6d1fe9bc392e8290c996138f2d2c5879913b9', id: this.customId, class: this.getCssClassMap() }, h("div", { key: '2e4feb9f56edf93b2398e9d4708dcdb2973d3078', class: "container-lg" }, h("div", { key: 'c91ec8aa824ee4e57d2f045ac95d363cfe0e6a33', class: "header-top" }, h("div", { key: 'c997be8419091f09c0289fdd130ce4e39d55a884', class: "header-top-left" }, this.renderHeaderArea(HeaderSlotNames.LOGO), this.renderDivider(HeaderSlotNames.LOGO, [HeaderSlotNames.SIGNATURE]), this.renderHeaderArea(HeaderSlotNames.SIGNATURE)), h("div", { key: 'd8fde729fe6a1afbddde8b895ac367b9f0992f48', class: "header-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: '72b6f7eeb2792352bad8f0f2017a6ad42fcb734f', class: "header-bottom" }, h("div", { key: '206e56da327d00c510a98df5b70ecd67058eba24', class: "header-bottom-left" }, this.renderHeaderArea(HeaderSlotNames.MENU_TRIGGER), h("div", { key: 'ae747da8a1a4c931135305b95aa0df61af15ded6', class: "header-caption-wrapper" }, this.renderHeaderArea(HeaderSlotNames.CAPTION), this.renderHeaderArea(HeaderSlotNames.SUBCAPTION))), h("div", { key: 'd72760b17cd1fabe22fc450cf6bd30a241a1805c', class: {
+                'header-bottom-right': true,
+                'is-active': (_a = this.headerArea[HeaderSlotNames.SEARCH]) === null || _a === void 0 ? void 0 : _a.isActive,
+            } }, 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": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Indica o texto exibido como t\u00EDtulo do header."
+                },
+                "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": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Indica a URL associada ao t\u00EDtulo do header."
+                },
+                "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.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "Helpers.generateUniqueId()"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeaderDensity",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "HeaderDensity": {
+                            "location": "global",
+                            "id": "global::HeaderDensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'medium'"
+                        }],
+                    "text": "Indica a densidade do cabe\u00E7alho.\nPode ser 'small', 'medium' ou 'large'."
+                },
+                "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": "default",
+                            "text": "false"
+                        }],
+                    "text": "Indica se o cabe\u00E7alho deve ser exibido em um modo compacto.\nQuando definido como true, o cabe\u00E7alho ser\u00E1 renderizado em um estilo compacto."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-compact",
+                "defaultValue": "false"
+            },
+            "isSticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Indica se o cabe\u00E7alho deve ser exibido em um modo fixo.\nQuando definido como true, o cabe\u00E7alho ser\u00E1 fixo no topo da p\u00E1gina durante a rolagem."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-sticky",
+                "defaultValue": "false"
+            },
+            "signature": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Indica o texto exibido como assinatura do header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "signature",
+                "defaultValue": "null"
+            },
+            "shrinkFirst": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'links' | 'functions'",
+                    "resolved": "\"functions\" | \"links\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'functions'"
+                        }],
+                    "text": "Indica qual lista deve encolher primeiro quando o espa\u00E7o for limitado.\nPode ser 'links' ou 'functions'."
+                },
+                "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": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Indica o texto exibido como subt\u00EDtulo do header."
+                },
+                "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": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Indica a URL associada ao subt\u00EDtulo do header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "subcaption-url",
+                "defaultValue": "null"
+            }
+        };
+    }
+    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": "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": {}
+                }
+            }];
+    }
+    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"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "headerListUpdate",
+                "method": "handleHeaderListUpdate",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "resize",
+                "method": "handleListResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=header.js.map