@govbr-ds/webcomponents 2.0.0-next.56 → 2.0.0-next.57

package/dist/components/p-B8JLH_ik.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["selectCss","Select","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","placeholder","isMultiple","options","selectAllLabel","unselectAllLabel","showSearchIcon","isOpen","isInline","borderless","customId","selectId","parsedOptions","filteredOptions","inputValue","searchTerm","isAllSelected","isExpanded","focusedIndex","handleClickOutside","event","path","composedPath","clickedInside","includes","el","target","Node","contains","synchronizeSelect","jsonData","JSON","parse","Array","isArray","Error","error","console","message","getFilteredOptions","updateSelectedOptions","updateSelectedAllState","emitSelectedOptions","syncValueFromOutside","newVal","map","o","Object","assign","selected","value","selectedValue","componentWillLoad","componentDidLoad","document","addEventListener","disconnectedCallback","removeEventListener","handleKeydownOnInput","key","closeSelect","preventDefault","openSelect","focusItemInDirection","resetFocus","toggleOpen","handleKeydownOnList","handleKeydownOnItem","index","handleSelection","handleSelectAllKeyDown","toggleSelectAll","input","shadowRoot","querySelector","focus","direction","itemCount","length","focusItem","items","querySelectorAll","item","selectedOption","originalIndex","findIndex","updatedOptions","option","filter","_a","find","valueChange","emit","elementInternals","setFormValue","stringify","_b","_c","getStringValue","normalizeText","text","normalize","replace","toLowerCase","term","normalizedTerm","normalizedLabel","label","normalizedValue","firstSelected","howManySelected","selectedValues","allSelected","every","renderInput","h","exportparts","controlWidth","inputWidth","actionLabel","readonly","onClick","onInput","handleSearchInput","onFocus","handleSearchFocus","onBlur","handleSearchBlur","onKeyDown","slot","height","renderSelectAllCheckbox","class","tabindex","role","name","checked","onCheckedChange","renderOptions","getComputedId","clear","newValue","undefined","getValue","setValue","getCssClassMap","render","id"],"sources":["../../packages/webcomponents/src/components/select/select.scss?tag=br-select&encapsulation=shadow","../../packages/webcomponents/src/components/select/select.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/select/select\";\n@import \"~@govbr-ds/core/src/components/item/item\";\n\n:host {\n  display: inline-block;\n\n  .br-select br-list {\n    background-color: var(--bg-color);\n    box-shadow: var(--select-shadow);\n    margin-top: -2px;\n    max-height: 404px;\n    overflow: auto;\n    position: absolute;\n    resize: none;\n    width: 100%;\n    z-index: 1;\n\n    @include scrollbar;\n\n    &:focus,\n    &:active {\n      color: var(--color-secondary-09);\n      outline: none;\n    }\n\n    &:hover {\n      &::-webkit-scrollbar-thumb {\n        background: var(--color-secondary-07);\n      }\n    }\n\n    .br-item br-radio::part(radio-input) {\n      visibility: hidden;\n      height: 0;\n      width: 0;\n    }\n\n    .br-item br-radio::part(radio-label) {\n      padding-left: var(--spacing-scale-base);\n      position: relative;\n\n      &::before,\n      &::after {\n        display: none;\n      }\n    }\n  }\n}\n","import { AttachInternals, Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * Componente de seleção de opções com suporte a múltipla seleção, busca e acessibilidade.\n *\n * @example\n * ```html\n * <br-select label=\"Estado\" placeholder=\"Selecione\" options='[{\"label\":\"SP\",\"value\":\"sp\"},{\"label\":\"RJ\",\"value\":\"rj\"}]'></br-select>\n * ```\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   * Exibe o rótulo e o controle em linha (ao lado), ao invés de empilhados.\n   * Útil para casos contextuais como paginação.\n   */\n  @Prop({ reflect: true }) isInline: boolean = false\n\n  /**\n   * Largura do campo de entrada interno (por exemplo, '88px').\n   * Quando definido, sobrescreve a largura padrão de 100% do input.\n   */\n  @Prop({ reflect: true }) inputWidth?: string\n\n  /**\n   * Propaga para o input interno a remoção da borda quando desfocado.\n   */\n  @Prop({ reflect: true }) borderless: 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  // Opções filtradas de acordo com o termo de busca digitado.\n  @State() filteredOptions: { label: string; value: string; selected?: boolean }[] = []\n\n  // Valor exibido no input, refletindo as opções selecionadas.\n  @State() inputValue: string = ''\n\n  // Termo digitado no input (modo busca).\n  @State() searchTerm: string = ''\n\n  /** Valor selecionado (string para single, string[] para multiple) */\n  @Prop({ reflect: false, mutable: true }) value?: string | string[]\n\n  @State() selectedValue?: string | 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   * RENOMEADO PARA valueChange para compatibilidade com ngModel.\n   */\n  @Event({ bubbles: true, composed: true }) valueChange: 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 lista filtrada considerando o termo atual\n      this.filteredOptions = this.getFilteredOptions(this.searchTerm)\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  @Watch('value')\n  syncValueFromOutside(newVal: string | string[]) {\n    // Atualize parsedOptions a partir de newVal\n    this.parsedOptions = this.parsedOptions.map((o) => ({\n      ...o,\n      selected: this.isMultiple ? Array.isArray(newVal) && newVal.includes(o.value) : newVal === o.value,\n    }))\n    this.selectedValue = newVal\n    this.updateSelectedOptions() // mantém inputValue coeso\n    this.updateSelectedAllState()\n    this.filteredOptions = this.getFilteredOptions(this.searchTerm)\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    // Usa composedPath para considerar nós dentro de Shadow DOM como \"dentro\" do componente\n    const path = (event.composedPath && event.composedPath()) || []\n    const clickedInside = path.includes(this.el) || (event.target instanceof Node && this.el.contains(event.target))\n\n    if (this.isExpanded && !clickedInside) {\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 HTMLBrInputElement | null\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.filteredOptions.length) {\n      return\n    }\n\n    // Localiza opção original a partir da lista filtrada\n    const selectedOption = this.filteredOptions[index]\n    const originalIndex = this.parsedOptions.findIndex((o) => o.value === selectedOption.value)\n    if (originalIndex === -1) {\n      return\n    }\n\n    if (this.isMultiple) {\n      const updatedOptions = [...this.parsedOptions]\n      updatedOptions[originalIndex].selected = !updatedOptions[originalIndex].selected\n      this.parsedOptions = updatedOptions\n    } else {\n      const updatedOptions = this.parsedOptions.map((option) => ({ ...option, selected: false }))\n      updatedOptions[originalIndex].selected = true\n      this.parsedOptions = updatedOptions\n      this.isExpanded = false\n    }\n\n    // Atualiza a prop 'value' interna do componente\n    this.selectedValue = this.isMultiple\n      ? this.parsedOptions.filter((o) => o.selected).map((o) => o.value)\n      : this.parsedOptions.find((o) => o.selected)?.value\n\n    this.value = this.selectedValue\n\n    // Emite o evento 'valueChange' para que o ngModel possa capturar\n    this.valueChange.emit(this.selectedValue)\n\n    this.updateSelectedOptions()\n    this.updateSelectedAllState()\n    this.filteredOptions = this.getFilteredOptions(this.searchTerm)\n    try {\n      this.elementInternals.setFormValue(JSON.stringify(this.selectedValue ?? []))\n    } catch {\n      // Ignora erro em testes onde setFormValue não é implementado\n    }\n  }\n\n  private updateSelectedOptions() {\n    this.inputValue = this.getStringValue(this.parsedOptions.filter((option) => option.selected))\n  }\n\n  private normalizeText(text: string): string {\n    return (text || '')\n      .normalize('NFD')\n      .replace(/[\\u0300-\\u036f]/g, '')\n      .toLowerCase()\n  }\n\n  private getFilteredOptions(term: string) {\n    if (!term) {\n      return this.parsedOptions\n    }\n\n    const normalizedTerm = this.normalizeText(term)\n    return this.parsedOptions.filter((option) => {\n      const normalizedLabel = this.normalizeText(option.label || option.value)\n      const normalizedValue = this.normalizeText(option.value)\n      return normalizedLabel.includes(normalizedTerm) || normalizedValue.includes(normalizedTerm)\n    })\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    // A lógica de emissão do evento já está no handleSelection para o ngModel.\n    // Esta função pode ser simplificada ou removida se a única finalidade era emitir para ngModel.\n    // No entanto, se houver outros consumidores deste evento, você pode mantê-la.\n    const selectedValues = this.parsedOptions.filter((option) => option.selected === true).map((option) => option.value) // É importante emitir o 'value' para o ngModel.\n\n    // Já emitimos em handleSelection, mas se quiser ter certeza, pode emitir aqui também.\n    // this.valueChange.emit(this.isMultiple ? selectedValues : selectedValues[0] ?? undefined);\n\n    // Atualiza o valor do form associado\n    try {\n      this.elementInternals.setFormValue(JSON.stringify(this.isMultiple ? selectedValues : (selectedValues[0] ?? null)))\n    } catch {\n      // Ignora erro em testes onde setFormValue não é implementado\n    }\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\n    // Atualiza a prop 'value' e emite o evento para ngModel\n    this.selectedValue = this.isMultiple\n      ? this.parsedOptions.filter((o) => o.selected).map((o) => o.value)\n      : this.parsedOptions.find((o) => o.selected)?.value\n    this.value = this.selectedValue\n    this.valueChange.emit(this.selectedValue)\n\n    try {\n      this.elementInternals.setFormValue(JSON.stringify(this.selectedValue ?? []))\n    } catch {\n      // Ignora erro em testes onde setFormValue não é implementado\n    }\n  }\n\n  private renderInput() {\n    return (\n      <br-input\n        exportparts=\"label\"\n        value={this.searchTerm || this.inputValue}\n        label={this.label}\n        isInline={this.isInline}\n        controlWidth={this.inputWidth}\n        borderless={this.borderless}\n        placeholder={this.placeholder}\n        actionLabel={this.isExpanded ? 'Recolher lista de opções' : 'Exibir lista de opções'}\n        readonly={false}\n        onClick={() => this.toggleOpen()}\n        onInput={(event) => this.handleSearchInput(event)}\n        onFocus={() => this.handleSearchFocus()}\n        onBlur={() => this.handleSearchBlur()}\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    if (this.filteredOptions.length === 0) {\n      return (\n        <div class=\"br-item empty\" role=\"option\" aria-selected=\"false\" tabindex={-1}>\n          Nenhum resultado encontrado\n        </div>\n      )\n    }\n\n    return this.filteredOptions.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  /**\n   * Limpa todas as opções selecionadas.\n   */\n  @Method()\n  async clear() {\n    const updatedOptions = this.parsedOptions.map((option) => ({ ...option, selected: false }))\n    this.parsedOptions = updatedOptions\n\n    const newValue = this.isMultiple ? [] : undefined\n    this.selectedValue = newValue\n    this.value = newValue\n\n    this.updateSelectedOptions()\n    this.updateSelectedAllState()\n    this.valueChange.emit(newValue)\n\n    try {\n      this.elementInternals.setFormValue(JSON.stringify(newValue ?? (this.isMultiple ? [] : null)))\n    } catch {\n      // Ignora erro em testes onde setFormValue não é implementado\n    }\n  }\n\n  /**\n   * Retorna o valor selecionado.\n   * @returns {Promise<string | string[]>} O valor atual.\n   */\n  @Method()\n  async getValue() {\n    return this.value\n  }\n\n  /**\n   * Define o valor do componente.\n   * @param {string | string[]} newValue O novo valor a ser definido.\n   */\n  @Method()\n  async setValue(newValue: string | string[]) {\n    this.value = newValue\n    // O @Watch('value') cuidará da sincronização\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-select': true,\n    }\n  }\n\n  private handleSearchInput(event: Event) {\n    const value = (event.target as HTMLInputElement).value ?? ''\n    this.searchTerm = value\n    this.filteredOptions = this.getFilteredOptions(value)\n    this.isExpanded = true\n  }\n\n  private handleSearchFocus() {\n    this.filteredOptions = this.getFilteredOptions(this.searchTerm)\n  }\n\n  private handleSearchBlur() {\n    // Ao sair do campo, volta a exibir o resumo das seleções\n    this.searchTerm = ''\n    this.filteredOptions = this.getFilteredOptions('')\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"],"mappings":"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","ignoreList":[]}

package/dist/components/{p-CbnpaWFn.js → p-CkOo_SmU.js}

@@ -4,9 +4,9 @@
  */
 import { p as t, H as i, d as r, h as a, c as e } from "./p-DSkSDmzD.js";
 
-import { d as o } from "./p-CodfIeVU.js";
+import { d as n } from "./p-CodfIeVU.js";
 
-import { d as n } from "./p-Ck56essO.js";
+import { d as o } from "./p-Ck56essO.js";
 
 const s = "*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}.d-flex{display:-webkit-box !important;display:-ms-flexbox !important;display:flex !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:-webkit-box !important;display:-ms-flexbox !important;display:flex !important}}.justify-content-start{-webkit-box-pack:start !important;-ms-flex-pack:start !important;justify-content:flex-start !important}.justify-content-end{-webkit-box-pack:end !important;-ms-flex-pack:end !important;justify-content:flex-end !important}.justify-content-center{-webkit-box-pack:center !important;-ms-flex-pack:center !important;justify-content:center !important}.align-items-center{-webkit-box-align:center !important;-ms-flex-align:center !important;align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%;min-width:8.3333333333%}.col-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.col-2{-ms-flex-preferred-size:16.6666666667%;flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media (min-width: 992px){.container,.container-lg{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container,.container-lg{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media (min-width: 1600px){.container,.container-lg{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.mt-1{margin-top:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.mr-n2{margin-right:calc(var(--spacing-scale-base)*-1) !important}.ml-2{margin-left:var(--spacing-scale-base) !important}.m-3{margin:var(--spacing-scale-2x) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mr-auto{margin-right:auto !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}.py-3{padding-bottom:var(--spacing-scale-2x) !important;padding-top:var(--spacing-scale-2x) !important}.py-4{padding-bottom:var(--spacing-scale-3x) !important;padding-top:var(--spacing-scale-3x) !important}@media (min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}body{--bg-color:var(--background);--bg-color-rgb:var(--background-rgb);--bg-color-hsl:var(--background-hsl);--font-size:var(--font-size-scale-base);--font-weight:var(--font-weight-regular);--link-color:var(--interactive);--link-color-rgb:var(--interactive-rgb);--link-color-hsl:var(--interactive-hsl);--line-height:var(--font-line-height-medium);--text-color:var(--color);--text-color-rgb:var(--color-rgb);--text-color-hsl:var(--color-hsl);background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-base);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height)}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--pressed))), to(rgba(var(--interactive-rgb), var(--pressed))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}button{cursor:pointer}img{max-width:100%;vertical-align:middle}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}::-webkit-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-moz-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::-ms-input-placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.text-pure-0{color:var(--pure-0) !important}.text-primary-default{color:var(--color-primary-default) !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-medium{font-weight:500 !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}.ease{-webkit-animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1);animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{-webkit-animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1);animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.highlight{background:var(--status-highlight-background) -webkit-gradient(linear, left top, left bottom, from(var(--status-highlight-overlay)), to(var(--status-highlight-overlay)));background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{-webkit-box-shadow:var(--surface-shadow-sm);box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}*[data-toggle=collapse]:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--interactive-rgb), var(--hover))), to(rgba(var(--interactive-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-input{--input-button-margin:var(--spacing-scale-half);--input-padding:0 var(--spacing-scale-2x);--input-padding-button:var(--spacing-scale-5x);--input-padding-icon:var(--spacing-scale-5x);--input-size:var(--input-medium);--input-small:32px;--input-medium:40px;--input-large:48px;--input-highlight:56px;--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);color:var(--color);position:relative}.br-input input{background-color:var(--background-light);border-color:var(--border-color-alternative);border-radius:var(--surface-rounder-sm);border-style:var(--border-style);border-width:var(--border-width);color:var(--color-light);display:block;font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);height:var(--input-size);margin-top:var(--spacing-scale-half);padding-bottom:0;padding-left:var(--spacing-scale-2x);padding-right:var(--spacing-scale-2x);padding-top:0;width:100%}.br-input input::-ms-reveal,.br-input input::-ms-clear,.br-input input::-webkit-calendar-picker-indicator{display:none}.br-input input[type=search]::-webkit-search-decoration,.br-input input[type=search]::-webkit-search-cancel-button,.br-input input[type=search]::-webkit-search-results-button,.br-input input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.br-input.input-inline{display:-webkit-box;display:-ms-flexbox;display:flex}.br-input.input-inline .input-label{margin-right:var(--spacing-scale-baseh);margin-top:calc(var(--input-size)*.5 - var(--spacing-scale-half))}.br-input.input-inline .input-content{-webkit-box-flex:1;-ms-flex:1;flex:1}.br-input .input-group{position:relative}.br-input .input-icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--border-color-alternative);display:-webkit-box;display:-ms-flexbox;display:flex;height:var(--input-size);margin-left:var(--spacing-scale-baseh);position:absolute}.br-input .input-icon+input{padding-left:var(--input-padding-icon)}.br-input .br-button{--button-size:var(--button-small);--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);border-radius:50%;float:right;margin-right:var(--input-button-margin);margin-top:calc((var(--input-size) + var(--spacing-scale-half))*-1);padding:0;position:relative;-webkit-transform:translateY(calc((var(--input-size) - var(--button-size)) * 0.5));transform:translateY(calc((var(--input-size) - var(--button-size)) * 0.5));width:var(--button-size)}.br-input.input-button input{padding-right:var(--input-padding-button)}.br-input.has-icon input{padding-right:var(--input-padding-icon)}.br-input.has-icon .br-button.circle{float:right;margin-right:var(--spacing-scale-half);margin-top:calc((var(--button-size) + var(--spacing-scale-half) + var(--spacing-scale-half))*-1);-webkit-transform:translateY(0);transform:translateY(0)}.br-input.has-icon.small .br-button.circle{margin-top:calc((var(--button-size) + var(--spacing-scale-base))*-1)}.br-input.has-icon.large .br-button.circle{margin-top:calc(var(--button-size)*-1)}.br-input.input-highlight{--input-button-margin:var(--spacing-scale-2x);--input-padding:0 var(--spacing-scale-3x);--input-padding-button:var(--spacing-scale-7x);--input-padding-icon:var(--spacing-scale-7x);--input-size:var(--input-highlight)}.br-input.input-highlight input{background-color:var(--gray-2);border-color:rgba(0,0,0,0);padding-left:var(--spacing-scale-3x);padding-right:var(--spacing-scale-3x)}.br-input.input-highlight .input-icon{margin-left:var(--spacing-scale-3x)}.br-input.input-highlight .input-icon+input{padding-left:var(--spacing-scale-7x)}.br-input .br-list{-webkit-box-shadow:var(--surface-shadow-md);box-shadow:var(--surface-shadow-md);max-height:530px;overflow:auto;position:absolute;width:100%;z-index:var(--z-index-layer-2)}.br-input .br-list::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-input .br-list::-webkit-scrollbar-track{background:var(--gray-10)}.br-input .br-list::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-input .br-list:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-input .br-list .br-item{--item-padding-y:var(--spacing-scale-2x)}.br-input .br-list .br-item:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--color-rgb), var(--hover))), to(rgba(var(--color-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-input .br-list .br-item:not(:first-child){border-top:var(--surface-width-sm) solid var(--border-color)}.br-input.success input{border-color:var(--success);border-width:2px}.br-input.danger input{border-color:var(--danger);border-width:2px}.br-input.warning input{border-color:var(--warning);border-width:2px}.br-input.info input{border-color:var(--info);border-width:2px}.br-input input:not(:disabled):hover{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(var(--color-rgb), var(--hover))), to(rgba(var(--color-rgb), var(--hover))));background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-input input:focus,.br-input input:focus-visible{border-color:var(--focus) !important;-webkit-box-shadow:0 0 0 var(--surface-width-md) var(--focus);box-shadow:0 0 0 var(--surface-width-md) var(--focus);outline:none}.br-input .feedback{margin-bottom:var(--spacing-scale-half)}.br-input.small{--input-size:var(--input-small)}.br-input.medium{--input-size:var(--input-medium)}.br-input.large{--input-size:var(--input-large)}.br-input.inverted,.br-input.inverted label,.br-input.dark-mode,.br-input.dark-mode label{--color:var(--color-dark);--focus-color:var(--focus-color-dark)}:host{display:inline-block}:host .br-input .input-icon{margin:0 var(--spacing-scale-2x)}:host .br-input .input-icon+input{padding-left:var(--spacing-scale-6x)}.br-input br-button{float:right;margin-right:var(--input-button-margin);margin-top:calc((var(--input-size) + var(--spacing-scale-half))*-1);padding:0;position:relative}.br-input br-button.button-transform{-webkit-transform:translateY(calc((var(--input-size) - 32px) * 0.5));transform:translateY(calc((var(--input-size) - 32px) * 0.5))}.br-input .input-label{margin-top:0 !important}.br-input.input-inline{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host([borderless]) .br-input input{border-color:rgba(0,0,0,0)}:host([borderless]) .br-input input:focus,:host([borderless]) .br-input input:focus-visible{border-color:var(--border-color-alternative)}";
 
@@ -71,7 +71,17 @@ const l =  t(class t extends i {
     this.hasActionSlot = false;
     this.hasFeedbackSlot = false;
     this.handleInput = t => {
-      this.value = t.target.value;
+      var i;
+      const r = t.target;
+      let a = (i = r.value) !== null && i !== void 0 ? i : "";
+      if (this.hasMaskConfigured()) {
+        const t = this.applyMask(a);
+        if (t !== a) {
+          r.value = t;
+        }
+        a = t;
+      }
+      this.value = a;
       this.valueChange.emit(this.value);
     };
     this.renderLabel = () => {
@@ -157,6 +167,7 @@ const l =  t(class t extends i {
     this.hasActionSlot = this.hasSlotContent("action");
     this.hasFeedbackSlot = this.hasSlotContent("feedback");
     this.internalState = this.state;
+    this.applyMaskToValue();
     if (this.hasFeedbackSlot) {
       this.initializeStateWithFeedback();
     }
@@ -207,6 +218,18 @@ const l =  t(class t extends i {
       warning: this.internalState === "warning"
     };
   }
+  handleValueChange(t) {
+    if (!this.hasMaskConfigured()) {
+      return;
+    }
+    const i = this.applyMask(t !== null && t !== void 0 ? t : "");
+    if (i !== t) {
+      this.value = i;
+    }
+  }
+  handleMaskChange() {
+    this.applyMaskToValue();
+  }
   hasSlotContent(t) {
     return this.el.querySelector(`[slot="${t}"]`) !== null;
   }
@@ -248,11 +271,44 @@ const l =  t(class t extends i {
       });
     }
   }
+  applyMaskToValue() {
+    if (!this.hasMaskConfigured() || this.value === undefined || this.value === null) {
+      return;
+    }
+    const t = this.applyMask(this.value);
+    if (this.value !== t) {
+      this.value = t;
+    }
+  }
+  applyMask(t) {
+    if (!this.hasMaskConfigured()) {
+      return t !== null && t !== void 0 ? t : "";
+    }
+    const i = (t !== null && t !== void 0 ? t : "").replace(/\D/g, "");
+    if (i.length === 0) {
+      return "";
+    }
+    let r = "";
+    let a = 0;
+    for (let t = 0; t < this.mask.length && a < i.length; t++) {
+      const e = this.mask[t];
+      if (e === "#") {
+        r += i[a];
+        a++;
+      } else {
+        r += e;
+      }
+    }
+    return r;
+  }
+  hasMaskConfigured() {
+    return typeof this.mask === "string" && this.mask.length > 0;
+  }
   render() {
     return a(e, {
-      key: "b86101fdb03dd510bd6ef30656cf12139bcdfc1e"
+      key: "251164fce4650bd0fa1a1b9189537b11c2ebe6b6"
     }, a("div", {
-      key: "ca5d66789aee3feae1918e70a0c25af070cf708f",
+      key: "7b2f561f2cc1d767ba75b483e3d2b93bccd30901",
       class: this.getInputCssClassMap()
     }, this.renderLabel(), this.isInline ? this.renderInlineInputContent() : this.renderInputContent(), this.renderFeedback()));
   }
@@ -262,6 +318,12 @@ const l =  t(class t extends i {
   get el() {
     return this;
   }
+  static get watchers() {
+    return {
+      value: [ "handleValueChange" ],
+      mask: [ "handleMaskChange" ]
+    };
+  }
   static get style() {
     return s;
   }
@@ -290,6 +352,7 @@ const l =  t(class t extends i {
   maxlength: [ 514 ],
   multiple: [ 516 ],
   pattern: [ 513 ],
+  mask: [ 513 ],
   step: [ 514 ],
   actionLabel: [ 513, "action-label" ],
   isPasswordVisible: [ 32 ],
@@ -297,6 +360,9 @@ const l =  t(class t extends i {
   hasIconSlot: [ 32 ],
   hasActionSlot: [ 32 ],
   hasFeedbackSlot: [ 32 ]
+}, undefined, {
+  value: [ "handleValueChange" ],
+  mask: [ "handleMaskChange" ]
 } ]);
 
 let c = 0;
@@ -316,13 +382,13 @@ function defineCustomElement() {
 
      case "br-button":
       if (!customElements.get(t)) {
-        o();
+        n();
       }
       break;
 
      case "br-icon":
       if (!customElements.get(t)) {
-        n();
+        o();
       }
       break;
     }
@@ -330,5 +396,5 @@ function defineCustomElement() {
 }
 
 export { l as I, defineCustomElement as d };
-//# sourceMappingURL=p-CbnpaWFn.js.map
-//# sourceMappingURL=p-CbnpaWFn.js.map
+//# sourceMappingURL=p-CkOo_SmU.js.map
+//# sourceMappingURL=p-CkOo_SmU.js.map

package/dist/components/p-CkOo_SmU.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inputCss","Input","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","type","density","disabled","isInline","isHighlight","customId","inputId","readonly","required","borderless","autocorrect","multiple","isPasswordVisible","internalState","hasIconSlot","hasActionSlot","hasFeedbackSlot","handleInput","event","inputElement","target","nextValue","_a","value","hasMaskConfigured","maskedValue","applyMask","valueChange","emit","renderLabel","label","length","h","class","part","htmlFor","renderInput","id","style","controlWidth","undefined","width","autocomplete","autoCorrect","min","max","minLength","minlength","maxLength","maxlength","name","pattern","step","onInput","placeholder","title","el","renderHelpText","helpText","renderIconPassword","iconName","togglePasswordVisibility","input","shadowRoot","querySelector","renderInlineInputContent","renderInputWithIcon","renderInputWithoutIcon","renderInputContent","renderIconSlot","renderButton","componentWillLoad","hasSlotContent","state","applyMaskToValue","initializeStateWithFeedback","componentDidLoad","setupSlotFeedbackListener","initialMessageElement","messageState","getAttribute","slot","addEventListener","syncStateWithSlotFeedback","messageElement","getInputCssClassMap","small","large","medium","success","danger","info","warning","handleValueChange","newValue","handleMaskChange","slotName","shape","onClick","actionLabel","renderFeedback","digits","replace","digitIndex","i","mask","maskChar","render","Host","key"],"sources":["../../packages/webcomponents/src/components/input/input.scss?tag=br-input&encapsulation=shadow","../../packages/webcomponents/src/components/input/input.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/input/input\";\n\n:host {\n  display: inline-block;\n\n  .br-input .input-icon {\n    margin: 0 var(--spacing-scale-2x);\n  }\n\n  .br-input .input-icon + input {\n    padding-left: var(--spacing-scale-6x);\n  }\n}\n\n.br-input {\n  br-button {\n    float: right;\n    margin-right: var(--input-button-margin);\n    margin-top: calc((var(--input-size) + var(--spacing-scale-half)) * -1);\n    padding: 0;\n    position: relative;\n\n    &.button-transform {\n      transform: translateY(calc((var(--input-size) - 32px) * 0.5));\n    }\n  }\n\n  .input-label {\n    margin-top: 0 !important;\n  }\n\n  &.input-inline {\n    display: flex;\n    align-items: center;\n  }\n}\n\n/* Estilo borderless para composições contextuais */\n:host([borderless]) {\n  .br-input input {\n    border-color: transparent;\n  }\n\n  .br-input input:focus,\n  .br-input input:focus-visible {\n    border-color: var(--border-color-alternative);\n  }\n}\n","import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core'\n\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n *\n * Para uma descrição detalhada, consulte a [documentação do GovBR-DS](https://www.gov.br/ds/components/input?tab=designer).\n *\n * @slot action - Botão à direita do input.\n * @slot icon - Ícone à esquerda do input.\n * @slot help-text - Personalização do texto de ajuda.\n * @slot feedback - Mensagem de feedback como resposta específica a uma interação do usuário com o input. Pode ser feedback de erro, aviso, sucesso ou informação.\n *\n * @example\n * ```html\n * <br-input label=\"Nome\" placeholder=\"Digite seu nome\"></br-input>\n * ```\n */\n@Component({\n  tag: 'br-input',\n  styleUrl: 'input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Input {\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: HTMLBrInputElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Especifica o tipo de entrada do campo. Pode ser um dos seguintes:\n   * - 'color': Seletor de cor\n   * - 'email': Campo para e-mail\n   * - 'hidden': Campo oculto\n   * - 'password': Campo para senha\n   * - 'range': Controle deslizante\n   * - 'search': Campo de pesquisa\n   * - 'number': Campo para números\n   * - 'tel': Campo para números de telefone\n   * - 'text': Campo de texto padrão\n   * - 'url': Campo para URLs\n   */\n  @Prop({ reflect: true }) readonly type:\n    | 'color'\n    | 'email'\n    | 'hidden'\n    | 'password'\n    | 'range'\n    | 'search'\n    | 'number'\n    | 'tel'\n    | 'text'\n    | 'file'\n    | 'url' = 'text'\n\n  /**\n   * Controla o comportamento de preenchimento automático do navegador para o input.\n   */\n  @Prop({ reflect: true }) readonly autocomplete: 'on' | 'off'\n\n  /**\n   * Ajusta a densidade, alterando o espaçamento interno para um visual mais compacto ou mais expandido.\n   */\n  @Prop({ reflect: true }) readonly density: 'large' | 'medium' | 'small' = 'medium'\n\n  /**\n   * Desativa o input, tornando-o não interativo.\n   */\n  @Prop({ reflect: true }) readonly disabled: boolean = false\n\n  /**\n   * Se verdadeiro, o rótulo e o input estarão na mesma linha (layout inline).\n   */\n  @Prop({ reflect: true }) readonly isInline: boolean = false\n\n  /**\n   * Se verdadeiro, o input terá destaque visual.\n   */\n  @Prop({ reflect: true }) readonly isHighlight: boolean = false\n\n  /**\n   * Define o estado do input\n   * Os possíveis valores são:\n   * - 'info': Mensagem informativa.\n   * - 'warning': Mensagem de aviso.\n   * - 'danger': Mensagem de erro ou alerta.\n   * - 'success': Mensagem de sucesso.\n   * O valor padrão é 'info'.\n   */\n  @Prop({ reflect: true }) readonly state: 'info' | 'warning' | 'danger' | 'success'\n\n  /**\n   * Texto exibido como rótulo do input.\n   */\n  @Prop({ reflect: true }) readonly label: string\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-input-${inputId++}`\n\n  /**\n   * Nome do input, utilizado para identificação em formulários.\n   */\n  @Prop({ reflect: true }) readonly name: string\n\n  /**\n   * Texto exibido dentro do input quando está vazio, fornecendo uma dica ou sugestão ao usuário.\n   */\n  @Prop({ reflect: true }) readonly placeholder: string\n\n  /**\n   * Se verdadeiro, o valor do input é exibido, mas não pode ser editado pelo usuário.\n   */\n  @Prop({ reflect: true }) readonly readonly: boolean = false\n\n  /**\n   * Se verdadeiro, o input é obrigatório e deve ser preenchido antes que o formulário possa ser enviado.\n   */\n  @Prop({ reflect: true }) readonly required: boolean = false\n\n  /**\n   * Valor exibido no input.\n   * Pode ser alterado pelo usuário se a propriedade `readonly` não estiver ativa.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string\n\n  /**\n   * Largura do campo de entrada (por exemplo, '88px').\n   * Quando definido, sobrescreve a largura padrão de 100%.\n   */\n  @Prop({ reflect: true }) readonly controlWidth?: string\n\n  /**\n   * Remove a borda do input quando não está em foco.\n   * Útil para composições contextuais (ex.: paginação).\n   */\n  @Prop({ reflect: true }) readonly borderless: boolean = false\n\n  /**\n   * Texto adicional que fornece ajuda ou informações sobre o input.\n   */\n  @Prop({ reflect: true }) readonly helpText: string\n\n  /**\n   * Controla a correção automática do texto.\n   */\n  @Prop({ reflect: true }) readonly autocorrect: 'off' | 'on' = 'off'\n\n  /**\n   * Define o valor mínimo para campos de entrada numéricos.\n   */\n  @Prop({ reflect: true }) readonly min: number\n\n  /**\n   * Define o valor máximo para campos de entrada numéricos.\n   */\n  @Prop({ reflect: true }) readonly max: number\n\n  /**\n   * Define o comprimento mínimo do valor do campo de entrada.\n   */\n  @Prop({ reflect: true }) readonly minlength: number\n\n  /**\n   * Define o comprimento máximo do valor do campo de entrada.\n   */\n  @Prop({ reflect: true }) readonly maxlength: number\n\n  /**\n   * Se verdadeiro, permite a seleção de múltiplos arquivos.\n   */\n  @Prop({ reflect: true }) readonly multiple: boolean = false\n\n  /**\n   * Define o padrão de entrada para validação.\n   */\n  @Prop({ reflect: true }) readonly pattern: string\n\n  /**\n   * Máscara aplicada ao valor digitado (use `#` para marcar posições numéricas).\n   */\n  @Prop({ reflect: true }) readonly mask?: string\n\n  /**\n   * Define o valor do passo para campos de entrada numéricos.\n   */\n  @Prop({ reflect: true }) readonly step: number\n\n  /**\n   * Texto exibido no botão de ação à direita do input.\n   */\n  @Prop({ reflect: true }) readonly actionLabel: string\n\n  @State() isPasswordVisible: boolean = false\n\n  @State() internalState: 'info' | 'warning' | 'danger' | 'success' = 'info'\n\n  @State() hasIconSlot: boolean = false\n\n  @State() hasActionSlot: boolean = false\n\n  @State() hasFeedbackSlot: boolean = false\n\n  componentWillLoad() {\n    this.hasIconSlot = this.hasSlotContent('icon')\n    this.hasActionSlot = this.hasSlotContent('action')\n    this.hasFeedbackSlot = this.hasSlotContent('feedback')\n    this.internalState = this.state\n    this.applyMaskToValue()\n\n    if (this.hasFeedbackSlot) {\n      this.initializeStateWithFeedback()\n    }\n  }\n\n  componentDidLoad() {\n    if (this.hasFeedbackSlot) {\n      this.setupSlotFeedbackListener()\n    }\n  }\n\n  private initializeStateWithFeedback() {\n    const initialMessageElement = this.el.querySelector('br-message')\n\n    if (initialMessageElement !== null || initialMessageElement !== undefined) {\n      const messageState = initialMessageElement.getAttribute('state')\n      this.internalState = (messageState as 'info' | 'warning' | 'danger' | 'success') || this.state\n    } else {\n      this.internalState = this.state\n    }\n  }\n\n  private setupSlotFeedbackListener() {\n    const slot = this.el.shadowRoot?.querySelector('slot[name=\"feedback\"]')\n    if (slot !== null && slot !== undefined) {\n      slot.addEventListener('slotchange', () => {\n        this.syncStateWithSlotFeedback()\n      })\n    }\n  }\n\n  private syncStateWithSlotFeedback() {\n    const messageElement = this.el.querySelector('br-message')\n\n    if (messageElement !== null && messageElement !== undefined) {\n      this.internalState = messageElement.getAttribute('state') as 'info' | 'warning' | 'danger' | 'success'\n    } else {\n      this.internalState = this.state\n    }\n  }\n\n  private getInputCssClassMap(): CssClassMap {\n    return {\n      'br-input': true,\n      'input-button': this.hasActionSlot,\n      small: this.density === 'small',\n      large: this.density === 'large',\n      medium: this.density === 'medium',\n      'input-inline': this.isInline,\n      'input-highlight': this.isHighlight,\n      success: this.internalState === 'success',\n      danger: this.internalState === 'danger',\n      info: this.internalState === 'info',\n      warning: this.internalState === 'warning',\n    }\n  }\n\n  /**\n   * Valor atualizado do input\n   */\n  @Event() valueChange: EventEmitter<string>\n\n  @Watch('value')\n  protected handleValueChange(newValue: string) {\n    if (!this.hasMaskConfigured()) {\n      return\n    }\n\n    const maskedValue = this.applyMask(newValue ?? '')\n    if (maskedValue !== newValue) {\n      this.value = maskedValue\n    }\n  }\n\n  @Watch('mask')\n  protected handleMaskChange() {\n    this.applyMaskToValue()\n  }\n\n  private readonly handleInput = (event: Event) => {\n    const inputElement = event.target as HTMLInputElement\n    let nextValue = inputElement.value ?? ''\n\n    if (this.hasMaskConfigured()) {\n      const maskedValue = this.applyMask(nextValue)\n      if (maskedValue !== nextValue) {\n        inputElement.value = maskedValue\n      }\n      nextValue = maskedValue\n    }\n\n    this.value = nextValue\n    this.valueChange.emit(this.value)\n  }\n\n  private readonly renderLabel = () => {\n    if (this.label?.length > 0) {\n      if (this.isInline) {\n        return (\n          <div class=\"input-label\">\n            <label part=\"label\" class=\"text-nowrap\" htmlFor={this.customId}>\n              {this.label}\n            </label>\n          </div>\n        )\n      } else {\n        return (\n          <label part=\"label\" htmlFor={this.customId}>\n            {this.label}\n          </label>\n        )\n      }\n    }\n  }\n\n  private hasSlotContent(slotName: string): boolean {\n    return this.el.querySelector(`[slot=\"${slotName}\"]`) !== null\n  }\n\n  private readonly renderInput = () => {\n    return (\n      <input\n        class={this.isHighlight ? 'input-highlight' : null}\n        id={this.customId}\n        style={this.controlWidth !== undefined && this.controlWidth !== null ? { width: this.controlWidth } : undefined}\n        autocomplete={this.autocomplete}\n        disabled={this.disabled}\n        autoCorrect={this.autocorrect}\n        min={this.min}\n        max={this.max}\n        minLength={this.minlength}\n        maxLength={this.maxlength}\n        multiple={this.multiple}\n        name={this.name}\n        pattern={this.pattern}\n        step={this.step}\n        onInput={this.handleInput}\n        placeholder={this.placeholder}\n        readonly={this.readonly}\n        required={this.required}\n        title={this.el.title}\n        type={this.type}\n        value={this.value}\n      />\n    )\n  }\n\n  private readonly renderHelpText = () => {\n    return this.helpText?.length > 0 ? <p>{this.helpText}</p> : <slot name=\"help-text\"></slot>\n  }\n\n  private readonly renderIconPassword = () => {\n    const iconName = this.isPasswordVisible ? 'fa-solid:eye-slash' : 'fa-solid:eye'\n    return <br-icon icon-name={iconName}></br-icon>\n  }\n\n  private readonly togglePasswordVisibility = () => {\n    const input = this.el.shadowRoot.querySelector('input')\n    this.isPasswordVisible = !this.isPasswordVisible\n    input.type = this.isPasswordVisible ? 'text' : 'password'\n  }\n\n  private renderIconSlot() {\n    if (this.hasSlotContent('icon')) {\n      return (\n        <div class=\"input-icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n      )\n    }\n  }\n\n  private renderButton() {\n    if (this.type === 'password') {\n      return (\n        <br-button\n          class=\"button-transform\"\n          shape=\"circle\"\n          density=\"small\"\n          aria-label={this.isPasswordVisible ? 'Esconder senha' : 'Mostrar senha'}\n          aria-pressed={this.isPasswordVisible ? 'true' : 'false'}\n          onClick={this.togglePasswordVisibility}\n        >\n          {this.renderIconPassword()}\n        </br-button>\n      )\n    } else if (this.hasSlotContent('action')) {\n      return (\n        <br-button class=\"button-transform\" shape=\"circle\" density=\"small\" aria-label={this.actionLabel}>\n          <slot name=\"action\"></slot>\n        </br-button>\n      )\n    }\n    return null\n  }\n\n  private readonly renderInlineInputContent = () => {\n    if (this.hasIconSlot) {\n      return <div class=\"input-content\">{this.renderInputWithIcon()}</div>\n    } else {\n      return <div class=\"input-content\">{this.renderInputWithoutIcon()}</div>\n    }\n  }\n\n  private readonly renderInputContent = () => {\n    return this.hasIconSlot ? this.renderInputWithIcon() : this.renderInputWithoutIcon()\n  }\n\n  private readonly renderInputWithIcon = () => {\n    return (\n      <div class=\"input-group\">\n        {this.renderIconSlot()}\n        {this.renderInput()}\n        {this.renderButton()}\n        {this.renderHelpText()}\n      </div>\n    )\n  }\n\n  private readonly renderInputWithoutIcon = () => {\n    return [this.renderInput(), this.renderButton(), this.renderHelpText()]\n  }\n\n  private renderFeedback() {\n    if (this.hasFeedbackSlot) {\n      return <slot name=\"feedback\"></slot>\n    }\n  }\n\n  private applyMaskToValue() {\n    if (!this.hasMaskConfigured() || this.value === undefined || this.value === null) {\n      return\n    }\n\n    const maskedValue = this.applyMask(this.value)\n    if (this.value !== maskedValue) {\n      this.value = maskedValue\n    }\n  }\n\n  private applyMask(value: string): string {\n    if (!this.hasMaskConfigured()) {\n      return value ?? ''\n    }\n\n    const digits = (value ?? '').replace(/\\D/g, '')\n    if (digits.length === 0) {\n      return ''\n    }\n\n    let maskedValue = ''\n    let digitIndex = 0\n\n    for (let i = 0; i < this.mask.length && digitIndex < digits.length; i++) {\n      const maskChar = this.mask[i]\n\n      if (maskChar === '#') {\n        maskedValue += digits[digitIndex]\n        digitIndex++\n      } else {\n        maskedValue += maskChar\n      }\n    }\n\n    return maskedValue\n  }\n\n  private hasMaskConfigured(): boolean {\n    return typeof this.mask === 'string' && this.mask.length > 0\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getInputCssClassMap()}>\n          {this.renderLabel()}\n\n          {this.isInline ? this.renderInlineInputContent() : this.renderInputContent()}\n\n          {this.renderFeedback()}\n        </div>\n      </Host>\n    )\n  }\n}\n\nlet inputId = 0\n"],"mappings":"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","ignoreList":[]}

package/dist/custom-elements.json

@@ -3531,6 +3531,15 @@
               "readonly": true,
               "description": "Define o padrão de entrada para validação."
             },
+            {
+              "kind": "field",
+              "name": "mask",
+              "type": {
+                "text": "string | undefined"
+              },
+              "readonly": true,
+              "description": "Máscara aplicada ao valor digitado (use `#` para marcar posições numéricas)."
+            },
             {
               "kind": "field",
               "name": "step",
@@ -3614,6 +3623,24 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "handleValueChange",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleMaskChange",
+              "privacy": "protected"
+            },
             {
               "kind": "field",
               "name": "handleInput",
@@ -3707,6 +3734,39 @@
               "name": "renderFeedback",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "applyMaskToValue",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "applyMask",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "hasMaskConfigured",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "render"
@@ -3919,6 +3979,14 @@
                 "text": "string"
               }
             },
+            {
+              "name": "mask",
+              "fieldName": "mask",
+              "description": "Máscara aplicada ao valor digitado (use `#` para marcar posições numéricas).",
+              "type": {
+                "text": "string"
+              }
+            },
             {
               "name": "step",
               "fieldName": "step",
@@ -7282,12 +7350,12 @@
               "kind": "field",
               "name": "options",
               "type": {
-                "text": "| string\n    | {\n      label: string\n      value: string\n      selected?: boolean\n    }[]"
+                "text": "| string\n    | {\n        label: string\n        value: string\n        selected?: boolean\n      }[]"
               },
               "default": "[]",
               "description": "Define as opções disponíveis no componente de seleção.\nPode 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`).\nSe 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.\nExemplo de uso:\n```typescript\noptions='[{\"label\": \"Sim\", \"value\": \"1\"}, {\"label\": \"Não\", \"value\": \"0\"}]'\n// ou\noptions=[{ label: \"Sim\", value: \"1\" }, { label: \"Não\", value: \"0\" }]\n```",
               "parsedType": {
-                "text": "string | {\n      label: string\n      value: string\n      selected?: boolean\n    }[]"
+                "text": "string | {\n        label: string\n        value: string\n        selected?: boolean\n      }[]"
               }
             },
             {
@@ -7370,6 +7438,14 @@
               },
               "default": "[]"
             },
+            {
+              "kind": "field",
+              "name": "filteredOptions",
+              "type": {
+                "text": "{ label: string; value: string; selected?: boolean }[]"
+              },
+              "default": "[]"
+            },
             {
               "kind": "field",
               "name": "inputValue",
@@ -7378,6 +7454,14 @@
               },
               "default": "''"
             },
+            {
+              "kind": "field",
+              "name": "searchTerm",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
             {
               "kind": "field",
               "name": "value",
@@ -7571,6 +7655,37 @@
               "name": "updateSelectedOptions",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "normalizeText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getFilteredOptions",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "term",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "getStringValue",
@@ -7625,6 +7740,35 @@
               "name": "toggleOpen",
               "description": "Inverte o valor da prop `isOpen`"
             },
+            {
+              "kind": "method",
+              "name": "clear",
+              "description": "Limpa todas as opções selecionadas."
+            },
+            {
+              "kind": "method",
+              "name": "getValue",
+              "description": "Retorna o valor selecionado.",
+              "return": {
+                "type": {
+                  "text": "Promise<string | string[]>"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setValue",
+              "parameters": [
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "string | string[]"
+                  },
+                  "description": "O novo valor a ser definido."
+                }
+              ],
+              "description": "Define o valor do componente."
+            },
             {
               "kind": "method",
               "name": "getCssClassMap",
@@ -7635,6 +7779,29 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "handleSearchInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleSearchFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleSearchBlur",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "render"
@@ -7673,10 +7840,10 @@
               "default": "[]",
               "description": "Define as opções disponíveis no componente de seleção.\nPode 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`).\nSe 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.\nExemplo de uso:\n```typescript\noptions='[{\"label\": \"Sim\", \"value\": \"1\"}, {\"label\": \"Não\", \"value\": \"0\"}]'\n// ou\noptions=[{ label: \"Sim\", value: \"1\" }, { label: \"Não\", value: \"0\" }]\n```",
               "type": {
-                "text": "| string\n    | {\n      label: string\n      value: string\n      selected?: boolean\n    }[]"
+                "text": "| string\n    | {\n        label: string\n        value: string\n        selected?: boolean\n      }[]"
               },
               "parsedType": {
-                "text": "string | {\n      label: string\n      value: string\n      selected?: boolean\n    }[]"
+                "text": "string | {\n        label: string\n        value: string\n        selected?: boolean\n      }[]"
               }
             },
             {