@govbr-ds/webcomponents 2.0.0-next.37 → 2.0.0-next.39

package/dist/collection/components/collapse/collapse.js

@@ -3,7 +3,7 @@
  * © https://serpro.gov.br/ - MIT License.
  */
 import { h, Host } from "@stencil/core";
-// import { CssClassMap } from '../../utils/interfaces'
+import Helpers from "../../utils/helpers";
 /**
  * O componente `br-collapse` pode ser utilizado em dois cenários principais: collapse simples ou accordion.
  *
@@ -24,68 +24,132 @@ export class Collapse {
      * Identificador único.
      * Caso não seja fornecido, um ID gerado automaticamente será usado.
      */
-    customId = `br-collapse-${collapseId++}`;
-    /** Define se o item está inicialmente aberto */
+    customId = Helpers.generateUniqueId('clp');
+    /**
+     * Define se o collapse está aberto ou fechado.
+     * @default false
+     */
     open = false;
-    /** Define se o collapse faz parte de um accordion */
-    accordionGroup;
-    /** Classe CSS para o ícone de expansão */
+    /**
+     * Define se o collapse faz parte de um accordion
+     * @default null
+     */
+    accordionGroup = null;
+    /**
+     * Classe CSS para o ícone de expansão
+     * @default 'fa6-solid:chevron-down'
+     */
     iconToShow = 'fa6-solid:chevron-down';
-    /** Classe CSS para o ícone de recolhimento */
+    /**
+     * Classe CSS para o ícone de recolhimento
+     * @default 'fa6-solid:chevron-up'
+     */
     iconToHide = 'fa6-solid:chevron-up';
-    /** Define a posição do ícone: 'left' ou 'right' */
+    /**
+     * Define a posição do ícone: 'left' ou 'right'
+     * @default 'right'
+     */
     iconPosition = 'right';
-    /** Evento emitido ao expandir */
+    /**
+     * Evento emitido ao expandir.
+     */
     brDidOpen;
-    /** Evento emitido ao recolher */
+    /**
+     * Evento emitido ao recolher.
+     */
     brDidClose;
+    /**
+     * Evento disparado quando o componente é aberto.
+     * @param event Evento disparado quando o componente é aberto.
+     */
+    /**
+     * Handler para o evento de abertura do componente.
+     * Fecha o collapse atual se ele não for parte do mesmo grupo de accordion.
+     * @param event Evento disparado quando o componente é aberto.
+     */
+    handleOpen(event) {
+        if (this.accordionGroup &&
+            this.accordionGroup === event.detail.accordionGroup &&
+            event.detail.id !== this.customId) {
+            this.closeCollapse();
+        }
+    }
+    /**
+     * Ciclo de vida do componente. Chamado uma vez logo após o componente ser adicionado ao DOM.
+     */
     componentWillLoad() {
         this.syncDetailsWithOpen();
     }
+    /**
+     * Ciclo de vida do componente. Chamado quando o componente é removido do DOM.
+     */
+    disconnectedCallback() {
+        const details = this.el.shadowRoot?.querySelector('details');
+        if (details !== null) {
+            details.removeEventListener('toggle', this.handleCollapse);
+        }
+    }
+    /**
+     * Sincroniza o estado do elemento <details> com a propriedade open.
+     * Isso garante que o estado visual do componente corresponda ao estado interno.
+     */
     syncDetailsWithOpen() {
         const details = this.el.shadowRoot?.querySelector('details');
         if (details !== null) {
             details.open = this.open;
         }
     }
+    /**
+     * Método chamado quando o elemento <details> é aberto ou fechado.
+     * Atualiza o estado interno do componente e emite eventos apropriados.
+     * @param event O evento de toggle do elemento <details>.
+     */
     handleCollapse = (event) => {
         const details = event.target;
         const isOpen = details.open;
-        if (this.accordionGroup && isOpen) {
-            const allItems = document.querySelectorAll(`br-collapse[accordion-group="${this.accordionGroup}"]`);
-            allItems.forEach((item) => {
-                if (item !== this.el) {
-                    ;
-                    item.closeCollapse();
-                }
-            });
-        }
         this.open = isOpen;
         if (this.open) {
-            this.brDidOpen.emit({ id: this.customId });
+            this.brDidOpen.emit({ id: this.customId, accordionGroup: this.accordionGroup });
         }
         else {
-            this.brDidClose.emit({ id: this.customId });
+            this.brDidClose.emit({ id: this.customId, accordionGroup: this.accordionGroup });
         }
     };
-    /** Método público para abrir */
+    /**
+     * Método público para abrir.
+     * Este método pode ser chamado externamente para abrir o componente.
+     */
     async openCollapse() {
         this.open = true;
         this.syncDetailsWithOpen();
-        this.brDidOpen.emit({ id: this.customId });
+        this.brDidOpen.emit({ id: this.customId, accordionGroup: this.accordionGroup });
     }
-    /** Método público para fechar */
+    /**
+     * Método público para fechar.
+     * Este método pode ser chamado externamente para fechar o componente.
+     */
     async closeCollapse() {
         this.open = false;
         this.syncDetailsWithOpen();
-        this.brDidClose.emit({ id: this.customId });
+        this.brDidClose.emit({ id: this.customId, accordionGroup: this.accordionGroup });
     }
+    /**
+     * Renderiza o ícone de acordo com o estado do collapse.
+     * Se o collapse estiver aberto, renderiza o ícone para ocultar.
+     * Caso contrário, renderiza o ícone para mostrar.
+     * @returns JSX do ícone
+     */
     renderIcon() {
         return h("br-icon", { "icon-name": this.open ? this.iconToHide : this.iconToShow });
     }
+    /**
+     * Renderiza o componente.
+     * O componente é renderizado como um elemento <details> com um <summary> que contém o acionador.
+     * @returns JSX do componente.
+     */
     render() {
         const itemCount = this.el.querySelectorAll('br-item').length;
-        return (h(Host, { key: '62c90e824797ab96f034afce5d0cb91bf051011a' }, h("details", { key: '6f5c7d43b287fa1a2dfb26ff690ce1e699f32262', class: "br-collapse", open: this.open, onToggle: this.handleCollapse, id: this.customId }, h("summary", { key: 'bc99fc79459ef51aa6e4ce17d7828af5cea6a412', class: "trigger", role: "button", "aria-expanded": String(this.open), "aria-controls": `content-${this.customId}`, "aria-labelledby": `label-${this.customId}`, tabindex: "0", "aria-live": "polite" }, this.iconPosition === 'left' && this.renderIcon(), h("div", { key: 'd29985da0b06f0eb9a38df08a950a9b863548cc9', class: "trigger-content", id: `label-${this.customId}` }, h("slot", { key: '9650b3455288883c0d361a182927c96f4c38ffa1', name: "trigger" })), this.iconPosition === 'right' && this.renderIcon()), h("div", { key: 'f5811bee8ca7dc4babf2a3d610af00a7678398d9', class: "content", id: `content-${this.customId}`, "aria-live": "polite", "aria-labelledby": `label-${this.customId}` }, this.open && itemCount > 0 && (h("div", { key: '1bee5db1e91e46174aa809fa08380c6b969cf1b3', class: "visually-hidden" }, itemCount, " ", itemCount === 1 ? 'item' : 'itens', " na lista")), h("slot", { key: 'acc03f9518fb738f6fb0b3f7d3afc9ad41d08c9e' })))));
+        return (h(Host, { key: '1a832a24006eb9f9a430783b5ba5f76e647b4ced' }, h("details", { key: 'c3daa16f5d23b0c9074b2c090b6c24db26bc36dc', class: "br-collapse", open: this.open, onToggle: this.handleCollapse, id: this.customId }, h("summary", { key: '1477adb677338705749b7fa5e6a0dd12e4cd1d3b', class: "trigger", role: "button", "aria-expanded": String(this.open), "aria-controls": `content-${this.customId}`, "aria-labelledby": `label-${this.customId}`, tabindex: "0", "aria-live": "polite" }, this.iconPosition === 'left' && this.renderIcon(), h("div", { key: '5478d4af34f5d76c6944fb164b7046f92fd92abc', class: "trigger-content", id: `label-${this.customId}` }, h("slot", { key: 'cc9b393aa5555e23037926f6d7fb3bd7a897b47b', name: "trigger" })), this.iconPosition === 'right' && this.renderIcon()), h("div", { key: 'b5b53ae0a57a603795e5ed3ee848c6325431d829', class: "content", id: `content-${this.customId}`, "aria-live": "polite", "aria-labelledby": `label-${this.customId}` }, this.open && itemCount > 0 && (h("div", { key: 'c394cf7b1d2f15ace669aecb5c1d1b9374cd77d9', class: "visually-hidden" }, itemCount, " ", itemCount === 1 ? 'item' : 'itens', " na lista")), h("slot", { key: 'ecbc97ea6ba79611b03c4d81103913ab7693c18c' })))));
     }
     static get is() { return "br-collapse"; }
     static get encapsulation() { return "shadow"; }
@@ -120,7 +184,7 @@ export class Collapse {
                 "setter": false,
                 "attribute": "custom-id",
                 "reflect": true,
-                "defaultValue": "`br-collapse-${collapseId++}`"
+                "defaultValue": "Helpers.generateUniqueId('clp')"
             },
             "open": {
                 "type": "boolean",
@@ -133,8 +197,11 @@ export class Collapse {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Define se o item est\u00E1 inicialmente aberto"
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Define se o collapse est\u00E1 aberto ou fechado."
                 },
                 "getter": false,
                 "setter": false,
@@ -153,13 +220,17 @@ export class Collapse {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
                     "text": "Define se o collapse faz parte de um accordion"
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "accordion-group",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "null"
             },
             "iconToShow": {
                 "type": "string",
@@ -172,7 +243,10 @@ export class Collapse {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "default",
+                            "text": "'fa6-solid:chevron-down'"
+                        }],
                     "text": "Classe CSS para o \u00EDcone de expans\u00E3o"
                 },
                 "getter": false,
@@ -192,7 +266,10 @@ export class Collapse {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "default",
+                            "text": "'fa6-solid:chevron-up'"
+                        }],
                     "text": "Classe CSS para o \u00EDcone de recolhimento"
                 },
                 "getter": false,
@@ -212,7 +289,10 @@ export class Collapse {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "default",
+                            "text": "'right'"
+                        }],
                     "text": "Define a posi\u00E7\u00E3o do \u00EDcone: 'left' ou 'right'"
                 },
                 "getter": false,
@@ -232,11 +312,11 @@ export class Collapse {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento emitido ao expandir"
+                    "text": "Evento emitido ao expandir."
                 },
                 "complexType": {
-                    "original": "{ id: string }",
-                    "resolved": "{ id: string; }",
+                    "original": "{ id: string; accordionGroup: string }",
+                    "resolved": "{ id: string; accordionGroup: string; }",
                     "references": {}
                 }
             }, {
@@ -247,11 +327,11 @@ export class Collapse {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento emitido ao recolher"
+                    "text": "Evento emitido ao recolher."
                 },
                 "complexType": {
-                    "original": "{ id: string }",
-                    "resolved": "{ id: string; }",
+                    "original": "{ id: string; accordionGroup: string }",
+                    "resolved": "{ id: string; accordionGroup: string; }",
                     "references": {}
                 }
             }];
@@ -271,7 +351,7 @@ export class Collapse {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "M\u00E9todo p\u00FAblico para abrir",
+                    "text": "M\u00E9todo p\u00FAblico para abrir.\nEste m\u00E9todo pode ser chamado externamente para abrir o componente.",
                     "tags": []
                 }
             },
@@ -288,14 +368,22 @@ export class Collapse {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "M\u00E9todo p\u00FAblico para fechar",
+                    "text": "M\u00E9todo p\u00FAblico para fechar.\nEste m\u00E9todo pode ser chamado externamente para fechar o componente.",
                     "tags": []
                 }
             }
         };
     }
     static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "brDidOpen",
+                "method": "handleOpen",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
     static get attachInternalsMemberName() { return "elementInternals"; }
 }
-let collapseId = 0;
 //# sourceMappingURL=collapse.js.map

package/dist/collection/components/collapse/collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/collapse/collapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core'\n// import { CssClassMap } from '../../utils/interfaces'\n\n/**\n * O componente `br-collapse` pode ser utilizado em dois cenários principais: collapse simples ou accordion.\n *\n * - Collapse simples: Cada instância funciona de forma independente, permitindo abrir ou fechar o conteúdo conforme necessário, sem impactar outros componentes na página.\n * - Accordion: Quando configurado com a propriedade `accordionGroup`, múltiplos componentes `br-collapse` são agrupados. Nesse caso, apenas um item pode estar expandido por vez. Ao abrir um novo item, o anteriormente expandido será automaticamente fechado.\n *\n * @slot default - O conteúdo expansível mostrado/ocultado dinamicamente.\n * @slot trigger - Permite personalizar o conteúdo do acionador (texto, imagens, etc.).\n */\n@Component({\n  tag: 'br-collapse',\n  styleUrl: 'collapse.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Collapse {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrCollapseElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = `br-collapse-${collapseId++}`\n\n  /** Define se o item está inicialmente aberto */\n  @Prop({ reflect: true, mutable: true }) open: boolean = false\n\n  /** Define se o collapse faz parte de um accordion */\n  @Prop() accordionGroup?: string\n\n  /** Classe CSS para o ícone de expansão */\n  @Prop() iconToShow: string = 'fa6-solid:chevron-down'\n\n  /** Classe CSS para o ícone de recolhimento */\n  @Prop() iconToHide: string = 'fa6-solid:chevron-up'\n\n  /** Define a posição do ícone: 'left' ou 'right' */\n  @Prop() iconPosition: 'left' | 'right' = 'right'\n\n  /** Evento emitido ao expandir */\n  @Event() brDidOpen: EventEmitter<{ id: string }>\n\n  /** Evento emitido ao recolher */\n  @Event() brDidClose: EventEmitter<{ id: string }>\n\n  componentWillLoad() {\n    this.syncDetailsWithOpen()\n  }\n\n  private syncDetailsWithOpen() {\n    const details = this.el.shadowRoot?.querySelector('details')\n    if (details !== null) {\n      details.open = this.open\n    }\n  }\n\n  private handleCollapse = (event: Event) => {\n    const details = event.target as HTMLDetailsElement\n    const isOpen = details.open\n\n    if (this.accordionGroup && isOpen) {\n      const allItems = document.querySelectorAll(`br-collapse[accordion-group=\"${this.accordionGroup}\"]`)\n      allItems.forEach((item) => {\n        if (item !== this.el) {\n          ;(item as HTMLBrCollapseElement).closeCollapse()\n        }\n      })\n    }\n    this.open = isOpen\n    if (this.open) {\n      this.brDidOpen.emit({ id: this.customId })\n    } else {\n      this.brDidClose.emit({ id: this.customId })\n    }\n  }\n\n  /** Método público para abrir */\n  @Method()\n  async openCollapse() {\n    this.open = true\n    this.syncDetailsWithOpen()\n    this.brDidOpen.emit({ id: this.customId })\n  }\n\n  /** Método público para fechar */\n  @Method()\n  async closeCollapse() {\n    this.open = false\n    this.syncDetailsWithOpen()\n    this.brDidClose.emit({ id: this.customId })\n  }\n\n  private renderIcon() {\n    return <br-icon icon-name={this.open ? this.iconToHide : this.iconToShow}></br-icon>\n  }\n\n  render() {\n    const itemCount = this.el.querySelectorAll('br-item').length\n\n    return (\n      <Host>\n        <details class=\"br-collapse\" open={this.open} onToggle={this.handleCollapse} id={this.customId}>\n          <summary\n            class=\"trigger\"\n            role=\"button\"\n            aria-expanded={String(this.open)}\n            aria-controls={`content-${this.customId}`}\n            aria-labelledby={`label-${this.customId}`}\n            tabindex=\"0\"\n            aria-live=\"polite\"\n          >\n            {this.iconPosition === 'left' && this.renderIcon()}\n            <div class=\"trigger-content\" id={`label-${this.customId}`}>\n              <slot name=\"trigger\"></slot>\n            </div>\n            {this.iconPosition === 'right' && this.renderIcon()}\n          </summary>\n\n          <div\n            class=\"content\"\n            id={`content-${this.customId}`}\n            aria-live=\"polite\"\n            aria-labelledby={`label-${this.customId}`}\n          >\n            {this.open && itemCount > 0 && (\n              <div class=\"visually-hidden\">\n                {itemCount} {itemCount === 1 ? 'item' : 'itens'} na lista\n              </div>\n            )}\n            <slot></slot>\n          </div>\n        </details>\n      </Host>\n    )\n  }\n}\n\nlet collapseId = 0\n"]}
+{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/collapse/collapse.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core'\n\nimport Helpers from '../../utils/helpers'\n\n/**\n * O componente `br-collapse` pode ser utilizado em dois cenários principais: collapse simples ou accordion.\n *\n * - Collapse simples: Cada instância funciona de forma independente, permitindo abrir ou fechar o conteúdo conforme necessário, sem impactar outros componentes na página.\n * - Accordion: Quando configurado com a propriedade `accordionGroup`, múltiplos componentes `br-collapse` são agrupados. Nesse caso, apenas um item pode estar expandido por vez. Ao abrir um novo item, o anteriormente expandido será automaticamente fechado.\n *\n * @slot default - O conteúdo expansível mostrado/ocultado dinamicamente.\n * @slot trigger - Permite personalizar o conteúdo do acionador (texto, imagens, etc.).\n */\n@Component({\n  tag: 'br-collapse',\n  styleUrl: 'collapse.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Collapse {\n  /**\n   * Referência ao elemento host do componente.\n   * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.\n   */\n  @Element() el: HTMLBrCollapseElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = Helpers.generateUniqueId('clp')\n\n  /**\n   * Define se o collapse está aberto ou fechado.\n   * @default false\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = false\n\n  /**\n   * Define se o collapse faz parte de um accordion\n   * @default null\n   */\n  @Prop() accordionGroup?: string = null\n\n  /**\n   * Classe CSS para o ícone de expansão\n   * @default 'fa6-solid:chevron-down'\n   */\n  @Prop() iconToShow: string = 'fa6-solid:chevron-down'\n\n  /**\n   * Classe CSS para o ícone de recolhimento\n   * @default 'fa6-solid:chevron-up'\n   */\n  @Prop() iconToHide: string = 'fa6-solid:chevron-up'\n\n  /**\n   * Define a posição do ícone: 'left' ou 'right'\n   * @default 'right'\n   */\n  @Prop() iconPosition: 'left' | 'right' = 'right'\n\n  /**\n   * Evento emitido ao expandir.\n   */\n  @Event() brDidOpen: EventEmitter<{ id: string; accordionGroup: string }>\n\n  /**\n   * Evento emitido ao recolher.\n   */\n  @Event() brDidClose: EventEmitter<{ id: string; accordionGroup: string }>\n\n  /**\n   * Evento disparado quando o componente é aberto.\n   * @param event Evento disparado quando o componente é aberto.\n   */\n  @Listen('brDidOpen', { target: 'document' })\n  /**\n   * Handler para o evento de abertura do componente.\n   * Fecha o collapse atual se ele não for parte do mesmo grupo de accordion.\n   * @param event Evento disparado quando o componente é aberto.\n   */\n  handleOpen(event: CustomEvent) {\n    if (\n      this.accordionGroup &&\n      this.accordionGroup === event.detail.accordionGroup &&\n      event.detail.id !== this.customId\n    ) {\n      this.closeCollapse()\n    }\n  }\n\n  /**\n   * Ciclo de vida do componente. Chamado uma vez logo após o componente ser adicionado ao DOM.\n   */\n  componentWillLoad() {\n    this.syncDetailsWithOpen()\n  }\n\n  /**\n   * Ciclo de vida do componente. Chamado quando o componente é removido do DOM.\n   */\n  disconnectedCallback() {\n    const details = this.el.shadowRoot?.querySelector('details')\n    if (details !== null) {\n      details.removeEventListener('toggle', this.handleCollapse)\n    }\n  }\n\n  /**\n   * Sincroniza o estado do elemento <details> com a propriedade open.\n   * Isso garante que o estado visual do componente corresponda ao estado interno.\n   */\n  private syncDetailsWithOpen() {\n    const details = this.el.shadowRoot?.querySelector('details')\n    if (details !== null) {\n      details.open = this.open\n    }\n  }\n\n  /**\n   * Método chamado quando o elemento <details> é aberto ou fechado.\n   * Atualiza o estado interno do componente e emite eventos apropriados.\n   * @param event O evento de toggle do elemento <details>.\n   */\n  private handleCollapse = (event: Event) => {\n    const details = event.target as HTMLDetailsElement\n    const isOpen = details.open\n\n    this.open = isOpen\n    if (this.open) {\n      this.brDidOpen.emit({ id: this.customId, accordionGroup: this.accordionGroup })\n    } else {\n      this.brDidClose.emit({ id: this.customId, accordionGroup: this.accordionGroup })\n    }\n  }\n\n  /**\n   * Método público para abrir.\n   * Este método pode ser chamado externamente para abrir o componente.\n   */\n  @Method()\n  async openCollapse() {\n    this.open = true\n    this.syncDetailsWithOpen()\n    this.brDidOpen.emit({ id: this.customId, accordionGroup: this.accordionGroup })\n  }\n\n  /**\n   * Método público para fechar.\n   * Este método pode ser chamado externamente para fechar o componente.\n   */\n  @Method()\n  async closeCollapse() {\n    this.open = false\n    this.syncDetailsWithOpen()\n    this.brDidClose.emit({ id: this.customId, accordionGroup: this.accordionGroup })\n  }\n\n  /**\n   * Renderiza o ícone de acordo com o estado do collapse.\n   * Se o collapse estiver aberto, renderiza o ícone para ocultar.\n   * Caso contrário, renderiza o ícone para mostrar.\n   * @returns JSX do ícone\n   */\n  private renderIcon() {\n    return <br-icon icon-name={this.open ? this.iconToHide : this.iconToShow}></br-icon>\n  }\n\n  /**\n   * Renderiza o componente.\n   * O componente é renderizado como um elemento <details> com um <summary> que contém o acionador.\n   * @returns JSX do componente.\n   */\n  render() {\n    const itemCount = this.el.querySelectorAll('br-item').length\n\n    return (\n      <Host>\n        <details class=\"br-collapse\" open={this.open} onToggle={this.handleCollapse} id={this.customId}>\n          <summary\n            class=\"trigger\"\n            role=\"button\"\n            aria-expanded={String(this.open)}\n            aria-controls={`content-${this.customId}`}\n            aria-labelledby={`label-${this.customId}`}\n            tabindex=\"0\"\n            aria-live=\"polite\"\n          >\n            {this.iconPosition === 'left' && this.renderIcon()}\n            <div class=\"trigger-content\" id={`label-${this.customId}`}>\n              <slot name=\"trigger\"></slot>\n            </div>\n            {this.iconPosition === 'right' && this.renderIcon()}\n          </summary>\n\n          <div\n            class=\"content\"\n            id={`content-${this.customId}`}\n            aria-live=\"polite\"\n            aria-labelledby={`label-${this.customId}`}\n          >\n            {this.open && itemCount > 0 && (\n              <div class=\"visually-hidden\">\n                {itemCount} {itemCount === 1 ? 'item' : 'itens'} na lista\n              </div>\n            )}\n            <slot></slot>\n          </div>\n        </details>\n      </Host>\n    )\n  }\n}\n"]}