ng-easycommerce-v18 0.3.22-beta.2 → 0.3.22

package/fesm2022/ng-easycommerce-v18.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, makeEnvironmentProviders, inject, Injectable, PLATFORM_ID, RendererFactory2, afterNextRender, signal, EnvironmentInjector, runInInjectionContext, Component, ChangeDetectorRef, HostListener, CUSTOM_ELEMENTS_SCHEMA, Input, Pipe, Injector, EventEmitter, Output, forwardRef, afterRender, ViewChild, Inject, computed, Renderer2, ChangeDetectionStrategy, Directive } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, isPlatformBrowser, AsyncPipe, CommonModule, TitleCasePipe, JsonPipe, UpperCasePipe, Location } from '@angular/common';
-import { take, BehaviorSubject, shareReplay, map, catchError, of, filter, ReplaySubject, firstValueFrom, concatMap, throwError, switchMap, combineLatest } from 'rxjs';
+import { take, BehaviorSubject, shareReplay, map, catchError, of, filter, ReplaySubject, firstValueFrom, concatMap, throwError, tap, distinctUntilChanged, switchMap, combineLatest, Subject, takeUntil } from 'rxjs';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
@@ -243,6 +243,11 @@ class CoreConstantsService {
      * Guarda la variable window del web browser.
      */
     window;
+    /**
+     * Tipo de ruta actual (ej: 'categories', 'attributes', etc).
+     * Lo usamos para que PaginationService sepa qué filtro esperar.
+     */
+    currentRouteType = null;
     constructor() {
         if (isPlatformBrowser(this.platformId)) {
             this.window = window;
@@ -520,6 +525,12 @@ class CoreConstantsService {
         return this.apiConstants.CHANNEL;
     }
     form_sender = false;
+    setCurrentRouteType(type) {
+        this.currentRouteType = type;
+    }
+    getCurrentRouteType() {
+        return this.currentRouteType;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CoreConstantsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CoreConstantsService, providedIn: 'root' });
 }
@@ -2883,17 +2894,24 @@ class Filter {
     };
 }
 
+/**
+ * CategoryFilter
+ * - Gestiona el filtro de categorías.
+ * - Mantiene la estructura de categorías (parents/children) y permite:
+ *   * Inicializar desde OptionsService.
+ *   * Marcar elementos según slug o query param.
+ *   * Generar porción de query string (&category=...).
+ */
 class CategoryFilter extends Filter {
-    initialValues;
     _optionsService = inject(OptionsService);
+    _filtersService = inject(FiltersService);
     data = [];
     multi = false;
-    constructor(initialValues) {
+    constructor(initialValue) {
         super();
-        this.initialValues = initialValues;
         this._optionsService.getCategories().subscribe(res => {
-            //console.log(res);
-            this.setContent(res, initialValues);
+            this.setContent(res, initialValue);
+            this._filtersService.refreshFilters();
         });
     }
     type() {
@@ -2905,44 +2923,122 @@ class CategoryFilter extends Filter {
         this.data = categories;
     }
     getContent() {
-        throw new Error("Method not implemented.");
+        return this.data;
     }
-    toUrlParams(actual_url = '', sublist) {
-        let elements = sublist || this.data;
-        elements.forEach((element) => {
-            if (element.type == 'sub' && !element.selected) {
-                const result = this.toUrlParams('', element.children);
-                !actual_url.includes(result) ? actual_url += result : null;
-            }
-            else if (element.selected) {
-                if (actual_url == '')
-                    actual_url = '&category=' + element.value;
-                else
-                    actual_url = element.value;
-            }
-        });
-        return actual_url;
+    /**
+     * toUrlParams
+     * - Recorre la estructura y devuelve la porción de query string para la categoría seleccionada.
+     * - Prioriza el primer selected encontrado (solo una categoría se envía).
+     */
+    toUrlParams() {
+        const selectedCodes = [];
+        const walk = (nodes) => {
+            nodes.forEach(n => {
+                if (n.selected) {
+                    selectedCodes.push(n.code || n.value);
+                }
+                if (Array.isArray(n.children) && n.children.length) {
+                    walk(n.children);
+                }
+            });
+        };
+        walk(this.data);
+        if (selectedCodes.length > 0) {
+            return `&category=${encodeURIComponent(selectedCodes[0])}`;
+        }
+        return '';
     }
     createElement(filter, original, initialValue) {
         if (filter.type == 'sub') {
             filter.multi = false;
             filter.shape = 'text';
             filter.value = original.code;
-            filter.selected = (initialValue && this.removeAccents(original.slug?.toLowerCase()) == this.removeAccents(initialValue?.toLowerCase()));
+            filter.selected = (initialValue &&
+                this.removeAccents(original.slug?.toLowerCase()) ===
+                    this.removeAccents(String(initialValue).toLowerCase()));
             filter.children = filter.children.map((child, i) => this.createElement(child, original.children[i], initialValue));
         }
         else {
             filter.value = original.code;
-            filter.selected = (initialValue && this.removeAccents(original.slug?.toLowerCase()) == this.removeAccents(initialValue?.toLowerCase()));
+            filter.selected = (initialValue &&
+                this.removeAccents(original.slug?.toLowerCase()) ===
+                    this.removeAccents(String(initialValue).toLowerCase()));
         }
         return filter;
     }
+    /**
+     * setFromSlug
+     * - Marca como selected los nodos cuyo slug/path/name coincide con el slug proporcionado.
+     * - Utiliza removeAccents para comparar sin tildes y en minúsculas.
+     * - No retorna valor, solo modifica this.data.
+     */
+    setFromSlug(slug) {
+        const target = this.removeAccents(String(slug).toLowerCase());
+        const walk = (nodes) => {
+            nodes.forEach(n => {
+                // ADDED: iniciar sin selección explícita (asegura estado consistente)
+                n.selected = false;
+                const candidates = [
+                    n.slug,
+                    n.path && String(n.path).split('/').filter(Boolean).pop(),
+                    n.name
+                ]
+                    .filter(Boolean)
+                    .map((s) => this.removeAccents(s.toLowerCase()));
+                if (candidates.includes(target)) {
+                    n.selected = true;
+                }
+                if (Array.isArray(n.children) && n.children.length) {
+                    walk(n.children);
+                }
+            });
+        };
+        walk(this.data);
+    }
+    /**
+     * hydrateFromQuery
+     * - Marca la categoría según el parámetro de query 'category' si existe.
+     * - Busca el code exacto en la estructura y marca el nodo correspondiente.
+     * - Loggea si se encontró o no la categoría.
+     */
+    hydrateFromQuery(query) {
+        const raw = query?.['category'];
+        if (!raw)
+            return;
+        const code = String(raw).trim();
+        if (!code)
+            return;
+        const mark = (nodes) => {
+            let found = false;
+            nodes.forEach(n => {
+                if (n.code === code) {
+                    n.selected = true;
+                    found = true;
+                }
+                else {
+                    n.selected = false;
+                }
+                if (Array.isArray(n.children) && n.children.length) {
+                    if (mark(n.children))
+                        found = true;
+                }
+            });
+            return found;
+        };
+        const ok = mark(this.data);
+    }
 }
 
+/**
+ * AttributesFilter
+ * - Gestiona el filtro de atributos (estructura de padres/children).
+ * - Soporta hidratación desde query params y aplicación de códigos seleccionados.
+ */
 class AttributesFilter extends Filter {
     _optionsService = inject(OptionsService);
     data = [];
     multi = false;
+    _codesFromQuery = null;
     constructor(initialValue, options) {
         super();
         if (options) {
@@ -2950,7 +3046,6 @@ class AttributesFilter extends Filter {
         }
         else {
             this._optionsService.getAttributes().subscribe(res => {
-                //console.log(res);
                 this.setContent(res, initialValue);
             });
         }
@@ -2960,10 +3055,18 @@ class AttributesFilter extends Filter {
         const attributes = this._optionsService.generateMenu(options);
         attributes.forEach((filter) => filter = this.createElement(filter, options, initialValue));
         this.data = attributes;
+        // Si ya teníamos códigos de la URL guardados, aplicarlos ahora
+        if (this._codesFromQuery && this._codesFromQuery.length) {
+            // ADDED: Aplicar códigos guardados tras cargar la data.
+            this.applyCodes(this._codesFromQuery);
+        }
     }
     getContent() {
         return this.data;
     }
+    /**
+     * ADDED: toUrlParams construye la porción de query string que representa las selecciones de atributos.
+     */
     toUrlParams(actual_url = '&attributeCodes=', sublist, already) {
         let elements = sublist || this.data;
         let aux_url = '';
@@ -2985,12 +3088,14 @@ class AttributesFilter extends Filter {
                 }
             }
         });
-        //console.log(actual_url + aux_url);
         return actual_url + aux_url;
     }
     ;
     cleanResult(text) { return text.replace('&attributeCodes=', ''); }
     ;
+    /**
+     * ADDED: createElement transforma cada nodo original en FilterElement y marca selección inicial si corresponde.
+     */
     createElement(filter, original, initialValue) {
         if (filter.type == 'sub') {
             filter.multi = false;
@@ -3003,10 +3108,65 @@ class AttributesFilter extends Filter {
         else {
             filter.value = original.code;
             filter.multi = false;
-            filter.selected = (initialValue && this.removeAccents(original.slug?.toLowerCase()) == this.removeAccents(initialValue?.toLowerCase()));
+            filter.selected = (initialValue &&
+                this.removeAccents(original.slug?.toLowerCase()) === this.removeAccents(initialValue?.toLowerCase()));
         }
         return filter;
     }
+    /** hidratar desde la URL */
+    hydrateFromQuery(params) {
+        const raw = params['attributeCodes'];
+        if (!raw) {
+            // nada en la URL → limpió filtro
+            this._codesFromQuery = null;
+            this.clearSelection();
+            return;
+        }
+        const codes = String(raw)
+            .split('<and>')
+            .map(c => c.trim())
+            .filter(Boolean);
+        if (!codes.length) {
+            this._codesFromQuery = null;
+            this.clearSelection();
+            return;
+        }
+        this._codesFromQuery = codes;
+        // Si ya tengo data cargada, aplico ahora;
+        // si no, se aplicará en setContent().
+        if (this.data && this.data.length) {
+            // ADDED: Aplicar códigos inmediatamente porque la data ya está disponible.
+            this.applyCodes(codes);
+        }
+    }
+    /**
+     * ADDED: applyCodes recorre la estructura y marca selected=true en los children cuyo código está en 'codes'.
+     * Además marca el parent como seleccionado si alguno de sus hijos lo está.
+     */
+    applyCodes(codes) {
+        this.data?.forEach((parent) => {
+            parent.selected = false;
+            (parent.children || []).forEach((child) => {
+                const code = child.code || child.value;
+                const isSelected = codes.includes(code);
+                child.selected = isSelected;
+                if (isSelected) {
+                    parent.selected = true;
+                }
+            });
+        });
+    }
+    /**
+     * ADDED: clearSelection desmarca todos los parents y children (restablece el filtro).
+     */
+    clearSelection() {
+        this.data?.forEach((parent) => {
+            parent.selected = false;
+            (parent.children || []).forEach((child) => {
+                child.selected = false;
+            });
+        });
+    }
 }
 
 class DynamicsFilter extends Filter {
@@ -3167,8 +3327,8 @@ class PriceRangeFilter extends Filter {
         if (options.minPrice != null && options.maxPrice != null) {
             this.minPrice = options.minPrice;
             this.maxPrice = options.maxPrice;
-            this.currentMinPrice = options.currentMinPrice ?? this.minPrice;
-            this.currentMaxPrice = options.currentMaxPrice ?? this.maxPrice;
+            this.currentMinPrice = options.currentMinPrice ?? null;
+            this.currentMaxPrice = options.currentMaxPrice ?? null;
             this._loaded = true;
         }
     };
@@ -3213,9 +3373,13 @@ class FilterFactory {
     create(filterType, productsFilter) {
         switch (filterType) {
             case 'categories':
-                return new CategoryFilter(productsFilter ? (productsFilter.type == 'categories' && productsFilter.value) : null);
+                return new CategoryFilter(productsFilter?.type === 'categories'
+                    ? productsFilter.value
+                    : null);
             case 'attributes':
-                return new AttributesFilter(productsFilter ? (productsFilter.type == 'attributes' && productsFilter.value) : null);
+                return new AttributesFilter(productsFilter?.type === 'attributes'
+                    ? productsFilter.value
+                    : null);
             case 'dynamics':
                 return new DynamicsFilter();
             case 'sort':
@@ -3827,6 +3991,7 @@ class FiltersService {
         limit: 0
     };
     _filtersInitialized = false;
+    _lastRouteQuery = null;
     constructor() {
         //this._defaultFilters = this._consts.getDefaultFilters()
     }
@@ -3847,10 +4012,20 @@ class FiltersService {
         let extra_params = '';
         this._filtersSubject.value.forEach(filter => {
             const extra = filter.toUrlParams();
-            extra.split('=')[1] != '' ? extra_params += extra : null;
+            if (extra && extra.split('=')[1] !== '') {
+                extra_params += extra;
+            }
         });
-        if (search_value)
-            extra_params += ('&criteria[search][type]=contains&criteria[search][value]=' + search_value);
+        // Si en la URL ya venía `attributeCodes` pero aún ningún filtro lo agregó,
+        // lo volvemos a sumar a mano. Esto evita que al refrescar (SSR) se pierda el filtro
+        // aunque el AttributesFilter todavía no haya terminado de hidratarse.
+        const attributeCodesFromRoute = this._lastRouteQuery?.['attributeCodes'];
+        if (attributeCodesFromRoute && !extra_params.includes('attributeCodes=')) {
+            extra_params += `&attributeCodes=${attributeCodesFromRoute}`;
+        }
+        if (search_value) {
+            extra_params += '&criteria[search][type]=contains&criteria[search][value]=' + search_value;
+        }
         return this.productsFilterApi(extra_params);
     }
     isUpdated(paginationSettings) {
@@ -3866,7 +4041,7 @@ class FiltersService {
             this._paginationSettings = paginationSettings;
         return change;
     }
-    setFilters(paginationSettings, search_value) {
+    setFilters(paginationSettings, search_value, routeQueryParams) {
         this._paginationSettings = paginationSettings;
         let final_filters = [];
         let filtersToProcess = this._optionsFilters?.includes('all')
@@ -3879,15 +4054,30 @@ class FiltersService {
                 if (filter) {
                     final_filters.push(filter);
                 }
-                else {
-                    // console.warn(`❌ Failed to create filter for type: ${filterType}`);
-                }
             });
         });
         this._defaultFilters?.forEach(filterDefault => {
             let filter = final_filters.find(filter => filter.type() == filterDefault.filter_type);
             filter && filterDefault.codes.forEach(value => filter.setSelected(value));
         });
+        // hidratar price_range desde la URL
+        if (routeQueryParams) {
+            const pr = final_filters.find(f => f.type() === 'price_range');
+            if (pr) {
+                const rawMin = routeQueryParams['price_min'];
+                const rawMax = routeQueryParams['price_max'];
+                const min = rawMin != null ? Number(rawMin) : null;
+                const max = rawMax != null ? Number(rawMax) : null;
+                if ((min != null && !Number.isNaN(min)) || (max != null && !Number.isNaN(max))) {
+                    if (min != null && !Number.isNaN(min)) {
+                        pr.currentMinPrice = min;
+                    }
+                    if (max != null && !Number.isNaN(max)) {
+                        pr.currentMaxPrice = max;
+                    }
+                }
+            }
+        }
         this._filtersSubject.next(final_filters);
     }
     getFilters(paginationSettings) {
@@ -3902,9 +4092,7 @@ class FiltersService {
         runInInjectionContext(this.environmentInjector, () => {
             const filterFactory = new FilterFactory();
             filtersToProcess?.forEach(filterType => {
-                // console.log('Creating filter for type:', filterType);
                 const filter = filterFactory.create(filterType, settings);
-                // console.log('Created filter:', filter);
                 if (filter) {
                     final_filters.push(filter);
                 }
@@ -3929,7 +4117,6 @@ class FiltersService {
         if (filterObj.type() !== 'price_range') {
             let index = final_filters.findIndex(filter => filter.type() == filterObj.type());
             final_filters[index].setSelected(filterElem, filterElem.value || filterElem.code);
-            console.log(index, final_filters);
         }
         this._filtersSubject.next(final_filters);
         // }
@@ -3939,13 +4126,6 @@ class FiltersService {
         runInInjectionContext(this.environmentInjector, () => {
             const filterFactory = new FilterFactory();
             const filter = [];
-            /* claves.forEach((key:any) => {
-                filter.push(filterFactory.create(key))
-                paginationFilters[key].forEach((value:any) => {
-                     console.log(filter[0].createElement(value,paginationFilters[key]));
-                })
-               
-            }) */
             this._filtersSubject.value.forEach((value) => {
                 if (value.type() == "attributes") {
                     //value.data = [];
@@ -3965,6 +4145,95 @@ class FiltersService {
         pr.setSelected(min, max);
         this._filtersSubject.next([...filters]);
     }
+    /**
+     * Fuerza a emitir de nuevo los filtros actuales.
+     * Útil cuando un filtro async (categorías, atributos) termina de cargarse
+     * y necesitamos que PaginationService vuelva a armar la URL.
+     */
+    refreshFilters() {
+        const current = this._filtersSubject.value;
+        // Emitimos una copia para que los subscribers detecten el cambio
+        this._filtersSubject.next([...current]);
+    }
+    /**
+     * Punto central donde se hidratan los filtros a partir de la URL:
+     * - Lee type/value de la ruta (ej. /collection/categories/:value).
+     * - Lee query params (category, price_min, price_max, attributeCodes, search, etc.).
+     * - Crea instancias de filtros y les delega la hidratación específica.
+     *
+     * Este método se llama tanto en SSR como en navegador.
+     */
+    hydrateFromRoute(paginationSettings, routeParams, routeQuery) {
+        // hidratar search desde la URL ===
+        const searchFromUrl = routeQuery?.['search'];
+        if (typeof searchFromUrl === 'string' && searchFromUrl.trim() !== '') {
+            // Guardamos el valor para que otros componentes (Header, Collection) lo reutilicen
+            this._consts.searchValue = searchFromUrl.trim();
+        }
+        else {
+            // Si no viene `search` en la URL, limpiamos el estado global para no arrastrar búsquedas viejas
+            this._consts.searchValue = '';
+        }
+        // Guardamos la última query completa para usarla en generateFinalApi (parche attributeCodes)
+        this._lastRouteQuery = routeQuery;
+        // Guardamos las settings actuales (type, value, limit, etc.)
+        this._paginationSettings = paginationSettings;
+        // Creamos los filtros base (attributes, categories, dynamics, sort, price_range, etc.)
+        let final_filters = [];
+        let filtersToProcess = this._optionsFilters?.includes('all')
+            ? ['attributes', 'categories', 'dynamics', 'sort', 'price_range']
+            : this._optionsFilters;
+        runInInjectionContext(this.environmentInjector, () => {
+            const filterFactory = new FilterFactory();
+            filtersToProcess?.forEach(filterType => {
+                const filter = filterFactory.create(filterType, paginationSettings);
+                if (filter) {
+                    final_filters.push(filter);
+                }
+            });
+        });
+        // Aplicamos defaultFilters si corresponde
+        this._defaultFilters?.forEach(filterDefault => {
+            const filter = final_filters.find(f => f.type() === filterDefault.filter_type);
+            filter && filterDefault.codes.forEach(value => filter.setSelected(value));
+        });
+        // Hidratar filtros con slug y query params genéricos
+        final_filters.forEach(f => {
+            const anyFilter = f;
+            // type/value en la URL: /collection/categories/:value
+            const urlType = routeParams['type'];
+            const urlValue = routeParams['value'];
+            // Por ejemplo, el CategoryFilter implementa setFromSlug para marcar la categoría correcta
+            if (urlType === 'categories' && urlValue && typeof anyFilter.setFromSlug === 'function') {
+                anyFilter.setFromSlug(urlValue);
+            }
+            // query params genéricos: ?category=0101&price_min=...&price_max=...&attributeCodes=...
+            // Cada filtro que lo soporte implementa hydrateFromQuery y decide qué leer.
+            if (typeof anyFilter.hydrateFromQuery === 'function') {
+                anyFilter.hydrateFromQuery(routeQuery);
+            }
+        });
+        // Hidratar específicamente el PriceRangeFilter desde la URL
+        const priceFilter = final_filters.find((f) => f instanceof PriceRangeFilter);
+        if (priceFilter && routeQuery) {
+            const minFromUrl = routeQuery['price_min'];
+            const maxFromUrl = routeQuery['price_max'];
+            if (minFromUrl != null || maxFromUrl != null) {
+                const min = minFromUrl != null ? Number(minFromUrl) : priceFilter.minPrice;
+                const max = maxFromUrl != null ? Number(maxFromUrl) : priceFilter.maxPrice;
+                // usamos la API del filtro para setear el rango
+                priceFilter.setSelected(min, max);
+            }
+            else {
+                // si no hay nada en la URL, lo reseteamos
+                priceFilter.reset();
+            }
+        }
+        // Emitimos filtros ya hidratados para que PaginationService y Collection reaccionen
+        this._filtersSubject.next(final_filters);
+        // Marcamos que el sistema de filtros está listo (útil para mostrar spinners, etc.)
+        this._readySubject.next(true);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FiltersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FiltersService, providedIn: 'root' });
 }
@@ -3976,17 +4245,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [] });
 
 /**
- * Servicio para manejar la paginación de los productos.
- * @class PaginationService
+ * Servicio para manejar la paginación y la carga de productos.
+ *
+ * Se encarga de:
+ * - Escuchar los cambios en los filtros (categorías, atributos, precio, búsqueda, etc.).
+ * - Construir la URL al backend con esos filtros.
+ * - Pedir los productos al endpoint de product-search.
+ * - Exponer un observable con la última página de productos (`paginationData$`)
+ *   y otros helpers (precio mínimo/máximo, siguiente página, etc.).
  */
 class PaginationService {
     _connectionService = inject(ConnectionService);
     _filtersService = inject(FiltersService);
     _constants = inject(CoreConstantsService);
-    paginationData$ = this._filtersService.filters$.pipe(shareReplay(1), filter(filters => filters && filters.length > 0), switchMap((filters) => {
+    /**
+     * Flujo principal: a partir de los filtros → arma URL → consulta backend → devuelve productos.
+     *
+     * Pasos:
+     * 1) Espera a que `FiltersService` emita filtros válidos.
+     * 2) Construye la URL final con `buildUrl()`.
+     * 3) Evita repetir llamadas si la URL no cambió (`distinctUntilChanged`).
+     * 4) Llama al backend con `getData(url)`.
+     * 5) Comparte el último resultado con todos los suscriptores (`shareReplay(1)`).
+     */
+    paginationData$ = this._filtersService.filters$.pipe(tap(filters => {
+    }), filter(filters => {
+        if (!filters || !filters.length)
+            return false;
+        const categoryFilter = filters.find(f => f.type() === 'categories');
+        const hasCategorySelected = !!categoryFilter?.getSelectedList()?.length;
+        const isCategoryRoute = this._constants.currentRouteType === 'categories';
+        // Si estamos en ruta de categorías y todavía no se marcó ninguna,
+        // esperamos a que el CategoryFilter se hidrate antes de disparar la llamada.
+        if (isCategoryRoute && !hasCategorySelected) {
+            return false;
+        }
+        return true;
+    }), 
+    // 2) Convertimos filtros -> URL
+    map(filters => {
         const url = this.buildUrl(filters);
-        return this.getData(url);
-    }));
+        return url;
+    }), 
+    // 3) Solo seguimos si la URL cambió respecto de la emisión anterior
+    distinctUntilChanged(), 
+    // 4) Llamamos al backend con la URL construida
+    tap(url => {
+    }), switchMap(url => this.getData(url)), 
+    // 5) Reutilizar resultado si alguien más se suscribe (evita repetir la petición)
+    shareReplay(1));
     _dataPagination = signal({
         attributes: [],
         category: [],
@@ -4055,7 +4362,8 @@ class PaginationService {
         this._dataPagination.set({ ...response, called: true });
         this._finished = (response.page == response.pages);
         this._waiting = false;
-        // Emitir los valores de price_min y price_max a través de priceRangeSubject
+        // Emitir los valores de price_min y price_max a través de priceRangeSubject,
+        // para que otros componentes (ej. filtro de precio) puedan mostrarlos.
         this.priceRangeSubject.next({
             price_min: response.price_min,
             price_max: response.price_max
@@ -4115,27 +4423,36 @@ class PaginationService {
      * @returns
      */
     buildUrl(filters) {
-        if (this._constants.searchValue) {
-            return this._filtersService.generateFinalApi(this._constants.searchValue);
-        }
-        else {
-            return this._filtersService.generateFinalApi();
-        }
+        const url = this._constants.searchValue
+            ? this._filtersService.generateFinalApi(this._constants.searchValue)
+            : this._filtersService.generateFinalApi();
+        return url;
     }
     /**
-     * Devuelve un observable de los productos que devolvio la última página obtenida.
+     * Devuelve un observable de los productos que devolvió la última página obtenida.
      * @param url
      * @returns
      */
     getData(url) {
-        this._resetSubject.next(true);
-        this._nextProductsSubject.next([]);
-        this._connectionService.get(url, { limit: 10, page: 1 }).pipe(map(res => {
-            //console.log(res)
-            this._nextProductsSubject.next(res.items);
+        // Detectar la página desde la URL (?page=n). Si no viene, asumimos page=1.
+        const pageMatch = url.match(/[?&]page=(\d+)/);
+        const page = pageMatch ? Number(pageMatch[1]) : 1;
+        // Si es la primera página, reseteamos estado interno
+        if (page === 1) {
+            this._resetSubject.next(true);
+            this._nextProductsSubject.next([]);
+        }
+        // Llamamos al backend con el page correcto
+        return this._connectionService.get(url, { limit: 10, page }).pipe(tap((res) => {
+            // Actualizar datos de paginación + price_min/price_max
             res.links ? this.updatePageData(res) : this.finish(res);
-        })).subscribe();
-        return this.nextProducts$;
+        }), map((res) => {
+            const items = res.items ?? [];
+            // Mantener nextProducts$ sincronizado (por compatibilidad)
+            this._nextProductsSubject.next(items);
+            // Lo que ve paginationData$ (switchMap) son estos items
+            return items;
+        }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationService, providedIn: 'root' });
@@ -4200,9 +4517,11 @@ class ProductsService {
      * @param paginationSettings
      * @param searchValue
      */
-    getProductsForFilter(paginationSettings, searchValue) {
+    getProductsForFilter(paginationSettings, searchValue, routeQueryParams) {
         searchValue ? this.searchValue.set(searchValue) : this.searchValue.set('');
-        paginationSettings && this._filtersService.setFilters(paginationSettings);
+        if (paginationSettings) {
+            this._filtersService.setFilters(paginationSettings, searchValue, routeQueryParams);
+        }
     }
     /**
      * Actualiza los productos con los de la siguiente pagina.
@@ -6327,10 +6646,8 @@ class HeaderEcComponent extends MenuEcComponent {
     constructor() {
         super();
         this._channelService.channel$.subscribe(cfg => {
-            // console.log('Channel configuration:', cfg);
             this.showPricesOnlyToLoggedUsers = !!cfg.showPricesOnlyToLoggedUsers;
             this.hidePrices = !!cfg.hidePrices;
-            // console.log('hidePrices:', this.hidePrices);
         });
     }
     coreConstantsService = inject(CoreConstantsService);
@@ -6338,6 +6655,7 @@ class HeaderEcComponent extends MenuEcComponent {
     cdr = inject(ChangeDetectorRef); // Inyectamos ChangeDetectorRef para forzar la actualización
     ngOnInit() {
         this.channel = this.coreConstantsService.getChannel();
+        this.searchValue = this.coreConstantsService.searchValue || '';
         this.onWindowScroll();
         this.detectRouteChange(); // Llamamos a la función que detecta el cambio de ruta
         // Usar el Observable del AuthService
@@ -6431,12 +6749,19 @@ class HeaderEcComponent extends MenuEcComponent {
         }
         this.searchValue = '';
         this.coreConstantsService.searchValue = '';
-        this.getCollectionSearch();
+        // En lugar de relanzar la búsqueda con string vacío,
+        // actualizamos la URL para quitar el query param `search` y resetear la paginación.
+        this.router.navigate(['/collection'], {
+            queryParams: {
+                search: null,
+                page: null
+            },
+            queryParamsHandling: 'merge'
+        });
     }
     setupMobileMenu() {
-        if (!isPlatformBrowser(this.platformId))
+        if (!isPlatformBrowser(this.platformId) || typeof document === 'undefined')
             return;
-        // console.log('setupMobileMenu called');
         const menuMobile = document.querySelector('.menuMobile');
         if (!(menuMobile instanceof HTMLElement))
             return;
@@ -8226,6 +8551,7 @@ class CollectionEcComponent {
     _productsService = inject(ProductsService);
     _activeRoute = inject(ActivatedRoute);
     _optionsService = inject(OptionsService);
+    _filtersService = inject(FiltersService);
     params$ = this._activeRoute.params;
     //public ready = this._optionsService.ready
     queryParams$ = this._activeRoute.queryParams;
@@ -8237,40 +8563,63 @@ class CollectionEcComponent {
     defaultFilters = [];
     loading = false;
     countProducts = signal(0);
-    loaded = false;
+    loaded = signal(false);
     optionsFilters = ['all'];
     filters_sort = [];
-    _filtersService = inject(FiltersService);
     filters$ = this._filtersService.filters$;
     ready$ = this._filtersService.ready$;
     window;
     isList = false;
+    destroy$ = new Subject();
     setAsList = (value) => this.isList = value;
     ngOnInit() {
-        this.getProducts();
-        this.window?.scroll(0, 0);
+        if (isPlatformBrowser(this.platformId)) {
+            this.window?.scroll(0, 0);
+        }
+        combineLatest([this.params$, this.queryParams$])
+            .pipe(map(([params, query]) => ({ params, query })), distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)), takeUntil(this.destroy$))
+            .subscribe(({ params, query }) => {
+            // Guardamos el tipo de ruta actual en las constantes (ej: 'categories', 'sections', etc.)
+            const routeType = params['type'] || null;
+            this.constanst.setCurrentRouteType(routeType);
+            const paginationSettings = {
+                latest: true,
+                limit: 10,
+                type: params['type'] || null,
+                value: params['value'] || null
+            };
+            //  Punto clave:
+            //    A partir de la URL (params + query) reconstruimos los filtros
+            //    (categorías, atributos, rango de precios, etc.)
+            //    Esto permite:
+            //    - Soportar F5 / recarga sin perder filtros
+            //    - Navegar con URL compartibles (deep linking)
+            this._filtersService.hydrateFromRoute(paginationSettings, params, query);
+        });
     }
     //protected readonly questions = signal<Question[]>([]);
     total = 0;
     platformId = inject(PLATFORM_ID);
     constructor() {
+        // Guardamos window sólo en Browser para evitar errores en SSR
         if (isPlatformBrowser(this.platformId)) {
             this.window = window;
         }
-    }
-    getProducts() {
-        combineLatest([this.params$, this.queryParams$]).subscribe({
-            next: ([params, queryParams]) => {
-                const paginationSettings = {
-                    latest: true,
-                    limit: 10,
-                    type: params['type'] || null,
-                    value: params['value'] || null
-                };
-                this._productsService.getProductsForFilter(paginationSettings, queryParams["search"]);
+        //  Nos suscribimos al stream de productos.
+        //    Cuando ProductsService emite, marcamos `loaded` en true, pero solo en Browser.
+        //    En SSR no lo marcamos para evitar cambios de estado innecesarios.
+        this.products$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(products => {
+            if (isPlatformBrowser(this.platformId)) {
+                this.loaded.set(true);
             }
         });
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
     onScroll() {
         this.loading = true;
         this._productsService.updateProducts();
@@ -8898,6 +9247,7 @@ class FiltersEcComponent {
     injector = inject(Injector);
     isAuthenticated$ = this._authService.isAuthenticated();
     hidePrices = false;
+    route = inject(ActivatedRoute);
     setSelect;
     ngOnInit() {
     }
@@ -8927,26 +9277,56 @@ class FiltersEcComponent {
              .pop()
          selectedOption && this._filtersService.setFilterSelected(this.filters[0], selectedOption) */
     }
+    /**
+     * Maneja el click sobre un elemento de filtro (categoría, atributo, etc.).
+     *
+     * - Para categorías: navega a la URL de la categoría.
+     * - Para atributos: actualiza la query string de la URL con `attributeCodes`.
+     * - Para otros filtros: delega en FiltersService para marcar seleccionado.
+     *
+     * La idea es que **la URL siempre represente los filtros aplicados**,
+     * de modo que:
+     *   - al hacer F5 no se pierdan los filtros,
+     *   - los links sean compartibles (deep linking).
+     */
     setSelected(filter, selected) {
         if (!filter || !selected) {
-            console.error('Filter or selected element is undefined:', { filter, selected });
             return;
         }
+        // Si el elemento está marcado como no visible, no hacemos nada
+        if (selected.isVisible === false)
+            return;
         if (typeof filter.setSelected !== 'function') {
-            console.error('filter.setSelected is not a function. Filter might not be an instance of the expected class:', filter);
             return;
         }
         try {
-            // this._filtersService.setFilterSelected(filter, selected);
             if (filter.type() === 'categories') {
+                // Para categorías usamos navegación por path (ej: /collection/categories/camas-elasticas)
                 if (selected.path) {
                     this.router.navigate([selected.path]);
                 }
+                return;
             }
-            else if (filter.type() === 'attributes') {
-                // Manejar la navegación para atributos
-                this._filtersService.setFilterSelected(filter, selected);
+            if (filter.type() === 'attributes') {
+                // El backend espera que le mandemos el "code" del atributo en el query param
+                const code = selected.code || selected.value || null;
+                // Actualizamos la URL manteniendo la ruta, pero agregando `attributeCodes`
+                // Ejemplo de resultado:
+                //   /collection/categories/camas-elasticas?attributeCodes=ABC123&...
+                //
+                // También reseteamos la página a null para que vuelva a la primera página
+                // cuando se aplica un nuevo filtro.
+                this.router.navigate([], {
+                    relativeTo: this.route,
+                    queryParams: {
+                        attributeCodes: code,
+                        page: null
+                    },
+                    queryParamsHandling: 'merge'
+                });
+                return;
             }
+            this._filtersService.setFilterSelected(filter, selected);
         }
         catch (error) {
             console.error("Error while setting selected filter:", error);
@@ -8980,7 +9360,9 @@ class FiltersEcComponent {
         return true;
     };
     scrollUp = () => {
-        window.scroll(0, 0);
+        if (typeof window !== 'undefined') {
+            window.scroll(0, 0);
+        }
         return true;
     };
     hasAppliedFilters() {
@@ -11896,6 +12278,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class PriceRangeFilterComponent {
     _filtersService = inject(FiltersService);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
     priceGap = 1;
     roundStep = 5;
     filter;
@@ -11932,7 +12316,15 @@ class PriceRangeFilterComponent {
             return;
         const min = filter.currentMinPrice ?? filter.minPrice;
         const max = filter.currentMaxPrice ?? filter.maxPrice;
-        this._filtersService.updatePriceRangeFilter(min, max);
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: {
+                price_min: min !== filter.minPrice ? min : null,
+                price_max: max !== filter.maxPrice ? max : null,
+                page: null,
+            },
+            queryParamsHandling: 'merge'
+        });
     }
     getMinValue(filter) {
         return (filter instanceof PriceRangeFilter && filter.currentMinPrice != null)