geonetwork-ui 2.8.0-dev.8cb6904b7 → 2.8.0-dev.926fc0ab1

package/src/libs/ui/map/src/lib/components/map-container/map-container.component.ts

@@ -2,9 +2,10 @@ import {
   AfterViewInit,
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   ElementRef,
   EventEmitter,
-  Inject,
+  inject,
   Input,
   OnChanges,
   Output,
@@ -13,6 +14,7 @@ import {
 } from '@angular/core'
 import { fromEvent, merge, Observable, of, timer } from 'rxjs'
 import { delay, map, startWith, switchMap } from 'rxjs/operators'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { CommonModule } from '@angular/common'
 import { TranslateDirective } from '@ngx-translate/core'
 import {
@@ -24,10 +26,12 @@ import {
   FeaturesHoverEventType,
   MapClickEvent,
   MapClickEventType,
+  MapExtentChangeEvent,
+  MapExtentChangeEventType,
   MapContext,
-  MapContextLayer,
   MapContextLayerXyz,
   MapContextView,
+  MapEventsByType,
   SourceLoadErrorEvent,
   SourceLoadErrorType,
 } from '@geospatial-sdk/core'
@@ -49,6 +53,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { matSwipeOutline } from '@ng-icons/material-icons/outline'
+import { transformExtent } from 'ol/proj'
 
 const DEFAULT_BASEMAP_LAYER: MapContextLayerXyz = {
   type: 'xyz',
@@ -76,88 +81,151 @@ const DEFAULT_VIEW: MapContextView = {
   ],
 })
 export class MapContainerComponent implements AfterViewInit, OnChanges {
+  private doNotUseDefaultBasemap = inject(DO_NOT_USE_DEFAULT_BASEMAP)
+  private basemapLayers = inject(BASEMAP_LAYERS)
+  private mapViewConstraints = inject<{
+    maxZoom?: number
+    maxExtent?: Extent
+  }>(MAP_VIEW_CONSTRAINTS)
+  private destroyRef = inject(DestroyRef)
+
   @Input() context: MapContext | null
 
-  // these events only get registered on the map if they are used
-  _featuresClick: EventEmitter<Feature[]>
+  @ViewChild('map') container: ElementRef
+
+  private olMap: OlMap
+  private olMapResolver: (value: OlMap) => void
+
+  displayMessage$: Observable<boolean>
+  openlayersMap = new Promise<OlMap>((resolve) => {
+    this.olMapResolver = resolve
+  })
+
+  // These events only get registered on the map if they are used
+  _featuresClick: EventEmitter<Feature[]> = null
+  _featuresHover: EventEmitter<Feature[]> = null
+  _mapClick: EventEmitter<[number, number]> = null
+  _extentChange: EventEmitter<Extent> = null
+  _sourceLoadError: EventEmitter<SourceLoadErrorEvent> = null
+  _resolvedExtentChange: EventEmitter<Extent> = null
+
   @Output() get featuresClick() {
     if (!this._featuresClick) {
-      this.openlayersMap.then((olMap) => {
-        listen(
-          olMap,
-          FeaturesClickEventType,
-          ({ features }: FeaturesClickEvent) =>
-            this._featuresClick.emit(features)
-        )
-      })
+      this.setupEventListener(
+        FeaturesClickEventType,
+        (event: FeaturesClickEvent) => {
+          this._featuresClick.emit(event.features)
+        }
+      )
       this._featuresClick = new EventEmitter<Feature[]>()
     }
     return this._featuresClick
   }
-  _featuresHover: EventEmitter<Feature[]>
+
   @Output() get featuresHover() {
     if (!this._featuresHover) {
-      this.openlayersMap.then((olMap) => {
-        listen(
-          olMap,
-          FeaturesHoverEventType,
-          ({ features }: FeaturesHoverEvent) =>
-            this._featuresHover.emit(features)
-        )
-      })
+      this.setupEventListener(
+        FeaturesHoverEventType,
+        (event: FeaturesHoverEvent) => {
+          this._featuresHover.emit(event.features)
+        }
+      )
       this._featuresHover = new EventEmitter<Feature[]>()
     }
     return this._featuresHover
   }
-  _mapClick: EventEmitter<[number, number]>
+
   @Output() get mapClick() {
     if (!this._mapClick) {
-      this.openlayersMap.then((olMap) => {
-        listen(olMap, MapClickEventType, ({ coordinate }: MapClickEvent) =>
-          this._mapClick.emit(coordinate)
-        )
+      this.setupEventListener(MapClickEventType, (event: MapClickEvent) => {
+        this._mapClick.emit(event.coordinate)
       })
       this._mapClick = new EventEmitter<[number, number]>()
     }
     return this._mapClick
   }
-  _sourceLoadError: EventEmitter<SourceLoadErrorEvent>
+
+  @Output() get extentChange() {
+    if (!this._extentChange) {
+      this.setupEventListener(
+        MapExtentChangeEventType,
+        (event: MapExtentChangeEvent) => {
+          this._extentChange.emit(event.extent as Extent)
+        }
+      )
+      this._extentChange = new EventEmitter<Extent>()
+    }
+    return this._extentChange
+  }
+
   @Output() get sourceLoadError() {
     if (!this._sourceLoadError) {
-      this.openlayersMap.then((olMap) => {
-        listen(olMap, SourceLoadErrorType, (error: SourceLoadErrorEvent) =>
-          this._sourceLoadError.emit(error)
-        )
-      })
+      this.setupEventListener(
+        SourceLoadErrorType,
+        (event: SourceLoadErrorEvent) => {
+          this._sourceLoadError.emit(event)
+        }
+      )
       this._sourceLoadError = new EventEmitter<SourceLoadErrorEvent>()
     }
     return this._sourceLoadError
   }
 
-  @ViewChild('map') container: ElementRef
-  displayMessage$: Observable<boolean>
-  olMap: OlMap
-
-  constructor(
-    @Inject(DO_NOT_USE_DEFAULT_BASEMAP) private doNotUseDefaultBasemap: boolean,
-    @Inject(BASEMAP_LAYERS) private basemapLayers: MapContextLayer[],
-    @Inject(MAP_VIEW_CONSTRAINTS)
-    private mapViewConstraints: {
-      maxZoom?: number
-      maxExtent?: Extent
+  @Output() get resolvedExtentChange() {
+    if (!this._resolvedExtentChange) {
+      this._resolvedExtentChange = new EventEmitter<Extent>()
     }
-  ) {}
+    return this._resolvedExtentChange
+  }
 
-  private olMapResolver
-  openlayersMap = new Promise<OlMap>((resolve) => {
-    this.olMapResolver = resolve
-  })
+  calculateCurrentMapExtent(): Extent {
+    const extent = this.olMap.getView().calculateExtent(this.olMap.getSize())
+    const reprojectedExtent = transformExtent(
+      extent,
+      this.olMap.getView().getProjection(),
+      'EPSG:4326'
+    )
+
+    return reprojectedExtent as Extent
+  }
 
   async ngAfterViewInit() {
     this.olMap = await createMapFromContext(
       this.processContext(this.context),
       this.container.nativeElement
     )
+    if (this._resolvedExtentChange) {
+      this._resolvedExtentChange.emit(this.calculateCurrentMapExtent())
+    }
+
+    this.setupDisplayMessageObservable()
+    this.olMapResolver(this.olMap)
+  }
+
+  async ngOnChanges(changes: SimpleChanges) {
+    if ('context' in changes && !changes['context'].isFirstChange()) {
+      const diff = computeMapContextDiff(
+        this.processContext(changes['context'].currentValue),
+        this.processContext(changes['context'].previousValue)
+      )
+      await applyContextDiffToMap(this.olMap, diff)
+
+      if (this._resolvedExtentChange && diff.viewChanges) {
+        this._resolvedExtentChange.emit(this.calculateCurrentMapExtent())
+      }
+    }
+  }
+
+  private setupEventListener(
+    eventType: keyof MapEventsByType,
+    handler: (event: MapEventsByType[typeof eventType]) => void
+  ) {
+    this.openlayersMap.then((olMap: OlMap) => {
+      listen(olMap, eventType, handler)
+    })
+  }
+
+  private setupDisplayMessageObservable() {
     this.displayMessage$ = merge(
       fromEvent(this.olMap, 'mapmuted').pipe(map(() => true)),
       fromEvent(this.olMap, 'movestart').pipe(map(() => false)),
@@ -171,32 +239,25 @@ export class MapContainerComponent implements AfterViewInit, OnChanges {
               delay(400)
             )
           : of(false)
-      )
+      ),
+      takeUntilDestroyed(this.destroyRef)
     )
-    this.olMapResolver(this.olMap)
   }
 
-  async ngOnChanges(changes: SimpleChanges) {
-    if ('context' in changes && !changes['context'].isFirstChange()) {
-      const diff = computeMapContextDiff(
-        this.processContext(changes['context'].currentValue),
-        this.processContext(changes['context'].previousValue)
-      )
-      await applyContextDiffToMap(this.olMap, diff)
-    }
-  }
-
-  // This will apply basemap layers & view constraints
-  processContext(context: MapContext): MapContext {
+  private processContext(context: MapContext): MapContext {
     const processed = context
       ? { ...context, view: context.view ?? DEFAULT_VIEW }
       : { layers: [], view: DEFAULT_VIEW }
+
+    // Prepend with default basemap and basemap layers
     if (this.basemapLayers.length) {
       processed.layers = [...this.basemapLayers, ...processed.layers]
     }
     if (!this.doNotUseDefaultBasemap) {
       processed.layers = [DEFAULT_BASEMAP_LAYER, ...processed.layers]
     }
+
+    // Apply view constraints
     if (this.mapViewConstraints.maxZoom) {
       processed.view = {
         maxZoom: this.mapViewConstraints.maxZoom,
@@ -209,20 +270,29 @@ export class MapContainerComponent implements AfterViewInit, OnChanges {
         ...processed.view,
       }
     }
+
     if (
       processed.view &&
-      !('zoom' in processed.view) &&
-      !('center' in processed.view)
+      'zoom' in processed.view &&
+      'center' in processed.view
     ) {
-      if (this.mapViewConstraints.maxExtent) {
-        processed.view = {
-          extent: this.mapViewConstraints.maxExtent,
-          ...processed.view,
-        }
-      } else {
-        processed.view = { ...DEFAULT_VIEW, ...processed.view }
+      return processed
+    }
+
+    if (processed.view && 'extent' in processed.view) {
+      return processed
+    }
+
+    // Ensure valid view
+    if (this.mapViewConstraints.maxExtent) {
+      processed.view = {
+        extent: this.mapViewConstraints.maxExtent,
+        ...processed.view,
       }
+    } else {
+      processed.view = { ...DEFAULT_VIEW, ...processed.view }
     }
+
     return processed
   }
 }

package/src/libs/ui/map/src/lib/components/map-legend/map-legend.component.html

@@ -1 +1,3 @@
-<div *ngIf="legendHTML" [innerHTML]="legendHTML.outerHTML"></div>
+@if (legendHTML) {
+  <div [innerHTML]="legendHTML.outerHTML"></div>
+}

package/src/libs/ui/map/src/lib/components/map-legend/map-legend.component.ts

@@ -9,7 +9,6 @@ import {
 } from '@angular/core'
 import { MapContext } from '@geospatial-sdk/core'
 import { createLegendFromLayer } from '@geospatial-sdk/legend'
-import { NgIf } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-map-legend',
@@ -17,7 +16,7 @@ import { NgIf } from '@angular/common'
   standalone: true,
   styleUrls: ['./map-legend.component.css'],
   encapsulation: ViewEncapsulation.None,
-  imports: [NgIf],
+  imports: [],
 })
 export class MapLegendComponent implements OnChanges {
   @Input() context: MapContext | null

package/src/libs/ui/search/src/lib/facets/facet-block/facet-block.component.html

@@ -1,88 +1,91 @@
-<div
-  class="flex flex-row items-center group"
-  *ngIf="hasItems"
-  (click)="toggleCollapsed()"
->
-  <span
-    class="flex-initial truncate font-bold cursor-pointer group-hover:text-black span-title"
-    >{{ 'facets.block.title.' + title | translate }}</span
-  >
-  <div
-    *ngIf="!collapsed"
-    class="shrink-0 cursor-pointer group-hover:text-black icon-collapse"
-    style="min-width: 20px"
-  >
-    <!-- chevron-down svg -->
-    <svg
-      class="h-5 w-5"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-      fill="currentColor"
+@if (hasItems) {
+  <div class="flex flex-row items-center group" (click)="toggleCollapsed()">
+    <span
+      class="flex-initial truncate font-bold cursor-pointer group-hover:text-black span-title"
+      >{{ 'facets.block.title.' + title | translate }}</span
     >
-      <path
-        fill-rule="evenodd"
-        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-        clip-rule="evenodd"
-      />
-    </svg>
-  </div>
-  <div
-    *ngIf="collapsed"
-    class="shrink-0 cursor-pointer group-hover:text-black icon-expand"
-    style="min-width: 20px"
-  >
-    <!-- chevron-right svg -->
-    <svg
-      class="h-5 w-5"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-        clip-rule="evenodd"
-      />
-    </svg>
+    @if (!collapsed) {
+      <div
+        class="shrink-0 cursor-pointer group-hover:text-black icon-collapse"
+        style="min-width: 20px"
+      >
+        <!-- chevron-down svg -->
+        <svg
+          class="h-5 w-5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </div>
+    }
+    @if (collapsed) {
+      <div
+        class="shrink-0 cursor-pointer group-hover:text-black icon-expand"
+        style="min-width: 20px"
+      >
+        <!-- chevron-right svg -->
+        <svg
+          class="h-5 w-5"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </div>
+    }
   </div>
-</div>
+}
 <div [hidden]="collapsed || !hasItems" class="ml-4 collapsible-content">
-  <div *ngIf="canFilter" class="relative mt-2">
-    <input
-      type="text"
-      class="w-full rounded border border-1 border-gray-300 input-filter py-1 px-2 pl-8 focus:outline-none focus:border-blue-400"
-      #filterInput
-    />
-    <div
-      class="pointer-events-none absolute flex items-center px-2"
-      style="left: 0px; top: 0px"
-    >
-      <svg
-        class="h-4 w-4 my-2"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
+  @if (canFilter) {
+    <div class="relative mt-2">
+      <input
+        type="text"
+        class="w-full rounded border border-1 border-gray-300 input-filter py-1 px-2 pl-8 focus:outline-none focus:border-blue-400"
+        #filterInput
+      />
+      <div
+        class="pointer-events-none absolute flex items-center px-2"
+        style="left: 0px; top: 0px"
       >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
-        />
-      </svg>
+        <svg
+          class="h-4 w-4 my-2"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+          />
+        </svg>
+      </div>
     </div>
-  </div>
-  <gn-ui-facet-item
-    class="mt-2"
-    *ngFor="let item of getItems()"
-    [label]="item.value"
-    [count]="item.count"
-    [selected]="isItemSelected(item)"
-    (selectedChange)="onItemSelectedChange($event, item)"
-    (invertedChange)="onItemInvertedChange($event, item)"
-  ></gn-ui-facet-item>
-  <a href *ngIf="canShowMore()" class="a-more" (click)="onMoreClick($event)"
-    >more</a
-  >
+  }
+  @for (item of getItems(); track item) {
+    <gn-ui-facet-item
+      class="mt-2"
+      [label]="item.value"
+      [count]="item.count"
+      [selected]="isItemSelected(item)"
+      (selectedChange)="onItemSelectedChange($event, item)"
+      (invertedChange)="onItemInvertedChange($event, item)"
+    ></gn-ui-facet-item>
+  }
+  @if (canShowMore()) {
+    <a href class="a-more" (click)="onMoreClick($event)">more</a>
+  }
 </div>

package/src/libs/ui/search/src/lib/facets/facet-block/facet-block.component.ts

@@ -21,7 +21,7 @@ import {
   ModelItem,
 } from '../facets.model'
 import { FacetItemComponent } from '../facet-item/facet-item.component'
-import { CommonModule } from '@angular/common'
+
 import { FormsModule } from '@angular/forms'
 import { TranslateModule, TranslatePipe } from '@ngx-translate/core'
 
@@ -31,13 +31,7 @@ import { TranslateModule, TranslatePipe } from '@ngx-translate/core'
   styleUrls: ['./facet-block.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    FacetItemComponent,
-    CommonModule,
-    FormsModule,
-    TranslateModule,
-    TranslatePipe,
-  ],
+  imports: [FacetItemComponent, FormsModule, TranslateModule, TranslatePipe],
 })
 export class FacetBlockComponent
   implements OnInit, AfterViewInit, OnDestroy, OnChanges

package/src/libs/ui/search/src/lib/facets/facet-item/facet-item.component.html

@@ -11,42 +11,44 @@
     {{ label | translate }}
     <span class="group-hover:text-black">({{ count }})</span>
   </label>
-  <div
-    *ngIf="!inverted"
-    class="shrink-0 cursor-pointer invisible group-hover:visible icon-exclude"
-    style="min-width: 20px"
-    (click)="toggleInverted()"
-  >
-    <!-- minus svg -->
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-      fill="currentColor"
+  @if (!inverted) {
+    <div
+      class="shrink-0 cursor-pointer invisible group-hover:visible icon-exclude"
+      style="min-width: 20px"
+      (click)="toggleInverted()"
     >
-      <path
-        fill-rule="evenodd"
-        d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-        clip-rule="evenodd"
-      />
-    </svg>
-  </div>
-  <div
-    *ngIf="inverted"
-    class="shrink-0 cursor-pointer invisible group-hover:visible icon-include"
-    style="min-width: 20px"
-    (click)="toggleInverted()"
-  >
-    <!-- check svg -->
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-      fill="currentColor"
+      <!-- minus svg -->
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </div>
+  }
+  @if (inverted) {
+    <div
+      class="shrink-0 cursor-pointer invisible group-hover:visible icon-include"
+      style="min-width: 20px"
+      (click)="toggleInverted()"
     >
-      <path
-        fill-rule="evenodd"
-        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-        clip-rule="evenodd"
-      />
-    </svg>
-  </div>
+      <!-- check svg -->
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </div>
+  }
 </div>

package/src/libs/ui/search/src/lib/facets/facet-item/facet-item.component.ts

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common'
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { TranslateModule, TranslatePipe } from '@ngx-translate/core'
@@ -8,7 +7,7 @@ import { TranslateModule, TranslatePipe } from '@ngx-translate/core'
   templateUrl: './facet-item.component.html',
   styleUrls: ['./facet-item.component.css'],
   standalone: true,
-  imports: [CommonModule, FormsModule, TranslateModule, TranslatePipe],
+  imports: [FormsModule, TranslateModule, TranslatePipe],
 })
 export class FacetItemComponent {
   @Input() label: string

package/src/libs/ui/search/src/lib/facets/facet-list/facet-list.component.html

@@ -1,8 +1,9 @@
-<gn-ui-facet-block
-  *ngFor="let model of models; trackBy: trackByIndexKey"
-  [model]="model"
-  [selectedPaths]="getBlockSelectedPaths(model)"
-  (itemChange)="onItemChange($event)"
-  (filterChange)="onFilterChange(model.key, $event)"
-  (more)="onMore(model.key)"
-></gn-ui-facet-block>
+@for (model of models; track trackByIndexKey($index, model)) {
+  <gn-ui-facet-block
+    [model]="model"
+    [selectedPaths]="getBlockSelectedPaths(model)"
+    (itemChange)="onItemChange($event)"
+    (filterChange)="onFilterChange(model.key, $event)"
+    (more)="onMore(model.key)"
+  ></gn-ui-facet-block>
+}

package/src/libs/ui/search/src/lib/facets/facet-list/facet-list.component.ts

@@ -4,7 +4,7 @@ import { FacetSelectEvent, ModelBlock } from '../facets.model'
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { EsRequestAggTerm } from '../../../../../../../libs/api/metadata-converter/src'
 import { FacetBlockComponent } from '../facet-block/facet-block.component'
-import { CommonModule } from '@angular/common'
+
 import { FormsModule } from '@angular/forms'
 import { TranslateModule } from '@ngx-translate/core'
 
@@ -13,7 +13,7 @@ import { TranslateModule } from '@ngx-translate/core'
   templateUrl: './facet-list.component.html',
   styleUrls: ['./facet-list.component.css'],
   standalone: true,
-  imports: [FacetBlockComponent, CommonModule, FormsModule, TranslateModule],
+  imports: [FacetBlockComponent, FormsModule, TranslateModule],
 })
 export class FacetListComponent {
   @Input() models: ModelBlock[]