diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html
index 40247215ce1..2d07b90e7f3 100644
--- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html
+++ b/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) {
-
- {{filterValue.label}}
-
- {{filterValue.count | dsShortNumber}}
+
+
+ {{ filterValue.label }}
+ @if (isChecked$ | async) {
+ ✕
+ }
+
+
+
+ {{ filterValue.count | dsShortNumber }}
-
-}
+
+
diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.spec.ts b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.spec.ts
index 68600517d79..7e51df57d19 100644
--- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.spec.ts
+++ b/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');
});
});
});
diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts
index 5a9a9fa4ae4..bc97a6cab0c 100644
--- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts
+++ b/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;
+
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,
+ };
}
/**