@seniorsistemas/angular-components 17.27.1-feature-sds-110-9a13a8bc → 17.27.1-feature-sds-110-57186492

package/fesm2022/seniorsistemas-angular-components-select.mjs

@@ -1,17 +1,18 @@
-import { DomPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
+import * as i5 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i1 from '@angular/common';
-import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, output, Component, signal, computed, inject, ElementRef, viewChild, PLATFORM_ID, ViewContainerRef, forwardRef } from '@angular/core';
+import { input, model, output, Component, signal, computed, viewChild, inject, forwardRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@angular/forms';
 import { FormGroup, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import * as i4 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
-import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 import { CheckboxComponent } from '@seniorsistemas/angular-components/checkbox';
-import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 class SelectOptionComponent {
     id = input.required();
@@ -37,6 +38,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }] });
 
 class SelectComponent {
+    static nextId = 0;
     placeholder = input('');
     multiple = input(false);
     options = input.required();
@@ -50,65 +52,49 @@ class SelectComponent {
     virtualScroll = input(false);
     virtualScrollItemSize = input(37);
     emptyMessage = input(null);
-    useRawValue = input(false);
-    dataKey = input();
     disabled = model(false);
-    showOptions = signal(false);
+    showOptions = model(false);
     value = signal(null);
     values = signal([]);
     filterValue = signal('');
     focusedIndex = signal(-1);
-    dropTop = 0;
-    dropLeft = 0;
-    dropWidth = 0;
-    _portalHost = null;
+    componentId = `select${SelectComponent.nextId++}`;
     /**
-     * Verifica se todas as opções visíveis (filtradas e não agrupadoras) estão selecionadas.
-     *
-     * - Retorna `true` se todas as opções filtradas estiverem presentes em `values()`.
-     * - Ignora opções marcadas como `grouper`.
-     * - Usa `_getCompareValueExtractor()` para comparar os valores de forma consistente.
-     *
-     * Esse estado é usado para controlar o checkbox de "Selecionar todos" quando todas as opções visíveis estão marcadas.
+     * Computed que indica se todas as opções filtradas estão selecionadas.
+     * Retorna `true` se todas as opções disponíveis (excluindo agrupadores) estiverem presentes
+     * na lista de valores selecionados, e `false` caso contrário.
+     * @returns {boolean} `true` se todas as opções filtradas estão selecionadas, `false` caso contrário.
      */
     allSelected = computed(() => {
-        const selected = this.values();
-        const options = this.filteredOptions().filter((o) => !o.grouper);
-        return (options.length > 0 &&
-            options.every((option) => selected.some((s) => this._getCompareValueExtractor()(s) === this._getCompareValueExtractor()(option))));
+        const options = this.filteredOptions().filter((option) => !option.grouper);
+        const selectedIds = this.values().map((option) => option.id);
+        const ret = options.length > 0 && options.every((option) => selectedIds.includes(option.id));
+        return ret;
     });
+    /**
+     * Retorna o item atualmente focado na lista de opções filtradas.
+     * @returns O dado do item focado ou `null` caso nenhum item esteja focado.
+     */
     focusedItem = computed(() => this.filteredOptions().at(this.focusedIndex())?.data ?? null);
     /**
-     * Converte as opções externas (`options()`) em uma estrutura interna padronizada (`InternalDropdownOption<T>`).
-     *
-     * - Se os dados forem primitivos (string, number, etc.), gera opções com IDs baseados no índice.
-     * - Se os dados forem objetos, delega a criação das opções para `_addIdToOptions()`, que adiciona IDs e marca agrupadores.
-     * - Se o modo agrupado estiver ativo (`group()`), transforma as opções em uma lista achatada com agrupadores via `_grouperToFlat()`.
-     *
-     * Essa estrutura é usada internamente para renderização, filtragem e controle de seleção.
+     * Computa e retorna a lista interna de opções do dropdown.
+     * - Se as opções estiverem agrupadas (`group()` retorna verdadeiro),
+     *   utiliza `_grouperToFlat` para transformar as opções agrupadas em uma lista plana.
+     * - Caso contrário, retorna as opções com IDs adicionados.
+     * @returns Um array de `InternalDropdownOption<T>` representando as opções disponíveis para o componente select.
      */
     internalOptions = computed(() => {
         const opts = this.options();
-        const optionsWithId = this.TIsPrimitive()
-            ? opts.map((value, index) => ({
-                id: `id_primitive_${index}`,
-                grouper: false,
-                data: value,
-            }))
-            : this._addIdToOptions(opts);
+        const optionsWithId = this._addIdToOptions(opts);
         return this.group() ? this._grouperToFlat(optionsWithId) : optionsWithId;
     });
     /**
-     * Retorna o texto que deve ser exibido no componente com base nos valores selecionados.
-     *
-     * - No modo múltiplo:
-     *   - Se houver mais de um item selecionado, exibe uma mensagem traduzida com o total de registros.
-     *   - Se houver apenas um item selecionado, exibe o label correspondente.
-     * - No modo simples:
-     *   - Exibe o label do valor selecionado.     *
-     * - Se nenhum valor estiver selecionado, retorna uma string vazia.
-     *
-     * Essa lógica é usada para mostrar o conteúdo atual do campo de seleção.
+     * Retorna uma string representando a seleção atual do componente.
+     * - Se o modo múltiplo estiver ativado e mais de um item estiver selecionado,
+     *   retorna uma mensagem traduzida indicando o número total de registros selecionados.
+     * - Se apenas um item estiver selecionado, retorna o rótulo desse item.
+     * - Se o modo múltiplo não estiver ativado, retorna o rótulo do item selecionado ou uma string vazia caso nenhum item esteja selecionado.
+     * @returns {string} Texto representando a seleção atual.
      */
     print = computed(() => {
         if (this.multiple()) {
@@ -119,46 +105,45 @@ class SelectComponent {
                 });
             }
             else if (selected.length === 1) {
-                return this._getLabelFromOption(selected[0]);
+                return this._getLabelFromOption(selected[0].data);
             }
         }
-        else if (this.value()) {
-            return this._getLabelFromOption(this.value());
+        else {
+            const selected = this.value();
+            return selected ? this._getLabelFromOption(selected.data) : '';
         }
         return '';
     });
+    /**
+     * Indica se o seletor está "limpo", ou seja, sem nenhum valor selecionado.
+     * - No modo múltiplo (`multiple`), retorna `true` se não houver nenhum valor selecionado (`values` está vazio).
+     * - No modo simples, retorna `true` se não houver valor selecionado (`value` é falsy).
+     * @returns `true` se não houver seleção, `false` caso contrário.
+     */
     isClean = computed(() => {
         return this.multiple() ? !this.values().length : !this.value();
     });
-    TIsPrimitive = computed(() => {
-        const opts = this.options();
-        if (!opts.length)
-            return false;
-        return ['string', 'number', 'boolean'].includes(typeof opts[0]);
-    });
     /**
-     * Indica se o estado de seleção está indeterminado.
-     *
-     * - Retorna `true` quando **algumas**, mas não todas, opções visíveis estão selecionadas.
-     * - Retorna `false` quando **todas** ou **nenhuma** das opções visíveis estão selecionadas.
-     * - Ignora opções marcadas como `grouper`.
-     *
-     * Esse estado é usado, por exemplo, para exibir o checkbox de "Selecionar todos" em modo indeterminado.
+     * Computed que indica se o estado de seleção "Selecionar Todos" está indeterminado.
+     * Retorna `true` quando nem todos os itens filtrados estão selecionados e nem todos estão desmarcados,
+     * ou seja, quando há uma seleção parcial dos itens disponíveis.
+     * @returns {boolean} `true` se a seleção for parcial, `false` caso contrário.
      */
     selectAllIsIndeterminate = computed(() => {
-        const selected = this.values();
-        const options = this.filteredOptions().filter((o) => !o.grouper);
-        const all = options.length > 0 && options.every((o) => selected.includes(o.data));
-        const none = options.every((o) => !selected.includes(o.data));
+        const selected = this.internalOptions().filter((option) => {
+            return this.values().some((o) => o.id === option.id);
+        });
+        const options = this.filteredOptions().filter((option) => !option.grouper);
+        const all = options.length > 0 && options.every((option) => selected.includes(option));
+        const none = options.every((option) => !selected.includes(option));
         return !all && !none;
     });
     /**
-     * Retorna a lista de opções filtradas com base no valor digitado pelo usuário.
-     *
-     * - Se o filtro estiver desativado ou vazio, retorna todas as opções.
-     * - Caso contrário, aplica o filtro usando o(s) campo(s) definidos em `filterBy`.
-     * - Ignora opções marcadas como `grouper`.
-     * - Usa o extrator de label para comparar os valores com o texto buscado.
+     * Retorna uma lista de opções filtradas com base no valor de busca (`filterValue`) e nos critérios definidos.
+     * - Se o filtro estiver desabilitado ou o valor de busca estiver vazio, retorna todas as opções.
+     * - Caso contrário, filtra as opções utilizando o(s) campo(s) especificado(s) em `filterBy`.
+     * - Ignora opções que possuem a propriedade `grouper` definida.
+     * @returns As opções filtradas conforme o valor de busca e critérios de filtro.
      */
     filteredOptions = computed(() => {
         const allOptions = this.internalOptions();
@@ -171,10 +156,10 @@ class SelectComponent {
             if (option.grouper) {
                 return false;
             }
-            const labelExtractor = this._getLabelExtractor();
             let label = '';
+            const optionLabel = this.optionLabel();
             if (!filterBy) {
-                label = labelExtractor(option.data);
+                label = optionLabel ? String(option.data[optionLabel]) : String(option.data);
             }
             else if (Array.isArray(filterBy)) {
                 label = filterBy.map((by) => String(option.data[by] ?? '')).join(' ');
@@ -188,89 +173,88 @@ class SelectComponent {
     filterForm = new FormGroup({
         filter: new FormControl('', { nonNullable: true }),
     });
-    _elementRef = inject((ElementRef));
-    _dropdownTemplate = viewChild('dropdownTemplate');
     _containerDiv = viewChild('containerDiv');
     _onChange = () => { };
     _onTouched = () => { };
-    platformId = inject(PLATFORM_ID);
-    _viewContainerRef = inject(ViewContainerRef);
     _translateService = inject(TranslateService);
-    destroy$ = new Subject();
-    /**
-     * Inicializa o componente, validando os inputs e configurando o filtro com debounce.
-     */
-    ngOnInit() {
-        this._validateInputs();
+    constructor() {
         this.filterForm
             .get('filter')
-            .valueChanges.pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$))
+            .valueChanges.pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed())
             .subscribe((value) => {
             this.filterValue.set(value);
         });
     }
-    /**
-     * Executa limpeza de recursos ao destruir o componente.
-     */
-    ngOnDestroy() {
-        this._destroyDropdownPortal();
-        if (this._portalHost) {
-            this._portalHost.dispose();
-            this._portalHost = null;
-        }
-        this.destroy$.next();
-        this.destroy$.complete();
+    ngOnInit() {
+        this._validateInputs();
     }
     /**
-     * Define o valor no componente vindo do formulário externo.
-     * @param value Valor atribuído pelo Angular forms.
+     * Define o valor selecionado do componente select.
+     * @param value O valor a ser definido. Pode ser um objeto do tipo `T`, um array de `T` (quando múltipla seleção está habilitada), ou `null`.
+     * @throws Se o modo múltiplo estiver ativado e o valor não for um array, lança um erro.
+     * @throws Se o modo múltiplo estiver desativado e o valor for um array, lança um erro.
+     * Este método mapeia o(s) valor(es) fornecido(s) para as opções internas do componente,
+     * garantindo que apenas opções válidas sejam selecionadas conforme o modo de seleção (único ou múltiplo).
      */
     writeValue(value) {
-        if (this.multiple()) {
+        if (value && this.multiple()) {
             if (Array.isArray(value)) {
-                const items = this.TIsPrimitive()
-                    ? value.map((v) => this._findOptionByPrimitiveValue(v)).filter(Boolean)
-                    : this.useRawValue()
-                        ? value
-                        : value.map((v) => this._findOptionByValue(v)).filter(Boolean);
-                this.values.set(items);
+                const mapped = value
+                    .map((val) => {
+                    return this.internalOptions().find((option) => {
+                        return JSON.stringify(option.data) === JSON.stringify(val);
+                    });
+                })
+                    .filter((option) => !!option);
+                this.values.set(mapped);
             }
             else {
-                this.values.set([]);
+                throw new Error('Value must be an array when "multiple" is true.');
             }
         }
         else {
-            const item = this.TIsPrimitive()
-                ? this._findOptionByPrimitiveValue(value)
-                : this.useRawValue()
-                    ? value
-                    : this._findOptionByValue(value);
-            this.value.set(item ?? null);
+            const optionValue = this.optionValue();
+            let mapped = null;
+            if (Array.isArray(value)) {
+                throw new Error('Value must not be an array when "multiple" is false.');
+            }
+            if (optionValue && value) {
+                mapped =
+                    this.internalOptions().find((option) => option.data[optionValue] === value[optionValue]) ?? null;
+            }
+            else {
+                mapped =
+                    this.internalOptions().find((option) => JSON.stringify(option.data) === JSON.stringify(value)) ??
+                        null;
+            }
+            this.value.set(mapped ?? null);
         }
     }
     /**
-     * Registra a função que será chamada quando o valor mudar.
-     * @param onChange Função callback.
+     * Registra uma função de callback que será chamada sempre que o valor do componente mudar.
+     * @param onChange Função de callback que recebe o novo valor selecionado ou null.
      */
     registerOnChange(onChange) {
         this._onChange = onChange;
     }
     /**
-     * Registra a função que será chamada quando o componente for "tocado".
-     * @param onTouched Função callback.
+     * Registra uma função de callback que será chamada quando o componente for tocado (perder o foco).
+     * @param onTouched Função de callback a ser executada quando o componente for marcado como "tocado".
      */
     registerOnTouched(onTouched) {
         this._onTouched = onTouched;
     }
     /**
      * Define o estado de desabilitado do componente.
-     * @param disabled Indica se o componente está desabilitado.
+     * @param disabled Indica se o componente deve ser desabilitado (`true`) ou habilitado (`false`).
      */
     setDisabledState(disabled) {
         this.disabled.set(disabled);
     }
     /**
-     * Alterna a exibição da lista de opções (dropdown).
+     * Alterna a exibição das opções do componente select.
+     * Se o componente estiver desabilitado, não realiza nenhuma ação.
+     * Caso contrário, inverte o estado de exibição das opções.
      */
     toggle() {
         if (this.disabled()) {
@@ -278,29 +262,24 @@ class SelectComponent {
         }
         const shouldOpen = !this.showOptions();
         this.showOptions.set(shouldOpen);
-        if (shouldOpen) {
-            setTimeout(() => {
-                this._createDropdownPortal();
-            });
-        }
-        else {
-            this._destroyDropdownPortal();
-        }
     }
     /**
-     * Seleciona ou desseleciona um item na lista.
-     * @param item Item a ser selecionado ou desmarcado.
+     * Seleciona um item no componente de seleção.
+     * @param item O item a ser selecionado ou desmarcado.
+     * Se o componente estiver desabilitado, a função retorna imediatamente.
+     * No modo múltiplo, adiciona ou remove o item da lista de valores selecionados.
+     * No modo simples, define o item como valor selecionado e fecha o dropdown.
+     * Sempre notifica as mudanças e marca o componente como tocado.
      */
     selectItem(item) {
         if (this.disabled()) {
             return;
         }
-        const getCompareValue = this._getCompareValueExtractor();
+        const optionValue = this.optionValue();
         if (this.multiple()) {
             const store = [...this.values()];
-            const itemValue = getCompareValue(item);
             const index = store.findIndex((selectedItem) => {
-                return getCompareValue(selectedItem) === itemValue;
+                return selectedItem === item;
             });
             if (index !== -1) {
                 store.splice(index, 1);
@@ -309,20 +288,25 @@ class SelectComponent {
                 store.push(item);
             }
             this.values.set(store);
-            const result = this.useRawValue() ? store : store.map((i) => this._getValueExtractor()(i));
+            const result = optionValue ? store.map((item) => item.data[optionValue]) : store;
             this._onChange(result);
         }
         else {
             this.value.set(item);
-            const result = this.useRawValue() ? item : this._getValueExtractor()(item);
+            const result = optionValue ? item.data[optionValue] : item.data;
             this._onChange(result);
             this._closeDropdown();
         }
         this._onTouched();
     }
     /**
-     * Limpa a seleção atual.
-     * @param event Evento do clique.
+     * Limpa o valor selecionado no componente select.
+     * Se o componente estiver desabilitado, não executa nenhuma ação.
+     * Para seleção múltipla, remove todos os valores selecionados e notifica a alteração.
+     * Para seleção única, define o valor como nulo e notifica a alteração.
+     * Fecha o dropdown e marca o componente como "tocado".
+     * Impede a propagação do evento do mouse.
+     * @param event Evento do mouse que acionou a limpeza da seleção.
      */
     clear(event) {
         if (this.disabled()) {
@@ -330,7 +314,7 @@ class SelectComponent {
         }
         if (this.multiple()) {
             this.values.set([]);
-            this._onChange(this._removeInternalProperties(this.values()));
+            this._onChange(this.values());
         }
         else {
             this.value.set(null);
@@ -341,25 +325,17 @@ class SelectComponent {
         event.stopPropagation();
     }
     /**
-     * Limpa o filtro aplicado à lista de opções.
+     * Limpa o filtro do formulário, resetando o campo 'filter' do formulário de filtro.
+     * Este método redefine o valor do campo 'filter' para seu estado inicial,
+     * removendo qualquer texto ou valor previamente inserido pelo usuário.
      */
     clearFilter() {
         this.filterForm.get('filter')?.reset();
     }
     /**
-     * Fecha o dropdown se o clique ocorrer fora do componente.
-     * @param event Evento do clique.
-     */
-    onDocumentClick(event) {
-        const clickTarget = event.target;
-        const clickedInsideComponent = this._elementRef.nativeElement.contains(clickTarget);
-        const dropdownInBody = document.querySelector('.dropdown-body-class')?.contains(clickTarget);
-        if (!clickedInsideComponent && !dropdownInBody) {
-            this._closeDropdown();
-        }
-    }
-    /**
-     * Fecha o dropdown em eventos de redimensionamento de janela.
+     * Manipula o evento de redimensionamento da janela.
+     * Fecha o dropdown de opções caso ele esteja visível ao redimensionar a janela.
+     * @param _ Evento de redimensionamento da janela (não utilizado).
      */
     onWindowResize(_) {
         if (this.showOptions()) {
@@ -367,15 +343,24 @@ class SelectComponent {
         }
     }
     /**
-     * Dispara a abertura/fechamento do dropdown ao clicar no container.
+     * Manipula o evento de clique no elemento container da seleção.
+     * Este método alterna o estado de exibição do componente select e,
+     * em seguida, define o foco no elemento container correspondente.
      */
     onContainerDivClick() {
         this.toggle();
         this._containerDiv()?.nativeElement.focus();
     }
     /**
-     * Trata eventos de teclado para navegação e seleção.
-     * @param event Evento do teclado.
+     * Manipula eventos de teclado para navegação e seleção de opções no componente select.
+     * - 'ArrowDown': Move o foco para a próxima opção disponível.
+     * - 'ArrowUp': Move o foco para a opção anterior.
+     * - 'Tab': Seleciona a opção atualmente focada e fecha o dropdown.
+     * - 'Enter': Seleciona a opção focada se o dropdown estiver aberto, ou alterna a abertura do dropdown.
+     * - 'Escape': Fecha o dropdown.
+     * - ' ': (barra de espaço) Seleciona a opção focada se o dropdown estiver aberto, ou alterna a abertura do dropdown.
+     * Previne o comportamento padrão do navegador quando necessário para garantir a navegação adequada pelo teclado.
+     * @param event O evento de teclado disparado pelo usuário.
      */
     onKeyDown(event) {
         const options = this.filteredOptions();
@@ -385,7 +370,7 @@ class SelectComponent {
         const _selectOption = () => {
             if (this.focusedIndex() >= 0 && this.focusedIndex() < options.length) {
                 event.preventDefault();
-                this.selectItem(options[this.focusedIndex()].data);
+                this.selectItem(options[this.focusedIndex()]);
             }
         };
         switch (event.key) {
@@ -413,166 +398,113 @@ class SelectComponent {
                 this._closeDropdown();
                 break;
             case ' ':
-                _selectOption();
+                event.preventDefault();
+                if (this.showOptions()) {
+                    _selectOption();
+                }
+                else {
+                    this.toggle();
+                }
                 break;
         }
     }
     /**
-     * Retorna o rótulo de exibição de uma opção.
-     * @param option Item da lista de opções.
-     * @returns Texto que será exibido no dropdown.
+     * Retorna o rótulo (label) associado a uma opção fornecida.
+     * @param option - A opção do tipo T para a qual o rótulo deve ser obtido.
+     * @returns O rótulo da opção como uma string.
      */
     getOptionLabel(option) {
         return this._getLabelFromOption(option);
     }
     /**
-     * Função usada para o trackBy no for do template.
-     * @param _ Índice do item.
-     * @param item Item da lista.
-     * @returns ID único da opção.
+     * Função de trackBy utilizada em diretivas *ngFor para otimizar a renderização de listas.
+     * Retorna o identificador único (`id`) de cada item do tipo `InternalDropdownOption<T>`.
+     * @param _ - Índice do item na lista (não utilizado).
+     * @param item - O item atual da lista do tipo `InternalDropdownOption<T>`.
+     * @returns O identificador único do item como uma string.
      */
     trackById(_, item) {
         return item.id;
     }
     /**
-     * Verifica se uma opção está selecionada.
-     * @param option Opção a ser verificada.
-     * @returns Verdadeiro se a opção estiver selecionada.
+     * Verifica se a opção fornecida está selecionada.
+     * @param option - A opção interna do dropdown a ser verificada.
+     * @returns `true` se a opção estiver selecionada, caso contrário `false`.
      */
     isOptionSelected(option) {
-        const getCompareValue = this._getCompareValueExtractor();
-        if (this.multiple()) {
-            const selectedValues = this.values().map(getCompareValue);
-            return selectedValues.includes(getCompareValue(option));
-        }
-        else {
-            const currentValue = this.value();
-            return currentValue !== null && getCompareValue(currentValue) === getCompareValue(option);
-        }
+        return (this.values().find((o) => {
+            return o === option;
+        }) !== undefined);
     }
     /**
-     * Alterna a seleção de todos os itens filtrados.
+     * Alterna a seleção de todos os itens disponíveis.
+     * Se o modo múltiplo estiver ativado, seleciona todos os itens filtrados que não são agrupadores
+     * caso nem todos estejam selecionados, ou limpa a seleção caso todos já estejam selecionados.
+     * Após a alteração, notifica a mudança de valor.
      */
     toggleSelectAll() {
         if (!this.multiple()) {
             return;
         }
-        const options = this.filteredOptions().filter((o) => !o.grouper);
+        const options = this.filteredOptions().filter((option) => !option.grouper);
         if (this.allSelected()) {
             this.values.set([]);
         }
         else {
-            this.values.set(options.map((o) => o.data));
-        }
-        this._onChange(this._removeInternalProperties(this.values()));
-    }
-    /**
-     * Procura e retorna uma opção com valor primitivo igual ao informado.
-     *
-     * @param value Valor primitivo (string, number ou boolean).
-     * @returns A opção correspondente, ou `null` se não encontrada.
-     */
-    _findOptionByPrimitiveValue(value) {
-        return this.internalOptions().find((opt) => opt.data === value)?.data ?? null;
-    }
-    /**
-     * Remove propriedades internas adicionadas pelo componente, retornando apenas os dados crus.
-     *
-     * Usado para garantir que apenas os objetos de dados reais sejam emitidos ao formulário,
-     * especialmente no modo múltiplo.
-     *
-     * @param value Valor armazenado internamente (com ou sem `InternalDropdownOption`).
-     * @returns Os dados "puros", sem propriedades adicionais.
-     */
-    _removeInternalProperties(value) {
-        if (this.TIsPrimitive()) {
-            return value;
+            this.values.set(options);
         }
-        return Array.isArray(value)
-            ? value.map((opt) => opt.data)
-            : value.data;
+        this._onChange(this.values());
     }
     /**
-     * Retorna o texto (label) correspondente a uma determinada opção.
-     * Usa a propriedade definida em `optionLabel`, ou tenta usar uma propriedade padrão (`label`).
-     *
-     * @param option A opção a ser exibida.
-     * @returns O texto legível da opção para exibição no componente.
+     * Retorna o rótulo (label) de uma opção fornecida.
+     * Este método utiliza a propriedade definida por `optionLabel` para extrair o valor do rótulo da opção.
+     * Caso `optionLabel` não esteja definido, retorna a representação em string da própria opção.
+     * @private
+     * @param option A opção da qual o rótulo será extraído.
+     * @returns O rótulo da opção como uma string.
      */
     _getLabelFromOption(option) {
-        if (['string', 'number', 'boolean'].includes(typeof option)) {
-            return String(option);
-        }
-        const labelKey = this.optionLabel();
-        if (!labelKey) {
-            return String(option.label ?? '');
-        }
-        return String(option[labelKey]);
+        const optionLabel = this.optionLabel();
+        return optionLabel ? String(option[optionLabel]) : String(option);
     }
     /**
-     * Valida os inputs obrigatórios do componente.
+     * Valida as entradas do componente de seleção.
+     * Este método verifica se as opções fornecidas são válidas. Caso as opções sejam objetos,
+     * garante que a propriedade `optionLabel` esteja definida, lançando um erro caso contrário.
+     * Se não houver opções, a validação é ignorada.
+     * @private
+     * @throws {Error} Se as opções forem objetos e `optionLabel` não estiver definido.
      */
     _validateInputs() {
-        if (!this.useRawValue() && !this.TIsPrimitive() && !this.optionValue()) {
-            throw new Error(`The 'optionValue' input must be provided for non-primitive options when useRawValue is false.`);
-        }
-        if (!this.TIsPrimitive() && !this.optionValue() && !this.dataKey()) {
-            throw new Error('Either the optionValue or dataKey input must be provided for non-primitive options.');
-        }
-        if (!this.TIsPrimitive() && !this.optionLabel()) {
-            throw new Error(`The 'optionLabel' input must be provided for non-primitive options.`);
-        }
-    }
-    _findOptionByValue(value) {
-        if (this.useRawValue()) {
-            return this.options().find((option) => option === value) ?? null;
-        }
-        const getValue = this._getValueExtractor();
-        return this.options().find((option) => getValue(option) === value) ?? null;
-    }
-    /**
-     * Extrai o valor final de uma opção, com base em `optionValue`.
-     * @returns Função que retorna o valor da opção.
-     */
-    _getValueExtractor() {
-        if (this.TIsPrimitive()) {
-            return (option) => option;
-        }
-        if (this.useRawValue()) {
-            return (option) => option;
-        }
-        const valueInput = this.optionValue();
-        if (valueInput) {
-            return (option) => option[valueInput];
-        }
-        throw new Error(`optionValue is required for non-primitive options.`);
-    }
-    /**
-     * Extrai o valor comparável de uma opção.
-     * @returns Função que retorna a chave de comparação.
-     */
-    _getCompareValueExtractor() {
-        if (this.TIsPrimitive()) {
-            return (option) => option;
+        const options = this.options();
+        if (!options.length) {
+            return;
         }
-        if (this.dataKey()) {
-            const key = this.dataKey();
-            return (option) => option[key];
+        const hasObjectOptions = options.some((option) => typeof option === 'object' && option !== null);
+        if (hasObjectOptions) {
+            if (!this.optionLabel()) {
+                throw new Error('The "optionLabel" input is required when options are objects.');
+            }
         }
-        return this._getValueExtractor();
     }
     /**
-     * Fecha o dropdown e redefine o foco.
+     * Fecha o dropdown de opções do componente select.
+     * Este método oculta as opções disponíveis e redefine o índice do item focado para -1,
+     * indicando que nenhum item está atualmente focado.
+     * @private
      */
     _closeDropdown() {
         this.showOptions.set(false);
-        this._destroyDropdownPortal();
         this.focusedIndex.set(-1);
     }
     /**
-     * Adiciona identificadores únicos às opções.
-     * @param options Lista original de opções.
-     * @returns Lista com IDs adicionados.
+     * Adiciona um identificador único a cada opção fornecida.
+     * Para cada item no array de opções, gera um objeto `InternalDropdownOption` contendo o dado original
+     * e um campo `id` único baseado no timestamp atual e no índice do item. Caso a opção seja um grupo
+     * (detectado pela presença de um array `items`), adiciona também a propriedade `grouper: true`.
+     * @private
+     * @param options Array de opções do tipo `T` a serem processadas.
+     * @returns Um array de objetos `InternalDropdownOption<T>` com identificadores únicos.
      */
     _addIdToOptions(options) {
         const timestamp = Date.now();
@@ -591,9 +523,14 @@ class SelectComponent {
         });
     }
     /**
-     * Converte uma estrutura agrupada em uma lista achatada.
-     * @param options Lista de opções com agrupadores.
-     * @returns Lista achatada de opções e grupos.
+     * Converte uma lista de opções possivelmente agrupadas em uma lista plana de opções.
+     * Para cada opção que possui um agrupador (`grouper`) e um array de itens em `data.items`,
+     * adiciona a opção do agrupador e, em seguida, adiciona cada item do grupo como uma nova opção
+     * individual, atribuindo um `id` único para cada item do grupo.
+     * Caso a opção não seja um agrupador, ela é adicionada diretamente ao resultado.
+     * @private
+     * @param options Lista de opções internas do dropdown, podendo conter agrupadores.
+     * @returns Lista plana de opções, incluindo agrupadores e seus itens expandidos.
      */
     _grouperToFlat(options) {
         const result = [];
@@ -613,8 +550,9 @@ class SelectComponent {
         return result;
     }
     /**
-     * Move o foco para a próxima opção.
-     * @param options Lista de opções visíveis.
+     * Move o foco para a próxima opção disponível na lista, ignorando opções que sejam agrupadores.
+     * @private
+     * @param options Lista de opções internas do dropdown.
      */
     _focusNextOption(options) {
         let nextIndex = this.focusedIndex() + 1;
@@ -627,8 +565,9 @@ class SelectComponent {
         }
     }
     /**
-     * Move o foco para a opção anterior.
-     * @param options Lista de opções visíveis.
+     * Move o foco para a opção anterior na lista, ignorando opções do tipo "grouper".
+     * @private
+     * @param options Lista de opções internas do dropdown.
      */
     _focusPreviousOption(options) {
         let prevIndex = this.focusedIndex() - 1;
@@ -641,7 +580,11 @@ class SelectComponent {
         }
     }
     /**
-     * Rola o dropdown até a opção atualmente focada.
+     * Rola a lista de opções para garantir que a opção atualmente focada esteja visível.
+     * Este método obtém o ID da opção atualmente focada a partir da lista de opções filtradas.
+     * Se um ID válido for encontrado, busca o elemento correspondente no DOM e utiliza
+     * `scrollIntoView` para rolar até a opção, alinhando-a ao bloco mais próximo.
+     * @private
      */
     _scrollToFocusedOption() {
         const id = this.filteredOptions()[this.focusedIndex()]?.id;
@@ -651,66 +594,14 @@ class SelectComponent {
         const el = document.getElementById(id);
         el?.scrollIntoView({ block: 'nearest' });
     }
-    /**
-     * Extrai o texto de uma opção, com base em `optionLabel`.
-     * @returns Função que retorna o label da opção.
-     */
-    _getLabelExtractor() {
-        if (this.TIsPrimitive()) {
-            return (option) => String(option);
-        }
-        const labelInput = this.optionLabel();
-        if (labelInput) {
-            return (option) => String(option[labelInput] ?? '');
-        }
-        else {
-            throw new Error(`optionLabel is required for non-primitive options.`);
-        }
-    }
-    /**
-     * Cria e posiciona dinamicamente o dropdown como portal.
-     */
-    _createDropdownPortal() {
-        if (!isPlatformBrowser(this.platformId)) {
-            return;
-        }
-        const container = this._containerDiv();
-        const template = this._dropdownTemplate();
-        if (!container || !template) {
-            return;
-        }
-        const dropElementRect = container.nativeElement.getBoundingClientRect();
-        this.dropTop = dropElementRect.bottom + window.scrollY;
-        this.dropLeft = dropElementRect.left + window.scrollX;
-        this.dropWidth = dropElementRect.width;
-        this._destroyDropdownPortal();
-        this._portalHost = new DomPortalOutlet(document.body);
-        const portal = new TemplatePortal(template, this._viewContainerRef);
-        this._portalHost.attach(portal);
-        const dropdownEl = document.querySelector('.dropdown-body-class');
-        if (dropdownEl) {
-            dropdownEl.style.position = 'absolute';
-            dropdownEl.style.top = `${this.dropTop + 4}px`;
-            dropdownEl.style.left = `${this.dropLeft}px`;
-            dropdownEl.style.width = `${this.dropWidth}px`;
-        }
-    }
-    /**
-     * Remove o portal do dropdown do DOM.
-     */
-    _destroyDropdownPortal() {
-        if (this._portalHost?.hasAttached()) {
-            this._portalHost.detach();
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SelectComponent, isStandalone: true, selector: "s-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, checkmark: { classPropertyName: "checkmark", publicName: "checkmark", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, useRawValue: { classPropertyName: "useRawValue", publicName: "useRawValue", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SelectComponent, isStandalone: true, selector: "s-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, checkmark: { classPropertyName: "checkmark", publicName: "checkmark", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showOptions: { classPropertyName: "showOptions", publicName: "showOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", showOptions: "showOptionsChange" }, host: { attributes: { "role": "combobox" }, listeners: { "window:resize": "onWindowResize($event)" }, properties: { "attr.aria-expanded": "showOptions()", "attr.aria-haspopup": "\"listbox\"", "attr.aria-owns": "showOptions() ? componentId + \"-listbox\" : null", "attr.aria-activedescendant": "focusedIndex() >= 0 ? filteredOptions()[focusedIndex()]?.id : null", "attr.aria-label": "placeholder() || \"Select option\"", "attr.aria-disabled": "disabled()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "_dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "_containerDiv", first: true, predicate: ["containerDiv"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #portalAnchor></ng-template>\n\n<div\n    #containerDiv\n    class=\"group flex w-full overflow-hidden rounded-[3px] border outline-1 outline-primary focus:outline\"\n    [ngClass]=\"{\n        'pointer-events-none border-grayscale-20 bg-grayscale-5': disabled(),\n        'pointer-events-auto border-grayscale-30 bg-grayscale-0': !disabled(),\n    }\"\n    [attr.aria-disabled]=\"disabled()\"\n    (click)=\"onContainerDivClick()\"\n    (keydown)=\"onKeyDown($event)\"\n    tabindex=\"0\"\n>\n    <span\n        class=\"flex flex-grow select-none px-3 py-[7px]\"\n        [ngClass]=\"{\n            'text-grayscale-90': !disabled() && !isClean(),\n            'text-grayscale-60': !disabled() && isClean(),\n            'text-grayscale-30': disabled(),\n        }\"\n    >\n        {{ print() || placeholder() }}\n    </span>\n\n    @if (!disabled() && showClear() && !isClean()) {\n        <button\n            class=\"mx-3\"\n            (click)=\"clear($event)\"\n        >\n            <i class=\"fas fa-times flex items-center\"></i>\n        </button>\n    }\n\n    <div\n        class=\"flex items-center border-l px-3 group-hover:bg-grayscale-10 group-focus:border-primary\"\n        [ngClass]=\"{ 'border-grayscale-20': disabled(), 'border-grayscale-30': !disabled() }\"\n    >\n        <i\n            class=\"fas\"\n            [ngClass]=\"{\n                'text-grayscale-30': disabled(),\n                'text-grayscale-90': !disabled(),\n                'fa-caret-down': !showOptions(),\n                'fa-caret-up': showOptions(),\n            }\"\n        ></i>\n    </div>\n</div>\n\n<ng-template #dropdownTemplate>\n    <div\n        class=\"dropdown-body-class z-[1000] rounded-[3px] bg-grayscale-0 py-1 shadow-md\"\n        [style.position]=\"'absolute'\"\n        [style.top.px]=\"dropTop\"\n        [style.left.px]=\"dropLeft\"\n        (click)=\"$event.stopPropagation()\"\n    >\n        @if (filter()) {\n            <div class=\"flex w-full items-center gap-3 px-3 py-1.5\">\n                @if (multiple()) {\n                    <s-checkbox\n                        #selectAllCheckbox\n                        [checked]=\"allSelected()\"\n                        [indeterminate]=\"selectAllIsIndeterminate()\"\n                        (checkedChange)=\"toggleSelectAll()\"\n                    ></s-checkbox>\n                }\n\n                <div class=\"relative flex h-[35px] grow\">\n                    <form\n                        class=\"flex grow\"\n                        [formGroup]=\"filterForm\"\n                    >\n                        <input\n                            class=\"w-full grow rounded-[3px] border border-grayscale-30 pl-2.5 pr-7 outline-1 outline-primary\"\n                            type=\"text\"\n                            formControlName=\"filter\"\n                            (click)=\"$event.stopPropagation()\"\n                        />\n                    </form>\n                    <i class=\"fas fa-search absolute right-2.5 top-2.5 text-grayscale-90\"></i>\n                </div>\n                <button (click)=\"clearFilter()\">\n                    <i class=\"fas fa-times flex items-center\"></i>\n                </button>\n            </div>\n        }\n\n        <!-- Virtual scroll -->\n        @if (virtualScroll() && filteredOptions().length > 10) {\n            <cdk-virtual-scroll-viewport\n                [itemSize]=\"virtualScrollItemSize()\"\n                class=\"h-52 overflow-auto\"\n            >\n                <ng-container *cdkVirtualFor=\"let option of filteredOptions(); trackBy: trackById\">\n                    <s-select-option\n                        [id]=\"option.id\"\n                        [label]=\"getOptionLabel(option.data)\"\n                        [multiple]=\"multiple()\"\n                        [checkmark]=\"checkmark()\"\n                        [isSelected]=\"isOptionSelected(option.data)\"\n                        (selected)=\"selectItem(option.data)\"\n                        [isGrouper]=\"option.grouper\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                    ></s-select-option>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n        }\n\n        <!-- Normal list -->\n        @if (!virtualScroll() || filteredOptions().length <= 10) {\n            <ul class=\"max-h-52 overflow-auto\">\n                @for (option of filteredOptions(); track option.id) {\n                    <s-select-option\n                        [id]=\"option.id\"\n                        [label]=\"getOptionLabel(option.data)\"\n                        [multiple]=\"multiple()\"\n                        [checkmark]=\"checkmark()\"\n                        [isSelected]=\"isOptionSelected(option.data)\"\n                        (selected)=\"selectItem(option.data)\"\n                        [isGrouper]=\"option.grouper ?? false\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                    ></s-select-option>\n                }\n            </ul>\n        }\n\n        @if (filteredOptions().length === 0) {\n            <span class=\"m-3 text-grayscale-60\">{{\n                emptyMessage() ?? 'platform.angular_components.no_records_found' | translate\n            }}</span>\n        }\n    </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: SelectOptionComponent, selector: "s-select-option", inputs: ["id", "label", "multiple", "checkmark", "isGrouper", "isFocused", "isSelected"], outputs: ["isSelectedChange", "selected"] }, { kind: "component", type: CheckboxComponent, selector: "s-checkbox", inputs: ["disabled", "checked", "indeterminate", "label"], outputs: ["disabledChange", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "_containerDiv", first: true, predicate: ["containerDiv"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    #containerDiv\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"select-container group flex h-[35px] w-full overflow-hidden rounded-[3px] border outline-1 outline-primary focus:outline\"\n    [ngClass]=\"{\n        'pointer-events-none border-grayscale-20 bg-grayscale-5': disabled(),\n        'pointer-events-auto border-grayscale-30 bg-grayscale-0': !disabled(),\n    }\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"showOptions()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-owns]=\"'dropdown-container-' + componentId\"\n    [attr.aria-labelledby]=\"componentId + '-label'\"\n    role=\"combobox\"\n    (click)=\"onContainerDivClick()\"\n    (keydown)=\"onKeyDown($event)\"\n    tabindex=\"0\"\n>\n    <span\n        class=\"flex flex-grow select-none px-3 py-[7px]\"\n        [ngClass]=\"{\n            'text-grayscale-90': !disabled() && !isClean(),\n            'text-grayscale-60': !disabled() && isClean(),\n            'text-grayscale-30': disabled(),\n        }\"\n    >\n        {{ print() || placeholder() }}\n    </span>\n\n    @if (!disabled() && showClear() && !isClean()) {\n        <button\n            class=\"mx-3\"\n            (click)=\"clear($event)\"\n        >\n            <i class=\"fas fa-times flex items-center\"></i>\n        </button>\n    }\n\n    <div\n        class=\"dropdown-container flex items-center border-l px-3 group-hover:bg-grayscale-10 group-focus:border-primary\"\n        [ngClass]=\"{ 'border-grayscale-20': disabled(), 'border-grayscale-30': !disabled() }\"\n    >\n        <i\n            class=\"fas\"\n            [ngClass]=\"{\n                'text-grayscale-30': disabled(),\n                'text-grayscale-90': !disabled(),\n                'fa-caret-down': !showOptions(),\n                'fa-caret-up': showOptions(),\n            }\"\n        ></i>\n    </div>\n</div>\n\n<ng-template\n    #dropdownTemplate\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"showOptions()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    (backdropClick)=\"showOptions.set(false)\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (detach)=\"showOptions.set(false)\"\n>\n    <div\n        [id]=\"'dropdown-container-' + componentId\"\n        class=\"dropdown-body-class z-[1000] rounded-[3px] bg-grayscale-0 py-1 shadow-md\"\n        (click)=\"$event.stopPropagation()\"\n        [style.width.px]=\"containerDiv.offsetWidth\"\n    >\n        @if (filter()) {\n            <div class=\"flex w-full items-center gap-3 px-3 py-1.5\">\n                @if (multiple()) {\n                    <s-checkbox\n                        #selectAllCheckbox\n                        [checked]=\"allSelected()\"\n                        [indeterminate]=\"selectAllIsIndeterminate()\"\n                        (checkedChange)=\"toggleSelectAll()\"\n                    ></s-checkbox>\n                }\n\n                <div class=\"relative flex h-[35px] grow\">\n                    <form\n                        class=\"flex grow\"\n                        [formGroup]=\"filterForm\"\n                    >\n                        <input\n                            class=\"w-full grow rounded-[3px] border border-grayscale-30 pl-2.5 pr-7 outline-1 outline-primary\"\n                            type=\"text\"\n                            formControlName=\"filter\"\n                            (click)=\"$event.stopPropagation()\"\n                        />\n                    </form>\n                    <i class=\"fas fa-search absolute right-2.5 top-2.5 text-grayscale-90\"></i>\n                </div>\n                <button (click)=\"clearFilter()\">\n                    <i class=\"fas fa-times flex items-center\"></i>\n                </button>\n            </div>\n        }\n\n        <!-- Virtual scroll -->\n        @if (virtualScroll() && filteredOptions().length > 10) {\n            <cdk-virtual-scroll-viewport\n                [itemSize]=\"virtualScrollItemSize()\"\n                class=\"h-52 overflow-auto\"\n            >\n                <ng-container *cdkVirtualFor=\"let option of filteredOptions(); trackBy: trackById\">\n                    <s-select-option\n                        [id]=\"option.id\"\n                        [label]=\"getOptionLabel(option.data)\"\n                        [multiple]=\"multiple()\"\n                        [checkmark]=\"checkmark()\"\n                        [isSelected]=\"isOptionSelected(option)\"\n                        (selected)=\"selectItem(option)\"\n                        [isGrouper]=\"option.grouper\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                    ></s-select-option>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n        }\n\n        <!-- Normal list -->\n        @if (!virtualScroll() || filteredOptions().length <= 10) {\n            <ul class=\"max-h-52 overflow-auto\">\n                @for (option of filteredOptions(); track option.id) {\n                    <s-select-option\n                        [id]=\"option.id\"\n                        [label]=\"getOptionLabel(option.data)\"\n                        [multiple]=\"multiple()\"\n                        [checkmark]=\"checkmark()\"\n                        [isSelected]=\"isOptionSelected(option)\"\n                        (selected)=\"selectItem(option)\"\n                        [isGrouper]=\"option.grouper ?? false\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                    ></s-select-option>\n                }\n            </ul>\n        }\n\n        @if (filteredOptions().length === 0) {\n            <span class=\"m-3 text-grayscale-60\">{{\n                emptyMessage() ?? 'platform.angular_components.no_records_found' | translate\n            }}</span>\n        }\n    </div>\n</ng-template>\n", styles: [":host.ng-dirty.ng-invalid{.dropdown-container,.select-container{border-color:#c13018;outline:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: SelectOptionComponent, selector: "s-select-option", inputs: ["id", "label", "multiple", "checkmark", "isGrouper", "isFocused", "isSelected"], outputs: ["isSelectedChange", "selected"] }, { kind: "component", type: CheckboxComponent, selector: "s-checkbox", inputs: ["disabled", "checked", "indeterminate", "label"], outputs: ["disabledChange", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -721,17 +612,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         SelectOptionComponent,
                         CheckboxComponent,
                         TranslateModule,
+                        OverlayModule,
                     ], host: {
-                        '(document:click)': 'onDocumentClick($event)',
                         '(window:resize)': 'onWindowResize($event)',
+                        '[attr.aria-expanded]': 'showOptions()',
+                        '[attr.aria-haspopup]': '"listbox"',
+                        '[attr.aria-owns]': 'showOptions() ? componentId + "-listbox" : null',
+                        '[attr.aria-activedescendant]': 'focusedIndex() >= 0 ? filteredOptions()[focusedIndex()]?.id : null',
+                        '[attr.aria-label]': 'placeholder() || "Select option"',
+                        '[attr.aria-disabled]': 'disabled()',
+                        role: 'combobox',
                     }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true,
                         },
-                    ], template: "<ng-template #portalAnchor></ng-template>\n\n<div\n    #containerDiv\n    class=\"group flex w-full overflow-hidden rounded-[3px] border outline-1 outline-primary focus:outline\"\n    [ngClass]=\"{\n        'pointer-events-none border-grayscale-20 bg-grayscale-5': disabled(),\n        'pointer-events-auto border-grayscale-30 bg-grayscale-0': !disabled(),\n    }\"\n    [attr.aria-disabled]=\"disabled()\"\n    (click)=\"onContainerDivClick()\"\n    (keydown)=\"onKeyDown($event)\"\n    tabindex=\"0\"\n>\n    <span\n        class=\"flex flex-grow select-none px-3 py-[7px]\"\n        [ngClass]=\"{\n            'text-grayscale-90': !disabled() && !isClean(),\n            'text-grayscale-60': !disabled() && isClean(),\n            'text-grayscale-30': disabled(),\n        }\"\n    >\n        {{ print() || placeholder() }}\n    </span>\n\n    @if (!disabled() && showClear() && !isClean()) {\n        <button\n            class=\"mx-3\"\n            (click)=\"clear($event)\"\n        >\n            <i class=\"fas fa-times flex items-center\"></i>\n        </button>\n    }\n\n    <div\n        class=\"flex items-center border-l px-3 group-hover:bg-grayscale-10 group-focus:border-primary\"\n        [ngClass]=\"{ 'border-grayscale-20': disabled(), 'border-grayscale-30': !disabled() }\"\n    >\n        <i\n            class=\"fas\"\n            [ngClass]=\"{\n                'text-grayscale-30': disabled(),\n                'text-grayscale-90': !disabled(),\n                'fa-caret-down': !showOptions(),\n                'fa-caret-up': showOptions(),\n            }\"\n        ></i>\n    </div>\n</div>\n\n<ng-template #dropdownTemplate>\n    <div\n        class=\"dropdown-body-class z-[1000] rounded-[3px] bg-grayscale-0 py-1 shadow-md\"\n        [style.position]=\"'absolute'\"\n        [style.top.px]=\"dropTop\"\n        [style.left.px]=\"dropLeft\"\n        (click)=\"$event.stopPropagation()\"\n    >\n        @if (filter()) {\n            <div class=\"flex w-full items-center gap-3 px-3 py-1.5\">\n                @if (multiple()) {\n                    <s-checkbox\n                        #selectAllCheckbox\n                        [checked]=\"allSelected()\"\n                        [indeterminate]=\"selectAllIsIndeterminate()\"\n                        (checkedChange)=\"toggleSelectAll()\"\n                    ></s-checkbox>\n                }\n\n                <div class=\"relative flex h-[35px] grow\">\n                    <form\n                        class=\"flex grow\"\n                        [formGroup]=\"filterForm\"\n                    >\n                        <input\n                            class=\"w-full grow rounded-[3px] border border-grayscale-30 pl-2.5 pr-7 outline-1 outline-primary\"\n                            type=\"text\"\n                            formControlName=\"filter\"\n                            (click)=\"$event.stopPropagation()\"\n                        />\n                    </form>\n                    <i class=\"fas fa-search absolute right-2.5 top-2.5 text-grayscale-90\"></i>\n                </div>\n                <button (click)=\"clearFilter()\">\n                    <i class=\"fas fa-times flex items-center\"></i>\n                </button>\n            </div>\n        }\n\n        <!-- Virtual scroll -->\n        @if (virtualScroll() && filteredOptions().length > 10) {\n            <cdk-virtual-scroll-viewport\n                [itemSize]=\"virtualScrollItemSize()\"\n                class=\"h-52 overflow-auto\"\n            >\n                <ng-container *cdkVirtualFor=\"let option of filteredOptions(); trackBy: trackById\">\n                    <s-select-option\n                        [id]=\"option.id\"\n                        [label]=\"getOptionLabel(option.data)\"\n                        [multiple]=\"multiple()\"\n                        [checkmark]=\"checkmark()\"\n                        [isSelected]=\"isOptionSelected(option.data)\"\n                        (selected)=\"selectItem(option.data)\"\n                        [isGrouper]=\"option.grouper\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                    ></s-select-option>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n        }\n\n        <!-- Normal list -->\n        @if (!virtualScroll() || filteredOptions().length <= 10) {\n            <ul class=\"max-h-52 overflow-auto\">\n                @for (option of filteredOptions(); track option.id) {\n                    <s-select-option\n                        [id]=\"option.id\"\n                        [label]=\"getOptionLabel(option.data)\"\n                        [multiple]=\"multiple()\"\n                        [checkmark]=\"checkmark()\"\n                        [isSelected]=\"isOptionSelected(option.data)\"\n                        (selected)=\"selectItem(option.data)\"\n                        [isGrouper]=\"option.grouper ?? false\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                    ></s-select-option>\n                }\n            </ul>\n        }\n\n        @if (filteredOptions().length === 0) {\n            <span class=\"m-3 text-grayscale-60\">{{\n                emptyMessage() ?? 'platform.angular_components.no_records_found' | translate\n            }}</span>\n        }\n    </div>\n</ng-template>\n" }]
-        }] });
+                    ], template: "<div\n    #containerDiv\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"select-container group flex h-[35px] w-full overflow-hidden rounded-[3px] border outline-1 outline-primary focus:outline\"\n    [ngClass]=\"{\n        'pointer-events-none border-grayscale-20 bg-grayscale-5': disabled(),\n        'pointer-events-auto border-grayscale-30 bg-grayscale-0': !disabled(),\n    }\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"showOptions()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-owns]=\"'dropdown-container-' + componentId\"\n    [attr.aria-labelledby]=\"componentId + '-label'\"\n    role=\"combobox\"\n    (click)=\"onContainerDivClick()\"\n    (keydown)=\"onKeyDown($event)\"\n    tabindex=\"0\"\n>\n    <span\n        class=\"flex flex-grow select-none px-3 py-[7px]\"\n        [ngClass]=\"{\n            'text-grayscale-90': !disabled() && !isClean(),\n            'text-grayscale-60': !disabled() && isClean(),\n            'text-grayscale-30': disabled(),\n        }\"\n    >\n        {{ print() || placeholder() }}\n    </span>\n\n    @if (!disabled() && showClear() && !isClean()) {\n        <button\n            class=\"mx-3\"\n            (click)=\"clear($event)\"\n        >\n            <i class=\"fas fa-times flex items-center\"></i>\n        </button>\n    }\n\n    <div\n        class=\"dropdown-container flex items-center border-l px-3 group-hover:bg-grayscale-10 group-focus:border-primary\"\n        [ngClass]=\"{ 'border-grayscale-20': disabled(), 'border-grayscale-30': !disabled() }\"\n    >\n        <i\n            class=\"fas\"\n            [ngClass]=\"{\n                'text-grayscale-30': disabled(),\n                'text-grayscale-90': !disabled(),\n                'fa-caret-down': !showOptions(),\n                'fa-caret-up': showOptions(),\n            }\"\n        ></i>\n    </div>\n</div>\n\n<ng-template\n    #dropdownTemplate\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"showOptions()\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    (backdropClick)=\"showOptions.set(false)\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (detach)=\"showOptions.set(false)\"\n>\n    <div\n        [id]=\"'dropdown-container-' + componentId\"\n        class=\"dropdown-body-class z-[1000] rounded-[3px] bg-grayscale-0 py-1 shadow-md\"\n        (click)=\"$event.stopPropagation()\"\n        [style.width.px]=\"containerDiv.offsetWidth\"\n    >\n        @if (filter()) {\n            <div class=\"flex w-full items-center gap-3 px-3 py-1.5\">\n                @if (multiple()) {\n                    <s-checkbox\n                        #selectAllCheckbox\n                        [checked]=\"allSelected()\"\n                        [indeterminate]=\"selectAllIsIndeterminate()\"\n                        (checkedChange)=\"toggleSelectAll()\"\n                    ></s-checkbox>\n                }\n\n                <div class=\"relative flex h-[35px] grow\">\n                    <form\n                        class=\"flex grow\"\n                        [formGroup]=\"filterForm\"\n                    >\n                        <input\n                            class=\"w-full grow rounded-[3px] border border-grayscale-30 pl-2.5 pr-7 outline-1 outline-primary\"\n                            type=\"text\"\n                            formControlName=\"filter\"\n                            (click)=\"$event.stopPropagation()\"\n                        />\n                    </form>\n                    <i class=\"fas fa-search absolute right-2.5 top-2.5 text-grayscale-90\"></i>\n                </div>\n                <button (click)=\"clearFilter()\">\n                    <i class=\"fas fa-times flex items-center\"></i>\n                </button>\n            </div>\n        }\n\n        <!-- Virtual scroll -->\n        @if (virtualScroll() && filteredOptions().length > 10) {\n            <cdk-virtual-scroll-viewport\n                [itemSize]=\"virtualScrollItemSize()\"\n                class=\"h-52 overflow-auto\"\n            >\n                <ng-container *cdkVirtualFor=\"let option of filteredOptions(); trackBy: trackById\">\n                    <s-select-option\n                        [id]=\"option.id\"\n                        [label]=\"getOptionLabel(option.data)\"\n                        [multiple]=\"multiple()\"\n                        [checkmark]=\"checkmark()\"\n                        [isSelected]=\"isOptionSelected(option)\"\n                        (selected)=\"selectItem(option)\"\n                        [isGrouper]=\"option.grouper\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                    ></s-select-option>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n        }\n\n        <!-- Normal list -->\n        @if (!virtualScroll() || filteredOptions().length <= 10) {\n            <ul class=\"max-h-52 overflow-auto\">\n                @for (option of filteredOptions(); track option.id) {\n                    <s-select-option\n                        [id]=\"option.id\"\n                        [label]=\"getOptionLabel(option.data)\"\n                        [multiple]=\"multiple()\"\n                        [checkmark]=\"checkmark()\"\n                        [isSelected]=\"isOptionSelected(option)\"\n                        (selected)=\"selectItem(option)\"\n                        [isGrouper]=\"option.grouper ?? false\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                    ></s-select-option>\n                }\n            </ul>\n        }\n\n        @if (filteredOptions().length === 0) {\n            <span class=\"m-3 text-grayscale-60\">{{\n                emptyMessage() ?? 'platform.angular_components.no_records_found' | translate\n            }}</span>\n        }\n    </div>\n</ng-template>\n", styles: [":host.ng-dirty.ng-invalid{.dropdown-container,.select-container{border-color:#c13018;outline:none}}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.