@guajiritos/general-autocomplete 19.0.0 → 19.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, from, switchMap, finalize } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const GENERAL_DISPLAY_OPTIONS = {
@@ -95,273 +95,444 @@ class GuajiritosGeneralAutocomplete {
         this._zone = _zone;
         this._destroyRef = _destroyRef;
         this.translateService = translateService;
-        this.wasSelected = false;
-        this.firstCall = true;
-        this.selectedElement = null;
+        // --- Private Properties ---
+        // Indica si la última actualización del input fue por una selección explícita desde el autocomplete
+        this._isOptionSelected = false;
+        this._clearDataSubject = new Subject();
+        this._doFocusSubject = new Subject();
+        this._selectedElement = null; // Almacena el objeto completo seleccionado
         this._url = null;
-        this.restrictionsFilters = [];
+        this._limit = 20;
+        this._offset = 0;
+        this._restrictionsFilters = [];
+        this._lastSearchText = ""; // Almacena el texto usado en la última búsqueda de API
+        // --- Public Signals ---
         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.component = new UntypedFormControl({
+            value: null,
+            disabled: false,
+        });
+        this.hasMore = signal(true); // 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.SelectElement = new EventEmitter();
+        this.modifyResultFn = (options) => options;
+        // --- Outputs ---
+        this.selectElement = new EventEmitter();
         this.clearElement = new EventEmitter();
-        this.propagateChange = (_) => {
-        };
+        // --- ControlValueAccessor methods ---
+        this.propagateChange = (_) => { };
         /**
-         * Función para mostrar los elementos a seleccionar
-         *
-         * @param value - Valor a mostrar
+         * Function to display selected elements
          */
         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 for 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);
-                }
-            });
+    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.resetAutocompleteState();
+                this.component.setValue(null, { emitEvent: false }); // No emitir para evitar ciclo de valueChanges
+                this.propagateChange(null);
+                this.selectElement.emit(null);
+            },
+        });
+    }
     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);
+            console.log("initialValue set: _lastSearchText =", this._lastSearchText);
+        }
+        else {
+            this._lastSearchText = "";
+        }
     }
     /**
-     * Añade o elimina restricciones para la búsqueda
-     *
-     * @param restrictions - Restricciones para la búsqueda
+     * Adds or removes search restrictions
      */
     set restrictions(restrictions) {
-        if (restrictions?.length) {
-            this.restrictionsFilters = [...restrictions];
-        }
-        else {
-            this.restrictionsFilters = [];
+        this._restrictionsFilters = restrictions?.length ? [...restrictions] : [];
+        this.resetAutocompleteState();
+        // Re-ejecutar búsqueda si el input tiene texto y hay restricciones
+        const currentSearchText = this.getAutocompleteSearchText();
+        if (currentSearchText) {
+            this.getAutocompleteByTextHandler(currentSearchText);
         }
     }
     /**
-     * Añade o elimina la validación de que el campo sea requerido
-     *
-     * @param required - Define si es requerido o no
+     * Adds or removes required validation
      */
     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();
     }
     /**
-     * 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
+     * Defines whether to perform a search when the element is in focus
      */
     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: () => {
+                this._zone.run(() => {
+                    setTimeout(() => {
+                        this.inputText?.nativeElement?.focus();
+                        // Forzar la apertura del panel y una posible carga si es necesario
+                        // Simular input para disparar valueChanges, lo que a menudo abre el panel si el texto cambia
+                        this.inputText?.nativeElement?.dispatchEvent(new Event("input"));
+                        // Abrir explícitamente el panel usando el MatAutocompleteTrigger
+                        this.autocompleteTrigger?.openPanel(); // <--- EL CAMBIO ES AQUÍ
+                    }, 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
+     * Resets the autocomplete pagination and options state.
+     * Centralizes the logic to avoid duplication.
+     */
+    resetAutocompleteState() {
+        this._offset = 0;
+        this.originalOptions.set([]);
+        this.filteredOptions.set([]);
+        this.hasMore.set(true);
+        // IMPORTANTE: _selectedElement NO se resetea aquí, solo si se borra explícitamente
+        // _lastSearchText se actualiza en writeValue y optionSelected
+        console.log("Autocomplete state reset (pagination/options).");
+    }
+    /**
+     * Subscription to search input changes
      */
-    subscribeComponentChanges() {
+    subscribeToComponentChanges() {
         this.component.valueChanges
-            .pipe(debounceTime(this.debounceTimeValue), takeUntilDestroyed(this._destroyRef))
+            .pipe(
+        // Utiliza tap para observar el valor antes del debounce y el switchMap
+        tap((value) => {
+            // Si el cambio viene de una selección programática (e.g., this.component.setValue(obj))
+            // O de una selección del usuario en el autocomplete, marcamos que no necesitamos buscar.
+            if (typeof value === "object" &&
+                value !== null &&
+                this._isOptionSelected) {
+                console.log("Value change detected: Object selected, skipping search.");
+                // Resetear la bandera después de procesar
+                this._isOptionSelected = false;
+                return; // Salir del tap, el debounce/switchMap no se ejecutará para este valor.
+            }
+        }), debounceTime(this.debounceTimeValue), takeUntilDestroyed(this._destroyRef))
             .subscribe({
-            next: () => {
-                if (!this.firstCall && !this.wasSelected) {
-                    this.getAutocompleteByTextHandler(this.getAutocompleteSearchText());
+            next: (value) => {
+                const currentSearchText = this.getAutocompleteSearchText();
+                // Si el valor actual es un objeto (ya seleccionado), no necesitamos buscar
+                // A menos que el texto en el input haya sido modificado por el usuario
+                if (typeof value === "object" && value !== null) {
+                    const displayText = this.displayFn(value);
+                    if (currentSearchText === displayText &&
+                        this._selectedElement === value) {
+                        console.log("Value is selected object and matches display text, skipping search.");
+                        return;
+                    }
+                }
+                // Si el valor del input es un string (el usuario está escribiendo o borró)
+                // Y el texto actual es diferente al último texto buscado
+                // O si el texto está vacío (para cargar las opciones iniciales si se borra)
+                if ((typeof value === "string" &&
+                    currentSearchText !== this._lastSearchText) ||
+                    (currentSearchText === "" && this._lastSearchText !== "") // Para cuando el usuario borra todo
+                ) {
+                    this.resetAutocompleteState(); // Reiniciar paginación y opciones
+                    this._lastSearchText = currentSearchText; // Actualizar el último texto buscado
+                    console.log("Value changed, initiating new search for:", currentSearchText);
+                    this.getAutocompleteByTextHandler(currentSearchText);
+                }
+                else if (currentSearchText === "" && this._lastSearchText === "") {
+                    // Si el input está vacío y ya lo estaba, y el componente no tiene valor seleccionado,
+                    // podría ser un buen momento para recargar las opciones iniciales si el panel está abierto
+                    if (this.matAutocomplete._isOpen &&
+                        this.originalOptions().length === 0 &&
+                        !this.loading()) {
+                        // <--- CORRECCIÓN APLICADA AQUÍ
+                        console.log("Input empty, no options, panel open. Loading initial set.");
+                        this.getAutocompleteByTextHandler("");
+                    }
+                }
+            },
+        });
+    }
+    ngAfterViewInit() {
+        // Suscribirse a la apertura del panel para añadir el listener de scroll
+        this.matAutocomplete.opened
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            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));
+                // Si el panel se abre y no hay opciones cargadas, o si el input está vacío
+                // y no hay una selección activa, cargar las opciones iniciales.
+                const currentSearchText = this.getAutocompleteSearchText();
+                if (this.originalOptions().length === 0 ||
+                    (!this._selectedElement && currentSearchText === "")) {
+                    console.log("Panel opened, loading initial set of options.");
+                    this.getAutocompleteByTextHandler(currentSearchText);
+                }
+            }
+        });
+        // 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 borrar el input si no hay una selección válida
+            // 1. Si se requiere selección Y el valor actual NO es un objeto (es texto libre)
+            // 2. O si no hay _selectedElement Y el input tiene texto
+            if ((this.requireSelection && typeof currentInputValue === "string") ||
+                (!this._selectedElement && currentInputText !== "")) {
+                // Además, verificar si el texto actual NO coincide con el displayFn del _selectedElement
+                // Esto maneja el caso donde el usuario edita el texto de un elemento seleccionado
+                if (!this._selectedElement ||
+                    currentInputText !== this.displayFn(this._selectedElement)) {
+                    console.warn("Autocomplete closed: Input cleared due to no valid selection or text mismatch.");
+                    this.component.setValue(null);
+                    this.propagateChange(null);
+                    this.selectElement.emit(null);
+                    this._selectedElement = null;
+                    this._lastSearchText = "";
+                    this.resetAutocompleteState(); // Resetear también las opciones cargadas
                 }
-                this.firstCall = false;
-                this.wasSelected = false;
             }
         });
     }
     /**
-     * Búsqueda de los elementos a mostrar en el componente de auto-completamiento
-     *
-     * @param text - Texto a buscar
+     * Searches for elements to display in the autocomplete component.
+     * Now supports pagination.
+     * @param text - Text to search
      */
     getAutocompleteByTextHandler(text) {
+        // Si no hay más datos Y ya cargamos algo (offset > 0) Y el texto de búsqueda no ha cambiado,
+        // y no estamos actualmente cargando, salir.
+        if (!this.hasMore() &&
+            this._offset > 0 &&
+            text === this._lastSearchText && // Verificar que el texto de búsqueda actual sea el mismo
+            !this.loading()) {
+            console.log("No more data for current search text, stopping further loads.");
+            return;
+        }
+        if (this.loading()) {
+            console.log("Already loading, exiting getAutocompleteByTextHandler.");
+            return;
+        }
         this.loading.set(true);
-        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());
-                        }
-                    }
-                });
-            });
+        const currentOffset = this._offset; // Capturar el offset actual antes de la llamada
+        const currentSearchTextForApi = text; // Usar el texto pasado, no el global _lastSearchText
+        if (!this._url && !this.serviceConfig) {
+            console.warn("Autocomplete: 'url' or 'serviceConfig' input is required.");
+            this.loading.set(false);
+            this.hasMore.set(false);
+            return;
+        }
+        let apiCall;
+        if (this._url) {
+            apiCall = from(this._autocompleteService.getAutocompleteByText(this._url, currentSearchTextForApi, // Usar el texto de búsqueda actual
+            this.filterString, this._restrictionsFilters, this.removeProperties, this.order, this.bodyRequest, { limit: this._limit, offset: currentOffset })).pipe(switchMap((innerObservable) => innerObservable));
+        }
+        else if (this.serviceConfig) {
+            let body = { ...this.serviceConfig };
+            body[this.serviceConfig.searchProperty] = currentSearchTextForApi; // Usar el texto de búsqueda actual
+            body["limit"] = this._limit;
+            body["offset"] = currentOffset;
+            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;
+        }
+        // Guardar la posición de scroll antes de la actualización
+        let panelScrollTop = 0;
+        if (this.matAutocomplete?.panel) {
+            panelScrollTop = this.matAutocomplete.panel.nativeElement.scrollTop;
+        }
+        apiCall
+            .pipe(finalize(() => {
+            this.loading.set(false);
+        }), takeUntilDestroyed(this._destroyRef))
+            .subscribe({
+            next: (result) => {
+                const newData = result?.payload?.data ?? result?.data ?? [];
+                console.log("New Data received:", newData.length, "items. Current offset before update:", this._offset);
+                this._offset += newData.length; // Actualizar offset con la cantidad de nuevos ítems
+                if (newData.length < this._limit) {
+                    this.hasMore.set(false);
+                    console.log("No more data, hasMore = false");
                 }
-            });
+                else {
+                    this.hasMore.set(true);
+                    console.log("Potentially more data, hasMore = true");
+                }
+                // Actualizar las opciones originales
+                this.originalOptions.update((currentOptions) => {
+                    const updatedOptions = [...currentOptions, ...newData];
+                    console.log("Total options after merge:", updatedOptions.length);
+                    return updatedOptions;
+                });
+                this.filterOptionsBasedOnNotAllowed();
+                // Restaurar la posición de scroll después de que Angular haya actualizado el DOM
+                // Esto debe hacerse fuera de la zona de Angular o con un pequeño retardo.
+                if (this.matAutocomplete?.panel && panelScrollTop > 0) {
+                    this._zone.runOutsideAngular(() => {
+                        setTimeout(() => {
+                            this.matAutocomplete.panel.nativeElement.scrollTop =
+                                panelScrollTop;
+                            console.log("Scroll position restored to:", panelScrollTop);
+                        }, 0); // Un pequeño retardo para asegurar que el DOM se haya renderizado
+                    });
+                }
+            },
+            error: (error) => {
+                console.error("Error fetching autocomplete data:", error);
+                this.loading.set(false);
+                this.hasMore.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
+     * Defines the text to be used for the search
      */
     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);
+        }
+        else if (typeof value === "string") {
+            return value;
         }
-        return text;
+        return "";
     }
     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.
         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);
+            console.log("writeValue: Last search text set to:", this._lastSearchText);
         }
         else {
-            this.selectedElement = null;
+            this._lastSearchText = "";
+            console.log("writeValue: Last search text cleared.");
         }
     }
     setDisabledState(isDisabled) {
         this.disabled.set(isDisabled);
-        if (this.disabled()) {
+        if (isDisabled) {
             this.component.disable();
         }
         else {
@@ -369,58 +540,108 @@ class GuajiritosGeneralAutocomplete {
         }
     }
     /**
-     * Acción al limpiar el valor del input
-     *
-     * @param trigger
+     * Action on clearing the input value
      */
     clear(trigger) {
         this.clearElement.emit(this.component.value);
-        this.component.setValue(null);
-        this.selectedElement = null;
-        this.SelectElement.emit(null);
+        this.resetAutocompleteState(); // Resetear paginación y opciones
+        this.component.setValue(null); // Esto disparará valueChanges
         this.propagateChange(null);
+        this.selectElement.emit(null);
+        this._selectedElement = null; // Asegurarse de que el elemento seleccionado se borre
+        this._lastSearchText = ""; // Borrar el último texto de búsqueda
         this._zone.run(() => {
             setTimeout(() => {
-                trigger.openPanel();
+                trigger.openPanel(); // Reabrir el panel después de borrar
+                this.getAutocompleteByTextHandler(""); // Cargar opciones iniciales (o todas) después de borrar
             }, 100);
         });
     }
     /**
-     * Acción en el Focus del elemento
+     * Action on element Focus
      */
     onFocus() {
-        if (!this.selectedElement) {
-            this.getAutocompleteByTextHandler(this.getAutocompleteSearchText());
+        const currentSearchText = this.getAutocompleteSearchText();
+        // Si no hay opciones cargadas O el input está vacío y no hay un elemento seleccionado
+        if (this.originalOptions().length === 0 ||
+            (currentSearchText === "" && !this._selectedElement)) {
+            this.resetAutocompleteState(); // Reiniciar estado antes de una nueva búsqueda
+            this._lastSearchText = currentSearchText;
+            console.log("On focus, initiating search for:", currentSearchText);
+            this.getAutocompleteByTextHandler(currentSearchText);
+        }
+        else if (this.matAutocomplete._isOpen &&
+            currentSearchText === this._lastSearchText) {
+            // Si el panel ya está abierto y el texto no ha cambiado, no hacer nada para evitar re-cargas innecesarias.
+            // Si el panel no estaba abierto, la apertura de `matAutocomplete.opened` se encargará de la carga.
+            console.log("On focus, panel already open with same text, skipping search.");
         }
     }
     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);
+            console.log("Option selected. Last search text set to:", this._lastSearchText);
         }
         else {
-            this.propagateChange($event.option.value);
+            // Si se deselecciona o selecciona nulo
+            this.propagateChange(null);
+            this.selectElement.emit(null);
+            this._selectedElement = null;
+            this._lastSearchText = "";
+            this.resetAutocompleteState(); // Resetear estado si se "deselecciona" explícitamente
+        }
+        // Después de la selección, cerrar el panel de forma programática.
+        // Esto asegura que la lógica de `closed` se ejecute correctamente.
+        // this.matAutocomplete.closePanel(); // Descomentar si el panel no se cierra automáticamente
+    }
+    /**
+     * Handles the scroll event in the autocomplete panel to load more data.
+     */
+    onScroll(event) {
+        const element = event.target;
+        const scrollPosition = element.scrollTop + element.clientHeight;
+        const scrollHeight = element.scrollHeight;
+        const threshold = 50; // Pixels before the end to load more
+        // console.log("--- Scroll Event ---");
+        // console.log("Scroll Top:", element.scrollTop);
+        // console.log("Client Height:", element.clientHeight);
+        // console.log("Scroll Position (Top + Client):", scrollPosition);
+        // console.log("Scroll Height (Total):", scrollHeight);
+        // console.log("Remaining distance to bottom:", scrollHeight - scrollPosition);
+        // console.log("Is Loading:", this.loading());
+        // console.log("Has More:", this.hasMore());
+        if (scrollHeight - scrollPosition <= threshold &&
+            !this.loading() &&
+            this.hasMore()) {
+            console.log("Loading more data for infinity scroll...");
+            // 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: "19.2.12", 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: "19.2.12", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", 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", 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]", exportAs: ["matButton"] }, { 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 [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]=\"auto\" [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 #auto=\"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]", exportAs: ["matButton"] }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", 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 +652,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
                         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 [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]=\"auto\" [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 #auto=\"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"] }]
         }], 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: [{
@@ -486,12 +713,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
                 type: Input
             }], modifyResultFn: [{
                 type: Input
-            }], SelectElement: [{
+            }], selectElement: [{
                 type: Output
             }], clearElement: [{
                 type: Output
             }], url: [{
                 type: Input
+            }], limit: [{
+                type: Input
             }], clearData: [{
                 type: Input
             }], initialValue: [{
@@ -506,13 +735,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
                 type: Input
             }] } });
 /**
- * Validación customizada para la selección de elementos
+ * Custom validation for element selection
  */
 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 autocomplete, no solo texto libre.
+    if (typeof control?.value === "object" &&
+        control?.value !== null &&
+        "id" in control.value) {
+        return null;
     }
-    return null;
+    return { invalidSelection: true };
 }
 
 /*