@govbr-ds/webcomponents 2.0.0-next.24 → 2.0.0-next.25

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

@@ -0,0 +1,506 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ */
+import { h } from "@stencil/core";
+export class Select {
+    constructor() {
+        this.label = undefined;
+        this.placeholder = '';
+        this.isMultiple = false;
+        this.options = '[]';
+        this.selectAllLabel = 'Selecionar todos';
+        this.unselectAllLabel = 'Desselecionar todos';
+        this.showSearchIcon = false;
+        this.isOpen = false;
+        this.customId = `br-select-${selectId++}`;
+        this.parsedOptions = [];
+        this.inputValue = '';
+        this.isAllSelected = false;
+        this.isExpanded = false;
+        this.focusedIndex = -1;
+    }
+    /**
+     * Referência ao elemento host do componente.
+     * Utilize esta propriedade para acessar e manipular o elemento do DOM associado ao componente.
+     */
+    el;
+    elementInternals;
+    /**
+     * Evento emitido sempre que houver atualização nos itens selecionados.
+     */
+    brDidSelectChange;
+    synchronizeSelect() {
+        try {
+            const rawOptions = JSON.parse(this.options);
+            this.parsedOptions = this.sanitizeOptions(rawOptions);
+            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.addEventListener('click', this.handleClickOutside);
+    }
+    sanitizeOptions(rawOptions) {
+        const validOptions = [];
+        const invalidOptions = [];
+        rawOptions.forEach((option) => {
+            if (typeof option.label === 'string' && option.label.trim() !== '') {
+                validOptions.push({
+                    label: option.label.trim(),
+                    value: typeof option.value === 'string' ? option.value : '',
+                    selected: typeof option.selected === 'boolean' ? option.selected : false,
+                });
+            }
+            else {
+                invalidOptions.push(option);
+            }
+        });
+        if (invalidOptions.length > 0) {
+            console.warn('Opções inválidas descartadas:', invalidOptions);
+        }
+        return validOptions;
+    }
+    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); // Garante que o índice correto será usado
+        }
+        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');
+        const item = items[index];
+        item.focus();
+    }
+    openSelect() {
+        this.isExpanded = true;
+    }
+    closeSelect() {
+        this.isExpanded = false;
+    }
+    handleSelection(index) {
+        if (index < 0 || index >= this.parsedOptions.length) {
+            return;
+        }
+        if (this.isMultiple) {
+            this.parsedOptions[index].selected = !this.parsedOptions[index].selected;
+        }
+        else {
+            this.parsedOptions.forEach((option) => (option.selected = false));
+            this.parsedOptions[index].selected = true;
+            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);
+    }
+    updateSelectedAllState() {
+        const allSelected = this.parsedOptions.every((option) => option.selected);
+        this.isAllSelected = allSelected;
+    }
+    toggleSelectAll() {
+        if (this.isAllSelected) {
+            this.parsedOptions.forEach((option) => (option.selected = false));
+            this.isAllSelected = false;
+        }
+        else {
+            this.parsedOptions.forEach((option) => (option.selected = true));
+            this.isAllSelected = true;
+        }
+        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) }, 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: '975fa29a063aa37444477336b30e2241476108d1', class: this.getCssClassMap(), id: this.getComputedId() }, this.renderInput(), this.isExpanded && (h("br-list", { key: 'a24515b54e2f2869aa524c0e60cad00a84e03368', 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",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON contendo as op\u00E7\u00F5es do select."
+                },
+                "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":["../../../../../../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'\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   * JSON contendo as opções do select.\n   */\n  @Prop({ reflect: true }) options: string = '[]'\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      const rawOptions = JSON.parse(this.options)\n      this.parsedOptions = this.sanitizeOptions(rawOptions)\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.addEventListener('click', this.handleClickOutside)\n  }\n\n  private sanitizeOptions(\n    rawOptions: { label: string; value: string; selected: boolean }[]\n  ): { label: string; value: string; selected: boolean }[] {\n    const validOptions = []\n    const invalidOptions = []\n\n    rawOptions.forEach((option) => {\n      if (typeof option.label === 'string' && option.label.trim() !== '') {\n        validOptions.push({\n          label: option.label.trim(),\n          value: typeof option.value === 'string' ? option.value : '',\n          selected: typeof option.selected === 'boolean' ? option.selected : false,\n        })\n      } else {\n        invalidOptions.push(option)\n      }\n    })\n\n    if (invalidOptions.length > 0) {\n      console.warn('Opções inválidas descartadas:', invalidOptions)\n    }\n\n    return validOptions\n  }\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) // Garante que o índice correto será usado\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    const item = items[index] as HTMLElement\n    item.focus()\n  }\n\n  private openSelect() {\n    this.isExpanded = true\n  }\n\n  private closeSelect() {\n    this.isExpanded = false\n  }\n\n  private handleSelection(index: number) {\n    if (index < 0 || index >= this.parsedOptions.length) {\n      return\n    }\n\n    if (this.isMultiple) {\n      this.parsedOptions[index].selected = !this.parsedOptions[index].selected\n    } else {\n      this.parsedOptions.forEach((option) => (option.selected = false))\n      this.parsedOptions[index].selected = true\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) {\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\n  private updateSelectedAllState() {\n    const allSelected = this.parsedOptions.every((option) => option.selected)\n    this.isAllSelected = allSelected\n  }\n\n  private toggleSelectAll() {\n    if (this.isAllSelected) {\n      this.parsedOptions.forEach((option) => (option.selected = false))\n      this.isAllSelected = false\n    } else {\n      this.parsedOptions.forEach((option) => (option.selected = true))\n      this.isAllSelected = true\n    }\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      >\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"]}