@seniorsistemas/angular-components 17.27.1-feature-sds-110-35ee9b4f → 17.27.1-fix-interactive-content-46e38731

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

@@ -0,0 +1,741 @@
+import { DomPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
+import * as i3 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import * as i1 from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, model, output, Component, signal, computed, inject, ElementRef, viewChild, PLATFORM_ID, ViewContainerRef, forwardRef } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormGroup, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import * as i4 from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { CheckboxComponent } from '@seniorsistemas/angular-components/checkbox';
+import { Subject } from 'rxjs';
+
+class SelectOptionComponent {
+    id = input.required();
+    label = input.required();
+    multiple = input.required();
+    checkmark = input.required();
+    isGrouper = input.required();
+    isFocused = input.required();
+    isSelected = model.required();
+    selected = output();
+    onClick() {
+        if (this.isGrouper()) {
+            return;
+        }
+        this.selected.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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", "indeterminateChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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" }]
+        }] });
+
+class SelectComponent {
+    placeholder = input('');
+    multiple = input(false);
+    options = input.required();
+    optionLabel = input();
+    optionValue = input();
+    showClear = input(false);
+    filter = input(false);
+    checkmark = input(false);
+    filterBy = input();
+    group = input(false);
+    virtualScroll = input(false);
+    virtualScrollItemSize = input(37);
+    emptyMessage = input(null);
+    useRawValue = input(false);
+    dataKey = input();
+    disabled = model(false);
+    showOptions = signal(false);
+    value = signal(null);
+    values = signal([]);
+    filterValue = signal('');
+    focusedIndex = signal(-1);
+    dropTop = 0;
+    dropLeft = 0;
+    dropWidth = 0;
+    _portalHost = null;
+    /**
+     * Verifica se todas as opções visíveis (filtradas e não agrupadoras) estão selecionadas.
+     *
+     * - Retorna `true` se todas as opções filtradas estiverem presentes em `values()`.
+     * - Ignora opções marcadas como `grouper`.
+     * - Usa `_getCompareValueExtractor()` para comparar os valores de forma consistente.
+     *
+     * Esse estado é usado para controlar o checkbox de "Selecionar todos" quando todas as opções visíveis estão marcadas.
+     */
+    allSelected = computed(() => {
+        const selected = this.values();
+        const options = this.filteredOptions().filter((o) => !o.grouper);
+        return (options.length > 0 &&
+            options.every((option) => selected.some((s) => this._getCompareValueExtractor()(s) === this._getCompareValueExtractor()(option))));
+    });
+    focusedItem = computed(() => this.filteredOptions().at(this.focusedIndex())?.data ?? null);
+    /**
+     * Converte as opções externas (`options()`) em uma estrutura interna padronizada (`InternalDropdownOption<T>`).
+     *
+     * - Se os dados forem primitivos (string, number, etc.), gera opções com IDs baseados no índice.
+     * - Se os dados forem objetos, delega a criação das opções para `_addIdToOptions()`, que adiciona IDs e marca agrupadores.
+     * - Se o modo agrupado estiver ativo (`group()`), transforma as opções em uma lista achatada com agrupadores via `_grouperToFlat()`.
+     *
+     * Essa estrutura é usada internamente para renderização, filtragem e controle de seleção.
+     */
+    internalOptions = computed(() => {
+        const opts = this.options();
+        const optionsWithId = this.TIsPrimitive()
+            ? opts.map((value, index) => ({
+                id: `id_primitive_${index}`,
+                grouper: false,
+                data: value,
+            }))
+            : this._addIdToOptions(opts);
+        return this.group() ? this._grouperToFlat(optionsWithId) : optionsWithId;
+    });
+    /**
+     * Retorna o texto que deve ser exibido no componente com base nos valores selecionados.
+     *
+     * - No modo múltiplo:
+     *   - Se houver mais de um item selecionado, exibe uma mensagem traduzida com o total de registros.
+     *   - Se houver apenas um item selecionado, exibe o label correspondente.
+     * - No modo simples:
+     *   - Exibe o label do valor selecionado.     *
+     * - Se nenhum valor estiver selecionado, retorna uma string vazia.
+     *
+     * Essa lógica é usada para mostrar o conteúdo atual do campo de seleção.
+     */
+    print = computed(() => {
+        if (this.multiple()) {
+            const selected = this.values();
+            if (selected.length > 1) {
+                return this._translateService.instant(`platform.angular_components.total_records_selected`, {
+                    count: selected.length,
+                });
+            }
+            else if (selected.length === 1) {
+                return this._getLabelFromOption(selected[0]);
+            }
+        }
+        else if (this.value()) {
+            return this._getLabelFromOption(this.value());
+        }
+        return '';
+    });
+    isClean = computed(() => {
+        return this.multiple() ? !this.values().length : !this.value();
+    });
+    TIsPrimitive = computed(() => {
+        const opts = this.options();
+        if (!opts.length)
+            return false;
+        return ['string', 'number', 'boolean'].includes(typeof opts[0]);
+    });
+    /**
+     * Indica se o estado de seleção está indeterminado.
+     *
+     * - Retorna `true` quando **algumas**, mas não todas, opções visíveis estão selecionadas.
+     * - Retorna `false` quando **todas** ou **nenhuma** das opções visíveis estão selecionadas.
+     * - Ignora opções marcadas como `grouper`.
+     *
+     * Esse estado é usado, por exemplo, para exibir o checkbox de "Selecionar todos" em modo indeterminado.
+     */
+    selectAllIsIndeterminate = computed(() => {
+        const selected = this.values();
+        const options = this.filteredOptions().filter((o) => !o.grouper);
+        const all = options.length > 0 && options.every((o) => selected.includes(o.data));
+        const none = options.every((o) => !selected.includes(o.data));
+        return !all && !none;
+    });
+    /**
+     * Retorna a lista de opções filtradas com base no valor digitado pelo usuário.
+     *
+     * - Se o filtro estiver desativado ou vazio, retorna todas as opções.
+     * - Caso contrário, aplica o filtro usando o(s) campo(s) definidos em `filterBy`.
+     * - Ignora opções marcadas como `grouper`.
+     * - Usa o extrator de label para comparar os valores com o texto buscado.
+     */
+    filteredOptions = computed(() => {
+        const allOptions = this.internalOptions();
+        const search = this.filterValue().toLowerCase().trim();
+        if (!this.filter() || !search) {
+            return allOptions;
+        }
+        const filterBy = this.filterBy();
+        return allOptions.filter((option) => {
+            if (option.grouper) {
+                return false;
+            }
+            const labelExtractor = this._getLabelExtractor();
+            let label = '';
+            if (!filterBy) {
+                label = labelExtractor(option.data);
+            }
+            else if (Array.isArray(filterBy)) {
+                label = filterBy.map((by) => String(option.data[by] ?? '')).join(' ');
+            }
+            else {
+                label = String(option.data[filterBy] ?? '');
+            }
+            return label.toLowerCase().includes(search);
+        });
+    });
+    filterForm = new FormGroup({
+        filter: new FormControl('', { nonNullable: true }),
+    });
+    _elementRef = inject((ElementRef));
+    _dropdownTemplate = viewChild('dropdownTemplate');
+    _containerDiv = viewChild('containerDiv');
+    _onChange = () => { };
+    _onTouched = () => { };
+    platformId = inject(PLATFORM_ID);
+    _viewContainerRef = inject(ViewContainerRef);
+    _translateService = inject(TranslateService);
+    destroy$ = new Subject();
+    /**
+     * Inicializa o componente, validando os inputs e configurando o filtro com debounce.
+     */
+    ngOnInit() {
+        this._validateInputs();
+        this.filterForm
+            .get('filter')
+            .valueChanges.pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$))
+            .subscribe((value) => {
+            this.filterValue.set(value);
+        });
+    }
+    /**
+     * Executa limpeza de recursos ao destruir o componente.
+     */
+    ngOnDestroy() {
+        this._destroyDropdownPortal();
+        if (this._portalHost) {
+            this._portalHost.dispose();
+            this._portalHost = null;
+        }
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /**
+     * Define o valor no componente vindo do formulário externo.
+     * @param value Valor atribuído pelo Angular forms.
+     */
+    writeValue(value) {
+        if (this.multiple()) {
+            if (Array.isArray(value)) {
+                const items = this.TIsPrimitive()
+                    ? value.map((v) => this._findOptionByPrimitiveValue(v)).filter(Boolean)
+                    : this.useRawValue()
+                        ? value
+                        : value.map((v) => this._findOptionByValue(v)).filter(Boolean);
+                this.values.set(items);
+            }
+            else {
+                this.values.set([]);
+            }
+        }
+        else {
+            const item = this.TIsPrimitive()
+                ? this._findOptionByPrimitiveValue(value)
+                : this.useRawValue()
+                    ? value
+                    : this._findOptionByValue(value);
+            this.value.set(item ?? null);
+        }
+    }
+    /**
+     * Registra a função que será chamada quando o valor mudar.
+     * @param onChange Função callback.
+     */
+    registerOnChange(onChange) {
+        this._onChange = onChange;
+    }
+    /**
+     * Registra a função que será chamada quando o componente for "tocado".
+     * @param onTouched Função callback.
+     */
+    registerOnTouched(onTouched) {
+        this._onTouched = onTouched;
+    }
+    /**
+     * Define o estado de desabilitado do componente.
+     * @param disabled Indica se o componente está desabilitado.
+     */
+    setDisabledState(disabled) {
+        this.disabled.set(disabled);
+    }
+    /**
+     * Alterna a exibição da lista de opções (dropdown).
+     */
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        const shouldOpen = !this.showOptions();
+        this.showOptions.set(shouldOpen);
+        if (shouldOpen) {
+            setTimeout(() => {
+                this._createDropdownPortal();
+            });
+        }
+        else {
+            this._destroyDropdownPortal();
+        }
+    }
+    /**
+     * Seleciona ou desseleciona um item na lista.
+     * @param item Item a ser selecionado ou desmarcado.
+     */
+    selectItem(item) {
+        if (this.disabled()) {
+            return;
+        }
+        const getCompareValue = this._getCompareValueExtractor();
+        if (this.multiple()) {
+            const store = [...this.values()];
+            const itemValue = getCompareValue(item);
+            const index = store.findIndex((selectedItem) => {
+                return getCompareValue(selectedItem) === itemValue;
+            });
+            if (index !== -1) {
+                store.splice(index, 1);
+            }
+            else {
+                store.push(item);
+            }
+            this.values.set(store);
+            const result = this.useRawValue() ? store : store.map((i) => this._getValueExtractor()(i));
+            this._onChange(result);
+        }
+        else {
+            this.value.set(item);
+            const result = this.useRawValue() ? item : this._getValueExtractor()(item);
+            this._onChange(result);
+            this._closeDropdown();
+        }
+        this._onTouched();
+    }
+    /**
+     * Limpa a seleção atual.
+     * @param event Evento do clique.
+     */
+    clear(event) {
+        if (this.disabled()) {
+            return;
+        }
+        if (this.multiple()) {
+            this.values.set([]);
+            this._onChange(this._removeInternalProperties(this.values()));
+        }
+        else {
+            this.value.set(null);
+            this._onChange(this.value());
+        }
+        this._closeDropdown();
+        this._onTouched();
+        event.stopPropagation();
+    }
+    /**
+     * Limpa o filtro aplicado à lista de opções.
+     */
+    clearFilter() {
+        this.filterForm.get('filter')?.reset();
+    }
+    /**
+     * Fecha o dropdown se o clique ocorrer fora do componente.
+     * @param event Evento do clique.
+     */
+    onDocumentClick(event) {
+        const clickTarget = event.target;
+        const clickedInsideComponent = this._elementRef.nativeElement.contains(clickTarget);
+        const dropdownInBody = document.querySelector('.dropdown-body-class')?.contains(clickTarget);
+        if (!clickedInsideComponent && !dropdownInBody) {
+            this._closeDropdown();
+        }
+    }
+    /**
+     * Fecha o dropdown em eventos de redimensionamento de janela.
+     */
+    onWindowResize(_) {
+        if (this.showOptions()) {
+            this._closeDropdown();
+        }
+    }
+    /**
+     * Dispara a abertura/fechamento do dropdown ao clicar no container.
+     */
+    onContainerDivClick() {
+        this.toggle();
+        this._containerDiv()?.nativeElement.focus();
+    }
+    /**
+     * Trata eventos de teclado para navegação e seleção.
+     * @param event Evento do teclado.
+     */
+    onKeyDown(event) {
+        const options = this.filteredOptions();
+        if (!options.length) {
+            return;
+        }
+        const _selectOption = () => {
+            if (this.focusedIndex() >= 0 && this.focusedIndex() < options.length) {
+                event.preventDefault();
+                this.selectItem(options[this.focusedIndex()].data);
+            }
+        };
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this._focusNextOption(options);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this._focusPreviousOption(options);
+                break;
+            case 'Tab':
+                _selectOption();
+                this._closeDropdown();
+                break;
+            case 'Enter':
+                if (this.showOptions()) {
+                    _selectOption();
+                }
+                else {
+                    this.toggle();
+                }
+                break;
+            case 'Escape':
+                this._closeDropdown();
+                break;
+            case ' ':
+                _selectOption();
+                break;
+        }
+    }
+    /**
+     * Retorna o rótulo de exibição de uma opção.
+     * @param option Item da lista de opções.
+     * @returns Texto que será exibido no dropdown.
+     */
+    getOptionLabel(option) {
+        return this._getLabelFromOption(option);
+    }
+    /**
+     * Função usada para o trackBy no for do template.
+     * @param _ Índice do item.
+     * @param item Item da lista.
+     * @returns ID único da opção.
+     */
+    trackById(_, item) {
+        return item.id;
+    }
+    /**
+     * Verifica se uma opção está selecionada.
+     * @param option Opção a ser verificada.
+     * @returns Verdadeiro se a opção estiver selecionada.
+     */
+    isOptionSelected(option) {
+        const getCompareValue = this._getCompareValueExtractor();
+        if (this.multiple()) {
+            const selectedValues = this.values().map(getCompareValue);
+            return selectedValues.includes(getCompareValue(option));
+        }
+        else {
+            const currentValue = this.value();
+            return currentValue !== null && getCompareValue(currentValue) === getCompareValue(option);
+        }
+    }
+    /**
+     * Alterna a seleção de todos os itens filtrados.
+     */
+    toggleSelectAll() {
+        if (!this.multiple()) {
+            return;
+        }
+        const options = this.filteredOptions().filter((o) => !o.grouper);
+        if (this.allSelected()) {
+            this.values.set([]);
+        }
+        else {
+            this.values.set(options.map((o) => o.data));
+        }
+        this._onChange(this._removeInternalProperties(this.values()));
+    }
+    /**
+     * Procura e retorna uma opção com valor primitivo igual ao informado.
+     *
+     * @param value Valor primitivo (string, number ou boolean).
+     * @returns A opção correspondente, ou `null` se não encontrada.
+     */
+    _findOptionByPrimitiveValue(value) {
+        return this.internalOptions().find((opt) => opt.data === value)?.data ?? null;
+    }
+    /**
+     * Remove propriedades internas adicionadas pelo componente, retornando apenas os dados crus.
+     *
+     * Usado para garantir que apenas os objetos de dados reais sejam emitidos ao formulário,
+     * especialmente no modo múltiplo.
+     *
+     * @param value Valor armazenado internamente (com ou sem `InternalDropdownOption`).
+     * @returns Os dados "puros", sem propriedades adicionais.
+     */
+    _removeInternalProperties(value) {
+        if (this.TIsPrimitive()) {
+            return value;
+        }
+        return Array.isArray(value)
+            ? value.map((opt) => opt.data)
+            : value.data;
+    }
+    /**
+     * Retorna o texto (label) correspondente a uma determinada opção.
+     * Usa a propriedade definida em `optionLabel`, ou tenta usar uma propriedade padrão (`label`).
+     *
+     * @param option A opção a ser exibida.
+     * @returns O texto legível da opção para exibição no componente.
+     */
+    _getLabelFromOption(option) {
+        if (['string', 'number', 'boolean'].includes(typeof option)) {
+            return String(option);
+        }
+        const labelKey = this.optionLabel();
+        if (!labelKey) {
+            return String(option.label ?? '');
+        }
+        return String(option[labelKey]);
+    }
+    /**
+     * Valida os inputs obrigatórios do componente.
+     */
+    _validateInputs() {
+        if (!this.useRawValue() && !this.TIsPrimitive() && !this.optionValue()) {
+            throw new Error(`The 'optionValue' input must be provided for non-primitive options when useRawValue is false.`);
+        }
+        if (!this.TIsPrimitive() && !this.optionValue() && !this.dataKey()) {
+            throw new Error('Either the optionValue or dataKey input must be provided for non-primitive options.');
+        }
+        if (!this.TIsPrimitive() && !this.optionLabel()) {
+            throw new Error(`The 'optionLabel' input must be provided for non-primitive options.`);
+        }
+    }
+    _findOptionByValue(value) {
+        if (this.useRawValue()) {
+            return this.options().find((option) => option === value) ?? null;
+        }
+        const getValue = this._getValueExtractor();
+        return this.options().find((option) => getValue(option) === value) ?? null;
+    }
+    /**
+     * Extrai o valor final de uma opção, com base em `optionValue`.
+     * @returns Função que retorna o valor da opção.
+     */
+    _getValueExtractor() {
+        if (this.TIsPrimitive()) {
+            return (option) => option;
+        }
+        if (this.useRawValue()) {
+            return (option) => option;
+        }
+        const valueInput = this.optionValue();
+        if (valueInput) {
+            return (option) => option[valueInput];
+        }
+        throw new Error(`optionValue is required for non-primitive options.`);
+    }
+    /**
+     * Extrai o valor comparável de uma opção.
+     * @returns Função que retorna a chave de comparação.
+     */
+    _getCompareValueExtractor() {
+        if (this.TIsPrimitive()) {
+            return (option) => option;
+        }
+        if (this.dataKey()) {
+            const key = this.dataKey();
+            return (option) => option[key];
+        }
+        return this._getValueExtractor();
+    }
+    /**
+     * Fecha o dropdown e redefine o foco.
+     */
+    _closeDropdown() {
+        this.showOptions.set(false);
+        this._destroyDropdownPortal();
+        this.focusedIndex.set(-1);
+    }
+    /**
+     * Adiciona identificadores únicos às opções.
+     * @param options Lista original de opções.
+     * @returns Lista com IDs adicionados.
+     */
+    _addIdToOptions(options) {
+        const timestamp = Date.now();
+        return options.map((option, index) => {
+            if (this.group() && Array.isArray(option.items)) {
+                return {
+                    data: option,
+                    id: `id_${timestamp}_${index++}`,
+                    grouper: true,
+                };
+            }
+            return {
+                data: option,
+                id: `id_${timestamp}_${index++}`,
+            };
+        });
+    }
+    /**
+     * Converte uma estrutura agrupada em uma lista achatada.
+     * @param options Lista de opções com agrupadores.
+     * @returns Lista achatada de opções e grupos.
+     */
+    _grouperToFlat(options) {
+        const result = [];
+        options.forEach((option) => {
+            if (option.grouper && Array.isArray(option.data.items)) {
+                result.push(option);
+                const groupItems = option.data.items.map((item, index) => ({
+                    data: item,
+                    id: `${option.id}_item_${index}`,
+                }));
+                result.push(...groupItems);
+            }
+            else {
+                result.push(option);
+            }
+        });
+        return result;
+    }
+    /**
+     * Move o foco para a próxima opção.
+     * @param options Lista de opções visíveis.
+     */
+    _focusNextOption(options) {
+        let nextIndex = this.focusedIndex() + 1;
+        while (nextIndex < options.length && options[nextIndex].grouper) {
+            nextIndex++;
+        }
+        if (nextIndex < options.length) {
+            this.focusedIndex.set(nextIndex);
+            this._scrollToFocusedOption();
+        }
+    }
+    /**
+     * Move o foco para a opção anterior.
+     * @param options Lista de opções visíveis.
+     */
+    _focusPreviousOption(options) {
+        let prevIndex = this.focusedIndex() - 1;
+        while (prevIndex >= 0 && options[prevIndex].grouper) {
+            prevIndex--;
+        }
+        if (prevIndex >= 0) {
+            this.focusedIndex.set(prevIndex);
+            this._scrollToFocusedOption();
+        }
+    }
+    /**
+     * Rola o dropdown até a opção atualmente focada.
+     */
+    _scrollToFocusedOption() {
+        const id = this.filteredOptions()[this.focusedIndex()]?.id;
+        if (!id) {
+            return;
+        }
+        const el = document.getElementById(id);
+        el?.scrollIntoView({ block: 'nearest' });
+    }
+    /**
+     * Extrai o texto de uma opção, com base em `optionLabel`.
+     * @returns Função que retorna o label da opção.
+     */
+    _getLabelExtractor() {
+        if (this.TIsPrimitive()) {
+            return (option) => String(option);
+        }
+        const labelInput = this.optionLabel();
+        if (labelInput) {
+            return (option) => String(option[labelInput] ?? '');
+        }
+        else {
+            throw new Error(`optionLabel is required for non-primitive options.`);
+        }
+    }
+    /**
+     * Cria e posiciona dinamicamente o dropdown como portal.
+     */
+    _createDropdownPortal() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+        const container = this._containerDiv();
+        const template = this._dropdownTemplate();
+        if (!container || !template) {
+            return;
+        }
+        const dropElementRect = container.nativeElement.getBoundingClientRect();
+        this.dropTop = dropElementRect.bottom + window.scrollY;
+        this.dropLeft = dropElementRect.left + window.scrollX;
+        this.dropWidth = dropElementRect.width;
+        this._destroyDropdownPortal();
+        this._portalHost = new DomPortalOutlet(document.body);
+        const portal = new TemplatePortal(template, this._viewContainerRef);
+        this._portalHost.attach(portal);
+        const dropdownEl = document.querySelector('.dropdown-body-class');
+        if (dropdownEl) {
+            dropdownEl.style.position = 'absolute';
+            dropdownEl.style.top = `${this.dropTop + 4}px`;
+            dropdownEl.style.left = `${this.dropLeft}px`;
+            dropdownEl.style.width = `${this.dropWidth}px`;
+        }
+    }
+    /**
+     * Remove o portal do dropdown do DOM.
+     */
+    _destroyDropdownPortal() {
+        if (this._portalHost?.hasAttached()) {
+            this._portalHost.detach();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectComponent, isStandalone: true, selector: "s-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, checkmark: { classPropertyName: "checkmark", publicName: "checkmark", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, useRawValue: { classPropertyName: "useRawValue", publicName: "useRawValue", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "_dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, isSignal: true }, { propertyName: "_containerDiv", first: true, predicate: ["containerDiv"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #portalAnchor></ng-template>\n\n<div\n    #containerDiv\n    class=\"group flex w-full overflow-hidden rounded-[3px] border outline-1 outline-primary focus:outline\"\n    [ngClass]=\"{\n        'pointer-events-none border-grayscale-20 bg-grayscale-5': disabled(),\n        'pointer-events-auto border-grayscale-30 bg-grayscale-0': !disabled(),\n    }\"\n    [attr.aria-disabled]=\"disabled()\"\n    (click)=\"onContainerDivClick()\"\n    (keydown)=\"onKeyDown($event)\"\n    tabindex=\"0\"\n>\n    <span\n        class=\"flex flex-grow select-none px-3 py-[7px]\"\n        [ngClass]=\"{\n            'text-grayscale-90': !disabled() && !isClean(),\n            'text-grayscale-60': !disabled() && isClean(),\n            'text-grayscale-30': disabled(),\n        }\"\n    >\n        {{ print() || placeholder() }}\n    </span>\n\n    @if (!disabled() && showClear() && !isClean()) {\n        <button\n            class=\"mx-3\"\n            (click)=\"clear($event)\"\n        >\n            <i class=\"fas fa-times flex items-center\"></i>\n        </button>\n    }\n\n    <div\n        class=\"flex items-center border-l px-3 group-hover:bg-grayscale-10 group-focus:border-primary\"\n        [ngClass]=\"{ 'border-grayscale-20': disabled(), 'border-grayscale-30': !disabled() }\"\n    >\n        <i\n            class=\"fas\"\n            [ngClass]=\"{\n                'text-grayscale-30': disabled(),\n                'text-grayscale-90': !disabled(),\n                'fa-caret-down': !showOptions(),\n                'fa-caret-up': showOptions(),\n            }\"\n        ></i>\n    </div>\n</div>\n\n<ng-template #dropdownTemplate>\n    <div\n        class=\"dropdown-body-class z-[999] rounded-[3px] bg-grayscale-0 py-1 shadow-md\"\n        [style.position]=\"'absolute'\"\n        [style.top.px]=\"dropTop\"\n        [style.left.px]=\"dropLeft\"\n        (click)=\"$event.stopPropagation()\"\n    >\n        @if (filter()) {\n            <div class=\"flex w-full items-center gap-3 px-3 py-1.5\">\n                @if (multiple()) {\n                    <s-checkbox\n                        #selectAllCheckbox\n                        [checked]=\"allSelected()\"\n                        [indeterminate]=\"selectAllIsIndeterminate()\"\n                        (checkedChange)=\"toggleSelectAll()\"\n                    ></s-checkbox>\n                }\n\n                <div class=\"relative flex h-[35px] grow\">\n                    <form\n                        class=\"flex grow\"\n                        [formGroup]=\"filterForm\"\n                    >\n                        <input\n                            class=\"w-full grow rounded-[3px] border border-grayscale-30 pl-2.5 pr-7 outline-1 outline-primary\"\n                            type=\"text\"\n                            formControlName=\"filter\"\n                            (click)=\"$event.stopPropagation()\"\n                        />\n                    </form>\n                    <i class=\"fas fa-search absolute right-2.5 top-2.5 text-grayscale-90\"></i>\n                </div>\n                <button (click)=\"clearFilter()\">\n                    <i class=\"fas fa-times flex items-center\"></i>\n                </button>\n            </div>\n        }\n\n        <!-- Virtual scroll -->\n        @if (virtualScroll() && filteredOptions().length > 10) {\n            <cdk-virtual-scroll-viewport\n                [itemSize]=\"virtualScrollItemSize()\"\n                class=\"h-52 overflow-auto\"\n            >\n                <ng-container *cdkVirtualFor=\"let option of filteredOptions(); trackBy: trackById\">\n                    <s-select-option\n                        [id]=\"option.id\"\n                        [label]=\"getOptionLabel(option.data)\"\n                        [multiple]=\"multiple()\"\n                        [checkmark]=\"checkmark()\"\n                        [isSelected]=\"isOptionSelected(option.data)\"\n                        (selected)=\"selectItem(option.data)\"\n                        [isGrouper]=\"option.grouper\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                    ></s-select-option>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n        }\n\n        <!-- Normal list -->\n        @if (!virtualScroll() || filteredOptions().length <= 10) {\n            <ul class=\"max-h-52 overflow-auto\">\n                @for (option of filteredOptions(); track option.id) {\n                    <s-select-option\n                        [id]=\"option.id\"\n                        [label]=\"getOptionLabel(option.data)\"\n                        [multiple]=\"multiple()\"\n                        [checkmark]=\"checkmark()\"\n                        [isSelected]=\"isOptionSelected(option.data)\"\n                        (selected)=\"selectItem(option.data)\"\n                        [isGrouper]=\"option.grouper ?? false\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                    ></s-select-option>\n                }\n            </ul>\n        }\n\n        @if (filteredOptions().length === 0) {\n            <span class=\"m-3 text-grayscale-60\">{{\n                emptyMessage() ?? 'platform.angular_components.no_records_found' | translate\n            }}</span>\n        }\n    </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: SelectOptionComponent, selector: "s-select-option", inputs: ["id", "label", "multiple", "checkmark", "isGrouper", "isFocused", "isSelected"], outputs: ["isSelectedChange", "selected"] }, { kind: "component", type: CheckboxComponent, selector: "s-checkbox", inputs: ["disabled", "checked", "indeterminate", "label"], outputs: ["disabledChange", "checkedChange", "indeterminateChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's-select', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        ScrollingModule,
+                        SelectOptionComponent,
+                        CheckboxComponent,
+                        TranslateModule,
+                    ], host: {
+                        '(document:click)': 'onDocumentClick($event)',
+                        '(window:resize)': 'onWindowResize($event)',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<ng-template #portalAnchor></ng-template>\n\n<div\n    #containerDiv\n    class=\"group flex w-full overflow-hidden rounded-[3px] border outline-1 outline-primary focus:outline\"\n    [ngClass]=\"{\n        'pointer-events-none border-grayscale-20 bg-grayscale-5': disabled(),\n        'pointer-events-auto border-grayscale-30 bg-grayscale-0': !disabled(),\n    }\"\n    [attr.aria-disabled]=\"disabled()\"\n    (click)=\"onContainerDivClick()\"\n    (keydown)=\"onKeyDown($event)\"\n    tabindex=\"0\"\n>\n    <span\n        class=\"flex flex-grow select-none px-3 py-[7px]\"\n        [ngClass]=\"{\n            'text-grayscale-90': !disabled() && !isClean(),\n            'text-grayscale-60': !disabled() && isClean(),\n            'text-grayscale-30': disabled(),\n        }\"\n    >\n        {{ print() || placeholder() }}\n    </span>\n\n    @if (!disabled() && showClear() && !isClean()) {\n        <button\n            class=\"mx-3\"\n            (click)=\"clear($event)\"\n        >\n            <i class=\"fas fa-times flex items-center\"></i>\n        </button>\n    }\n\n    <div\n        class=\"flex items-center border-l px-3 group-hover:bg-grayscale-10 group-focus:border-primary\"\n        [ngClass]=\"{ 'border-grayscale-20': disabled(), 'border-grayscale-30': !disabled() }\"\n    >\n        <i\n            class=\"fas\"\n            [ngClass]=\"{\n                'text-grayscale-30': disabled(),\n                'text-grayscale-90': !disabled(),\n                'fa-caret-down': !showOptions(),\n                'fa-caret-up': showOptions(),\n            }\"\n        ></i>\n    </div>\n</div>\n\n<ng-template #dropdownTemplate>\n    <div\n        class=\"dropdown-body-class z-[999] rounded-[3px] bg-grayscale-0 py-1 shadow-md\"\n        [style.position]=\"'absolute'\"\n        [style.top.px]=\"dropTop\"\n        [style.left.px]=\"dropLeft\"\n        (click)=\"$event.stopPropagation()\"\n    >\n        @if (filter()) {\n            <div class=\"flex w-full items-center gap-3 px-3 py-1.5\">\n                @if (multiple()) {\n                    <s-checkbox\n                        #selectAllCheckbox\n                        [checked]=\"allSelected()\"\n                        [indeterminate]=\"selectAllIsIndeterminate()\"\n                        (checkedChange)=\"toggleSelectAll()\"\n                    ></s-checkbox>\n                }\n\n                <div class=\"relative flex h-[35px] grow\">\n                    <form\n                        class=\"flex grow\"\n                        [formGroup]=\"filterForm\"\n                    >\n                        <input\n                            class=\"w-full grow rounded-[3px] border border-grayscale-30 pl-2.5 pr-7 outline-1 outline-primary\"\n                            type=\"text\"\n                            formControlName=\"filter\"\n                            (click)=\"$event.stopPropagation()\"\n                        />\n                    </form>\n                    <i class=\"fas fa-search absolute right-2.5 top-2.5 text-grayscale-90\"></i>\n                </div>\n                <button (click)=\"clearFilter()\">\n                    <i class=\"fas fa-times flex items-center\"></i>\n                </button>\n            </div>\n        }\n\n        <!-- Virtual scroll -->\n        @if (virtualScroll() && filteredOptions().length > 10) {\n            <cdk-virtual-scroll-viewport\n                [itemSize]=\"virtualScrollItemSize()\"\n                class=\"h-52 overflow-auto\"\n            >\n                <ng-container *cdkVirtualFor=\"let option of filteredOptions(); trackBy: trackById\">\n                    <s-select-option\n                        [id]=\"option.id\"\n                        [label]=\"getOptionLabel(option.data)\"\n                        [multiple]=\"multiple()\"\n                        [checkmark]=\"checkmark()\"\n                        [isSelected]=\"isOptionSelected(option.data)\"\n                        (selected)=\"selectItem(option.data)\"\n                        [isGrouper]=\"option.grouper\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                    ></s-select-option>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n        }\n\n        <!-- Normal list -->\n        @if (!virtualScroll() || filteredOptions().length <= 10) {\n            <ul class=\"max-h-52 overflow-auto\">\n                @for (option of filteredOptions(); track option.id) {\n                    <s-select-option\n                        [id]=\"option.id\"\n                        [label]=\"getOptionLabel(option.data)\"\n                        [multiple]=\"multiple()\"\n                        [checkmark]=\"checkmark()\"\n                        [isSelected]=\"isOptionSelected(option.data)\"\n                        (selected)=\"selectItem(option.data)\"\n                        [isGrouper]=\"option.grouper ?? false\"\n                        [isFocused]=\"option.data === focusedItem()\"\n                    ></s-select-option>\n                }\n            </ul>\n        }\n\n        @if (filteredOptions().length === 0) {\n            <span class=\"m-3 text-grayscale-60\">{{\n                emptyMessage() ?? 'platform.angular_components.no_records_found' | translate\n            }}</span>\n        }\n    </div>\n</ng-template>\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SelectComponent };
+//# sourceMappingURL=seniorsistemas-angular-components-select.mjs.map