@seniorsistemas/angular-components 19.0.9 → 19.1.1

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

@@ -1,18 +1,18 @@
-import * as i5 from '@angular/cdk/overlay';
+import * as i4 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import * as i3 from '@angular/cdk/scrolling';
+import * as i2 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, model, output, Component, signal, computed, viewChild, inject, effect, forwardRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i2 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import * as i4 from '@ngx-translate/core';
+import * as i3 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { CheckboxComponent } from '@seniorsistemas/angular-components/checkbox';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 
 class SelectOptionComponent {
     id = input.required();
@@ -30,11 +30,11 @@ 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 } }, outputs: { isSelected: "isSelectedChange", selected: "selected" }, ngImport: i0, template: "<li\n    [attr.id]=\"id()\"\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>\n    @if (!isGrouper() && checkmark() && !multiple() && isSelected()) {\n        <i class=\"far fa-check text-grayscale-60\"></i>\n    }\n\n    @if (!isGrouper() && multiple()) {\n        <s-checkbox [checked]=\"isSelected()\"></s-checkbox>\n    }\n    <span\n        class=\"text-grayscale-90\"\n        [class.font-bold]=\"isGrouper()\"\n    >\n        {{ label() }}\n    </span>\n</li>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CheckboxComponent, selector: "s-checkbox", inputs: ["disabled", "checked", "indeterminate", "label"], 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 } }, 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=\"far fa-check text-grayscale-60\"\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: "ngmodule", type: CommonModule }, { 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: [CommonModule, CheckboxComponent], template: "<li\n    [attr.id]=\"id()\"\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>\n    @if (!isGrouper() && checkmark() && !multiple() && isSelected()) {\n        <i class=\"far fa-check text-grayscale-60\"></i>\n    }\n\n    @if (!isGrouper() && multiple()) {\n        <s-checkbox [checked]=\"isSelected()\"></s-checkbox>\n    }\n    <span\n        class=\"text-grayscale-90\"\n        [class.font-bold]=\"isGrouper()\"\n    >\n        {{ label() }}\n    </span>\n</li>\n" }]
+            args: [{ selector: 's-select-option', standalone: true, imports: [CommonModule, 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=\"far fa-check text-grayscale-60\"\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" }]
         }] });
 
 /**
@@ -88,11 +88,16 @@ class SelectComponent {
     disabled = model(false);
     /** @description Controla a visibilidade do painel de opções via two-way binding. @default false */
     showOptions = model(false);
+    /** @description Label de acessibilidade do componente. @default '' */
+    ariaLabel = input('');
+    /** @description ID do elemento externo que descreve o componente (aria-labelledby). @default '' */
+    ariaLabelledBy = input('');
     value = signal(null);
     values = signal([]);
     filterValue = signal('');
     focusedIndex = signal(-1);
     _pendingValue = null;
+    isOpen = false;
     componentId = `select${SelectComponent.nextId++}`;
     /**
      * Computed que indica se todas as opções filtradas estão selecionadas.
@@ -116,6 +121,16 @@ class SelectComponent {
             return null;
         return this.filteredOptions()[index]?.data ?? null;
     });
+    /**
+     * Retorna o item atualmente focado na lista de opções filtradas.
+     * @returns O dado do item focado ou `null` caso nenhum item esteja focado.
+     */
+    focusedOptionId = computed(() => {
+        const index = this.focusedIndex();
+        if (index < 0)
+            return null;
+        return this.filteredOptions()[index]?.id ?? null;
+    });
     /**
      * Computa e retorna a lista interna de opções do dropdown.
      * - Se as opções estiverem agrupadas (`group()` retorna verdadeiro),
@@ -214,6 +229,8 @@ class SelectComponent {
         filter: new FormControl('', { nonNullable: true }),
     });
     _containerDiv = viewChild('containerDiv');
+    _filterInput = viewChild('filterInput');
+    _selectAllCheckbox = viewChild('selectAllCheckbox');
     _onChange = () => { };
     _onTouched = () => { };
     _translateService = inject(TranslateService);
@@ -322,9 +339,27 @@ class SelectComponent {
             return;
         }
         const shouldOpen = !this.showOptions();
+        this.isOpen = shouldOpen;
         this.showOptions.set(shouldOpen);
         if (shouldOpen) {
-            this._focusSelectedOption();
+            if (this.filter()) {
+                // 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(() => {
+                    if (this.multiple()) {
+                        const checkboxHost = this._selectAllCheckbox()?.nativeElement;
+                        const focusable = checkboxHost?.querySelector('[tabindex]');
+                        focusable?.focus();
+                    }
+                    else {
+                        this._filterInput()?.nativeElement.focus();
+                    }
+                });
+            }
+            else {
+                this._focusSelectedOption();
+            }
         }
     }
     /**
@@ -360,6 +395,7 @@ class SelectComponent {
             const result = optionValue ? item.data[optionValue] : item.data;
             this._onChange(result);
             this._closeDropdown();
+            this._containerDiv()?.nativeElement.focus();
         }
         this._onTouched();
     }
@@ -415,6 +451,54 @@ class SelectComponent {
         this.toggle();
         this._containerDiv()?.nativeElement.focus();
     }
+    /**
+     * 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.
+     * - 'Escape': Fecha o dropdown e retorna o foco ao combobox.
+     * - 'Enter': Seleciona a opção focada, se houver.
+     * @param event O evento de teclado disparado no input de filtro.
+     */
+    onFilterKeyDown(event) {
+        const options = this.filteredOptions();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this._focusNextOption(options);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (options.length > 0) {
+                    if (this.focusedIndex() < 0) {
+                        // Nenhum item focado: foca o último disponível
+                        let lastIndex = options.length - 1;
+                        while (lastIndex >= 0 && options[lastIndex].grouper) {
+                            lastIndex--;
+                        }
+                        if (lastIndex >= 0) {
+                            this.focusedIndex.set(lastIndex);
+                            this._scrollToFocusedOption();
+                        }
+                    }
+                    else {
+                        this._focusPreviousOption(options);
+                    }
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                this._closeDropdown();
+                this._containerDiv()?.nativeElement.focus();
+                break;
+            case 'Enter':
+                if (this.focusedIndex() >= 0 && this.focusedIndex() < options.length) {
+                    event.preventDefault();
+                    this.selectItem(options[this.focusedIndex()]);
+                }
+                break;
+        }
+    }
     /**
      * 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.
@@ -428,7 +512,7 @@ class SelectComponent {
      */
     onKeyDown(event) {
         const options = this.filteredOptions();
-        if (!options.length) {
+        if (!options.length && event.key !== 'Escape' && event.key !== 'Enter' && event.key !== ' ') {
             return;
         }
         const _selectOption = () => {
@@ -440,13 +524,24 @@ class SelectComponent {
         switch (event.key) {
             case 'ArrowDown':
                 event.preventDefault();
-                this._focusNextOption(options);
+                if (!this.showOptions()) {
+                    this.toggle();
+                }
+                else {
+                    this._focusNextOption(options);
+                }
                 break;
             case 'ArrowUp':
                 event.preventDefault();
-                this._focusPreviousOption(options);
+                if (this.showOptions()) {
+                    this._focusPreviousOption(options);
+                }
                 break;
             case 'Tab':
+                // Quando há filtro aberto, Tab deve navegar para dentro do overlay (não fechar)
+                if (this.showOptions() && this.filter()) {
+                    return;
+                }
                 _selectOption();
                 this._closeDropdown();
                 break;
@@ -459,6 +554,10 @@ class SelectComponent {
                 }
                 break;
             case 'Escape':
+                if (this.showOptions()) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
                 this._closeDropdown();
                 break;
             case ' ':
@@ -685,13 +784,23 @@ class SelectComponent {
         }
     }
     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 }, 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: [
+    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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", showOptions: "showOptionsChange" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], 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\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"] }, { 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"] }] });
+        ], 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    (click)=\"onContainerDivClick()\"\n    (keydown)=\"onKeyDown($event)\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || 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                        [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                        [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: CommonModule }, { 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"], 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', [
+                    animate('500ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1, transform: 'scale(1)' })),
+                ]),
+                transition(':leave', [
+                    animate('500ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 0, transform: 'scale(0.95)' })),
+                ]),
+            ]),
+        ] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -705,20 +814,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         OverlayModule,
                     ], host: {
                         '(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: "<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\n", styles: [":host.ng-dirty.ng-invalid{.dropdown-container,.select-container{border-color:#c13018;outline:none}}\n"] }]
+                    ], animations: [
+                        trigger('visibilityChanged', [
+                            state('void', style({ opacity: 0, transform: 'scale(0.95)' })),
+                            transition(':enter', [
+                                animate('500ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1, transform: 'scale(1)' })),
+                            ]),
+                            transition(':leave', [
+                                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    (click)=\"onContainerDivClick()\"\n    (keydown)=\"onKeyDown($event)\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"ariaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || 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                        [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                        [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"] }]
         }], ctorParameters: () => [] });
 
 /**