@govbr-ds/webcomponents 2.1.0 → 2.1.1

package/dist/collection/components/cookiebar/cookiebar-group/cookiebar-group.js

@@ -0,0 +1,628 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h, } from "@stencil/core";
+import { generateUniqueId } from "../../../shared/utils/id";
+import { aggregateSelection } from "../cookiebar.utils";
+/**
+ * Representa um grupo (classe) de cookies dentro do `br-cookiebar`.
+ * Agrupa cookies relacionados, exibe um checkbox para seleção coletiva
+ * e permite expandir a lista de `br-cookiebar-cookie` filhos.
+ *
+ * Suporta dois modos:
+ * - **Opt-out** (`group-opt-out="true"`, padrão): o usuário pode desativar o grupo.
+ * - **Sempre ativo** (`group-opt-out="false"`): exibe badge fixo, sem checkbox.
+ *
+ * @slot default - Recebe os subcomponentes `br-cookiebar-cookie` do grupo.
+ *
+ * @part container - Div raiz do grupo.
+ * @part header - Linha de cabeçalho com nome, contadores e controles.
+ * @part body - Área expansível que contém os cookies.
+ */
+export class CookiebarGroup {
+    constructor() {
+        /** Estado atual do checkbox: `true`, `false` ou `'indeterminate'` (seleção parcial). */
+        this.checkboxState = false;
+        /**
+         * Texto anunciado pela região `aria-live` quando o grupo é expandido.
+         * Garante que leitores de tela leiam o conteúdo ao abrir, contornando
+         * a limitação de `<slot>` atravessando múltiplos shadow boundaries.
+         */
+        this.liveAnnouncement = '';
+        /** ID interno gerado automaticamente. Não é necessário informar. */
+        this.customId = generateUniqueId();
+        /**
+         * Indica se o usuário pode desativar este grupo de cookies.
+         * - `true` (padrão): exibe checkbox e permite desativar.
+         * - `false`: exibe "Sempre ativo" e não permite desativar.
+         */
+        this.groupOptOut = true;
+        /**
+         * Estado de seleção do checkbox do grupo.
+         * Pode ser controlado externamente pelo `br-cookiebar` (propagação top-down)
+         * ou recalculado automaticamente a partir do estado dos cookies filhos (bottom-up).
+         */
+        this.groupSelected = false;
+        /** Controla se a lista de cookies está visível. */
+        this.expanded = false;
+        /** Texto do checkbox quando o grupo está totalmente selecionado (ação: desselecionar). */
+        this.selectAllGroupLabel = 'Selecionar toda classe';
+        /** Texto do checkbox quando o grupo está desmarcado ou indeterminado (ação: selecionar). */
+        this.unselectAllGroupLabel = 'Desselecionar toda classe';
+        /** Texto exibido no lugar do checkbox quando `group-opt-out="false"`. */
+        this.alwaysActiveLabel = 'Sempre ativo';
+        /**
+         * Quando `true`, suprime o listener `brCookiebarCookieChange` durante propagações
+         * top-down (cookiebar → grupo → cookies) para evitar recálculo em loop.
+         */
+        this.syncingSelection = false;
+        /**
+         * Manipula a interação direta do usuário com o checkbox do grupo.
+         * Propaga o novo valor para os cookies filhos e emite `brCookiebarGroupChange`.
+         */
+        this.handleCheckboxChange = (event) => {
+            this.applySelection(event.detail, true, true);
+        };
+        /** Alterna a visibilidade da lista de cookies e emite `brCookiebarGroupToggle`. */
+        this.handleToggle = () => {
+            this.expanded = !this.expanded;
+            if (this.expanded) {
+                this.el.setAttribute('expanded', '');
+                this.announceGroupOpen();
+            }
+            else {
+                this.el.removeAttribute('expanded');
+                this.liveAnnouncement = '';
+            }
+            this.brCookiebarGroupToggle.emit({ groupId: this.groupId, expanded: this.expanded });
+        };
+        this.handleHeaderKeydown = (event) => {
+            if (event.key !== 'Enter' && event.key !== ' ')
+                return;
+            event.preventDefault();
+            this.handleToggle();
+        };
+    }
+    /**
+     * Observa mudanças externas em `groupSelected` (propagação top-down do `br-cookiebar`).
+     * Propaga o novo valor para todos os cookies opt-out filhos e atualiza os contadores.
+     * Ignorado quando a mudança é originada internamente pelo recálculo bottom-up.
+     */
+    handleGroupSelectedChange(newValue) {
+        if (this.syncingSelection || !this.groupOptOut)
+            return;
+        this.applySelection(newValue, true, false);
+    }
+    /**
+     * Define `role="region"` e `aria-label` no elemento host para expor o grupo
+     * como landmark nomeado no light DOM, permitindo navegação direta por leitores de tela.
+     *
+     * Calcula o `checkboxState` inicial lendo os atributos HTML dos cookies filhos.
+     *
+     * Ordem de precedência:
+     * 1. Se `groupSelected=true` foi passado como prop, o estado inicial é `true`
+     *    (os cookies ainda não estão hidratados; `componentDidLoad` propagará o valor).
+     * 2. Se `groupOptOut=false` (sempre ativo), o estado não importa (badge fixo).
+     * 3. Caso contrário, lê `cookie-opt-out` e `cookie-selected` via atributos para
+     *    calcular `true`, `false` ou `'indeterminate'` a partir dos cookies filhos.
+     */
+    componentWillLoad() {
+        this.el.setAttribute('role', 'region');
+        this.el.setAttribute('aria-label', this.groupName);
+        if (this.groupSelected || !this.groupOptOut) {
+            this.checkboxState = this.groupSelected;
+            return;
+        }
+        const cookies = Array.from(this.el.children).filter((el) => el.tagName.toLowerCase() === 'br-cookiebar-cookie');
+        const optOutCookies = cookies.filter((c) => c.getAttribute('cookie-opt-out') !== 'false');
+        if (optOutCookies.length === 0) {
+            this.checkboxState = false;
+            return;
+        }
+        this.checkboxState = aggregateSelection(optOutCookies.map((cookie) => cookie.hasAttribute('cookie-selected') && cookie.getAttribute('cookie-selected') !== 'false'));
+        this.el.toggleAttribute('data-indeterminate', this.checkboxState === 'indeterminate');
+    }
+    /**
+     * Quando `groupSelected=true` foi passado como prop inicial, propaga o valor para os
+     * cookies filhos agora que estão hidratados como objetos JS, e então recalcula para
+     * confirmar o estado. Para os demais casos, apenas confirma o estado calculado em
+     * `componentWillLoad()` — sem mudança de `@State`, sem re-render extra.
+     */
+    componentDidLoad() {
+        if (this.groupSelected && this.groupOptOut) {
+            this.applySelection(true, true, false);
+        }
+        this.recalculateGroupState(false);
+    }
+    /**
+     * Escuta o evento `brCookiebarCookieChange` emitido por qualquer `br-cookiebar-cookie` filho.
+     * Recalcula o estado do grupo (marcado / desmarcado / indeterminado) com base
+     * no estado atual de todos os cookies opt-out. Ignorado durante propagações top-down.
+     */
+    handleCookieChange() {
+        if (this.syncingSelection)
+            return;
+        this.recalculateGroupState();
+    }
+    /**
+     * Retorna o estado atual de seleção do grupo:
+     * - `true`: todos os cookies opt-out estão selecionados.
+     * - `false`: nenhum cookie opt-out está selecionado.
+     * - `'indeterminate'`: seleção parcial.
+     */
+    async getState() {
+        return this.checkboxState;
+    }
+    /**
+     * Popula a região `aria-live` com um resumo do grupo após a animação de abertura completar
+     * (`onBrDidOpen`), garantindo que o anúncio ocorra somente quando o conteúdo já é
+     * visualmente acessível. Contorna a limitação de `<slot>` atravessando múltiplos
+     * shadow boundaries.
+     */
+    announceGroupOpen() {
+        const { selected, total } = this.getCookieSummary();
+        const cookieWord = total === 1 ? 'cookie' : 'cookies';
+        let countPart;
+        if (!this.groupOptOut) {
+            countPart = `${total} ${cookieWord}, ${this.alwaysActiveLabel.toLowerCase()}`;
+        }
+        else {
+            countPart = `${total} ${cookieWord}, ${selected} selecionado${selected !== 1 ? 's' : ''}`;
+        }
+        this.liveAnnouncement = [this.groupName, this.groupText, countPart].filter(Boolean).join('. ');
+    }
+    /**
+     * Retorna apenas os `br-cookiebar-cookie` que são filhos diretos do grupo.
+     */
+    getCookieElements() {
+        return Array.from(this.el.children).filter((el) => el.tagName.toLowerCase() === 'br-cookiebar-cookie');
+    }
+    /** Lê os cookies uma vez e deriva os dados usados na sincronização e renderização. */
+    getCookieSummary() {
+        const cookies = this.getCookieElements();
+        const selectableCookies = cookies.filter((cookie) => cookie.cookieOptOut !== false);
+        const selection = aggregateSelection(selectableCookies.map((cookie) => cookie.cookieSelected));
+        const selected = cookies.filter((cookie) => !this.groupOptOut || cookie.cookieOptOut === false || cookie.cookieSelected).length;
+        return { cookies, selectableTotal: selectableCookies.length, selected, selection, total: cookies.length };
+    }
+    /** Executa uma sincronização sem reprocessar watches e eventos dos filhos. */
+    syncSelection(callback) {
+        const wasSyncing = this.syncingSelection;
+        this.syncingSelection = true;
+        try {
+            callback();
+        }
+        finally {
+            this.syncingSelection = wasSyncing;
+        }
+    }
+    /** Atualiza o estado do grupo, opcionalmente propagando e emitindo a mudança. */
+    applySelection(newState, propagate, emit) {
+        this.syncSelection(() => {
+            this.checkboxState = newState;
+            this.groupSelected = newState === true;
+            this.el.toggleAttribute('data-indeterminate', newState === 'indeterminate');
+            if (propagate && typeof newState === 'boolean') {
+                this.getCookieElements().forEach((cookie) => {
+                    if (cookie.cookieOptOut !== false)
+                        cookie.cookieSelected = newState;
+                });
+            }
+        });
+        if (emit)
+            this.brCookiebarGroupChange.emit({ groupId: this.groupId, groupSelected: newState });
+    }
+    /**
+     * Recalcula o estado do checkbox do grupo com base nos cookies opt-out filhos.
+     * Define `checkboxState` como `true`, `false` ou `'indeterminate'` e expõe
+     * o estado indeterminado via `data-indeterminate` para o `br-cookiebar` pai.
+     */
+    recalculateGroupState(emit = true) {
+        const { selectableTotal, selection } = this.getCookieSummary();
+        if (selectableTotal === 0)
+            return;
+        this.applySelection(selection, false, emit);
+    }
+    /**
+     * Gera o `aria-label` descritivo para o contador de cookies exibido no cabeçalho do grupo.
+     * O texto visual `(2/5)` não é legível por leitores de tela; este método fornece a versão
+     * semântica equivalente (ex: "2 de 5 cookies selecionados" ou "3 cookies").
+     */
+    getCookieSizeAriaLabel(summary) {
+        const { selected, total } = summary;
+        const cookieWord = total === 1 ? 'cookie' : 'cookies';
+        if (!this.groupOptOut) {
+            return `${total} ${cookieWord}`;
+        }
+        const verb = selected === 1 ? 'selecionado' : 'selecionados';
+        return `${selected} de ${total} ${cookieWord} ${verb}`;
+    }
+    getCssClassMap() {
+        return {
+            'br-cookiebar-group': true,
+            'br-cookiebar-group--expanded': this.expanded,
+            'br-cookiebar-group--always-active': !this.groupOptOut,
+        };
+    }
+    /**
+     * Renderiza o checkbox (grupos opt-out) ou o badge "Sempre ativo" (grupos sempre ativos).
+     * O label do checkbox muda conforme o estado: selecionar quando desmarcado/indeterminado,
+     * desselecionar quando totalmente marcado.
+     */
+    renderCheckboxOrBadge() {
+        if (!this.groupOptOut) {
+            return h("span", { class: "always-active-badge" }, this.alwaysActiveLabel);
+        }
+        const isIndeterminate = this.checkboxState === 'indeterminate';
+        const isChecked = this.checkboxState === true;
+        const label = isChecked ? this.unselectAllGroupLabel : this.selectAllGroupLabel;
+        const showAlert = this.groupAlertMessage && (this.checkboxState === false || this.checkboxState === 'indeterminate');
+        const ariaLabel = showAlert
+            ? `${label} — ${this.groupName}. ${this.groupAlertMessage}`
+            : `${label} — ${this.groupName}`;
+        return (h("br-checkbox", { class: "group-checkbox-wrapper", label: label, checked: isChecked, indeterminate: isIndeterminate, name: `group-${this.groupId}`, "aria-label": ariaLabel, onCheckedChange: this.handleCheckboxChange }));
+    }
+    /**
+     * Renderização do group-info (nome + contador)
+     **/
+    renderGroupInfo(summary) {
+        const { selected, total } = summary;
+        return (h("div", { class: "group-info" }, h("span", { class: "group-name" }, this.groupName), total > 0 && (h("span", { class: "group-size" }, h("span", { class: "sr-only" }, this.getCookieSizeAriaLabel(summary)), h("span", { "aria-hidden": "true" }, "(", this.groupOptOut ? `${selected}/` : '', total, ")")))));
+    }
+    /**
+     * Renderização do group-controls (checkbox/badge + botão expandir)
+     **/
+    renderGroupControls() {
+        return h("div", { class: "group-controls" }, this.renderCheckboxOrBadge());
+    }
+    /**
+     * Renderização do cabeçalho
+     **/
+    renderGroupHeader(summary) {
+        return (h("div", { class: "group-header-row" }, h("div", { class: "group-header", part: "header", role: "button", tabIndex: 0, "aria-expanded": String(this.expanded), "aria-controls": `${this.customId}-body`, onClick: this.handleToggle, onKeyDown: this.handleHeaderKeydown }, this.renderGroupInfo(summary), h("span", { "aria-hidden": "true" }, h("br-icon", { iconName: this.expanded ? 'fa6-solid:chevron-up' : 'fa6-solid:chevron-down', width: "16", height: "16" }))), this.renderGroupControls()));
+    }
+    /**
+     * Renderização do alerta (visível apenas quando opt-out parcial/desmarcado)
+     **/
+    renderAlert() {
+        if (!this.groupOptOut || !this.groupAlertMessage)
+            return null;
+        if (this.checkboxState !== false && this.checkboxState !== 'indeterminate')
+            return null;
+        return h("br-message", { "is-feedback": true, "show-icon": true, state: "warning", message: this.groupAlertMessage });
+    }
+    /**
+     * Renderização do corpo expansível (lista de cookies)
+     **/
+    renderGroupBody() {
+        if (!this.expanded)
+            return null;
+        return (h("div", { class: "group-body", part: "body", id: `${this.customId}-body` }, h("slot", null)));
+    }
+    render() {
+        const summary = this.getCookieSummary();
+        return (h(Host, { key: '9961a1d1725e17d64e264a2e58ee64d69016739b' }, h("div", { key: '5907cdc48e3cadf52597eefdcd3b010f9d23194b', "aria-live": "polite", "aria-atomic": "true", class: "sr-only" }, this.liveAnnouncement), h("div", { key: '7c44fb7f3c7242f03a357069ed6e174a6486291b', class: this.getCssClassMap(), part: "container" }, this.renderGroupHeader(summary), this.renderAlert(), h("p", { key: '3566ae16b426805a38ffc9b566f359c7cfc5a37d', class: "group-description" }, this.groupText), this.renderGroupBody())));
+    }
+    static get is() { return "br-cookiebar-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cookiebar-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cookiebar-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID interno gerado automaticamente. N\u00E3o \u00E9 necess\u00E1rio informar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            },
+            "groupId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico do grupo. Usado internamente para montar o JSON de resposta."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "group-id"
+            },
+            "groupName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome exibido no cabe\u00E7alho do grupo (ex: `Desempenho`, `Marketing`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "group-name"
+            },
+            "groupText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto descritivo exibido abaixo do cabe\u00E7alho, explicando a finalidade do grupo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "group-text"
+            },
+            "groupOptOut": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se o usu\u00E1rio pode desativar este grupo de cookies.\n- `true` (padr\u00E3o): exibe checkbox e permite desativar.\n- `false`: exibe \"Sempre ativo\" e n\u00E3o permite desativar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "group-opt-out",
+                "defaultValue": "true"
+            },
+            "groupSelected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado de sele\u00E7\u00E3o do checkbox do grupo.\nPode ser controlado externamente pelo `br-cookiebar` (propaga\u00E7\u00E3o top-down)\nou recalculado automaticamente a partir do estado dos cookies filhos (bottom-up)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "group-selected",
+                "defaultValue": "false"
+            },
+            "groupAlertMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Mensagem exibida quando o grupo \u00E9 desmarcado, alertando sobre o impacto."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "group-alert-message"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controla se a lista de cookies est\u00E1 vis\u00EDvel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "false"
+            },
+            "selectAllGroupLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto do checkbox quando o grupo est\u00E1 totalmente selecionado (a\u00E7\u00E3o: desselecionar)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-all-group-label",
+                "defaultValue": "'Selecionar toda classe'"
+            },
+            "unselectAllGroupLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto do checkbox quando o grupo est\u00E1 desmarcado ou indeterminado (a\u00E7\u00E3o: selecionar)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unselect-all-group-label",
+                "defaultValue": "'Desselecionar toda classe'"
+            },
+            "alwaysActiveLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto exibido no lugar do checkbox quando `group-opt-out=\"false\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "always-active-label",
+                "defaultValue": "'Sempre ativo'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "checkboxState": {},
+            "liveAnnouncement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brCookiebarGroupChange",
+                "name": "brCookiebarGroupChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o estado de sele\u00E7\u00E3o do grupo muda (por intera\u00E7\u00E3o do usu\u00E1rio ou propaga\u00E7\u00E3o).\nO `br-cookiebar` pai escuta este evento para recalcular o checkbox \"Selecionar todos\"."
+                },
+                "complexType": {
+                    "original": "{ groupId: string; groupSelected: CookiebarSelectionState }",
+                    "resolved": "{ groupId: string; groupSelected: CookiebarSelectionState; }",
+                    "references": {
+                        "CookiebarSelectionState": {
+                            "location": "import",
+                            "path": "../cookiebar.types",
+                            "id": "src/components/cookiebar/cookiebar.types.ts::CookiebarSelectionState",
+                            "referenceLocation": "CookiebarSelectionState"
+                        }
+                    }
+                }
+            }, {
+                "method": "brCookiebarGroupToggle",
+                "name": "brCookiebarGroupToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido ao expandir ou recolher a lista de cookies do grupo."
+                },
+                "complexType": {
+                    "original": "{ groupId: string; expanded: boolean }",
+                    "resolved": "{ groupId: string; expanded: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getState": {
+                "complexType": {
+                    "signature": "() => Promise<CookiebarSelectionState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CookiebarSelectionState": {
+                            "location": "import",
+                            "path": "../cookiebar.types",
+                            "id": "src/components/cookiebar/cookiebar.types.ts::CookiebarSelectionState",
+                            "referenceLocation": "CookiebarSelectionState"
+                        }
+                    },
+                    "return": "Promise<CookiebarSelectionState>"
+                },
+                "docs": {
+                    "text": "Retorna o estado atual de sele\u00E7\u00E3o do grupo:\n- `true`: todos os cookies opt-out est\u00E3o selecionados.\n- `false`: nenhum cookie opt-out est\u00E1 selecionado.\n- `'indeterminate'`: sele\u00E7\u00E3o parcial.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "groupSelected",
+                "methodName": "handleGroupSelectedChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "brCookiebarCookieChange",
+                "method": "handleCookieChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/cookiebar/cookiebar-header/cookiebar-header.css

@@ -0,0 +1 @@
+*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--color-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);--item-padding-y: var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin: var(--grid-portrait-margin);--grid-maxwidth: var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter: var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media(min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media(min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media(min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset: var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}:host{display:block;width:100%;color:var(--color)}.br-cookiebar-header{width:100%}.br-cookiebar-header .cookiebar-header-content{width:100%}.br-cookiebar-header .cookiebar-header-title{font-size:var(--font-size-scale-up-06);font-weight:var(--font-weight-light);margin-bottom:var(--spacing-scale-4x)}@media(width <= 575px){.br-cookiebar-header .cookiebar-header-title{color:var(--color);font-size:var(--font-size-scale-up-04);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:0}}.br-cookiebar-header .cookiebar-header-last-update{font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);margin-top:0}@media(width <= 575px){.br-cookiebar-header .cookiebar-header-last-update{line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0;font-size:var(--font-size-scale-down-01)}}.br-cookiebar-header .cookiebar-header-last-update span{display:inline-block;margin-left:var(--spacing-scale-half);font-weight:var(--font-weight-regular)}.br-cookiebar-header .cookiebar-header-entry-text{font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin:0}.br-cookiebar-header .hidden-slot{display:none}