ctt-babylon 0.22.113 → 0.22.115

package/fesm2022/ctt-babylon.mjs

@@ -7598,7 +7598,7 @@ class BabylonBlogDetailsComponent {
         this.removeJsonLd();
     }
     updateJsonLd() {
-        if (!this.title)
+        if (!this.title || typeof window === 'undefined')
             return;
         let lang;
         this.route.url.subscribe((segments) => {
@@ -23912,46 +23912,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * - filter       -> tipo principal (ej: hoteles, apartamentos, villas, etc.)
  * - destination  -> destino (por nombre)
  * - brand        -> marca / grupo
+ * - experience   -> experiencia asociada
+ * - services     -> servicios disponibles
  *
- * CÓMO FUNCIONA
- * -------------
- * 1. Las opciones de filtros se construyen dinámicamente a partir de `items`.
- * 2. Cada opción tiene:
- *    - label: texto real mostrado al usuario
- *    - slug : versión normalizada usada en la URL
- * 3. Al navegar con query params:
- *    - Se leen los slugs de la URL
- *    - Se resuelven a labels reales cuando los items están disponibles
- * 4. El filtrado interno SIEMPRE compara por slug (no por texto crudo).
- *
- * NORMALIZACIÓN
- * -------------
- * - Se usa `Utils.toSlug()` para normalizar textos (tildes, espacios, símbolos).
- * - Para el filtro principal (`filter`) se aplica además una singularización genérica
- *   (hoteles -> hotel, apartamentos -> apartamento), SIN traducciones ni diccionarios.
- *
- * EXTENDER CON NUEVOS FILTROS
- * --------------------------
- * Para añadir un nuevo filtro (ej: category, experience, rating):
- *
- * 1. Añadir un nuevo queryParam (ej: `category`)
- * 2. Crear:
- *    - selectedCategory
- *    - categoryOptions
- *    - categorySlugToLabel / categoryLabelToSlug
- * 3. Construir opciones en `buildFilterOptions()`
- * 4. Resolver desde URL en `resolvePendingFromMaps()`
- * 5. Aplicar condición en `filteredItems`
- * 6. Sincronizar en `syncQueryParams()`
- *
- * IMPORTANTE
- * ----------
- * - NUNCA comparar por texto directo.
- * - NUNCA meter valores crudos en la URL.
- * - Todo filtro nuevo debe pasar por slug.
- *
- * Con esto el componente es reutilizable entre proyectos,
- * idiomas y configuraciones distintas sin cambios estructurales.
+ * ACTUALIZACIÓN: BÚSQUEDA FACETADA (Faceted Search)
+ * -------------------------------------------------
+ * Ahora el componente actualiza dinámicamente las opciones de los desplegables.
+ * Al seleccionar un filtro, los demás ocultan las opciones que no tendrían resultados
+ * cruzados con la selección actual. Para evitar bloqueos, siempre se mantiene visible
+ * la opción que esté actualmente seleccionada.
  */
 class LisC4TxtDesCtaComponent {
     constructor() {
@@ -23963,15 +23932,22 @@ class LisC4TxtDesCtaComponent {
         this.hideServicesFilter = false;
         this.tagName = 'LisC4TxtDesCta';
         // UI labels seleccionados (lo que se muestra en los selects)
-        // En URL se guardan slugs.
-        this.selectedHotelType = ''; // => queryParam "filter"
-        this.selectedDestination = ''; // => queryParam "destination"
-        this.selectedBrand = ''; // => queryParam "brand"
+        this.selectedHotelType = '';
+        this.selectedDestination = '';
+        this.selectedBrand = '';
         this.selectedExperience = '';
+        // Opciones Dinámicas (Las que se muestran en el HTML y se actualizan al filtrar)
         this.hotelTypeOptions = [];
         this.destinationOptions = [];
         this.brandOptions = [];
         this.experienceOptions = [];
+        this.availableServices = [];
+        // Opciones Base (Listas maestras generadas al cargar, nunca se reducen)
+        this.baseHotelTypeOptions = [];
+        this.baseDestinationOptions = [];
+        this.baseBrandOptions = [];
+        this.baseExperienceOptions = [];
+        this.baseAvailableServices = [];
         this.pendingFilterSlug = null;
         this.pendingDestinationSlug = null;
         this.pendingBrandSlug = null;
@@ -23990,7 +23966,6 @@ class LisC4TxtDesCtaComponent {
         this.router = inject(Router);
         this.cdr = inject(ChangeDetectorRef);
         this.isSyncingFromUrl = false;
-        this.availableServices = [];
         this.selectedServices = new Set();
         this.isServicesMenuOpen = false;
     }
@@ -24007,8 +23982,6 @@ class LisC4TxtDesCtaComponent {
             this.pendingBrandSlug = params.get('brand');
             this.pendingExperienceSlug = params.get('experience');
             this.resolvePendingFromMaps();
-            // Si aún no hay maps (items no llegó), intenta fallback (mantener algo decente)
-            // Nota: no navegamos aquí.
             if (!this.selectedHotelType && filterSlug)
                 this.selectedHotelType = filterSlug;
             if (!this.selectedDestination && destinationSlug)
@@ -24017,6 +23990,7 @@ class LisC4TxtDesCtaComponent {
                 this.selectedBrand = brandSlug;
             if (!this.selectedExperience && experienceSlug)
                 this.selectedExperience = experienceSlug;
+            this.updateDynamicOptions(); // Actualiza los listados dinámicos con la hidratación
             this.cdr.markForCheck();
             queueMicrotask(() => (this.isSyncingFromUrl = false));
         });
@@ -24024,7 +23998,6 @@ class LisC4TxtDesCtaComponent {
     ngOnChanges(changes) {
         if (changes['items']) {
             this.buildFilterOptions();
-            // rehidrata desde URL ya con maps listos (sin navegar)
             const qp = this.route.snapshot.queryParamMap;
             const filterSlug = qp.get('filter') ?? '';
             const destinationSlug = qp.get('destination') ?? '';
@@ -24039,6 +24012,7 @@ class LisC4TxtDesCtaComponent {
             this.selectedExperience =
                 this.experienceSlugToLabel.get(experienceSlug) ?? '';
             this.forceOptionMatch();
+            this.updateDynamicOptions(); // Vuelve a filtrar las opciones según la nueva hidratación
             this.cdr.markForCheck();
             this.cdr.detectChanges();
             queueMicrotask(() => (this.isSyncingFromUrl = false));
@@ -24050,16 +24024,17 @@ class LisC4TxtDesCtaComponent {
     buildFilterOptions() {
         const items = this.items ?? [];
         const experiences = this.experiences ?? [];
-        this.hotelTypeOptions = Array.from(new Set(items
+        // Llenamos las listas MAESTRAS
+        this.baseHotelTypeOptions = Array.from(new Set(items
             .map((i) => i?.hoteltype)
             .filter(Boolean)
             .map((v) => v.trim()))).sort((a, b) => a.localeCompare(b));
-        this.destinationOptions = Array.from(new Set(items
+        this.baseDestinationOptions = Array.from(new Set(items
             .flatMap((i) => (i?.destinations ?? []).map((d) => d?.name))
             .filter(Boolean)
             .map((v) => v.trim()))).sort((a, b) => a.localeCompare(b));
-        this.brandOptions = Array.from(new Set(items.map((i) => this.getItemBrand(i)).filter(Boolean))).sort((a, b) => a.localeCompare(b));
-        this.experienceOptions = Array.from(new Set(experiences.map((e) => e.nameIdentifier)?.filter(Boolean))).sort((a, b) => a.localeCompare(b));
+        this.baseBrandOptions = Array.from(new Set(items.map((i) => this.getItemBrand(i)).filter(Boolean))).sort((a, b) => a.localeCompare(b));
+        this.baseExperienceOptions = Array.from(new Set(experiences.map((e) => e.nameIdentifier)?.filter(Boolean))).sort((a, b) => a.localeCompare(b));
         // Reset maps
         this.filterSlugToLabel.clear();
         this.destinationSlugToLabel.clear();
@@ -24069,39 +24044,34 @@ class LisC4TxtDesCtaComponent {
         this.destinationLabelToSlug.clear();
         this.brandLabelToSlug.clear();
         this.experienceLabelToSlug.clear();
-        // used sets para sufijos -2 -3...
         const usedFilter = new Set();
         const usedDest = new Set();
         const usedBrand = new Set();
         const usedExperience = new Set();
-        // FILTER (query param "filter") => slug CANÓNICO (singular genérico)
-        for (const label of this.hotelTypeOptions) {
+        for (const label of this.baseHotelTypeOptions) {
             const base = this.canonicalSlug(label);
             const slug = Utils.uniqueSlug(base, usedFilter);
             this.filterSlugToLabel.set(slug, label);
             this.filterLabelToSlug.set(label, slug);
         }
-        // DESTINATIONS
-        for (const label of this.destinationOptions) {
+        for (const label of this.baseDestinationOptions) {
             const base = Utils.toSlug(label) || 'destination';
             const slug = Utils.uniqueSlug(base, usedDest);
             this.destinationSlugToLabel.set(slug, label);
             this.destinationLabelToSlug.set(label, slug);
         }
-        // BRANDS
-        for (const label of this.brandOptions) {
+        for (const label of this.baseBrandOptions) {
             const base = Utils.toSlug(label) || 'brand';
             const slug = Utils.uniqueSlug(base, usedBrand);
             this.brandSlugToLabel.set(slug, label);
             this.brandLabelToSlug.set(label, slug);
         }
-        for (const label of this.experienceOptions) {
+        for (const label of this.baseExperienceOptions) {
             const base = Utils.toSlug(label) || 'experience';
             const slug = Utils.uniqueSlug(base, usedExperience);
             this.experienceSlugToLabel.set(slug, label);
             this.experienceLabelToSlug.set(label, slug);
         }
-        const allServices = new Set();
         const allServicesNames = new Set();
         const filteredServicesNames = new Set();
         let requestedClasses = [];
@@ -24112,14 +24082,12 @@ class LisC4TxtDesCtaComponent {
                 .filter(Boolean);
         }
         items.forEach((it) => {
-            // Soportamos camelCase o snake_case según como llegue de la API
             const services = it?.servicesService || it?.services_service;
             if (Array.isArray(services)) {
                 services.forEach((s) => {
                     if (s?.name) {
                         const name = s.name.trim();
                         allServicesNames.add(name);
-                        // Si hay clases solicitadas, validamos contra el atributo 'class'
                         if (requestedClasses.length > 0 && s.class) {
                             if (requestedClasses.includes(s.class.trim().toLowerCase())) {
                                 filteredServicesNames.add(name);
@@ -24129,13 +24097,18 @@ class LisC4TxtDesCtaComponent {
                 });
             }
         });
-        // 3. Decidimos qué lista mostrar
         let finalServices = Array.from(filteredServicesNames);
-        // Si no se pasaron clases por Input, o si lo que se pasó NO hizo match con nada, mostramos TODOS
         if (requestedClasses.length === 0 || finalServices.length === 0) {
             finalServices = Array.from(allServicesNames);
         }
-        this.availableServices = finalServices.sort((a, b) => a.localeCompare(b));
+        this.baseAvailableServices = finalServices.sort((a, b) => a.localeCompare(b));
+        // Inicializamos las opciones de UI con las maestras y luego filtramos
+        this.hotelTypeOptions = [...this.baseHotelTypeOptions];
+        this.destinationOptions = [...this.baseDestinationOptions];
+        this.brandOptions = [...this.baseBrandOptions];
+        this.experienceOptions = [...this.baseExperienceOptions];
+        this.availableServices = [...this.baseAvailableServices];
+        this.updateDynamicOptions();
     }
     getItemBrand(it) {
         if (this.additional1LikeMarca)
@@ -24143,13 +24116,17 @@ class LisC4TxtDesCtaComponent {
         return (it?.marca ?? it?.brand ?? it?.group ?? '').trim();
     }
     // ----------------------
-    // FILTRADO
+    // LÓGICA DE FILTRADO BASE (FACETED SEARCH)
     // ----------------------
-    get filteredItems() {
+    /**
+     * Obtiene los items coincidentes excluyendo uno de los filtros.
+     * Es clave para calcular qué opciones deben quedar disponibles en un desplegable
+     * sin que su propia selección previa las borre por completo.
+     */
+    getItemsMatching(excludeFilter) {
         const items = this.items ?? [];
-        if (!this.showFilters) {
+        if (!this.showFilters)
             return items;
-        }
         let validHotelIdsForExperience = [];
         if (this.selectedExperience && this.experiences) {
             const targetExp = this.experiences.find((e) => e.nameIdentifier === this.selectedExperience);
@@ -24161,25 +24138,29 @@ class LisC4TxtDesCtaComponent {
             const itemHotelType = it?.hoteltype ?? '';
             const itemBrand = this.getItemBrand(it);
             const itemId = it?.id;
-            const hotelTypeOk = !this.selectedHotelType ||
+            const hotelTypeOk = excludeFilter === 'hotelType' ||
+                !this.selectedHotelType ||
                 this.canonicalSlug(itemHotelType) ===
                     this.canonicalSlug(this.selectedHotelType);
-            const destinationOk = !this.selectedDestination ||
+            const destinationOk = excludeFilter === 'destination' ||
+                !this.selectedDestination ||
                 (it?.destinations ?? []).some((d) => Utils.toSlug(d?.name ?? '') ===
                     Utils.toSlug(this.selectedDestination));
-            const brandOk = !this.selectedBrand ||
+            const brandOk = excludeFilter === 'brand' ||
+                !this.selectedBrand ||
                 Utils.toSlug(itemBrand) === Utils.toSlug(this.selectedBrand);
-            const experienceOk = !this.selectedExperience ||
+            const experienceOk = excludeFilter === 'experience' ||
+                !this.selectedExperience ||
                 validHotelIdsForExperience.includes(itemId);
-            // NUEVA VALIDACIÓN: Verifica que el item tenga TODOS los servicios seleccionados (AND)
-            const servicesOk = this.selectedServices.size === 0 ||
+            const servicesOk = excludeFilter === 'services' ||
+                this.selectedServices.size === 0 ||
                 Array.from(this.selectedServices).every((selectedSrv) => {
-                    const itemServices = it?.servicesService;
+                    const itemServices = it?.servicesService ||
+                        it?.services_service;
                     if (!Array.isArray(itemServices))
                         return false;
                     return itemServices.some((s) => s?.name?.trim() === selectedSrv);
                 });
-            // Retorna validando también servicesOk
             return (hotelTypeOk &&
                 destinationOk &&
                 brandOk &&
@@ -24187,35 +24168,93 @@ class LisC4TxtDesCtaComponent {
                 servicesOk);
         });
     }
+    get filteredItems() {
+        return this.getItemsMatching('none');
+    }
+    /**
+     * Actualiza los arrays de opciones para ocultar aquellas que devolverían 0 resultados.
+     */
+    updateDynamicOptions() {
+        if (!this.items || this.items.length === 0)
+            return;
+        // -- Destinos --
+        const itemsForDest = this.getItemsMatching('destination');
+        const validDests = new Set(itemsForDest
+            .flatMap((i) => (i?.destinations ?? []).map((d) => d?.name))
+            .filter(Boolean)
+            .map((v) => v.trim()));
+        this.destinationOptions = this.baseDestinationOptions.filter((opt) => validDests.has(opt) || this.selectedDestination === opt);
+        // -- Marcas --
+        const itemsForBrand = this.getItemsMatching('brand');
+        const validBrands = new Set(itemsForBrand.map((i) => this.getItemBrand(i)).filter(Boolean));
+        this.brandOptions = this.baseBrandOptions.filter((opt) => validBrands.has(opt) || this.selectedBrand === opt);
+        // -- Tipos de Hotel --
+        const itemsForHotelType = this.getItemsMatching('hotelType');
+        const validHotelTypes = new Set(itemsForHotelType
+            .map((i) => i?.hoteltype)
+            .filter(Boolean)
+            .map((v) => v.trim()));
+        this.hotelTypeOptions = this.baseHotelTypeOptions.filter((opt) => validHotelTypes.has(opt) || this.selectedHotelType === opt);
+        // -- Experiencias --
+        const itemsForExp = this.getItemsMatching('experience');
+        const validExpIds = new Set(itemsForExp.map((i) => i?.id));
+        this.experienceOptions = this.baseExperienceOptions.filter((opt) => {
+            if (this.selectedExperience === opt)
+                return true;
+            const targetExp = this.experiences?.find((e) => e.nameIdentifier === opt);
+            if (!targetExp?.hotels)
+                return false;
+            return targetExp.hotels.some((h) => validExpIds.has(h.id));
+        });
+        // -- Servicios --
+        const itemsForServices = this.getItemsMatching('services');
+        const validServices = new Set();
+        itemsForServices.forEach((it) => {
+            const services = it?.servicesService || it?.services_service;
+            if (Array.isArray(services)) {
+                services.forEach((s) => {
+                    if (s?.name) {
+                        validServices.add(s.name.trim());
+                    }
+                });
+            }
+        });
+        this.availableServices = this.baseAvailableServices.filter((opt) => validServices.has(opt) || this.selectedServices.has(opt));
+    }
     get hasActiveFilters() {
         return !!(this.selectedHotelType ||
             this.selectedDestination ||
             this.selectedBrand ||
-            this.selectedExperience);
+            this.selectedExperience ||
+            this.selectedServices.size > 0);
     }
     // ----------------------
     // HANDLERS UI
     // ----------------------
     onHotelTypeChange(value) {
         this.selectedHotelType = value ?? '';
+        this.updateDynamicOptions();
         if (this.isSyncingFromUrl)
             return;
         this.syncQueryParams();
     }
     onDestinationChange(value) {
         this.selectedDestination = value ?? '';
+        this.updateDynamicOptions();
         if (this.isSyncingFromUrl)
             return;
         this.syncQueryParams();
     }
     onBrandChange(value) {
         this.selectedBrand = value ?? '';
+        this.updateDynamicOptions();
         if (this.isSyncingFromUrl)
             return;
         this.syncQueryParams();
     }
     onExperienceChange(value) {
         this.selectedExperience = value ?? '';
+        this.updateDynamicOptions();
         if (this.isSyncingFromUrl)
             return;
         this.syncQueryParams();
@@ -24226,6 +24265,7 @@ class LisC4TxtDesCtaComponent {
         this.selectedBrand = '';
         this.selectedExperience = '';
         this.selectedServices.clear();
+        this.updateDynamicOptions();
         this.syncQueryParams(true);
     }
     toggleService(service) {
@@ -24237,6 +24277,8 @@ class LisC4TxtDesCtaComponent {
             newSelected.add(service);
         }
         this.selectedServices = newSelected;
+        this.updateDynamicOptions();
+        // Nota: Servicios no se sincan con URL históricamente, pero re-evaluamos dinámicamente.
     }
     toggleServicesMenu() {
         this.isServicesMenuOpen = !this.isServicesMenuOpen;
@@ -24246,7 +24288,7 @@ class LisC4TxtDesCtaComponent {
     // ----------------------
     syncQueryParams(clearAll = false) {
         const qp = clearAll
-            ? { filter: null, destination: null, brand: null }
+            ? { filter: null, destination: null, brand: null, experience: null }
             : {
                 filter: this.selectedHotelType
                     ? (this.filterLabelToSlug.get(this.selectedHotelType) ??
@@ -24270,29 +24312,20 @@ class LisC4TxtDesCtaComponent {
         });
         this.cdr.markForCheck();
     }
-    // ----------------------
-    // CANONICAL SLUG (sin traductor)
-    // - Garantiza singular/plural genérico
-    // ----------------------
     canonicalSlug(value) {
         let s = Utils.toSlug(value);
         if (!s)
             return '';
-        // Regla -es (hoteles -> hotel, luces -> luz, peces -> pez)
         if (s.length > 3 && s.endsWith('es')) {
             const base = s.slice(0, -2);
             if (base.endsWith('c'))
                 return base.slice(0, -1) + 'z';
             return base;
         }
-        // Regla -s (apartamentos -> apartamento)
         if (s.length > 3 && s.endsWith('s'))
             return s.slice(0, -1);
         return s;
     }
-    // ----------------------
-    // UI utils
-    // ----------------------
     getKeysArray(count) {
         return count ? Array.from({ length: count }) : [];
     }
@@ -24318,7 +24351,6 @@ class LisC4TxtDesCtaComponent {
                 this.pendingFilterSlug = null;
             }
         }
-        // DESTINATION
         if (this.pendingDestinationSlug != null) {
             const slug = Utils.toSlug(this.pendingDestinationSlug);
             const label = this.destinationSlugToLabel.get(slug);
@@ -24327,7 +24359,6 @@ class LisC4TxtDesCtaComponent {
                 this.pendingDestinationSlug = null;
             }
         }
-        // BRAND
         if (this.pendingBrandSlug != null) {
             const slug = Utils.toSlug(this.pendingBrandSlug);
             const label = this.brandSlugToLabel.get(slug);
@@ -24336,7 +24367,6 @@ class LisC4TxtDesCtaComponent {
                 this.pendingBrandSlug = null;
             }
         }
-        //EXPERIENCES
         if (this.pendingExperienceSlug != null) {
             const slug = Utils.toSlug(this.pendingExperienceSlug);
             const label = this.experienceSlugToLabel.get(slug);
@@ -24349,46 +24379,40 @@ class LisC4TxtDesCtaComponent {
     forceOptionMatch() {
         if (this.selectedHotelType) {
             const wanted = this.canonicalSlug(this.selectedHotelType);
-            const match = this.hotelTypeOptions.find((o) => this.canonicalSlug(o) === wanted);
+            const match = this.baseHotelTypeOptions.find((o) => this.canonicalSlug(o) === wanted);
             this.selectedHotelType = match ?? '';
         }
         if (this.selectedBrand) {
             const wanted = Utils.toSlug(this.selectedBrand);
-            const match = this.brandOptions.find((o) => Utils.toSlug(o) === wanted);
+            const match = this.baseBrandOptions.find((o) => Utils.toSlug(o) === wanted);
             this.selectedBrand = match ?? '';
         }
         if (this.selectedDestination) {
             const wanted = Utils.toSlug(this.selectedDestination);
-            const match = this.destinationOptions.find((o) => Utils.toSlug(o) === wanted);
+            const match = this.baseDestinationOptions.find((o) => Utils.toSlug(o) === wanted);
             this.selectedDestination = match ?? '';
         }
         if (this.selectedExperience) {
             const wanted = Utils.toSlug(this.selectedExperience);
-            const match = this.experienceOptions.find((o) => Utils.toSlug(o) === wanted);
+            const match = this.baseExperienceOptions.find((o) => Utils.toSlug(o) === wanted);
             this.selectedExperience = match ?? '';
         }
     }
     getButtonUrl(btn, item, index) {
         const urlBase = btn.url || '';
-        // Si no es el primer botón, devolvemos la URL base sin alterar
         if (index !== 0) {
             return urlBase;
         }
-        // Buscamos el identificador (priorizamos nameIdentifier, luego name para destinos)
         const identifier = item?.nameIdentifier ?? item?.name_identifier ?? item?.name;
         if (!identifier) {
             return urlBase;
         }
         const separator = urlBase.includes('?') ? '&' : '?';
-        // 1. Lógica para EXPERIENCIAS
-        // Entra si el type es 'experience' o si tiene un nameIdentifier pero no tiene type (fallback)
         if (item?.type === 'experience' ||
             (!item?.type && (item?.nameIdentifier || item?.name_identifier))) {
             return `${urlBase}${separator}experience=${identifier}`;
         }
-        // 2. Lógica para DESTINOS
         if (item?.type === 'destination') {
-            // Usamos tu Utils para normalizar espacios y mayúsculas (ej: "Andorra la Vella" -> "andorra-la-vella")
             const destinationSlug = Utils.toSlug(identifier);
             return `${urlBase}${separator}destination=${destinationSlug}`;
         }