geonetwork-ui 2.3.0-dev.6083baae → 2.3.0-dev.61774f7d

package/fesm2022/geonetwork-ui.mjs

@@ -1,7 +1,7 @@
 import { parseXml, XmlDocument, XmlElement, XmlText } from '@rgrove/parse-xml';
 import format from 'date-fns/format';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostListener, EventEmitter, Output, ElementRef, ViewChildren, ViewContainerRef, HostBinding, ContentChild, ContentChildren, TemplateRef, Host, inject } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostListener, EventEmitter, Output, ElementRef, ViewChildren, ViewContainerRef, HostBinding, ContentChild, ContentChildren, TemplateRef, Host, Pipe, inject } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpClient, HttpClientModule, HTTP_INTERCEPTORS, HttpClientXsrfModule } from '@angular/common/http';
 import * as i1$1 from '@ngx-translate/core';
@@ -12,7 +12,7 @@ import { map as map$1, shareReplay, filter, tap as tap$1, startWith, withLatestF
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import * as i1$3 from '@angular/common';
 import { CommonModule, NgOptimizedImage, NgForOf } from '@angular/common';
-import { of, map as map$2, lastValueFrom, switchMap, combineLatest, takeLast, forkJoin, Subject, merge, throwError, BehaviorSubject, firstValueFrom, fromEvent, timer, Subscription, ReplaySubject, distinctUntilChanged as distinctUntilChanged$1, debounceTime as debounceTime$1, animationFrameScheduler, from, tap as tap$2, Observable, buffer, combineLatestWith, catchError as catchError$1, takeUntil, EMPTY, withLatestFrom as withLatestFrom$1, filter as filter$1, startWith as startWith$1, pairwise as pairwise$1 } from 'rxjs';
+import { of, map as map$2, lastValueFrom, switchMap, combineLatest, takeLast, forkJoin, firstValueFrom, Subject, merge, throwError, BehaviorSubject, fromEvent, timer, Subscription, ReplaySubject, distinctUntilChanged as distinctUntilChanged$1, debounceTime as debounceTime$1, animationFrameScheduler, from, tap as tap$2, Observable, buffer, combineLatestWith, catchError as catchError$1, takeUntil, exhaustMap, mergeMap as mergeMap$1, EMPTY, withLatestFrom as withLatestFrom$1, filter as filter$1, startWith as startWith$1, pairwise as pairwise$1 } from 'rxjs';
 import { valid, coerce, satisfies, ltr } from 'semver';
 import * as i1$2 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, select, StoreModule, Store } from '@ngrx/store';
@@ -73,6 +73,8 @@ import Duration from 'duration-relativetimeformat';
 import * as basicLightbox from 'basiclightbox';
 import { marked } from 'marked';
 import EmblaCarousel from 'embla-carousel';
+import { formatDistance } from 'date-fns';
+import { enUS, sk, pt as pt$1, nl as nl$1, it as it$1, es as es$1, de as de$1, fr as fr$1 } from 'date-fns/locale';
 import * as i1$8 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule, Actions } from '@ngrx/effects';
 import tippy from 'tippy.js';
@@ -17271,6 +17273,7 @@ var next$6 = "weiter";
 var previous$6 = "zurück";
 var records$6 = "Datensätze";
 var de = {
+	"button.login": "",
 	"catalog.figures.datasets": "{count, plural, =0{Datensätze} one{Datensatz} other{Datensätze}}",
 	"catalog.figures.organisations": "{count, plural, =0{Organisationen} one{Organisation} other{Organisationen}}",
 	"chart.aggregation.average": "Durchschnitt",
@@ -17550,6 +17553,14 @@ var de = {
 	"record.metadata.quality.updateFrequency.failed": "Aktualisierungsfrequenz nicht angegeben",
 	"record.metadata.quality.updateFrequency.success": "Aktualisierungsfrequenz angegeben",
 	"record.metadata.related": "Ähnliche Datensätze",
+	"record.metadata.userFeedbacks": "",
+	"record.metadata.userFeedbacks.anonymousUser": "",
+	"record.metadata.userFeedbacks.sortSelector.label": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "",
+	"record.metadata.userFeedbacks.newComment.placeholder": "",
+	"record.metadata.userFeedbacks.newAnswer.placeholder": "",
+	"record.metadata.userFeedbacks.newAnswer.buttonTitle": "",
 	"record.metadata.sheet": "Weitere Informationen verfügbar unter:",
 	"record.metadata.status": "Status",
 	"record.metadata.technical": "Technische Informationen",
@@ -17623,6 +17634,12 @@ var de = {
 	"table.loading.data": "Daten werden geladen...",
 	"table.object.count": "Objekte in diesem Datensatz",
 	"table.select.data": "Datenquelle",
+	"timeSincePipe.lessThanAMinute": "",
+	"timeSincePipe.minutesAgo": "",
+	"timeSincePipe.hoursAgo": "",
+	"timeSincePipe.daysAgo": "",
+	"timeSincePipe.monthsAgo": "",
+	"timeSincePipe.yearsAgo": "",
 	"tooltip.html.copy": "HTML kopieren",
 	"tooltip.id.copy": "Eindeutige Kennung kopieren",
 	"tooltip.url.copy": "URL kopieren",
@@ -17641,6 +17658,7 @@ var next$5 = "next";
 var previous$5 = "previous";
 var records$5 = "records";
 var en = {
+	"button.login": "Log in",
 	"catalog.figures.datasets": "{count, plural, =0{datasets} one{dataset} other{datasets}}",
 	"catalog.figures.organisations": "{count, plural, =0{organisations} one{organisation} other{organisations}}",
 	"chart.aggregation.average": "average",
@@ -17920,6 +17938,14 @@ var en = {
 	"record.metadata.quality.updateFrequency.failed": "Update frequency is not specified",
 	"record.metadata.quality.updateFrequency.success": "Update frequency is specified",
 	"record.metadata.related": "Related records",
+	"record.metadata.userFeedbacks": "Questions / Answers",
+	"record.metadata.userFeedbacks.anonymousUser": "In order to leave a comment, please log in.",
+	"record.metadata.userFeedbacks.sortSelector.label": "Sort by ...",
+	"record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "Newest comments first",
+	"record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "Oldest comments first",
+	"record.metadata.userFeedbacks.newComment.placeholder": "Write your comment here...",
+	"record.metadata.userFeedbacks.newAnswer.placeholder": "Answer...",
+	"record.metadata.userFeedbacks.newAnswer.buttonTitle": "Publish",
 	"record.metadata.sheet": "Original metadata",
 	"record.metadata.status": "Status",
 	"record.metadata.technical": "Technical information",
@@ -17993,6 +18019,12 @@ var en = {
 	"table.loading.data": "Loading data...",
 	"table.object.count": "objects in this dataset",
 	"table.select.data": "Data source",
+	"timeSincePipe.lessThanAMinute": "Less than a minute ago",
+	"timeSincePipe.minutesAgo": "{value} minute{s} ago",
+	"timeSincePipe.hoursAgo": "{value} hour{s} ago",
+	"timeSincePipe.daysAgo": "{value} day{s} ago",
+	"timeSincePipe.monthsAgo": "{value} month{s} ago",
+	"timeSincePipe.yearsAgo": "{value} year{s} ago",
 	"tooltip.html.copy": "Copy HTML",
 	"tooltip.id.copy": "Copy unique identifier",
 	"tooltip.url.copy": "Copy URL",
@@ -18011,6 +18043,7 @@ var next$4 = "";
 var previous$4 = "";
 var records$4 = "";
 var es = {
+	"button.login": "",
 	"catalog.figures.datasets": "conjuntos de datos",
 	"catalog.figures.organisations": "organizaciones",
 	"chart.aggregation.average": "promedio",
@@ -18290,6 +18323,14 @@ var es = {
 	"record.metadata.quality.updateFrequency.failed": "",
 	"record.metadata.quality.updateFrequency.success": "",
 	"record.metadata.related": "",
+	"record.metadata.userFeedbacks": "",
+	"record.metadata.userFeedbacks.anonymousUser": "",
+	"record.metadata.userFeedbacks.sortSelector.label": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "",
+	"record.metadata.userFeedbacks.newComment.placeholder": "",
+	"record.metadata.userFeedbacks.newAnswer.placeholder": "",
+	"record.metadata.userFeedbacks.newAnswer.buttonTitle": "",
 	"record.metadata.sheet": "",
 	"record.metadata.status": "",
 	"record.metadata.technical": "",
@@ -18363,6 +18404,12 @@ var es = {
 	"table.loading.data": "",
 	"table.object.count": "",
 	"table.select.data": "",
+	"timeSincePipe.lessThanAMinute": "",
+	"timeSincePipe.minutesAgo": "",
+	"timeSincePipe.hoursAgo": "",
+	"timeSincePipe.daysAgo": "",
+	"timeSincePipe.monthsAgo": "",
+	"timeSincePipe.yearsAgo": "",
 	"tooltip.html.copy": "",
 	"tooltip.id.copy": "",
 	"tooltip.url.copy": "",
@@ -18381,6 +18428,7 @@ var next$3 = "suivant";
 var previous$3 = "précédent";
 var records$3 = "enregistrements";
 var fr = {
+	"button.login": "Se connecter",
 	"catalog.figures.datasets": "{count, plural, =0{données} one{donnée} other{données}}",
 	"catalog.figures.organisations": "{count, plural, =0{organisations} one{organisation} other{organisations}}",
 	"chart.aggregation.average": "moyenne",
@@ -18660,6 +18708,14 @@ var fr = {
 	"record.metadata.quality.updateFrequency.failed": "Fréquence de mise à jour n'est pas renseignée",
 	"record.metadata.quality.updateFrequency.success": "Fréquence de mise à jour est renseignée",
 	"record.metadata.related": "Voir aussi",
+	"record.metadata.userFeedbacks": "Questions / Réponses",
+	"record.metadata.userFeedbacks.anonymousUser": "Pour rédiger un commentaire, veuillez vous identifier.",
+	"record.metadata.userFeedbacks.sortSelector.label": "Trier par ...",
+	"record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "Les plus récents en premier",
+	"record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "Les plus anciens en premier",
+	"record.metadata.userFeedbacks.newComment.placeholder": "Rédiger votre commentaire ici...",
+	"record.metadata.userFeedbacks.newAnswer.placeholder": "Répondre...",
+	"record.metadata.userFeedbacks.newAnswer.buttonTitle": "Publier",
 	"record.metadata.sheet": "Fiche de métadonnées d'origine",
 	"record.metadata.status": "Statut",
 	"record.metadata.technical": "Informations techniques",
@@ -18733,6 +18789,12 @@ var fr = {
 	"table.loading.data": "Chargement des données...",
 	"table.object.count": "enregistrements dans ces données",
 	"table.select.data": "Source de données",
+	"timeSincePipe.lessThanAMinute": "Il y a moins d'une minute",
+	"timeSincePipe.minutesAgo": "Il y a {value} minute{s}",
+	"timeSincePipe.hoursAgo": "Il y a {value} heure{s}",
+	"timeSincePipe.daysAgo": "Il y a {value} jour{s}",
+	"timeSincePipe.monthsAgo": "Il y a {value} mois",
+	"timeSincePipe.yearsAgo": "Il y a {value} an{s}",
 	"tooltip.html.copy": "Copier le HTML",
 	"tooltip.id.copy": "Copier l'identifiant unique",
 	"tooltip.url.copy": "Copier l'URL",
@@ -18751,6 +18813,7 @@ var next$2 = "successivo";
 var previous$2 = "precedente";
 var records$2 = "record";
 var it = {
+	"button.login": "",
 	"catalog.figures.datasets": "{count, plural, =0{datasets} one{dataset} other{datasets}}",
 	"catalog.figures.organisations": "{count, plural, =0{organizzazioni} one{organizzazione} other{organizzazioni}}",
 	"chart.aggregation.average": "media",
@@ -19030,6 +19093,14 @@ var it = {
 	"record.metadata.quality.updateFrequency.failed": "La frequenza di aggiornamento non è specificata",
 	"record.metadata.quality.updateFrequency.success": "La frequenza di aggiornamento è specificata",
 	"record.metadata.related": "Vedi anche",
+	"record.metadata.userFeedbacks": "",
+	"record.metadata.userFeedbacks.anonymousUser": "",
+	"record.metadata.userFeedbacks.sortSelector.label": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "",
+	"record.metadata.userFeedbacks.newComment.placeholder": "",
+	"record.metadata.userFeedbacks.newAnswer.placeholder": "",
+	"record.metadata.userFeedbacks.newAnswer.buttonTitle": "",
 	"record.metadata.sheet": "Origine del metadata",
 	"record.metadata.status": "Stato",
 	"record.metadata.technical": "Informazioni tecniche",
@@ -19103,6 +19174,12 @@ var it = {
 	"table.loading.data": "Caricamento dei dati...",
 	"table.object.count": "record in questi dati",
 	"table.select.data": "Sorgente dati",
+	"timeSincePipe.lessThanAMinute": "",
+	"timeSincePipe.minutesAgo": "",
+	"timeSincePipe.hoursAgo": "",
+	"timeSincePipe.daysAgo": "",
+	"timeSincePipe.monthsAgo": "",
+	"timeSincePipe.yearsAgo": "",
 	"tooltip.html.copy": "Copiare il HTML",
 	"tooltip.id.copy": "Copiare l'identificatore unico",
 	"tooltip.url.copy": "Copiare l'URL",
@@ -19121,6 +19198,7 @@ var next$1 = "";
 var previous$1 = "";
 var records$1 = "";
 var nl = {
+	"button.login": "",
 	"catalog.figures.datasets": "datasets",
 	"catalog.figures.organisations": "organisaties",
 	"chart.aggregation.average": "gemiddelde",
@@ -19400,6 +19478,14 @@ var nl = {
 	"record.metadata.quality.updateFrequency.failed": "",
 	"record.metadata.quality.updateFrequency.success": "",
 	"record.metadata.related": "",
+	"record.metadata.userFeedbacks": "",
+	"record.metadata.userFeedbacks.anonymousUser": "",
+	"record.metadata.userFeedbacks.sortSelector.label": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "",
+	"record.metadata.userFeedbacks.newComment.placeholder": "",
+	"record.metadata.userFeedbacks.newAnswer.placeholder": "",
+	"record.metadata.userFeedbacks.newAnswer.buttonTitle": "",
 	"record.metadata.sheet": "",
 	"record.metadata.status": "",
 	"record.metadata.technical": "",
@@ -19473,6 +19559,12 @@ var nl = {
 	"table.loading.data": "",
 	"table.object.count": "",
 	"table.select.data": "",
+	"timeSincePipe.lessThanAMinute": "",
+	"timeSincePipe.minutesAgo": "",
+	"timeSincePipe.hoursAgo": "",
+	"timeSincePipe.daysAgo": "",
+	"timeSincePipe.monthsAgo": "",
+	"timeSincePipe.yearsAgo": "",
 	"tooltip.html.copy": "",
 	"tooltip.id.copy": "",
 	"tooltip.url.copy": "",
@@ -19491,6 +19583,7 @@ var next = "";
 var previous = "";
 var records = "";
 var pt = {
+	"button.login": "",
 	"catalog.figures.datasets": "conjuntos de dados",
 	"catalog.figures.organisations": "organizações",
 	"chart.aggregation.average": "média",
@@ -19770,6 +19863,14 @@ var pt = {
 	"record.metadata.quality.updateFrequency.failed": "",
 	"record.metadata.quality.updateFrequency.success": "",
 	"record.metadata.related": "",
+	"record.metadata.userFeedbacks": "",
+	"record.metadata.userFeedbacks.anonymousUser": "",
+	"record.metadata.userFeedbacks.sortSelector.label": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "",
+	"record.metadata.userFeedbacks.newComment.placeholder": "",
+	"record.metadata.userFeedbacks.newAnswer.placeholder": "",
+	"record.metadata.userFeedbacks.newAnswer.buttonTitle": "",
 	"record.metadata.sheet": "",
 	"record.metadata.status": "",
 	"record.metadata.technical": "",
@@ -19843,6 +19944,12 @@ var pt = {
 	"table.loading.data": "",
 	"table.object.count": "",
 	"table.select.data": "",
+	"timeSincePipe.lessThanAMinute": "",
+	"timeSincePipe.minutesAgo": "",
+	"timeSincePipe.hoursAgo": "",
+	"timeSincePipe.daysAgo": "",
+	"timeSincePipe.monthsAgo": "",
+	"timeSincePipe.yearsAgo": "",
 	"tooltip.html.copy": "",
 	"tooltip.id.copy": "",
 	"tooltip.url.copy": "",
@@ -19937,11 +20044,11 @@ class Gn4FieldMapper {
             }),
             creationDateForResource: (output, source) => ({
                 ...output,
-                datasetCreated: toDate(getFirstValue(selectField(source, 'creationDateForResource'))),
+                resourceCreated: toDate(getFirstValue(selectField(source, 'creationDateForResource'))),
             }),
             revisionDateForResource: (output, source) => ({
                 ...output,
-                datasetUpdated: toDate(getFirstValue(selectField(source, 'revisionDateForResource'))),
+                resourceUpdated: toDate(getFirstValue(selectField(source, 'revisionDateForResource'))),
             }),
             createDate: (output, source) => ({
                 ...output,
@@ -21166,6 +21273,16 @@ class GravatarService {
     getProfileIcon(hash) {
         return this.identicon$.pipe(map$1((identicon) => identicon || this.GRAVATAR_IDENTICON), map$1((identicon) => `${this.GRAVATAR_URL}${hash}?d=${identicon}`));
     }
+    async getProfileIconUrl(userId) {
+        let iconUrl = '';
+        try {
+            iconUrl = await firstValueFrom(this.getProfileIcon(userId));
+        }
+        catch (error) {
+            return '';
+        }
+        return iconUrl;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GravatarService, deps: [{ token: Gn4SettingsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GravatarService, providedIn: 'root' }); }
 }
@@ -21317,6 +21434,39 @@ class Gn4PlatformMapper {
             };
         });
     }
+    userFeedbacksFromApi(userFeedback) {
+        return {
+            uuid: userFeedback.uuid,
+            metadataUUID: userFeedback.metadataUUID,
+            comment: userFeedback.comment,
+            authorUserId: userFeedback.authorUserId.toString(),
+            authorName: userFeedback.authorName,
+            authorEmail: userFeedback.authorEmail,
+            published: userFeedback.published,
+            parentUuid: userFeedback.parentUuid ?? undefined,
+            date: new Date(userFeedback.date),
+        };
+    }
+    userFeedbacksToApi(userFeedback) {
+        return {
+            uuid: userFeedback.uuid,
+            metadataUUID: userFeedback.metadataUUID,
+            comment: userFeedback.comment,
+            authorUserId: Number.parseInt(userFeedback.authorUserId),
+            authorName: userFeedback.authorName,
+            authorEmail: userFeedback.authorEmail,
+            published: userFeedback.published,
+            parentUuid: userFeedback.parentUuid,
+            date: userFeedback.date.getTime().toString(),
+        };
+    }
+    async createUserFeedbackViewModel(baseUserFeedback) {
+        const userAvatarUrl = await this.avatarService.getProfileIconUrl(baseUserFeedback.authorUserId?.toString());
+        return {
+            ...baseUserFeedback,
+            avatarUrl: userAvatarUrl,
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformMapper, deps: [{ token: AvatarServiceInterface }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformMapper }); }
 }
@@ -21326,7 +21476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 const minApiVersion = '4.2.2';
 class Gn4PlatformService {
-    constructor(siteApiService, meApi, usersApi, mapper, toolsApiService, registriesApiService, langService) {
+    constructor(siteApiService, meApi, usersApi, mapper, toolsApiService, registriesApiService, langService, userfeedbackApiService) {
         this.siteApiService = siteApiService;
         this.meApi = meApi;
         this.usersApi = usersApi;
@@ -21334,6 +21484,7 @@ class Gn4PlatformService {
         this.toolsApiService = toolsApiService;
         this.registriesApiService = registriesApiService;
         this.langService = langService;
+        this.userfeedbackApiService = userfeedbackApiService;
         this.type = 'GeoNetwork';
         this.keyTranslations$ = this.toolsApiService
             .getTranslationsPackage1('gnui')
@@ -21353,7 +21504,7 @@ class Gn4PlatformService {
          */
         this.thesauri = {};
         this.me$ = this.meApi.getMe().pipe(switchMap((apiUser) => this.mapper.userFromMeApi(apiUser)), shareReplay({ bufferSize: 1, refCount: true }));
-        this.isAnonymous$ = this.me$.pipe(map$1((user) => !user || !('id' in user)));
+        this.isUserAnonymous$ = this.me$.pipe(map$1((user) => !user || !('id' in user)));
         this.users$ = this.usersApi.getUsers().pipe(map$1((users) => users.map((user) => this.mapper.userFromApi(user))), shareReplay());
     }
     getType() {
@@ -21366,7 +21517,7 @@ class Gn4PlatformService {
         return this.me$;
     }
     isAnonymous() {
-        return this.isAnonymous$;
+        return this.isUserAnonymous$;
     }
     getOrganizations() {
         return undefined;
@@ -21402,12 +21553,23 @@ class Gn4PlatformService {
             .pipe(map$1((thesaurus) => this.mapper.thesaurusFromApi(thesaurus, this.langService.iso3)), shareReplay(1));
         return this.thesauri[uri];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformService, deps: [{ token: SiteApiService }, { token: MeApiService }, { token: UsersApiService }, { token: Gn4PlatformMapper }, { token: ToolsApiService }, { token: RegistriesApiService }, { token: LangService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    getUserFeedbacks(uuid) {
+        return this.userfeedbackApiService
+            .getUserComments(uuid)
+            .pipe(map$1((userFeedbacks) => userFeedbacks.map(this.mapper.userFeedbacksFromApi)));
+    }
+    postUserFeedbacks(userFeedback) {
+        const mappedUserFeedBack = this.mapper.userFeedbacksToApi(userFeedback);
+        return this.userfeedbackApiService
+            .newUserFeedback(mappedUserFeedBack)
+            .pipe(map$1(() => undefined));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformService, deps: [{ token: SiteApiService }, { token: MeApiService }, { token: UsersApiService }, { token: Gn4PlatformMapper }, { token: ToolsApiService }, { token: RegistriesApiService }, { token: LangService }, { token: UserfeedbackApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: SiteApiService }, { type: MeApiService }, { type: UsersApiService }, { type: Gn4PlatformMapper }, { type: ToolsApiService }, { type: RegistriesApiService }, { type: LangService }]; } });
+        }], ctorParameters: function () { return [{ type: SiteApiService }, { type: MeApiService }, { type: UsersApiService }, { type: Gn4PlatformMapper }, { type: ToolsApiService }, { type: RegistriesApiService }, { type: LangService }, { type: UserfeedbackApiService }]; } });
 
 function provideGn4() {
     return [
@@ -24213,11 +24375,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 class TextInputComponent {
     constructor() {
+        this.baseClass = [
+            'appearance-none',
+            'border border-gray-300',
+            'rounded w-full',
+            'p-2',
+            'text-gray-700',
+            'leading-tight',
+            'focus:outline-none',
+            'focus:border-primary',
+        ].join(' ');
         this.value = '';
+        this.extraClass = '';
         this.required = false;
         this.rawChange = new Subject();
         this.valueChange = this.rawChange.pipe(distinctUntilChanged());
     }
+    get classList() {
+        return `${this.baseClass} ${this.extraClass}`;
+    }
     ngAfterViewInit() {
         this.checkRequired(this.input.nativeElement.value);
     }
@@ -24230,13 +24406,15 @@ class TextInputComponent {
         this.rawChange.next(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: TextInputComponent, selector: "gn-ui-text-input", inputs: { value: "value", hint: "hint", required: "required" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input\n  #input\n  class=\"appearance-none border border-gray-300 rounded w-full p-2 text-gray-700 leading-tight focus:outline-none focus:border-primary\"\n  type=\"text\"\n  [value]=\"value\"\n  (change)=\"handleChange($event)\"\n  (input)=\"handleChange($event)\"\n  [placeholder]=\"hint\"\n  [attr.aria-label]=\"hint\"\n  [attr.required]=\"required || null\"\n/>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: TextInputComponent, selector: "gn-ui-text-input", inputs: { value: "value", extraClass: "extraClass", hint: "hint", required: "required" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input\n  #input\n  [class]=\"classList\"\n  type=\"text\"\n  [value]=\"value\"\n  (change)=\"handleChange($event)\"\n  (input)=\"handleChange($event)\"\n  [placeholder]=\"hint\"\n  [attr.aria-label]=\"hint\"\n  [attr.required]=\"required || null\"\n/>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-text-input', template: "<input\n  #input\n  class=\"appearance-none border border-gray-300 rounded w-full p-2 text-gray-700 leading-tight focus:outline-none focus:border-primary\"\n  type=\"text\"\n  [value]=\"value\"\n  (change)=\"handleChange($event)\"\n  (input)=\"handleChange($event)\"\n  [placeholder]=\"hint\"\n  [attr.aria-label]=\"hint\"\n  [attr.required]=\"required || null\"\n/>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }]
+            args: [{ selector: 'gn-ui-text-input', template: "<input\n  #input\n  [class]=\"classList\"\n  type=\"text\"\n  [value]=\"value\"\n  (change)=\"handleChange($event)\"\n  (input)=\"handleChange($event)\"\n  [placeholder]=\"hint\"\n  [attr.aria-label]=\"hint\"\n  [attr.required]=\"required || null\"\n/>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
+            }], extraClass: [{
+                type: Input
             }], hint: [{
                 type: Input
             }], required: [{
@@ -24317,9 +24495,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 class TextAreaComponent {
     constructor() {
         this.value = '';
+        this.disabled = false;
+        this.extraClass = '';
         this.required = false;
         this.rawChange = new Subject();
         this.valueChange = this.rawChange.pipe(distinctUntilChanged());
+        this.baseClasses = [
+            'w-full',
+            'pt-2',
+            'pl-2',
+            'resize-none',
+            'border',
+            'border-gray-800',
+            'rounded italic',
+            'leading-tight',
+            'focus:outline-none',
+            'focus:bg-background',
+            'focus:border-primary',
+        ].join(' ');
+        this.disabledClasses = ['cursor-not-allowed'].join(' ');
+    }
+    get classList() {
+        return `${this.baseClasses} ${this.extraClass} ${this.disabled ? this.disabledClasses : ''}`;
     }
     ngAfterViewInit() {
         this.checkRequired(this.input.nativeElement.value);
@@ -24333,12 +24530,16 @@ class TextAreaComponent {
         this.rawChange.next(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: TextAreaComponent, isStandalone: true, selector: "gn-ui-text-area", inputs: { value: "value", placeholder: "placeholder", required: "required" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"h-full flex\">\n  <textarea\n    #input\n    name=\"textArea\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n    class=\"w-full pt-2 pl-2 resize-none border border-gray-800 rounded italic leading-tight focus:outline-none focus:bg-background focus:border-primary\"\n    [attr.required]=\"required || null\"\n  ></textarea>\n</div>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: TextAreaComponent, isStandalone: true, selector: "gn-ui-text-area", inputs: { value: "value", disabled: "disabled", extraClass: "extraClass", placeholder: "placeholder", required: "required" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"h-full flex\">\n  <textarea\n    #input\n    name=\"textArea\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n    [class]=\"classList\"\n    [attr.required]=\"required || null\"\n  ></textarea>\n</div>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-text-area', standalone: true, template: "<div class=\"h-full flex\">\n  <textarea\n    #input\n    name=\"textArea\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n    class=\"w-full pt-2 pl-2 resize-none border border-gray-800 rounded italic leading-tight focus:outline-none focus:bg-background focus:border-primary\"\n    [attr.required]=\"required || null\"\n  ></textarea>\n</div>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }]
-        }], propDecorators: { value: [{
+            args: [{ selector: 'gn-ui-text-area', standalone: true, template: "<div class=\"h-full flex\">\n  <textarea\n    #input\n    name=\"textArea\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n    [class]=\"classList\"\n    [attr.required]=\"required || null\"\n  ></textarea>\n</div>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], extraClass: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -25416,7 +25617,7 @@ class AddLayerFromOgcApiComponent {
         this.layerAdded.emit({ ...layerToAdd, title: layer });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromOgcApiComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromOgcApiComponent, isStandalone: true, selector: "gn-ui-add-layer-from-ogc-api", inputs: { ogcUrl: "ogcUrl" }, outputs: { layerAdded: "layerAdded" }, ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"ogcUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.ogc.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container *ngFor=\"let layer of layers\">\n    <div class=\"flex items-center justify-between my-2 layer-item-tree\">\n      <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n        {{ layer }}\n      </p>\n      <gn-ui-button\n        class=\"layer-add-btn\"\n        type=\"primary\"\n        (buttonClick)=\"addLayer(layer)\"\n        extraClass=\"text-sm !px-2 !py-1\"\n        translate\n        ><span translate> map.layer.add </span></gn-ui-button\n      >\n    </div>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromOgcApiComponent, isStandalone: true, selector: "gn-ui-add-layer-from-ogc-api", inputs: { ogcUrl: "ogcUrl" }, outputs: { layerAdded: "layerAdded" }, ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"ogcUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.ogc.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container *ngFor=\"let layer of layers\">\n    <div class=\"flex items-center justify-between my-2 layer-item-tree\">\n      <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n        {{ layer }}\n      </p>\n      <gn-ui-button\n        class=\"layer-add-btn\"\n        type=\"primary\"\n        (buttonClick)=\"addLayer(layer)\"\n        extraClass=\"text-sm !px-2 !py-1\"\n        translate\n        ><span translate> map.layer.add </span></gn-ui-button\n      >\n    </div>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "hint", "required"], outputs: ["valueChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromOgcApiComponent, decorators: [{
             type: Component,
@@ -26372,7 +26573,7 @@ class MarkdownEditorComponent {
         this.textContentChanged.emit(this.textContent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MarkdownEditorComponent, isStandalone: true, selector: "gn-ui-markdown-editor", inputs: { preview: "preview", helperText: "helperText", placeholder: "placeholder", textContent: "textContent" }, outputs: { textContentChanged: "textContentChanged" }, ngImport: i0, template: "<div class=\"h-full flex flex-col\">\n  <p class=\"flex-none mb-2 font-medium text-sm text-gray-900\">\n    {{ helperText }}\n  </p>\n  <div class=\"flex-1\" [hidden]=\"preview\">\n    <gn-ui-text-area\n      [placeholder]=\"placeholder\"\n      [value]=\"textContent\"\n      (valueChange)=\"textContentChangedHandler($event)\"\n    ></gn-ui-text-area>\n  </div>\n  <div\n    class=\"flex-1 border border-gray-800 rounded overflow-y-scroll\"\n    [hidden]=\"!preview\"\n  >\n    <gn-ui-markdown-parser [textContent]=\"textContent\"></gn-ui-markdown-parser>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MarkdownEditorComponent, isStandalone: true, selector: "gn-ui-markdown-editor", inputs: { preview: "preview", helperText: "helperText", placeholder: "placeholder", textContent: "textContent" }, outputs: { textContentChanged: "textContentChanged" }, ngImport: i0, template: "<div class=\"h-full flex flex-col\">\n  <p class=\"flex-none mb-2 font-medium text-sm text-gray-900\">\n    {{ helperText }}\n  </p>\n  <div class=\"flex-1\" [hidden]=\"preview\">\n    <gn-ui-text-area\n      [placeholder]=\"placeholder\"\n      [value]=\"textContent\"\n      (valueChange)=\"textContentChangedHandler($event)\"\n    ></gn-ui-text-area>\n  </div>\n  <div\n    class=\"flex-1 border border-gray-800 rounded overflow-y-scroll\"\n    [hidden]=\"!preview\"\n  >\n    <gn-ui-markdown-parser [textContent]=\"textContent\"></gn-ui-markdown-parser>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownEditorComponent, decorators: [{
             type: Component,
@@ -26851,7 +27052,7 @@ class RecordApiFormComponent {
         this.format$.next(DEFAULT_PARAMS.FORMAT);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordApiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordApiFormComponent, selector: "gn-ui-record-api-form", inputs: { apiLink: "apiLink" }, ngImport: i0, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.offset</p>\n        <gn-ui-text-input\n          class=\"w-20\"\n          [value]=\"offset$ | async\"\n          (valueChange)=\"setOffset($event)\"\n          hint=\"\"\n        >\n        </gn-ui-text-input>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"formatsList\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordApiFormComponent, selector: "gn-ui-record-api-form", inputs: { apiLink: "apiLink" }, ngImport: i0, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.offset</p>\n        <gn-ui-text-input\n          class=\"w-20\"\n          [value]=\"offset$ | async\"\n          (valueChange)=\"setOffset($event)\"\n          hint=\"\"\n        >\n        </gn-ui-text-input>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"formatsList\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "hint", "required"], outputs: ["valueChange"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordApiFormComponent, decorators: [{
             type: Component,
@@ -26999,11 +27200,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 class FormFieldWrapperComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldWrapperComponent, isStandalone: true, selector: "gn-ui-form-field-wrapper", inputs: { label: "label", hint: "hint" }, ngImport: i0, template: "<div class=\"h-full flex flex-col\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\n        class=\"material-symbols-outlined m-2 icon-small\"\n        [matTooltip]=\"hint\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </div>\n  <div class=\"flex-1\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".icon-small{font-size:16px;height:16px;width:16px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldWrapperComponent, isStandalone: true, selector: "gn-ui-form-field-wrapper", inputs: { label: "label", hint: "hint" }, ngImport: i0, template: "<div class=\"h-full flex flex-col\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\n        class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n        [matTooltip]=\"hint\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </div>\n  <div class=\"flex-1\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-form-field-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIconModule, MatTooltipModule], template: "<div class=\"h-full flex flex-col\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\n        class=\"material-symbols-outlined m-2 icon-small\"\n        [matTooltip]=\"hint\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </div>\n  <div class=\"flex-1\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".icon-small{font-size:16px;height:16px;width:16px}\n"] }]
+            args: [{ selector: 'gn-ui-form-field-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIconModule, MatTooltipModule], template: "<div class=\"h-full flex flex-col\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\n        class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n        [matTooltip]=\"hint\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </div>\n  <div class=\"flex-1\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -27198,6 +27399,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
+class TimeSincePipe {
+    constructor(translate) {
+        this.translate = translate;
+    }
+    transform(value) {
+        if (isNaN(value.getTime())) {
+            throw new Error('Invalid Date');
+        }
+        const maintenant = new Date();
+        let locale;
+        switch (this.translate.currentLang) {
+            case 'fr':
+                locale = fr$1;
+                break;
+            case 'de':
+                locale = de$1;
+                break;
+            case 'es':
+                locale = es$1;
+                break;
+            case 'it':
+                locale = it$1;
+                break;
+            case 'nl':
+                locale = nl$1;
+                break;
+            case 'pt':
+                locale = pt$1;
+                break;
+            case 'sk':
+                locale = sk;
+                break;
+            case 'en':
+            default:
+                locale = enUS;
+                break;
+        }
+        return formatDistance(value, maintenant, {
+            addSuffix: true,
+            locale: locale,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TimeSincePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: TimeSincePipe, isStandalone: true, name: "timeSince" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TimeSincePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'timeSince',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
+
+class UserFeedbackItemComponent {
+    constructor() {
+        this.newUserFeedbackAnswer = new EventEmitter();
+        this.isAnAnswer = false;
+        this.newAnswer = '';
+        this.isAnswerEmpty = true;
+    }
+    ngOnInit() {
+        this.isAnAnswer = !!this.userFeedbackParent.parentUuid;
+    }
+    onNewAnswerValueChange() {
+        this.isAnswerEmpty = this.newAnswer.length === 0;
+    }
+    publishNewAnswer() {
+        if (this.newAnswer.trim() === '')
+            return;
+        const newAnswer = {
+            ...this.userFeedbackParent,
+            uuid: undefined,
+            published: true,
+            comment: this.newAnswer,
+            parentUuid: this.userFeedbackParent.uuid,
+            authorUserId: this.activeUser?.id,
+            authorEmail: this.activeUser?.email,
+            date: new Date(),
+            authorName: `${this.activeUser?.name} ${this.activeUser?.surname}`,
+        };
+        this.newUserFeedbackAnswer.emit(newAnswer);
+        this.newAnswer = '';
+        this.onNewAnswerValueChange();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UserFeedbackItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: UserFeedbackItemComponent, selector: "gn-ui-user-feedback-item", inputs: { userFeedbackParent: "userFeedbackParent", userFeedBacksAnswers: "userFeedBacksAnswers", isActiveUserEditor: "isActiveUserEditor", activeUser: "activeUser", isLastComment: "isLastComment", isAddUserFeedbackLoading: "isAddUserFeedbackLoading" }, outputs: { newUserFeedbackAnswer: "newUserFeedbackAnswer" }, ngImport: i0, template: "<div\n  *ngIf=\"userFeedbackParent.published\"\n  class=\"flex flex-col bg-white rounded w-full\"\n  [ngClass]=\"[isAnAnswer ? 'ps-4 ' : 'p-4']\"\n>\n  <div class=\"flex flex-row\">\n    <div class=\"avatar\">\n      <img\n        class=\"rounded-full\"\n        [src]=\"userFeedbackParent.avatarUrl\"\n        alt=\"avatar\"\n      />\n    </div>\n    <div class=\"p-4 flex flex-col\">\n      <span>{{ userFeedbackParent.authorName }}</span>\n      <span> {{ userFeedbackParent.date | timeSince }}</span>\n    </div>\n  </div>\n  <div data-cy=\"commentText\" class=\"mt-4 whitespace-pre-line\">\n    {{ userFeedbackParent.comment }}\n  </div>\n  <div\n    class=\"w-full\"\n    *ngFor=\"let userFeedBacksAnswer of userFeedBacksAnswers; let last = last\"\n  >\n    <hr class=\"-mx-4 my-6\" />\n    <gn-ui-user-feedback-item\n      [userFeedbackParent]=\"userFeedBacksAnswer\"\n      [isLastComment]=\"last\"\n    ></gn-ui-user-feedback-item>\n  </div>\n\n  <div *ngIf=\"isActiveUserEditor\" class=\"mt-2 flex flex-col\">\n    <hr class=\"-mx-4 my-4\" />\n    <div\n      id=\"new-comment-buttons\"\n      class=\"flex flex-row gap-2 items-center justify-end\"\n    >\n      <gn-ui-text-area\n        [disabled]=\"isAddUserFeedbackLoading\"\n        [(value)]=\"newAnswer\"\n        (valueChange)=\"onNewAnswerValueChange()\"\n        (keyup.control.enter)=\"publishNewAnswer()\"\n        [placeholder]=\"\n          'record.metadata.userFeedbacks.newAnswer.placeholder' | translate\n        \"\n        class=\"grow\"\n        extraClass=\"bg-transparent border-0 placeholder-primary-darker text-primary-darker h-9\"\n      ></gn-ui-text-area>\n      <div *ngIf=\"!isAnswerEmpty\" class=\"flex flex-row justify-end\">\n        <gn-ui-button\n          [disabled]=\"isAddUserFeedbackLoading\"\n          [type]=\"'outline'\"\n          (buttonClick)=\"publishNewAnswer()\"\n          [title]=\"\n            'record.metadata.userFeedbacks.newAnswer.buttonTitle' | translate\n          \"\n          extraClass=\"!p-[0.5em] text-primary-darker border-primary-darker h-9\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined\"\n            *ngIf=\"!isAddUserFeedbackLoading\"\n          >\n            send\n          </mat-icon>\n          <ng-container *ngIf=\"isAddUserFeedbackLoading\">\n            <div class=\"flex justify-center w-full\">\n              <gn-ui-spinning-loader></gn-ui-spinning-loader>\n            </div>\n          </ng-container>\n        </gn-ui-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: UserFeedbackItemComponent, selector: "gn-ui-user-feedback-item", inputs: ["userFeedbackParent", "userFeedBacksAnswers", "isActiveUserEditor", "activeUser", "isLastComment", "isAddUserFeedbackLoading"], outputs: ["newUserFeedbackAnswer"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: TimeSincePipe, name: "timeSince" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UserFeedbackItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-user-feedback-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"userFeedbackParent.published\"\n  class=\"flex flex-col bg-white rounded w-full\"\n  [ngClass]=\"[isAnAnswer ? 'ps-4 ' : 'p-4']\"\n>\n  <div class=\"flex flex-row\">\n    <div class=\"avatar\">\n      <img\n        class=\"rounded-full\"\n        [src]=\"userFeedbackParent.avatarUrl\"\n        alt=\"avatar\"\n      />\n    </div>\n    <div class=\"p-4 flex flex-col\">\n      <span>{{ userFeedbackParent.authorName }}</span>\n      <span> {{ userFeedbackParent.date | timeSince }}</span>\n    </div>\n  </div>\n  <div data-cy=\"commentText\" class=\"mt-4 whitespace-pre-line\">\n    {{ userFeedbackParent.comment }}\n  </div>\n  <div\n    class=\"w-full\"\n    *ngFor=\"let userFeedBacksAnswer of userFeedBacksAnswers; let last = last\"\n  >\n    <hr class=\"-mx-4 my-6\" />\n    <gn-ui-user-feedback-item\n      [userFeedbackParent]=\"userFeedBacksAnswer\"\n      [isLastComment]=\"last\"\n    ></gn-ui-user-feedback-item>\n  </div>\n\n  <div *ngIf=\"isActiveUserEditor\" class=\"mt-2 flex flex-col\">\n    <hr class=\"-mx-4 my-4\" />\n    <div\n      id=\"new-comment-buttons\"\n      class=\"flex flex-row gap-2 items-center justify-end\"\n    >\n      <gn-ui-text-area\n        [disabled]=\"isAddUserFeedbackLoading\"\n        [(value)]=\"newAnswer\"\n        (valueChange)=\"onNewAnswerValueChange()\"\n        (keyup.control.enter)=\"publishNewAnswer()\"\n        [placeholder]=\"\n          'record.metadata.userFeedbacks.newAnswer.placeholder' | translate\n        \"\n        class=\"grow\"\n        extraClass=\"bg-transparent border-0 placeholder-primary-darker text-primary-darker h-9\"\n      ></gn-ui-text-area>\n      <div *ngIf=\"!isAnswerEmpty\" class=\"flex flex-row justify-end\">\n        <gn-ui-button\n          [disabled]=\"isAddUserFeedbackLoading\"\n          [type]=\"'outline'\"\n          (buttonClick)=\"publishNewAnswer()\"\n          [title]=\"\n            'record.metadata.userFeedbacks.newAnswer.buttonTitle' | translate\n          \"\n          extraClass=\"!p-[0.5em] text-primary-darker border-primary-darker h-9\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined\"\n            *ngIf=\"!isAddUserFeedbackLoading\"\n          >\n            send\n          </mat-icon>\n          <ng-container *ngIf=\"isAddUserFeedbackLoading\">\n            <div class=\"flex justify-center w-full\">\n              <gn-ui-spinning-loader></gn-ui-spinning-loader>\n            </div>\n          </ng-container>\n        </gn-ui-button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { userFeedbackParent: [{
+                type: Input
+            }], userFeedBacksAnswers: [{
+                type: Input
+            }], isActiveUserEditor: [{
+                type: Input
+            }], activeUser: [{
+                type: Input
+            }], isLastComment: [{
+                type: Input
+            }], isAddUserFeedbackLoading: [{
+                type: Input
+            }], newUserFeedbackAnswer: [{
+                type: Output
+            }] } });
+
 class UiElementsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiElementsModule, declarations: [MetadataInfoComponent,
@@ -27219,6 +27526,7 @@ class UiElementsModule {
             PaginationButtonsComponent,
             MaxLinesComponent,
             RecordApiFormComponent,
+            UserFeedbackItemComponent,
             ImageOverlayPreviewComponent], imports: [CommonModule,
             MatIconModule,
             MatTooltipModule,
@@ -27229,7 +27537,8 @@ class UiElementsModule {
             FormsModule,
             NgOptimizedImage,
             MarkdownParserComponent,
-            ThumbnailComponent], exports: [MetadataInfoComponent,
+            ThumbnailComponent,
+            TimeSincePipe], exports: [MetadataInfoComponent,
             ContentGhostComponent,
             DownloadItemComponent,
             DownloadsListComponent,
@@ -27249,6 +27558,7 @@ class UiElementsModule {
             MaxLinesComponent,
             RecordApiFormComponent,
             MarkdownParserComponent,
+            UserFeedbackItemComponent,
             ImageOverlayPreviewComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiElementsModule, imports: [CommonModule,
             MatIconModule,
@@ -27279,6 +27589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         NgOptimizedImage,
                         MarkdownParserComponent,
                         ThumbnailComponent,
+                        TimeSincePipe,
                     ],
                     declarations: [
                         MetadataInfoComponent,
@@ -27300,6 +27611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         PaginationButtonsComponent,
                         MaxLinesComponent,
                         RecordApiFormComponent,
+                        UserFeedbackItemComponent,
                         ImageOverlayPreviewComponent,
                     ],
                     exports: [
@@ -27323,6 +27635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         MaxLinesComponent,
                         RecordApiFormComponent,
                         MarkdownParserComponent,
+                        UserFeedbackItemComponent,
                         ImageOverlayPreviewComponent,
                     ],
                 }]
@@ -29652,7 +29965,7 @@ class AddLayerFromWmsComponent {
         this.mapFacade.addLayer({ ...layerToAdd, title: layer.title });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromWmsComponent, deps: [{ token: MapFacade }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromWmsComponent, selector: "gn-ui-add-layer-from-wms", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wmsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.wms.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container\n    *ngFor=\"let layer of layers\"\n    [ngTemplateOutlet]=\"layerTreeItem\"\n    [ngTemplateOutletContext]=\"{\n      layer: layer\n    }\"\n  ></ng-container>\n</div>\n\n<ng-template #layerTreeItem let-layer=\"layer\">\n  <div class=\"flex items-center justify-between layer-tree-item my-2\">\n    <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n      {{ layer.title }}\n    </p>\n    <gn-ui-button\n      *ngIf=\"layer.name\"\n      class=\"layer-add-btn\"\n      type=\"primary\"\n      (buttonClick)=\"addLayer(layer)\"\n      extraClass=\"text-sm !px-2 !py-1\"\n      translate\n      ><span translate> map.layer.add </span></gn-ui-button\n    >\n  </div>\n  <div *ngIf=\"layer.children?.length > 0\" class=\"ml-4\">\n    <ng-container\n      *ngFor=\"let child of layer.children\"\n      [ngTemplateOutlet]=\"layerTreeItem\"\n      [ngTemplateOutletContext]=\"{\n        layer: child\n      }\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromWmsComponent, selector: "gn-ui-add-layer-from-wms", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wmsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.wms.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container\n    *ngFor=\"let layer of layers\"\n    [ngTemplateOutlet]=\"layerTreeItem\"\n    [ngTemplateOutletContext]=\"{\n      layer: layer\n    }\"\n  ></ng-container>\n</div>\n\n<ng-template #layerTreeItem let-layer=\"layer\">\n  <div class=\"flex items-center justify-between layer-tree-item my-2\">\n    <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n      {{ layer.title }}\n    </p>\n    <gn-ui-button\n      *ngIf=\"layer.name\"\n      class=\"layer-add-btn\"\n      type=\"primary\"\n      (buttonClick)=\"addLayer(layer)\"\n      extraClass=\"text-sm !px-2 !py-1\"\n      translate\n      ><span translate> map.layer.add </span></gn-ui-button\n    >\n  </div>\n  <div *ngIf=\"layer.children?.length > 0\" class=\"ml-4\">\n    <ng-container\n      *ngFor=\"let child of layer.children\"\n      [ngTemplateOutlet]=\"layerTreeItem\"\n      [ngTemplateOutletContext]=\"{\n        layer: child\n      }\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "hint", "required"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromWmsComponent, decorators: [{
             type: Component,
@@ -29803,7 +30116,7 @@ class AddLayerFromWfsComponent {
         this.mapFacade.addLayer({ ...layerToAdd, title: layer.title });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromWfsComponent, deps: [{ token: MapFacade }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromWfsComponent, selector: "gn-ui-add-layer-from-wfs", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wfsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.wfs.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container *ngFor=\"let layer of layers\">\n    <div class=\"flex items-center justify-between my-2 layer-item-tree\">\n      <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n        {{ layer.title }}\n      </p>\n      <gn-ui-button\n        *ngIf=\"layer.name\"\n        class=\"layer-add-btn\"\n        type=\"primary\"\n        (buttonClick)=\"addLayer(layer)\"\n        extraClass=\"text-sm !px-2 !py-1\"\n        translate\n        ><span translate> map.layer.add </span></gn-ui-button\n      >\n    </div>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromWfsComponent, selector: "gn-ui-add-layer-from-wfs", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wfsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.wfs.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container *ngFor=\"let layer of layers\">\n    <div class=\"flex items-center justify-between my-2 layer-item-tree\">\n      <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n        {{ layer.title }}\n      </p>\n      <gn-ui-button\n        *ngIf=\"layer.name\"\n        class=\"layer-add-btn\"\n        type=\"primary\"\n        (buttonClick)=\"addLayer(layer)\"\n        extraClass=\"text-sm !px-2 !py-1\"\n        translate\n        ><span translate> map.layer.add </span></gn-ui-button\n      >\n    </div>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "hint", "required"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromWfsComponent, decorators: [{
             type: Component,
@@ -30198,31 +30511,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                     ], template: "<div class=\"flex flex-col gap-6 p-6 items-start pointer-events-none\">\n  <gn-ui-notification\n    *ngFor=\"\n      let notification of notificationsService.notifications$ | async;\n      trackBy: trackById\n    \"\n    class=\"max-w-full pointer-events-auto\"\n    [text]=\"notification.text\"\n    [type]=\"notification.type\"\n    [title]=\"notification.title\"\n    [closeMessage]=\"notification.closeMessage\"\n    (notificationClose)=\"\n      notificationsService.removeNotificationById(notification.id)\n    \"\n    [@enterExit]\n  ></gn-ui-notification>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: NotificationsService }]; } });
 
+/*
+  Metadata actions
+ */
 const loadFullMetadata = createAction('[Metadata view] Load full metadata', props());
 const setIncompleteMetadata = createAction('[Metadata view] Set incomplete metadata', props());
-const loadFullSuccess = createAction('[Metadata view] Load full success', props());
-const loadFullFailure = createAction('[Metadata view] Load full failure', props());
+const loadFullMetadataSuccess = createAction('[Metadata view] Load full metadata success', props());
+const loadFullMetadataFailure = createAction('[Metadata view] Load full metadata failure', props());
+const closeMetadata = createAction('[Metadata view] close');
+/*
+  Related actions
+ */
 const setRelated = createAction('[Metadata view] Set related records', props());
+/*
+  ChartConfig actions
+ */
 const setChartConfig = createAction('[Metadata view] Set chart config', props());
-const close = createAction('[Metadata view] close');
+/*
+  User Feedbacks actions
+ */
+const addUserFeedback = createAction('[Metadata view] Add UserFeedback', props());
+const addUserFeedbackSuccess = createAction('[Metadata view] Add UserFeedback Success', props());
+const addUserFeedbackFailure = createAction('[Metadata view] Add UserFeedback Failure', props());
+const loadUserFeedbacks = createAction('[Metadata view] Load UserFeedbacks', props());
+const loadUserFeedbacksSuccess = createAction('[Metadata view] Load UserFeedbacks Success', props());
+const loadUserFeedbacksFailure = createAction('[Metadata view] Load UserFeedbacks Failure', props());
 
 var mdview_actions = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    close: close,
-    loadFullFailure: loadFullFailure,
+    addUserFeedback: addUserFeedback,
+    addUserFeedbackFailure: addUserFeedbackFailure,
+    addUserFeedbackSuccess: addUserFeedbackSuccess,
+    closeMetadata: closeMetadata,
     loadFullMetadata: loadFullMetadata,
-    loadFullSuccess: loadFullSuccess,
+    loadFullMetadataFailure: loadFullMetadataFailure,
+    loadFullMetadataSuccess: loadFullMetadataSuccess,
+    loadUserFeedbacks: loadUserFeedbacks,
+    loadUserFeedbacksFailure: loadUserFeedbacksFailure,
+    loadUserFeedbacksSuccess: loadUserFeedbacksSuccess,
     setChartConfig: setChartConfig,
     setIncompleteMetadata: setIncompleteMetadata,
     setRelated: setRelated
 });
 
-const MD_VIEW_FEATURE_STATE_KEY = 'mdView';
-const initialMdviewState = {
+const METADATA_VIEW_FEATURE_STATE_KEY = 'metadataView';
+const initialMetadataViewState = {
     error: null,
     loadingFull: false,
+    allUserFeedbacksLoading: false,
+    addUserFeedbackLoading: false,
 };
-const mdViewReducer = createReducer(initialMdviewState, on(loadFullMetadata, (state) => ({
+const metadataViewReducer = createReducer(initialMetadataViewState, 
+/*
+  Metadata reducers
+*/
+on(loadFullMetadata, (state) => ({
     ...state,
     error: null,
     loadingFull: true,
@@ -30230,38 +30573,82 @@ const mdViewReducer = createReducer(initialMdviewState, on(loadFullMetadata, (st
     ...state,
     error: null,
     metadata: incomplete,
-})), on(loadFullSuccess, (state, { full }) => ({
+})), on(loadFullMetadataSuccess, (state, { full }) => ({
     ...state,
     error: null,
     metadata: full,
     loadingFull: false,
-})), on(loadFullFailure, (state, { otherError, notFound }) => ({
+})), on(loadFullMetadataFailure, (state, { otherError, notFound }) => ({
     ...state,
     error: { otherError, notFound },
     loadingFull: false,
-})), on(setRelated, (state, { related }) => ({
+})), on(closeMetadata, (state) => {
+    const { metadata, related, userFeedbacks, ...stateWithoutMetadata } = state;
+    return stateWithoutMetadata;
+}), 
+/*
+  Related reducers
+*/
+on(setRelated, (state, { related }) => ({
     ...state,
     related,
-})), on(setChartConfig, (state, { chartConfig }) => ({
+})), 
+/*
+  ChartConfig reducers
+*/
+on(setChartConfig, (state, { chartConfig }) => ({
     ...state,
     chartConfig,
-})), on(close, (state) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { metadata, related, ...stateWithoutMd } = state;
-    return stateWithoutMd;
-}));
-function reducer$1(state, action) {
-    return mdViewReducer(state, action);
+})), 
+/*
+  UserFeedbacks reducers
+*/
+on(loadUserFeedbacks, (state) => ({
+    ...state,
+    error: null,
+    allUserFeedbacksLoading: true,
+})), on(addUserFeedback, (state) => ({
+    ...state,
+    addUserFeedbackLoading: true,
+})), on(loadUserFeedbacksSuccess, (state, { userFeedbacks }) => ({
+    ...state,
+    error: null,
+    userFeedbacks: userFeedbacks,
+    addUserFeedbackLoading: false,
+    allUserFeedbacksLoading: false,
+})), on(loadUserFeedbacksFailure, (state, { otherError, notFound }) => ({
+    ...state,
+    error: { otherError, notFound },
+    addUserFeedbackLoading: false,
+    allUserFeedbacksLoading: false,
+})));
+function reducer$1(metadataViewState, action) {
+    return metadataViewReducer(metadataViewState, action);
 }
 
-const getMdViewState = createFeatureSelector(MD_VIEW_FEATURE_STATE_KEY);
+const getMdViewState = createFeatureSelector(METADATA_VIEW_FEATURE_STATE_KEY);
+/*
+  Metadata selectors
+*/
 const getMetadataUuid = createSelector(getMdViewState, (state) => state.metadata ? state.metadata.uniqueIdentifier : null);
 const getMetadata = createSelector(getMdViewState, (state) => state.metadata);
 const getMetadataIsIncomplete = createSelector(getMdViewState, (state) => (state.metadata ? state.loadingFull : null));
 const getMetadataIsLoading = createSelector(getMdViewState, (state) => state.loadingFull);
 const getMetadataError = createSelector(getMdViewState, (state) => state.error);
+/*
+  Related selectors
+*/
 const getRelated = createSelector(getMdViewState, (state) => state.related);
+/*
+  Metadata selectors
+*/
 const getChartConfig = createSelector(getMdViewState, (state) => state.chartConfig);
+/*
+  UserFeedback selectors
+*/
+const getUserFeedbacks = createSelector(getMdViewState, (state) => state.userFeedbacks);
+const getAllUserFeedbacksLoading = createSelector(getMdViewState, (state) => state.allUserFeedbacksLoading);
+const getAddUserFeedbacksLoading = createSelector(getMdViewState, (state) => state.addUserFeedbackLoading);
 
 /**
  * The Metadata View Facade is used to render complete metadata records.
@@ -30270,11 +30657,12 @@ const getChartConfig = createSelector(getMdViewState, (state) => state.chartConf
  * To clear the current record use the `close()` method.
  */
 class MdViewFacade {
-    constructor(store, linkClassifier) {
+    constructor(store, linkClassifier, avatarService) {
         this.store = store;
         this.linkClassifier = linkClassifier;
+        this.avatarService = avatarService;
         this.isPresent$ = this.store.pipe(select(getMetadataUuid), map$1((uuid) => !!uuid));
-        this.isLoading$ = this.store.pipe(select(getMetadataIsLoading));
+        this.isMetadataLoading$ = this.store.pipe(select(getMetadataIsLoading));
         this.metadata$ = this.store.pipe(select(getMetadata), filter((md) => !!md));
         this.isIncomplete$ = this.store.pipe(select(getMetadataIsIncomplete), filter((incomplete) => incomplete !== null));
         this.error$ = this.store.pipe(select(getMetadataError));
@@ -30288,6 +30676,9 @@ class MdViewFacade {
         this.geoDataLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.GEODATA))));
         this.landingPageLinks$ = this.metadata$.pipe(map$1((record) => ('landingPage' in record ? [record.landingPage] : [])));
         this.otherLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.UNKNOWN))));
+        this.userFeedbacks$ = this.store.pipe(select(getUserFeedbacks));
+        this.isAllUserFeedbackLoading$ = this.store.pipe(select(getAllUserFeedbacksLoading));
+        this.isAddUserFeedbackLoading$ = this.store.pipe(select(getAddUserFeedbacksLoading));
     }
     /**
      * This will show an incomplete record (e.g. from a search result) as a preview
@@ -30302,39 +30693,73 @@ class MdViewFacade {
     loadFull(uuid) {
         this.store.dispatch(loadFullMetadata({ uuid }));
     }
-    close() {
-        this.store.dispatch(close());
+    closeMetadata() {
+        this.store.dispatch(closeMetadata());
     }
     setChartConfig(chartConfig) {
         this.store.dispatch(setChartConfig({ chartConfig }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewFacade, deps: [{ token: i1$2.Store }, { token: LinkClassifierService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /**
+     * UserFeedbacks
+     */
+    addUserFeedback(userFeedback) {
+        this.store.dispatch(addUserFeedback({ userFeedback }));
+    }
+    loadUserFeedbacks(datasetUuid) {
+        this.store.dispatch(loadUserFeedbacks({ datasetUuid }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewFacade, deps: [{ token: i1$2.Store }, { token: LinkClassifierService }, { token: AvatarServiceInterface }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewFacade }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewFacade, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Store }, { type: LinkClassifierService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Store }, { type: LinkClassifierService }, { type: AvatarServiceInterface }]; } });
 
 class MdViewEffects {
-    constructor(actions$, recordsRepository) {
+    constructor(actions$, recordsRepository, platformServiceInterface) {
         this.actions$ = actions$;
         this.recordsRepository = recordsRepository;
-        this.loadFull$ = createEffect(() => this.actions$.pipe(ofType(loadFullMetadata), switchMap$1(({ uuid }) => this.recordsRepository.getByUniqueIdentifier(uuid)), map$1((record) => {
+        this.platformServiceInterface = platformServiceInterface;
+        /*
+          Metadata effects
+        */
+        this.loadFullMetadata$ = createEffect(() => this.actions$.pipe(ofType(loadFullMetadata), switchMap$1(({ uuid }) => this.recordsRepository.getByUniqueIdentifier(uuid)), map$1((record) => {
             if (record === null) {
-                return loadFullFailure({ notFound: true });
+                return loadFullMetadataFailure({ notFound: true });
             }
-            return loadFullSuccess({ full: record });
-        }), catchError((error) => of(loadFullFailure({ otherError: error.message })))));
-        this.loadRelatedRecords$ = createEffect(() => this.actions$.pipe(ofType(loadFullSuccess), switchMap$1(({ full }) => this.recordsRepository.getSimilarRecords(full)), map$1((related) => {
+            return loadFullMetadataSuccess({ full: record });
+        }), catchError((error) => of(loadFullMetadataFailure({ otherError: error.message })))));
+        /*
+          Related effects
+        */
+        this.loadRelatedRecords$ = createEffect(() => this.actions$.pipe(ofType(loadFullMetadataSuccess), switchMap$1(({ full }) => this.recordsRepository.getSimilarRecords(full)), map$1((related) => {
             return setRelated({ related });
         }), catchError((error) => of(setRelated({ related: null })))));
+        /*
+          UserFeedback effects
+        */
+        this.loadUserFeedbacks$ = createEffect(() => this.actions$.pipe(ofType(loadUserFeedbacks), exhaustMap(({ datasetUuid }) => this.platformServiceInterface.getUserFeedbacks(datasetUuid).pipe(map$1((userFeedbacks) => loadUserFeedbacksSuccess({ userFeedbacks })), catchError((error) => of(loadUserFeedbacksFailure({
+            otherError: error.message,
+        })))))));
+        this.reloadUserFeedbacks$ = createEffect(() => this.actions$.pipe(ofType(addUserFeedbackSuccess), exhaustMap(({ datasetUuid }) => this.platformServiceInterface.getUserFeedbacks(datasetUuid).pipe(map$1((userFeedbacks) => loadUserFeedbacksSuccess({ userFeedbacks })), catchError((error) => of(loadUserFeedbacksFailure({
+            otherError: error.message,
+        })))))));
+        this.addUserFeedback$ = createEffect(() => this.actions$.pipe(ofType(addUserFeedback), mergeMap$1((action) => this.platformServiceInterface
+            .postUserFeedbacks(action.userFeedback)
+            .pipe(map$1(() => addUserFeedbackSuccess({
+            datasetUuid: action.userFeedback.metadataUUID,
+        })), catchError((error) => {
+            return of(addUserFeedbackFailure({
+                otherError: error.message,
+            }));
+        })))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewEffects, deps: [{ token: i1$8.Actions }, { token: RecordsRepositoryInterface }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewEffects, deps: [{ token: i1$8.Actions }, { token: RecordsRepositoryInterface }, { token: PlatformServiceInterface }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$8.Actions }, { type: RecordsRepositoryInterface }]; } });
+        }], ctorParameters: function () { return [{ type: i1$8.Actions }, { type: RecordsRepositoryInterface }, { type: PlatformServiceInterface }]; } });
 
 class FigureComponent {
     constructor() {
@@ -32653,7 +33078,7 @@ class FeatureRecordModule {
             DataViewWebComponentComponent,
             DataViewShareComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FeatureRecordModule, providers: [MdViewFacade], imports: [CommonModule,
-            StoreModule.forFeature(MD_VIEW_FEATURE_STATE_KEY, reducer$1),
+            StoreModule.forFeature(METADATA_VIEW_FEATURE_STATE_KEY, reducer$1),
             EffectsModule.forFeature([MdViewEffects]),
             UiLayoutModule,
             FeatureMapModule,
@@ -32681,7 +33106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                     ],
                     imports: [
                         CommonModule,
-                        StoreModule.forFeature(MD_VIEW_FEATURE_STATE_KEY, reducer$1),
+                        StoreModule.forFeature(METADATA_VIEW_FEATURE_STATE_KEY, reducer$1),
                         EffectsModule.forFeature([MdViewEffects]),
                         UiLayoutModule,
                         FeatureMapModule,
@@ -33130,7 +33555,7 @@ class WizardFieldComponent {
                 deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
-        ], viewQueries: [{ propertyName: "searchText", first: true, predicate: ["searchText"], descendants: true }, { propertyName: "chips", first: true, predicate: ["chips"], descendants: true }, { propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-1\">\n  <span [class]=\"wizardFieldConfig.icon + ' pr-10'\"></span>\n  <div class=\"flex flex-col flex-1\">\n    <div translate class=\"text-xl font-bold pb-1\">\n      {{ wizardFieldConfig.label }}\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.TEXT === wizardFieldConfig.type\"\n    >\n      <gn-ui-text-input\n        #searchText\n        [id]=\"wizardFieldConfig.id\"\n        [value]=\"wizardFieldData\"\n        [required]=\"wizardFieldConfig.required || false\"\n        hint=\"\"\n      ></gn-ui-text-input>\n    </div>\n    <div\n      class=\"flex-1 w-11/12\"\n      *ngIf=\"wizardFieldType.CHIPS === wizardFieldConfig.type\"\n    >\n      <gn-ui-chips-input\n        #chips\n        [selectedItems]=\"wizardFieldData\"\n        placeholder=\"\"\n        [id]=\"wizardFieldConfig.id\"\n        [url]=\"wizardFieldConfig.options.url\"\n        [loadOnce]=\"wizardFieldConfig.options.loadOnce\"\n      ></gn-ui-chips-input>\n    </div>\n    <div\n      class=\"h-32 w-11/12\"\n      *ngIf=\"wizardFieldType.TEXT_AREA === wizardFieldConfig.type\"\n    >\n      <gn-ui-text-area\n        #textArea\n        [id]=\"wizardFieldConfig.id\"\n        [value]=\"wizardFieldData\"\n        [required]=\"wizardFieldConfig.required || false\"\n        placeholder=\"\"\n      ></gn-ui-text-area>\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.DATA_PICKER === wizardFieldConfig.type\"\n    >\n      <input\n        [id]=\"wizardFieldConfig.id\"\n        type=\"text\"\n        (click)=\"datepicker.open()\"\n        class=\"rounded p-2 text-gray-700 w-full leading-tight focus:outline-none focus:border-primary\"\n        [value]=\"wizardFieldData\"\n        [matDatepicker]=\"datepicker\"\n        (dateChange)=\"onDateChange($event)\"\n      />\n      <mat-datepicker #datepicker></mat-datepicker>\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.DROPDOWN === wizardFieldConfig.type\"\n    >\n      <gn-ui-dropdown-selector\n        #dropdown\n        [id]=\"wizardFieldConfig.id\"\n        [title]=\"''\"\n        [extraBtnClass]=\"'secondary min-w-full'\"\n        [showTitle]=\"false\"\n        [choices]=\"dropdownChoices\"\n        [selected]=\"wizardFieldData\"\n        ariaName=\"search-sort-by\"\n      ></gn-ui-dropdown-selector>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex:1}gn-ui-text-input::ng-deep input,input[type=text]{height:100%;background:white;color:#000;font-style:italic;border-width:2px;border-color:var(--color-primary)}gn-ui-text-area::ng-deep textarea{border-width:2px;border-color:var(--color-primary)}gn-ui-dropdown-selector::ng-deep div{height:100%}gn-ui-dropdown-selector::ng-deep select{height:100%;border-width:2px;border-color:var(--color-primary);background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: ChipsInputComponent, selector: "gn-ui-chips-input", inputs: ["url", "placeholder", "selectedItems", "required", "loadOnce", "autocompleteItems"], outputs: ["itemsChange"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "searchText", first: true, predicate: ["searchText"], descendants: true }, { propertyName: "chips", first: true, predicate: ["chips"], descendants: true }, { propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-1\">\n  <span [class]=\"wizardFieldConfig.icon + ' pr-10'\"></span>\n  <div class=\"flex flex-col flex-1\">\n    <div translate class=\"text-xl font-bold pb-1\">\n      {{ wizardFieldConfig.label }}\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.TEXT === wizardFieldConfig.type\"\n    >\n      <gn-ui-text-input\n        #searchText\n        [id]=\"wizardFieldConfig.id\"\n        [value]=\"wizardFieldData\"\n        [required]=\"wizardFieldConfig.required || false\"\n        hint=\"\"\n      ></gn-ui-text-input>\n    </div>\n    <div\n      class=\"flex-1 w-11/12\"\n      *ngIf=\"wizardFieldType.CHIPS === wizardFieldConfig.type\"\n    >\n      <gn-ui-chips-input\n        #chips\n        [selectedItems]=\"wizardFieldData\"\n        placeholder=\"\"\n        [id]=\"wizardFieldConfig.id\"\n        [url]=\"wizardFieldConfig.options.url\"\n        [loadOnce]=\"wizardFieldConfig.options.loadOnce\"\n      ></gn-ui-chips-input>\n    </div>\n    <div\n      class=\"h-32 w-11/12\"\n      *ngIf=\"wizardFieldType.TEXT_AREA === wizardFieldConfig.type\"\n    >\n      <gn-ui-text-area\n        #textArea\n        [id]=\"wizardFieldConfig.id\"\n        [value]=\"wizardFieldData\"\n        [required]=\"wizardFieldConfig.required || false\"\n        placeholder=\"\"\n      ></gn-ui-text-area>\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.DATA_PICKER === wizardFieldConfig.type\"\n    >\n      <input\n        [id]=\"wizardFieldConfig.id\"\n        type=\"text\"\n        (click)=\"datepicker.open()\"\n        class=\"rounded p-2 text-gray-700 w-full leading-tight focus:outline-none focus:border-primary\"\n        [value]=\"wizardFieldData\"\n        [matDatepicker]=\"datepicker\"\n        (dateChange)=\"onDateChange($event)\"\n      />\n      <mat-datepicker #datepicker></mat-datepicker>\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.DROPDOWN === wizardFieldConfig.type\"\n    >\n      <gn-ui-dropdown-selector\n        #dropdown\n        [id]=\"wizardFieldConfig.id\"\n        [title]=\"''\"\n        [extraBtnClass]=\"'secondary min-w-full'\"\n        [showTitle]=\"false\"\n        [choices]=\"dropdownChoices\"\n        [selected]=\"wizardFieldData\"\n        ariaName=\"search-sort-by\"\n      ></gn-ui-dropdown-selector>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex:1}gn-ui-text-input::ng-deep input,input[type=text]{height:100%;background:white;color:#000;font-style:italic;border-width:2px;border-color:var(--color-primary)}gn-ui-text-area::ng-deep textarea{border-width:2px;border-color:var(--color-primary)}gn-ui-dropdown-selector::ng-deep div{height:100%}gn-ui-dropdown-selector::ng-deep select{height:100%;border-width:2px;border-color:var(--color-primary);background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "hint", "required"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: ChipsInputComponent, selector: "gn-ui-chips-input", inputs: ["url", "placeholder", "selectedItems", "required", "loadOnce", "autocompleteItems"], outputs: ["itemsChange"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardFieldComponent, decorators: [{
             type: Component,
@@ -33400,7 +33825,7 @@ class FormFieldRichComponent {
         this.control.setValue(textContent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldRichComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldRichComponent, isStandalone: true, selector: "gn-ui-form-field-rich", inputs: { control: "control", label: "label", hint: "hint", helperText: "helperText", placeholder: "placeholder" }, ngImport: i0, template: "<gn-ui-form-field-wrapper [label]=\"label\" [hint]=\"hint\">\n  <gn-ui-button\n    form-field-interaction\n    [extraClass]=\"getButtonExtraClass()\"\n    (buttonClick)=\"togglePreview()\"\n  >\n    <span class=\"material-symbols-outlined mr-1 icon-small\">{{\n      preview ? 'visibility' : 'visibility_off'\n    }}</span>\n    {{ preview ? 'WYSIWYG' : 'Markdown' }}\n  </gn-ui-button>\n  <gn-ui-markdown-editor\n    class=\"h-full\"\n    [preview]=\"preview\"\n    [helperText]=\"helperText\"\n    [placeholder]=\"placeholder\"\n    [textContent]=\"control.value\"\n    (textContentChanged)=\"handleTextContentChanged($event)\"\n  ></gn-ui-markdown-editor>\n</gn-ui-form-field-wrapper>\n", styles: [".icon-small{font-size:16px;height:16px;width:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MarkdownEditorComponent, selector: "gn-ui-markdown-editor", inputs: ["preview", "helperText", "placeholder", "textContent"], outputs: ["textContentChanged"] }, { kind: "component", type: FormFieldWrapperComponent, selector: "gn-ui-form-field-wrapper", inputs: ["label", "hint"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldRichComponent, isStandalone: true, selector: "gn-ui-form-field-rich", inputs: { control: "control", label: "label", hint: "hint", helperText: "helperText", placeholder: "placeholder" }, ngImport: i0, template: "<gn-ui-form-field-wrapper [label]=\"label\" [hint]=\"hint\">\n  <gn-ui-button\n    form-field-interaction\n    [extraClass]=\"getButtonExtraClass()\"\n    (buttonClick)=\"togglePreview()\"\n  >\n    <span class=\"material-symbols-outlined mr-1 gn-ui-icon-small\">{{\n      preview ? 'visibility' : 'visibility_off'\n    }}</span>\n    {{ preview ? 'WYSIWYG' : 'Markdown' }}\n  </gn-ui-button>\n  <gn-ui-markdown-editor\n    class=\"h-full\"\n    [preview]=\"preview\"\n    [helperText]=\"helperText\"\n    [placeholder]=\"placeholder\"\n    [textContent]=\"control.value\"\n    (textContentChanged)=\"handleTextContentChanged($event)\"\n  ></gn-ui-markdown-editor>\n</gn-ui-form-field-wrapper>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MarkdownEditorComponent, selector: "gn-ui-markdown-editor", inputs: ["preview", "helperText", "placeholder", "textContent"], outputs: ["textContentChanged"] }, { kind: "component", type: FormFieldWrapperComponent, selector: "gn-ui-form-field-wrapper", inputs: ["label", "hint"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldRichComponent, decorators: [{
             type: Component,
@@ -33410,7 +33835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         MarkdownEditorComponent,
                         FormFieldWrapperComponent,
                         ButtonComponent,
-                    ], template: "<gn-ui-form-field-wrapper [label]=\"label\" [hint]=\"hint\">\n  <gn-ui-button\n    form-field-interaction\n    [extraClass]=\"getButtonExtraClass()\"\n    (buttonClick)=\"togglePreview()\"\n  >\n    <span class=\"material-symbols-outlined mr-1 icon-small\">{{\n      preview ? 'visibility' : 'visibility_off'\n    }}</span>\n    {{ preview ? 'WYSIWYG' : 'Markdown' }}\n  </gn-ui-button>\n  <gn-ui-markdown-editor\n    class=\"h-full\"\n    [preview]=\"preview\"\n    [helperText]=\"helperText\"\n    [placeholder]=\"placeholder\"\n    [textContent]=\"control.value\"\n    (textContentChanged)=\"handleTextContentChanged($event)\"\n  ></gn-ui-markdown-editor>\n</gn-ui-form-field-wrapper>\n", styles: [".icon-small{font-size:16px;height:16px;width:16px}\n"] }]
+                    ], template: "<gn-ui-form-field-wrapper [label]=\"label\" [hint]=\"hint\">\n  <gn-ui-button\n    form-field-interaction\n    [extraClass]=\"getButtonExtraClass()\"\n    (buttonClick)=\"togglePreview()\"\n  >\n    <span class=\"material-symbols-outlined mr-1 gn-ui-icon-small\">{{\n      preview ? 'visibility' : 'visibility_off'\n    }}</span>\n    {{ preview ? 'WYSIWYG' : 'Markdown' }}\n  </gn-ui-button>\n  <gn-ui-markdown-editor\n    class=\"h-full\"\n    [preview]=\"preview\"\n    [helperText]=\"helperText\"\n    [placeholder]=\"placeholder\"\n    [textContent]=\"control.value\"\n    (textContentChanged)=\"handleTextContentChanged($event)\"\n  ></gn-ui-markdown-editor>\n</gn-ui-form-field-wrapper>\n" }]
         }], propDecorators: { control: [{
                 type: Input
             }], label: [{
@@ -33469,6 +33894,9 @@ class FormFieldComponent {
         this.formControl = new FormControl();
         this.valueChange = this.formControl.valueChanges;
     }
+    focusTitleInput() {
+        this.titleInput.nativeElement.children[0].focus();
+    }
     get simpleType() {
         return this.config.type;
     }
@@ -33504,15 +33932,23 @@ class FormFieldComponent {
     get isFieldInvalid() {
         return !this.config.locked && this.config.invalid;
     }
+    get isTitle() {
+        return this.model === 'title';
+    }
     get isAbstract() {
         return this.model === 'abstract';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldComponent, isStandalone: true, selector: "gn-ui-form-field", inputs: { model: "model", config: "config", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-col h-full\">\n  <div class=\"mb-2 flex flex-row\">\n    <label class=\"grow\">\n      <span class=\"font-medium field-label\">{{\n        config.labelKey | translate\n      }}</span>\n      <span *ngIf=\"config.hintKey\" class=\"text-gray-900 text-sm\">\n        - {{ config.hintKey | translate }}\n      </span>\n    </label>\n    <mat-icon\n      *ngIf=\"isFieldOk\"\n      class=\"material-symbols-outlined text-[#c6d950] icon-ok\"\n      >check_circle</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldLocked\"\n      class=\"material-symbols-outlined text-blue-400 icon-locked\"\n      >lock</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldInvalid\"\n      class=\"material-symbols-outlined text-pink-500 icon-invalid\"\n      >cancel</mat-icon\n    >\n  </div>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      [type]=\"simpleType\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isFileField\">\n    <gn-ui-form-field-file\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-file>\n  </ng-container>\n  <ng-container *ngIf=\"isAbstract\">\n    <gn-ui-form-field-rich\n      class=\"h-[8rem]\"\n      [control]=\"formControl\"\n      [label]=\"config.labelKey | translate\"\n      [hint]=\"config.hintKey | translate\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isArrayField\">\n    <gn-ui-form-field-array></gn-ui-form-field-array>\n  </ng-container>\n  <ng-container *ngIf=\"isObjectField\">\n    <gn-ui-form-field-object></gn-ui-form-field-object>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtentField\">\n    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>\n  </ng-container>\n  <div\n    *ngIf=\"isFieldInvalid && config.invalidHintKey\"\n    class=\"mt-2 text-pink-500 text-sm field-invalid-hint\"\n  >\n    {{ config.invalidHintKey | translate }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: ["type", "control", "readonly", "invalid", "placeholder", "options"] }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["control", "label", "hint", "helperText", "placeholder"] }, { kind: "component", type: FormFieldObjectComponent, selector: "gn-ui-form-field-object" }, { kind: "component", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent" }, { kind: "component", type: FormFieldTemporalExtentComponent, selector: "gn-ui-form-field-temporal-extent" }, { kind: "component", type: FormFieldFileComponent, selector: "gn-ui-form-field-file", inputs: ["control", "readonly", "invalid", "placeholder"] }, { kind: "component", type: FormFieldArrayComponent, selector: "gn-ui-form-field-array" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldComponent, isStandalone: true, selector: "gn-ui-form-field", inputs: { model: "model", config: "config", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full\">\n  <div class=\"mb-2 flex flex-row\">\n    <label class=\"grow\">\n      <span class=\"font-medium field-label\">{{\n        config.labelKey | translate\n      }}</span>\n      <span *ngIf=\"config.hintKey\" class=\"text-gray-900 text-sm\">\n        - {{ config.hintKey | translate }}\n      </span>\n    </label>\n    <mat-icon\n      *ngIf=\"isFieldOk\"\n      class=\"material-symbols-outlined text-[#c6d950] icon-ok\"\n      >check_circle</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldLocked\"\n      class=\"material-symbols-outlined text-blue-400 icon-locked\"\n      >lock</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldInvalid\"\n      class=\"material-symbols-outlined text-pink-500 icon-invalid\"\n      >cancel</mat-icon\n    >\n  </div>\n  <ng-container *ngIf=\"isTitle\">\n    <div class=\"flex justify-between items-center gap-3\">\n      <h2\n        #titleInput\n        class=\"grow text-3xl font-normal\"\n        [gnUiEditableLabel]=\"true\"\n        (editableLabelChanged)=\"formControl.setValue($event)\"\n      >\n        {{ formControl.value }}\n      </h2>\n      <span\n        class=\"material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer\"\n        (click)=\"focusTitleInput()\"\n        >edit</span\n      >\n      <span\n        class=\"material-symbols-outlined gn-ui-icon-small m-2\"\n        [matTooltip]=\"config.hintKey | translate\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      [type]=\"simpleType\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isFileField\">\n    <gn-ui-form-field-file\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-file>\n  </ng-container>\n  <ng-container *ngIf=\"isAbstract\">\n    <gn-ui-form-field-rich\n      class=\"h-[8rem]\"\n      [control]=\"formControl\"\n      [label]=\"config.labelKey | translate\"\n      [hint]=\"config.hintKey | translate\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isArrayField\">\n    <gn-ui-form-field-array></gn-ui-form-field-array>\n  </ng-container>\n  <ng-container *ngIf=\"isObjectField\">\n    <gn-ui-form-field-object></gn-ui-form-field-object>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtentField\">\n    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>\n  </ng-container>\n  <div\n    *ngIf=\"isFieldInvalid && config.invalidHintKey\"\n    class=\"mt-2 text-pink-500 text-sm field-invalid-hint\"\n  >\n    {{ config.invalidHintKey | translate }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: EditableLabelDirective, selector: "[gnUiEditableLabel]", inputs: ["gnUiEditableLabel"], outputs: ["editableLabelChanged"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: ["type", "control", "readonly", "invalid", "placeholder", "options"] }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["control", "label", "hint", "helperText", "placeholder"] }, { kind: "component", type: FormFieldObjectComponent, selector: "gn-ui-form-field-object" }, { kind: "component", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent" }, { kind: "component", type: FormFieldTemporalExtentComponent, selector: "gn-ui-form-field-temporal-extent" }, { kind: "component", type: FormFieldFileComponent, selector: "gn-ui-form-field-file", inputs: ["control", "readonly", "invalid", "placeholder"] }, { kind: "component", type: FormFieldArrayComponent, selector: "gn-ui-form-field-array" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gn-ui-form-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        EditableLabelDirective,
+                        MatIconModule,
+                        MatTooltipModule,
                         FormFieldSimpleComponent,
                         FormFieldRichComponent,
                         FormFieldObjectComponent,
@@ -33520,11 +33956,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         FormFieldTemporalExtentComponent,
                         FormFieldFileComponent,
                         FormFieldArrayComponent,
-                        CommonModule,
-                        ReactiveFormsModule,
                         TranslateModule,
-                        MatIconModule,
-                    ], template: "<div class=\"flex flex-col h-full\">\n  <div class=\"mb-2 flex flex-row\">\n    <label class=\"grow\">\n      <span class=\"font-medium field-label\">{{\n        config.labelKey | translate\n      }}</span>\n      <span *ngIf=\"config.hintKey\" class=\"text-gray-900 text-sm\">\n        - {{ config.hintKey | translate }}\n      </span>\n    </label>\n    <mat-icon\n      *ngIf=\"isFieldOk\"\n      class=\"material-symbols-outlined text-[#c6d950] icon-ok\"\n      >check_circle</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldLocked\"\n      class=\"material-symbols-outlined text-blue-400 icon-locked\"\n      >lock</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldInvalid\"\n      class=\"material-symbols-outlined text-pink-500 icon-invalid\"\n      >cancel</mat-icon\n    >\n  </div>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      [type]=\"simpleType\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isFileField\">\n    <gn-ui-form-field-file\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-file>\n  </ng-container>\n  <ng-container *ngIf=\"isAbstract\">\n    <gn-ui-form-field-rich\n      class=\"h-[8rem]\"\n      [control]=\"formControl\"\n      [label]=\"config.labelKey | translate\"\n      [hint]=\"config.hintKey | translate\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isArrayField\">\n    <gn-ui-form-field-array></gn-ui-form-field-array>\n  </ng-container>\n  <ng-container *ngIf=\"isObjectField\">\n    <gn-ui-form-field-object></gn-ui-form-field-object>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtentField\">\n    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>\n  </ng-container>\n  <div\n    *ngIf=\"isFieldInvalid && config.invalidHintKey\"\n    class=\"mt-2 text-pink-500 text-sm field-invalid-hint\"\n  >\n    {{ config.invalidHintKey | translate }}\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"flex flex-col h-full\">\n  <div class=\"mb-2 flex flex-row\">\n    <label class=\"grow\">\n      <span class=\"font-medium field-label\">{{\n        config.labelKey | translate\n      }}</span>\n      <span *ngIf=\"config.hintKey\" class=\"text-gray-900 text-sm\">\n        - {{ config.hintKey | translate }}\n      </span>\n    </label>\n    <mat-icon\n      *ngIf=\"isFieldOk\"\n      class=\"material-symbols-outlined text-[#c6d950] icon-ok\"\n      >check_circle</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldLocked\"\n      class=\"material-symbols-outlined text-blue-400 icon-locked\"\n      >lock</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldInvalid\"\n      class=\"material-symbols-outlined text-pink-500 icon-invalid\"\n      >cancel</mat-icon\n    >\n  </div>\n  <ng-container *ngIf=\"isTitle\">\n    <div class=\"flex justify-between items-center gap-3\">\n      <h2\n        #titleInput\n        class=\"grow text-3xl font-normal\"\n        [gnUiEditableLabel]=\"true\"\n        (editableLabelChanged)=\"formControl.setValue($event)\"\n      >\n        {{ formControl.value }}\n      </h2>\n      <span\n        class=\"material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer\"\n        (click)=\"focusTitleInput()\"\n        >edit</span\n      >\n      <span\n        class=\"material-symbols-outlined gn-ui-icon-small m-2\"\n        [matTooltip]=\"config.hintKey | translate\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      [type]=\"simpleType\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isFileField\">\n    <gn-ui-form-field-file\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-file>\n  </ng-container>\n  <ng-container *ngIf=\"isAbstract\">\n    <gn-ui-form-field-rich\n      class=\"h-[8rem]\"\n      [control]=\"formControl\"\n      [label]=\"config.labelKey | translate\"\n      [hint]=\"config.hintKey | translate\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isArrayField\">\n    <gn-ui-form-field-array></gn-ui-form-field-array>\n  </ng-container>\n  <ng-container *ngIf=\"isObjectField\">\n    <gn-ui-form-field-object></gn-ui-form-field-object>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtentField\">\n    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>\n  </ng-container>\n  <div\n    *ngIf=\"isFieldInvalid && config.invalidHintKey\"\n    class=\"mt-2 text-pink-500 text-sm field-invalid-hint\"\n  >\n    {{ config.invalidHintKey | translate }}\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], config: [{
@@ -33533,6 +33966,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], titleInput: [{
+                type: ViewChild,
+                args: ['titleInput']
             }] } });
 
 class RecordFormComponent {
@@ -33554,17 +33990,7 @@ class RecordFormComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-record-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        CommonModule,
-                        FormFieldComponent,
-                        FormFieldArrayComponent,
-                        FormFieldFileComponent,
-                        FormFieldObjectComponent,
-                        FormFieldRichComponent,
-                        FormFieldSimpleComponent,
-                        FormFieldSpatialExtentComponent,
-                        FormFieldTemporalExtentComponent,
-                    ], template: "<div class=\"flex flex-col gap-6 p-6\">\n  <ng-container *ngFor=\"let field of fields$ | async; trackBy: fieldTracker\">\n    <gn-ui-form-field\n      *ngIf=\"field.config.formFieldConfig && !field.config.hidden\"\n      [model]=\"field.config.model\"\n      [config]=\"field.config.formFieldConfig\"\n      [value]=\"field.value\"\n      (valueChange)=\"handleFieldValueChange(field, $event)\"\n    ></gn-ui-form-field>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'gn-ui-record-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, FormFieldComponent], template: "<div class=\"flex flex-col gap-6 p-6\">\n  <ng-container *ngFor=\"let field of fields$ | async; trackBy: fieldTracker\">\n    <gn-ui-form-field\n      *ngIf=\"field.config.formFieldConfig && !field.config.hidden\"\n      [model]=\"field.config.model\"\n      [config]=\"field.config.formFieldConfig\"\n      [value]=\"field.value\"\n      (valueChange)=\"handleFieldValueChange(field, $event)\"\n    ></gn-ui-form-field>\n  </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: EditorFacade }]; } });
 
 const ROUTER_STATE_KEY = 'router';
@@ -33862,7 +34288,7 @@ class RouterEffects {
          * the search results happens
          */
         this.navigateToSearch$ = createEffect(() => this._actions$.pipe(navigation(this.routerConfig.searchRouteComponent, {
-            run: () => close(),
+            run: () => closeMetadata(),
         })));
         this.navigateBack$ = createEffect(() => this._actions$.pipe(ofType(backAction), tap$1(() => this._location.back())), { dispatch: false });
         this.navigateForward$ = createEffect(() => this._actions$.pipe(ofType(forwardAction), tap$1(() => this._location.forward())), { dispatch: false });