Fix #5386: Fix range filter freeze by using isChecked$ observable and…

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html

@@ -1,12 +1,18 @@
-@if (isVisible | async) {
-  <a class="d-flex flex-row"
-    (click)="filterService.minimizeAll()"
-    [routerLink]="[searchLink]"
-    [queryParams]="changeQueryParams" queryParamsHandling="merge"
-    role="button" tabindex="0">
-    <span class="filter-value px-1">{{filterValue.label}}</span>
-    <span class="float-end filter-value-count ms-auto">
-      <span class="badge bg-secondary rounded-pill">{{filterValue.count | dsShortNumber}}</span>
+<a class="d-flex flex-row"
+  [routerLink]="[searchLink]"
+  [queryParams]="(isChecked$ | async) ? removeQueryParams : changeQueryParams"
+  queryParamsHandling="merge"
+  [class.selected]="isChecked$ | async"
+  role="button" tabindex="0">
+  <span class="filter-value px-1">
+    {{ filterValue.label }}
+    @if (isChecked$ | async) {
+      <span aria-label="Activo"> ✕</span>
+    }
+  </span>
+  <span class="float-end filter-value-count ms-auto">
+    <span class="badge bg-secondary rounded-pill">
+      {{ filterValue.count | dsShortNumber }}
     </span>
-  </a>
-}
+  </span>
+</a>

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.spec.ts

@@ -153,11 +153,12 @@ describe('SearchFacetRangeOptionComponent', () => {
   });
 
   describe('when isVisible emits false', () => {
-    it('the facet option should not be visible', () => {
+    it('the facet option should still be visible (active filter can be deselected)', () => {
       comp.isVisible = of(false);
       fixture.detectChanges();
       const linkEl = fixture.debugElement.query(By.css('a'));
-      expect(linkEl).toBeNull();
+      expect(linkEl).not.toBeNull();
+      expect(linkEl.nativeElement.classList).toContain('selected');
     });
   });
 });

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts

@@ -83,6 +83,16 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy {
    */
   searchLink: string;
 
+  /**
+   * UI parameters when this filter is removed (deselect)
+   */
+  removeQueryParams: Params;
+
+  /**
+   * Observable que indica si esta opción de filtro está actualmente activa
+   */
+  isChecked$: Observable<boolean>;
+
   constructor(protected searchService: SearchService,
               protected filterService: SearchFilterService,
               protected searchConfigService: SearchConfigurationService,
@@ -95,6 +105,7 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy {
    * Initializes all observable instance variables and starts listening to them
    */
   ngOnInit(): void {
+    this.isChecked$ = this.isChecked();
     this.searchLink = this.getSearchLink();
     this.isVisible = this.isChecked().pipe(map((checked: boolean) => !checked));
     this.sub = this.searchConfigService.searchOptions.subscribe(() => {
@@ -132,6 +143,11 @@ export class SearchFacetRangeOptionComponent implements OnInit, OnDestroy {
       [this.filterConfig.paramName + RANGE_FILTER_MAX_SUFFIX]: max === new Date().getUTCFullYear() ? null : [max],
       [page]: 1,
     };
+    this.removeQueryParams = {
+      [this.filterConfig.paramName + RANGE_FILTER_MIN_SUFFIX]: null,
+      [this.filterConfig.paramName + RANGE_FILTER_MAX_SUFFIX]: null,
+      [page]: 1,
+    };
   }
 
   /**