geonetwork-ui 2.3.0-dev.6e2b8bea → 2.3.0-dev.82249397

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

@@ -1,24 +1,24 @@
-export * from './lib/ui-elements.module'
-export * from './lib/metadata-info/metadata-info.component'
-export * from './lib/metadata-contact/metadata-contact.component'
-export * from './lib/metadata-catalog/metadata-catalog.component'
-export * from './lib/metadata-quality/metadata-quality.component'
-export * from './lib/metadata-quality-item/metadata-quality-item.component'
-export * from './lib/search-results-error/search-results-error.component'
-export * from './lib/thumbnail/thumbnail.component'
-export * from './lib/content-ghost/content-ghost.component'
-export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/api-card/api-card.component'
 export * from './lib/avatar/avatar.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'
+export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/link-card/link-card.component'
+export * from './lib/markdown-editor/markdown-editor.component'
+export * from './lib/markdown-parser/markdown-parser.component'
+export * from './lib/max-lines/max-lines.component'
+export * from './lib/metadata-catalog/metadata-catalog.component'
+export * from './lib/metadata-contact/metadata-contact.component'
+export * from './lib/metadata-info/metadata-info.component'
+export * from './lib/metadata-quality-item/metadata-quality-item.component'
+export * from './lib/metadata-quality/metadata-quality.component'
+export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/pagination/pagination.component'
+export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/search-results-error/search-results-error.component'
+export * from './lib/thumbnail/thumbnail.component'
+export * from './lib/ui-elements.module'
 export * from './lib/user-preview/user-preview.component'
-export * from './lib/max-lines/max-lines.component'
-export * from './lib/record-api-form/record-api-form.component'
-export * from './lib/markdown-parser/markdown-parser.component'
-export * from './lib/image-overlay-preview/image-overlay-preview.component'
+export * from './lib/notification/notification.component'

package/src/libs/ui/elements/src/lib/api-card/api-card.component.ts

@@ -26,7 +26,8 @@ export class ApiCardComponent implements OnInit, OnChanges {
 
   ngOnInit() {
     this.displayApiFormButton =
-      this.link.accessServiceProtocol === 'ogcFeatures' ? true : false
+      this.link.accessServiceProtocol === 'ogcFeatures' ||
+      this.link.accessServiceProtocol === 'wfs'
   }
 
   ngOnChanges(changes: SimpleChanges) {

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts

@@ -95,6 +95,6 @@ export class DownloadsListComponent {
   }
 
   isFromWfs(link: DatasetDistribution) {
-    return link.type === 'service' && link.accessServiceProtocol === 'wfs'
+    return link.type === 'download' && link.accessServiceProtocol === 'wfs'
   }
 }

package/src/libs/ui/elements/src/lib/image-overlay-preview/image-overlay-preview.component.html

@@ -6,7 +6,7 @@
     *ngIf="imageUrl"
     [showContent]="imageUrl !== undefined"
     data-cy="record-thumbnail"
-    class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3"
+    class="shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3"
   >
     <gn-ui-thumbnail
       class="relative h-full w-full"

package/src/libs/ui/elements/src/lib/link-card/link-card.component.html

@@ -1,25 +1,43 @@
 <a
   [href]="link.url"
   target="_blank"
-  class="flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80"
+  class="flex flex-col justify-between group grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden"
+  [ngClass]="{ 'h-40': !compact }"
+  [title]="title"
 >
-  <div class="max-h-24 overflow-hidden text-ellipsis">
-    <p
-      class="font-title font-medium text-21 text-black break-words mb-1 line-clamp-2"
-    >
-      {{ link.name }}
-    </p>
-    <p class="font-medium text-sm break-words">
-      {{ link.description }}
-    </p>
-    <p
-      *ngIf="!link.name && !link.description"
-      class="font-medium text-sm break-words truncate"
-    >
-      {{ link.url }}
-    </p>
-  </div>
-  <div>
-    <mat-icon class="material-symbols-outlined card-icon">open_in_new</mat-icon>
-  </div>
+  <ng-container *ngIf="!compact; else compactTpl">
+    <div class="max-h-24 overflow-hidden text-ellipsis">
+      <p
+        class="font-title font-medium text-21 text-black break-words mb-1 line-clamp-2"
+      >
+        {{ link.name }}
+      </p>
+      <p class="font-medium text-sm break-words">
+        {{ link.description }}
+      </p>
+      <p
+        *ngIf="!link.name && !link.description"
+        class="font-medium text-sm break-words truncate"
+      >
+        {{ link.url }}
+      </p>
+    </div>
+    <div>
+      <mat-icon class="material-symbols-outlined card-icon"
+        >open_in_new</mat-icon
+      >
+    </div>
+  </ng-container>
+  <ng-template #compactTpl>
+    <div class="flex items-center justify-between gap-4">
+      <p
+        class="overflow-hidden font-title font-medium text-21 text-black text-ellipsis whitespace-nowrap"
+      >
+        {{ link.name || link.description }}
+      </p>
+      <mat-icon class="material-symbols-outlined card-icon flex-shrink-0"
+        >open_in_new</mat-icon
+      >
+    </div>
+  </ng-template>
 </a>

package/src/libs/ui/elements/src/lib/link-card/link-card.component.ts

@@ -1,12 +1,24 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
 import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { MatIconModule } from '@angular/material/icon'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-link-card',
   templateUrl: './link-card.component.html',
   styleUrls: ['./link-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
 })
 export class LinkCardComponent {
   @Input() link: DatasetDistribution
+  @Input() compact = false
+
+  get title() {
+    if (this.link.name && this.link.description) {
+      return `${this.link.name} | ${this.link.description}`
+    }
+    return this.link.name || this.link.description || ''
+  }
 }

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

@@ -1,5 +0,0 @@
-.icon-small {
-  font-size: 16px;
-  height: 16px;
-  width: 16px;
-}

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

@@ -1,25 +1,4 @@
 <div class="h-full flex flex-col">
-  <div class="flex-none w-full flex flex-row items-center">
-    <p class="flex-none font-bold">{{ label }}</p>
-    <div class="flex-1 flex justify-end items-center">
-      <gn-ui-button
-        [extraClass]="getButtonExtraClass()"
-        (buttonClick)="togglePreview()"
-      >
-        <span class="material-symbols-outlined mr-1 icon-small">{{
-          preview ? 'visibility' : 'visibility_off'
-        }}</span>
-        {{ preview ? 'WYSIWYG' : 'Markdown' }}
-      </gn-ui-button>
-      <span
-        class="material-symbols-outlined m-2 icon-small"
-        [matTooltip]="tooltip"
-        matTooltipPosition="above"
-      >
-        help
-      </span>
-    </div>
-  </div>
   <p class="flex-none mb-2 font-medium text-sm text-gray-900">
     {{ helperText }}
   </p>

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

@@ -31,26 +31,13 @@ import { MatTooltipModule } from '@angular/material/tooltip'
   ],
 })
 export class MarkdownEditorComponent {
-  @Input() label: string
-  @Input() tooltip?: string
+  @Input() preview = false
   @Input() helperText?: string
   @Input() placeholder: string
   @Input() textContent: string
   @Output() textContentChanged: EventEmitter<string> =
     new EventEmitter<string>()
 
-  preview = false
-
-  getButtonExtraClass() {
-    return `${
-      this.preview ? 'text-gray-200 bg-gray-900' : 'text-gray-900 bg-gray-200'
-    } rounded-[1.25rem] p-[0.375rem] text-xs font-medium w-24`
-  }
-
-  togglePreview() {
-    this.preview = !this.preview
-  }
-
   textContentChangedHandler(textContent: string) {
     this.textContent = textContent
     this.textContentChanged.emit(this.textContent)

package/src/libs/ui/elements/src/lib/notification/notification.component.html

@@ -0,0 +1,52 @@
+<div
+  class="p-[16px] flex flex-row gap-[16px] items-start border border-gray-200 shadow-md rounded bg-background"
+>
+  <div
+    role="alert"
+    class="rounded-full text-white p-[6px] w-[32px] h-[32px] flex shrink-0"
+    [ngClass]="{
+      'bg-red-500': type === 'error',
+      'bg-yellow-500': type === 'warning',
+      'bg-green-500': type === 'success',
+      'bg-blue-500': type === 'info'
+    }"
+    [ngSwitch]="type"
+  >
+    <mat-icon class="material-symbols-outlined !w-[18px] !h-[18px] text-[20px]">
+      <ng-container *ngSwitchCase="'success'">check_circle</ng-container>
+      <ng-container *ngSwitchCase="'info'">info</ng-container>
+      <ng-container *ngSwitchCase="'warning'">warning</ng-container>
+      <ng-container *ngSwitchCase="'error'">error</ng-container>
+    </mat-icon>
+  </div>
+  <div
+    class="flex flex-col items-start gap-[4px] pt-[3px] grow shrink overflow-hidden"
+  >
+    <div class="font-bold text-[16px] text-gray-900">
+      {{ title }}
+    </div>
+    <div class="text-[14px] text-gray-800">
+      {{ text }}
+    </div>
+    <a
+      href
+      *ngIf="closeMessage"
+      class="text-[14px] gn-ui-link"
+      (click)="handleClose($event)"
+    >
+      {{ closeMessage }}
+    </a>
+  </div>
+  <gn-ui-button
+    type="light"
+    class="shrink-0"
+    (buttonClick)="handleClose()"
+    [style.--gn-ui-button-padding]="0"
+    [style.--gn-ui-button-width]="'21px'"
+    [style.--gn-ui-button-height]="'21px'"
+  >
+    <mat-icon class="material-symbols-outlined text-[22px] !w-[21px] !h-[21px]"
+      >close</mat-icon
+    >
+  </gn-ui-button>
+</div>

package/src/libs/ui/elements/src/lib/notification/notification.component.ts

@@ -0,0 +1,31 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-notification',
+  standalone: true,
+  imports: [CommonModule, MatIconModule, ButtonComponent],
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotificationComponent {
+  @Input() type: 'info' | 'warning' | 'error' | 'success' = 'info'
+  @Input() title: string
+  @Input() text: string
+  @Input() closeMessage?: string
+  @Output() notificationClose = new EventEmitter<void>()
+
+  handleClose(event?: Event) {
+    event?.preventDefault()
+    this.notificationClose.emit()
+  }
+}

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

@@ -13,7 +13,7 @@
         </p>
       </button>
     </div>
-    <div class="flex flex-row flex-wrap justify-between flex-grow gap-5">
+    <div class="flex flex-row flex-wrap justify-between grow gap-5">
       <div class="flex flex-col gap-3">
         <p class="text-[14px]" translate>record.metadata.api.form.limit</p>
         <div class="flex flex-row items-center gap-2">
@@ -37,15 +37,31 @@
           </div>
         </div>
       </div>
-      <div class="flex flex-col gap-3">
-        <p class="text-sm" translate>record.metadata.api.form.offset</p>
-        <gn-ui-text-input
-          class="w-20"
-          [value]="offset$ | async"
-          (valueChange)="setOffset($event)"
-          hint=""
-        >
-        </gn-ui-text-input>
+      <div class="flex flex-col gap-3 relative">
+        <p class="text-sm" [class.text-gray-600]="!supportOffset" translate>
+          record.metadata.api.form.offset
+        </p>
+        <div class="flex items-center">
+          <gn-ui-text-input
+            class="w-20"
+            [value]="offset$ | async"
+            [disabled]="!supportOffset"
+            (valueChange)="supportOffset ? setOffset($event) : null"
+            hint=""
+          >
+          </gn-ui-text-input>
+          <div
+            *ngIf="!supportOffset"
+            class="flex items-center gap-2 text-orange-500 z-10 ml-3"
+          >
+            <span
+              class="material-symbols-outlined"
+              matTooltip="Not supported on this service"
+            >
+              warning
+            </span>
+          </div>
+        </div>
       </div>
       <div class="flex flex-col gap-3">
         <p class="text-sm" translate>record.metadata.api.form.type</p>
@@ -55,7 +71,7 @@
           extraBtnClass="secondary min-w-full !w-40 !text-black"
           [showTitle]="false"
           class="text-black"
-          [choices]="formatsList"
+          [choices]="outputFormats"
           (selectValue)="setFormat($event)"
           [selected]="format$ | async"
         ></gn-ui-dropdown-selector>

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

@@ -1,6 +1,11 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { DatasetServiceDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
-import { BehaviorSubject, combineLatest, map } from 'rxjs'
+import { OgcApiEndpoint, WfsEndpoint } from '@camptocamp/ogc-client'
+import {
+  DatasetServiceDistribution,
+  ServiceProtocol,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { mimeTypeToFormat } from '../../../../../../libs/util/shared/src'
+import { BehaviorSubject, combineLatest, map, switchMap } from 'rxjs'
 
 const DEFAULT_PARAMS = {
   OFFSET: '',
@@ -15,19 +20,27 @@ const DEFAULT_PARAMS = {
 })
 export class RecordApiFormComponent {
   @Input() set apiLink(value: DatasetServiceDistribution) {
-    this.apiBaseUrl = value ? value.url.href : undefined
+    this.outputFormats = [{ value: 'json', label: 'JSON' }]
+    this.accessServiceProtocol = value ? value.accessServiceProtocol : undefined
+    this.apiFeatureType = value ? value.name : undefined
+    if (value) {
+      this.apiBaseUrl = value.url.href
+      this.parseOutputFormats()
+    }
     this.resetUrl()
   }
+
   offset$ = new BehaviorSubject('')
   limit$ = new BehaviorSubject('')
   format$ = new BehaviorSubject('')
   apiBaseUrl: string
-  formatsList = [
-    { label: 'JSON', value: 'json' },
-    { label: 'CSV', value: 'csv' },
-  ]
+  apiFeatureType: string
+  supportOffset = true
+  accessServiceProtocol: ServiceProtocol | undefined
+  outputFormats = [{ value: 'json', label: 'JSON' }]
+
   apiQueryUrl$ = combineLatest([this.offset$, this.limit$, this.format$]).pipe(
-    map(([offset, limit, format]) => {
+    switchMap(async ([offset, limit, format]) => {
       let outputUrl
       if (this.apiBaseUrl) {
         const url = new URL(this.apiBaseUrl)
@@ -41,6 +54,20 @@ export class RecordApiFormComponent {
         }
         outputUrl = url.toString()
       }
+
+      if (this.accessServiceProtocol === 'wfs') {
+        const wfsEndpoint = new WfsEndpoint(this.apiBaseUrl)
+        if (await wfsEndpoint.isReady()) {
+          const options = {
+            outputFormat: format,
+            startIndex: Number(offset),
+          }
+          if (limit !== '-1') {
+            options['maxFeatures'] = Number(limit)
+          }
+          outputUrl = wfsEndpoint.getFeatureUrl(this.apiFeatureType, options)
+        }
+      }
       return outputUrl
     })
   )
@@ -70,4 +97,56 @@ export class RecordApiFormComponent {
     this.limit$.next(DEFAULT_PARAMS.LIMIT)
     this.format$.next(DEFAULT_PARAMS.FORMAT)
   }
+
+  parseOutputFormats() {
+    const apiUrl =
+      this.apiBaseUrl.slice(-1) === '?'
+        ? this.apiBaseUrl.slice(0, -1)
+        : this.apiBaseUrl
+
+    this.getOutputFormats(apiUrl, this.accessServiceProtocol).then(
+      (outputFormats) => {
+        let formatsList = []
+        if ('itemFormats' in outputFormats) {
+          formatsList = this.mapFormats(outputFormats.itemFormats)
+        } else if ('outputFormats' in outputFormats) {
+          formatsList = this.mapFormats(outputFormats.outputFormats)
+        }
+        this.outputFormats = this.outputFormats.concat(
+          formatsList.filter(Boolean)
+        )
+        this.outputFormats = this.outputFormats
+          .filter(
+            (format, index, self) =>
+              index === self.findIndex((t) => t.value === format.value)
+          )
+          .sort((a, b) => a.label.localeCompare(b.label))
+      }
+    )
+  }
+
+  mapFormats(formats: any[]) {
+    return formats.map((format) => {
+      const normalizedFormat = mimeTypeToFormat(format)
+      if (normalizedFormat) {
+        return {
+          label: normalizedFormat.toUpperCase(),
+          value: normalizedFormat,
+        }
+      }
+      return null
+    })
+  }
+
+  async getOutputFormats(url: string, accessServiceProtocol: string) {
+    if (accessServiceProtocol === 'wfs') {
+      const endpoint = await new WfsEndpoint(url).isReady()
+      this.supportOffset = endpoint.supportsStartIndex()
+      return endpoint.getServiceInfo()
+    } else {
+      const endpoint = await new OgcApiEndpoint(url)
+      const firstCollection = (await endpoint.featureCollections)[0]
+      return endpoint.getCollectionInfo(firstCollection)
+    }
+  }
 }

package/src/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
@@ -18,20 +19,21 @@ export const THUMBNAIL_PLACEHOLDER = new InjectionToken<string>(
   'thumbnail-placeholder'
 )
 
+type FitOptions = 'cover' | 'contain' | 'scale-down'
 type ThumbnailImageObject = {
   url: string
-  fit?: 'cover' | 'contain' | 'scale-down'
+  fit?: FitOptions
 }
 
 const DEFAULT_PLACEHOLDER =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH5gkNDCUFYjA1nwAAA1pJREFUeNrtnW2TmjAURh8CLlTdrmun///3tZ22+zLuYlehH7jsMGogwRiiec4MM44K6D3x3hAwAIQQQgghhJDYSM5cPwNQAMgBpACUg22GTg2gArAD8A9AKY+9CsgALAF8YRsGALwDeAWw9yGgALCKoKWP+WU8iwxjUsudLBj83sZciIiPSwhoWz7pJ5dUZFQXlEXOZ/DNeTBt3JnhBpc9aacGsOn0BuoIUk3b+5trGnEC4B7Ak4sUlInRU+wB/JbgVxG18KrTBc01EmYmcTFJQUVPy/9zTh/4BthLDOqeenB2DdBtZBN58LsSNpcUoEtTJWM/GIvMhQDde9j6h2OhXAjo6/2Q/lgkLgSQC0IBFEABZEKyiaQv5AAv7fSlS+lPVxRwOXTnEtoTPAs04yfRHGMoz8F/HOiaJfKeggLc78dmOHsVS33y9SUXsDuLlsg6FOAw/fhYhwI0pJ7WoQASpoC9p3UoQEPpaR0K0LCB3fB1e6KfAhxRweAKgQ5PsQxJ+CzCJYC/A7+EWt4TzVCE77GgEsBPHA/G7QBswcE4b+noVRZ2QxkCCqAAQgEUQCiAAggFUAChAAogFEABhAJcfT9FAdOxQuB/ML9lAfdo/qWYy2MK8EiO5mrrliUCvdIudAEzWWzQzWuxwjRnAK9WwAzAWhZTCe3l7cryNQrQBL/txZhKGGrlwc36ogIPfvdzfhuQsDDM80EVZXUFwe+mEJ2EOwBfLfYTTFFWVxL8Qwl3nedSye1jjhEyCjAPflfCWiScU1iDKMrqyoJ/KOFxRDf1sCg/xCxgTPC7EnIHn6GYsiirKw2+ayYryorBn7YoKwb/qCgntywg1OBPdqSsGPyTRXnp07gvPgD8AAl6KIICCAVQAAlLwOg5MSNi9NyqJgKqAHpQoZNZxs5KgG7SDN7AZzgWOxcCtprn5/wVfLb+uWXsrASUPXlvHbmETGKQjBVgMitVJTuaaQS2t/GoEMeE3onEor2jlK4RvwN4G1u9T4n6zp6PMTWAXzCYdCq12OCOhdeYZzT3mIErAW1Fr+HmNOAt82KSesYIAJoRzR2aIVumo+Ms8WwT/HOOZlM0Y+Zzxv2zp/gCTzfzPOyGtdfgp7LEcDvbvSxbWXg/HUIIIYQQQogx/wHLoX7NoCMFPwAAAABJRU5ErkJggg=='
 
-type FitOptions = 'cover' | 'contain' | 'scale-down'
-
 @Component({
   selector: 'gn-ui-thumbnail',
   templateUrl: './thumbnail.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
 })
 export class ThumbnailComponent implements OnInit, OnChanges {
   @Input() thumbnailUrl: string | string[]

package/src/libs/ui/elements/src/lib/ui-elements.module.ts

@@ -31,6 +31,8 @@ import { MaxLinesComponent } from './max-lines/max-lines.component'
 import { RecordApiFormComponent } from './record-api-form/record-api-form.component'
 import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
 import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-overlay-preview.component'
+import { UserFeedbackItemComponent } from './user-feedback-item/user-feedback-item.component'
+import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
 
 @NgModule({
   imports: [
@@ -46,6 +48,8 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     FormsModule,
     NgOptimizedImage,
     MarkdownParserComponent,
+    ThumbnailComponent,
+    TimeSincePipe,
   ],
   declarations: [
     MetadataInfoComponent,
@@ -53,7 +57,6 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     DownloadItemComponent,
     DownloadsListComponent,
     ApiCardComponent,
-    LinkCardComponent,
     RelatedRecordCardComponent,
     MetadataContactComponent,
     MetadataCatalogComponent,
@@ -61,13 +64,13 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     MetadataQualityItemComponent,
     SearchResultsErrorComponent,
     PaginationComponent,
-    ThumbnailComponent,
     AvatarComponent,
     UserPreviewComponent,
     GnUiLinkifyDirective,
     PaginationButtonsComponent,
     MaxLinesComponent,
     RecordApiFormComponent,
+    UserFeedbackItemComponent,
     ImageOverlayPreviewComponent,
   ],
   exports: [
@@ -76,7 +79,6 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     DownloadItemComponent,
     DownloadsListComponent,
     ApiCardComponent,
-    LinkCardComponent,
     RelatedRecordCardComponent,
     MetadataContactComponent,
     MetadataCatalogComponent,
@@ -91,6 +93,7 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     MaxLinesComponent,
     RecordApiFormComponent,
     MarkdownParserComponent,
+    UserFeedbackItemComponent,
     ImageOverlayPreviewComponent,
   ],
 })

package/src/libs/ui/elements/src/lib/user-feedback-item/time-since.pipe.ts

@@ -0,0 +1,54 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { TranslateService } from '@ngx-translate/core'
+import { formatDistance } from 'date-fns'
+import { de, enUS, es, fr, it, nl, pt, sk } from 'date-fns/locale'
+
+@Pipe({
+  name: 'timeSince',
+  standalone: true,
+})
+export class TimeSincePipe implements PipeTransform {
+  constructor(private translate: TranslateService) {}
+
+  transform(value: Date): string {
+    if (isNaN(value.getTime())) {
+      throw new Error('Invalid Date')
+    }
+
+    const maintenant = new Date()
+    let locale: Locale
+
+    switch (this.translate.currentLang) {
+      case 'fr':
+        locale = fr
+        break
+      case 'de':
+        locale = de
+        break
+      case 'es':
+        locale = es
+        break
+      case 'it':
+        locale = it
+        break
+      case 'nl':
+        locale = nl
+        break
+      case 'pt':
+        locale = pt
+        break
+      case 'sk':
+        locale = sk
+        break
+      case 'en':
+      default:
+        locale = enUS
+        break
+    }
+
+    return formatDistance(value, maintenant, {
+      addSuffix: true,
+      locale: locale,
+    })
+  }
+}