@govbr-ds/webcomponents 2.0.0-next.20 → 2.0.0-next.22

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

@@ -0,0 +1,509 @@
+/*!
+ * Construído com @govbr-ds/webcomponents
+ * Padrão Digital de Governo.
+ */
+import { h } from "@stencil/core";
+import { v4 as uuidv4 } from "uuid";
+import { inheritAriaAttributes } from "../../utils/inherited-attributes";
+export class Select {
+    constructor() {
+        /**
+         * Contém o id gerado aleatoriamente
+         */
+        this.idDefault = `${uuidv4()}`;
+        this.handleClickOutside = (event) => {
+            const target = event.target;
+            if (this.isExpanded && !this.el.contains(target)) {
+                this.isExpanded = false;
+            }
+        };
+        this.inheritedAttributes = {};
+        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 = undefined;
+        this.parsedOptions = [];
+        this.inputValue = '';
+        this.isAllSelected = false;
+        this.isExpanded = false;
+        this.focusedIndex = -1;
+    }
+    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.inheritedAttributes = inheritAriaAttributes(this.el);
+        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;
+    }
+    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) => { var _a; return (_a = option.label) !== null && _a !== void 0 ? _a : 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.idDefault}`, label: this.isAllSelected ? this.unselectAllLabel : this.selectAllLabel, checked: this.isAllSelected, onBrDidCheckedChange: () => this.toggleSelectAll() })));
+    }
+    renderOptions() {
+        return (this.parsedOptions.map((option, index) => (h("div", { class: `br-item ${option.selected ? 'selected' : ''}`, key: `${option.label}-${this.idDefault}`, 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.idDefault}`, label: option.label || option.value, checked: option.selected === true, onBrDidCheckedChange: () => this.handleSelection(index) }))
+            :
+                (h("br-radio", { exportparts: "radio-input, radio-label", name: `radio-${index}-${this.idDefault}`, label: option.label || option.value, checked: option.selected === true, onBrDidChange: () => this.handleSelection(index) }))))));
+    }
+    /**
+   * Determina um id para o radio.
+   */
+    getComputedId() {
+        var _a;
+        return ((_a = this.customId) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.customId : `br-select-${this.idDefault}`;
+    }
+    /**
+     * Inverte o valor da prop `isOpen`
+     */
+    async toggleOpen() {
+        this.isExpanded = !this.isExpanded;
+    }
+    getCssClassMap() {
+        return {
+            'br-select': true,
+        };
+    }
+    render() {
+        return (h("div", Object.assign({ key: 'aa32a5bf8e476ba29de8cf6fb6d6f440902ffade', class: this.getCssClassMap() }, this.inheritedAttributes, { id: this.getComputedId() }), this.renderInput(), this.isExpanded &&
+            h("br-list", { key: 'b430614ce4b013b2f10416bd987cda6569b5458a', 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": "Especifica o ID do componente.\nSe n\u00E3o for fornecido, o ID ser\u00E1 gerado automaticamente e de forma aleat\u00F3ria"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "id",
+                "reflect": true
+            }
+        };
+    }
+    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"; }
+}
+//# 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 { v4 as uuidv4 } from 'uuid';\nimport { Attributes, inheritAriaAttributes } from '../../utils/inherited-attributes'\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   * Especifica o ID do componente.\n   * Se não for fornecido, o ID será gerado automaticamente e de forma aleatória\n   */\n   @Prop({ reflect: true, attribute: 'id' }) customId: string\n\n  /**\n   * Contém o id gerado aleatoriamente\n   */\n   private readonly idDefault = `${uuidv4()}`\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.inheritedAttributes = inheritAriaAttributes(this.el)\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(rawOptions: any[]): { 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 = direction === 'next'\n      ? (this.focusedIndex + 1) % itemCount\n      : (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\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 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 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.idDefault}`}\n          label={this.isAllSelected ? this.unselectAllLabel : this.selectAllLabel}\n          checked={this.isAllSelected}\n          onBrDidCheckedChange={() => this.toggleSelectAll()}\n        ></br-checkbox>\n      </div>\n    );\n  }\n\n  private renderOptions() {\n    return (\n      this.parsedOptions.map((option, index) => (\n        <div\n          class={`br-item ${option.selected ? 'selected' : ''}`}\n          key={`${option.label}-${this.idDefault}`}\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            (\n              <br-checkbox\n                name={`checkbox-${index}-${this.idDefault}`}\n                label={option.label || option.value}\n                checked={option.selected === true}\n                onBrDidCheckedChange={() => this.handleSelection(index)}\n              />\n            )\n            :\n            (<br-radio\n              exportparts=\"radio-input, radio-label\"\n              name={`radio-${index}-${this.idDefault}`}\n              label={option.label || option.value}\n              checked={option.selected === true}\n              onBrDidChange={() => this.handleSelection(index)}\n            />)\n          }\n        </div>\n      ))\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.idDefault}`;\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  private inheritedAttributes: Attributes = {}\n\n  render() {\n    return (\n      <div class={this.getCssClassMap()} {...this.inheritedAttributes} 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\n"]}

package/dist/collection/components/switch/switch.css

@@ -34,6 +34,7 @@ img {
 
 button,
 input,
+select,
 textarea {
   font-family: inherit;
   font-size: 100%;
@@ -46,7 +47,8 @@ input {
   overflow: visible;
 }
 
-button {
+button,
+select {
   text-transform: none;
 }
 
@@ -211,6 +213,10 @@ textarea {
   margin-right: var(--spacing-scale-half) !important;
 }
 
+.mb-1 {
+  margin-bottom: var(--spacing-scale-half) !important;
+}
+
 .mr-2 {
   margin-right: var(--spacing-scale-base) !important;
 }
@@ -219,6 +225,10 @@ textarea {
   margin-right: calc(var(--spacing-scale-base) * -1) !important;
 }
 
+.ml-2 {
+  margin-left: var(--spacing-scale-base) !important;
+}
+
 .mb-3 {
   margin-bottom: var(--spacing-scale-2x) !important;
 }