@govbr-ds/webcomponents 2.0.0-next.4 → 2.0.0-next.40

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

@@ -0,0 +1,613 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+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;
+    // Referência ao elemento interno que deve receber o foco
+    focusableElement;
+    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) => {
+        // Se o componente estiver desabilitado, impede a ação e sai imediatamente.
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        const clickedElement = event.target;
+        if (this.hasRadios) {
+            return;
+        }
+        if (this.isButton) {
+            this.brDidClick.emit();
+        }
+        else if (this.isInteractive && !this.isClickInsideInteractiveElement(clickedElement)) {
+            // Armazena o estado anterior para emitir o evento apenas se houver mudança.
+            const previousSelectedValue = this.selectedValue;
+            this.selectedValue = !this.selectedValue;
+            if (previousSelectedValue !== this.selectedValue) {
+                this.brDidSelect.emit({ selected: this.selectedValue });
+            }
+            // Atualiza o estado dos checkboxes internos.
+            this.updateCheckboxes();
+        }
+        event.stopPropagation();
+    };
+    handleKeydown(event) {
+        if (this.disabled) {
+            console.log(`[br-item ${this.customId}] Item desativado, ignorando tecla pressionada(keydown).`);
+            return;
+        }
+        // Use closest para encontrar o br-list ancestral, mais robusto que parentElement
+        const listContainer = this.el.closest('br-list');
+        if (listContainer === null || listContainer === undefined) {
+            console.error(`[br-item ${this.customId}] Não foi possível encontrar o container pai <br-list>.`);
+            return;
+        }
+        // Busca itens diretamente dentro do listContainer encontrado
+        const listItems = Array.from(listContainer.querySelectorAll('br-item:not([disabled])'));
+        if (listItems.length === 0) {
+            console.warn(`[br-item ${this.customId}] Nenhum item navegável encontrado no container da lista.`);
+            return;
+        }
+        // Encontra o índice do item atual na lista de itens navegáveis
+        const currentIndex = listItems.indexOf(this.el);
+        if (currentIndex === -1) {
+            console.error(`[br-item ${this.customId}] Item atual não encontrado nos itens navegáveis.`);
+            return; // O item atual não está na lista (talvez desabilitado ou erro)
+        }
+        let targetItem = null;
+        switch (event.key) {
+            case 'ArrowDown': // Seta para baixo
+                event.preventDefault();
+                if (currentIndex < listItems.length - 1) {
+                    targetItem = listItems[currentIndex + 1];
+                }
+                else {
+                    console.log(`[br-item ${this.customId}] ArrowDown: Último item já selecionado.`);
+                }
+                break;
+            case 'ArrowUp': // Seta para cima
+                event.preventDefault();
+                if (currentIndex > 0) {
+                    targetItem = listItems[currentIndex - 1];
+                }
+                else {
+                    console.log(`[br-item ${this.customId}] ArrowUp: Usuário já está no primeiro item da lista.`);
+                }
+                break;
+            case 'Enter':
+            case ' ': // Barra de espaço
+                event.preventDefault();
+                this.handleClick(new MouseEvent('click'));
+                break;
+            case 'Home':
+                event.preventDefault();
+                targetItem = listItems[0];
+                break;
+            case 'End':
+                event.preventDefault();
+                targetItem = listItems[listItems.length - 1];
+                break;
+            default:
+                return; // Ignorar outras teclas
+        }
+        if (targetItem && targetItem !== this.el) {
+            // Verifica se o item alvo é diferente do atual
+            if ('setFocus' in targetItem) {
+                // Se o item alvo tiver o método setFocus, chama-o
+                ;
+                targetItem.setFocus();
+            }
+            // Caso contrário, apenas defina o foco no elemento alvo
+            targetItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+        }
+    }
+    /**
+     * Define o foco no elemento interno do componente.
+     * Este método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.
+     */
+    async setFocus() {
+        this.focusableElement?.focus();
+    }
+    render() {
+        const TagType = this.getTagType();
+        const attributes = this.getAttributes();
+        const classList = this.getCssClassMap();
+        return (h(Host, { key: 'f61dbe87513b7975c1eb1a7e121addb2cc3d3703' }, h(TagType, { key: '56f0183bc036790c8ce8792753559fd147ecf59a', class: classList, ...attributes, onClick: this.handleClick, id: this.customId, tabIndex: this.disabled ? -1 : this.isInteractive ? 0 : -1, ref: (el) => (this.focusableElement = el), onKeyDown: (event) => this.handleKeydown(event), onMouseDown: (e) => e.preventDefault() }, 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 methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define o foco no elemento interno do componente.\nEste m\u00E9todo pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    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":["../../../../../../packages/webcomponents/src/components/item/item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} 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  // Referência ao elemento interno que deve receber o foco\n  private focusableElement?: HTMLElement\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    // Se o componente estiver desabilitado, impede a ação e sai imediatamente.\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\n    }\n\n    const clickedElement = event.target as HTMLElement\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      // Armazena o estado anterior para emitir o evento apenas se houver mudança.\n      const previousSelectedValue = this.selectedValue\n      this.selectedValue = !this.selectedValue\n\n      if (previousSelectedValue !== this.selectedValue) {\n        this.brDidSelect.emit({ selected: this.selectedValue })\n      }\n\n      // Atualiza o estado dos checkboxes internos.\n      this.updateCheckboxes()\n    }\n\n    event.stopPropagation()\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (this.disabled) {\n      console.log(`[br-item ${this.customId}] Item desativado, ignorando tecla pressionada(keydown).`)\n      return\n    }\n\n    // Use closest para encontrar o br-list ancestral, mais robusto que parentElement\n    const listContainer = this.el.closest('br-list')\n    if (listContainer === null || listContainer === undefined) {\n      console.error(`[br-item ${this.customId}] Não foi possível encontrar o container pai <br-list>.`)\n      return\n    }\n\n    // Busca itens diretamente dentro do listContainer encontrado\n    const listItems = Array.from(listContainer.querySelectorAll('br-item:not([disabled])')) as HTMLBrItemElement[]\n    if (listItems.length === 0) {\n      console.warn(`[br-item ${this.customId}] Nenhum item navegável encontrado no container da lista.`)\n      return\n    }\n\n    // Encontra o índice do item atual na lista de itens navegáveis\n    const currentIndex = listItems.indexOf(this.el)\n\n    if (currentIndex === -1) {\n      console.error(`[br-item ${this.customId}] Item atual não encontrado nos itens navegáveis.`)\n      return // O item atual não está na lista (talvez desabilitado ou erro)\n    }\n\n    let targetItem: HTMLBrItemElement | null = null\n\n    switch (event.key) {\n      case 'ArrowDown': // Seta para baixo\n        event.preventDefault()\n        if (currentIndex < listItems.length - 1) {\n          targetItem = listItems[currentIndex + 1]\n        } else {\n          console.log(`[br-item ${this.customId}] ArrowDown: Último item já selecionado.`)\n        }\n        break\n\n      case 'ArrowUp': // Seta para cima\n        event.preventDefault()\n        if (currentIndex > 0) {\n          targetItem = listItems[currentIndex - 1]\n        } else {\n          console.log(`[br-item ${this.customId}] ArrowUp: Usuário já está no primeiro item da lista.`)\n        }\n        break\n\n      case 'Enter':\n      case ' ': // Barra de espaço\n        event.preventDefault()\n        this.handleClick(new MouseEvent('click'))\n        break\n\n      case 'Home':\n        event.preventDefault()\n        targetItem = listItems[0]\n        break\n\n      case 'End':\n        event.preventDefault()\n        targetItem = listItems[listItems.length - 1]\n        break\n\n      default:\n        return // Ignorar outras teclas\n    }\n\n    if (targetItem && targetItem !== this.el) {\n      // Verifica se o item alvo é diferente do atual\n      if ('setFocus' in targetItem) {\n        // Se o item alvo tiver o método setFocus, chama-o\n        ;(targetItem as { setFocus: () => void }).setFocus()\n      }\n      // Caso contrário, apenas defina o foco no elemento alvo\n      targetItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })\n    }\n  }\n\n  /**\n   * Define o foco no elemento interno do componente.\n   * Este método pode ser chamado externamente para garantir que o foco seja aplicado ao elemento correto.\n   */\n  @Method()\n  async setFocus() {\n    this.focusableElement?.focus()\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\n          class={classList}\n          {...attributes}\n          onClick={this.handleClick}\n          id={this.customId}\n          tabIndex={this.disabled ? -1 : this.isInteractive ? 0 : -1}\n          ref={(el) => (this.focusableElement = el as HTMLElement)}\n          onKeyDown={(event) => this.handleKeydown(event)}\n          onMouseDown={(e) => e.preventDefault()}\n        >\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"]}