@govbr-ds/webcomponents 2.0.0-next.28 → 2.0.0-next.29

package/dist/collection/components/item/item.js

@@ -0,0 +1,505 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ */
+import { h, Host } from "@stencil/core";
+/**
+ * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/item?tab=designer).
+ *
+ * @slot default - Área de conteúdo, podendo conter qualquer componente, exceto botões primários e componentes relacionados à navegação (como carrosséis, paginações, abas, menus, etc.).
+ *
+ * @slot start - Área de recursos visuais, podendo conter elementos como ícones, avatares e mídias.
+ *
+ * @slot end - Área de recursos complementares, podendo conter componentes interativos, metadados e informações adicionais.
+ */
+export class Item {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el;
+    elementInternals;
+    /**
+     * Desativa o item, tornando-o não interativo.
+     */
+    disabled = false;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    customId = `br-item-${itemId++}`;
+    /**
+     * Indica se o item está no estado ativo.
+     * Se definido como verdadeiro, o item será exibido como ativo.
+     */
+    isActive = false;
+    /**
+     * Indica se o item está no estado selecionado.
+     * Se definido como verdadeiro, o item será exibido como selecionado.
+     */
+    isSelected = false;
+    /**
+     * Marca o item como interativo, permitindo que toda a superfície do item seja clicável.
+     */
+    isInteractive = false;
+    /**
+     * URL ou caminho para o qual o usuário será direcionado ao clicar no item. Quando definido, o item será renderizado como um link.
+     */
+    href;
+    /**
+     * Define o alvo do link quando `href` está presente. Pode ser:
+     * - `_blank` para abrir em uma nova aba,
+     * - `_self` para abrir na mesma aba,
+     * - `_parent` para abrir na aba pai,
+     * - `_top` para abrir na aba superior.
+     */
+    target;
+    /**
+     * Quando definido como `true`, o item será tratado como um botão.
+     */
+    isButton = false;
+    /**
+     * Tipo do botão, aplicável apenas se `isButton` for `true`. Pode ser:
+     * - `'submit'` para enviar um formulário,
+     * - `'reset'` para redefinir um formulário,
+     * - `'button'` para um botão padrão.
+     */
+    type;
+    /**
+     *  Define um valor associado ao br-item quando renderizado como um botão, utilizado em contextos de formulário.
+     */
+    value;
+    /**
+     * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.
+     */
+    density = 'medium';
+    // Propriedade interna para verificar a presença de conteúdo no slot default
+    hasSlotDefault = false;
+    hasSlotStart = false;
+    hasSlotEnd = false;
+    // Propriedade interna para armazenar o valor selecionado
+    selectedValue = false;
+    // Propriedade para rastrear a presença de rádios dentro do item
+    hasRadios = false;
+    handleRadioChange() {
+        requestAnimationFrame(() => {
+            this.updateRadioSelectionState();
+        });
+    }
+    handleCheckboxChange(event) {
+        const target = event.target;
+        if (this.el.contains(target)) {
+            this.updateCheckboxSelectionState();
+        }
+    }
+    /**
+     * Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (`<button>`).
+     * Pode ser utilizado para ações personalizadas, exceto quando o item está desativado.
+     */
+    brDidClick;
+    /**
+     * Evento customizado aplicável para todos os tipos de elementos (`div`, `button`, `a`), emitido quando o item é selecionado e desde que a propriedade `isInteractive` esteja presente.
+     */
+    brDidSelect;
+    componentWillLoad() {
+        this.hasSlotContentDefault();
+        this.hasSlotStart = this.hasSlotContent('start');
+        this.hasSlotEnd = this.hasSlotContent('end');
+        this.selectedValue = this.isSelected;
+        if (this.isButton) {
+            this.type = this.type || 'button';
+        }
+        const radios = Array.from(this.el.querySelectorAll('br-radio'));
+        const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));
+        this.hasRadios = radios.length > 0;
+        if (this.isSelected) {
+            if (checkboxes.length > 0) {
+                checkboxes.forEach((checkbox) => (checkbox.checked = true));
+            }
+            if (radios.length > 0) {
+                radios[0].checked = true;
+            }
+        }
+        this.updateRadioSelectionState();
+        this.updateCheckboxSelectionState();
+    }
+    hasSlotContentDefault() {
+        this.hasSlotDefault = this.el.innerHTML !== '';
+    }
+    hasSlotContent(slotName) {
+        return this.el.querySelector(`[slot="${slotName}"]`) !== null;
+    }
+    getCssClassMap() {
+        return {
+            'br-item': true,
+            disabled: this.disabled,
+            active: this.isActive,
+            selected: this.selectedValue,
+            'py-3': this.density === 'medium',
+            'py-4': this.density === 'small',
+        };
+    }
+    getTagType() {
+        if (this.isButton) {
+            return 'button';
+        }
+        if (this.href?.length > 0) {
+            return 'a';
+        }
+        return 'div';
+    }
+    getAttributes() {
+        const TagType = this.getTagType();
+        const baseAttributes = TagType === 'button' ? { type: this.type, value: this.value } : { href: this.href, target: this.target };
+        return {
+            ...baseAttributes,
+            'aria-disabled': this.disabled ? 'true' : null,
+            'aria-current': this.isActive ? 'true' : null,
+            'data-toggle': this.isInteractive ? 'selection' : null,
+            'is-selected': this.selectedValue ? true : null,
+        };
+    }
+    updateCheckboxSelectionState() {
+        if (this.hasRadios)
+            return;
+        const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));
+        this.selectedValue = checkboxes.some((checkbox) => checkbox.checked);
+        this.brDidSelect.emit({ selected: this.selectedValue });
+    }
+    updateRadioSelectionState() {
+        if (!this.hasRadios)
+            return;
+        const radios = Array.from(this.el.querySelectorAll('br-radio'));
+        this.selectedValue = radios.some((radio) => radio.checked);
+        this.brDidSelect.emit({ selected: this.selectedValue });
+    }
+    // Função para verificar se o clique foi dentro do slot do item.
+    isClickInsideInteractiveElement(target) {
+        const interactiveSelectors = 'br-checkbox, br-radio, br-input, br-button, br-select, br-textarea';
+        const interactiveElements = this.el.querySelectorAll(interactiveSelectors);
+        return Array.from(interactiveElements).some((el) => el.contains(target) || target === el);
+    }
+    updateCheckboxes() {
+        const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'));
+        checkboxes.forEach((checkbox) => {
+            checkbox.checked = this.selectedValue;
+        });
+    }
+    handleClick = (event) => {
+        const clickedElement = event.target;
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        if (this.hasRadios) {
+            return;
+        }
+        if (this.isButton) {
+            this.brDidClick.emit();
+        }
+        else if (this.isInteractive && !this.isClickInsideInteractiveElement(clickedElement)) {
+            this.selectedValue = !this.selectedValue;
+            this.brDidSelect.emit({ selected: this.selectedValue });
+            this.updateCheckboxes();
+        }
+        event.stopPropagation();
+    };
+    render() {
+        const TagType = this.getTagType();
+        const attributes = this.getAttributes();
+        const classList = this.getCssClassMap();
+        return (h(Host, { key: '5b3fc760c31330b1d905b2f5f0d5bdb94baf18db' }, h(TagType, { key: '54111660c8cc7cbbe1c0fe68116c378a5d4116dc', class: classList, ...attributes, onClick: this.handleClick, id: this.customId }, this.hasSlotStart || this.hasSlotEnd ? (h("div", { class: "row align-items-center" }, this.hasSlotStart && (h("div", { class: "col-auto" }, h("slot", { name: "start" }))), h("div", { class: "col" }, h("slot", null)), this.hasSlotEnd && (h("div", { class: "col-auto" }, h("slot", { name: "end" }))))) : (h("slot", null)))));
+    }
+    static get is() { return "br-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desativa o item, tornando-o n\u00E3o interativo."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "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,
+                "attribute": "custom-id",
+                "reflect": true,
+                "defaultValue": "`br-item-${itemId++}`"
+            },
+            "isActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se o item est\u00E1 no estado ativo.\nSe definido como verdadeiro, o item ser\u00E1 exibido como ativo."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-active",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "isSelected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se o item est\u00E1 no estado selecionado.\nSe definido como verdadeiro, o item ser\u00E1 exibido como selecionado."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-selected",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "isInteractive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marca o item como interativo, permitindo que toda a superf\u00EDcie do item seja clic\u00E1vel."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-interactive",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL ou caminho para o qual o usu\u00E1rio ser\u00E1 direcionado ao clicar no item. Quando definido, o item ser\u00E1 renderizado como um link."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "href",
+                "reflect": true
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_self' | '_parent' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o alvo do link quando `href` est\u00E1 presente. Pode ser:\n- `_blank` para abrir em uma nova aba,\n- `_self` para abrir na mesma aba,\n- `_parent` para abrir na aba pai,\n- `_top` para abrir na aba superior."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "target",
+                "reflect": true
+            },
+            "isButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Quando definido como `true`, o item ser\u00E1 tratado como um bot\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-button",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'submit' | 'reset' | 'button'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tipo do bot\u00E3o, aplic\u00E1vel apenas se `isButton` for `true`. Pode ser:\n- `'submit'` para enviar um formul\u00E1rio,\n- `'reset'` para redefinir um formul\u00E1rio,\n- `'button'` para um bot\u00E3o padr\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": true
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define um valor associado ao br-item quando renderizado como um bot\u00E3o, utilizado em contextos de formul\u00E1rio."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'medium' | 'small'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ajusta a densidade, alterando o espa\u00E7amento interno para um visual mais compacto ou mais expandido."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "density",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSlotDefault": {},
+            "hasSlotStart": {},
+            "hasSlotEnd": {},
+            "selectedValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brDidClick",
+                "name": "brDidClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento customizado emitido quando o item \u00E9 clicado, aplic\u00E1vel apenas se o item for um bot\u00E3o (`<button>`).\nPode ser utilizado para a\u00E7\u00F5es personalizadas, exceto quando o item est\u00E1 desativado."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "brDidSelect",
+                "name": "brDidSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento customizado aplic\u00E1vel para todos os tipos de elementos (`div`, `button`, `a`), emitido quando o item \u00E9 selecionado e desde que a propriedade `isInteractive` esteja presente."
+                },
+                "complexType": {
+                    "original": "{ selected: boolean }",
+                    "resolved": "{ selected: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "checkedChange",
+                "method": "handleRadioChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "checkedChange",
+                "method": "handleCheckboxChange",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+let itemId = 0;
+//# sourceMappingURL=item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../../../src/components/item/item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State } from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n/**\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/item?tab=designer).\n *\n * @slot default - Área de conteúdo, podendo conter qualquer componente, exceto botões primários e componentes relacionados à navegação (como carrosséis, paginações, abas, menus, etc.).\n *\n * @slot start - Área de recursos visuais, podendo conter elementos como ícones, avatares e mídias.\n *\n * @slot end - Área de recursos complementares, podendo conter componentes interativos, metadados e informações adicionais.\n */\n@Component({\n  tag: 'br-item',\n  styleUrl: 'item.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Item {\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: HTMLBrItemElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Desativa o item, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) readonly disabled: boolean = false\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-item-${itemId++}`\n\n  /**\n   * Indica se o item está no estado ativo.\n   * Se definido como verdadeiro, o item será exibido como ativo.\n   */\n  @Prop({ reflect: true }) readonly isActive: boolean = false\n\n  /**\n   * Indica se o item está no estado selecionado.\n   * Se definido como verdadeiro, o item será exibido como selecionado.\n   */\n  @Prop({ reflect: true }) readonly isSelected: boolean = false\n\n  /**\n   * Marca o item como interativo, permitindo que toda a superfície do item seja clicável.\n   */\n  @Prop({ reflect: true }) readonly isInteractive: boolean = false\n\n  /**\n   * URL ou caminho para o qual o usuário será direcionado ao clicar no item. Quando definido, o item será renderizado como um link.\n   */\n  @Prop({ reflect: true }) readonly href?: string\n\n  /**\n   * Define o alvo do link quando `href` está presente. Pode ser:\n   * - `_blank` para abrir em uma nova aba,\n   * - `_self` para abrir na mesma aba,\n   * - `_parent` para abrir na aba pai,\n   * - `_top` para abrir na aba superior.\n   */\n  @Prop({ reflect: true }) readonly target?: '_blank' | '_self' | '_parent' | '_top'\n\n  /**\n   * Quando definido como `true`, o item será tratado como um botão.\n   */\n  @Prop({ reflect: true }) readonly isButton: boolean = false\n\n  /**\n   * Tipo do botão, aplicável apenas se `isButton` for `true`. Pode ser:\n   * - `'submit'` para enviar um formulário,\n   * - `'reset'` para redefinir um formulário,\n   * - `'button'` para um botão padrão.\n   */\n  @Prop({ reflect: true, mutable: true }) type: 'submit' | 'reset' | 'button'\n\n  /**\n   *  Define um valor associado ao br-item quando renderizado como um botão, utilizado em contextos de formulário.\n   */\n  @Prop({ reflect: true }) readonly value?: string\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ reflect: true }) readonly density: 'large' | 'medium' | 'small' = 'medium'\n\n  // Propriedade interna para verificar a presença de conteúdo no slot default\n  @State() hasSlotDefault: boolean = false\n\n  @State() hasSlotStart: boolean = false\n\n  @State() hasSlotEnd: boolean = false\n\n  // Propriedade interna para armazenar o valor selecionado\n  @State() selectedValue: boolean = false\n\n  // Propriedade para rastrear a presença de rádios dentro do item\n  private hasRadios: boolean = false\n\n  @Listen('checkedChange', { target: 'document' })\n  handleRadioChange() {\n    requestAnimationFrame(() => {\n      this.updateRadioSelectionState()\n    })\n  }\n\n  @Listen('checkedChange', { target: 'document' })\n  handleCheckboxChange(event: Event) {\n    const target = event.target as HTMLElement\n\n    if (this.el.contains(target)) {\n      this.updateCheckboxSelectionState()\n    }\n  }\n\n  /**\n   * Evento customizado emitido quando o item é clicado, aplicável apenas se o item for um botão (`<button>`).\n   * Pode ser utilizado para ações personalizadas, exceto quando o item está desativado.\n   */\n  @Event({ composed: true, cancelable: true, bubbles: true }) brDidClick: EventEmitter\n\n  /**\n   * Evento customizado aplicável para todos os tipos de elementos (`div`, `button`, `a`), emitido quando o item é selecionado e desde que a propriedade `isInteractive` esteja presente.\n   */\n  @Event({ bubbles: true, composed: true }) brDidSelect: EventEmitter<{ selected: boolean }>\n\n  componentWillLoad() {\n    this.hasSlotContentDefault()\n    this.hasSlotStart = this.hasSlotContent('start')\n    this.hasSlotEnd = this.hasSlotContent('end')\n    this.selectedValue = this.isSelected\n    if (this.isButton) {\n      this.type = this.type || 'button'\n    }\n    const radios = Array.from(this.el.querySelectorAll('br-radio'))\n    const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'))\n    this.hasRadios = radios.length > 0\n\n    if (this.isSelected) {\n      if (checkboxes.length > 0) {\n        checkboxes.forEach((checkbox) => (checkbox.checked = true))\n      }\n      if (radios.length > 0) {\n        radios[0].checked = true\n      }\n    }\n\n    this.updateRadioSelectionState()\n    this.updateCheckboxSelectionState()\n  }\n\n  private hasSlotContentDefault(): void {\n    this.hasSlotDefault = this.el.innerHTML !== ''\n  }\n\n  private hasSlotContent(slotName: string): boolean {\n    return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-item': true,\n      disabled: this.disabled,\n      active: this.isActive,\n      selected: this.selectedValue,\n      'py-3': this.density === 'medium',\n      'py-4': this.density === 'small',\n    }\n  }\n\n  private getTagType(): string {\n    if (this.isButton) {\n      return 'button'\n    }\n    if (this.href?.length > 0) {\n      return 'a'\n    }\n    return 'div'\n  }\n\n  private getAttributes() {\n    const TagType = this.getTagType()\n    const baseAttributes =\n      TagType === 'button' ? { type: this.type, value: this.value } : { href: this.href, target: this.target }\n\n    return {\n      ...baseAttributes,\n      'aria-disabled': this.disabled ? 'true' : null,\n      'aria-current': this.isActive ? 'true' : null,\n      'data-toggle': this.isInteractive ? 'selection' : null,\n      'is-selected': this.selectedValue ? true : null,\n    }\n  }\n\n  private updateCheckboxSelectionState() {\n    if (this.hasRadios) return\n\n    const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'))\n\n    this.selectedValue = checkboxes.some((checkbox) => checkbox.checked)\n    this.brDidSelect.emit({ selected: this.selectedValue })\n  }\n\n  private updateRadioSelectionState() {\n    if (!this.hasRadios) return\n\n    const radios = Array.from(this.el.querySelectorAll('br-radio'))\n\n    this.selectedValue = radios.some((radio) => radio.checked)\n    this.brDidSelect.emit({ selected: this.selectedValue })\n  }\n\n  // Função para verificar se o clique foi dentro do slot do item.\n  private isClickInsideInteractiveElement(target: HTMLElement): boolean {\n    const interactiveSelectors = 'br-checkbox, br-radio, br-input, br-button, br-select, br-textarea'\n    const interactiveElements = this.el.querySelectorAll(interactiveSelectors)\n    return Array.from(interactiveElements).some((el) => el.contains(target) || target === el)\n  }\n\n  private updateCheckboxes() {\n    const checkboxes = Array.from(this.el.querySelectorAll('br-checkbox'))\n\n    checkboxes.forEach((checkbox) => {\n      checkbox.checked = this.selectedValue\n    })\n  }\n\n  private readonly handleClick = (event: MouseEvent) => {\n    const clickedElement = event.target as HTMLElement\n\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n\n    if (this.hasRadios) {\n      return\n    }\n\n    if (this.isButton) {\n      this.brDidClick.emit()\n    } else if (this.isInteractive && !this.isClickInsideInteractiveElement(clickedElement)) {\n      this.selectedValue = !this.selectedValue\n      this.brDidSelect.emit({ selected: this.selectedValue })\n      this.updateCheckboxes()\n    }\n\n    event.stopPropagation()\n  }\n\n  render() {\n    const TagType = this.getTagType()\n    const attributes = this.getAttributes()\n    const classList = this.getCssClassMap()\n    return (\n      <Host>\n        <TagType class={classList} {...attributes} onClick={this.handleClick} id={this.customId}>\n          {this.hasSlotStart || this.hasSlotEnd ? (\n            <div class=\"row align-items-center\">\n              {this.hasSlotStart && (\n                <div class=\"col-auto\">\n                  <slot name=\"start\"></slot>\n                </div>\n              )}\n\n              <div class=\"col\">\n                <slot></slot>\n              </div>\n\n              {this.hasSlotEnd && (\n                <div class=\"col-auto\">\n                  <slot name=\"end\"></slot>\n                </div>\n              )}\n            </div>\n          ) : (\n            <slot></slot>\n          )}\n        </TagType>\n      </Host>\n    )\n  }\n}\n\nlet itemId = 0\n"]}