@jvsoft/components 0.0.13-alpha.3 → 1.0.0-alpha.10

package/fesm2022/jvsoft-components-filtro-busqueda.mjs

@@ -0,0 +1,660 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, InjectionToken, inject, input, output, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { Subject, BehaviorSubject } from 'rxjs';
+import moment from 'moment';
+import * as i2 from '@angular/forms';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i5 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i6 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import * as i7 from '@angular/material/core';
+import { MatOptionModule, MatRippleModule } from '@angular/material/core';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import * as i8 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import { TextFieldModule } from '@angular/cdk/text-field';
+import { debounceTime, takeUntil, distinctUntilChanged } from 'rxjs/operators';
+import { ToastrService } from 'ngx-toastr';
+import { generateRandomString, dataEnLista, tipoValorFuncion, getUniqueValues, establecerQuitarRequired, mostrarValorEnBusqueda, getFormValidationErrors } from '@jvsoft/utils';
+
+class FiltroBusquedaService {
+    // Estado centralizado con Signals (Angular 19+)
+    _filtrosActivos = signal(new Map());
+    _dataServidorActivos = signal(new Map());
+    // Interfaz de sólo lectura expuesta
+    filtrosActivos = this._filtrosActivos.asReadonly();
+    dataServidorActivos = this._dataServidorActivos.asReadonly();
+    /**
+     * Establece un valor para un filtro reactivo
+     */
+    setValue(nombreFiltro, val) {
+        this._filtrosActivos.update(map => {
+            const nextMap = new Map(map);
+            nextMap.set(nombreFiltro, val);
+            return nextMap;
+        });
+    }
+    /**
+     * @deprecated Usa `getFiltroSignal(nombreFiltro)` en componentes modernos.
+     * Retorna el snapshot sincrónico actual (para componentes legacy).
+     */
+    getValue(nombreFiltro) {
+        return this._filtrosActivos().get(nombreFiltro);
+    }
+    /**
+     * Actualiza la metadata del servidor (Signals).
+     */
+    setDataServidorSuscripcion(nombreFiltro, campo, data) {
+        this._dataServidorActivos.update(map => {
+            const nextMap = new Map(map);
+            let filterMap = nextMap.get(nombreFiltro) || new Map();
+            const nextFilterMap = new Map(filterMap);
+            nextFilterMap.set(campo, data);
+            nextMap.set(nombreFiltro, nextFilterMap);
+            return nextMap;
+        });
+    }
+    /**
+     * @deprecated Usa `getDataServidorSignal(nombreFiltro, campo)` en componentes modernos.
+     * Retorna el snapshot sincrónico actual de metadata (para componentes legacy).
+     */
+    getDataServidorSuscripcion(nombreFiltro, campo) {
+        return this._dataServidorActivos().get(nombreFiltro)?.get(campo);
+    }
+    // --- Opciones Signal (Angular 19+) ---
+    /**
+     * Crea y devuelve un Signal reactivo continuo para observar los valores aplicados de un filtro particular.
+     * @param nombreFiltro Nombre del filtro que se desea escuchar
+     * @param defaultValue Valor de respaldo seguro si aún no se ha inicializado el filtro.
+     */
+    getFiltroSignal(nombreFiltro, defaultValue) {
+        return computed(() => {
+            const value = this._filtrosActivos().get(nombreFiltro);
+            return (value ?? defaultValue);
+        });
+    }
+    /**
+     * Crea y devuelve un Signal reactivo continuo para escuchar la metadata/catálogo recibida del backend para un campo.
+     * @param nombreFiltro Nombre de la colección del filtro principal
+     * @param campo Campo específico (ej: id_usuario, categoria) del que se espera escuchar la lista u objeto servidor
+     * @param defaultValue Valor de respaldo seguro si aún no hay data del servidor.
+     */
+    getDataServidorSignal(nombreFiltro, campo, defaultValue) {
+        return computed(() => {
+            const value = this._dataServidorActivos().get(nombreFiltro)?.get(campo);
+            return (value ?? defaultValue);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FiltroBusquedaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FiltroBusquedaService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FiltroBusquedaService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const QUERY_SERVICE_TOKEN = new InjectionToken('QUERY_SERVICE_TOKEN');
+class FiltroBusquedaComponent {
+    fb = inject(FormBuilder);
+    toastr = inject(ToastrService);
+    filtroBusquedaService = inject(FiltroBusquedaService);
+    queryService = inject(QUERY_SERVICE_TOKEN, { optional: true });
+    opciones = input([]);
+    nombreColeccionInput = input(generateRandomString(10), { alias: 'nombreColeccion' });
+    prefijoConsulta = input('grl');
+    busquedaAutomatica = input(false);
+    opciones$ = input();
+    modificarOpciones$ = input();
+    defaultTab = input(0);
+    /**
+     * @deprecated Paradigma Zero-Output: Inyecta FiltroBusquedaService y usa `getFiltroSignal('nombreColeccion')` para estado en tiempo real, esto evita renderizados innecesarios del padre.
+     */
+    dataFiltro = output();
+    /**
+     * @deprecated Su payload de diccionario crudo desaparecerá pronto (Mejora 2). Migra al nuevo evento `(buscar)` que emite la interfaz `FiltroResultante`.
+     * Se mantiene temporalmente para componentes legacy.
+     */
+    resultados = output();
+    /**
+     * Evento principal explícito de búsqueda (Click en Filtrar). Emite el objeto con metadata y labels.
+     */
+    buscar = output();
+    /**
+     * @deprecated Paradigma Zero-Output: Maneja la finalización de carga a través de los Signals internos del servicio o asume inmediatez de la arquitectura nueva.
+     */
+    cargaCompleta = output();
+    tabActual = signal(0);
+    dataOpcionesNuevo = signal([]);
+    isCargaCompleta = signal(false);
+    frmFiltroBusqueda = this.fb.group({
+        opcion: [0],
+        opciones: this.fb.array([]),
+    });
+    get opcionesTabs() {
+        return this.frmFiltroBusqueda.get('opciones');
+    }
+    get frmGroupSeleccionado() {
+        return this.opcionesTabs.at(this.tabActual()) || this.fb.group({});
+    }
+    getControl(nombre) {
+        return this.frmGroupSeleccionado.get(nombre);
+    }
+    getControlRaiz(nombre) {
+        return this.frmFiltroBusqueda.get(nombre);
+    }
+    getAutocompleteLabel(controlData, value) {
+        if (!value)
+            return '';
+        const config = controlData.autocomplete;
+        if (!config)
+            return '';
+        const list = this.dataServidorSuscripcion[config.data]?.getValue() || [];
+        const item = dataEnLista(list, config.campoValor || controlData.campo, value);
+        if (item) {
+            return this.campoTextEval(controlData, item);
+        }
+        // Fallback search in the filtered results if not in the main list
+        const filteredList = this.filtrados[controlData.campo] || [];
+        const filteredItem = dataEnLista(filteredList, config.campoValor || controlData.campo, value);
+        if (filteredItem) {
+            return this.campoTextEval(controlData, filteredItem);
+        }
+        return value?.toString() || '';
+    }
+    dataServidor = {};
+    dataServidorSuscripcion = {};
+    filtrados = {};
+    inputParaEnviarAutocomplete = new Subject();
+    destroy$ = new Subject();
+    sufixTemporal = '_temporal';
+    tipoValorFuncion = tipoValorFuncion;
+    fechaActual = moment().toDate();
+    constructor() {
+        this.inputParaEnviarAutocomplete.pipe(debounceTime(500), takeUntil(this.destroy$)).subscribe((param) => {
+            this.queryService?.cargar(this, [param.reqQuery], param.reqData, false, this.prefijoConsulta()).then((dRet) => {
+                if (dRet) {
+                    this.filtrados[param.controlData.campo] = dRet[param.reqQuery];
+                    this.filtroBusquedaService.setDataServidorSuscripcion(this.nombreColeccionInput(), param.controlData.campo, dRet[param.reqQuery]);
+                }
+            });
+        });
+    }
+    ngOnInit() {
+        this.tabActual.set(this.defaultTab());
+        this.frmFiltroBusqueda.get('opcion')?.setValue(this.tabActual());
+        if (this.opciones().length > 0) {
+            this.initOpciones(this.opciones());
+        }
+        this.opciones$()?.pipe(takeUntil(this.destroy$)).subscribe(val => {
+            if (val)
+                this.initOpciones(val);
+        });
+        this.modificarOpciones$()?.pipe(takeUntil(this.destroy$)).subscribe(val => {
+            if (val) {
+                Object.keys(val).forEach(x => {
+                    const ev = val[x];
+                    this.actualizarEnFormArray(x, ev.value ?? ev['val'], { disabled: ev.disabled });
+                });
+            }
+        });
+        this.frmFiltroBusqueda.valueChanges.pipe(distinctUntilChanged(), takeUntil(this.destroy$)).subscribe(() => {
+            this.actualizarEstadoService();
+        });
+        this.frmFiltroBusqueda.get('opcion')?.valueChanges.pipe(distinctUntilChanged(), takeUntil(this.destroy$)).subscribe((val) => {
+            if (val !== null) {
+                this.tabActual.set(val);
+                this.cargarDatosFiltroNuevo(val);
+            }
+        });
+    }
+    initOpciones(val) {
+        const nOpc = this.reorganizarOpcionesNuevas(val);
+        this.dataOpcionesNuevo.set(nOpc);
+        this.cargarDatosFiltroNuevo();
+    }
+    reorganizarOpcionesNuevas(val) {
+        return val.filter(tab => !tab.esVisible || tipoValorFuncion(tab.esVisible, true, tab)).map(tab => ({
+            label: tab.label,
+            campos: tab.campos || []
+        }));
+    }
+    async cargarDatosFiltroNuevo(idTab) {
+        const tabIdx = idTab !== undefined ? idTab : this.tabActual();
+        const currentTab = this.dataOpcionesNuevo()[tabIdx];
+        if (!currentTab)
+            return;
+        let llamadasJuntas = [[], [], [], [], []];
+        let llamadasJuntasParams = [{}, {}, {}, {}, {}];
+        const camposDisabled = [];
+        const camposRequired = [];
+        const procesarCampos = (campos, grupoFrm, agrupado = false) => {
+            campos.forEach((campo) => {
+                let val = campo;
+                if (val.modificadorDatos)
+                    val = val.modificadorDatos(val);
+                if (val.disabled)
+                    camposDisabled.push(val.campo);
+                if (val.required)
+                    camposRequired.push(val.campo);
+                if (val.dateRange) {
+                    const [fIni, fFin] = val.dateRange.campo;
+                    grupoFrm[fIni] = val.dateRange.value?.[0] === '*fechaActual*' ? this.fechaActual : (val.dateRange.value?.[0] || '');
+                    grupoFrm[fFin] = val.dateRange.value?.[1] === '*fechaActual*' ? this.fechaActual : (val.dateRange.value?.[1] || '');
+                }
+                else if (val.autocomplete) {
+                    grupoFrm[val.campo + this.sufixTemporal] = val.value || '';
+                    grupoFrm[val.campo] = val.value || '';
+                }
+                else if (val.controlAgrupado) {
+                    grupoFrm[val.campo] = val.value || '';
+                    procesarCampos(val.controlAgrupado, grupoFrm, true);
+                }
+                else {
+                    grupoFrm[val.campo] = val.value === '*fechaActual*' ? this.fechaActual : (val.value || '');
+                }
+                if (val.select || val.autocomplete) {
+                    const config = (val.select || val.autocomplete);
+                    if (agrupado)
+                        config.ordenPeticion = 3;
+                    if (config.customData) {
+                        this.setCustomData(config.data, config.customData);
+                    }
+                    else {
+                        const level = config.ordenPeticion || 0;
+                        if (config.data)
+                            llamadasJuntas[level].push(config.data);
+                        if (val.reqParams?.fields) {
+                            val.reqParams.fields.forEach(f => {
+                                if (grupoFrm[f] && !['*primero*', '*deUsuario*'].includes(grupoFrm[f])) {
+                                    llamadasJuntasParams[level][f] = grupoFrm[f];
+                                }
+                            });
+                        }
+                        if (val.reqParams?.params) {
+                            llamadasJuntasParams[level] = { ...llamadasJuntasParams[level], ...val.reqParams.params };
+                        }
+                    }
+                }
+            });
+        };
+        const targetOpciones = idTab !== undefined ? [this.dataOpcionesNuevo()[idTab]] : this.dataOpcionesNuevo();
+        targetOpciones.forEach(tab => {
+            const grupoFrm = {};
+            procesarCampos(tab.campos, grupoFrm);
+            const group = this.fb.group(grupoFrm);
+            if (idTab === undefined) {
+                this.opcionesTabs.push(group);
+            }
+            else {
+                this.opcionesTabs.setControl(idTab, group);
+            }
+        });
+        getUniqueValues(camposDisabled).forEach(c => this.actualizarEnFormArray(c, undefined, { disabled: true }));
+        establecerQuitarRequired(this.frmGroupSeleccionado, getUniqueValues(camposRequired));
+        const cargaNivel = async (idx) => {
+            const types = getUniqueValues(llamadasJuntas[idx]);
+            if (types.length === 0)
+                return;
+            const dRet = await this.queryService?.cargar(this, types, llamadasJuntasParams[idx], false, this.prefijoConsulta());
+            if (dRet) {
+                this.procesarRetornoDatos(idx, dRet, llamadasJuntasParams);
+            }
+        };
+        await cargaNivel(0);
+        await cargaNivel(1);
+        await cargaNivel(2);
+        await cargaNivel(3);
+        await cargaNivel(4);
+        this.isCargaCompleta.set(true);
+        this.actualizarEstadoService();
+        this.cargaCompleta.emit(true);
+    }
+    actualizarEstadoService() {
+        if (this.isCargaCompleta()) {
+            const res = this.getFiltroResultante();
+            this.filtroBusquedaService.setValue(this.nombreColeccionInput(), res);
+            this.dataFiltro.emit(res.datosFiltro);
+        }
+    }
+    setCustomData(key, data) {
+        if (!this.dataServidorSuscripcion[key]) {
+            this.dataServidorSuscripcion[key] = new BehaviorSubject(null);
+        }
+        this.dataServidorSuscripcion[key].next(data);
+    }
+    procesarRetornoDatos(idxLevel, data, paramsRef) {
+        const tabCampos = this.dataOpcionesNuevo()[this.tabActual()].campos;
+        const affected = tabCampos.filter(c => {
+            const config = c.select || c.autocomplete;
+            return config && (config.ordenPeticion || 0) === idxLevel;
+        });
+        affected.forEach(campo => {
+            const config = (campo.select || campo.autocomplete);
+            const res = data[config.data];
+            if (!this.dataServidorSuscripcion[config.data]) {
+                this.dataServidorSuscripcion[config.data] = new BehaviorSubject(null);
+            }
+            this.dataServidorSuscripcion[config.data].next(res);
+            this.filtroBusquedaService.setDataServidorSuscripcion(this.nombreColeccionInput(), campo.campo, res);
+            if (campo.value === '*primero*' && res?.length > 0) {
+                const firstVal = config.campoValor === '*objeto*' ? res[0] : res[0][config.campoValor || campo.campo];
+                this.actualizarEnFormArray(campo.campo, firstVal);
+                paramsRef.forEach((p, i) => {
+                    if (i > idxLevel && p[campo.campo] === '')
+                        p[campo.campo] = firstVal;
+                });
+            }
+            if (campo.autocomplete) {
+                this.filtrados[campo.campo] = res;
+            }
+            if (campo.change) {
+                this.cambiarSeleccionNuevo(campo);
+            }
+        });
+    }
+    getFiltroResultante() {
+        const rawForm = this.frmGroupSeleccionado.getRawValue();
+        const datosFiltro = { opcion: this.tabActual() };
+        const datosFiltroConLabel = [];
+        const resumenItems = [];
+        const campos = this.dataOpcionesNuevo()[this.tabActual()]?.campos || [];
+        const procesarMetadatos = (campo) => {
+            const meta = { campo: campo.campo, label: campo.label || '', value: null };
+            if (campo.dateRange) {
+                const [fIni, fFin] = campo.dateRange.campo;
+                datosFiltro[fIni] = rawForm[fIni] ? moment(rawForm[fIni]).format('YYYYMMDD') : '';
+                datosFiltro[fFin] = rawForm[fFin] ? moment(rawForm[fFin]).format('YYYYMMDD') : '';
+                if (rawForm[fIni] && rawForm[fFin]) {
+                    meta.value = `${moment(rawForm[fIni]).format('DD/MM/YYYY')} - ${moment(rawForm[fFin]).format('DD/MM/YYYY')}`;
+                    resumenItems.push(`${meta.label}: ${meta.value}`);
+                }
+            }
+            else if (campo.control === 'date') {
+                const val = rawForm[campo.campo];
+                datosFiltro[campo.campo] = val ? moment(val).format('YYYYMMDD') : '';
+                meta.value = val ? moment(val).format('DD/MM/YYYY') : '';
+                if (meta.value)
+                    resumenItems.push(`${meta.label}: ${meta.value}`);
+            }
+            else if (campo.control === 'checkbox') {
+                datosFiltro[campo.campo] = rawForm[campo.campo];
+                meta.value = rawForm[campo.campo];
+                if (meta.value)
+                    resumenItems.push(`${meta.label}`);
+            }
+            else {
+                const val = rawForm[campo.campo];
+                datosFiltro[campo.campo] = val;
+                meta.value = val;
+                if (campo.select || campo.autocomplete) {
+                    const config = (campo.select || campo.autocomplete);
+                    const list = this.dataServidorSuscripcion[config.data]?.getValue() || [];
+                    const item = config.campoValor === '*objeto*' ? val : dataEnLista(list, config.campoValor || campo.campo, val);
+                    if (item) {
+                        meta.list = list;
+                        meta.valueObject = item;
+                        meta.valueString = this.campoTextEval(campo, item);
+                        resumenItems.push(`${meta.label}: ${meta.valueString}`);
+                    }
+                }
+                else if (val !== null && val !== undefined && val !== '') {
+                    resumenItems.push(`${meta.label}: ${val}`);
+                }
+            }
+            datosFiltroConLabel.push(meta);
+        };
+        campos.forEach(c => {
+            if (c.controlAgrupado) {
+                c.controlAgrupado.forEach(sub => procesarMetadatos(sub));
+            }
+            else {
+                procesarMetadatos(c);
+            }
+        });
+        const labelResumen = resumenItems.join(' | ');
+        return { datosFiltro, datosFiltroConLabel, labelResumen };
+    }
+    mostrarValorEnBusqueda = mostrarValorEnBusqueda;
+    campoValorEval(campoFiltro, itemSelect) {
+        if (campoFiltro.select || campoFiltro.autocomplete) {
+            const selectOrAutocomplete = campoFiltro.select ? campoFiltro.select : campoFiltro.autocomplete;
+            if (selectOrAutocomplete?.campoValor === '*objeto*') {
+                return itemSelect;
+            }
+            if (campoFiltro.campo === '*objeto*') {
+                return itemSelect;
+            }
+            if (selectOrAutocomplete && itemSelect[selectOrAutocomplete.campoValor] !== undefined) {
+                return itemSelect[selectOrAutocomplete.campoValor];
+            }
+        }
+        return itemSelect[campoFiltro.campo];
+    }
+    campoTextEval(campoFiltro, itemSelect) {
+        if (campoFiltro.select || campoFiltro.autocomplete) {
+            const selectOrAutocomplete = (campoFiltro.select || campoFiltro.autocomplete);
+            if (selectOrAutocomplete.optionText) {
+                return selectOrAutocomplete.optionText(itemSelect);
+            }
+            if (selectOrAutocomplete.camposText) {
+                return selectOrAutocomplete.camposText.map(c => itemSelect[c]).join(' ');
+            }
+            return itemSelect[campoFiltro.campo];
+        }
+        return '';
+    }
+    concatenarCadenasArray(array, objData) {
+        if (typeof array === 'string') {
+            return objData[array];
+        }
+        const nTxtArray = [];
+        array.forEach(campo => {
+            if (campo.charAt(0) === '*') {
+                nTxtArray.push(campo.replace('*', ''));
+            }
+            else {
+                nTxtArray.push(objData[campo]);
+            }
+        });
+        return nTxtArray.join(' ');
+    }
+    filtrarData() {
+        if (this.frmGroupSeleccionado.invalid) {
+            const errors = getFormValidationErrors(this.frmGroupSeleccionado);
+            const labels = errors.map(e => {
+                const found = this.dataOpcionesNuevo()[this.tabActual()].campos.find(c => c.campo === e.control);
+                return found?.label || e.control;
+            });
+            this.toastr.error(`Campos requeridos:<br>${labels.join(', ')}`, undefined, { enableHtml: true });
+            return;
+        }
+        this.actualizarEstadoService();
+        const res = this.getFiltroResultante();
+        // Soporte temporal a usos actuales
+        this.resultados.emit(res.datosFiltro);
+        // Nueva mejora 2 (Emisión completa)
+        this.buscar.emit(res);
+    }
+    actualizarEnFormArray(name, value, extra) {
+        this.opcionesTabs.controls.forEach((control) => {
+            const fc = control.get(name);
+            if (fc) {
+                if (value !== undefined)
+                    fc.setValue(value, { emitEvent: false });
+                if (extra?.disabled === true)
+                    fc.disable();
+                if (extra?.disabled === false)
+                    fc.enable();
+                fc.updateValueAndValidity();
+            }
+        });
+    }
+    accionPosteriorCambioAutocomplete(controlData, valControl) {
+        const list = this.dataServidorSuscripcion[controlData.autocomplete?.data]?.getValue() || [];
+        this.filtrados[controlData.campo] = list.filter((algo) => {
+            let nTextVerif = this.concatenarCadenasArray(controlData.autocomplete?.camposText, algo);
+            if (controlData.autocomplete?.searchFields) {
+                const nTextVerifExtra = this.concatenarCadenasArray(controlData.autocomplete.searchFields, algo);
+                nTextVerif = nTextVerif.concat(nTextVerifExtra);
+            }
+            const textBuscar = valControl && typeof valControl === 'string' ? valControl.toLowerCase() : null;
+            if (nTextVerif) {
+                return nTextVerif.toLowerCase().includes(textBuscar) ? algo : null;
+            }
+            return null;
+        });
+    }
+    cambiarNuevo(campo, val) {
+        if (campo.autocomplete) {
+            const valControl = this.frmGroupSeleccionado.get(campo.campo + this.sufixTemporal)?.value;
+            if (!valControl) {
+                this.filtrados[campo.campo] = this.dataServidorSuscripcion[campo.autocomplete.data]?.getValue() || [];
+            }
+            else {
+                const config = campo.autocomplete;
+                if (config.campotxtBuscar && val && val.length > (config.campotxtBuscarLength || 3)) {
+                    const reqQuery = config.data;
+                    let reqData = {};
+                    if (campo.reqParams?.fields) {
+                        campo.reqParams.fields.forEach(f => {
+                            const ctrl = this.buscarControl(f);
+                            reqData[ctrl?.aliasCampoEnviar || f] = this.frmGroupSeleccionado.get(f)?.value;
+                        });
+                    }
+                    reqData[config.campotxtBuscar || campo.campo] = val;
+                    if (campo.reqParams?.params)
+                        Object.assign(reqData, campo.reqParams.params);
+                    this.inputParaEnviarAutocomplete.next({ reqQuery, reqData, controlData: campo });
+                }
+                else {
+                    this.accionPosteriorCambioAutocomplete(campo, valControl);
+                }
+            }
+        }
+    }
+    cambiarSeleccionNuevo(campo, event) {
+        const val = event?.option?.value ?? event?.value ?? (event?.target ? event.target.value : event);
+        if (val !== undefined) {
+            this.actualizarEnFormArray(campo.campo, val);
+            if (campo.autocomplete) {
+                const config = campo.autocomplete;
+                const list = this.dataServidorSuscripcion[config.data]?.getValue() || [];
+                const item = config.campoValor === '*objeto*' ? val : dataEnLista(list, config.campoValor || campo.campo, val);
+                if (item) {
+                    const text = this.campoTextEval(campo, item);
+                    this.actualizarEnFormArray(campo.campo + this.sufixTemporal, text);
+                }
+            }
+            const groupedMatch = this.dataOpcionesNuevo()[this.tabActual()].campos
+                .filter(c => c.controlAgrupado)
+                .find(c => c.controlAgrupado?.some(sub => sub.campo === campo.campo));
+            if (groupedMatch)
+                this.frmGroupSeleccionado.get(groupedMatch.campo)?.setValue(val);
+        }
+        if (campo.change?.filterFields) {
+            campo.change.filterFields.forEach(target => {
+                const targetMeta = this.buscarControl(target);
+                if (targetMeta) {
+                    const params = this.generarParams(targetMeta, campo);
+                    this.actualizarEnFormArray(target, null);
+                    this.actualizarEnFormArray(target + this.sufixTemporal, null);
+                    this.dataServidorSuscripcion[target]?.next(null);
+                    const config = (targetMeta.select || targetMeta.autocomplete);
+                    if (config?.data) {
+                        this.queryService?.cargar(this, [config.data], params, false, this.prefijoConsulta()).then(d => {
+                            if (d) {
+                                const res = d[config.data];
+                                this.actualizarEnFormArray(target, targetMeta.value || null);
+                                this.actualizarEnFormArray(target + this.sufixTemporal, targetMeta.value || null);
+                                if (!this.dataServidorSuscripcion[config.data]) {
+                                    this.dataServidorSuscripcion[config.data] = new BehaviorSubject(null);
+                                }
+                                this.dataServidorSuscripcion[config.data].next(res);
+                                this.filtrados[target] = res;
+                            }
+                        });
+                    }
+                }
+            });
+        }
+        else if (campo.change?.filter) {
+            setTimeout(() => this.filtrarData(), 1);
+        }
+    }
+    buscarControl(campo) {
+        const rootCampos = this.dataOpcionesNuevo()[this.tabActual()].campos;
+        let found = rootCampos.find(c => c.campo === campo);
+        if (!found) {
+            found = rootCampos.filter(c => c.controlAgrupado).flatMap(c => c.controlAgrupado).find(c => c.campo === campo);
+        }
+        return found;
+    }
+    generarParams(meta, trigger) {
+        const params = {};
+        if (meta.reqParams?.fields) {
+            meta.reqParams.fields.forEach(f => {
+                const ctrl = this.buscarControl(f);
+                params[ctrl?.aliasCampoEnviar || f] = this.frmGroupSeleccionado.get(f)?.value;
+            });
+        }
+        else {
+            params[meta.aliasCampoEnviar || trigger.campo || meta.campo] = this.frmGroupSeleccionado.get(trigger.campo || meta.campo)?.value;
+        }
+        if (meta.reqParams?.params)
+            Object.assign(params, meta.reqParams.params);
+        return params;
+    }
+    limpiarAutocomplete(campo, event) {
+        this.actualizarEnFormArray(campo.campo, '');
+        this.actualizarEnFormArray(campo.campo + this.sufixTemporal, '');
+        this.cambiarSeleccionNuevo(campo, { option: { value: '' } });
+        event.preventDefault();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FiltroBusquedaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FiltroBusquedaComponent, isStandalone: true, selector: "jvs-filtro-busqueda", inputs: { opciones: { classPropertyName: "opciones", publicName: "opciones", isSignal: true, isRequired: false, transformFunction: null }, nombreColeccionInput: { classPropertyName: "nombreColeccionInput", publicName: "nombreColeccion", isSignal: true, isRequired: false, transformFunction: null }, prefijoConsulta: { classPropertyName: "prefijoConsulta", publicName: "prefijoConsulta", isSignal: true, isRequired: false, transformFunction: null }, busquedaAutomatica: { classPropertyName: "busquedaAutomatica", publicName: "busquedaAutomatica", isSignal: true, isRequired: false, transformFunction: null }, opciones$: { classPropertyName: "opciones$", publicName: "opciones$", isSignal: true, isRequired: false, transformFunction: null }, modificarOpciones$: { classPropertyName: "modificarOpciones$", publicName: "modificarOpciones$", isSignal: true, isRequired: false, transformFunction: null }, defaultTab: { classPropertyName: "defaultTab", publicName: "defaultTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataFiltro: "dataFiltro", resultados: "resultados", buscar: "buscar", cargaCompleta: "cargaCompleta" }, host: { classAttribute: "jvsFiltroBusqueda" }, ngImport: i0, template: "@if (isCargaCompleta()) {\n  <div class=\"filtroBusqueda w-full\">\n    <div class=\"border-none p-0 flex flex-col\">\n\n      @if (dataOpcionesNuevo().length === 1) {\n        <div class=\"flex-1 flex items-end max-sm:flex-col flex-wrap gap-2\">\n            <ng-container [ngTemplateOutlet]=\"verOpcionesT\"></ng-container>\n        </div>\n      } @else if (dataOpcionesNuevo().length > 1) {\n        <div class=\"flex-1 flex flex-col flex-wrap gap-2 border\">\n            <mat-tab-group\n                [selectedIndex]=\"tabActual()\"\n                (selectedIndexChange)=\"getControlRaiz('opcion').setValue($event)\"\n                class=\"flex-1 flex flex-wrap\"\n                [mat-stretch-tabs]=\"false\"\n                dynamicHeight\n                mat-align-tabs=\"start\"\n            >\n                @for (item of dataOpcionesNuevo(); track $index) {\n                    <mat-tab [aria-label]=\"(tabActual() === $index) ? 'primary' : ''\">\n                        <ng-template mat-tab-label>\n                            @if (tabActual() === $index) {\n                                <mat-icon class=\"icon-xs\" svgIcon=\"roundVerified\"></mat-icon>\n                            }\n                            &nbsp;{{ item.label }}\n                        </ng-template>\n\n                        <div class=\"mx-2 mt-0 pt-0 flex flex-col items-end sm:flex-row flex-wrap gap-2\">\n                            <ng-container [ngTemplateOutlet]=\"verOpcionesT\"></ng-container>\n                        </div>\n                    </mat-tab>\n                }\n            </mat-tab-group>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #verOpcionesT>\n    @for (campo of dataOpcionesNuevo()[tabActual()]?.campos; track campo.campo) {\n        <ng-container [ngTemplateOutletContext]=\"{controlData: campo}\" [ngTemplateOutlet]=\"controlesFormularioNuevo\"></ng-container>\n    }\n    <ng-container [ngTemplateOutlet]=\"botonFiltrar\"></ng-container>\n</ng-template>\n\n<ng-template #botonFiltrar>\n    <button (click)=\"filtrarData()\"\n        class=\"flex items-center justify-center bg-primary text-primary-contrast font-bold uppercase text-xs px-2 py-1 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150\"\n        matRipple type=\"button\"\n        [disabled]=\"!isCargaCompleta()\"\n    >\n        <mat-icon class=\"icon-xs\" svgIcon=\"roundFilterAlt\"></mat-icon>&nbsp;\n        <span>Filtrar</span>\n    </button>\n</ng-template>\n\n<ng-template #controlesFormularioNuevo let-controlData=\"controlData\">\n    @switch (controlData.control) {\n        @case ('controlAgrupado') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputControlAgrupado, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('select') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputSelect, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('autocomplete') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputAutocomplete, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('date') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputDate, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('date_range') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputDateRange, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('checkbox') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputCheckBox, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @default {\n            @if (controlData.control === 'text' || controlData.control === 'number') {\n                <ng-container [ngTemplateOutletContext]=\"{template: inputTextNumber, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n            }\n        }\n    }\n</ng-template>\n\n<ng-template #contenedorInput let-template=\"template\" let-controlData=\"controlData\">\n    <fieldset [class.flex-auto]=\"!controlData.cssClass\" [class]=\"controlData.cssClass\" class=\"appearance-none contenedorCampo relative\">\n        <legend>\n            <label [for]=\"controlData.campo\">{{ controlData.label }}@if(controlData.required){<span class=\"text-red-700 font-bold\"> *</span>}</label>\n        </legend>\n        <ng-container [ngTemplateOutletContext]=\"{controlData: controlData}\" [ngTemplateOutlet]=\"template\"></ng-container>\n    </fieldset>\n</ng-template>\n\n<ng-template #inputSelect let-controlData=\"controlData\">\n    <select [formControl]=\"getControl(controlData.campo)\"\n        (change)=\"cambiarSeleccionNuevo(controlData, $event);\"\n        [class]=\"controlData.select?.cssClass?.class\"\n        [id]=\"controlData.campo\"\n        [required]=\"controlData.required\"\n        [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n    >\n        @if (controlData.select?.textoCuandoNulo) {\n            <option value=\"\">{{ controlData.select?.textoCuandoNulo }}</option>\n        }\n        @for (itemSelect of dataServidorSuscripcion[controlData.select?.data!] | async; track $index) {\n            <option [class]=\"controlData.select?.cssClass?.option\" [value]=\"campoValorEval(controlData, itemSelect)\">\n                {{ campoTextEval(controlData, itemSelect) }}\n            </option>\n        }\n    </select>\n</ng-template>\n\n<ng-template #inputControlAgrupado let-controlData=\"controlData\">\n    <div class=\"flex items-center campos-container\">\n        @for (sub of controlData.controlAgrupado; track sub.campo) {\n            @switch (sub.control) {\n                @case ('select') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputSelect\"></ng-container>\n                }\n                @case ('autocomplete') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputAutocomplete\"></ng-container>\n                }\n                @case ('date') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputDate\"></ng-container>\n                }\n                @case ('date_range') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputDateRange\"></ng-container>\n                }\n                @case ('checkbox') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputCheckBox\"></ng-container>\n                }\n                @default {\n                    @if (sub.control === 'text' || sub.control === 'number') {\n                        <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputTextNumber\"></ng-container>\n                    }\n                }\n            }\n        }\n    </div>\n</ng-template>\n\n<ng-template #inputAutocomplete let-controlData=\"controlData\">\n    <div class=\"flex items-center formcontrol-container\">\n        <input [formControl]=\"getControl(controlData.campo + sufixTemporal)\"\n            (input)=\"cambiarNuevo(controlData, $any($event.target).value)\"\n            [matAutocomplete]=\"auto\"\n            autocomplete=\"off\"\n            [id]=\"controlData.campo\"\n            placeholder=\"{{ controlData.autocomplete?.textoCuandoNulo ?? controlData.label }}\"\n            [required]=\"controlData.required\"\n            [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n        >\n        <mat-autocomplete #auto=\"matAutocomplete\"\n            (optionSelected)=\"cambiarSeleccionNuevo(controlData, $event)\"\n            [panelWidth]=\"'auto'\"\n            [displayWith]=\"getAutocompleteLabel.bind(this, controlData)\"\n        >\n            @for (itemSelect of filtrados[controlData.campo]; track $index) {\n                <mat-option [class]=\"controlData.autocomplete?.cssClass?.option\" [value]=\"campoValorEval(controlData, itemSelect)\">\n                    @if (controlData.autocomplete?.optionInnerHtml) {\n                        <div [innerHTML]=\"controlData.autocomplete?.optionInnerHtml!(itemSelect)\"></div>\n                    } @else {\n                        {{ campoTextEval(controlData, itemSelect) }}\n                    }\n                </mat-option>\n            }\n        </mat-autocomplete>\n\n        <div class=\"flex items-center justify-start\">\n            <button (click)=\"limpiarAutocomplete(controlData, $event)\" class=\"boton-circular-gris\"\n                matRipple\n                type=\"button\"\n            >\n                <mat-icon [svgIcon]=\"(getControl(controlData.campo).value ? 'roundCancel' : 'roundSearch')\" class=\"icon-2xs\"></mat-icon>\n            </button>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #inputTextNumber let-controlData=\"controlData\">\n    <input (keyup.enter)=\"controlData.keyUpEnter ? filtrarData() : null\"\n        [formControl]=\"getControl(controlData.campo)\"\n        [type]=\"controlData.control\"\n        autocomplete=\"off\"\n        [id]=\"controlData.campo\"\n        placeholder=\"{{ controlData.label }}\"\n        [required]=\"controlData.required\"\n        [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n    >\n</ng-template>\n\n<ng-template #inputDate let-controlData=\"controlData\">\n    <div class=\"flex items-center date-container\">\n        <input (keyup.enter)=\"controlData.keyUpEnter ? filtrarData() : null\"\n            [formControl]=\"getControl(controlData.campo)\"\n            (dateChange)=\"cambiarSeleccionNuevo(controlData, $event)\"\n            [matDatepicker]=\"i\"\n            autocomplete=\"off\"\n            [id]=\"controlData.campo\"\n            placeholder=\"{{ controlData.label }}\"\n            type=\"text\"\n            [required]=\"controlData.required\"\n            [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n        >\n        <mat-datepicker-toggle [for]=\"i\" class=\"icon-xs\" matSuffix></mat-datepicker-toggle>\n        <mat-datepicker #i></mat-datepicker>\n    </div>\n</ng-template>\n\n<ng-template #inputDateRange let-controlData=\"controlData\">\n    <div class=\"flex items-center daterange-container\">\n        <mat-date-range-input [rangePicker]=\"i\">\n            <input [formControl]=\"getControl(controlData.dateRange?.campo![0])\" matStartDate placeholder=\"Desde\">\n            <input [formControl]=\"getControl(controlData.dateRange?.campo![1])\" matEndDate placeholder=\"Hasta\">\n        </mat-date-range-input>\n        <mat-datepicker-toggle [for]=\"i\" class=\"icon-xs\"></mat-datepicker-toggle>\n        <mat-date-range-picker #i></mat-date-range-picker>\n    </div>\n</ng-template>\n\n<ng-template #inputCheckBox let-controlData=\"controlData\">\n    <input [formControl]=\"getControl(controlData.campo)\"\n        [id]=\"controlData.campo\"\n        [required]=\"controlData.required\"\n        [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n        type=\"checkbox\"\n        (change)=\"cambiarSeleccionNuevo(controlData, $event)\"\n    >\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i7.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i8.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: TextFieldModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FiltroBusquedaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'jvs-filtro-busqueda', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatAutocompleteModule,
+                        MatCheckboxModule,
+                        MatDatepickerModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatOptionModule,
+                        MatRadioModule,
+                        MatRippleModule,
+                        MatSelectModule,
+                        MatTabsModule,
+                        TextFieldModule,
+                    ], host: {
+                        class: 'jvsFiltroBusqueda',
+                    }, template: "@if (isCargaCompleta()) {\n  <div class=\"filtroBusqueda w-full\">\n    <div class=\"border-none p-0 flex flex-col\">\n\n      @if (dataOpcionesNuevo().length === 1) {\n        <div class=\"flex-1 flex items-end max-sm:flex-col flex-wrap gap-2\">\n            <ng-container [ngTemplateOutlet]=\"verOpcionesT\"></ng-container>\n        </div>\n      } @else if (dataOpcionesNuevo().length > 1) {\n        <div class=\"flex-1 flex flex-col flex-wrap gap-2 border\">\n            <mat-tab-group\n                [selectedIndex]=\"tabActual()\"\n                (selectedIndexChange)=\"getControlRaiz('opcion').setValue($event)\"\n                class=\"flex-1 flex flex-wrap\"\n                [mat-stretch-tabs]=\"false\"\n                dynamicHeight\n                mat-align-tabs=\"start\"\n            >\n                @for (item of dataOpcionesNuevo(); track $index) {\n                    <mat-tab [aria-label]=\"(tabActual() === $index) ? 'primary' : ''\">\n                        <ng-template mat-tab-label>\n                            @if (tabActual() === $index) {\n                                <mat-icon class=\"icon-xs\" svgIcon=\"roundVerified\"></mat-icon>\n                            }\n                            &nbsp;{{ item.label }}\n                        </ng-template>\n\n                        <div class=\"mx-2 mt-0 pt-0 flex flex-col items-end sm:flex-row flex-wrap gap-2\">\n                            <ng-container [ngTemplateOutlet]=\"verOpcionesT\"></ng-container>\n                        </div>\n                    </mat-tab>\n                }\n            </mat-tab-group>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<ng-template #verOpcionesT>\n    @for (campo of dataOpcionesNuevo()[tabActual()]?.campos; track campo.campo) {\n        <ng-container [ngTemplateOutletContext]=\"{controlData: campo}\" [ngTemplateOutlet]=\"controlesFormularioNuevo\"></ng-container>\n    }\n    <ng-container [ngTemplateOutlet]=\"botonFiltrar\"></ng-container>\n</ng-template>\n\n<ng-template #botonFiltrar>\n    <button (click)=\"filtrarData()\"\n        class=\"flex items-center justify-center bg-primary text-primary-contrast font-bold uppercase text-xs px-2 py-1 rounded shadow-md hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150\"\n        matRipple type=\"button\"\n        [disabled]=\"!isCargaCompleta()\"\n    >\n        <mat-icon class=\"icon-xs\" svgIcon=\"roundFilterAlt\"></mat-icon>&nbsp;\n        <span>Filtrar</span>\n    </button>\n</ng-template>\n\n<ng-template #controlesFormularioNuevo let-controlData=\"controlData\">\n    @switch (controlData.control) {\n        @case ('controlAgrupado') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputControlAgrupado, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('select') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputSelect, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('autocomplete') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputAutocomplete, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('date') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputDate, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('date_range') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputDateRange, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @case ('checkbox') {\n            <ng-container [ngTemplateOutletContext]=\"{template: inputCheckBox, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n        }\n        @default {\n            @if (controlData.control === 'text' || controlData.control === 'number') {\n                <ng-container [ngTemplateOutletContext]=\"{template: inputTextNumber, controlData: controlData}\" [ngTemplateOutlet]=\"contenedorInput\"></ng-container>\n            }\n        }\n    }\n</ng-template>\n\n<ng-template #contenedorInput let-template=\"template\" let-controlData=\"controlData\">\n    <fieldset [class.flex-auto]=\"!controlData.cssClass\" [class]=\"controlData.cssClass\" class=\"appearance-none contenedorCampo relative\">\n        <legend>\n            <label [for]=\"controlData.campo\">{{ controlData.label }}@if(controlData.required){<span class=\"text-red-700 font-bold\"> *</span>}</label>\n        </legend>\n        <ng-container [ngTemplateOutletContext]=\"{controlData: controlData}\" [ngTemplateOutlet]=\"template\"></ng-container>\n    </fieldset>\n</ng-template>\n\n<ng-template #inputSelect let-controlData=\"controlData\">\n    <select [formControl]=\"getControl(controlData.campo)\"\n        (change)=\"cambiarSeleccionNuevo(controlData, $event);\"\n        [class]=\"controlData.select?.cssClass?.class\"\n        [id]=\"controlData.campo\"\n        [required]=\"controlData.required\"\n        [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n    >\n        @if (controlData.select?.textoCuandoNulo) {\n            <option value=\"\">{{ controlData.select?.textoCuandoNulo }}</option>\n        }\n        @for (itemSelect of dataServidorSuscripcion[controlData.select?.data!] | async; track $index) {\n            <option [class]=\"controlData.select?.cssClass?.option\" [value]=\"campoValorEval(controlData, itemSelect)\">\n                {{ campoTextEval(controlData, itemSelect) }}\n            </option>\n        }\n    </select>\n</ng-template>\n\n<ng-template #inputControlAgrupado let-controlData=\"controlData\">\n    <div class=\"flex items-center campos-container\">\n        @for (sub of controlData.controlAgrupado; track sub.campo) {\n            @switch (sub.control) {\n                @case ('select') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputSelect\"></ng-container>\n                }\n                @case ('autocomplete') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputAutocomplete\"></ng-container>\n                }\n                @case ('date') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputDate\"></ng-container>\n                }\n                @case ('date_range') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputDateRange\"></ng-container>\n                }\n                @case ('checkbox') {\n                    <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputCheckBox\"></ng-container>\n                }\n                @default {\n                    @if (sub.control === 'text' || sub.control === 'number') {\n                        <ng-container [ngTemplateOutletContext]=\"{controlData: sub}\" [ngTemplateOutlet]=\"inputTextNumber\"></ng-container>\n                    }\n                }\n            }\n        }\n    </div>\n</ng-template>\n\n<ng-template #inputAutocomplete let-controlData=\"controlData\">\n    <div class=\"flex items-center formcontrol-container\">\n        <input [formControl]=\"getControl(controlData.campo + sufixTemporal)\"\n            (input)=\"cambiarNuevo(controlData, $any($event.target).value)\"\n            [matAutocomplete]=\"auto\"\n            autocomplete=\"off\"\n            [id]=\"controlData.campo\"\n            placeholder=\"{{ controlData.autocomplete?.textoCuandoNulo ?? controlData.label }}\"\n            [required]=\"controlData.required\"\n            [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n        >\n        <mat-autocomplete #auto=\"matAutocomplete\"\n            (optionSelected)=\"cambiarSeleccionNuevo(controlData, $event)\"\n            [panelWidth]=\"'auto'\"\n            [displayWith]=\"getAutocompleteLabel.bind(this, controlData)\"\n        >\n            @for (itemSelect of filtrados[controlData.campo]; track $index) {\n                <mat-option [class]=\"controlData.autocomplete?.cssClass?.option\" [value]=\"campoValorEval(controlData, itemSelect)\">\n                    @if (controlData.autocomplete?.optionInnerHtml) {\n                        <div [innerHTML]=\"controlData.autocomplete?.optionInnerHtml!(itemSelect)\"></div>\n                    } @else {\n                        {{ campoTextEval(controlData, itemSelect) }}\n                    }\n                </mat-option>\n            }\n        </mat-autocomplete>\n\n        <div class=\"flex items-center justify-start\">\n            <button (click)=\"limpiarAutocomplete(controlData, $event)\" class=\"boton-circular-gris\"\n                matRipple\n                type=\"button\"\n            >\n                <mat-icon [svgIcon]=\"(getControl(controlData.campo).value ? 'roundCancel' : 'roundSearch')\" class=\"icon-2xs\"></mat-icon>\n            </button>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #inputTextNumber let-controlData=\"controlData\">\n    <input (keyup.enter)=\"controlData.keyUpEnter ? filtrarData() : null\"\n        [formControl]=\"getControl(controlData.campo)\"\n        [type]=\"controlData.control\"\n        autocomplete=\"off\"\n        [id]=\"controlData.campo\"\n        placeholder=\"{{ controlData.label }}\"\n        [required]=\"controlData.required\"\n        [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n    >\n</ng-template>\n\n<ng-template #inputDate let-controlData=\"controlData\">\n    <div class=\"flex items-center date-container\">\n        <input (keyup.enter)=\"controlData.keyUpEnter ? filtrarData() : null\"\n            [formControl]=\"getControl(controlData.campo)\"\n            (dateChange)=\"cambiarSeleccionNuevo(controlData, $event)\"\n            [matDatepicker]=\"i\"\n            autocomplete=\"off\"\n            [id]=\"controlData.campo\"\n            placeholder=\"{{ controlData.label }}\"\n            type=\"text\"\n            [required]=\"controlData.required\"\n            [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n        >\n        <mat-datepicker-toggle [for]=\"i\" class=\"icon-xs\" matSuffix></mat-datepicker-toggle>\n        <mat-datepicker #i></mat-datepicker>\n    </div>\n</ng-template>\n\n<ng-template #inputDateRange let-controlData=\"controlData\">\n    <div class=\"flex items-center daterange-container\">\n        <mat-date-range-input [rangePicker]=\"i\">\n            <input [formControl]=\"getControl(controlData.dateRange?.campo![0])\" matStartDate placeholder=\"Desde\">\n            <input [formControl]=\"getControl(controlData.dateRange?.campo![1])\" matEndDate placeholder=\"Hasta\">\n        </mat-date-range-input>\n        <mat-datepicker-toggle [for]=\"i\" class=\"icon-xs\"></mat-datepicker-toggle>\n        <mat-date-range-picker #i></mat-date-range-picker>\n    </div>\n</ng-template>\n\n<ng-template #inputCheckBox let-controlData=\"controlData\">\n    <input [formControl]=\"getControl(controlData.campo)\"\n        [id]=\"controlData.campo\"\n        [required]=\"controlData.required\"\n        [class.border-b-red-700]=\"getControl(controlData.campo).invalid\"\n        type=\"checkbox\"\n        (change)=\"cambiarSeleccionNuevo(controlData, $event)\"\n    >\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FiltroBusquedaComponent, FiltroBusquedaService, QUERY_SERVICE_TOKEN };
+//# sourceMappingURL=jvsoft-components-filtro-busqueda.mjs.map