@guajiritos/general-autocomplete 20.0.0 → 20.0.2

package/fesm2022/guajiritos-general-autocomplete.mjs

@@ -7,7 +7,7 @@ import { Injectable, Pipe, signal, EventEmitter, forwardRef, Input, Output, View
 import * as i6 from '@angular/forms';
 import { UntypedFormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i10 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import * as i8 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4 from '@angular/material/form-field';
@@ -20,7 +20,7 @@ import * as i9 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { debounceTime, finalize } from 'rxjs';
+import { Subject, debounceTime, tap, switchMap, of, catchError, from, takeUntil, finalize } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const GENERAL_DISPLAY_OPTIONS = {
@@ -46,10 +46,10 @@ class UtilsService {
             return prev ? prev[curr] : null;
         }, obj || self);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: UtilsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UtilsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: UtilsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UtilsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -78,10 +78,10 @@ class ResolvePropertyPath {
         });
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ResolvePropertyPath, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: ResolvePropertyPath, isStandalone: true, name: "resolvePropertyPath" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ResolvePropertyPath, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: ResolvePropertyPath, isStandalone: true, name: "resolvePropertyPath" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ResolvePropertyPath, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ResolvePropertyPath, decorators: [{
             type: Pipe,
             args: [{
                     name: 'resolvePropertyPath',
@@ -95,273 +95,557 @@ class GuajiritosGeneralAutocomplete {
         this._zone = _zone;
         this._destroyRef = _destroyRef;
         this.translateService = translateService;
-        this.wasSelected = false;
-        this.firstCall = true;
-        this.selectedElement = null;
+        // --- Propiedades Privadas ---
+        this._isOptionSelected = false; // Indica si la última actualización del input fue por una selección explícita desde el autocompletado
+        this._userInteracted = false;
+        this._clearDataSubject = new Subject();
+        this._doFocusSubject = new Subject();
+        this._selectedElement = null; // Almacena el objeto completo seleccionado
         this._url = null;
-        this.restrictionsFilters = [];
-        this.disabled = signal(false);
-        this.loading = signal(false);
-        this.required = signal(false);
-        this.filteredOptions = signal([]);
-        this.originalOptions = signal([]);
-        this.notAllowedOption = signal(null);
-        this.component = new UntypedFormControl({ value: null, disabled: false });
-        /**
-         * Possible values 'never', 'auto' or 'always'
-         */
-        this.floatLabel = 'auto';
-        this.color = 'accent';
-        this.appearance = 'outline';
-        this.subscriptSizing = 'dynamic';
+        this._serviceConfig = null;
+        this._limit = 20;
+        this._offset = 0;
+        this._restrictionsFilters = [];
+        this._lastSearchText = ""; // Almacena el texto usado en la última búsqueda de API exitosa
+        this._cancelPendingRequest$ = new Subject();
+        // --- Señales Públicas (Signals) ---
+        this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.required = signal(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+        this.filteredOptions = signal([], ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+        this.originalOptions = signal([], ...(ngDevMode ? [{ debugName: "originalOptions" }] : []));
+        this.notAllowedOption = signal(null, ...(ngDevMode ? [{ debugName: "notAllowedOption" }] : []));
+        this.component = new UntypedFormControl({
+            value: null,
+            disabled: false,
+        });
+        this.hasMore = signal(true, ...(ngDevMode ? [{ debugName: "hasMore" }] : [])); // Indica si hay más datos para cargar
+        // --- Inputs ---
+        this.floatLabel = "auto";
+        this.color = "accent";
+        this.appearance = "outline";
+        this.subscriptSizing = "dynamic";
         this.debounceTimeValue = 300;
-        this.label = 'Seleccione';
+        this.label = "Seleccione";
         this.showLabel = true;
-        this.placeholder = 'Seleccione un elemento';
-        this.field = ['name'];
-        this.filterString = 'filter[$and][name][$like]';
+        this.placeholder = "Seleccione un elemento";
+        this.field = ["name"];
+        this.filterString = "filter[$and][name][$like]";
         this.displayOptions = GENERAL_DISPLAY_OPTIONS;
         this.withoutPaddingBottom = true;
         this.valueId = false;
         this.showSuffix = false;
         this.requireSelection = false;
-        this.suffixIcon = 'search';
+        this.suffixIcon = "search";
         this.removeProperties = [];
-        this.modifyResultFn = () => null;
+        this.modifyResultFn = (options) => options;
+        // --- Outputs ---
         this.SelectElement = new EventEmitter();
         this.clearElement = new EventEmitter();
-        this.propagateChange = (_) => {
-        };
+        // --- Métodos de ControlValueAccessor ---
+        this.propagateChange = (_) => { };
         /**
-         * Función para mostrar los elementos a seleccionar
-         *
-         * @param value - Valor a mostrar
+         * Función para mostrar los elementos seleccionados
          */
         this.displayFn = (value) => {
-            if (value) {
-                if (typeof value === 'string') {
-                    return value;
+            if (!value) {
+                return "";
+            }
+            // Si el valor ya es una cadena, devuélvelo directamente
+            if (typeof value === "string") {
+                return value;
+            }
+            let displayText = "";
+            const options = this.displayOptions || GENERAL_DISPLAY_OPTIONS;
+            options?.firthLabel?.forEach((field) => {
+                if (field?.type === DisplayOptionItemType.PATH) {
+                    displayText +=
+                        UtilsService.resolvePropertyByPath(value, field?.path) || "";
                 }
-                let displayText = '';
-                if (!this.displayOptions) {
-                    this.displayOptions = GENERAL_DISPLAY_OPTIONS;
+                else {
+                    displayText += field?.divider || "";
                 }
-                this.displayOptions?.firthLabel?.forEach((field) => {
-                    if (field?.type === DisplayOptionItemType.PATH) {
-                        displayText += UtilsService.resolvePropertyByPath(value, field?.path);
-                    }
-                    else {
-                        displayText += field?.divider;
-                    }
-                });
-                return displayText;
-            }
+            });
+            return displayText;
         };
     }
+    // --- Setters para Inputs ---
     set url(data) {
         if (data) {
             this._url = data;
-            this.subscribeComponentChanges();
+            // Suscribirse a los cambios del componente una vez que la URL está disponible
+            this.subscribeToComponentChanges();
         }
     }
-    set clearData(value) {
-        this.clearData$ = value;
-        if (this.clearData$) {
-            this.clearData$
-                .pipe(takeUntilDestroyed(this._destroyRef))
-                .subscribe({
-                next: () => {
-                    this.component.setValue(null, { emitEvent: false });
-                    this.selectedElement = null;
-                    this.SelectElement.emit(null);
-                    this.filteredOptions.set([]);
-                    this.propagateChange(null);
-                }
-            });
+    // --- Setters para Inputs ---
+    set serviceConfig(data) {
+        if (data) {
+            console.log(data);
+            this._serviceConfig = data;
+            // Suscribirse a los cambios del componente una vez que la URL está disponible
+            this.subscribeToComponentChanges();
         }
     }
+    set limit(value) {
+        if (value && !isNaN(value)) {
+            this._limit = value;
+        }
+    }
+    set clearData(value) {
+        this._clearDataSubject = value;
+        this._clearDataSubject
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe({
+            next: () => {
+                this.clearInternalState();
+            },
+        });
+    }
     set initialValue(value) {
-        this.component.setValue(value);
+        // Si el valor inicial es el mismo que el valor actual del control, no hacer nada para evitar bucles
+        if (value === this.component.value) {
+            return;
+        }
+        this._selectedElement = value;
+        this._isOptionSelected = !!value; // Marcar como seleccionado si hay un valor inicial
+        // Establecer el valor en el formControl sin emitir el evento
+        // para evitar que subscribeToComponentChanges reaccione a esta carga inicial.
+        this.component.setValue(value, { emitEvent: false });
+        // Actualizar _lastSearchText basado en el valor inicial
+        if (value) {
+            this._lastSearchText = this.displayFn(value);
+        }
+        else {
+            this._lastSearchText = "";
+        }
     }
     /**
-     * Añade o elimina restricciones para la búsqueda
-     *
-     * @param restrictions - Restricciones para la búsqueda
+     * Añade o elimina restricciones de búsqueda
      */
     set restrictions(restrictions) {
-        if (restrictions?.length) {
-            this.restrictionsFilters = [...restrictions];
+        // Using stringify for simple object comparison. If restrictions become complex, a more robust method is needed.
+        if (JSON.stringify(this._restrictionsFilters) === JSON.stringify(restrictions)) {
+            return;
         }
-        else {
-            this.restrictionsFilters = [];
+        this._restrictionsFilters = restrictions?.length ? [...restrictions] : [];
+        this.resetAutocompleteState();
+        const currentSearchText = this.getAutocompleteSearchText();
+        // Only re-trigger a search if there was already text in the input.
+        // If the input was empty, we'll wait for user interaction (opening the panel).
+        if (currentSearchText) {
+            // No actualizar _lastSearchText aquí, se actualiza después de la API.
+            this.getAutocompleteByTextHandler(currentSearchText);
         }
     }
     /**
-     * Añade o elimina la validación de que el campo sea requerido
-     *
-     * @param required - Define si es requerido o no
+     * Añade o elimina la validación de requerido
      */
     set isRequired(required) {
         this.required.set(required);
+        const validators = [autocompleteValidator];
         if (required) {
-            this.component.setValidators([Validators.required, autocompleteValidator]);
-        }
-        else {
-            this.component.clearValidators();
-            this.component.setValidators([autocompleteValidator]);
+            validators.push(Validators.required);
         }
+        this.component.setValidators(validators);
         this.component.updateValueAndValidity();
+        this.component.markAsDirty();
+        this.component.markAsTouched();
     }
     /**
-     * Define si vamos a realizar una búsqueda al elemento estar en el focus de la aplicación
-     *
-     * @param focusSubject - Observable para la subscripción al evento Focus
+     * Define si se realiza una búsqueda cuando el elemento está en foco
      */
     set doFocus(focusSubject) {
-        this.doFocusSubject$ = focusSubject;
-        if (this.doFocusSubject$) {
-            this.doFocusSubject$
-                .pipe(debounceTime(this.debounceTimeValue), takeUntilDestroyed(this._destroyRef))
-                .subscribe({
-                next: () => {
-                    this._zone.run(() => {
-                        setTimeout(() => {
-                            this.inputText?.nativeElement?.focus();
-                        }, 500);
-                    });
+        this._doFocusSubject = focusSubject;
+        this._doFocusSubject
+            .pipe(debounceTime(this.debounceTimeValue), // Retrasar para evitar llamadas excesivas
+        takeUntilDestroyed(this._destroyRef))
+            .subscribe({
+            next: () => {
+                // SOLO ejecutar si el usuario ya ha interactu-ado con el componente.
+                // Esto previene que un focus programático inicial (ej: al renderizar una tabla)
+                // dispare una búsqueda no deseada.
+                if (!this._userInteracted) {
+                    return;
                 }
-            });
-        }
+                this._zone.run(() => {
+                    setTimeout(() => {
+                        this.inputText?.nativeElement?.focus();
+                        // Simular evento 'input' para disparar valueChanges, pero solo si el input está vacío
+                        // o si ya hay un valor pero no es el seleccionado (usuario queriendo buscar de nuevo).
+                        if (!this.component.value ||
+                            (typeof this.component.value === "string" &&
+                                !this._selectedElement)) {
+                            this.inputText?.nativeElement?.dispatchEvent(new Event("input"));
+                        }
+                        this.autocompleteTrigger?.openPanel();
+                    }, 50); // Un pequeño retraso para asegurar el foco y la apertura
+                });
+            },
+        });
     }
     set notAllowedElements(element) {
         if (element) {
             this.notAllowedOption.set(element);
-            if (this.originalOptions()?.length) {
-                this.filteredOptions.set(this.originalOptions()?.filter((option) => JSON.stringify(option) !== JSON.stringify(this.notAllowedOption())));
-            }
+            this.filterOptionsBasedOnNotAllowed();
         }
     }
     /**
-     * Subscripción a los cambios del input de búsqueda
+     * Reinicia el estado de paginación y opciones del autocompletado.
+     * Centraliza la lógica para evitar duplicación.
      */
-    subscribeComponentChanges() {
+    resetAutocompleteState() {
+        this._offset = 0;
+        this.originalOptions.set([]);
+        this.filteredOptions.set([]);
+        this.hasMore.set(true);
+    }
+    /**
+     * Suscripción a los cambios del input de búsqueda
+     */
+    subscribeToComponentChanges() {
         this.component.valueChanges
-            .pipe(debounceTime(this.debounceTimeValue), takeUntilDestroyed(this._destroyRef))
+            .pipe(
+        // TAP se ejecuta inmediatamente ANTES del debounce.
+        // Esto es crucial para detectar borrados de texto en tiempo real y desvincular _selectedElement.
+        tap((value) => {
+            const currentInputText = this.getAutocompleteSearchText();
+            // Si el valor actual del control es un STRING (usuario escribiendo/borrando)
+            // Y previamente había un objeto seleccionado (_selectedElement)
+            // Y el texto en el input ya no coincide con el displayFn del _selectedElement,
+            // entonces desvinculamos el _selectedElement y marcamos que no hay selección.
+            if (typeof value === "string" &&
+                this._selectedElement &&
+                currentInputText !== this.displayFn(this._selectedElement)) {
+                this._selectedElement = null; // Quitar la referencia al objeto seleccionado
+                this._isOptionSelected = false; // Marcar que no hay una opción seleccionada
+            }
+            else if (typeof value === "string") {
+                // Si el valor es un string, simplemente marcamos que no hay opción seleccionada.
+                // Esto cubre los casos donde el usuario escribe por primera vez o borra sin haber seleccionado.
+                this._isOptionSelected = false;
+            }
+        }), debounceTime(this.debounceTimeValue), // El debounce se aplica después de la lógica del tap
+        switchMap((value) => {
+            this._cancelPendingRequest$.next(); // Cancelar cualquier petición anterior
+            const currentSearchText = this.getAutocompleteSearchText();
+            // Caso 1: El valor es un objeto y coincide con el elemento seleccionado.
+            if (typeof value === "object" &&
+                value !== null &&
+                this._selectedElement === value) {
+                this._lastSearchText = this.displayFn(value);
+                return of(null);
+            }
+            // Caso 2: El usuario ha terminado de escribir o borrar texto.
+            if (currentSearchText !== this._lastSearchText) {
+                this.resetAutocompleteState();
+                this._lastSearchText = currentSearchText;
+                const source$ = this.getAutocompleteByTextHandler(currentSearchText, true);
+                return source$.pipe(catchError(() => {
+                    // Al atrapar el error aquí, evitamos que la cadena principal de valueChanges se rompa.
+                    // Devolvemos un observable vacío para que la suscripción continúe escuchando cambios.
+                    return of(null);
+                }));
+            }
+            else {
+                // Si el texto es el mismo, pero el panel está abierto, sin opciones y hay más datos potenciales,
+                // podemos necesitar una recarga.
+                if (this.matAutocomplete._isOpen &&
+                    this.originalOptions().length === 0 &&
+                    this.hasMore() &&
+                    !this.loading()) {
+                    return this.getAutocompleteByTextHandler(currentSearchText, true);
+                }
+            }
+            return of(null);
+        }), takeUntilDestroyed(this._destroyRef))
             .subscribe({
-            next: () => {
-                if (!this.firstCall && !this.wasSelected) {
-                    this.getAutocompleteByTextHandler(this.getAutocompleteSearchText());
+            next: (result) => {
+                if (!result) {
+                    return;
+                }
+                const newData = result?.payload?.data ?? result?.data ?? [];
+                if (this._offset === 0) {
+                    this.originalOptions.set(newData);
+                }
+                else {
+                    this.originalOptions.update((currentOptions) => [
+                        ...currentOptions,
+                        ...newData,
+                    ]);
+                }
+                this._offset += newData.length;
+                if (newData.length < this._limit) {
+                    this.hasMore.set(false);
+                }
+                else {
+                    this.hasMore.set(true);
+                }
+                this.filterOptionsBasedOnNotAllowed();
+            },
+            error: (error) => {
+                this.loading.set(false);
+            },
+        });
+    }
+    ngAfterViewInit() {
+        // Suscribirse a la apertura del panel para añadir el listener de scroll y cargar datos
+        this.matAutocomplete.opened
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this._cancelPendingRequest$.next(); // Cancelar cualquier petición anterior
+            if (this.matAutocomplete?.panel) {
+                // Asegurarse de que el listener sea removido antes de añadirlo para prevenir duplicados
+                this.matAutocomplete.panel.nativeElement.removeEventListener("scroll", this.onScroll.bind(this));
+                this.matAutocomplete.panel.nativeElement.addEventListener("scroll", this.onScroll.bind(this));
+                const currentSearchText = this.getAutocompleteSearchText();
+                // **********************************************
+                // MODIFICACIÓN CLAVE AQUÍ:
+                // Cargar opciones iniciales SOLO SI:
+                // 1. No hay opciones cargadas (primera apertura o después de un clear/reset).
+                // 2. O el texto actual en el input es diferente del _lastSearchText (el usuario escribió algo nuevo o borró y abrió).
+                // 3. O el input está vacío Y no hay un _selectedElement Y hay más datos por cargar Y el offset es 0 (lo que implica que es la primera carga para este estado vacío).
+                // Esto evita la doble llamada si subscribeToComponentChanges ya disparó una búsqueda
+                // para el mismo texto, o si ya se sabe que no hay más datos para un input vacío.
+                // **********************************************
+                if (this.originalOptions().length === 0 || // No hay opciones, cargar siempre.
+                    currentSearchText !== this._lastSearchText || // El texto ha cambiado, nueva búsqueda.
+                    (currentSearchText === "" &&
+                        !this._selectedElement &&
+                        this.hasMore() &&
+                        this._offset === 0) // Input vacío, sin selección, con potencial de datos, y es la primera carga.
+                ) {
+                    this.resetAutocompleteState(); // Asegurarse de resetear antes de una nueva carga
+                    this._lastSearchText = currentSearchText; // Sincronizar _lastSearchText con la búsqueda que se va a realizar
+                    this.getAutocompleteByTextHandler(currentSearchText);
+                }
+                else {
                 }
-                this.firstCall = false;
-                this.wasSelected = false;
+            }
+        });
+        // Suscribirse al cierre del panel para remover el listener de scroll y manejar la deselección
+        this.matAutocomplete.closed
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            if (this.matAutocomplete?.panel) {
+                this.matAutocomplete.panel.nativeElement.removeEventListener("scroll", this.onScroll.bind(this));
+            }
+            const currentInputValue = this.component.value;
+            const currentInputText = this.getAutocompleteSearchText();
+            // Lógica para manejar el borrado del input si no hay una selección válida
+            // o si el texto no coincide con el elemento seleccionado.
+            if (typeof currentInputValue === "string") {
+                // Si el input está vacío Y no hay un elemento seleccionado
+                if (currentInputText === "" && !this._selectedElement) {
+                    this.clearInternalState(); // Usa un método para limpiar
+                }
+                // Si se requiere selección y el texto no coincide con el elemento seleccionado,
+                // o no hay ningún elemento seleccionado, entonces se borra.
+                else if (this.requireSelection &&
+                    (!this._selectedElement ||
+                        currentInputText !== this.displayFn(this._selectedElement))) {
+                    console.warn("Autocompletado cerrado: Selección requerida y no se encontró una coincidencia válida. Limpiando input.");
+                    this.clearInternalState(); // Usa un método para limpiar
+                }
+                // Si NO se requiere selección, pero el usuario ha editado el texto de un elemento previamente seleccionado.
+                // En este caso, NO borramos, sino que revertimos al texto del elemento seleccionado si existe.
+                else if (this._selectedElement &&
+                    currentInputText !== this.displayFn(this._selectedElement) &&
+                    !this.requireSelection) {
+                    // Revertir al texto del elemento seleccionado.
+                    this.component.setValue(this._selectedElement, {
+                        emitEvent: false,
+                    });
+                    this._lastSearchText = this.displayFn(this._selectedElement);
+                    this.propagateChange(this._selectedElement); // Propagar el valor original si se revierte
+                }
+                // Si el texto del input es un string y no se requiere selección,
+                // y no hay _selectedElement (porque se deseleccionó en el tap o nunca hubo),
+                // asumimos que el usuario quiere el texto libre.
+                // No hacemos nada, el texto permanece.
+                else if (typeof currentInputValue === "string" &&
+                    !this.requireSelection &&
+                    !this._selectedElement &&
+                    currentInputText !== "") {
+                    // Si no hay un elemento seleccionado pero el usuario escribió algo
+                    // y no se requiere selección, dejamos el texto tal cual.
+                    // Aseguramos que _lastSearchText se actualice para evitar re-búsquedas innecesarias.
+                    this._lastSearchText = currentInputText;
+                    // this.propagateChange(currentInputText);
+                }
+            }
+            // Si el valor ya es un objeto (porque se seleccionó) pero el texto del input fue borrado
+            // y el _selectedElement es null (ya se desvinculó en el tap), significa que debe limpiarse.
+            else if (typeof currentInputValue === "object" &&
+                currentInputText === "" &&
+                !this._selectedElement) {
+                this.clearInternalState();
             }
         });
     }
     /**
-     * Búsqueda de los elementos a mostrar en el componente de auto-completamiento
-     *
-     * @param text - Texto a buscar
+     * Método auxiliar para limpiar el estado interno del autocompletado.
+     * Este método ahora se encarga de la limpieza profunda, incluyendo el valor del FormControl y la propagación.
+     * @param resetLastSearchText - Si es true, reinicia _lastSearchText a una cadena vacía. Por defecto es true.
      */
-    getAutocompleteByTextHandler(text) {
-        this.loading.set(true);
+    clearInternalState(resetLastSearchText = true) {
+        // Solo si el valor del control NO es null, lo seteamos a null para evitar bucles.
+        // Esto es importante porque en el tap, solo desvinculamos `_selectedElement` pero no el control.
+        if (this.component.value !== null) {
+            this.component.setValue(null, { emitEvent: false });
+        }
         this.propagateChange(null);
-        this.selectedElement = null;
         this.SelectElement.emit(null);
-        if (!this.serviceConfig) {
-            this._autocompleteService
-                .getAutocompleteByText(this._url, text, this.filterString, this.restrictionsFilters, this.removeProperties, this.order, this.bodyRequest)
-                .then((resp) => {
-                resp?.pipe(finalize(() => this.loading.set(false))).subscribe({
-                    next: (result) => {
-                        this.originalOptions.set(result?.payload?.data ?? result?.data);
-                        // Modifica los options con una función que se le pase como parámetro
-                        const modifiedOptions = this.modifyResultFn(this.originalOptions());
-                        if (modifiedOptions)
-                            this.filteredOptions.set(modifiedOptions);
-                        if (this.notAllowedOption()) {
-                            this.filteredOptions.set(this.originalOptions()?.filter((option) => JSON.stringify(option) !== JSON.stringify(this.notAllowedOption())));
-                        }
-                        else {
-                            this.filteredOptions.set(this.originalOptions());
-                        }
-                    }
-                });
+        this._selectedElement = null; // Asegurar que el objeto seleccionado esté a null
+        this._isOptionSelected = false; // Asegurar que la bandera de selección esté a false
+        if (resetLastSearchText) {
+            this._lastSearchText = "";
+        }
+        this.resetAutocompleteState(); // Resetear opciones y paginación
+    }
+    /**
+     * Busca elementos para mostrar en el componente de autocompletado.
+     * Ahora soporta paginación.
+     * @param text - Texto a buscar
+     */
+    getAutocompleteByTextHandler(text, returnObservable = false) {
+        const currentSearchText = text ?? "";
+        if (this.loading() || !this._userInteracted) {
+            return returnObservable ? of(null) : undefined;
+        }
+        if (!this.hasMore() &&
+            this._offset > 0 &&
+            currentSearchText === this._lastSearchText) {
+            return returnObservable ? of(null) : undefined;
+        }
+        this.loading.set(true);
+        const currentOffset = this._offset;
+        if (!this._url && !this._serviceConfig) {
+            this.loading.set(false);
+            this.hasMore.set(false);
+            return returnObservable ? of(null) : undefined;
+        }
+        let apiCall;
+        if (this._url) {
+            apiCall = from(this._autocompleteService.getAutocompleteByText(this._url, currentSearchText, this.filterString, this._restrictionsFilters, this.removeProperties, this.order, this.bodyRequest, { limit: this._limit, offset: currentOffset })).pipe(switchMap((innerObservable) => innerObservable));
+        }
+        else if (this._serviceConfig) {
+            const body = { ...this._serviceConfig };
+            body[this._serviceConfig.searchProperty] = currentSearchText;
+            body["limit"] = this._limit;
+            body["offset"] = currentOffset;
+            Object.keys(this._serviceConfig.postBody).forEach((item) => {
+                body[item] = this._serviceConfig.postBody[item];
             });
+            console.log(body);
+            delete body.service;
+            delete body.postBody;
+            apiCall = this._serviceConfig.service[this._serviceConfig.method](body);
         }
         else {
-            let body = this.serviceConfig;
-            body[this.serviceConfig.searchProperty] = text;
-            this.serviceConfig
-                .service[this.serviceConfig.method](body)
-                .pipe(takeUntilDestroyed(this._destroyRef), debounceTime(this.debounceTimeValue || 300), finalize(() => this.loading.set(false)))
-                .subscribe({
-                next: (result) => {
-                    this.originalOptions.set(result?.payload?.data ?? result?.data);
-                    // Modifica los options con una función que se le pase como parámetro
-                    const modifiedOptions = this.modifyResultFn(this.originalOptions());
-                    if (modifiedOptions)
-                        this.filteredOptions.set(modifiedOptions);
-                    if (this.notAllowedOption()) {
-                        this.filteredOptions.set(this.originalOptions()?.filter((option) => JSON.stringify(option) !== JSON.stringify(this.notAllowedOption())));
-                    }
-                    else {
-                        this.filteredOptions.set(this.originalOptions());
-                    }
+            this.loading.set(false);
+            this.hasMore.set(false);
+            return returnObservable ? of(null) : undefined;
+        }
+        let panelScrollTop = 0;
+        if (this.matAutocomplete?.panel) {
+            panelScrollTop = this.matAutocomplete.panel.nativeElement.scrollTop;
+        }
+        const finalApiCall$ = apiCall.pipe(takeUntil(this._cancelPendingRequest$), finalize(() => {
+            this.loading.set(false);
+        }));
+        if (returnObservable) {
+            return finalApiCall$;
+        }
+        finalApiCall$.pipe(takeUntilDestroyed(this._destroyRef)).subscribe({
+            next: (result) => {
+                const newData = result?.payload?.data ?? result?.data ?? [];
+                if (currentOffset === 0) {
+                    this.originalOptions.set(newData);
                 }
-            });
+                else {
+                    this.originalOptions.update((currentOptions) => [
+                        ...currentOptions,
+                        ...newData,
+                    ]);
+                }
+                this._offset += newData.length;
+                if (newData.length < this._limit) {
+                    this.hasMore.set(false);
+                }
+                else {
+                    this.hasMore.set(true);
+                }
+                this.filterOptionsBasedOnNotAllowed();
+                if (this.matAutocomplete?.panel && panelScrollTop > 0) {
+                    this._zone.runOutsideAngular(() => {
+                        setTimeout(() => {
+                            this.matAutocomplete.panel.nativeElement.scrollTop =
+                                panelScrollTop;
+                        }, 0);
+                    });
+                }
+            },
+            error: (error) => {
+                console.error("Error al obtener datos de autocompletado:", error);
+                this.loading.set(false);
+            },
+        });
+    }
+    filterOptionsBasedOnNotAllowed() {
+        let currentOptions = this.originalOptions();
+        const modifiedOptions = this.modifyResultFn(currentOptions);
+        if (modifiedOptions !== null && modifiedOptions !== undefined) {
+            currentOptions = modifiedOptions;
+        }
+        if (this.notAllowedOption()) {
+            this.filteredOptions.set(currentOptions.filter((option) => JSON.stringify(option) !== JSON.stringify(this.notAllowedOption())));
+        }
+        else {
+            this.filteredOptions.set(currentOptions);
         }
     }
     /**
-     * Define el texto por el que se va a realizar la búsqueda
-     *
-     * @return {string} Texto de la búsqueda
+     * Define el texto a utilizar para la búsqueda
      */
     getAutocompleteSearchText() {
-        let text = '';
-        if (this.component.value) {
-            if (typeof this.component.value === 'object') {
-                const componentValue = this.component.value?.[this.field?.[0]];
-                if (typeof componentValue === 'object') {
-                    let lang = 'es';
-                    if (this.field?.[1]) {
-                        lang = this.field?.[1];
-                    }
-                    text = componentValue?.[lang];
-                }
-            }
-            else if (typeof this.component.value === 'string') {
-                text = this.component.value;
-            }
+        const value = this.component.value;
+        if (typeof value === "object" && value !== null) {
+            // Si el valor es un objeto, usa displayFn para obtener el texto
+            return this.displayFn(value);
         }
-        return text;
+        else if (typeof value === "string") {
+            return value;
+        }
+        return null;
     }
     registerOnChange(fn) {
         this.propagateChange = fn;
     }
-    registerOnTouched() {
-    }
+    registerOnTouched() { }
     /**
-     * Recibe el valor del FormControl
-     *
-     * @param value - Valor entrado por FormControl
+     * Recibe el valor desde el FormControl externo.
      */
     writeValue(value) {
+        // Establecer la bandera para indicar que el cambio viene de un setValue programático
+        this._isOptionSelected = typeof value === "object" && value !== null;
+        this.component.setValue(value, { emitEvent: false }); // No emitir evento para evitar bucles.
+        this._selectedElement = value
+            ? this.valueId && typeof value === "object"
+                ? value?.id
+                : value
+            : null;
+        // Actualizar _lastSearchText basado en el valor que se está escribiendo.
+        // Si el valor es nulo, _lastSearchText también debe ser nulo o vacío
         if (value) {
-            this.component.setValue(value, { emitEvent: false });
-            if (typeof value === 'object' && this.valueId) {
-                this.selectedElement = value?.id;
-            }
-            else {
-                this.selectedElement = value;
-            }
+            this._lastSearchText = this.displayFn(value);
         }
         else {
-            this.selectedElement = null;
+            this._lastSearchText = "";
         }
     }
     setDisabledState(isDisabled) {
         this.disabled.set(isDisabled);
-        if (this.disabled()) {
+        if (isDisabled) {
             this.component.disable();
         }
         else {
@@ -370,57 +654,77 @@ class GuajiritosGeneralAutocomplete {
     }
     /**
      * Acción al limpiar el valor del input
-     *
-     * @param trigger
      */
     clear(trigger) {
         this.clearElement.emit(this.component.value);
-        this.component.setValue(null);
-        this.selectedElement = null;
-        this.SelectElement.emit(null);
-        this.propagateChange(null);
+        this.clearInternalState(); // Usa el método auxiliar para limpiar
         this._zone.run(() => {
             setTimeout(() => {
-                trigger.openPanel();
+                trigger.openPanel(); // Reabrir el panel después de borrar
+                this.component.setValue("", { emitEvent: true }); // Cargar opciones iniciales (o todas) después de borrar
             }, 100);
         });
     }
-    /**
-     * Acción en el Focus del elemento
-     */
-    onFocus() {
-        if (!this.selectedElement) {
-            this.getAutocompleteByTextHandler(this.getAutocompleteSearchText());
+    onUserInteraction() {
+        this._userInteracted = true;
+        // Si el panel ya está abierto, no hacer nada para evitar bucles o recargas innecesarias al volver a hacer clic.
+        if (this.autocompleteTrigger?.panelOpen) {
+            return;
+        }
+        this.resetAutocompleteState();
+        const searchText = this.getAutocompleteSearchText() ?? "";
+        if (!this._selectedElement) {
+            this.getAutocompleteByTextHandler(searchText);
         }
     }
     optionSelected($event) {
-        if ($event?.option?.value) {
-            this.wasSelected = true;
-            this.selectedElement = $event.option.value;
-            this.SelectElement.emit($event.option.value);
-            if (this.valueId) {
-                this.propagateChange(typeof $event.option.value === 'object' ? $event.option.value?.id : $event.option.value);
+        const selectedValue = $event?.option?.value;
+        if (selectedValue) {
+            this._isOptionSelected = true; // Establecer la bandera de selección
+            this._selectedElement = selectedValue;
+            this.SelectElement.emit(selectedValue);
+            if (this.valueId && typeof selectedValue === "object") {
+                this.propagateChange(selectedValue?.id);
             }
             else {
-                this.propagateChange($event.option.value);
+                this.propagateChange(selectedValue);
             }
+            // Cuando un ítem es seleccionado, actualizar _lastSearchText con su valor de display.
+            // Esto es crucial para que el valueChanges no vuelva a disparar una búsqueda para este valor.
+            this._lastSearchText = this.displayFn(selectedValue);
         }
         else {
-            this.propagateChange($event.option.value);
+            // Si se deselecciona o selecciona nulo
+            this.clearInternalState();
+        }
+    }
+    /**
+     * Maneja el evento de scroll en el panel del autocompletado para cargar más datos.
+     */
+    onScroll(event) {
+        const element = event.target;
+        const scrollPosition = element.scrollTop + element.clientHeight;
+        const scrollHeight = element.scrollHeight;
+        const threshold = 50; // Píxeles antes del final para cargar más
+        if (scrollHeight - scrollPosition <= threshold &&
+            !this.loading() &&
+            this.hasMore()) {
+            // Usar el texto de búsqueda actual (que puede ser el texto del ítem seleccionado o lo que el usuario escribió)
+            this.getAutocompleteByTextHandler(this.getAutocompleteSearchText());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GuajiritosGeneralAutocomplete, deps: [{ token: i1.AutocompleteService }, { token: i0.NgZone }, { token: i0.DestroyRef }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: GuajiritosGeneralAutocomplete, isStandalone: true, selector: "guajiritos-general-autocomplete", inputs: { floatLabel: "floatLabel", color: "color", appearance: "appearance", subscriptSizing: "subscriptSizing", bodyRequest: "bodyRequest", debounceTimeValue: "debounceTimeValue", detailsTemplate: "detailsTemplate", label: "label", showLabel: "showLabel", placeholder: "placeholder", field: "field", filterString: "filterString", displayOptions: "displayOptions", withoutPaddingBottom: "withoutPaddingBottom", valueId: "valueId", showSuffix: "showSuffix", requireSelection: "requireSelection", order: "order", serviceConfig: "serviceConfig", suffixIcon: "suffixIcon", removeProperties: "removeProperties", modifyResultFn: "modifyResultFn", url: "url", clearData: "clearData", initialValue: "initialValue", restrictions: "restrictions", isRequired: "isRequired", doFocus: "doFocus", notAllowedElements: "notAllowedElements" }, outputs: { SelectElement: "SelectElement", clearElement: "clearElement" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GuajiritosGeneralAutocomplete, deps: [{ token: i1.AutocompleteService }, { token: i0.NgZone }, { token: i0.DestroyRef }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: GuajiritosGeneralAutocomplete, isStandalone: true, selector: "guajiritos-general-autocomplete", inputs: { floatLabel: "floatLabel", color: "color", appearance: "appearance", subscriptSizing: "subscriptSizing", bodyRequest: "bodyRequest", debounceTimeValue: "debounceTimeValue", detailsTemplate: "detailsTemplate", label: "label", showLabel: "showLabel", placeholder: "placeholder", field: "field", filterString: "filterString", displayOptions: "displayOptions", withoutPaddingBottom: "withoutPaddingBottom", valueId: "valueId", showSuffix: "showSuffix", requireSelection: "requireSelection", order: "order", suffixIcon: "suffixIcon", removeProperties: "removeProperties", modifyResultFn: "modifyResultFn", url: "url", serviceConfig: "serviceConfig", limit: "limit", clearData: "clearData", initialValue: "initialValue", restrictions: "restrictions", isRequired: "isRequired", doFocus: "doFocus", notAllowedElements: "notAllowedElements" }, outputs: { SelectElement: "SelectElement", clearElement: "clearElement" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => GuajiritosGeneralAutocomplete),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "inputText", first: true, predicate: ["inputText"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field [floatLabel]=\"floatLabel\" class=\"w-100\" [appearance]=\"appearance\" [color]=\"color\"\n                [subscriptSizing]=\"subscriptSizing\">\n\n  @if (showLabel) {\n    <mat-label>{{ label | translate }}</mat-label>\n  }\n  @if (showSuffix) {\n    <mat-icon matSuffix>{{ suffixIcon ?? \"search\" }}</mat-icon>\n  }\n  <input #inputText #trigger=\"matAutocompleteTrigger\" (focus)=\"onFocus()\" [formControl]=\"component\" type=\"text\"\n         [matAutocomplete]=\"autocomplete\" [placeholder]=\"placeholder | translate\" aria-label=\"autocomplete\"\n         autocomplete=\"off\" matInput [required]=\"required()\">\n  @if (!loading() && component.value) {\n    <button (click)=\"clear(trigger)\" [disabled]=\"disabled()\"\n            aria-label=\"Clear\" mat-icon-button matSuffix>\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n  @if (loading()) {\n    <button aria-label=\"search\" mat-icon-button matSuffix>\n      <mat-spinner [value]=\"90\" color=\"accent\" diameter=\"25\"></mat-spinner>\n    </button>\n  }\n  <mat-autocomplete #autocomplete=\"matAutocomplete\" [displayWith]=\"displayFn\" [requireSelection]=\"requireSelection\"\n                    (optionSelected)=\"optionSelected($event)\">\n    @for (option of filteredOptions(); track option) {\n      <mat-option [value]=\"option\">\n        @if (!displayOptions && !detailsTemplate) {\n          {{ option?.name | i18n: translateService.currentLang }}\n        }\n        @if (!detailsTemplate) {\n          <div class=\"display-options\">\n              <span [ngStyle]=\"{'line-height': displayOptions?.secondLabel ? '16px' : ''}\">\n                {{ option | resolvePropertyPath:displayOptions.firthLabel | i18n: translateService.currentLang }}\n              </span>\n            @if (displayOptions?.secondLabel) {\n              <span class=\"mat-caption\">\n                  {{ option | resolvePropertyPath: displayOptions.secondLabel | i18n: translateService.currentLang }}\n                </span>\n            }\n          </div>\n        }\n        @if (detailsTemplate) {\n          <ng-container *ngTemplateOutlet=\"detailsTemplate;context:{$implicit: option }\"></ng-container>\n        }\n      </mat-option>\n    }\n  </mat-autocomplete>\n\n  @if (component.invalid) {\n    <mat-error>\n      {{ 'Este campo es requerido.' | translate }}\n    </mat-error>\n  }\n</mat-form-field>\n", styles: [".w-100{width:100%}.display-options{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i10.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: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: ResolvePropertyPath, name: "resolvePropertyPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputText", first: true, predicate: ["inputText"], descendants: true, static: true }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }], ngImport: i0, template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"w-100\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n  [subscriptSizing]=\"subscriptSizing\"\n>\n  @if (showLabel) {\n  <mat-label>{{ label | translate }}</mat-label>\n  } @if (showSuffix) {\n  <mat-icon matSuffix>{{ suffixIcon ?? \"search\" }}</mat-icon>\n  }\n  <input\n    #inputText\n    #trigger=\"matAutocompleteTrigger\"\n    (focus)=\"onUserInteraction()\"\n    (click)=\"onUserInteraction()\"\n    (keydown)=\"onUserInteraction()\"\n    [formControl]=\"component\"\n    type=\"text\"\n    [matAutocomplete]=\"auto\"\n    [placeholder]=\"placeholder | translate\"\n    aria-label=\"autocomplete\"\n    autocomplete=\"off\"\n    matInput\n    [required]=\"required()\"\n  />\n  @if (!loading() && component.value) {\n  <button\n    (click)=\"clear(trigger)\"\n    [disabled]=\"disabled()\"\n    aria-label=\"Clear\"\n    mat-icon-button\n    matSuffix\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n  } @if (loading()) {\n  <button aria-label=\"search\" mat-icon-button matSuffix>\n    <mat-spinner [value]=\"90\" color=\"accent\" diameter=\"25\"></mat-spinner>\n  </button>\n  }\n  <mat-autocomplete\n    #auto=\"matAutocomplete\"\n    [displayWith]=\"displayFn\"\n    [requireSelection]=\"requireSelection\"\n    (optionSelected)=\"optionSelected($event)\"\n  >\n    @for (option of filteredOptions(); track option) {\n    <mat-option [value]=\"option\">\n      @if (!displayOptions && !detailsTemplate) {\n      {{ option?.name | i18n: translateService.currentLang }}\n      } @if (!detailsTemplate) {\n      <div class=\"display-options\">\n        <span [ngStyle]=\"{'line-height': displayOptions?.secondLabel ? '16px' : ''}\">\n          {{\n            option | resolvePropertyPath : displayOptions.firthLabel\n            | i18n : translateService.currentLang\n          }}\n        </span>\n        @if (displayOptions?.secondLabel) {\n        <span class=\"mat-caption\">\n          {{\n            option | resolvePropertyPath : displayOptions.secondLabel\n            | i18n : translateService.currentLang\n          }}\n        </span>\n        }\n      </div>\n      } @if (detailsTemplate) {\n      <ng-container\n        *ngTemplateOutlet=\"detailsTemplate; context: { $implicit: option }\"\n      ></ng-container>\n      }\n    </mat-option>\n    }\n  </mat-autocomplete>\n\n  @if (component.invalid && component.touched) {\n  <mat-error>\n    {{ 'Este campo es requerido.' | translate }}\n  </mat-error>\n  }\n</mat-form-field>\n", styles: [".w-100{width:100%}.display-options{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i10.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: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "pipe", type: ResolvePropertyPath, name: "resolvePropertyPath" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: GuajiritosGeneralAutocomplete, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: GuajiritosGeneralAutocomplete, decorators: [{
             type: Component,
-            args: [{ selector: 'guajiritos-general-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: "guajiritos-general-autocomplete", changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
                         MatFormFieldModule,
                         TranslateModule,
@@ -431,17 +735,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                         MatProgressSpinnerModule,
                         MatAutocompleteModule,
                         I18nPipe,
-                        ResolvePropertyPath
+                        ResolvePropertyPath,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => GuajiritosGeneralAutocomplete),
-                            multi: true
-                        }
-                    ], template: "<mat-form-field [floatLabel]=\"floatLabel\" class=\"w-100\" [appearance]=\"appearance\" [color]=\"color\"\n                [subscriptSizing]=\"subscriptSizing\">\n\n  @if (showLabel) {\n    <mat-label>{{ label | translate }}</mat-label>\n  }\n  @if (showSuffix) {\n    <mat-icon matSuffix>{{ suffixIcon ?? \"search\" }}</mat-icon>\n  }\n  <input #inputText #trigger=\"matAutocompleteTrigger\" (focus)=\"onFocus()\" [formControl]=\"component\" type=\"text\"\n         [matAutocomplete]=\"autocomplete\" [placeholder]=\"placeholder | translate\" aria-label=\"autocomplete\"\n         autocomplete=\"off\" matInput [required]=\"required()\">\n  @if (!loading() && component.value) {\n    <button (click)=\"clear(trigger)\" [disabled]=\"disabled()\"\n            aria-label=\"Clear\" mat-icon-button matSuffix>\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n  @if (loading()) {\n    <button aria-label=\"search\" mat-icon-button matSuffix>\n      <mat-spinner [value]=\"90\" color=\"accent\" diameter=\"25\"></mat-spinner>\n    </button>\n  }\n  <mat-autocomplete #autocomplete=\"matAutocomplete\" [displayWith]=\"displayFn\" [requireSelection]=\"requireSelection\"\n                    (optionSelected)=\"optionSelected($event)\">\n    @for (option of filteredOptions(); track option) {\n      <mat-option [value]=\"option\">\n        @if (!displayOptions && !detailsTemplate) {\n          {{ option?.name | i18n: translateService.currentLang }}\n        }\n        @if (!detailsTemplate) {\n          <div class=\"display-options\">\n              <span [ngStyle]=\"{'line-height': displayOptions?.secondLabel ? '16px' : ''}\">\n                {{ option | resolvePropertyPath:displayOptions.firthLabel | i18n: translateService.currentLang }}\n              </span>\n            @if (displayOptions?.secondLabel) {\n              <span class=\"mat-caption\">\n                  {{ option | resolvePropertyPath: displayOptions.secondLabel | i18n: translateService.currentLang }}\n                </span>\n            }\n          </div>\n        }\n        @if (detailsTemplate) {\n          <ng-container *ngTemplateOutlet=\"detailsTemplate;context:{$implicit: option }\"></ng-container>\n        }\n      </mat-option>\n    }\n  </mat-autocomplete>\n\n  @if (component.invalid) {\n    <mat-error>\n      {{ 'Este campo es requerido.' | translate }}\n    </mat-error>\n  }\n</mat-form-field>\n", styles: [".w-100{width:100%}.display-options{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}\n"] }]
+                            multi: true,
+                        },
+                    ], template: "<mat-form-field\n  [floatLabel]=\"floatLabel\"\n  class=\"w-100\"\n  [appearance]=\"appearance\"\n  [color]=\"color\"\n  [subscriptSizing]=\"subscriptSizing\"\n>\n  @if (showLabel) {\n  <mat-label>{{ label | translate }}</mat-label>\n  } @if (showSuffix) {\n  <mat-icon matSuffix>{{ suffixIcon ?? \"search\" }}</mat-icon>\n  }\n  <input\n    #inputText\n    #trigger=\"matAutocompleteTrigger\"\n    (focus)=\"onUserInteraction()\"\n    (click)=\"onUserInteraction()\"\n    (keydown)=\"onUserInteraction()\"\n    [formControl]=\"component\"\n    type=\"text\"\n    [matAutocomplete]=\"auto\"\n    [placeholder]=\"placeholder | translate\"\n    aria-label=\"autocomplete\"\n    autocomplete=\"off\"\n    matInput\n    [required]=\"required()\"\n  />\n  @if (!loading() && component.value) {\n  <button\n    (click)=\"clear(trigger)\"\n    [disabled]=\"disabled()\"\n    aria-label=\"Clear\"\n    mat-icon-button\n    matSuffix\n  >\n    <mat-icon>close</mat-icon>\n  </button>\n  } @if (loading()) {\n  <button aria-label=\"search\" mat-icon-button matSuffix>\n    <mat-spinner [value]=\"90\" color=\"accent\" diameter=\"25\"></mat-spinner>\n  </button>\n  }\n  <mat-autocomplete\n    #auto=\"matAutocomplete\"\n    [displayWith]=\"displayFn\"\n    [requireSelection]=\"requireSelection\"\n    (optionSelected)=\"optionSelected($event)\"\n  >\n    @for (option of filteredOptions(); track option) {\n    <mat-option [value]=\"option\">\n      @if (!displayOptions && !detailsTemplate) {\n      {{ option?.name | i18n: translateService.currentLang }}\n      } @if (!detailsTemplate) {\n      <div class=\"display-options\">\n        <span [ngStyle]=\"{'line-height': displayOptions?.secondLabel ? '16px' : ''}\">\n          {{\n            option | resolvePropertyPath : displayOptions.firthLabel\n            | i18n : translateService.currentLang\n          }}\n        </span>\n        @if (displayOptions?.secondLabel) {\n        <span class=\"mat-caption\">\n          {{\n            option | resolvePropertyPath : displayOptions.secondLabel\n            | i18n : translateService.currentLang\n          }}\n        </span>\n        }\n      </div>\n      } @if (detailsTemplate) {\n      <ng-container\n        *ngTemplateOutlet=\"detailsTemplate; context: { $implicit: option }\"\n      ></ng-container>\n      }\n    </mat-option>\n    }\n  </mat-autocomplete>\n\n  @if (component.invalid && component.touched) {\n  <mat-error>\n    {{ 'Este campo es requerido.' | translate }}\n  </mat-error>\n  }\n</mat-form-field>\n", styles: [".w-100{width:100%}.display-options{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}\n"] }]
         }], ctorParameters: () => [{ type: i1.AutocompleteService }, { type: i0.NgZone }, { type: i0.DestroyRef }, { type: i2.TranslateService }], propDecorators: { inputText: [{
                 type: ViewChild,
-                args: ['inputText', { static: true }]
+                args: ["inputText", { static: true }]
+            }], matAutocomplete: [{
+                type: ViewChild,
+                args: ["auto"]
+            }], autocompleteTrigger: [{
+                type: ViewChild,
+                args: [MatAutocompleteTrigger]
             }], floatLabel: [{
                 type: Input
             }], color: [{
@@ -478,8 +788,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 type: Input
             }], order: [{
                 type: Input
-            }], serviceConfig: [{
-                type: Input
             }], suffixIcon: [{
                 type: Input
             }], removeProperties: [{
@@ -492,6 +800,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 type: Output
             }], url: [{
                 type: Input
+            }], serviceConfig: [{
+                type: Input
+            }], limit: [{
+                type: Input
             }], clearData: [{
                 type: Input
             }], initialValue: [{
@@ -506,13 +818,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
                 type: Input
             }] } });
 /**
- * Validación customizada para la selección de elementos
+ * Validación personalizada para la selección de elementos
  */
 function autocompleteValidator(control) {
-    if (control?.value?.constructor !== Object || !control?.value?.id) {
-        return { invalidSelection: true };
+    // Un valor válido es un objeto no nulo que tiene una propiedad 'id'.
+    // Esto asegura que realmente se ha seleccionado un objeto del autocompletado, no solo texto libre.
+    // Si el control está vacío, no se aplica esta validación aquí, sino la de 'Validators.required' si está presente.
+    if (control.value === null ||
+        typeof control.value === "undefined" ||
+        control.value === "") {
+        return null; // Deja que Validators.required maneje si está vacío.
+    }
+    if (typeof control?.value === "object" &&
+        control?.value !== null &&
+        "id" in control.value) {
+        return null;
     }
-    return null;
+    // Si el valor es una cadena (texto libre) y debería ser un objeto seleccionado.
+    return { invalidSelection: true };
 }
 
 /*