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

package/dist/collection/components/select/select.js

@@ -0,0 +1,566 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { h } from "@stencil/core";
+export class Select {
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el;
+    elementInternals;
+    /**
+     * Rótulo que indica o tipo de informação que deve ser selecionada.
+     */
+    label;
+    /**
+     * Texto auxiliar exibido antes de uma seleção.
+     */
+    placeholder = '';
+    /**
+     * Habilita o modo múltiplo para selecionar várias opções.
+     */
+    isMultiple = false;
+    /**
+     * Define as opções disponíveis no componente de seleção.
+     * Pode ser fornecida como:
+     * - Uma **string** contendo um JSON válido que será analisado em um array de objetos. Exemplo: `'[{"label": "Opção 1", "value": "1"}]'.
+     * - Um **array de objetos**, onde cada objeto representa uma opção com as propriedades:
+     *   - `label`: O texto exibido para o usuário (obrigatório).
+     *   - `value`: O valor associado à opção (obrigatório).
+     *   - `selected`: Um boolean opcional que indica se a opção está pré-selecionada (padrão: `false`).
+     * Se uma string for fornecida, ela será convertida internamente para um array via `JSON.parse`. Caso o formato seja inválido, um erro será registrado e as opções serão definidas como um array vazio.
+     * Exemplo de uso:
+     * ```typescript
+     * options='[{"label": "Sim", "value": "1"}, {"label": "Não", "value": "0"}]'
+     * // ou
+     * options=[{ label: "Sim", value: "1" }, { label: "Não", value: "0" }]
+     * ```
+     */
+    options = [];
+    /**
+     * Rótulo para selecionar todas as opções.
+     */
+    selectAllLabel = 'Selecionar todos';
+    /**
+     * Rótulo para desmarcar todas as opções.
+     */
+    unselectAllLabel = 'Desselecionar todos';
+    /**
+     * Exibe o ícone de busca no campo de entrada.
+     */
+    showSearchIcon = false;
+    /**
+     * Indica se a listagem de itens do select está expandida
+     */
+    isOpen = false;
+    /**
+     * Identificador único.
+     * Caso não seja fornecido, um ID gerado automaticamente será usado.
+     */
+    customId = `br-select-${selectId++}`;
+    // Representa as opções do select disponíveis para renderização.
+    // Cada opção contém `label`, `value` e o estado de seleção (`selected`).
+    parsedOptions = [];
+    // Valor exibido no input, refletindo as opções selecionadas.
+    inputValue = '';
+    // Indica se todas as opções estão selecionadas. Comportamento do checkbox "Selecionar Todos".
+    isAllSelected = false;
+    // Controla se a lista de opções do select está expandida (aberta) ou colapsada (fechada).
+    isExpanded = false;
+    // Armazena o índice do item atualmente focado, usado para navegação por teclado.
+    focusedIndex = -1;
+    /**
+     * Evento emitido sempre que houver atualização nos itens selecionados.
+     */
+    brDidSelectChange;
+    synchronizeSelect() {
+        try {
+            let parsedOptions = [];
+            if (typeof this.options === 'string') {
+                try {
+                    const jsonData = JSON.parse(this.options);
+                    if (Array.isArray(jsonData)) {
+                        parsedOptions = jsonData;
+                    }
+                    else {
+                        throw new Error('JSON inválido: deve ser um array');
+                    }
+                }
+                catch (error) {
+                    console.error('Erro ao converter options para JSON:', error.message);
+                    parsedOptions = [];
+                }
+            }
+            else if (Array.isArray(this.options)) {
+                parsedOptions = this.options;
+            }
+            // Sanitiza as opções (remove opções inválidas, etc.)
+            this.parsedOptions = parsedOptions;
+            // Atualiza o estado do componente
+            this.updateSelectedOptions();
+            this.updateSelectedAllState();
+            this.emitSelectedOptions();
+        }
+        catch (error) {
+            console.error('Erro ao processar as opções do select:', error);
+            this.parsedOptions = [];
+        }
+    }
+    componentWillLoad() {
+        this.isExpanded = this.isOpen;
+        this.synchronizeSelect();
+    }
+    componentDidLoad() {
+        document.addEventListener('click', this.handleClickOutside);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside);
+    }
+    /**
+     * Fecha a lista suspensa (`dropdown`) do `br-select` quando o usuário clica fora do componente.
+     * O listener global é adicionado no `componentDidLoad` e removido no `disconnectedCallback` para evitar vazamentos de memória.
+     * Se a lista estiver aberta (`this.isExpanded`) e o clique ocorrer fora (`!this.el.contains(target)`), ela é fechada.
+     * A reatividade do StencilJS garante a atualização automática da interface.
+     * A arrow function (`=>`) mantém o contexto correto de `this` ao ser usada como callback.
+     *
+     * @param {MouseEvent} event O evento de clique.
+     * @returns {void}
+     */
+    handleClickOutside = (event) => {
+        const target = event.target;
+        if (this.isExpanded && !this.el.contains(target)) {
+            this.isExpanded = false;
+        }
+    };
+    handleKeydownOnInput(event) {
+        switch (event.key) {
+            case 'Tab':
+                this.closeSelect();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.isExpanded) {
+                    this.openSelect();
+                }
+                this.focusItemInDirection('next');
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!this.isExpanded) {
+                    this.openSelect();
+                }
+                this.focusItemInDirection('previous');
+                break;
+            case 'Escape':
+                this.closeSelect();
+                this.resetFocus();
+                break;
+            case 'Enter':
+                this.toggleOpen();
+                break;
+            default:
+        }
+    }
+    handleKeydownOnList(event) {
+        event.preventDefault();
+        switch (event.key) {
+            case 'Tab':
+            case 'Escape':
+                this.resetFocus();
+                break;
+            case 'ArrowUp':
+                this.focusItemInDirection('previous');
+                break;
+            case 'ArrowDown':
+                this.focusItemInDirection('next');
+                break;
+            default:
+                break;
+        }
+    }
+    handleKeydownOnItem(event, index) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleSelection(index);
+        }
+        else if (event.key === 'Escape') {
+            this.closeSelect();
+        }
+    }
+    handleSelectAllKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggleSelectAll();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeSelect();
+        }
+    }
+    resetFocus() {
+        const input = this.el.shadowRoot.querySelector('br-input');
+        input.focus();
+    }
+    focusItemInDirection(direction) {
+        let itemCount = this.parsedOptions.length;
+        if (this.isMultiple)
+            itemCount += 1;
+        this.focusedIndex =
+            direction === 'next' ? (this.focusedIndex + 1) % itemCount : (this.focusedIndex - 1 + itemCount) % itemCount;
+        this.focusItem(this.focusedIndex);
+    }
+    focusItem(index) {
+        const items = this.el.shadowRoot.querySelectorAll('.br-item');
+        if (items[index]) {
+            const item = items[index];
+            item.focus();
+        }
+    }
+    openSelect() {
+        this.isExpanded = true;
+    }
+    closeSelect() {
+        this.isExpanded = false;
+        // Resetar o índice focado ao fechar o select
+        this.focusedIndex = -1;
+    }
+    handleSelection(index) {
+        if (index < 0 || index >= this.parsedOptions.length) {
+            return;
+        }
+        if (this.isMultiple) {
+            const updatedOptions = [...this.parsedOptions];
+            updatedOptions[index].selected = !updatedOptions[index].selected;
+            this.parsedOptions = updatedOptions;
+        }
+        else {
+            const updatedOptions = this.parsedOptions.map((option) => ({ ...option, selected: false }));
+            updatedOptions[index].selected = true;
+            this.parsedOptions = updatedOptions;
+            this.isExpanded = false;
+        }
+        this.updateSelectedOptions();
+        this.emitSelectedOptions();
+        this.updateSelectedAllState();
+    }
+    updateSelectedOptions() {
+        this.inputValue = this.getStringValue(this.parsedOptions.filter((option) => option.selected));
+    }
+    getStringValue(options) {
+        if (options.length > 0) {
+            const firstSelected = options[0].label || options[0].value;
+            if (this.isMultiple) {
+                const howManySelected = options.length > 1 ? ` + (${options.length - 1})` : '';
+                return `${firstSelected}${howManySelected}`;
+            }
+            else {
+                return firstSelected;
+            }
+        }
+        return '';
+    }
+    emitSelectedOptions() {
+        const selectedOptions = this.parsedOptions
+            .filter((option) => option.selected === true)
+            .map((option) => option.label ?? option.value);
+        this.brDidSelectChange.emit(selectedOptions);
+        // Atualiza o valor do form associado
+        this.elementInternals.setFormValue(JSON.stringify(selectedOptions));
+    }
+    updateSelectedAllState() {
+        const allSelected = this.parsedOptions.every((option) => option.selected);
+        this.isAllSelected = allSelected;
+    }
+    toggleSelectAll() {
+        const updatedOptions = this.parsedOptions.map((option) => ({ ...option, selected: !this.isAllSelected }));
+        this.parsedOptions = updatedOptions;
+        this.isAllSelected = !this.isAllSelected;
+        this.updateSelectedOptions();
+        this.emitSelectedOptions();
+    }
+    renderInput() {
+        return (h("br-input", { value: this.inputValue, label: this.label, placeholder: this.placeholder, readonly: true, onClick: () => this.toggleOpen(), onKeyDown: (event) => this.handleKeydownOnInput(event) }, this.showSearchIcon && h("br-icon", { slot: "icon", "icon-name": "fa-solid:search", "aria-hidden": "true" }), h("br-icon", { slot: "action", "icon-name": this.isExpanded ? 'fa-solid:angle-up' : 'fa-solid:angle-down', height: "16", "aria-hidden": "true" })));
+    }
+    renderSelectAllCheckbox() {
+        return (h("div", { class: `br-item highlighted ${this.isAllSelected ? 'selected' : ''}`, "data-all": "data-all", tabindex: "-1", role: "option", "aria-selected": this.isAllSelected, onKeyDown: (event) => this.handleSelectAllKeyDown(event), onClick: () => this.toggleSelectAll() }, h("br-checkbox", { name: `checkbox-${this.customId}`, label: this.isAllSelected ? this.unselectAllLabel : this.selectAllLabel, checked: this.isAllSelected, onCheckedChange: () => this.toggleSelectAll() })));
+    }
+    renderOptions() {
+        return this.parsedOptions.map((option, index) => (h("div", { class: `br-item ${option.selected ? 'selected' : ''}`, key: `${option.label}-${this.customId}`, role: "option", tabindex: this.focusedIndex === index ? 0 : -1, "aria-selected": option.selected, onClick: () => this.handleSelection(index), onKeyDown: (event) => this.handleKeydownOnItem(event, index) }, this.isMultiple ? (h("br-checkbox", { name: `checkbox-${index}-${this.customId}`, label: option.label || option.value, checked: option.selected === true, onCheckedChange: () => this.handleSelection(index) })) : (h("br-radio", { exportparts: "radio-input, radio-label", name: `radio-${index}-${this.customId}`, label: option.label || option.value, checked: option.selected === true, onCheckedChange: () => this.handleSelection(index) })))));
+    }
+    /**
+     * Determina um id para o radio.
+     */
+    getComputedId() {
+        return this.customId?.length > 0 ? this.customId : `br-select-${this.customId}`;
+    }
+    /**
+     * Inverte o valor da prop `isOpen`
+     */
+    async toggleOpen() {
+        this.isExpanded = !this.isExpanded;
+    }
+    getCssClassMap() {
+        return {
+            'br-select': true,
+        };
+    }
+    render() {
+        return (h("div", { key: 'a50be325be0c86a7b5332c1ba5f6af7477f5f9ac', class: this.getCssClassMap(), id: this.getComputedId() }, this.renderInput(), this.isExpanded && (h("br-list", { key: '5c15039f0dd50809feb23ce294d8ddfd87436868', tabindex: -1, onKeyDown: (event) => this.handleKeydownOnList(event) }, this.isMultiple && this.renderSelectAllCheckbox(), this.renderOptions()))));
+    }
+    static get is() { return "br-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "R\u00F3tulo que indica o tipo de informa\u00E7\u00E3o que deve ser selecionada."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": true
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto auxiliar exibido antes de uma sele\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "isMultiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Habilita o modo m\u00FAltiplo para selecionar v\u00E1rias op\u00E7\u00F5es."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-multiple",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| string\n    | {\n        label: string\n        value: string\n        selected?: boolean\n      }[]",
+                    "resolved": "string | { label: string; value: string; selected?: boolean; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define as op\u00E7\u00F5es dispon\u00EDveis no componente de sele\u00E7\u00E3o.\nPode ser fornecida como:\n- Uma **string** contendo um JSON v\u00E1lido que ser\u00E1 analisado em um array de objetos. Exemplo: `'[{\"label\": \"Op\u00E7\u00E3o 1\", \"value\": \"1\"}]'.\n- Um **array de objetos**, onde cada objeto representa uma op\u00E7\u00E3o com as propriedades:\n  - `label`: O texto exibido para o usu\u00E1rio (obrigat\u00F3rio).\n  - `value`: O valor associado \u00E0 op\u00E7\u00E3o (obrigat\u00F3rio).\n  - `selected`: Um boolean opcional que indica se a op\u00E7\u00E3o est\u00E1 pr\u00E9-selecionada (padr\u00E3o: `false`).\nSe uma string for fornecida, ela ser\u00E1 convertida internamente para um array via `JSON.parse`. Caso o formato seja inv\u00E1lido, um erro ser\u00E1 registrado e as op\u00E7\u00F5es ser\u00E3o definidas como um array vazio.\nExemplo de uso:\n```typescript\noptions='[{\"label\": \"Sim\", \"value\": \"1\"}, {\"label\": \"N\u00E3o\", \"value\": \"0\"}]'\n// ou\noptions=[{ label: \"Sim\", value: \"1\" }, { label: \"N\u00E3o\", value: \"0\" }]\n```"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "options",
+                "reflect": true,
+                "defaultValue": "[]"
+            },
+            "selectAllLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "R\u00F3tulo para selecionar todas as op\u00E7\u00F5es."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "select-all-label",
+                "reflect": true,
+                "defaultValue": "'Selecionar todos'"
+            },
+            "unselectAllLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "R\u00F3tulo para desmarcar todas as op\u00E7\u00F5es."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "unselect-all-label",
+                "reflect": true,
+                "defaultValue": "'Desselecionar todos'"
+            },
+            "showSearchIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe o \u00EDcone de busca no campo de entrada."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-search-icon",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica se a listagem de itens do select est\u00E1 expandida"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-open",
+                "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-select-${selectId++}`"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedOptions": {},
+            "inputValue": {},
+            "isAllSelected": {},
+            "isExpanded": {},
+            "focusedIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brDidSelectChange",
+                "name": "brDidSelectChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emitido sempre que houver atualiza\u00E7\u00E3o nos itens selecionados."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleOpen": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Inverte o valor da prop `isOpen`",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "synchronizeSelect"
+            }];
+    }
+    static get attachInternalsMemberName() { return "elementInternals"; }
+}
+let selectId = 0;
+//# sourceMappingURL=select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../../../packages/webcomponents/src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n\n@Component({\n  tag: 'br-select',\n  styleUrl: 'select.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Select {\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: HTMLBrSelectElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Rótulo que indica o tipo de informação que deve ser selecionada.\n   */\n  @Prop({ reflect: true }) label: string\n\n  /**\n   * Texto auxiliar exibido antes de uma seleção.\n   */\n  @Prop({ reflect: true }) placeholder: string = ''\n\n  /**\n   * Habilita o modo múltiplo para selecionar várias opções.\n   */\n  @Prop({ reflect: true }) isMultiple: boolean = false\n\n  /**\n   * Define as opções disponíveis no componente de seleção.\n   * Pode ser fornecida como:\n   * - Uma **string** contendo um JSON válido que será analisado em um array de objetos. Exemplo: `'[{\"label\": \"Opção 1\", \"value\": \"1\"}]'.\n   * - Um **array de objetos**, onde cada objeto representa uma opção com as propriedades:\n   *   - `label`: O texto exibido para o usuário (obrigatório).\n   *   - `value`: O valor associado à opção (obrigatório).\n   *   - `selected`: Um boolean opcional que indica se a opção está pré-selecionada (padrão: `false`).\n   * Se uma string for fornecida, ela será convertida internamente para um array via `JSON.parse`. Caso o formato seja inválido, um erro será registrado e as opções serão definidas como um array vazio.\n   * Exemplo de uso:\n   * ```typescript\n   * options='[{\"label\": \"Sim\", \"value\": \"1\"}, {\"label\": \"Não\", \"value\": \"0\"}]'\n   * // ou\n   * options=[{ label: \"Sim\", value: \"1\" }, { label: \"Não\", value: \"0\" }]\n   * ```\n   */\n  @Prop({ reflect: true }) options:\n    | string\n    | {\n        label: string\n        value: string\n        selected?: boolean\n      }[] = []\n\n  /**\n   * Rótulo para selecionar todas as opções.\n   */\n  @Prop({ reflect: true }) selectAllLabel: string = 'Selecionar todos'\n\n  /**\n   * Rótulo para desmarcar todas as opções.\n   */\n  @Prop({ reflect: true }) unselectAllLabel: string = 'Desselecionar todos'\n\n  /**\n   * Exibe o ícone de busca no campo de entrada.\n   */\n  @Prop({ reflect: true }) showSearchIcon: boolean = false\n\n  /**\n   * Indica se a listagem de itens do select está expandida\n   */\n  @Prop({ reflect: true }) isOpen: 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-select-${selectId++}`\n\n  // Representa as opções do select disponíveis para renderização.\n  // Cada opção contém `label`, `value` e o estado de seleção (`selected`).\n  @State() parsedOptions: { label: string; value: string; selected?: boolean }[] = []\n\n  // Valor exibido no input, refletindo as opções selecionadas.\n  @State() inputValue: string = ''\n\n  // Indica se todas as opções estão selecionadas. Comportamento do checkbox \"Selecionar Todos\".\n  @State() isAllSelected: boolean = false\n\n  // Controla se a lista de opções do select está expandida (aberta) ou colapsada (fechada).\n  @State() isExpanded: boolean = false\n\n  // Armazena o índice do item atualmente focado, usado para navegação por teclado.\n  @State() focusedIndex: number = -1\n\n  /**\n   * Evento emitido sempre que houver atualização nos itens selecionados.\n   */\n  @Event() brDidSelectChange: EventEmitter\n\n  @Watch('options')\n  synchronizeSelect() {\n    try {\n      let parsedOptions: { label: string; value: string; selected?: boolean }[] = []\n      if (typeof this.options === 'string') {\n        try {\n          const jsonData = JSON.parse(this.options)\n          if (Array.isArray(jsonData)) {\n            parsedOptions = jsonData\n          } else {\n            throw new Error('JSON inválido: deve ser um array')\n          }\n        } catch (error) {\n          console.error('Erro ao converter options para JSON:', error.message)\n          parsedOptions = []\n        }\n      } else if (Array.isArray(this.options)) {\n        parsedOptions = this.options\n      }\n\n      // Sanitiza as opções (remove opções inválidas, etc.)\n      this.parsedOptions = parsedOptions\n\n      // Atualiza o estado do componente\n      this.updateSelectedOptions()\n      this.updateSelectedAllState()\n      this.emitSelectedOptions()\n    } catch (error) {\n      console.error('Erro ao processar as opções do select:', error)\n      this.parsedOptions = []\n    }\n  }\n\n  componentWillLoad() {\n    this.isExpanded = this.isOpen\n    this.synchronizeSelect()\n  }\n\n  componentDidLoad() {\n    document.addEventListener('click', this.handleClickOutside)\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleClickOutside)\n  }\n\n  /**\n   * Fecha a lista suspensa (`dropdown`) do `br-select` quando o usuário clica fora do componente.\n   * O listener global é adicionado no `componentDidLoad` e removido no `disconnectedCallback` para evitar vazamentos de memória.\n   * Se a lista estiver aberta (`this.isExpanded`) e o clique ocorrer fora (`!this.el.contains(target)`), ela é fechada.\n   * A reatividade do StencilJS garante a atualização automática da interface.\n   * A arrow function (`=>`) mantém o contexto correto de `this` ao ser usada como callback.\n   *\n   * @param {MouseEvent} event O evento de clique.\n   * @returns {void}\n   */\n  private readonly handleClickOutside = (event: MouseEvent) => {\n    const target = event.target as HTMLElement\n    if (this.isExpanded && !this.el.contains(target)) {\n      this.isExpanded = false\n    }\n  }\n\n  private handleKeydownOnInput(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Tab':\n        this.closeSelect()\n        break\n      case 'ArrowDown':\n        event.preventDefault()\n        if (!this.isExpanded) {\n          this.openSelect()\n        }\n        this.focusItemInDirection('next')\n        break\n      case 'ArrowUp':\n        event.preventDefault()\n        if (!this.isExpanded) {\n          this.openSelect()\n        }\n        this.focusItemInDirection('previous')\n        break\n      case 'Escape':\n        this.closeSelect()\n        this.resetFocus()\n        break\n      case 'Enter':\n        this.toggleOpen()\n        break\n      default:\n    }\n  }\n\n  private handleKeydownOnList(event: KeyboardEvent) {\n    event.preventDefault()\n    switch (event.key) {\n      case 'Tab':\n      case 'Escape':\n        this.resetFocus()\n        break\n      case 'ArrowUp':\n        this.focusItemInDirection('previous')\n        break\n      case 'ArrowDown':\n        this.focusItemInDirection('next')\n        break\n      default:\n        break\n    }\n  }\n\n  private handleKeydownOnItem(event: KeyboardEvent, index: number) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      this.handleSelection(index)\n    } else if (event.key === 'Escape') {\n      this.closeSelect()\n    }\n  }\n\n  private handleSelectAllKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      this.toggleSelectAll()\n    } else if (event.key === 'Escape') {\n      event.preventDefault()\n      this.closeSelect()\n    }\n  }\n\n  private resetFocus() {\n    const input = this.el.shadowRoot.querySelector('br-input') as HTMLElement\n    input.focus()\n  }\n\n  private focusItemInDirection(direction: 'next' | 'previous') {\n    let itemCount = this.parsedOptions.length\n    if (this.isMultiple) itemCount += 1\n\n    this.focusedIndex =\n      direction === 'next' ? (this.focusedIndex + 1) % itemCount : (this.focusedIndex - 1 + itemCount) % itemCount\n\n    this.focusItem(this.focusedIndex)\n  }\n\n  private focusItem(index: number) {\n    const items = this.el.shadowRoot.querySelectorAll('.br-item')\n    if (items[index]) {\n      const item = items[index] as HTMLElement\n      item.focus()\n    }\n  }\n\n  private openSelect() {\n    this.isExpanded = true\n  }\n\n  private closeSelect() {\n    this.isExpanded = false\n    // Resetar o índice focado ao fechar o select\n    this.focusedIndex = -1\n  }\n\n  private handleSelection(index: number) {\n    if (index < 0 || index >= this.parsedOptions.length) {\n      return\n    }\n\n    if (this.isMultiple) {\n      const updatedOptions = [...this.parsedOptions]\n      updatedOptions[index].selected = !updatedOptions[index].selected\n      this.parsedOptions = updatedOptions\n    } else {\n      const updatedOptions = this.parsedOptions.map((option) => ({ ...option, selected: false }))\n      updatedOptions[index].selected = true\n      this.parsedOptions = updatedOptions\n      this.isExpanded = false\n    }\n    this.updateSelectedOptions()\n    this.emitSelectedOptions()\n    this.updateSelectedAllState()\n  }\n\n  private updateSelectedOptions() {\n    this.inputValue = this.getStringValue(this.parsedOptions.filter((option) => option.selected))\n  }\n\n  private getStringValue(options: { label: string; value: string; selected?: boolean }[]) {\n    if (options.length > 0) {\n      const firstSelected = options[0].label || options[0].value\n      if (this.isMultiple) {\n        const howManySelected = options.length > 1 ? ` + (${options.length - 1})` : ''\n        return `${firstSelected}${howManySelected}`\n      } else {\n        return firstSelected\n      }\n    }\n    return ''\n  }\n\n  private emitSelectedOptions() {\n    const selectedOptions = this.parsedOptions\n      .filter((option) => option.selected === true)\n      .map((option) => option.label ?? option.value)\n\n    this.brDidSelectChange.emit(selectedOptions)\n\n    // Atualiza o valor do form associado\n    this.elementInternals.setFormValue(JSON.stringify(selectedOptions))\n  }\n\n  private updateSelectedAllState() {\n    const allSelected = this.parsedOptions.every((option) => option.selected)\n    this.isAllSelected = allSelected\n  }\n\n  private toggleSelectAll() {\n    const updatedOptions = this.parsedOptions.map((option) => ({ ...option, selected: !this.isAllSelected }))\n    this.parsedOptions = updatedOptions\n    this.isAllSelected = !this.isAllSelected\n\n    this.updateSelectedOptions()\n    this.emitSelectedOptions()\n  }\n\n  private renderInput() {\n    return (\n      <br-input\n        value={this.inputValue}\n        label={this.label}\n        placeholder={this.placeholder}\n        readonly\n        onClick={() => this.toggleOpen()}\n        onKeyDown={(event) => this.handleKeydownOnInput(event)}\n      >\n        {this.showSearchIcon && <br-icon slot=\"icon\" icon-name=\"fa-solid:search\" aria-hidden=\"true\"></br-icon>}\n        <br-icon\n          slot=\"action\"\n          icon-name={this.isExpanded ? 'fa-solid:angle-up' : 'fa-solid:angle-down'}\n          height=\"16\"\n          aria-hidden=\"true\"\n        ></br-icon>\n      </br-input>\n    )\n  }\n\n  private renderSelectAllCheckbox() {\n    return (\n      <div\n        class={`br-item highlighted ${this.isAllSelected ? 'selected' : ''}`}\n        data-all=\"data-all\"\n        tabindex=\"-1\"\n        role=\"option\"\n        aria-selected={this.isAllSelected}\n        onKeyDown={(event) => this.handleSelectAllKeyDown(event)}\n        onClick={() => this.toggleSelectAll()}\n      >\n        <br-checkbox\n          name={`checkbox-${this.customId}`}\n          label={this.isAllSelected ? this.unselectAllLabel : this.selectAllLabel}\n          checked={this.isAllSelected}\n          onCheckedChange={() => this.toggleSelectAll()}\n        ></br-checkbox>\n      </div>\n    )\n  }\n\n  private renderOptions() {\n    return this.parsedOptions.map((option, index) => (\n      <div\n        class={`br-item ${option.selected ? 'selected' : ''}`}\n        key={`${option.label}-${this.customId}`}\n        role=\"option\"\n        tabindex={this.focusedIndex === index ? 0 : -1}\n        aria-selected={option.selected}\n        onClick={() => this.handleSelection(index)}\n        onKeyDown={(event) => this.handleKeydownOnItem(event, index)}\n      >\n        {this.isMultiple ? (\n          <br-checkbox\n            name={`checkbox-${index}-${this.customId}`}\n            label={option.label || option.value}\n            checked={option.selected === true}\n            onCheckedChange={() => this.handleSelection(index)}\n          />\n        ) : (\n          <br-radio\n            exportparts=\"radio-input, radio-label\"\n            name={`radio-${index}-${this.customId}`}\n            label={option.label || option.value}\n            checked={option.selected === true}\n            onCheckedChange={() => this.handleSelection(index)}\n          />\n        )}\n      </div>\n    ))\n  }\n\n  /**\n   * Determina um id para o radio.\n   */\n  private getComputedId() {\n    return this.customId?.length > 0 ? this.customId : `br-select-${this.customId}`\n  }\n\n  /**\n   * Inverte o valor da prop `isOpen`\n   */\n  @Method()\n  async toggleOpen() {\n    this.isExpanded = !this.isExpanded\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-select': true,\n    }\n  }\n\n  render() {\n    return (\n      <div class={this.getCssClassMap()} id={this.getComputedId()}>\n        {this.renderInput()}\n\n        {this.isExpanded && (\n          <br-list tabindex={-1} onKeyDown={(event) => this.handleKeydownOnList(event)}>\n            {this.isMultiple && this.renderSelectAllCheckbox()}\n            {this.renderOptions()}\n          </br-list>\n        )}\n      </div>\n    )\n  }\n}\n\nlet selectId = 0\n"]}