geonetwork-ui 2.4.0-dev.e6ae55aa → 2.4.0-dev.e7ff1d25

package/src/libs/feature/map/src/lib/add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component.ts

@@ -6,7 +6,6 @@ import {
   LinkUsage,
 } from '../../../../../../../libs/util/shared/src'
 import { Observable, of, throwError } from 'rxjs'
-import { map } from 'rxjs/operators'
 import { MapUtilsService } from '../../utils'
 import { MapFacade } from '../../+state/map.facade'
 import {
@@ -17,12 +16,17 @@ import {
   DatasetDistribution,
   DatasetRecord,
 } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-add-layer-record-preview',
   templateUrl: './add-layer-record-preview.component.html',
   styleUrls: ['./add-layer-record-preview.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ThumbnailComponent, ButtonComponent, CommonModule],
 })
 export class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
   get mapLinks(): DatasetDistribution[] {

package/src/libs/feature/map/src/lib/add-layer-from-file/add-layer-from-file.component.ts

@@ -1,6 +1,9 @@
 import { ChangeDetectorRef, Component } from '@angular/core'
 import { MapContextLayerModel } from '../map-context/map-context.model'
 import { MapFacade } from '../+state/map.facade'
+import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
 
 const INVALID_FILE_FORMAT_ERROR_MESSAGE = 'Invalid file format'
 
@@ -8,6 +11,8 @@ const INVALID_FILE_FORMAT_ERROR_MESSAGE = 'Invalid file format'
   selector: 'gn-ui-add-layer-from-file',
   templateUrl: './add-layer-from-file.component.html',
   styleUrls: ['./add-layer-from-file.component.css'],
+  standalone: true,
+  imports: [UiInputsModule, TranslateModule, CommonModule],
 })
 export class AddLayerFromFileComponent {
   errorMessage: string | null = null

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.html

@@ -2,7 +2,7 @@
   <gn-ui-text-input
     [(value)]="ogcUrl"
     (valueChange)="urlChange.next($event)"
-    [hint]="'map.ogc.urlInput.hint' | translate"
+    [placeholder]="'map.ogc.urlInput.hint' | translate"
     class="w-96"
   ></gn-ui-text-input>
 </div>

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts

@@ -1,20 +1,23 @@
 import {
+  ChangeDetectorRef,
   Component,
-  OnInit,
-  Output,
   EventEmitter,
-  ChangeDetectionStrategy,
   Input,
-  ChangeDetectorRef,
+  OnInit,
+  Output,
 } from '@angular/core'
 import { OgcApiEndpoint } from '@camptocamp/ogc-client'
-import { Subject, debounceTime } from 'rxjs'
+import { debounceTime, Subject } from 'rxjs'
 import {
   MapContextLayerModel,
   MapContextLayerTypeEnum,
 } from '../map-context/map-context.model'
 import { TranslateModule } from '@ngx-translate/core'
-import { DropdownChoice, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import {
+  DropdownChoice,
+  TextInputComponent,
+  UiInputsModule,
+} from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
 import { MapLayer } from '../+state/map.models'
 
@@ -23,7 +26,7 @@ import { MapLayer } from '../+state/map.models'
   templateUrl: './add-layer-from-ogc-api.component.html',
   styleUrls: ['./add-layer-from-ogc-api.component.css'],
   standalone: true,
-  imports: [CommonModule, TranslateModule, UiInputsModule],
+  imports: [CommonModule, TranslateModule, UiInputsModule, TextInputComponent],
 })
 export class AddLayerFromOgcApiComponent implements OnInit {
   @Input() ogcUrl: string

package/src/libs/feature/map/src/lib/add-layer-from-wfs/add-layer-from-wfs.component.html

@@ -2,7 +2,7 @@
   <gn-ui-text-input
     [(value)]="wfsUrl"
     (valueChange)="urlChange.next($event)"
-    [hint]="'map.wfs.urlInput.hint' | translate"
+    [placeholder]="'map.wfs.urlInput.hint' | translate"
     class="w-96"
   >
   </gn-ui-text-input>

package/src/libs/feature/map/src/lib/add-layer-from-wfs/add-layer-from-wfs.component.ts

@@ -7,11 +7,16 @@ import {
 } from '../map-context/map-context.model'
 import { MapFacade } from '../+state/map.facade'
 import { debounceTime } from 'rxjs/operators'
+import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-add-layer-from-wfs',
   templateUrl: './add-layer-from-wfs.component.html',
   styleUrls: ['./add-layer-from-wfs.component.css'],
+  standalone: true,
+  imports: [TextInputComponent, ButtonComponent, TranslateModule, CommonModule],
 })
 export class AddLayerFromWfsComponent implements OnInit {
   wfsUrl = ''

package/src/libs/feature/map/src/lib/add-layer-from-wms/add-layer-from-wms.component.html

@@ -2,7 +2,7 @@
   <gn-ui-text-input
     [(value)]="wmsUrl"
     (valueChange)="urlChange.next($event)"
-    [hint]="'map.wms.urlInput.hint' | translate"
+    [placeholder]="'map.wms.urlInput.hint' | translate"
     class="w-96"
   >
   </gn-ui-text-input>

package/src/libs/feature/map/src/lib/add-layer-from-wms/add-layer-from-wms.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectorRef, OnInit } from '@angular/core'
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core'
 import { WmsEndpoint, WmsLayerSummary } from '@camptocamp/ogc-client'
 import { MapFacade } from '../+state/map.facade'
 import {
@@ -7,11 +7,16 @@ import {
 } from '../map-context/map-context.model'
 import { Subject } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
+import { ButtonComponent, TextInputComponent } from '../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-add-layer-from-wms',
   templateUrl: './add-layer-from-wms.component.html',
   styleUrls: ['./add-layer-from-wms.component.css'],
+  standalone: true,
+  imports: [TextInputComponent, CommonModule, TranslateModule, ButtonComponent],
 })
 export class AddLayerFromWmsComponent implements OnInit {
   wmsUrl = ''

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

@@ -4,12 +4,10 @@ import { UiMapModule } from '../../../../../libs/ui/map/src'
 import { defaultMapOptions, FEATURE_MAP_OPTIONS } from './constant'
 import { MapInstanceDirective } from './manager/map-instance.directive'
 import { MapContextComponent } from './map-context/component/map-context.component'
-import { LayersPanelComponent } from './layers-panel/layers-panel.component'
 import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
 import { MatIconModule } from '@angular/material/icon'
 import { MatTabsModule } from '@angular/material/tabs'
 import { TranslateModule } from '@ngx-translate/core'
-import { AddLayerFromCatalogComponent } from './add-layer-from-catalog/add-layer-from-catalog.component'
 import { FeatureSearchModule } from '../../../../../libs/feature/search/src'
 import { StoreModule } from '@ngrx/store'
 import { EffectsModule } from '@ngrx/effects'
@@ -17,12 +15,8 @@ import * as fromMap from './+state/map.reducer'
 import { MapEffects } from './+state/map.effects'
 import { MapFacade } from './+state/map.facade'
 import { MapContainerComponent } from './map-container/map-container.component'
-import { AddLayerRecordPreviewComponent } from './add-layer-from-catalog/add-layer-record-preview/add-layer-record-preview.component'
 import { UiElementsModule } from '../../../../../libs/ui/elements/src'
-import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
-import { AddLayerFromWmsComponent } from './add-layer-from-wms/add-layer-from-wms.component'
-import { AddLayerFromFileComponent } from './add-layer-from-file/add-layer-from-file.component'
-import { AddLayerFromWfsComponent } from './add-layer-from-wfs/add-layer-from-wfs.component'
+import { TextInputComponent, UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { GeocodingComponent } from './geocoding/geocoding.component'
 import { GEOCODING_PROVIDER, GeocodingProvider } from './geocoding.service'
 import { AddLayerFromOgcApiComponent } from './add-layer-from-ogc-api/add-layer-from-ogc-api.component'
@@ -31,20 +25,12 @@ import { AddLayerFromOgcApiComponent } from './add-layer-from-ogc-api/add-layer-
   declarations: [
     MapContextComponent,
     MapInstanceDirective,
-    LayersPanelComponent,
-    AddLayerFromCatalogComponent,
     MapContainerComponent,
-    AddLayerRecordPreviewComponent,
-    AddLayerFromWmsComponent,
-    AddLayerFromFileComponent,
-    AddLayerFromWfsComponent,
     GeocodingComponent,
   ],
   exports: [
     MapContextComponent,
     MapInstanceDirective,
-    LayersPanelComponent,
-    AddLayerFromCatalogComponent,
     MapContainerComponent,
     GeocodingComponent,
   ],
@@ -61,6 +47,7 @@ import { AddLayerFromOgcApiComponent } from './add-layer-from-ogc-api/add-layer-
     UiElementsModule,
     UiInputsModule,
     AddLayerFromOgcApiComponent,
+    TextInputComponent,
   ],
   providers: [
     {

package/src/libs/feature/map/src/lib/layers-panel/layers-panel.component.ts

@@ -1,11 +1,34 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { MapFacade } from '../+state/map.facade'
+import { MatIconModule } from '@angular/material/icon'
+import { UiLayoutModule } from '../../../../../../libs/ui/layout/src'
+import { MatTabsModule } from '@angular/material/tabs'
+import { AddLayerFromOgcApiComponent } from '../add-layer-from-ogc-api/add-layer-from-ogc-api.component'
+import { AddLayerFromWfsComponent } from '../add-layer-from-wfs/add-layer-from-wfs.component'
+import { AddLayerFromWmsComponent } from '../add-layer-from-wms/add-layer-from-wms.component'
+import { AddLayerFromCatalogComponent } from '../add-layer-from-catalog/add-layer-from-catalog.component'
+import { AddLayerFromFileComponent } from '../add-layer-from-file/add-layer-from-file.component'
+import { TranslateModule } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-layers-panel',
   templateUrl: './layers-panel.component.html',
   styleUrls: ['./layers-panel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatIconModule,
+    UiLayoutModule,
+    MatTabsModule,
+    AddLayerFromOgcApiComponent,
+    AddLayerFromWfsComponent,
+    AddLayerFromWmsComponent,
+    AddLayerFromCatalogComponent,
+    AddLayerFromFileComponent,
+    TranslateModule,
+    CommonModule,
+  ],
 })
 export class LayersPanelComponent {
   layers$ = this.mapFacade.layers$

package/src/libs/feature/map/src/lib/utils/map-utils.service.ts

@@ -32,7 +32,7 @@ import { ProxyService } from '../../../../../../libs/util/shared/src'
 import { WmsEndpoint, WmtsEndpoint } from '@camptocamp/ogc-client'
 import { LONLAT_CRS_CODES } from '../constant/projections'
 import { fromEPSGCode, register } from 'ol/proj/proj4'
-import proj4 from 'proj4/dist/proj4'
+import proj4 from 'proj4'
 import { defaults as defaultControls } from 'ol/control/defaults'
 
 const FEATURE_PROJECTION = 'EPSG:3857'
@@ -220,11 +220,15 @@ export class MapUtilsService {
     if (!('spatialExtents' in record) || record.spatialExtents.length === 0) {
       return null
     }
-    // transform an array of geojson geometries into a bbox
+    // extend all the spatial extents into an including bbox
     const totalExtent = record.spatialExtents.reduce(
       (prev, curr) => {
-        const geom = GEOJSON.readGeometry(curr.geometry)
-        return extend(prev, geom.getExtent())
+        if ('bbox' in curr) return extend(prev, curr.bbox)
+        else if ('geometry' in curr) {
+          const geom = GEOJSON.readGeometry(curr.geometry)
+          return extend(prev, geom.getExtent())
+        }
+        return prev
       },
       [Infinity, Infinity, -Infinity, -Infinity]
     )

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html

@@ -6,6 +6,6 @@
   (inputSubmitted)="handleInputSubmission($event)"
   (inputCleared)="handleInputCleared()"
   [value]="searchInputValue$ | async"
-  [clearOnSelection]="true"
+  [preventCompleteOnSelection]="true"
   [autoFocus]="autoFocus"
 ></gn-ui-autocomplete>

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

@@ -1,10 +1,11 @@
 <gn-ui-results-table
   [records]="records$ | async"
-  [recordHasDraft]="hasDraft"
+  [hasDraft]="hasDraft"
   [selectedRecordsIdentifiers]="selectedRecords$ | async"
   [sortOrder]="sortBy$ | async"
   (recordClick)="handleRecordClick($event)"
   (duplicateRecord)="handleDuplicateRecord($event)"
+  (deleteRecord)="handleDeleteRecord($event)"
   (recordsSelectedChange)="handleRecordsSelectedChange($event[0], $event[1])"
   (sortByChange)="handleSortByChange($event[0], $event[1])"
 ></gn-ui-results-table>

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output } from '@angular/core'
+import { Component, EventEmitter, OnDestroy, Output } from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SearchFacade } from '../state/search.facade'
 import { SelectionService } from '../../../../../../libs/api/repository/src'
@@ -6,6 +6,9 @@ import { SearchService } from '../utils/service/search.service'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { ResultsTableComponent } from '../../../../../../libs/ui/search/src'
 import { CommonModule } from '@angular/common'
+import { Subscription } from 'rxjs'
+import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
+import { TranslateService } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-results-table-container',
@@ -14,10 +17,12 @@ import { CommonModule } from '@angular/common'
   standalone: true,
   imports: [CommonModule, ResultsTableComponent],
 })
-export class ResultsTableContainerComponent {
+export class ResultsTableContainerComponent implements OnDestroy {
   @Output() recordClick = new EventEmitter<CatalogRecord>()
   @Output() duplicateRecord = new EventEmitter<CatalogRecord>()
 
+  subscription = new Subscription()
+
   records$ = this.searchFacade.results$
   selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$
   sortBy$ = this.searchFacade.sortBy$
@@ -29,7 +34,9 @@ export class ResultsTableContainerComponent {
     private searchFacade: SearchFacade,
     private searchService: SearchService,
     private selectionService: SelectionService,
-    private recordsRepository: RecordsRepositoryInterface
+    private recordsRepository: RecordsRepositoryInterface,
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService
   ) {}
 
   handleRecordClick(item: unknown) {
@@ -40,6 +47,44 @@ export class ResultsTableContainerComponent {
     this.duplicateRecord.emit(item as CatalogRecord)
   }
 
+  async handleDeleteRecord(item: unknown) {
+    const uniqueIdentifier = (item as CatalogRecord).uniqueIdentifier
+    this.subscription.add(
+      this.recordsRepository.deleteRecord(uniqueIdentifier).subscribe({
+        next: () => {
+          this.recordsRepository.clearRecordDraft(uniqueIdentifier)
+          this.searchFacade.requestNewResults()
+          this.notificationsService.showNotification(
+            {
+              type: 'success',
+              title: this.translateService.instant(
+                'editor.record.deleteSuccess.title'
+              ),
+              text: `${this.translateService.instant(
+                'editor.record.deleteSuccess.body'
+              )}`,
+            },
+            2500
+          )
+        },
+        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'
+            ),
+          })
+        },
+      })
+    )
+  }
+
   handleSortByChange(col: string, order: 'asc' | 'desc') {
     this.searchService.setSortBy([order, col])
   }
@@ -51,4 +96,8 @@ export class ResultsTableContainerComponent {
       this.selectionService.selectRecords(records)
     }
   }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe()
+  }
 }

package/src/libs/feature/search/src/lib/state/search.facade.ts

@@ -8,6 +8,7 @@ import {
   Paginate,
   RequestMoreOnAggregation,
   RequestMoreResults,
+  RequestNewResults,
   SetConfigAggregations,
   SetConfigFilters,
   SetConfigRequestFields,
@@ -151,6 +152,11 @@ export class SearchFacade {
     return this
   }
 
+  requestNewResults(): SearchFacade {
+    this.store.dispatch(new RequestNewResults(this.searchId))
+    return this
+  }
+
   requestMoreOnAggregation(key: string, increment: number): SearchFacade {
     this.store.dispatch(
       new RequestMoreOnAggregation(key, increment, this.searchId)

package/src/libs/ui/elements/src/index.ts

@@ -1,5 +1,6 @@
 export * from './lib/api-card/api-card.component'
 export * from './lib/avatar/avatar.component'
+export * from './lib/confirmation-dialog/confirmation-dialog.component'
 export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'

package/src/libs/ui/elements/src/lib/confirmation-dialog/confirmation-dialog.component.html

@@ -0,0 +1,12 @@
+<h1 mat-dialog-title>{{ data.title }}</h1>
+<div mat-dialog-content>{{ data.message }}</div>
+<div mat-dialog-actions>
+  <gn-ui-button (buttonClick)="onCancel()">{{ data.cancelText }}</gn-ui-button>
+  <gn-ui-button
+    (buttonClick)="onConfirm()"
+    cdkFocusInitial
+    class="ml-2"
+    data-cy="confirm-button"
+    >{{ data.confirmText }}</gn-ui-button
+  >
+</div>

package/src/libs/ui/elements/src/lib/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+export interface ConfirmationDialogData {
+  title: string
+  message: string
+  confirmText: string
+  cancelText: string
+}
+
+@Component({
+  selector: 'gn-ui-confirmation-dialog',
+  templateUrl: './confirmation-dialog.component.html',
+  styleUrls: ['./confirmation-dialog.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatDialogModule, ButtonComponent],
+})
+export class ConfirmationDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ConfirmationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmationDialogData
+  ) {}
+
+  onConfirm() {
+    this.dialogRef.close(true)
+  }
+
+  onCancel() {
+    this.dialogRef.close(false)
+  }
+}

package/src/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html

@@ -1,5 +1,8 @@
 <div class="h-full flex flex-col">
-  <p class="flex-none mb-2 font-medium text-sm text-gray-900">
+  <p
+    *ngIf="helperText"
+    class="flex-none mb-2 font-medium text-sm text-gray-900"
+  >
     {{ helperText }}
   </p>
   <div class="flex-1" [hidden]="preview">

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.css

@@ -2,9 +2,10 @@
 :host ::ng-deep .markdown-body {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
-  margin: 0px 0px 1.5rem 0px;
+  margin: 0;
   line-height: 1.5;
   word-wrap: break-word;
+  height: 100%;
 }
 
 /** Emphasis **/

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -1,7 +1,7 @@
 <div class="mb-6 md-description sm:mb-4 sm:pr-16">
   <gn-ui-content-ghost ghostClass="h-32" [showContent]="fieldReady('abstract')">
     <gn-ui-max-lines [maxLines]="6" *ngIf="metadata.abstract">
-      <div>
+      <div class="mb-6">
         <gn-ui-markdown-parser
           [textContent]="metadata.abstract"
         ></gn-ui-markdown-parser>
@@ -47,19 +47,23 @@
       </ng-template>
     </ng-container>
     <ng-container *ngIf="legalConstraints.length">
-      <gn-ui-markdown-parser
-        *ngFor="let constraint of legalConstraints"
-        [textContent]="constraint"
-      >
-      </gn-ui-markdown-parser>
+      <div class="mb-6">
+        <gn-ui-markdown-parser
+          *ngFor="let constraint of legalConstraints"
+          [textContent]="constraint"
+        >
+        </gn-ui-markdown-parser>
+      </div>
     </ng-container>
     <ng-container *ngIf="otherConstraints.length">
       <div gnUiLinkify *ngFor="let constraint of otherConstraints">
         <h5 translate class="font-medium text-black text-sm mb-[2px] mt-[16px]">
           record.metadata.otherConstraints
         </h5>
-        <gn-ui-markdown-parser [textContent]="constraint">
-        </gn-ui-markdown-parser>
+        <div class="mb-6">
+          <gn-ui-markdown-parser [textContent]="constraint">
+          </gn-ui-markdown-parser>
+        </div>
       </div>
     </ng-container>
 

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.html

@@ -1,22 +1,16 @@
-<div
-  *ngIf="metadataQualityDisplay"
-  class="mb-6 metadata-quality"
-  (mouseenter)="showMenu()"
-  (mouseleave)="hideMenu()"
->
-  <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
-    <gn-ui-progress-bar
-      (focus)="showMenu()"
-      (blur)="hideMenu()"
-      tabindex="0"
-      [value]="qualityScore"
-      type="primary"
-    ></gn-ui-progress-bar>
-  </div>
-  <div
-    class="absolute z-10 bg-white border border-black border-opacity-35 rounded-lg shadow-lg p-5 whitespace-nowrap"
-    [class]="isMenuShown ? 'block' : 'hidden'"
-  >
+<div *ngIf="metadataQualityDisplay" class="mb-6 metadata-quality">
+  <gn-ui-popover [content]="popoverItems" theme="light-border">
+    <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
+      <gn-ui-progress-bar
+        tabindex="0"
+        [value]="qualityScore"
+        type="primary"
+      ></gn-ui-progress-bar>
+    </div>
+  </gn-ui-popover>
+</div>
+<ng-template #popoverItems>
+  <div class="p-2 py-4">
     <div class="mb-4 font-bold" translate>record.metadata.quality.details</div>
     <gn-ui-metadata-quality-item
       *ngFor="let e of items"
@@ -24,4 +18,4 @@
       [value]="e.value"
     ></gn-ui-metadata-quality-item>
   </div>
-</div>
+</ng-template>

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts

@@ -21,8 +21,6 @@ export class MetadataQualityComponent implements OnChanges {
 
   items: MetadataQualityItem[] = []
 
-  isMenuShown = false
-
   get qualityScore() {
     const qualityScore = this.metadata?.extras?.qualityScore
     return typeof qualityScore === 'number'
@@ -36,14 +34,6 @@ export class MetadataQualityComponent implements OnChanges {
     )
   }
 
-  showMenu() {
-    this.isMenuShown = true
-  }
-
-  hideMenu() {
-    this.isMenuShown = false
-  }
-
   private add(name: string, value: boolean) {
     if (this.metadataQualityDisplay?.[name] !== false) {
       this.items.push({ name, value })

package/src/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.html

@@ -1,4 +1,4 @@
 <div class="ml-4 flex flex-row">
-  <mat-icon class="material-symbols-outlined">{{ icon }}</mat-icon>
+  <mat-icon class="material-symbols-outlined min-w-fit">{{ icon }}</mat-icon>
   <p class="ml-2 text">{{ labelKey | translate }}</p>
 </div>

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.html

@@ -21,7 +21,7 @@
             class="mr-2 w-20"
             (valueChange)="setLimit($event)"
             [value]="displayLimit$ | async"
-            hint=""
+            placeholder=""
           >
           </gn-ui-text-input>
           <div class="flex items-center">
@@ -47,7 +47,7 @@
             [value]="offset$ | async"
             [disabled]="!supportOffset"
             (valueChange)="supportOffset ? setOffset($event) : null"
-            hint=""
+            placeholder=""
           >
           </gn-ui-text-input>
           <div

package/src/libs/ui/elements/src/lib/sortable-list/sortable-list.component.html

@@ -12,7 +12,9 @@
   class="sortable-list flex flex-col gap-3 p-2"
   (cdkDropListDropped)="drop($event)"
 >
-  <ng-container *ngFor="let element of elements; index as index">
+  <ng-container
+    *ngFor="let element of elements; index as index; trackBy: trackByFn"
+  >
     <div class="sortable-box bg-white flex items-center" cdkDrag>
       <span
         cdkDragHandle