@seniorsistemas/angular-components 19.9.8 → 19.9.10

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

@@ -1,9 +1,10 @@
+import { LiveAnnouncer } from '@angular/cdk/a11y';
 import * as i4 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i2 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i0 from '@angular/core';
-import { input, model, output, Component, signal, computed, viewChild, inject, ElementRef, Renderer2, effect, forwardRef } from '@angular/core';
+import { input, model, output, Component, signal, computed, viewChild, ElementRef, inject, Renderer2, Injector, effect, afterNextRender, forwardRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
@@ -23,6 +24,28 @@ class SelectOptionComponent {
     isSelected = model.required();
     /** @description Classe do ícone de checkmark exibido quando a opção está selecionada. @default 'far fa-check' */
     checkIconClass = input('far fa-check');
+    /**
+     * @description Texto anunciado via `aria-describedby` informando a que grupo esta opção
+     * pertence. O agrupador visual tem `role="presentation"` (silencioso pro leitor de tela), e
+     * `select.component.ts` só passa este input na primeira opção de cada grupo, pra não repetir
+     * o anúncio em toda opção subsequente.
+     * @default null
+     */
+    groupAnnouncement = input(null);
+    /**
+     * @description Posição (1-based) desta opção dentro do conjunto navegável, exposta via
+     * `aria-posinset`. Necessário com `virtualScroll`, já que só uma janela de opções existe de
+     * fato no DOM a cada momento — sem isso, o leitor de tela tenta inferir a posição contando
+     * os `role="option"` irmãos presentes no DOM, o que fica errado numa lista virtualizada.
+     * @default null
+     */
+    posinset = input(null);
+    /**
+     * @description Tamanho total do conjunto navegável ao qual esta opção pertence, exposto via
+     * `aria-setsize`. Ver `posinset`.
+     * @default null
+     */
+    setsize = input(null);
     selected = output();
     onClick() {
         if (this.isGrouper()) {
@@ -31,11 +54,17 @@ class SelectOptionComponent {
         this.selected.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SelectOptionComponent, isStandalone: true, selector: "s-select-option", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: true, transformFunction: null }, checkmark: { classPropertyName: "checkmark", publicName: "checkmark", isSignal: true, isRequired: true, transformFunction: null }, isGrouper: { classPropertyName: "isGrouper", publicName: "isGrouper", isSignal: true, isRequired: true, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: true, transformFunction: null }, checkIconClass: { classPropertyName: "checkIconClass", publicName: "checkIconClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isSelected: "isSelectedChange", selected: "selected" }, ngImport: i0, template: "<div\n    [attr.id]=\"id()\"\n    [attr.role]=\"isGrouper() ? 'presentation' : 'option'\"\n    [attr.aria-selected]=\"isGrouper() ? null : isSelected()\"\n    class=\"flex select-none items-center gap-3 px-3 py-2\"\n    [class.hover:bg-grayscale-10]=\"!isGrouper()\"\n    [class.bg-grayscale-10]=\"!isGrouper() && isFocused()\"\n    (click)=\"onClick()\"\n    (keydown.enter)=\"onClick()\"\n    (keydown.space)=\"onClick(); $event.preventDefault()\"\n>\n    @if (!isGrouper() && checkmark() && !multiple() && isSelected()) {\n        <i\n            class=\"text-grayscale-60\"\n            [class]=\"checkIconClass()\"\n            aria-hidden=\"true\"\n        ></i>\n    }\n\n    @if (!isGrouper() && multiple()) {\n        <s-checkbox [checked]=\"isSelected()\"></s-checkbox>\n    }\n    <span\n        [class]=\"isSelected() ? 'text-[#428BCA]' : 'text-grayscale-90'\"\n        [class.font-bold]=\"isGrouper()\"\n    >\n        {{ label() }}\n    </span>\n</div>\n\n", dependencies: [{ kind: "component", type: CheckboxComponent, selector: "s-checkbox", inputs: ["disabled", "checked", "indeterminate", "label", "ariaLabel", "ariaLabelledBy"], outputs: ["disabledChange", "checkedChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SelectOptionComponent, isStandalone: true, selector: "s-select-option", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: true, transformFunction: null }, checkmark: { classPropertyName: "checkmark", publicName: "checkmark", isSignal: true, isRequired: true, transformFunction: null }, isGrouper: { classPropertyName: "isGrouper", publicName: "isGrouper", isSignal: true, isRequired: true, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: true, transformFunction: null }, checkIconClass: { classPropertyName: "checkIconClass", publicName: "checkIconClass", isSignal: true, isRequired: false, transformFunction: null }, groupAnnouncement: { classPropertyName: "groupAnnouncement", publicName: "groupAnnouncement", isSignal: true, isRequired: false, transformFunction: null }, posinset: { classPropertyName: "posinset", publicName: "posinset", isSignal: true, isRequired: false, transformFunction: null }, setsize: { classPropertyName: "setsize", publicName: "setsize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isSelected: "isSelectedChange", selected: "selected" }, host: { attributes: { "role": "presentation" } }, ngImport: i0, template: "<div\n    [attr.id]=\"id()\"\n    [attr.role]=\"isGrouper() ? 'presentation' : 'option'\"\n    [attr.aria-selected]=\"isGrouper() ? null : isSelected()\"\n    [attr.aria-describedby]=\"groupAnnouncement() ? id() + '-group' : null\"\n    [attr.aria-posinset]=\"isGrouper() ? null : posinset()\"\n    [attr.aria-setsize]=\"isGrouper() ? null : setsize()\"\n    class=\"flex select-none items-center gap-3 px-3 py-2\"\n    [class.hover:bg-grayscale-10]=\"!isGrouper()\"\n    [class.bg-grayscale-10]=\"!isGrouper() && isFocused()\"\n    (click)=\"onClick()\"\n    (keydown.enter)=\"onClick()\"\n    (keydown.space)=\"onClick(); $event.preventDefault()\"\n>\n    @if (!isGrouper() && checkmark() && !multiple() && isSelected()) {\n        <i\n            class=\"text-grayscale-60\"\n            [class]=\"checkIconClass()\"\n            aria-hidden=\"true\"\n        ></i>\n    }\n\n    @if (!isGrouper() && multiple()) {\n        <!-- aria-hidden: puramente visual \u2014 o clique borbulha pro (click) do pr\u00F3prio option acima,\n             e o estado de sele\u00E7\u00E3o j\u00E1 \u00E9 comunicado pelo aria-selected do option. Sem isso, esse\n             checkbox aninhado (sem aria-label, com seu pr\u00F3prio aria-checked independente) era um\n             segundo objeto de acessibilidade \"concorrente\" anunciando o mesmo estado \u2014 reportado\n             via NVDA: o leitor de tela anunciava esse checkbox (sem nome/posi\u00E7\u00E3o pr\u00F3pria) antes\n             da op\u00E7\u00E3o correta ser anunciada. -->\n        <s-checkbox\n            [checked]=\"isSelected()\"\n            aria-hidden=\"true\"\n        ></s-checkbox>\n    }\n    <span\n        [class]=\"isSelected() ? 'text-[#428BCA]' : 'text-grayscale-90'\"\n        [class.font-bold]=\"isGrouper()\"\n    >\n        {{ label() }}\n    </span>\n\n    @if (groupAnnouncement()) {\n        <!-- aria-hidden pra n\u00E3o entrar no nome acess\u00EDvel da op\u00E7\u00E3o (computado a partir do\n             conte\u00FAdo de texto vis\u00EDvel) \u2014 o `aria-describedby` acima ainda consegue ler seu\n             texto normalmente, j\u00E1 que essa leitura ignora deliberadamente o aria-hidden do\n             elemento referenciado. Sem isso, o texto seria anunciado duas vezes (uma como\n             parte do nome, outra como descri\u00E7\u00E3o). -->\n        <span\n            class=\"sr-only\"\n            [id]=\"id() + '-group'\"\n            aria-hidden=\"true\"\n        >{{ groupAnnouncement() }}</span>\n    }\n</div>\n\n", dependencies: [{ kind: "component", type: CheckboxComponent, selector: "s-checkbox", inputs: ["disabled", "checked", "indeterminate", "label", "ariaLabel", "ariaLabelledBy"], outputs: ["disabledChange", "checkedChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-select-option', standalone: true, imports: [CheckboxComponent], template: "<div\n    [attr.id]=\"id()\"\n    [attr.role]=\"isGrouper() ? 'presentation' : 'option'\"\n    [attr.aria-selected]=\"isGrouper() ? null : isSelected()\"\n    class=\"flex select-none items-center gap-3 px-3 py-2\"\n    [class.hover:bg-grayscale-10]=\"!isGrouper()\"\n    [class.bg-grayscale-10]=\"!isGrouper() && isFocused()\"\n    (click)=\"onClick()\"\n    (keydown.enter)=\"onClick()\"\n    (keydown.space)=\"onClick(); $event.preventDefault()\"\n>\n    @if (!isGrouper() && checkmark() && !multiple() && isSelected()) {\n        <i\n            class=\"text-grayscale-60\"\n            [class]=\"checkIconClass()\"\n            aria-hidden=\"true\"\n        ></i>\n    }\n\n    @if (!isGrouper() && multiple()) {\n        <s-checkbox [checked]=\"isSelected()\"></s-checkbox>\n    }\n    <span\n        [class]=\"isSelected() ? 'text-[#428BCA]' : 'text-grayscale-90'\"\n        [class.font-bold]=\"isGrouper()\"\n    >\n        {{ label() }}\n    </span>\n</div>\n\n" }]
+            args: [{ selector: 's-select-option', standalone: true, imports: [CheckboxComponent], host: {
+                        // Sem role="presentation" este elemento custom pode quebrar, em determinadas
+                        // combinações de navegador/AT, a relação ARIA pai/filho entre o role="listbox"
+                        // e o role="option" do template interno (ver WAI-ARIA APG: wrappers entre um
+                        // role pai e um role filho precisam de role="presentation"/"none").
+                        role: 'presentation',
+                    }, template: "<div\n    [attr.id]=\"id()\"\n    [attr.role]=\"isGrouper() ? 'presentation' : 'option'\"\n    [attr.aria-selected]=\"isGrouper() ? null : isSelected()\"\n    [attr.aria-describedby]=\"groupAnnouncement() ? id() + '-group' : null\"\n    [attr.aria-posinset]=\"isGrouper() ? null : posinset()\"\n    [attr.aria-setsize]=\"isGrouper() ? null : setsize()\"\n    class=\"flex select-none items-center gap-3 px-3 py-2\"\n    [class.hover:bg-grayscale-10]=\"!isGrouper()\"\n    [class.bg-grayscale-10]=\"!isGrouper() && isFocused()\"\n    (click)=\"onClick()\"\n    (keydown.enter)=\"onClick()\"\n    (keydown.space)=\"onClick(); $event.preventDefault()\"\n>\n    @if (!isGrouper() && checkmark() && !multiple() && isSelected()) {\n        <i\n            class=\"text-grayscale-60\"\n            [class]=\"checkIconClass()\"\n            aria-hidden=\"true\"\n        ></i>\n    }\n\n    @if (!isGrouper() && multiple()) {\n        <!-- aria-hidden: puramente visual \u2014 o clique borbulha pro (click) do pr\u00F3prio option acima,\n             e o estado de sele\u00E7\u00E3o j\u00E1 \u00E9 comunicado pelo aria-selected do option. Sem isso, esse\n             checkbox aninhado (sem aria-label, com seu pr\u00F3prio aria-checked independente) era um\n             segundo objeto de acessibilidade \"concorrente\" anunciando o mesmo estado \u2014 reportado\n             via NVDA: o leitor de tela anunciava esse checkbox (sem nome/posi\u00E7\u00E3o pr\u00F3pria) antes\n             da op\u00E7\u00E3o correta ser anunciada. -->\n        <s-checkbox\n            [checked]=\"isSelected()\"\n            aria-hidden=\"true\"\n        ></s-checkbox>\n    }\n    <span\n        [class]=\"isSelected() ? 'text-[#428BCA]' : 'text-grayscale-90'\"\n        [class.font-bold]=\"isGrouper()\"\n    >\n        {{ label() }}\n    </span>\n\n    @if (groupAnnouncement()) {\n        <!-- aria-hidden pra n\u00E3o entrar no nome acess\u00EDvel da op\u00E7\u00E3o (computado a partir do\n             conte\u00FAdo de texto vis\u00EDvel) \u2014 o `aria-describedby` acima ainda consegue ler seu\n             texto normalmente, j\u00E1 que essa leitura ignora deliberadamente o aria-hidden do\n             elemento referenciado. Sem isso, o texto seria anunciado duas vezes (uma como\n             parte do nome, outra como descri\u00E7\u00E3o). -->\n        <span\n            class=\"sr-only\"\n            [id]=\"id() + '-group'\"\n            aria-hidden=\"true\"\n        >{{ groupAnnouncement() }}</span>\n    }\n</div>\n\n" }]
         }] });
 
 /**
@@ -123,6 +152,17 @@ class SelectComponent {
         const ret = options.length > 0 && options.every((option) => selectedIds.includes(option.id));
         return ret;
     });
+    /**
+     * Label de acessibilidade do checkbox "Selecionar Todos", contextual ao estado atual —
+     * reportado: sem `ariaLabel` explícito, o leitor de tela só anunciava "checkbox, não
+     * marcado", sem indicar a ação (selecionar ou desmarcar todas as opções).
+     */
+    selectAllCheckboxAriaLabel = computed(() => {
+        const key = this.allSelected()
+            ? 'platform.angular_components.select_all_options_deselect_action'
+            : 'platform.angular_components.select_all_options_select_action';
+        return this._translateService.instant(key);
+    });
     /**
      * Retorna o item atualmente focado na lista de opções filtradas.
      * @returns O dado do item focado ou `null` caso nenhum item esteja focado.
@@ -237,24 +277,86 @@ class SelectComponent {
             return label.toLowerCase().includes(search);
         });
     });
+    /**
+     * Mapeia o id de cada opção que é a PRIMEIRA de um grupo (`group()` habilitado) ao texto
+     * anunciado via `aria-describedby` (ex.: "Agrupado por América do Sul"). O agrupador visual
+     * tem `role="presentation"` (silencioso pro leitor de tela) — reportado: ao navegar pra
+     * dentro de um grupo, nada indicava a que grupo a opção pertencia. Só a primeira opção de
+     * cada grupo recebe o anúncio, pra não repetir a cada opção subsequente do mesmo grupo.
+     */
+    groupAnnouncements = computed(() => {
+        const announcements = new Map();
+        if (!this.group()) {
+            return announcements;
+        }
+        let pendingGroupLabel = null;
+        for (const option of this.filteredOptions()) {
+            if (option.grouper) {
+                pendingGroupLabel = this.getOptionLabel(option.data);
+                continue;
+            }
+            if (pendingGroupLabel) {
+                announcements.set(option.id, this._translateService.instant('platform.angular_components.select_grouped_by', {
+                    group: pendingGroupLabel,
+                }));
+                pendingGroupLabel = null;
+            }
+        }
+        return announcements;
+    });
+    /**
+     * Mapeia o id de cada opção à sua posição (`posinset`) e ao tamanho total do conjunto
+     * (`setsize`), ignorando agrupadores (que não são `role="option"`). Necessário porque, com
+     * `virtualScroll`, só uma janela de opções existe de fato no DOM a cada momento — sem
+     * `aria-posinset`/`aria-setsize` explícitos, o leitor de tela tenta inferir a posição
+     * contando os `role="option"` irmãos presentes no DOM, o que fica errado pra uma lista
+     * virtualizada (reportado via NVDA: ao selecionar a 3ª opção de uma lista de ~240 países
+     * com `virtualScroll`, o anúncio de posição "voltava" pra 1 antes de se corrigir).
+     */
+    optionPositions = computed(() => {
+        const positions = new Map();
+        const nonGrouperOptions = this.filteredOptions().filter((option) => !option.grouper);
+        const setsize = nonGrouperOptions.length;
+        nonGrouperOptions.forEach((option, index) => {
+            positions.set(option.id, { posinset: index + 1, setsize });
+        });
+        return positions;
+    });
     filterForm = new FormGroup({
         filter: new FormControl('', { nonNullable: true }),
     });
     _containerDiv = viewChild('containerDiv');
     _filterInput = viewChild('filterInput');
-    _selectAllCheckbox = viewChild('selectAllCheckbox');
+    // `read: ElementRef` é obrigatório aqui: `#selectAllCheckbox` está num elemento de
+    // componente (`<s-checkbox>`), então sem isso o viewChild resolve pra instância do
+    // `CheckboxComponent` (que não tem `.nativeElement`), não pro `ElementRef` do host —
+    // resultado, o foco automático no checkbox ao abrir (`toggle()`) nunca funcionava.
+    _selectAllCheckbox = viewChild('selectAllCheckbox', {
+        read: ElementRef,
+    });
+    _dropdownPanel = viewChild('dropdownPanel');
     _onChange = () => { };
     _onTouched = () => { };
     _clickableLabel = null;
     _translateService = inject(TranslateService);
     _hostRef = inject(ElementRef);
     _renderer = inject(Renderer2);
+    _injector = inject(Injector);
+    _liveAnnouncer = inject(LiveAnnouncer);
     constructor() {
         this.filterForm
             .get('filter')
             .valueChanges.pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed())
             .subscribe((value) => {
             this.filterValue.set(value);
+            // `focusedIndex` é um índice cru dentro de `filteredOptions()` — ao digitar um
+            // filtro que reduz a lista (ou limpar o filtro, que a aumenta de volta), o índice
+            // antigo passa a apontar pra uma posição inválida ou pra uma opção completamente
+            // diferente da que estava focada antes. Reportado via NVDA: sem resetar aqui,
+            // ArrowDown/Espaço/Enter viravam no-op silencioso sempre que o índice ficava fora
+            // dos limites da nova lista filtrada — o usuário só continuava ouvindo o anúncio
+            // da ÚLTIMA seleção válida, sem nenhum feedback de que a tecla não fez nada.
+            this.focusedIndex.set(-1);
         });
         // Efeito para tentar aplicar valor pendente quando options mudar.
         // A escrita em value/values é necessária para sincronizar o ControlValueAccessor.
@@ -368,7 +470,7 @@ class SelectComponent {
                 // Quando há filtro com múltipla seleção, foco vai para o checkbox primeiro;
                 // caso contrário, vai direto para o input de filtro.
                 // O foco é movido após a renderização do overlay.
-                setTimeout(() => {
+                afterNextRender(() => {
                     if (this.multiple()) {
                         const checkboxHost = this._selectAllCheckbox()?.nativeElement;
                         const focusable = checkboxHost?.querySelector('[tabindex]');
@@ -377,7 +479,7 @@ class SelectComponent {
                     else {
                         this._filterInput()?.nativeElement.focus();
                     }
-                });
+                }, { injector: this._injector });
             }
             else {
                 this._focusSelectedOption();
@@ -402,6 +504,7 @@ class SelectComponent {
             const index = store.findIndex((selectedItem) => {
                 return selectedItem === item;
             });
+            const isNowSelected = index === -1;
             if (index !== -1) {
                 store.splice(index, 1);
             }
@@ -411,16 +514,41 @@ class SelectComponent {
             this.values.set(store);
             const result = optionValue ? store.map((item) => item.data[optionValue]) : store;
             this._onChange(result);
+            this._announceOptionToggle(item, isNowSelected);
+            // Acompanha o item que acabou de ser selecionado/desmarcado via aria-activedescendant
+            // — sem isso, clicar com o mouse (em vez de navegar por teclado) nunca move o
+            // "foco" virtual, que fica parado onde estava (ou nulo), e o leitor de tela passa a
+            // anunciar sempre a mesma opção (a primeira, ou a última alcançada por teclado) em
+            // vez da que foi de fato clicada.
+            const itemIndex = this.filteredOptions().findIndex((option) => option.id === item.id);
+            if (itemIndex >= 0) {
+                this.focusedIndex.set(itemIndex);
+            }
         }
         else {
             this.value.set(item);
             const result = optionValue ? item.data[optionValue] : item.data;
             this._onChange(result);
+            this._announceOptionToggle(item, true);
+            // Devolve o foco pro container só se ele estava dentro do painel (ex.: opção
+            // escolhida com o filtro focado) — ver `_closeDropdown()`.
             this._closeDropdown();
-            this._containerDiv()?.nativeElement.focus();
         }
         this._onTouched();
     }
+    /**
+     * Anuncia via `LiveAnnouncer` a opção selecionada/desmarcada. Necessário porque, na prática,
+     * nem todo navegador/leitor de tela anuncia sozinho a mudança de `aria-selected` da opção
+     * apontada por `aria-activedescendant` (reportado via NVDA no Chrome: nenhuma mensagem era
+     * ouvida ao selecionar).
+     */
+    _announceOptionToggle(item, isNowSelected) {
+        const key = isNowSelected
+            ? 'platform.angular_components.select_option_selected'
+            : 'platform.angular_components.select_option_deselected';
+        const message = this._translateService.instant(key, { option: this.getOptionLabel(item.data) });
+        void this._liveAnnouncer.announce(message, 'polite');
+    }
     /**
      * Limpa o valor selecionado no componente select.
      * Se o componente estiver desabilitado, não executa nenhuma ação.
@@ -437,14 +565,25 @@ class SelectComponent {
         if (this.multiple()) {
             this.values.set([]);
             this._onChange(this.values());
+            void this._liveAnnouncer.announce(this._translateService.instant('platform.angular_components.select_all_options_cleared'), 'polite');
         }
         else {
+            const removedLabel = this.value() ? this.getOptionLabel(this.value().data) : null;
             this.value.set(null);
             this._onChange(this.value());
+            if (removedLabel) {
+                void this._liveAnnouncer.announce(this._translateService.instant('platform.angular_components.select_option_removed', {
+                    option: removedLabel,
+                }), 'polite');
+            }
         }
         this._closeDropdown();
         this._onTouched();
         event.stopPropagation();
+        // O botão "Limpar" só é renderizado enquanto `!isClean()` — ao chamar `clear()` ele
+        // deixa de existir no DOM na mesma re-renderização em que acabou de ser clicado,
+        // levando o foco junto pra `document.body` (perdido) se nada o resgatar explicitamente.
+        afterNextRender(() => this._containerDiv()?.nativeElement.focus(), { injector: this._injector });
     }
     /**
      * Limpa o filtro do formulário, resetando o campo 'filter' do formulário de filtro.
@@ -477,8 +616,14 @@ class SelectComponent {
      * Manipula eventos de teclado no input de filtro do overlay.
      * - 'ArrowDown': Move o foco para a primeira opção da lista.
      * - 'ArrowUp': Move o foco para a última opção da lista.
+     * - 'Tab' (sem Shift): Move o foco para a próxima opção da lista, em vez de deixar o Tab
+     *   nativo tentar sair do overlay (as opções não são elementos tabuláveis, então o Tab
+     *   nativo "vazava" o foco pra fora do painel sem nunca alcançar a lista).
      * - 'Escape': Fecha o dropdown e retorna o foco ao combobox.
-     * - 'Enter': Seleciona a opção focada, se houver.
+     * - 'Enter' / 'Espaço': Seleciona a opção focada, se houver. Espaço só é interceptado
+     *   quando já existe uma opção com foco virtual (`focusedIndex() >= 0`) — sem uma opção
+     *   focada, o espaço é deixado passar pro comportamento nativo do `<input>` (digitar um
+     *   espaço, necessário pra buscas com múltiplas palavras).
      * @param event O evento de teclado disparado no input de filtro.
      */
     onFilterKeyDown(event) {
@@ -511,7 +656,6 @@ class SelectComponent {
                 event.preventDefault();
                 event.stopPropagation();
                 this._closeDropdown();
-                this._containerDiv()?.nativeElement.focus();
                 break;
             case 'Enter':
                 if (this.focusedIndex() >= 0 && this.focusedIndex() < options.length) {
@@ -519,13 +663,41 @@ class SelectComponent {
                     this.selectItem(options[this.focusedIndex()]);
                 }
                 break;
+            case ' ':
+                if (this.focusedIndex() >= 0 && this.focusedIndex() < options.length) {
+                    event.preventDefault();
+                    this.selectItem(options[this.focusedIndex()]);
+                }
+                break;
+            case 'Tab':
+                if (!event.shiftKey) {
+                    event.preventDefault();
+                    this._focusNextOption(options);
+                }
+                break;
+        }
+    }
+    /**
+     * Manipula o evento de teclado no botão "Limpar filtro" do overlay.
+     * É o último controle real (tabulável) do overlay antes da lista de opções — sem
+     * interceptar o Tab aqui, ele "vazava" o foco pra fora do painel sem nunca alcançar a
+     * lista, já que as opções não são elementos tabuláveis (foco virtual via
+     * aria-activedescendant).
+     * @param event O evento de teclado disparado no botão.
+     */
+    onClearFilterButtonKeyDown(event) {
+        if (event.key === 'Tab' && !event.shiftKey) {
+            event.preventDefault();
+            this._focusNextOption(this.filteredOptions());
         }
     }
     /**
      * 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.
+     * - 'Tab'/'Shift+Tab': Com o dropdown aberto e sem filtro, navega entre as opções (mesmo
+     *   efeito de ArrowDown/ArrowUp) em vez de fechar o painel e "vazar" o foco pro próximo
+     *   campo da página sem o usuário nunca ter alcançado as opções.
      * - '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.
@@ -560,12 +732,26 @@ class SelectComponent {
                 }
                 break;
             case 'Tab':
-                // Quando há filtro aberto, Tab deve navegar para dentro do overlay (não fechar)
-                if (this.showOptions() && this.filter()) {
-                    return;
+                if (this.showOptions()) {
+                    if (this.filter()) {
+                        // Com filtro, Tab navega pelos controles reais do overlay (checkbox →
+                        // input → botão "Limpar filtro"); a partir do último deles, o próprio
+                        // controle intercepta o Tab pra entrar na lista — ver onFilterKeyDown /
+                        // onClearFilterButtonKeyDown.
+                        return;
+                    }
+                    // Sem filtro, o foco DOM nunca sai do combobox (navegação virtual via
+                    // aria-activedescendant) — reportado: sem interceptar, Tab fechava o
+                    // dropdown e o foco "vazava" pro próximo campo da página sem o usuário
+                    // nunca ter alcançado as opções. Tab passa a funcionar como ArrowDown/Up.
+                    event.preventDefault();
+                    if (event.shiftKey) {
+                        this._focusPreviousOption(options);
+                    }
+                    else {
+                        this._focusNextOption(options);
+                    }
                 }
-                _selectOption();
-                this._closeDropdown();
                 break;
             case 'Enter':
                 if (this.showOptions()) {
@@ -601,6 +787,31 @@ class SelectComponent {
     getOptionLabel(option) {
         return this._getLabelFromOption(option);
     }
+    /**
+     * Retorna o texto de anúncio de grupo (ex.: "Agrupado por América do Sul") pra uma opção,
+     * caso ela seja a primeira do seu grupo — ver `groupAnnouncements`.
+     * @param optionId Id da opção interna.
+     * @returns O texto de anúncio, ou `null` se a opção não for a primeira do grupo.
+     */
+    groupAnnouncementFor(optionId) {
+        return this.groupAnnouncements().get(optionId) ?? null;
+    }
+    /**
+     * Retorna a posição (1-based) de uma opção dentro do conjunto navegável — ver `optionPositions`.
+     * @param optionId Id da opção interna.
+     * @returns A posição, ou `null` se a opção não for encontrada (ex.: é um agrupador).
+     */
+    optionPosinsetFor(optionId) {
+        return this.optionPositions().get(optionId)?.posinset ?? null;
+    }
+    /**
+     * Retorna o tamanho total do conjunto navegável ao qual uma opção pertence — ver `optionPositions`.
+     * @param optionId Id da opção interna.
+     * @returns O tamanho total, ou `null` se a opção não for encontrada (ex.: é um agrupador).
+     */
+    optionSetsizeFor(optionId) {
+        return this.optionPositions().get(optionId)?.setsize ?? null;
+    }
     /**
      * Função de trackBy utilizada em blocos @for para otimizar a renderização de listas.
      * Retorna o identificador único (`id`) de cada item do tipo `InternalDropdownOption<T>`.
@@ -634,12 +845,27 @@ class SelectComponent {
         const options = this.filteredOptions().filter((option) => !option.grouper);
         if (this.allSelected()) {
             this.values.set([]);
+            this._announceSelectAllToggle(false, 0);
         }
         else {
             this.values.set(options);
+            this._announceSelectAllToggle(true, options.length);
         }
         this._onChange(this.values());
     }
+    /**
+     * Anuncia via `LiveAnnouncer` o resultado de "Selecionar Todos"/"Limpar Todos". Necessário
+     * porque o checkbox que dispara a ação tem foco real e anuncia seu próprio `aria-checked`
+     * normalmente, mas as N opções afetadas (que não estão focadas) não — ao contrário do toggle
+     * de uma opção individual, cujo `aria-selected` já é lido pelo leitor de tela porque ela é o
+     * elemento apontado por `aria-activedescendant` no momento da mudança.
+     */
+    _announceSelectAllToggle(isNowSelected, count) {
+        const message = isNowSelected
+            ? this._translateService.instant('platform.angular_components.count_items_selected', { count })
+            : this._translateService.instant('platform.angular_components.select_all_options_cleared');
+        void this._liveAnnouncer.announce(message, 'polite');
+    }
     /**
      * 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.
@@ -735,18 +961,37 @@ class SelectComponent {
     /**
      * 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
+     * indicando que nenhum item está atualmente focado. Se o foco estava dentro do painel
+     * sendo fechado (ex.: campo de filtro), devolve o foco pro container/combobox — nunca
+     * força o foco se ele já estiver em outro lugar (ex.: opção escolhida via clique do mouse
+     * sem filtro, onde o foco DOM nunca saiu do combobox por causa do aria-activedescendant).
+     * `protected` (não `private`) porque também é chamado a partir do template
+     * (`backdropClick`/`detach` do `cdkConnectedOverlay`).
      */
     _closeDropdown() {
+        const panelElement = this._dropdownPanel()?.nativeElement;
         this.showOptions.set(false);
         this.focusedIndex.set(-1);
+        const focusIsInsidePanel = panelElement != null && document.activeElement instanceof Node && panelElement.contains(document.activeElement);
+        if (!focusIsInsidePanel) {
+            return;
+        }
+        afterNextRender(() => this._containerDiv()?.nativeElement.focus(), { injector: this._injector });
     }
     /**
      * 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`.
+     * e um campo `id` único baseado no `componentId` desta instância, 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`.
+     *
+     * O `componentId` é obrigatório no prefixo: `Date.now()` sozinho tem resolução de apenas 1ms, e duas
+     * instâncias de `s-select` na mesma página frequentemente inicializam dentro do mesmo milissegundo
+     * (confirmado via teste manual — reportado via NVDA: uma opção já selecionada em OUTRO `s-select` da
+     * página era anunciada em vez da opção de fato clicada). Sem o `componentId`, os ids colidiam entre
+     * instâncias diferentes (`id_<mesmo-timestamp>_0` em ambas), e `aria-activedescendant`/`getElementById`
+     * resolviam pro elemento errado — de outro select. O timestamp continua no id (além do `componentId`)
+     * pra manter ids únicos entre recomputações da MESMA instância quando `options()` muda de referência.
      * @private
      * @param options Array de opções do tipo `T` a serem processadas.
      * @returns Um array de objetos `InternalDropdownOption<T>` com identificadores únicos.
@@ -757,13 +1002,13 @@ class SelectComponent {
             if (this.group() && Array.isArray(option.items)) {
                 return {
                     data: option,
-                    id: `id_${timestamp}_${index++}`,
+                    id: `${this.componentId}_id_${timestamp}_${index++}`,
                     grouper: true,
                 };
             }
             return {
                 data: option,
-                id: `id_${timestamp}_${index++}`,
+                id: `${this.componentId}_id_${timestamp}_${index++}`,
             };
         });
     }
@@ -862,7 +1107,7 @@ class SelectComponent {
         }
         this.focusedIndex.set(selectedIndex);
         if (selectedIndex >= 0) {
-            setTimeout(() => this._scrollToFocusedOption());
+            afterNextRender(() => this._scrollToFocusedOption(), { injector: this._injector });
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -872,7 +1117,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "_containerDiv", first: true, predicate: ["containerDiv"], descendants: true, isSignal: true }, { propertyName: "_filterInput", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }, { propertyName: "_selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], 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    [class.pointer-events-none]=\"disabled()\"\n    [class.border-grayscale-20]=\"disabled()\"\n    [class.bg-grayscale-5]=\"disabled()\"\n    [class.pointer-events-auto]=\"!disabled()\"\n    [class.border-grayscale-30]=\"!disabled()\"\n    [class.bg-grayscale-0]=\"!disabled()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"showOptions()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"componentId + '-listbox'\"\n    [attr.aria-owns]=\"showOptions() ? componentId + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"showOptions() ? focusedOptionId() : null\"\n    role=\"combobox\"\n    [id]=\"componentId + '-combobox'\"\n    (click)=\"onContainerDivClick()\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"resolvedAriaLabelledBy() || null\"\n>\n    <span\n        class=\"flex flex-grow select-none px-3 py-[7px]\"\n        [class.text-grayscale-90]=\"!disabled() && !isClean()\"\n        [class.text-grayscale-60]=\"!disabled() && isClean()\"\n        [class.text-grayscale-30]=\"disabled()\"\n    >\n        {{ print() || placeholder() }}\n    </span>\n\n    @if (!disabled() && showClear() && !isClean()) {\n        <button\n            class=\"mx-3\"\n            (click)=\"clear($event)\"\n            [attr.aria-label]=\"'platform.angular_components.aria_clear_selection' | translate\"\n        >\n            <i\n                class=\"fas fa-times flex items-center\"\n                aria-hidden=\"true\"\n            ></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        [class.border-grayscale-20]=\"disabled()\"\n        [class.border-grayscale-30]=\"!disabled()\"\n    >\n        <i\n            class=\"fas\"\n            aria-hidden=\"true\"\n            [class.text-grayscale-30]=\"disabled()\"\n            [class.text-grayscale-90]=\"!disabled()\"\n            [class.fa-caret-down]=\"!showOptions()\"\n            [class.fa-caret-up]=\"showOptions()\"\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]=\"componentId + '-listbox'\"\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        [attr.aria-multiselectable]=\"multiple() ? true : null\"\n        [@visibilityChanged]\n        role=\"listbox\"\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 w-full grow\"\n                        [formGroup]=\"filterForm\"\n                    >\n                        <input\n                            #filterInput\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                            (keydown)=\"onFilterKeyDown($event)\"\n                            [attr.aria-label]=\"'platform.angular_components.filter_options' | translate\"\n                            [attr.aria-controls]=\"componentId + '-listbox'\"\n                            [attr.aria-activedescendant]=\"focusedOptionId()\"\n                            autocomplete=\"off\"\n                        />\n                    </form>\n                    <i\n                        class=\"fas fa-search absolute right-2.5 top-2.5 text-grayscale-90\"\n                        aria-hidden=\"true\"\n                    ></i>\n                </div>\n                <button\n                    (click)=\"clearFilter()\"\n                    [attr.aria-label]=\"'platform.angular_components.clear_filter' | translate\"\n                >\n                    <i\n                        class=\"fas fa-times flex items-center\"\n                        aria-hidden=\"true\"\n                    ></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                        [checkIconClass]=\"checkIconClass()\"\n                        [isSelected]=\"isOptionSelected(option)\"\n                        (selected)=\"selectItem(option)\"\n                        [isGrouper]=\"option.grouper ?? false\"\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                        [checkIconClass]=\"checkIconClass()\"\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\n", styles: [":host.ng-dirty.ng-invalid{.dropdown-container,.select-container{border-color:#c13018;outline:none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.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", "checkIconClass"], outputs: ["isSelectedChange", "selected"] }, { kind: "component", type: CheckboxComponent, selector: "s-checkbox", inputs: ["disabled", "checked", "indeterminate", "label", "ariaLabel", "ariaLabelledBy"], outputs: ["disabledChange", "checkedChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i4.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: i4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], animations: [
+        ], viewQueries: [{ propertyName: "_containerDiv", first: true, predicate: ["containerDiv"], descendants: true, isSignal: true }, { propertyName: "_filterInput", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }, { propertyName: "_selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_dropdownPanel", first: true, predicate: ["dropdownPanel"], 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-2 outline-[var(--s-focus-ring-color,#0090ff)] outline-offset-[-2px] focus-visible:outline\"\n    [class.pointer-events-none]=\"disabled()\"\n    [class.border-grayscale-20]=\"disabled()\"\n    [class.bg-grayscale-5]=\"disabled()\"\n    [class.pointer-events-auto]=\"!disabled()\"\n    [class.border-grayscale-30]=\"!disabled()\"\n    [class.bg-grayscale-0]=\"!disabled()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"showOptions()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"componentId + '-listbox'\"\n    [attr.aria-owns]=\"showOptions() ? componentId + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"showOptions() ? focusedOptionId() : null\"\n    role=\"combobox\"\n    [id]=\"componentId + '-combobox'\"\n    (click)=\"onContainerDivClick()\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"resolvedAriaLabelledBy() || null\"\n>\n    <span\n        class=\"flex flex-grow select-none px-3 py-[7px]\"\n        [class.text-grayscale-90]=\"!disabled() && !isClean()\"\n        [class.text-grayscale-60]=\"!disabled() && isClean()\"\n        [class.text-grayscale-30]=\"disabled()\"\n    >\n        {{ print() || placeholder() }}\n    </span>\n\n    @if (!disabled() && showClear() && !isClean()) {\n        <button\n            class=\"mx-3\"\n            (click)=\"clear($event)\"\n            (keydown)=\"$event.stopPropagation()\"\n            [attr.aria-label]=\"'platform.angular_components.aria_clear_selection' | translate\"\n        >\n            <i\n                class=\"fas fa-times flex items-center\"\n                aria-hidden=\"true\"\n            ></i>\n        </button>\n    }\n\n    <div\n        class=\"dropdown-container flex items-center border-l px-3 group-hover:bg-grayscale-10\"\n        [class.border-grayscale-20]=\"disabled()\"\n        [class.border-grayscale-30]=\"!disabled()\"\n    >\n        <i\n            class=\"fas\"\n            aria-hidden=\"true\"\n            [class.text-grayscale-30]=\"disabled()\"\n            [class.text-grayscale-90]=\"!disabled()\"\n            [class.fa-caret-down]=\"!showOptions()\"\n            [class.fa-caret-up]=\"showOptions()\"\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)=\"_closeDropdown()\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (detach)=\"_closeDropdown()\"\n>\n    <div\n        #dropdownPanel\n        [id]=\"componentId + '-listbox'\"\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        [attr.aria-multiselectable]=\"multiple() ? true : null\"\n        [@visibilityChanged]\n        role=\"listbox\"\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                        [ariaLabel]=\"selectAllCheckboxAriaLabel()\"\n                        (checkedChange)=\"toggleSelectAll()\"\n                    ></s-checkbox>\n                }\n\n                <div class=\"relative flex h-[35px] grow\">\n                    <form\n                        class=\"flex w-full grow\"\n                        [formGroup]=\"filterForm\"\n                    >\n                        <input\n                            #filterInput\n                            class=\"w-full grow rounded-[3px] border border-grayscale-30 pl-2.5 pr-7 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n                            type=\"text\"\n                            formControlName=\"filter\"\n                            (click)=\"$event.stopPropagation()\"\n                            (keydown)=\"onFilterKeyDown($event)\"\n                            [attr.aria-label]=\"'platform.angular_components.filter_options' | translate\"\n                            [attr.aria-controls]=\"componentId + '-listbox'\"\n                            [attr.aria-activedescendant]=\"focusedOptionId()\"\n                            autocomplete=\"off\"\n                        />\n                    </form>\n                    <i\n                        class=\"fas fa-search absolute right-2.5 top-2.5 text-grayscale-90\"\n                        aria-hidden=\"true\"\n                    ></i>\n                </div>\n                <button\n                    (click)=\"clearFilter()\"\n                    (keydown)=\"onClearFilterButtonKeyDown($event)\"\n                    [attr.aria-label]=\"'platform.angular_components.clear_filter' | translate\"\n                >\n                    <i\n                        class=\"fas fa-times flex items-center\"\n                        aria-hidden=\"true\"\n                    ></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                role=\"presentation\"\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                        [checkIconClass]=\"checkIconClass()\"\n                        [isSelected]=\"isOptionSelected(option)\"\n                        (selected)=\"selectItem(option)\"\n                        [isGrouper]=\"option.grouper ?? false\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                        [groupAnnouncement]=\"groupAnnouncementFor(option.id)\"\n                        [posinset]=\"optionPosinsetFor(option.id)\"\n                        [setsize]=\"optionSetsizeFor(option.id)\"\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\n                class=\"max-h-52 overflow-auto\"\n                role=\"presentation\"\n            >\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                        [checkIconClass]=\"checkIconClass()\"\n                        [isSelected]=\"isOptionSelected(option)\"\n                        (selected)=\"selectItem(option)\"\n                        [isGrouper]=\"option.grouper ?? false\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                        [groupAnnouncement]=\"groupAnnouncementFor(option.id)\"\n                        [posinset]=\"optionPosinsetFor(option.id)\"\n                        [setsize]=\"optionSetsizeFor(option.id)\"\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\n", styles: [":host.ng-dirty.ng-invalid{.dropdown-container,.select-container{border-color:#c13018;outline:none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.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", "checkIconClass", "groupAnnouncement", "posinset", "setsize"], outputs: ["isSelectedChange", "selected"] }, { kind: "component", type: CheckboxComponent, selector: "s-checkbox", inputs: ["disabled", "checked", "indeterminate", "label", "ariaLabel", "ariaLabelledBy"], outputs: ["disabledChange", "checkedChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i4.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: i4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], animations: [
             trigger('visibilityChanged', [
                 state('void', style({ opacity: 0, transform: 'scale(0.95)' })),
                 transition(':enter', [
@@ -911,7 +1156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                                 animate('500ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 0, transform: 'scale(0.95)' })),
                             ]),
                         ]),
-                    ], 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    [class.pointer-events-none]=\"disabled()\"\n    [class.border-grayscale-20]=\"disabled()\"\n    [class.bg-grayscale-5]=\"disabled()\"\n    [class.pointer-events-auto]=\"!disabled()\"\n    [class.border-grayscale-30]=\"!disabled()\"\n    [class.bg-grayscale-0]=\"!disabled()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"showOptions()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"componentId + '-listbox'\"\n    [attr.aria-owns]=\"showOptions() ? componentId + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"showOptions() ? focusedOptionId() : null\"\n    role=\"combobox\"\n    [id]=\"componentId + '-combobox'\"\n    (click)=\"onContainerDivClick()\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"resolvedAriaLabelledBy() || null\"\n>\n    <span\n        class=\"flex flex-grow select-none px-3 py-[7px]\"\n        [class.text-grayscale-90]=\"!disabled() && !isClean()\"\n        [class.text-grayscale-60]=\"!disabled() && isClean()\"\n        [class.text-grayscale-30]=\"disabled()\"\n    >\n        {{ print() || placeholder() }}\n    </span>\n\n    @if (!disabled() && showClear() && !isClean()) {\n        <button\n            class=\"mx-3\"\n            (click)=\"clear($event)\"\n            [attr.aria-label]=\"'platform.angular_components.aria_clear_selection' | translate\"\n        >\n            <i\n                class=\"fas fa-times flex items-center\"\n                aria-hidden=\"true\"\n            ></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        [class.border-grayscale-20]=\"disabled()\"\n        [class.border-grayscale-30]=\"!disabled()\"\n    >\n        <i\n            class=\"fas\"\n            aria-hidden=\"true\"\n            [class.text-grayscale-30]=\"disabled()\"\n            [class.text-grayscale-90]=\"!disabled()\"\n            [class.fa-caret-down]=\"!showOptions()\"\n            [class.fa-caret-up]=\"showOptions()\"\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]=\"componentId + '-listbox'\"\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        [attr.aria-multiselectable]=\"multiple() ? true : null\"\n        [@visibilityChanged]\n        role=\"listbox\"\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 w-full grow\"\n                        [formGroup]=\"filterForm\"\n                    >\n                        <input\n                            #filterInput\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                            (keydown)=\"onFilterKeyDown($event)\"\n                            [attr.aria-label]=\"'platform.angular_components.filter_options' | translate\"\n                            [attr.aria-controls]=\"componentId + '-listbox'\"\n                            [attr.aria-activedescendant]=\"focusedOptionId()\"\n                            autocomplete=\"off\"\n                        />\n                    </form>\n                    <i\n                        class=\"fas fa-search absolute right-2.5 top-2.5 text-grayscale-90\"\n                        aria-hidden=\"true\"\n                    ></i>\n                </div>\n                <button\n                    (click)=\"clearFilter()\"\n                    [attr.aria-label]=\"'platform.angular_components.clear_filter' | translate\"\n                >\n                    <i\n                        class=\"fas fa-times flex items-center\"\n                        aria-hidden=\"true\"\n                    ></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                        [checkIconClass]=\"checkIconClass()\"\n                        [isSelected]=\"isOptionSelected(option)\"\n                        (selected)=\"selectItem(option)\"\n                        [isGrouper]=\"option.grouper ?? false\"\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                        [checkIconClass]=\"checkIconClass()\"\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\n", styles: [":host.ng-dirty.ng-invalid{.dropdown-container,.select-container{border-color:#c13018;outline:none}}\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-2 outline-[var(--s-focus-ring-color,#0090ff)] outline-offset-[-2px] focus-visible:outline\"\n    [class.pointer-events-none]=\"disabled()\"\n    [class.border-grayscale-20]=\"disabled()\"\n    [class.bg-grayscale-5]=\"disabled()\"\n    [class.pointer-events-auto]=\"!disabled()\"\n    [class.border-grayscale-30]=\"!disabled()\"\n    [class.bg-grayscale-0]=\"!disabled()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-expanded]=\"showOptions()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-controls]=\"componentId + '-listbox'\"\n    [attr.aria-owns]=\"showOptions() ? componentId + '-listbox' : null\"\n    [attr.aria-activedescendant]=\"showOptions() ? focusedOptionId() : null\"\n    role=\"combobox\"\n    [id]=\"componentId + '-combobox'\"\n    (click)=\"onContainerDivClick()\"\n    (keydown)=\"onKeyDown($event)\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"resolvedAriaLabelledBy() || null\"\n>\n    <span\n        class=\"flex flex-grow select-none px-3 py-[7px]\"\n        [class.text-grayscale-90]=\"!disabled() && !isClean()\"\n        [class.text-grayscale-60]=\"!disabled() && isClean()\"\n        [class.text-grayscale-30]=\"disabled()\"\n    >\n        {{ print() || placeholder() }}\n    </span>\n\n    @if (!disabled() && showClear() && !isClean()) {\n        <button\n            class=\"mx-3\"\n            (click)=\"clear($event)\"\n            (keydown)=\"$event.stopPropagation()\"\n            [attr.aria-label]=\"'platform.angular_components.aria_clear_selection' | translate\"\n        >\n            <i\n                class=\"fas fa-times flex items-center\"\n                aria-hidden=\"true\"\n            ></i>\n        </button>\n    }\n\n    <div\n        class=\"dropdown-container flex items-center border-l px-3 group-hover:bg-grayscale-10\"\n        [class.border-grayscale-20]=\"disabled()\"\n        [class.border-grayscale-30]=\"!disabled()\"\n    >\n        <i\n            class=\"fas\"\n            aria-hidden=\"true\"\n            [class.text-grayscale-30]=\"disabled()\"\n            [class.text-grayscale-90]=\"!disabled()\"\n            [class.fa-caret-down]=\"!showOptions()\"\n            [class.fa-caret-up]=\"showOptions()\"\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)=\"_closeDropdown()\"\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    (detach)=\"_closeDropdown()\"\n>\n    <div\n        #dropdownPanel\n        [id]=\"componentId + '-listbox'\"\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        [attr.aria-multiselectable]=\"multiple() ? true : null\"\n        [@visibilityChanged]\n        role=\"listbox\"\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                        [ariaLabel]=\"selectAllCheckboxAriaLabel()\"\n                        (checkedChange)=\"toggleSelectAll()\"\n                    ></s-checkbox>\n                }\n\n                <div class=\"relative flex h-[35px] grow\">\n                    <form\n                        class=\"flex w-full grow\"\n                        [formGroup]=\"filterForm\"\n                    >\n                        <input\n                            #filterInput\n                            class=\"w-full grow rounded-[3px] border border-grayscale-30 pl-2.5 pr-7 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--s-focus-ring-color,#0090ff)]\"\n                            type=\"text\"\n                            formControlName=\"filter\"\n                            (click)=\"$event.stopPropagation()\"\n                            (keydown)=\"onFilterKeyDown($event)\"\n                            [attr.aria-label]=\"'platform.angular_components.filter_options' | translate\"\n                            [attr.aria-controls]=\"componentId + '-listbox'\"\n                            [attr.aria-activedescendant]=\"focusedOptionId()\"\n                            autocomplete=\"off\"\n                        />\n                    </form>\n                    <i\n                        class=\"fas fa-search absolute right-2.5 top-2.5 text-grayscale-90\"\n                        aria-hidden=\"true\"\n                    ></i>\n                </div>\n                <button\n                    (click)=\"clearFilter()\"\n                    (keydown)=\"onClearFilterButtonKeyDown($event)\"\n                    [attr.aria-label]=\"'platform.angular_components.clear_filter' | translate\"\n                >\n                    <i\n                        class=\"fas fa-times flex items-center\"\n                        aria-hidden=\"true\"\n                    ></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                role=\"presentation\"\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                        [checkIconClass]=\"checkIconClass()\"\n                        [isSelected]=\"isOptionSelected(option)\"\n                        (selected)=\"selectItem(option)\"\n                        [isGrouper]=\"option.grouper ?? false\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                        [groupAnnouncement]=\"groupAnnouncementFor(option.id)\"\n                        [posinset]=\"optionPosinsetFor(option.id)\"\n                        [setsize]=\"optionSetsizeFor(option.id)\"\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\n                class=\"max-h-52 overflow-auto\"\n                role=\"presentation\"\n            >\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                        [checkIconClass]=\"checkIconClass()\"\n                        [isSelected]=\"isOptionSelected(option)\"\n                        (selected)=\"selectItem(option)\"\n                        [isGrouper]=\"option.grouper ?? false\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                        [groupAnnouncement]=\"groupAnnouncementFor(option.id)\"\n                        [posinset]=\"optionPosinsetFor(option.id)\"\n                        [setsize]=\"optionSetsizeFor(option.id)\"\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\n", styles: [":host.ng-dirty.ng-invalid{.dropdown-container,.select-container{border-color:#c13018;outline:none}}\n"] }]
         }], ctorParameters: () => [] });
 
 /**