geonetwork-ui 2.4.0-dev.fdf8f64b → 2.4.1-dev.4e8752d34

package/src/libs/feature/record/src/lib/map-view/map-view.component.ts

@@ -3,6 +3,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  Input,
   ViewChild,
 } from '@angular/core'
 import { MapUtilsService } from '../../../../../../libs/feature/map/src'
@@ -22,6 +23,7 @@ import {
   distinctUntilChanged,
   finalize,
   map,
+  shareReplay,
   switchMap,
   tap,
 } from 'rxjs/operators'
@@ -34,21 +36,72 @@ import {
   MapContextLayer,
 } from '@geospatial-sdk/core'
 import {
+  FeatureDetailComponent,
   MapContainerComponent,
   prioritizePageScroll,
+  MapLegendComponent,
 } from '../../../../../../libs/ui/map/src'
 import { Feature } from 'geojson'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { matClose } from '@ng-icons/material-icons/baseline'
+import { CommonModule } from '@angular/common'
+import {
+  ButtonComponent,
+  DropdownSelectorComponent,
+} from '../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { ExternalViewerButtonComponent } from '../external-viewer-button/external-viewer-button.component'
+import {
+  LoadingMaskComponent,
+  PopupAlertComponent,
+} from '../../../../../../libs/ui/widgets/src'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+marker('map.dropdown.placeholder')
+marker('wfs.feature.limit')
 
 @Component({
   selector: 'gn-ui-map-view',
   templateUrl: './map-view.component.html',
   styleUrls: ['./map-view.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    DropdownSelectorComponent,
+    MapContainerComponent,
+    FeatureDetailComponent,
+    PopupAlertComponent,
+    TranslateModule,
+    LoadingMaskComponent,
+    NgIconComponent,
+    ExternalViewerButtonComponent,
+    ButtonComponent,
+    MapLegendComponent,
+  ],
+  viewProviders: [provideIcons({ matClose })],
 })
 export class MapViewComponent implements AfterViewInit {
+  @Input() set excludeWfs(value: boolean) {
+    this.excludeWfs$.next(value)
+  }
   @ViewChild('mapContainer') mapContainer: MapContainerComponent
 
+  excludeWfs$ = new BehaviorSubject(false)
   selection: Feature
+  showLegend = true
+  legendExists = false
+
+  toggleLegend() {
+    this.showLegend = !this.showLegend
+  }
+
+  onLegendStatusChange(status: boolean) {
+    this.legendExists = status
+    if (!status) {
+      this.showLegend = false
+    }
+  }
 
   compatibleMapLinks$ = combineLatest([
     this.mdViewFacade.mapApiLinks$,
@@ -66,7 +119,7 @@ export class MapViewComponent implements AfterViewInit {
             label: getLinkLabel(link),
             value: index,
           }))
-        : [{ label: 'No preview layer', value: 0 }]
+        : [{ label: 'map.dropdown.placeholder', value: 0 }]
     )
   )
   selectedLinkIndex$ = new BehaviorSubject(0)
@@ -79,11 +132,15 @@ export class MapViewComponent implements AfterViewInit {
     this.selectedLinkIndex$.pipe(distinctUntilChanged()),
   ]).pipe(map(([links, index]) => links[index]))
 
-  currentLayers$ = this.selectedLink$.pipe(
-    switchMap((link) => {
+  currentLayers$ = combineLatest([this.selectedLink$, this.excludeWfs$]).pipe(
+    switchMap(([link, excludeWfs]) => {
       if (!link) {
         return of([])
       }
+      if (excludeWfs && link.accessServiceProtocol === 'wfs') {
+        this.error = 'wfs.feature.limit'
+        return of([])
+      }
       this.loading = true
       this.error = null
       return this.getLayerFromLink(link).pipe(
@@ -124,7 +181,8 @@ export class MapViewComponent implements AfterViewInit {
         ...context,
         view,
       }
-    })
+    }),
+    shareReplay(1)
   )
 
   constructor(

package/src/libs/feature/record/src/lib/record-meta/record-meta.component.ts

@@ -0,0 +1,45 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+} from '@angular/core'
+import { Meta } from '@angular/platform-browser'
+import { DatasetRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+
+@Component({
+  selector: 'gn-ui-record-meta',
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+})
+export class RecordMetaComponent implements OnDestroy, OnChanges {
+  @Input() metadata: DatasetRecord
+
+  constructor(private meta: Meta) {}
+
+  ngOnChanges() {
+    if (this.metadata?.title) {
+      this.meta.addTag({ property: 'og:title', content: this.metadata.title })
+      this.meta.addTag({
+        property: 'og:url',
+        content: window.location.href.toString(),
+      })
+      if (this.metadata?.overviews?.length > 0) {
+        for (const overview of this.metadata.overviews) {
+          this.meta.addTag({
+            property: 'og:image',
+            content: overview.url.toString(),
+          })
+        }
+      }
+    }
+  }
+
+  ngOnDestroy() {
+    this.meta.removeTag('property="og:image"')
+    this.meta.removeTag('property="og:url"')
+    this.meta.removeTag('property="og:title"')
+  }
+}

package/src/libs/feature/record/src/lib/state/mdview.facade.ts

@@ -15,6 +15,7 @@ import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/sh
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
 import {
   CatalogRecord,
+  DatasetServiceDistribution,
   UserFeedback,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { AvatarServiceInterface } from '../../../../../../libs/api/repository/src'
@@ -72,7 +73,15 @@ export class MdViewFacade {
 
   apiLinks$ = this.allLinks$.pipe(
     map((links) =>
-      links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
+      links
+        .filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
+        // Put links to IGN Géoplateforme first
+        .sort((dd1, dd2) => {
+          return (dd2 as DatasetServiceDistribution).accessServiceProtocol ===
+            'GPFDL'
+            ? 1
+            : undefined // do not change the sorting otherwise
+        })
     )
   )
 

package/src/libs/feature/router/src/lib/default/constants.ts

@@ -1,3 +1,5 @@
+import { DateRange } from '../../../../../../libs/api/repository/src'
+
 export const ROUTER_STATE_KEY = 'router'
 
 export const ROUTER_ROUTE_SEARCH = 'search'
@@ -9,4 +11,7 @@ export enum ROUTE_PARAMS {
   PUBLISHER = 'publisher', // FIXME: this shouldn't be here as it is a search field
   PAGE = '_page',
 }
-export type SearchRouteParams = Record<string, string | string[] | number>
+export type SearchRouteParams = Record<
+  string,
+  string | string[] | number | DateRange
+>

package/src/libs/feature/router/src/lib/default/state/query-params.utils.ts

@@ -0,0 +1,61 @@
+import {
+  DateRange,
+  formatDate,
+  isDateRange,
+} from '../../../../../../../libs/api/repository/src'
+import { ROUTE_PARAMS, SearchRouteParams } from '../constants'
+
+export function flattenQueryParams(
+  params: SearchRouteParams
+): Record<string, unknown> {
+  const flattened = { ...params }
+  for (const key in params) {
+    if (
+      Array.isArray(flattened[key]) &&
+      (flattened[key] as string[]).length > 0
+    ) {
+      flattened[key] = [(flattened[key] as string[]).join(',')]
+    } else if (isDateRange(flattened[key] as DateRange)) {
+      const start = (flattened[key] as DateRange).start
+      const end = (flattened[key] as DateRange).end
+      flattened[key] = [
+        `${start ? formatDate(start) : ''}..${formatDate(end) || ''}`,
+      ]
+    }
+  }
+
+  return flattened
+}
+
+export function expandQueryParams(
+  params: Record<string, unknown>
+): SearchRouteParams {
+  const expanded = { ...params }
+  for (const key in params) {
+    const value: string = Array.isArray(expanded[key])
+      ? expanded[key][0]
+      : (expanded[key] as string)
+    if (typeof value === 'string') {
+      if (
+        Object.values(ROUTE_PARAMS).includes(key as ROUTE_PARAMS) &&
+        key !== 'publisher' //FIXME: temporary workaround as publisher shouldn't be in ROUTE_PARAMS as it is a search field
+      ) {
+        //do nothing
+      } else if (isDateUrl(value)) {
+        const [start, end] = value.split('..')
+        expanded[key] = {
+          ...(start && { start: new Date(`${start}T00:00:00`) }),
+          ...(end && { end: new Date(`${end}T00:00:00`) }),
+        }
+      } else {
+        expanded[key] = value.split(',')
+      }
+    }
+  }
+  return expanded
+}
+
+// this only matches if the separator ".." is present only once and no dots are present elsewhere
+function isDateUrl(value: string) {
+  return value.match(/^[^.]*(\.\.)[^.]*$/)
+}

package/src/libs/feature/router/src/lib/default/state/router.effects.ts

@@ -61,7 +61,7 @@ export class RouterEffects {
         let sortBy =
           ROUTE_PARAMS.SORT in newParams
             ? sortByFromString(newParams[ROUTE_PARAMS.SORT])
-            : SortByEnum.RELEVANCY
+            : SortByEnum.CHANGE_DATE
         let pageNumber =
           ROUTE_PARAMS.PAGE in newParams
             ? parseInt(newParams[ROUTE_PARAMS.PAGE])
@@ -70,7 +70,7 @@ export class RouterEffects {
           const oldSort =
             ROUTE_PARAMS.SORT in oldParams
               ? sortByFromString(oldParams[ROUTE_PARAMS.SORT])
-              : SortByEnum.RELEVANCY
+              : SortByEnum.CHANGE_DATE
           if (JSON.stringify(sortBy) === JSON.stringify(oldSort)) {
             sortBy = null
           }

package/src/libs/feature/router/src/lib/default/state/router.facade.ts

@@ -17,6 +17,7 @@ import {
 } from './router.actions'
 import { selectCurrentRoute, selectRouteParams } from './router.selectors'
 import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { expandQueryParams, flattenQueryParams } from './query-params.utils'
 
 @Injectable()
 export class RouterFacade {
@@ -27,7 +28,8 @@ export class RouterFacade {
     filter((route) => !!route),
     filter((route) => route.url[0]?.path.startsWith(ROUTER_ROUTE_SEARCH)),
     map((route) => route.queryParams),
-    distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
+    distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
+    map(expandQueryParams)
   )
 
   constructor(
@@ -62,7 +64,7 @@ export class RouterFacade {
   updateSearch(query?: SearchRouteParams) {
     this.go({
       path: this.routerService.getSearchRoute(),
-      ...(query && { query }),
+      ...(query && { query: flattenQueryParams(query) }),
       queryParamsHandling: 'merge',
     })
   }
@@ -70,7 +72,7 @@ export class RouterFacade {
   setSearch(query?: SearchRouteParams) {
     this.go({
       path: this.routerService.getSearchRoute(),
-      ...(query && { query }),
+      ...(query && { query: flattenQueryParams(query) }),
     })
   }
 

package/src/libs/feature/search/src/index.ts

@@ -22,3 +22,5 @@ export * from './lib/results-layout/results-layout.component'
 export * from './lib/sort-by/sort-by.component'
 export * from './lib/state/container/search-state.container.directive'
 export * from './lib/results-table/results-table-container.component'
+export * from './lib/search-filters-summary/search-filters-summary.component'
+export * from './lib/search-filters-summary-item/search-filters-summary-item.component'

package/src/libs/feature/search/src/lib/constants.ts

@@ -19,9 +19,9 @@ export const FIELDS_SUMMARY: FieldName[] = [
   'userSavedCount',
   'cl_topic',
   'cl_maintenanceAndUpdateFrequency',
-  'tag',
   'MD_LegalConstraintsUseLimitationObject',
   'qualityScore',
+  'allKeywords',
 ]
 
 export const FIELDS_BRIEF: FieldName[] = [

package/src/libs/feature/search/src/lib/facets/facets.service.ts

@@ -72,19 +72,19 @@ export class FacetsService {
               for (let p = 0; p < entries.length; p++) {
                 const entry: [string, AggEntry] = entries[p] as [
                   string,
-                  AggEntry
+                  AggEntry,
                 ]
                 const nextEntry: [string, AggEntry] = entries[p + 1] as [
                   string,
-                  AggEntry
+                  AggEntry,
                 ]
                 const lowerBound = entry[1].key
                 const onlyOneBucket = entries.length === 1
                 const upperBound = onlyOneBucket
                   ? lowerBound + Number(requestAgg['histogram'].interval)
                   : nextEntry
-                  ? nextEntry[1].key
-                  : '*'
+                    ? nextEntry[1].key
+                    : '*'
                 const value = lowerBound + '-' + upperBound
                 const itemPath = [...blockModel.path, lowerBound + '']
                 const itemModel = {

package/src/libs/feature/search/src/lib/favorites/favorite-star/favorite-star.component.ts

@@ -16,12 +16,15 @@ import { Observable, Subscription } from 'rxjs'
 import { CatalogRecord } from '../../../../../../../libs/common/domain/src/lib/model/record'
 import { AuthService, FavoritesService } from '../../../../../../../libs/api/repository/src'
 import { PlatformServiceInterface } from '../../../../../../../libs/common/domain/src/lib/platform.service.interface'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-favorite-star',
   templateUrl: './favorite-star.component.html',
   styleUrls: ['./favorite-star.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, StarToggleComponent],
 })
 export class FavoriteStarComponent implements AfterViewInit, OnDestroy {
   @Input() displayCount? = true

package/src/libs/feature/search/src/lib/feature-search.module.ts

@@ -14,15 +14,21 @@ import { SearchEffects } from './state/effects'
 import { initialState, reducer, SEARCH_FEATURE_KEY } from './state/reducer'
 import { ResultsHitsContainerComponent } from './results-hits-number/results-hits.container.component'
 import { SearchStateContainerDirective } from './state/container/search-state.container.directive'
-import { AutocompleteComponent, UiInputsModule } from '../../../../../libs/ui/inputs/src'
+import {
+  AutocompleteComponent,
+  DateRangeDropdownComponent,
+  UiInputsModule,
+} from '../../../../../libs/ui/inputs/src'
 import { NgModule } from '@angular/core'
-import { UiElementsModule } from '../../../../../libs/ui/elements/src'
-import { FavoriteStarComponent } from './favorites/favorite-star/favorite-star.component'
-import { MatIconModule } from '@angular/material/icon'
+import { ErrorComponent, UiElementsModule } from '../../../../../libs/ui/elements/src'
 import { FilterDropdownComponent } from './filter-dropdown/filter-dropdown.component'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import {
+  SpinningLoaderComponent,
+  UiWidgetsModule,
+} from '../../../../../libs/ui/widgets/src'
 import { RecordsRepositoryInterface } from '../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { Gn4Repository } from '../../../../../libs/api/repository/src'
+import { FavoriteStarComponent } from './favorites/favorite-star/favorite-star.component'
 
 @NgModule({
   declarations: [
@@ -33,7 +39,6 @@ import { Gn4Repository } from '../../../../../libs/api/repository/src'
     ResultsListContainerComponent,
     ResultsHitsContainerComponent,
     SearchStateContainerDirective,
-    FavoriteStarComponent,
     FilterDropdownComponent,
   ],
   imports: [
@@ -49,9 +54,12 @@ import { Gn4Repository } from '../../../../../libs/api/repository/src'
     UiInputsModule,
     UiElementsModule,
     FacetsModule,
-    MatIconModule,
     UiWidgetsModule,
     AutocompleteComponent,
+    SpinningLoaderComponent,
+    ErrorComponent,
+    FavoriteStarComponent,
+    DateRangeDropdownComponent,
   ],
   exports: [
     SortByComponent,
@@ -62,7 +70,6 @@ import { Gn4Repository } from '../../../../../libs/api/repository/src'
     ResultsHitsContainerComponent,
     FacetsModule,
     SearchStateContainerDirective,
-    FavoriteStarComponent,
     FilterDropdownComponent,
   ],
   providers: [

package/src/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.html

@@ -1,11 +1,21 @@
-<gn-ui-dropdown-multiselect
-  class="w-full"
+<gn-ui-date-range-dropdown
+  *ngIf="fieldType === 'dateRange'; else multiselect"
   [title]="title"
-  [maxRows]="6"
-  [choices]="choices$ | async"
-  [selected]="selected$ | async"
-  [allowSearch]="true"
-  (selectValues)="onSelectedValues($event)"
-  [attr.data-cy-field]="fieldName"
->
-</gn-ui-dropdown-multiselect>
+  [startDate]="(selectedDateRange$ | async)?.start"
+  [endDate]="(selectedDateRange$ | async)?.end"
+  (startDateChange)="onStartDateChange($event)"
+  (endDateChange)="onEndDateChange($event)"
+></gn-ui-date-range-dropdown>
+<ng-template #multiselect>
+  <gn-ui-dropdown-multiselect
+    class="w-full"
+    [title]="title"
+    [maxRows]="6"
+    [choices]="(choices$ | async) || []"
+    [selected]="selected$ | async"
+    [allowSearch]="true"
+    (selectValues)="onSelectedValues($event)"
+    [attr.data-cy-field]="fieldName"
+  >
+  </gn-ui-dropdown-multiselect>
+</ng-template>

package/src/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.ts

@@ -10,7 +10,12 @@ import { catchError, filter, map, startWith } from 'rxjs/operators'
 import { SearchFacade } from '../state/search.facade'
 import { SearchService } from '../utils/service/search.service'
 import { FieldsService } from '../utils/service/fields.service'
-import { FieldAvailableValue, FieldValue } from '../utils/service/fields'
+import {
+  FieldAvailableValue,
+  FieldType,
+  FieldValue,
+} from '../utils/service/fields'
+import { DateRange } from '../../../../../../libs/api/repository/src'
 
 @Component({
   selector: 'gn-ui-filter-dropdown',
@@ -22,6 +27,8 @@ export class FilterDropdownComponent implements OnInit {
   @Input() fieldName: string
   @Input() title: string
 
+  fieldType: FieldType
+  dateRange: DateRange
   choices$: Observable<Choice[]>
   selected$ = this.searchFacade.searchFilters$.pipe(
     switchMap((filters) =>
@@ -33,6 +40,10 @@ export class FilterDropdownComponent implements OnInit {
     catchError(() => of([]))
   ) as Observable<FieldValue[]>
 
+  selectedDateRange$ = this.selected$.pipe(
+    map((selectedDateRange) => selectedDateRange as DateRange)
+  ) as Observable<DateRange>
+
   onSelectedValues(values: unknown[]) {
     this.fieldsService
       .buildFiltersFromFieldValues({ [this.fieldName]: values as FieldValue[] })
@@ -46,6 +57,7 @@ export class FilterDropdownComponent implements OnInit {
   ) {}
 
   ngOnInit() {
+    this.fieldType = this.fieldsService.getFieldType(this.fieldName)
     this.choices$ = this.fieldsService.getAvailableValues(this.fieldName).pipe(
       startWith([] as FieldAvailableValue[]),
       map((values) =>
@@ -57,4 +69,23 @@ export class FilterDropdownComponent implements OnInit {
       catchError(() => of([]))
     )
   }
+
+  onStartDateChange(start: Date) {
+    if (!start) return
+    this.dateRange = { ...this.dateRange, start }
+  }
+
+  onEndDateChange(end: Date) {
+    if (!end) return
+    this.dateRange = { ...this.dateRange, end }
+    if (this.dateRange.start && this.dateRange.end) {
+      this.fieldsService
+        .buildFiltersFromFieldValues({
+          [this.fieldName]: this.dateRange,
+        })
+        .subscribe((filters) => {
+          return this.searchService.updateFilters(filters)
+        })
+    }
+  }
 }

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.html

@@ -9,12 +9,7 @@
     [recordUrlGetter]="recordUrlGetter"
     (mdSelect)="onMetadataSelection($event)"
   ></gn-ui-results-list>
-  <ng-container
-    *ngIf="
-      (facade.isLoading$ | async) === false &&
-      (facade.isEndOfResults$ | async) === false
-    "
-  >
+  <ng-container *ngIf="allowShowMore$ | async">
     <div class="show-more h-[100px] pt-[30px]" *ngIf="showMore === 'button'">
       <gn-ui-button
         data-cy="addMoreBtn"

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.ts

@@ -7,7 +7,7 @@ import {
   Optional,
   Output,
 } from '@angular/core'
-import { Observable, tap } from 'rxjs'
+import { combineLatest, Observable, tap } from 'rxjs'
 import { filter, map } from 'rxjs/operators'
 import { SearchFacade } from '../state/search.facade'
 import { SearchError } from '../state/reducer'
@@ -39,6 +39,7 @@ export class ResultsListContainerComponent implements OnInit {
   errorCode$: Observable<number>
   errorMessage$: Observable<string>
   pipelineForQualityScoreActivated: Observable<boolean>
+  allowShowMore$: Observable<boolean>
 
   errorTypes = ErrorType
   recordUrlGetter = this.getRecordUrl.bind(this)
@@ -81,6 +82,16 @@ export class ResultsListContainerComponent implements OnInit {
       filter((error) => error !== null),
       map((error) => error.message)
     )
+    this.allowShowMore$ = combineLatest([
+      this.facade.isLoading$,
+      this.facade.currentPage$,
+      this.facade.totalPages$,
+    ]).pipe(
+      map(
+        ([loading, currentPage, totalPages]) =>
+          !loading && currentPage < totalPages
+      )
+    )
   }
 
   onMetadataSelection(metadata: CatalogRecord): void {

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.ts

@@ -79,18 +79,22 @@ export class ResultsTableContainerComponent implements OnDestroy {
           )
         },
         error: (error) => {
-          this.notificationsService.showNotification({
-            type: 'error',
-            title: this.translateService.instant(
-              'editor.record.deleteError.title'
-            ),
-            text: `${this.translateService.instant(
-              'editor.record.deleteError.body'
-            )} ${error}`,
-            closeMessage: this.translateService.instant(
-              'editor.record.deleteError.closeMessage'
-            ),
-          })
+          this.notificationsService.showNotification(
+            {
+              type: 'error',
+              title: this.translateService.instant(
+                'editor.record.deleteError.title'
+              ),
+              text: `${this.translateService.instant(
+                'editor.record.deleteError.body'
+              )} ${error}`,
+              closeMessage: this.translateService.instant(
+                'editor.record.deleteError.closeMessage'
+              ),
+            },
+            undefined,
+            error
+          )
         },
       })
     )

package/src/libs/feature/search/src/lib/search-filters-summary/search-filters-summary.component.html

@@ -0,0 +1,17 @@
+<div
+  class="flex flex-row py-3 px-4 gap-4 overflow-hidden grow border-[1px] border-gray-200"
+  *ngIf="searchFilterActive$ | async"
+>
+  <div class="flex flex-row flex-wrap items-center gap-2">
+    <gn-ui-search-filters-summary-item
+      *ngFor="let field of searchFields; let i = index"
+      [fieldName]="field"
+    ></gn-ui-search-filters-summary-item>
+  </div>
+  <button
+    class="bg-white text-black font-bold ml-auto"
+    (click)="clearFilters()"
+  >
+    {{ 'search.filters.clear' | translate }}
+  </button>
+</div>