geonetwork-ui 2.3.0-dev.c3722986 → 2.3.0-dev.e07c5606

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, TemplateRef, Host, ContentChild, HostBinding, ContentChildren, 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, 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';
@@ -70,15 +70,18 @@ import { MatInputModule } from '@angular/material/input';
 import * as i1$7 from '@angular/router';
 import { RouterModule, RouterLink, RouteReuseStrategy } from '@angular/router';
 import Duration from 'duration-relativetimeformat';
+import * as basicLightbox from 'basiclightbox';
 import { marked } from 'marked';
 import EmblaCarousel from 'embla-carousel';
-import * as basicLightbox from 'basiclightbox';
+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';
 import { valid as valid$1 } from 'geojson-validation';
 import { Polygon } from 'ol/geom';
 import { queryDataGouvFr, queryGeonames, queryGeoadmin } from '@geospatial-sdk/geocoding';
+import { trigger, transition, animate, keyframes, style } from '@angular/animations';
 import { Chart, BarController, BarElement, CategoryScale, LinearScale, LineController, LineElement, PointElement, PieController, ArcElement, ScatterController, Tooltip, Colors, Legend } from 'chart.js';
 import * as i4$1 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
@@ -17270,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",
@@ -17415,7 +17419,25 @@ var de = {
 	"downloads.format.unknown": "unbekannt",
 	"downloads.wfs.featuretype.not.found": "Der Layer wurde nicht gefunden",
 	dropFile: dropFile$6,
+	"editor.record.form.license": "Lizenz",
+	"editor.record.form.license.cc-by": "",
+	"editor.record.form.license.cc-by-sa": "",
+	"editor.record.form.license.cc-zero": "",
+	"editor.record.form.license.etalab": "",
+	"editor.record.form.license.etalab-v2": "",
+	"editor.record.form.license.odbl": "",
+	"editor.record.form.license.odc-by": "",
+	"editor.record.form.license.pddl": "",
+	"editor.record.form.license.unknown": "Unbekannt oder nicht vorhanden",
+	"editor.record.loadError.body": "",
+	"editor.record.loadError.closeMessage": "",
+	"editor.record.loadError.title": "",
 	"editor.record.publish": "",
+	"editor.record.publishError.body": "",
+	"editor.record.publishError.closeMessage": "",
+	"editor.record.publishError.title": "",
+	"editor.record.publishSuccess.body": "",
+	"editor.record.publishSuccess.title": "",
 	"editor.record.upToDate": "",
 	"externalviewer.dataset.unnamed": "Datensatz aus dem Datahub",
 	"facets.block.title.OrgForResource": "Organisation",
@@ -17541,6 +17563,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",
@@ -17614,6 +17644,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",
@@ -17632,6 +17668,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",
@@ -17777,7 +17814,25 @@ var en = {
 	"downloads.format.unknown": "unknown",
 	"downloads.wfs.featuretype.not.found": "The layer was not found",
 	dropFile: dropFile$5,
+	"editor.record.form.license": "License",
+	"editor.record.form.license.cc-by": "Creative Commons CC-BY",
+	"editor.record.form.license.cc-by-sa": "Creative Commons CC-BY-SA",
+	"editor.record.form.license.cc-zero": "Creative Commons CC-0",
+	"editor.record.form.license.etalab": "Open Licence (Etalab)",
+	"editor.record.form.license.etalab-v2": "Open Licence v2.0 (Etalab)",
+	"editor.record.form.license.odbl": "Open Data Commons ODbL",
+	"editor.record.form.license.odc-by": "Open Data Commons ODC-By",
+	"editor.record.form.license.pddl": "Open Data Commons PDDL",
+	"editor.record.form.license.unknown": "Unknown or absent",
+	"editor.record.loadError.body": "The record could not be loaded:",
+	"editor.record.loadError.closeMessage": "Understood",
+	"editor.record.loadError.title": "Error loading record",
 	"editor.record.publish": "Publish this record",
+	"editor.record.publishError.body": "The record could not be published:",
+	"editor.record.publishError.closeMessage": "Understood",
+	"editor.record.publishError.title": "Error publishing record",
+	"editor.record.publishSuccess.body": "The record was successfully published!",
+	"editor.record.publishSuccess.title": "Publish success",
 	"editor.record.upToDate": "This record is up to date",
 	"externalviewer.dataset.unnamed": "Datahub layer",
 	"facets.block.title.OrgForResource": "Organisation",
@@ -17903,6 +17958,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",
@@ -17976,6 +18039,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",
@@ -17994,6 +18063,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",
@@ -18139,7 +18209,25 @@ var es = {
 	"downloads.format.unknown": "",
 	"downloads.wfs.featuretype.not.found": "",
 	dropFile: dropFile$4,
+	"editor.record.form.license": "",
+	"editor.record.form.license.cc-by": "",
+	"editor.record.form.license.cc-by-sa": "",
+	"editor.record.form.license.cc-zero": "",
+	"editor.record.form.license.etalab": "",
+	"editor.record.form.license.etalab-v2": "",
+	"editor.record.form.license.odbl": "",
+	"editor.record.form.license.odc-by": "",
+	"editor.record.form.license.pddl": "",
+	"editor.record.form.license.unknown": "",
+	"editor.record.loadError.body": "",
+	"editor.record.loadError.closeMessage": "",
+	"editor.record.loadError.title": "",
 	"editor.record.publish": "",
+	"editor.record.publishError.body": "",
+	"editor.record.publishError.closeMessage": "",
+	"editor.record.publishError.title": "",
+	"editor.record.publishSuccess.body": "",
+	"editor.record.publishSuccess.title": "",
 	"editor.record.upToDate": "",
 	"externalviewer.dataset.unnamed": "",
 	"facets.block.title.OrgForResource": "",
@@ -18265,6 +18353,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": "",
@@ -18338,6 +18434,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": "",
@@ -18356,6 +18458,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",
@@ -18501,7 +18604,25 @@ var fr = {
 	"downloads.format.unknown": "inconnu",
 	"downloads.wfs.featuretype.not.found": "La couche n'a pas été retrouvée",
 	dropFile: dropFile$3,
+	"editor.record.form.license": "Licence",
+	"editor.record.form.license.cc-by": "",
+	"editor.record.form.license.cc-by-sa": "",
+	"editor.record.form.license.cc-zero": "",
+	"editor.record.form.license.etalab": "Licence Ouverte (Etalab)",
+	"editor.record.form.license.etalab-v2": "Licence Ouverte v2.0 (Etalab)",
+	"editor.record.form.license.odbl": "",
+	"editor.record.form.license.odc-by": "",
+	"editor.record.form.license.pddl": "",
+	"editor.record.form.license.unknown": "Non-reconnue ou absente",
+	"editor.record.loadError.body": "",
+	"editor.record.loadError.closeMessage": "",
+	"editor.record.loadError.title": "",
 	"editor.record.publish": "",
+	"editor.record.publishError.body": "",
+	"editor.record.publishError.closeMessage": "",
+	"editor.record.publishError.title": "",
+	"editor.record.publishSuccess.body": "",
+	"editor.record.publishSuccess.title": "",
 	"editor.record.upToDate": "",
 	"externalviewer.dataset.unnamed": "Couche du datahub",
 	"facets.block.title.OrgForResource": "Organisation",
@@ -18627,6 +18748,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",
@@ -18700,6 +18829,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",
@@ -18718,6 +18853,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",
@@ -18863,7 +18999,25 @@ var it = {
 	"downloads.format.unknown": "sconosciuto",
 	"downloads.wfs.featuretype.not.found": "Il layer non è stato trovato",
 	dropFile: dropFile$2,
+	"editor.record.form.license": "Licenza",
+	"editor.record.form.license.cc-by": "",
+	"editor.record.form.license.cc-by-sa": "",
+	"editor.record.form.license.cc-zero": "",
+	"editor.record.form.license.etalab": "Licenza aperta (Etalab)",
+	"editor.record.form.license.etalab-v2": "Licenza aperta v2.0 (Etalab)",
+	"editor.record.form.license.odbl": "",
+	"editor.record.form.license.odc-by": "",
+	"editor.record.form.license.pddl": "",
+	"editor.record.form.license.unknown": "Non riconosciuta o assente",
+	"editor.record.loadError.body": "",
+	"editor.record.loadError.closeMessage": "",
+	"editor.record.loadError.title": "",
 	"editor.record.publish": "",
+	"editor.record.publishError.body": "",
+	"editor.record.publishError.closeMessage": "",
+	"editor.record.publishError.title": "",
+	"editor.record.publishSuccess.body": "",
+	"editor.record.publishSuccess.title": "",
 	"editor.record.upToDate": "",
 	"externalviewer.dataset.unnamed": "Layer del datahub",
 	"facets.block.title.OrgForResource": "Organizzazione",
@@ -18989,6 +19143,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",
@@ -19062,6 +19224,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",
@@ -19080,6 +19248,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",
@@ -19225,7 +19394,25 @@ var nl = {
 	"downloads.format.unknown": "",
 	"downloads.wfs.featuretype.not.found": "",
 	dropFile: dropFile$1,
+	"editor.record.form.license": "",
+	"editor.record.form.license.cc-by": "",
+	"editor.record.form.license.cc-by-sa": "",
+	"editor.record.form.license.cc-zero": "",
+	"editor.record.form.license.etalab": "",
+	"editor.record.form.license.etalab-v2": "",
+	"editor.record.form.license.odbl": "",
+	"editor.record.form.license.odc-by": "",
+	"editor.record.form.license.pddl": "",
+	"editor.record.form.license.unknown": "",
+	"editor.record.loadError.body": "",
+	"editor.record.loadError.closeMessage": "",
+	"editor.record.loadError.title": "",
 	"editor.record.publish": "",
+	"editor.record.publishError.body": "",
+	"editor.record.publishError.closeMessage": "",
+	"editor.record.publishError.title": "",
+	"editor.record.publishSuccess.body": "",
+	"editor.record.publishSuccess.title": "",
 	"editor.record.upToDate": "",
 	"externalviewer.dataset.unnamed": "",
 	"facets.block.title.OrgForResource": "",
@@ -19351,6 +19538,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": "",
@@ -19424,6 +19619,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": "",
@@ -19442,6 +19643,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",
@@ -19587,7 +19789,25 @@ var pt = {
 	"downloads.format.unknown": "",
 	"downloads.wfs.featuretype.not.found": "",
 	dropFile: dropFile,
+	"editor.record.form.license": "",
+	"editor.record.form.license.cc-by": "",
+	"editor.record.form.license.cc-by-sa": "",
+	"editor.record.form.license.cc-zero": "",
+	"editor.record.form.license.etalab": "",
+	"editor.record.form.license.etalab-v2": "",
+	"editor.record.form.license.odbl": "",
+	"editor.record.form.license.odc-by": "",
+	"editor.record.form.license.pddl": "",
+	"editor.record.form.license.unknown": "",
+	"editor.record.loadError.body": "",
+	"editor.record.loadError.closeMessage": "",
+	"editor.record.loadError.title": "",
 	"editor.record.publish": "",
+	"editor.record.publishError.body": "",
+	"editor.record.publishError.closeMessage": "",
+	"editor.record.publishError.title": "",
+	"editor.record.publishSuccess.body": "",
+	"editor.record.publishSuccess.title": "",
 	"editor.record.upToDate": "",
 	"externalviewer.dataset.unnamed": "",
 	"facets.block.title.OrgForResource": "",
@@ -19713,6 +19933,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": "",
@@ -19786,6 +20014,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": "",
@@ -19880,7 +20114,11 @@ class Gn4FieldMapper {
             }),
             creationDateForResource: (output, source) => ({
                 ...output,
-                datasetCreated: toDate(getFirstValue(selectField(source, 'creationDateForResource'))),
+                resourceCreated: toDate(getFirstValue(selectField(source, 'creationDateForResource'))),
+            }),
+            revisionDateForResource: (output, source) => ({
+                ...output,
+                resourceUpdated: toDate(getFirstValue(selectField(source, 'revisionDateForResource'))),
             }),
             createDate: (output, source) => ({
                 ...output,
@@ -21105,6 +21343,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' }); }
 }
@@ -21256,6 +21504,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 }); }
 }
@@ -21265,7 +21546,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;
@@ -21273,6 +21554,7 @@ class Gn4PlatformService {
         this.toolsApiService = toolsApiService;
         this.registriesApiService = registriesApiService;
         this.langService = langService;
+        this.userfeedbackApiService = userfeedbackApiService;
         this.type = 'GeoNetwork';
         this.keyTranslations$ = this.toolsApiService
             .getTranslationsPackage1('gnui')
@@ -21292,7 +21574,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() {
@@ -21305,7 +21587,7 @@ class Gn4PlatformService {
         return this.me$;
     }
     isAnonymous() {
-        return this.isAnonymous$;
+        return this.isUserAnonymous$;
     }
     getOrganizations() {
         return undefined;
@@ -21341,12 +21623,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 [
@@ -23934,11 +24227,17 @@ class DropdownSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DropdownSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: { title: "title", showTitle: "showTitle", ariaName: "ariaName", choices: "choices", selected: "selected", maxRows: "maxRows", extraBtnClass: "extraBtnClass", minWidth: "minWidth" }, outputs: { selectValue: "selectValue" }, viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "choiceInputs", predicate: ["choiceInputs"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-col sm:flex-row sm:items-center relative w-full\">\n  <span\n    *ngIf=\"showTitle\"\n    class=\"tracking-wide text-sm mb-2 sm:mb-0 sm:mr-2 whitespace-nowrap\"\n    [attr.for]=\"id\"\n  >\n    {{ title }}\n  </span>\n  <gn-ui-button\n    type=\"outline\"\n    class=\"grow min-w-0\"\n    extraClass=\"bg-background !p-[8px] !pl-[16px] flex flex-row w-full {{\n      extraBtnClass\n    }}\"\n    [title]=\"title\"\n    [attr.aria-owns]=\"id\"\n    (buttonClick)=\"openOverlay()\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\n    <div class=\"grow font-medium truncate py-1 mr-2 text-left\">\n      {{ getChoiceLabel() | translate }}\n    </div>\n    <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n      <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n      <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n    </mat-icon>\n  </gn-ui-button>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.min-width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n  >\n    <button\n      #choiceInputs\n      type=\"button\"\n      *ngFor=\"let choice of choices\"\n      [title]=\"choice.label | translate\"\n      class=\"flex px-5 py-1 w-full text-start cursor-pointer transition-colors\"\n      [ngClass]=\"\n        isSelected(choice)\n          ? 'text-white bg-primary hover:text-white hover:bg-primary-darker focus:text-white focus:bg-primary-darker'\n          : 'text-gray-900 hover:text-primary-darkest hover:bg-gray-50 focus:text-primary-darkest focus:bg-gray-50'\n      \"\n      (click)=\"onSelectValue(choice)\"\n      (keydown)=\"selectIfEnter($event, choice)\"\n      [attr.data-cy-value]=\"choice.value.toString()\"\n      [attr.data-cy-active]=\"isSelected(choice) ? 'true' : undefined\"\n    >\n      <span class=\"text-[14px]\">\n        {{ choice.label | translate }}\n      </span>\n    </button>\n  </div>\n</ng-template>\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: "directive", type: i1$4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DropdownSelectorComponent, isStandalone: true, selector: "gn-ui-dropdown-selector", inputs: { title: "title", showTitle: "showTitle", ariaName: "ariaName", choices: "choices", selected: "selected", maxRows: "maxRows", extraBtnClass: "extraBtnClass", minWidth: "minWidth" }, outputs: { selectValue: "selectValue" }, viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "choiceInputs", predicate: ["choiceInputs"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-col sm:flex-row sm:items-center relative w-full\">\n  <span\n    *ngIf=\"showTitle\"\n    class=\"tracking-wide text-sm mb-2 sm:mb-0 sm:mr-2 whitespace-nowrap\"\n    [attr.for]=\"id\"\n  >\n    {{ title }}\n  </span>\n  <gn-ui-button\n    type=\"outline\"\n    class=\"grow min-w-0\"\n    extraClass=\"bg-background !p-[8px] !pl-[16px] flex flex-row w-full {{\n      extraBtnClass\n    }}\"\n    [title]=\"title\"\n    [attr.aria-owns]=\"id\"\n    (buttonClick)=\"openOverlay()\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\n    <div class=\"grow font-medium truncate py-1 mr-2 text-left\">\n      {{ getChoiceLabel() | translate }}\n    </div>\n    <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n      <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n      <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n    </mat-icon>\n  </gn-ui-button>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.min-width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n  >\n    <button\n      #choiceInputs\n      type=\"button\"\n      *ngFor=\"let choice of choices\"\n      [title]=\"choice.label | translate\"\n      class=\"flex px-5 py-1 w-full text-start cursor-pointer transition-colors\"\n      [ngClass]=\"\n        isSelected(choice)\n          ? 'text-white bg-primary hover:text-white hover:bg-primary-darker focus:text-white focus:bg-primary-darker'\n          : 'text-gray-900 hover:text-primary-darkest hover:bg-gray-50 focus:text-primary-darkest focus:bg-gray-50'\n      \"\n      (click)=\"onSelectValue(choice)\"\n      (keydown)=\"selectIfEnter($event, choice)\"\n      [attr.data-cy-value]=\"choice.value.toString()\"\n      [attr.data-cy-active]=\"isSelected(choice) ? 'true' : undefined\"\n    >\n      <span class=\"text-[14px]\">\n        {{ choice.label | translate }}\n      </span>\n    </button>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: DropdownSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-dropdown-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col sm:flex-row sm:items-center relative w-full\">\n  <span\n    *ngIf=\"showTitle\"\n    class=\"tracking-wide text-sm mb-2 sm:mb-0 sm:mr-2 whitespace-nowrap\"\n    [attr.for]=\"id\"\n  >\n    {{ title }}\n  </span>\n  <gn-ui-button\n    type=\"outline\"\n    class=\"grow min-w-0\"\n    extraClass=\"bg-background !p-[8px] !pl-[16px] flex flex-row w-full {{\n      extraBtnClass\n    }}\"\n    [title]=\"title\"\n    [attr.aria-owns]=\"id\"\n    (buttonClick)=\"openOverlay()\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\n    <div class=\"grow font-medium truncate py-1 mr-2 text-left\">\n      {{ getChoiceLabel() | translate }}\n    </div>\n    <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n      <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n      <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n    </mat-icon>\n  </gn-ui-button>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.min-width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n  >\n    <button\n      #choiceInputs\n      type=\"button\"\n      *ngFor=\"let choice of choices\"\n      [title]=\"choice.label | translate\"\n      class=\"flex px-5 py-1 w-full text-start cursor-pointer transition-colors\"\n      [ngClass]=\"\n        isSelected(choice)\n          ? 'text-white bg-primary hover:text-white hover:bg-primary-darker focus:text-white focus:bg-primary-darker'\n          : 'text-gray-900 hover:text-primary-darkest hover:bg-gray-50 focus:text-primary-darkest focus:bg-gray-50'\n      \"\n      (click)=\"onSelectValue(choice)\"\n      (keydown)=\"selectIfEnter($event, choice)\"\n      [attr.data-cy-value]=\"choice.value.toString()\"\n      [attr.data-cy-active]=\"isSelected(choice) ? 'true' : undefined\"\n    >\n      <span class=\"text-[14px]\">\n        {{ choice.label | translate }}\n      </span>\n    </button>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'gn-ui-dropdown-selector', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ButtonComponent,
+                        OverlayModule,
+                        MatIconModule,
+                        TranslateModule,
+                    ], template: "<div class=\"flex flex-col sm:flex-row sm:items-center relative w-full\">\n  <span\n    *ngIf=\"showTitle\"\n    class=\"tracking-wide text-sm mb-2 sm:mb-0 sm:mr-2 whitespace-nowrap\"\n    [attr.for]=\"id\"\n  >\n    {{ title }}\n  </span>\n  <gn-ui-button\n    type=\"outline\"\n    class=\"grow min-w-0\"\n    extraClass=\"bg-background !p-[8px] !pl-[16px] flex flex-row w-full {{\n      extraBtnClass\n    }}\"\n    [title]=\"title\"\n    [attr.aria-owns]=\"id\"\n    (buttonClick)=\"openOverlay()\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\n    <div class=\"grow font-medium truncate py-1 mr-2 text-left\">\n      {{ getChoiceLabel() | translate }}\n    </div>\n    <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n      <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n      <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n    </mat-icon>\n  </gn-ui-button>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.min-width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n  >\n    <button\n      #choiceInputs\n      type=\"button\"\n      *ngFor=\"let choice of choices\"\n      [title]=\"choice.label | translate\"\n      class=\"flex px-5 py-1 w-full text-start cursor-pointer transition-colors\"\n      [ngClass]=\"\n        isSelected(choice)\n          ? 'text-white bg-primary hover:text-white hover:bg-primary-darker focus:text-white focus:bg-primary-darker'\n          : 'text-gray-900 hover:text-primary-darkest hover:bg-gray-50 focus:text-primary-darkest focus:bg-gray-50'\n      \"\n      (click)=\"onSelectValue(choice)\"\n      (keydown)=\"selectIfEnter($event, choice)\"\n      [attr.data-cy-value]=\"choice.value.toString()\"\n      [attr.data-cy-active]=\"isSelected(choice) ? 'true' : undefined\"\n    >\n      <span class=\"text-[14px]\">\n        {{ choice.label | translate }}\n      </span>\n    </button>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], showTitle: [{
@@ -24152,11 +24451,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);
     }
@@ -24169,13 +24482,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: [{
@@ -24256,9 +24571,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);
@@ -24272,12 +24606,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
@@ -24804,192 +25142,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
-class FormFieldSimpleComponent {
-    constructor() {
-        this.readonly = false;
-        this.invalid = false;
-        this.placeholder = '';
-    }
-    get inputType() {
-        switch (this.type) {
-            case 'url':
-            case 'text':
-                return 'text';
-            case 'date':
-                return 'datetime-local';
-            case 'number':
-                return 'number';
-            case 'toggle':
-                return 'checkbox';
-            default:
-                return '';
-        }
-    }
-    get isSelect() {
-        return this.type === 'list';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: { type: "type", control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder", options: "options" }, ngImport: i0, template: "<input\n  *ngIf=\"!isSelect\"\n  [type]=\"inputType\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n<select\n  *ngIf=\"isSelect\"\n  [formControl]=\"control\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n>\n  <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n    {{ option.label }}\n  </option>\n</select>\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: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSimpleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field-simple', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  *ngIf=\"!isSelect\"\n  [type]=\"inputType\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n<select\n  *ngIf=\"isSelect\"\n  [formControl]=\"control\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n>\n  <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n    {{ option.label }}\n  </option>\n</select>\n" }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }] } });
-
-class FormFieldFileComponent {
-    constructor() {
-        this.readonly = false;
-        this.invalid = false;
-        this.placeholder = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldFileComponent, selector: "gn-ui-form-field-file", inputs: { control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder" }, ngImport: i0, template: "<input\n  type=\"file\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldFileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field-file', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  type=\"file\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n" }]
-        }], propDecorators: { control: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }] } });
-
-class FormFieldRichComponent {
-    constructor() {
-        this.readonly = false;
-        this.invalid = false;
-        this.placeholder = '';
-    }
-    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, selector: "gn-ui-form-field-rich", inputs: { control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder" }, ngImport: i0, template: "<textarea\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white h-full resize-none transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n></textarea>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldRichComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field-rich', changeDetection: ChangeDetectionStrategy.OnPush, template: "<textarea\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white h-full resize-none transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n></textarea>\n" }]
-        }], propDecorators: { control: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], invalid: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }] } });
-
-class FormFieldObjectComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldObjectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldObjectComponent, selector: "gn-ui-form-field-object", ngImport: i0, template: "<p>form-field-object works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldObjectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field-object', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>form-field-object works!</p>\n" }]
-        }] });
-
-class FormFieldArrayComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldArrayComponent, selector: "gn-ui-form-field-array", ngImport: i0, template: "<p>form-field-array works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldArrayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field-array', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>form-field-array works!</p>\n" }]
-        }] });
-
-class FormFieldSpatialExtentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSpatialExtentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent", ngImport: i0, template: "<p>form-field-spatial-extent works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSpatialExtentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field-spatial-extent', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>form-field-spatial-extent works!</p>\n" }]
-        }] });
-
-class FormFieldTemporalExtentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldTemporalExtentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldTemporalExtentComponent, selector: "gn-ui-form-field-temporal-extent", ngImport: i0, template: "<p>form-field-temporal-extent works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldTemporalExtentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-form-field-temporal-extent', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>form-field-temporal-extent works!</p>\n" }]
-        }] });
-
-class FormFieldComponent {
-    set value(v) {
-        this.formControl.setValue(v, {
-            emitEvent: false,
-        });
-    }
-    constructor() {
-        this.formControl = new FormControl();
-        this.valueChange = this.formControl.valueChanges;
-    }
-    get simpleType() {
-        return this.config.type;
-    }
-    get isSimpleField() {
-        return (this.config.type === 'text' ||
-            this.config.type === 'number' ||
-            this.config.type === 'date' ||
-            this.config.type === 'list' ||
-            this.config.type === 'url' ||
-            this.config.type === 'toggle');
-    }
-    get isRichField() {
-        return this.config.type === 'rich';
-    }
-    get isFileField() {
-        return this.config.type === 'file';
-    }
-    get isSpatialExtentField() {
-        return this.config.type === 'spatial_extent';
-    }
-    get isTemporalExtentField() {
-        return this.config.type === 'temporal_extent';
-    }
-    get isArrayField() {
-        return this.config.type === 'array';
-    }
-    get isObjectField() {
-        return this.config.type === 'object';
-    }
-    get isFieldOk() {
-        return !this.config.locked && !this.config.invalid;
-    }
-    get isFieldLocked() {
-        return this.config.locked;
-    }
-    get isFieldInvalid() {
-        return !this.config.locked && this.config.invalid;
-    }
-    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, selector: "gn-ui-form-field", inputs: { 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=\"isRichField\">\n    <gn-ui-form-field-rich\n      class=\"grow\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\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: "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: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: ["type", "control", "readonly", "invalid", "placeholder", "options"] }, { kind: "component", type: FormFieldArrayComponent, selector: "gn-ui-form-field-array" }, { kind: "component", type: FormFieldObjectComponent, selector: "gn-ui-form-field-object" }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["control", "readonly", "invalid", "placeholder"] }, { kind: "component", type: FormFieldFileComponent, selector: "gn-ui-form-field-file", inputs: ["control", "readonly", "invalid", "placeholder"] }, { kind: "component", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent" }, { kind: "component", type: FormFieldTemporalExtentComponent, selector: "gn-ui-form-field-temporal-extent" }, { 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, 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=\"isRichField\">\n    <gn-ui-form-field-rich\n      class=\"grow\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\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: { config: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }] } });
-
 class CopyTextButtonComponent {
     constructor() {
         this.displayText = true;
@@ -25359,8 +25511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 class UiInputsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, declarations: [DropdownSelectorComponent,
-            AutocompleteComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, declarations: [AutocompleteComponent,
             TextInputComponent,
             DragAndDropFileInputComponent,
             ChipsInputComponent,
@@ -25368,14 +25519,6 @@ class UiInputsModule {
             StarToggleComponent,
             DropdownMultiselectComponent,
             ViewportIntersectorComponent,
-            FormFieldComponent,
-            FormFieldSimpleComponent,
-            FormFieldArrayComponent,
-            FormFieldObjectComponent,
-            FormFieldRichComponent,
-            FormFieldFileComponent,
-            FormFieldSpatialExtentComponent,
-            FormFieldTemporalExtentComponent,
             CheckToggleComponent,
             CopyTextButtonComponent,
             CheckboxComponent,
@@ -25398,7 +25541,8 @@ class UiInputsModule {
             EditableLabelDirective,
             TextAreaComponent,
             ButtonComponent,
-            ImageInputComponent], exports: [DropdownSelectorComponent,
+            ImageInputComponent,
+            DropdownSelectorComponent], exports: [DropdownSelectorComponent,
             AutocompleteComponent,
             ButtonComponent,
             TextInputComponent,
@@ -25409,7 +25553,6 @@ class UiInputsModule {
             StarToggleComponent,
             DropdownMultiselectComponent,
             ViewportIntersectorComponent,
-            FormFieldComponent,
             CheckToggleComponent,
             CopyTextButtonComponent,
             CheckboxComponent,
@@ -25434,13 +25577,13 @@ class UiInputsModule {
             MatInputModule,
             MatDatepickerModule,
             MatNativeDateModule,
-            ImageInputComponent] }); }
+            ImageInputComponent,
+            DropdownSelectorComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        DropdownSelectorComponent,
                         AutocompleteComponent,
                         TextInputComponent,
                         DragAndDropFileInputComponent,
@@ -25449,14 +25592,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         StarToggleComponent,
                         DropdownMultiselectComponent,
                         ViewportIntersectorComponent,
-                        FormFieldComponent,
-                        FormFieldSimpleComponent,
-                        FormFieldArrayComponent,
-                        FormFieldObjectComponent,
-                        FormFieldRichComponent,
-                        FormFieldFileComponent,
-                        FormFieldSpatialExtentComponent,
-                        FormFieldTemporalExtentComponent,
                         CheckToggleComponent,
                         CopyTextButtonComponent,
                         CheckboxComponent,
@@ -25485,6 +25620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         TextAreaComponent,
                         ButtonComponent,
                         ImageInputComponent,
+                        DropdownSelectorComponent,
                     ],
                     exports: [
                         DropdownSelectorComponent,
@@ -25498,7 +25634,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         StarToggleComponent,
                         DropdownMultiselectComponent,
                         ViewportIntersectorComponent,
-                        FormFieldComponent,
                         CheckToggleComponent,
                         CopyTextButtonComponent,
                         CheckboxComponent,
@@ -25559,7 +25694,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,
@@ -26298,44 +26433,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Output
             }] } });
 
-class ExpandablePanelComponent {
+class ApiCardComponent {
     constructor() {
-        this.collapsed = true;
-        this.maxHeight = this.setMaxHeight();
+        this.currentlyActive = false;
+        this.openRecordApiForm = new EventEmitter();
     }
-    toggle() {
-        this.collapsed = !this.collapsed;
-        this.maxHeight = this.setMaxHeight();
+    ngOnInit() {
+        this.displayApiFormButton =
+            this.link.accessServiceProtocol === 'ogcFeatures' ? true : false;
     }
-    setMaxHeight() {
-        return `${this.collapsed ? '0' : this.contentDiv.nativeElement.scrollHeight}px`;
+    ngOnChanges(changes) {
+        this.currentlyActive =
+            changes.currentLink.currentValue === this.link ? true : false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ExpandablePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: { title: "title", collapsed: "collapsed" }, viewQueries: [{ propertyName: "contentDiv", first: true, predicate: ["contentDiv"], descendants: true }], ngImport: i0, template: "<div\n  class=\"group flex align-middle title border-b border-gray-100 cursor-pointer pt-2.5\"\n  (click)=\"toggle()\"\n>\n  <div class=\"grow font-medium text-black text-sm\">\n    {{ title }}\n  </div>\n  <div\n    class=\"w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity\"\n  >\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"collapsed\">add</mat-icon>\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"!collapsed\"\n      >remove</mat-icon\n    >\n  </div>\n</div>\n<div\n  class=\"content overflow-hidden transition-[max-height] duration-300\"\n  [ngClass]=\"collapsed ? 'ease-out' : 'ease-in'\"\n  [style.maxHeight]=\"maxHeight\"\n  #contentDiv\n>\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    openRecordApiFormPanel() {
+        if (this.displayApiFormButton) {
+            this.currentlyActive = !this.currentlyActive;
+            this.openRecordApiForm.emit(this.currentlyActive ? this.link : undefined);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ApiCardComponent, selector: "gn-ui-api-card", inputs: { link: "link", currentLink: "currentLink" }, outputs: { openRecordApiForm: "openRecordApiForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden\"\n  [ngClass]=\"{ 'cursor-pointer': displayApiFormButton }\"\n  (click)=\"openRecordApiFormPanel()\"\n>\n  <div\n    class=\"font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]\"\n  >\n    {{ link.name || link.description }}\n  </div>\n  <div class=\"\">\n    <div class=\"flex flex-row justify-between\">\n      <span\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive\n        }\"\n        >{{ link.accessServiceProtocol }}</span\n      >\n      <gn-ui-copy-text-button\n        *ngIf=\"!displayApiFormButton\"\n        [text]=\"link.url.toString()\"\n        [tooltipText]=\"'tooltip.url.copy' | translate\"\n        [displayText]=\"false\"\n      ></gn-ui-copy-text-button>\n      <button\n        *ngIf=\"displayApiFormButton\"\n        type=\"button\"\n        [ngClass]=\"{\n          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n            displayText\n        }\"\n        mat-raised-button\n        [matTooltip]=\"\n          !currentlyActive\n            ? ('record.metadata.api.form.openForm' | translate)\n            : ('record.metadata.api.form.closeForm' | translate)\n        \"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon\n          class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n          [ngClass]=\"{\n            'text-secondary opacity-100': currentlyActive\n          }\"\n          >more_horiz</mat-icon\n        >\n      </button>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { 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: ExpandablePanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-expandable-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"group flex align-middle title border-b border-gray-100 cursor-pointer pt-2.5\"\n  (click)=\"toggle()\"\n>\n  <div class=\"grow font-medium text-black text-sm\">\n    {{ title }}\n  </div>\n  <div\n    class=\"w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity\"\n  >\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"collapsed\">add</mat-icon>\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"!collapsed\"\n      >remove</mat-icon\n    >\n  </div>\n</div>\n<div\n  class=\"content overflow-hidden transition-[max-height] duration-300\"\n  [ngClass]=\"collapsed ? 'ease-out' : 'ease-in'\"\n  [style.maxHeight]=\"maxHeight\"\n  #contentDiv\n>\n  <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { title: [{
+            args: [{ selector: 'gn-ui-api-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden\"\n  [ngClass]=\"{ 'cursor-pointer': displayApiFormButton }\"\n  (click)=\"openRecordApiFormPanel()\"\n>\n  <div\n    class=\"font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]\"\n  >\n    {{ link.name || link.description }}\n  </div>\n  <div class=\"\">\n    <div class=\"flex flex-row justify-between\">\n      <span\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive\n        }\"\n        >{{ link.accessServiceProtocol }}</span\n      >\n      <gn-ui-copy-text-button\n        *ngIf=\"!displayApiFormButton\"\n        [text]=\"link.url.toString()\"\n        [tooltipText]=\"'tooltip.url.copy' | translate\"\n        [displayText]=\"false\"\n      ></gn-ui-copy-text-button>\n      <button\n        *ngIf=\"displayApiFormButton\"\n        type=\"button\"\n        [ngClass]=\"{\n          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n            displayText\n        }\"\n        mat-raised-button\n        [matTooltip]=\"\n          !currentlyActive\n            ? ('record.metadata.api.form.openForm' | translate)\n            : ('record.metadata.api.form.closeForm' | translate)\n        \"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon\n          class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n          [ngClass]=\"{\n            'text-secondary opacity-100': currentlyActive\n          }\"\n          >more_horiz</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { link: [{
                 type: Input
-            }], collapsed: [{
+            }], currentLink: [{
                 type: Input
-            }], contentDiv: [{
-                type: ViewChild,
-                args: ['contentDiv']
+            }], openRecordApiForm: [{
+                type: Output
             }] } });
 
-class MarkdownParserComponent {
-    get parsedMarkdown() {
-        return marked.parse(this.textContent);
+class AvatarComponent {
+    hideImage() {
+        this.avatarUrl = this.avatarPlaceholder;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownParserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MarkdownParserComponent, isStandalone: true, selector: "gn-ui-markdown-parser", inputs: { textContent: "textContent" }, ngImport: i0, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host ::ng-deep .markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0px 0px 1.5rem;line-height:1.5;word-wrap:break-word}:host ::ng-deep .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host ::ng-deep .markdown-body h1,:host ::ng-deep .markdown-body h2,:host ::ng-deep .markdown-body h3,:host ::ng-deep .markdown-body h4,:host ::ng-deep .markdown-body h5,:host ::ng-deep .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host ::ng-deep .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host ::ng-deep .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host ::ng-deep .markdown-body p{margin-top:0;margin-bottom:10px}:host ::ng-deep .markdown-body p>a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none}:host ::ng-deep .markdown-body p>a:hover{color:var(--color-primary-darker)!important;@apply underline;}:host ::ng-deep .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host ::ng-deep .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host ::ng-deep .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host ::ng-deep .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host ::ng-deep .markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;border:0}:host ::ng-deep .markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--color-secondary);height:.15em;padding:0;margin:24px 0;background-color:var(--color-secondary);border:0}:host ::ng-deep .markdown-body hr:before{display:table;content:\"\"}:host ::ng-deep .markdown-body hr:after{display:table;clear:both;content:\"\"}:host ::ng-deep .markdown-body ul,:host ::ng-deep .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host ::ng-deep .markdown-body ol ol,:host ::ng-deep .markdown-body ul ol{list-style-type:lower-roman}:host ::ng-deep .markdown-body ul ul ol,:host ::ng-deep .markdown-body ul ol ol,:host ::ng-deep .markdown-body ol ul ol,:host ::ng-deep .markdown-body ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host ::ng-deep .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host ::ng-deep .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host ::ng-deep .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body div>ol:not([type]){list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host ::ng-deep .markdown-body td,:host ::ng-deep .markdown-body th{padding:0}:host ::ng-deep .markdown-body th{color:var(--color-secondary)}:host ::ng-deep .markdown-body table th,:host ::ng-deep .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host ::ng-deep .markdown-body table td>:last-child{margin-bottom:0}:host ::ng-deep .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host ::ng-deep .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host ::ng-deep .markdown-body table img{background-color:transparent}:host ::ng-deep .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host ::ng-deep .markdown-body img[align=right]{padding-left:20px}:host ::ng-deep .markdown-body img[align=left]{padding-right:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AvatarComponent, selector: "gn-ui-avatar", inputs: { avatarUrl: "avatarUrl", avatarPlaceholder: "avatarPlaceholder" }, ngImport: i0, template: "<img\n  *ngIf=\"avatarUrl\"\n  class=\"rounded-full object-cover\"\n  [src]=\"avatarUrl\"\n  (error)=\"hideImage()\"\n/>\n<div\n  *ngIf=\"!avatarUrl\"\n  class=\"w-full h-full rounded-full bg-gradient-to-tr from-primary to-slate-200\"\n></div>\n", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownParserComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-markdown-parser', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host ::ng-deep .markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0px 0px 1.5rem;line-height:1.5;word-wrap:break-word}:host ::ng-deep .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host ::ng-deep .markdown-body h1,:host ::ng-deep .markdown-body h2,:host ::ng-deep .markdown-body h3,:host ::ng-deep .markdown-body h4,:host ::ng-deep .markdown-body h5,:host ::ng-deep .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host ::ng-deep .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host ::ng-deep .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host ::ng-deep .markdown-body p{margin-top:0;margin-bottom:10px}:host ::ng-deep .markdown-body p>a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none}:host ::ng-deep .markdown-body p>a:hover{color:var(--color-primary-darker)!important;@apply underline;}:host ::ng-deep .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host ::ng-deep .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host ::ng-deep .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host ::ng-deep .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host ::ng-deep .markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;border:0}:host ::ng-deep .markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--color-secondary);height:.15em;padding:0;margin:24px 0;background-color:var(--color-secondary);border:0}:host ::ng-deep .markdown-body hr:before{display:table;content:\"\"}:host ::ng-deep .markdown-body hr:after{display:table;clear:both;content:\"\"}:host ::ng-deep .markdown-body ul,:host ::ng-deep .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host ::ng-deep .markdown-body ol ol,:host ::ng-deep .markdown-body ul ol{list-style-type:lower-roman}:host ::ng-deep .markdown-body ul ul ol,:host ::ng-deep .markdown-body ul ol ol,:host ::ng-deep .markdown-body ol ul ol,:host ::ng-deep .markdown-body ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host ::ng-deep .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host ::ng-deep .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host ::ng-deep .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body div>ol:not([type]){list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host ::ng-deep .markdown-body td,:host ::ng-deep .markdown-body th{padding:0}:host ::ng-deep .markdown-body th{color:var(--color-secondary)}:host ::ng-deep .markdown-body table th,:host ::ng-deep .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host ::ng-deep .markdown-body table td>:last-child{margin-bottom:0}:host ::ng-deep .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host ::ng-deep .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host ::ng-deep .markdown-body table img{background-color:transparent}:host ::ng-deep .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host ::ng-deep .markdown-body img[align=right]{padding-left:20px}:host ::ng-deep .markdown-body img[align=left]{padding-right:20px}\n"] }]
-        }], propDecorators: { textContent: [{
+            args: [{ selector: 'gn-ui-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n  *ngIf=\"avatarUrl\"\n  class=\"rounded-full object-cover\"\n  [src]=\"avatarUrl\"\n  (error)=\"hideImage()\"\n/>\n<div\n  *ngIf=\"!avatarUrl\"\n  class=\"w-full h-full rounded-full bg-gradient-to-tr from-primary to-slate-200\"\n></div>\n" }]
+        }], propDecorators: { avatarUrl: [{
+                type: Input
+            }], avatarPlaceholder: [{
                 type: Input
             }] } });
 
@@ -26355,80 +26498,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
-/* eslint-disable @angular-eslint/directive-selector */
-class GnUiLinkifyDirective {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
+class DownloadItemComponent {
+    constructor() {
+        this.exportUrl = new EventEmitter();
     }
-    ngOnInit() {
-        setTimeout(() => {
-            this.processLinks(this.el.nativeElement);
-        }, 0);
+    openUrl() {
+        this.exportUrl.emit(this.link.url.toString());
     }
-    processLinks(container) {
-        const nodes = Array.from(container.childNodes);
-        nodes.forEach((node) => {
-            if (node instanceof Text) {
-                const textNode = node;
-                const linkified = this.linkifyNode(textNode.nodeValue);
-                if (linkified) {
-                    this.createLinkElements(container, linkified, node);
-                }
-            }
-            else if (node instanceof HTMLAnchorElement) {
-                const url = node.href;
-                const displayValue = node.innerHTML;
-                const linkified = this.linkifyNode(displayValue, url);
-                if (linkified) {
-                    this.createLinkElements(container, linkified, node);
-                }
-            }
-            else {
-                this.processLinks(node);
-            }
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: { link: "link", color: "color", format: "format", isFromWfs: "isFromWfs" }, outputs: { exportUrl: "exportUrl" }, ngImport: i0, template: "<a\n  href=\"{{ link.url }}\"\n  target=\"_blank\"\n  class=\"group flex justify-between card-shadow px-6 py-5 cursor-pointer\"\n  rel=\"noopener\"\n>\n  <div class=\"grow-1 w-full overflow-hidden\">\n    <div\n      class=\"text-21 text-black truncate font-title w-11/12\"\n      [title]=\"link.description || link.name\"\n    >\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"pt-1\">\n      <span\n        class=\"inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100\"\n        [style.background-color]=\"color\"\n        data-cy=\"download-format\"\n        >{{ format || ('downloads.format.unknown' | translate) }}</span\n      >\n      <span\n        class=\"pl-2 inline-flex items-center text-gray-800 text-sm\"\n        *ngIf=\"isFromWfs\"\n        translate=\"\"\n        >datahub.search.filter.generatedByWfs</span\n      >\n    </div>\n  </div>\n  <div class=\"shrink-1 w-14 flex flex-col justify-center items-center\">\n    <mat-icon class=\"!w-8 !h-8 card-icon text-3xl material-symbols-outlined\">\n      cloud_download\n    </mat-icon>\n  </div>\n</a>\n", styles: [""], dependencies: [{ 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: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: DownloadItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-download-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  href=\"{{ link.url }}\"\n  target=\"_blank\"\n  class=\"group flex justify-between card-shadow px-6 py-5 cursor-pointer\"\n  rel=\"noopener\"\n>\n  <div class=\"grow-1 w-full overflow-hidden\">\n    <div\n      class=\"text-21 text-black truncate font-title w-11/12\"\n      [title]=\"link.description || link.name\"\n    >\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"pt-1\">\n      <span\n        class=\"inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100\"\n        [style.background-color]=\"color\"\n        data-cy=\"download-format\"\n        >{{ format || ('downloads.format.unknown' | translate) }}</span\n      >\n      <span\n        class=\"pl-2 inline-flex items-center text-gray-800 text-sm\"\n        *ngIf=\"isFromWfs\"\n        translate=\"\"\n        >datahub.search.filter.generatedByWfs</span\n      >\n    </div>\n  </div>\n  <div class=\"shrink-1 w-14 flex flex-col justify-center items-center\">\n    <mat-icon class=\"!w-8 !h-8 card-icon text-3xl material-symbols-outlined\">\n      cloud_download\n    </mat-icon>\n  </div>\n</a>\n" }]
+        }], propDecorators: { link: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], isFromWfs: [{
+                type: Input
+            }], exportUrl: [{
+                type: Output
+            }] } });
+
+marker('datahub.search.filter.all');
+marker('datahub.search.filter.others');
+const FILTER_FORMATS = ['all', 'csv', 'excel', 'json', 'shp', 'others'];
+class DownloadsListComponent {
+    constructor(translateService) {
+        this.translateService = translateService;
+        this.activeFilterFormats = ['all'];
     }
-    linkifyNode(displayValue, url) {
-        if (url) {
-            displayValue = this.createLink(displayValue, url);
+    get filteredLinks() {
+        return this.links.filter((link) => this.activeFilterFormats.some((format) => this.isLinkOfFormat(link, format)));
+    }
+    get visibleFormats() {
+        return FILTER_FORMATS.filter((format) => this.links.some((link) => this.isLinkOfFormat(link, format)));
+    }
+    toggleFilterFormat(format) {
+        if (format === 'all') {
+            this.activeFilterFormats = ['all'];
+            return;
+        }
+        if (this.isFilterActive(format)) {
+            this.activeFilterFormats = this.activeFilterFormats.filter((f) => format !== f);
         }
         else {
-            const urlRegex = /\bhttps?:\/\/(?:\([^\s()]+\)|[^\s()]+)+/g;
-            const matches = displayValue.match(urlRegex);
-            if (matches && matches.length > 0) {
-                matches.forEach((match) => {
-                    url = match;
-                    displayValue = displayValue.replace(match, (match) => {
-                        return this.createLink(match, url);
-                    });
-                });
-            }
+            this.activeFilterFormats = [
+                ...this.activeFilterFormats.filter((f) => f !== 'all'),
+                format,
+            ];
+        }
+        if (this.activeFilterFormats.length === 0) {
+            this.activeFilterFormats = ['all'];
         }
-        return displayValue;
     }
-    createLinkElements(container, htmlContent, node) {
-        const div = this.renderer.createElement('div');
-        div.innerHTML = htmlContent;
-        const fragment = document.createDocumentFragment();
-        Array.from(div.childNodes).forEach((childNode) => {
-            fragment.appendChild(childNode);
-        });
-        container.insertBefore(fragment, node);
-        container.removeChild(node);
+    isFilterActive(filter) {
+        return this.activeFilterFormats.includes(filter);
     }
-    createLink(displayValue, url) {
-        return `<a href="${url}" target="_blank" class="text-primary cursor-pointer hover:underline">${displayValue} <mat-icon class="material-symbols-outlined !w-[12px] !h-[14px] !text-[14px] opacity-75">open_in_new</mat-icon></a>`;
+    getFilterFormatTitle(format) {
+        if (format === 'all' || format === 'others') {
+            return this.translateService.instant(`datahub.search.filter.${format}`);
+        }
+        return format;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GnUiLinkifyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]", ngImport: i0 }); }
+    isLinkOfFormat(link, format) {
+        if (format === 'all') {
+            return true;
+        }
+        if (getFileFormat(link) === null) {
+            return format === 'others';
+        }
+        if (format === 'others') {
+            const knownFormats = FILTER_FORMATS.filter((format) => format !== 'all' && format !== 'others');
+            return knownFormats.every((knownFormat) => !getFileFormat(link).includes(knownFormat));
+        }
+        return getFileFormat(link).includes(format);
+    }
+    getLinkFormat(link) {
+        return getFileFormat(link);
+    }
+    getLinkColor(link) {
+        return getBadgeColor(getFileFormat(link));
+    }
+    isFromWfs(link) {
+        return link.type === 'service' && link.accessServiceProtocol === 'wfs';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadsListComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DownloadsListComponent, selector: "gn-ui-downloads-list", inputs: { links: "links" }, ngImport: i0, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromWfs]=\"isFromWfs(link)\"\n  ></gn-ui-download-item>\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: DownloadItemComponent, selector: "gn-ui-download-item", inputs: ["link", "color", "format", "isFromWfs"], outputs: ["exportUrl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GnUiLinkifyDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[gnUiLinkify]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadsListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-downloads-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromWfs]=\"isFromWfs(link)\"\n  ></gn-ui-download-item>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; }, propDecorators: { links: [{
+                type: Input
+            }] } });
+
+class ImageOverlayPreviewComponent {
+    constructor() {
+        this.isPlaceholderShown = new EventEmitter();
+    }
+    openLightbox(src) {
+        basicLightbox.create(`<img src="${src}"/>`).show();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ImageOverlayPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ImageOverlayPreviewComponent, selector: "gn-ui-image-overlay-preview", inputs: { imageUrl: "imageUrl" }, outputs: { isPlaceholderShown: "isPlaceholderShown" }, ngImport: i0, template: "<gn-ui-content-ghost\n  [showContent]=\"imageUrl !== undefined\"\n  ghostClass=\"h-48 mb-3\"\n>\n  <div\n    *ngIf=\"imageUrl\"\n    [showContent]=\"imageUrl !== undefined\"\n    data-cy=\"record-thumbnail\"\n    class=\"shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3\"\n  >\n    <gn-ui-thumbnail\n      class=\"relative h-full w-full\"\n      [thumbnailUrl]=\"imageUrl\"\n      fit=\"cover\"\n      (placeholderShown)=\"isPlaceholderShown.emit($event)\"\n    ></gn-ui-thumbnail>\n    <div class=\"relative\">\n      <gn-ui-button\n        class=\"absolute bottom-0 right-0 z-10 mr-2 mb-2\"\n        [type]=\"'outline'\"\n        [extraClass]=\"'!py-2 !px-0'\"\n        (buttonClick)=\"openLightbox(imageUrl)\"\n      >\n        <mat-icon class=\"material-symbols-outlined font-extralight\"\n          >zoom_out_map</mat-icon\n        >\n      </gn-ui-button>\n    </div>\n  </div>\n</gn-ui-content-ghost>\n", styles: [""], dependencies: [{ 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: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ImageOverlayPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-image-overlay-preview', template: "<gn-ui-content-ghost\n  [showContent]=\"imageUrl !== undefined\"\n  ghostClass=\"h-48 mb-3\"\n>\n  <div\n    *ngIf=\"imageUrl\"\n    [showContent]=\"imageUrl !== undefined\"\n    data-cy=\"record-thumbnail\"\n    class=\"shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3\"\n  >\n    <gn-ui-thumbnail\n      class=\"relative h-full w-full\"\n      [thumbnailUrl]=\"imageUrl\"\n      fit=\"cover\"\n      (placeholderShown)=\"isPlaceholderShown.emit($event)\"\n    ></gn-ui-thumbnail>\n    <div class=\"relative\">\n      <gn-ui-button\n        class=\"absolute bottom-0 right-0 z-10 mr-2 mb-2\"\n        [type]=\"'outline'\"\n        [extraClass]=\"'!py-2 !px-0'\"\n        (buttonClick)=\"openLightbox(imageUrl)\"\n      >\n        <mat-icon class=\"material-symbols-outlined font-extralight\"\n          >zoom_out_map</mat-icon\n        >\n      </gn-ui-button>\n    </div>\n  </div>\n</gn-ui-content-ghost>\n" }]
+        }], propDecorators: { imageUrl: [{
+                type: Input
+            }], isPlaceholderShown: [{
+                type: Output
+            }] } });
+
+class LinkCardComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: LinkCardComponent, selector: "gn-ui-link-card", inputs: { link: "link" }, ngImport: i0, template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80\"\n>\n  <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n    <p\n      class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n    >\n      {{ link.name }}\n    </p>\n    <p class=\"font-medium text-sm break-words\">\n      {{ link.description }}\n    </p>\n    <p\n      *ngIf=\"!link.name && !link.description\"\n      class=\"font-medium text-sm break-words truncate\"\n    >\n      {{ link.url }}\n    </p>\n  </div>\n  <div>\n    <mat-icon class=\"material-symbols-outlined card-icon\">open_in_new</mat-icon>\n  </div>\n</a>\n", styles: [""], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-link-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80\"\n>\n  <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n    <p\n      class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n    >\n      {{ link.name }}\n    </p>\n    <p class=\"font-medium text-sm break-words\">\n      {{ link.description }}\n    </p>\n    <p\n      *ngIf=\"!link.name && !link.description\"\n      class=\"font-medium text-sm break-words truncate\"\n    >\n      {{ link.url }}\n    </p>\n  </div>\n  <div>\n    <mat-icon class=\"material-symbols-outlined card-icon\">open_in_new</mat-icon>\n  </div>\n</a>\n" }]
+        }], propDecorators: { link: [{
+                type: Input
+            }] } });
+
+class MarkdownParserComponent {
+    get parsedMarkdown() {
+        return marked.parse(this.textContent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownParserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MarkdownParserComponent, isStandalone: true, selector: "gn-ui-markdown-parser", inputs: { textContent: "textContent" }, ngImport: i0, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host ::ng-deep .markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0px 0px 1.5rem;line-height:1.5;word-wrap:break-word}:host ::ng-deep .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host ::ng-deep .markdown-body h1,:host ::ng-deep .markdown-body h2,:host ::ng-deep .markdown-body h3,:host ::ng-deep .markdown-body h4,:host ::ng-deep .markdown-body h5,:host ::ng-deep .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host ::ng-deep .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host ::ng-deep .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host ::ng-deep .markdown-body p{margin-top:0;margin-bottom:10px}:host ::ng-deep .markdown-body p>a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none}:host ::ng-deep .markdown-body p>a:hover{color:var(--color-primary-darker)!important;@apply underline;}:host ::ng-deep .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host ::ng-deep .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host ::ng-deep .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host ::ng-deep .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host ::ng-deep .markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;border:0}:host ::ng-deep .markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--color-secondary);height:.15em;padding:0;margin:24px 0;background-color:var(--color-secondary);border:0}:host ::ng-deep .markdown-body hr:before{display:table;content:\"\"}:host ::ng-deep .markdown-body hr:after{display:table;clear:both;content:\"\"}:host ::ng-deep .markdown-body ul,:host ::ng-deep .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host ::ng-deep .markdown-body ol ol,:host ::ng-deep .markdown-body ul ol{list-style-type:lower-roman}:host ::ng-deep .markdown-body ul ul ol,:host ::ng-deep .markdown-body ul ol ol,:host ::ng-deep .markdown-body ol ul ol,:host ::ng-deep .markdown-body ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host ::ng-deep .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host ::ng-deep .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host ::ng-deep .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body div>ol:not([type]){list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host ::ng-deep .markdown-body td,:host ::ng-deep .markdown-body th{padding:0}:host ::ng-deep .markdown-body th{color:var(--color-secondary)}:host ::ng-deep .markdown-body table th,:host ::ng-deep .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host ::ng-deep .markdown-body table td>:last-child{margin-bottom:0}:host ::ng-deep .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host ::ng-deep .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host ::ng-deep .markdown-body table img{background-color:transparent}:host ::ng-deep .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host ::ng-deep .markdown-body img[align=right]{padding-left:20px}:host ::ng-deep .markdown-body img[align=left]{padding-right:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownParserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-markdown-parser', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host ::ng-deep .markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0px 0px 1.5rem;line-height:1.5;word-wrap:break-word}:host ::ng-deep .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host ::ng-deep .markdown-body h1,:host ::ng-deep .markdown-body h2,:host ::ng-deep .markdown-body h3,:host ::ng-deep .markdown-body h4,:host ::ng-deep .markdown-body h5,:host ::ng-deep .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host ::ng-deep .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host ::ng-deep .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host ::ng-deep .markdown-body p{margin-top:0;margin-bottom:10px}:host ::ng-deep .markdown-body p>a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none}:host ::ng-deep .markdown-body p>a:hover{color:var(--color-primary-darker)!important;@apply underline;}:host ::ng-deep .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host ::ng-deep .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host ::ng-deep .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host ::ng-deep .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host ::ng-deep .markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;border:0}:host ::ng-deep .markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--color-secondary);height:.15em;padding:0;margin:24px 0;background-color:var(--color-secondary);border:0}:host ::ng-deep .markdown-body hr:before{display:table;content:\"\"}:host ::ng-deep .markdown-body hr:after{display:table;clear:both;content:\"\"}:host ::ng-deep .markdown-body ul,:host ::ng-deep .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host ::ng-deep .markdown-body ol ol,:host ::ng-deep .markdown-body ul ol{list-style-type:lower-roman}:host ::ng-deep .markdown-body ul ul ol,:host ::ng-deep .markdown-body ul ol ol,:host ::ng-deep .markdown-body ol ul ol,:host ::ng-deep .markdown-body ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host ::ng-deep .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host ::ng-deep .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host ::ng-deep .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body div>ol:not([type]){list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host ::ng-deep .markdown-body td,:host ::ng-deep .markdown-body th{padding:0}:host ::ng-deep .markdown-body th{color:var(--color-secondary)}:host ::ng-deep .markdown-body table th,:host ::ng-deep .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host ::ng-deep .markdown-body table td>:last-child{margin-bottom:0}:host ::ng-deep .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host ::ng-deep .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host ::ng-deep .markdown-body table img{background-color:transparent}:host ::ng-deep .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host ::ng-deep .markdown-body img[align=right]{padding-left:20px}:host ::ng-deep .markdown-body img[align=left]{padding-right:20px}\n"] }]
+        }], propDecorators: { textContent: [{
+                type: Input
+            }] } });
+
+class MarkdownEditorComponent {
+    constructor() {
+        this.preview = false;
+        this.textContentChanged = new EventEmitter();
+    }
+    textContentChangedHandler(textContent) {
+        this.textContent = textContent;
+        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", "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,
+            args: [{ selector: 'gn-ui-markdown-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        ButtonComponent,
+                        TextAreaComponent,
+                        MarkdownParserComponent,
+                        TranslateModule,
+                    ], 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" }]
+        }], propDecorators: { preview: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], textContent: [{
+                type: Input
+            }], textContentChanged: [{
+                type: Output
+            }] } });
 
 class MaxLinesComponent {
     constructor(cdr) {
@@ -26495,6 +26741,155 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 args: ['container']
             }] } });
 
+class MetadataCatalogComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MetadataCatalogComponent, selector: "gn-ui-metadata-catalog", inputs: { sourceLabel: "sourceLabel" }, ngImport: i0, template: "<div>\n  <p class=\"text-gray-700 text-xs mb-3 uppercase\" translate>\n    record.metadata.catalog\n  </p>\n  <p class=\"text-primary font-title text-21 mb-1\">\n    {{ sourceLabel }}\n  </p>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataCatalogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-metadata-catalog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <p class=\"text-gray-700 text-xs mb-3 uppercase\" translate>\n    record.metadata.catalog\n  </p>\n  <p class=\"text-primary font-title text-21 mb-1\">\n    {{ sourceLabel }}\n  </p>\n</div>\n" }]
+        }], propDecorators: { sourceLabel: [{
+                type: Input
+            }] } });
+
+class MetadataContactComponent {
+    constructor() {
+        this.organizationClick = new EventEmitter();
+        this.contactClick = new EventEmitter();
+    }
+    get shownOrganization() {
+        return this.metadata.ownerOrganization;
+    }
+    get contacts() {
+        return ((this.metadata.kind === 'dataset'
+            ? this.metadata.contactsForResource
+            : this.metadata.contacts) || []);
+    }
+    get address() {
+        const addressParts = this.contacts[0].address
+            .split(',')
+            .map((part) => part.trim());
+        return addressParts;
+    }
+    onOrganizationClick() {
+        this.organizationClick.emit(this.shownOrganization);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MetadataContactComponent, selector: "gn-ui-metadata-contact", inputs: { metadata: "metadata" }, outputs: { organizationClick: "organizationClick", contactClick: "contactClick" }, ngImport: i0, template: "<div class=\"py-5 px-5 rounded bg-gray-100 text-black mb-6\">\n  <div class=\"grid gap-3 overflow-hidden\">\n    <div>\n      <p class=\"text-sm font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name\"\n        >\n          {{ shownOrganization?.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n    </div>\n    <div class=\"grid gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >call_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >person_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            location_on</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\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: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataContactComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-metadata-contact', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"py-5 px-5 rounded bg-gray-100 text-black mb-6\">\n  <div class=\"grid gap-3 overflow-hidden\">\n    <div>\n      <p class=\"text-sm font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name\"\n        >\n          {{ shownOrganization?.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n    </div>\n    <div class=\"grid gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >call_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >person_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            location_on</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { metadata: [{
+                type: Input
+            }], organizationClick: [{
+                type: Output
+            }], contactClick: [{
+                type: Output
+            }] } });
+
+class ExpandablePanelComponent {
+    constructor() {
+        this.collapsed = true;
+        this.maxHeight = this.setMaxHeight();
+    }
+    toggle() {
+        this.collapsed = !this.collapsed;
+        this.maxHeight = this.setMaxHeight();
+    }
+    setMaxHeight() {
+        return `${this.collapsed ? '0' : this.contentDiv.nativeElement.scrollHeight}px`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ExpandablePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: { title: "title", collapsed: "collapsed" }, viewQueries: [{ propertyName: "contentDiv", first: true, predicate: ["contentDiv"], descendants: true }], ngImport: i0, template: "<div\n  class=\"group flex align-middle title border-b border-gray-100 cursor-pointer pt-2.5\"\n  (click)=\"toggle()\"\n>\n  <div class=\"grow font-medium text-black text-sm\">\n    {{ title }}\n  </div>\n  <div\n    class=\"w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity\"\n  >\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"collapsed\">add</mat-icon>\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"!collapsed\"\n      >remove</mat-icon\n    >\n  </div>\n</div>\n<div\n  class=\"content overflow-hidden transition-[max-height] duration-300\"\n  [ngClass]=\"collapsed ? 'ease-out' : 'ease-in'\"\n  [style.maxHeight]=\"maxHeight\"\n  #contentDiv\n>\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ExpandablePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-expandable-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"group flex align-middle title border-b border-gray-100 cursor-pointer pt-2.5\"\n  (click)=\"toggle()\"\n>\n  <div class=\"grow font-medium text-black text-sm\">\n    {{ title }}\n  </div>\n  <div\n    class=\"w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity\"\n  >\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"collapsed\">add</mat-icon>\n    <mat-icon class=\"material-symbols-outlined\" *ngIf=\"!collapsed\"\n      >remove</mat-icon\n    >\n  </div>\n</div>\n<div\n  class=\"content overflow-hidden transition-[max-height] duration-300\"\n  [ngClass]=\"collapsed ? 'ease-out' : 'ease-in'\"\n  [style.maxHeight]=\"maxHeight\"\n  #contentDiv\n>\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], contentDiv: [{
+                type: ViewChild,
+                args: ['contentDiv']
+            }] } });
+
+/* eslint-disable @angular-eslint/directive-selector */
+class GnUiLinkifyDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.processLinks(this.el.nativeElement);
+        }, 0);
+    }
+    processLinks(container) {
+        const nodes = Array.from(container.childNodes);
+        nodes.forEach((node) => {
+            if (node instanceof Text) {
+                const textNode = node;
+                const linkified = this.linkifyNode(textNode.nodeValue);
+                if (linkified) {
+                    this.createLinkElements(container, linkified, node);
+                }
+            }
+            else if (node instanceof HTMLAnchorElement) {
+                const url = node.href;
+                const displayValue = node.innerHTML;
+                const linkified = this.linkifyNode(displayValue, url);
+                if (linkified) {
+                    this.createLinkElements(container, linkified, node);
+                }
+            }
+            else {
+                this.processLinks(node);
+            }
+        });
+    }
+    linkifyNode(displayValue, url) {
+        if (url) {
+            displayValue = this.createLink(displayValue, url);
+        }
+        else {
+            const urlRegex = /\bhttps?:\/\/(?:\([^\s()]+\)|[^\s()]+)+/g;
+            const matches = displayValue.match(urlRegex);
+            if (matches && matches.length > 0) {
+                matches.forEach((match) => {
+                    url = match;
+                    displayValue = displayValue.replace(match, (match) => {
+                        return this.createLink(match, url);
+                    });
+                });
+            }
+        }
+        return displayValue;
+    }
+    createLinkElements(container, htmlContent, node) {
+        const div = this.renderer.createElement('div');
+        div.innerHTML = htmlContent;
+        const fragment = document.createDocumentFragment();
+        Array.from(div.childNodes).forEach((childNode) => {
+            fragment.appendChild(childNode);
+        });
+        container.insertBefore(fragment, node);
+        container.removeChild(node);
+    }
+    createLink(displayValue, url) {
+        return `<a href="${url}" target="_blank" class="text-primary cursor-pointer hover:underline">${displayValue} <mat-icon class="material-symbols-outlined !w-[12px] !h-[14px] !text-[14px] opacity-75">open_in_new</mat-icon></a>`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GnUiLinkifyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GnUiLinkifyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gnUiLinkify]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; } });
+
 class MetadataInfoComponent {
     constructor() {
         this.keyword = new EventEmitter();
@@ -26572,210 +26967,210 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Output
             }] } });
 
-class DownloadItemComponent {
+class PaginationButtonsComponent {
     constructor() {
-        this.exportUrl = new EventEmitter();
-    }
-    openUrl() {
-        this.exportUrl.emit(this.link.url.toString());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: { link: "link", color: "color", format: "format", isFromWfs: "isFromWfs" }, outputs: { exportUrl: "exportUrl" }, ngImport: i0, template: "<a\n  href=\"{{ link.url }}\"\n  target=\"_blank\"\n  class=\"group flex justify-between card-shadow px-6 py-5 cursor-pointer\"\n  rel=\"noopener\"\n>\n  <div class=\"grow-1 w-full overflow-hidden\">\n    <div\n      class=\"text-21 text-black truncate font-title w-11/12\"\n      [title]=\"link.description || link.name\"\n    >\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"pt-1\">\n      <span\n        class=\"inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100\"\n        [style.background-color]=\"color\"\n        data-cy=\"download-format\"\n        >{{ format || ('downloads.format.unknown' | translate) }}</span\n      >\n      <span\n        class=\"pl-2 inline-flex items-center text-gray-800 text-sm\"\n        *ngIf=\"isFromWfs\"\n        translate=\"\"\n        >datahub.search.filter.generatedByWfs</span\n      >\n    </div>\n  </div>\n  <div class=\"shrink-1 w-14 flex flex-col justify-center items-center\">\n    <mat-icon class=\"!w-8 !h-8 card-icon text-3xl material-symbols-outlined\">\n      cloud_download\n    </mat-icon>\n  </div>\n</a>\n", styles: [""], dependencies: [{ 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: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: DownloadItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-download-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  href=\"{{ link.url }}\"\n  target=\"_blank\"\n  class=\"group flex justify-between card-shadow px-6 py-5 cursor-pointer\"\n  rel=\"noopener\"\n>\n  <div class=\"grow-1 w-full overflow-hidden\">\n    <div\n      class=\"text-21 text-black truncate font-title w-11/12\"\n      [title]=\"link.description || link.name\"\n    >\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"pt-1\">\n      <span\n        class=\"inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100\"\n        [style.background-color]=\"color\"\n        data-cy=\"download-format\"\n        >{{ format || ('downloads.format.unknown' | translate) }}</span\n      >\n      <span\n        class=\"pl-2 inline-flex items-center text-gray-800 text-sm\"\n        *ngIf=\"isFromWfs\"\n        translate=\"\"\n        >datahub.search.filter.generatedByWfs</span\n      >\n    </div>\n  </div>\n  <div class=\"shrink-1 w-14 flex flex-col justify-center items-center\">\n    <mat-icon class=\"!w-8 !h-8 card-icon text-3xl material-symbols-outlined\">\n      cloud_download\n    </mat-icon>\n  </div>\n</a>\n" }]
-        }], propDecorators: { link: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], isFromWfs: [{
-                type: Input
-            }], exportUrl: [{
-                type: Output
-            }] } });
-
-marker('datahub.search.filter.all');
-marker('datahub.search.filter.others');
-const FILTER_FORMATS = ['all', 'csv', 'excel', 'json', 'shp', 'others'];
-class DownloadsListComponent {
-    constructor(translateService) {
-        this.translateService = translateService;
-        this.activeFilterFormats = ['all'];
-    }
-    get filteredLinks() {
-        return this.links.filter((link) => this.activeFilterFormats.some((format) => this.isLinkOfFormat(link, format)));
+        this.visiblePages = [];
+        this.newCurrentPageEvent = new EventEmitter();
     }
-    get visibleFormats() {
-        return FILTER_FORMATS.filter((format) => this.links.some((link) => this.isLinkOfFormat(link, format)));
+    ngOnChanges() {
+        this.calculateVisiblePages();
     }
-    toggleFilterFormat(format) {
-        if (format === 'all') {
-            this.activeFilterFormats = ['all'];
-            return;
-        }
-        if (this.isFilterActive(format)) {
-            this.activeFilterFormats = this.activeFilterFormats.filter((f) => format !== f);
-        }
-        else {
-            this.activeFilterFormats = [
-                ...this.activeFilterFormats.filter((f) => f !== 'all'),
-                format,
-            ];
+    calculateVisiblePages() {
+        const maxVisiblePages = 5;
+        const halfVisible = Math.floor(maxVisiblePages / 2);
+        const startPage = Math.max(this.currentPage - halfVisible, 1);
+        const endPage = Math.min(this.currentPage + halfVisible, this.totalPages);
+        const visiblePages = [];
+        if (startPage > 1) {
+            visiblePages.push(1);
+            if (startPage > 2) {
+                visiblePages.push('...');
+            }
         }
-        if (this.activeFilterFormats.length === 0) {
-            this.activeFilterFormats = ['all'];
+        for (let page = startPage; page <= endPage; page++) {
+            visiblePages.push(page);
         }
-    }
-    isFilterActive(filter) {
-        return this.activeFilterFormats.includes(filter);
-    }
-    getFilterFormatTitle(format) {
-        if (format === 'all' || format === 'others') {
-            return this.translateService.instant(`datahub.search.filter.${format}`);
+        if (endPage < this.totalPages) {
+            if (endPage < this.totalPages - 1) {
+                visiblePages.push('...');
+            }
+            visiblePages.push(this.totalPages);
         }
-        return format;
+        this.visiblePages = visiblePages;
     }
-    isLinkOfFormat(link, format) {
-        if (format === 'all') {
-            return true;
-        }
-        if (getFileFormat(link) === null) {
-            return format === 'others';
-        }
-        if (format === 'others') {
-            const knownFormats = FILTER_FORMATS.filter((format) => format !== 'all' && format !== 'others');
-            return knownFormats.every((knownFormat) => !getFileFormat(link).includes(knownFormat));
-        }
-        return getFileFormat(link).includes(format);
+    changePage(page) {
+        this.setPage(page);
     }
-    getLinkFormat(link) {
-        return getFileFormat(link);
+    nextPage() {
+        this.setPage(this.currentPage + 1);
     }
-    getLinkColor(link) {
-        return getBadgeColor(getFileFormat(link));
+    previousPage() {
+        this.setPage(this.currentPage - 1);
     }
-    isFromWfs(link) {
-        return link.type === 'service' && link.accessServiceProtocol === 'wfs';
+    setPage(newPage) {
+        if (!Number.isInteger(newPage))
+            return;
+        this.currentPage = newPage;
+        this.calculateVisiblePages();
+        this.newCurrentPageEvent.emit(this.currentPage);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadsListComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DownloadsListComponent, selector: "gn-ui-downloads-list", inputs: { links: "links" }, ngImport: i0, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromWfs]=\"isFromWfs(link)\"\n  ></gn-ui-download-item>\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: DownloadItemComponent, selector: "gn-ui-download-item", inputs: ["link", "color", "format", "isFromWfs"], outputs: ["exportUrl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: PaginationButtonsComponent, selector: "gn-ui-pagination-buttons", inputs: { currentPage: "currentPage", totalPages: "totalPages" }, outputs: { newCurrentPageEvent: "newCurrentPageEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"flex flex-row gap-[5px] items-center\">\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === 1\"\n      (buttonClick)=\"previousPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_left</mat-icon>\n    </gn-ui-button>\n    <ng-container *ngFor=\"let page of visiblePages\">\n      <ng-container *ngIf=\"page === '...'\">\n        <span class=\"mx-[5px]\">{{ page }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"page !== '...'\">\n        <gn-ui-button\n          [type]=\"page === currentPage ? 'primary' : 'light'\"\n          [disabled]=\"page === currentPage\"\n          (buttonClick)=\"changePage(page)\"\n          >{{ page }}</gn-ui-button\n        >\n      </ng-container>\n    </ng-container>\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === totalPages\"\n      (buttonClick)=\"nextPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_right</mat-icon>\n    </gn-ui-button>\n  </div>\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: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-downloads-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromWfs]=\"isFromWfs(link)\"\n  ></gn-ui-download-item>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; }, propDecorators: { links: [{
+            args: [{ selector: 'gn-ui-pagination-buttons', template: "<div class=\"relative\">\n  <div class=\"flex flex-row gap-[5px] items-center\">\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === 1\"\n      (buttonClick)=\"previousPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_left</mat-icon>\n    </gn-ui-button>\n    <ng-container *ngFor=\"let page of visiblePages\">\n      <ng-container *ngIf=\"page === '...'\">\n        <span class=\"mx-[5px]\">{{ page }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"page !== '...'\">\n        <gn-ui-button\n          [type]=\"page === currentPage ? 'primary' : 'light'\"\n          [disabled]=\"page === currentPage\"\n          (buttonClick)=\"changePage(page)\"\n          >{{ page }}</gn-ui-button\n        >\n      </ng-container>\n    </ng-container>\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === totalPages\"\n      (buttonClick)=\"nextPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_right</mat-icon>\n    </gn-ui-button>\n  </div>\n</div>\n" }]
+        }], propDecorators: { currentPage: [{
+                type: Input
+            }], totalPages: [{
                 type: Input
+            }], newCurrentPageEvent: [{
+                type: Output
             }] } });
 
-class ApiCardComponent {
+class PaginationComponent {
     constructor() {
-        this.currentlyActive = false;
-        this.openRecordApiForm = new EventEmitter();
+        this.currentPage = 1;
+        this.nPages = 1;
+        this.hideButton = false;
+        this.newCurrentPageEvent = new EventEmitter();
     }
-    ngOnInit() {
-        this.displayApiFormButton =
-            this.link.accessServiceProtocol === 'ogcFeatures' ? true : false;
+    applyPageBounds() {
+        // make sure this works with NaN inputs as well by adding `|| 1`
+        this.nPages = Math.max(1, this.nPages || 1);
+        this.currentPage = Math.max(1, Math.min(this.nPages, this.currentPage || 1));
     }
     ngOnChanges(changes) {
-        this.currentlyActive =
-            changes.currentLink.currentValue === this.link ? true : false;
-    }
-    openRecordApiFormPanel() {
-        if (this.displayApiFormButton) {
-            this.currentlyActive = !this.currentlyActive;
-            this.openRecordApiForm.emit(this.currentlyActive ? this.link : undefined);
+        // make sure the inputs are valid
+        if ('currentPage' in changes || 'nPages' in changes) {
+            this.applyPageBounds();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ApiCardComponent, selector: "gn-ui-api-card", inputs: { link: "link", currentLink: "currentLink" }, outputs: { openRecordApiForm: "openRecordApiForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden\"\n  [ngClass]=\"{ 'cursor-pointer': displayApiFormButton }\"\n  (click)=\"openRecordApiFormPanel()\"\n>\n  <div\n    class=\"font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]\"\n  >\n    {{ link.name || link.description }}\n  </div>\n  <div class=\"\">\n    <div class=\"flex flex-row justify-between\">\n      <span\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive\n        }\"\n        >{{ link.accessServiceProtocol }}</span\n      >\n      <gn-ui-copy-text-button\n        *ngIf=\"!displayApiFormButton\"\n        [text]=\"link.url.toString()\"\n        [tooltipText]=\"'tooltip.url.copy' | translate\"\n        [displayText]=\"false\"\n      ></gn-ui-copy-text-button>\n      <button\n        *ngIf=\"displayApiFormButton\"\n        type=\"button\"\n        [ngClass]=\"{\n          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n            displayText\n        }\"\n        mat-raised-button\n        [matTooltip]=\"\n          !currentlyActive\n            ? ('record.metadata.api.form.openForm' | translate)\n            : ('record.metadata.api.form.closeForm' | translate)\n        \"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon\n          class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n          [ngClass]=\"{\n            'text-secondary opacity-100': currentlyActive\n          }\"\n          >more_horiz</mat-icon\n        >\n      </button>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    setPage(newPage) {
+        if (!Number.isInteger(newPage))
+            return;
+        this.currentPage = newPage;
+        this.applyPageBounds();
+        this.newCurrentPageEvent.emit(this.currentPage);
+    }
+    nextPage() {
+        this.setPage(this.currentPage + 1);
+    }
+    previousPage() {
+        this.setPage(this.currentPage - 1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: PaginationComponent, selector: "gn-ui-pagination", inputs: { currentPage: "currentPage", nPages: "nPages", hideButton: "hideButton" }, outputs: { newCurrentPageEvent: "newCurrentPageEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"sm:absolute sm:inset-0\" *ngIf=\"!hideButton\">\n    <gn-ui-button\n      (buttonClick)=\"nextPage()\"\n      type=\"secondary\"\n      [disabled]=\"currentPage === nPages\"\n      extraClass=\"lg:m-auto !p-[22px]\"\n    >\n      <span class=\"uppercase font-medium tracking-widest\" translate\n        >pagination.nextPage</span\n      >\n    </gn-ui-button>\n  </div>\n  <div\n    class=\"relative pointer-events-none flex flex-row justify-start sm:justify-end\"\n  >\n    <div class=\"pointer-events-auto flex flex-row items-center py-[13px]\">\n      <span class=\"mr-3 capitalize text-sm text-gray-900\" translate\n        >pagination.page</span\n      >\n      <input\n        type=\"number\"\n        [ngModel]=\"currentPage\"\n        [min]=\"1\"\n        [max]=\"nPages\"\n        (ngModelChange)=\"setPage($event)\"\n        class=\"border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center\"\n      />\n      <span class=\"mr-3 text-sm text-gray-900\"\n        ><span translate>pagination.pageOf</span> {{ nPages }}</span\n      >\n      <gn-ui-button\n        (buttonClick)=\"previousPage()\"\n        id=\"navigate_previous\"\n        class=\"mr-2\"\n        [disabled]=\"currentPage === 1\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"prev-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_before</mat-icon>\n      </gn-ui-button>\n      <gn-ui-button\n        (buttonClick)=\"nextPage()\"\n        id=\"navigate_next\"\n        [disabled]=\"currentPage === nPages\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"next-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_next</mat-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ 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: "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: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-api-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden\"\n  [ngClass]=\"{ 'cursor-pointer': displayApiFormButton }\"\n  (click)=\"openRecordApiFormPanel()\"\n>\n  <div\n    class=\"font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]\"\n  >\n    {{ link.name || link.description }}\n  </div>\n  <div class=\"\">\n    <div class=\"flex flex-row justify-between\">\n      <span\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive\n        }\"\n        >{{ link.accessServiceProtocol }}</span\n      >\n      <gn-ui-copy-text-button\n        *ngIf=\"!displayApiFormButton\"\n        [text]=\"link.url.toString()\"\n        [tooltipText]=\"'tooltip.url.copy' | translate\"\n        [displayText]=\"false\"\n      ></gn-ui-copy-text-button>\n      <button\n        *ngIf=\"displayApiFormButton\"\n        type=\"button\"\n        [ngClass]=\"{\n          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n            displayText\n        }\"\n        mat-raised-button\n        [matTooltip]=\"\n          !currentlyActive\n            ? ('record.metadata.api.form.openForm' | translate)\n            : ('record.metadata.api.form.closeForm' | translate)\n        \"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon\n          class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n          [ngClass]=\"{\n            'text-secondary opacity-100': currentlyActive\n          }\"\n          >more_horiz</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { link: [{
+            args: [{ selector: 'gn-ui-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n  <div class=\"sm:absolute sm:inset-0\" *ngIf=\"!hideButton\">\n    <gn-ui-button\n      (buttonClick)=\"nextPage()\"\n      type=\"secondary\"\n      [disabled]=\"currentPage === nPages\"\n      extraClass=\"lg:m-auto !p-[22px]\"\n    >\n      <span class=\"uppercase font-medium tracking-widest\" translate\n        >pagination.nextPage</span\n      >\n    </gn-ui-button>\n  </div>\n  <div\n    class=\"relative pointer-events-none flex flex-row justify-start sm:justify-end\"\n  >\n    <div class=\"pointer-events-auto flex flex-row items-center py-[13px]\">\n      <span class=\"mr-3 capitalize text-sm text-gray-900\" translate\n        >pagination.page</span\n      >\n      <input\n        type=\"number\"\n        [ngModel]=\"currentPage\"\n        [min]=\"1\"\n        [max]=\"nPages\"\n        (ngModelChange)=\"setPage($event)\"\n        class=\"border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center\"\n      />\n      <span class=\"mr-3 text-sm text-gray-900\"\n        ><span translate>pagination.pageOf</span> {{ nPages }}</span\n      >\n      <gn-ui-button\n        (buttonClick)=\"previousPage()\"\n        id=\"navigate_previous\"\n        class=\"mr-2\"\n        [disabled]=\"currentPage === 1\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"prev-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_before</mat-icon>\n      </gn-ui-button>\n      <gn-ui-button\n        (buttonClick)=\"nextPage()\"\n        id=\"navigate_next\"\n        [disabled]=\"currentPage === nPages\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"next-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_next</mat-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { currentPage: [{
                 type: Input
-            }], currentLink: [{
+            }], nPages: [{
                 type: Input
-            }], openRecordApiForm: [{
+            }], hideButton: [{
+                type: Input
+            }], newCurrentPageEvent: [{
                 type: Output
             }] } });
 
-/**
- * This component will make a block that will stay sticky on the top of the page,
- * but will also shrink down to a minimum height when scrolling.
- * The ratio between minimum and nominal height is stored in the shrinkRatio
- * property, and can be used to change e.g. the opacity or size of child elements.
- * This component renders at z-index: 50 by default.
- * The first parent element with an overflow of `scroll` or `overflow` is considered
- * for scroll events.
- */
-class StickyHeaderComponent {
-    constructor(changeDetector, hostEl, zone) {
-        this.changeDetector = changeDetector;
-        this.hostEl = hostEl;
-        this.zone = zone;
+const DEFAULT_PARAMS = {
+    OFFSET: '',
+    LIMIT: '-1',
+    FORMAT: 'json',
+};
+class RecordApiFormComponent {
+    constructor() {
+        this.offset$ = new BehaviorSubject('');
+        this.limit$ = new BehaviorSubject('');
+        this.format$ = new BehaviorSubject('');
+        this.formatsList = [
+            { label: 'JSON', value: 'json' },
+            { label: 'CSV', value: 'csv' },
+        ];
+        this.apiQueryUrl$ = combineLatest([this.offset$, this.limit$, this.format$]).pipe(map$2(([offset, limit, format]) => {
+            let outputUrl;
+            if (this.apiBaseUrl) {
+                const url = new URL(this.apiBaseUrl);
+                const params = { offset: offset, limit: limit, f: format };
+                for (const [key, value] of Object.entries(params)) {
+                    if (value && value !== '0') {
+                        url.searchParams.set(key, value);
+                    }
+                    else {
+                        url.searchParams.delete(key);
+                    }
+                }
+                outputUrl = url.toString();
+            }
+            return outputUrl;
+        }));
+        this.noLimitChecked$ = this.limit$.pipe(map$2((limit) => limit === '-1' || limit === ''));
+        this.displayLimit$ = this.limit$.pipe(map$2((limit) => (limit !== '-1' ? limit : '')));
     }
-    ngAfterViewInit() {
-        this.scrollSub = fromEvent(window, 'scroll', {
-            passive: true,
-        })
-            .pipe(throttleTime(0, animationFrameScheduler, {
-            leading: true,
-            trailing: true,
-        }))
-            .subscribe(this.updateSize.bind(this));
+    set apiLink(value) {
+        this.apiBaseUrl = value ? value.url.href : undefined;
+        this.resetUrl();
     }
-    ngOnInit() {
-        this.placeholderEl = document.createElement('div');
-        this.placeholderEl.style.position = 'absolute';
-        this.placeholderEl.classList.add('sticky-header-placeholder');
-        this.hostEl.nativeElement.insertAdjacentElement('beforebegin', this.placeholderEl);
+    setOffset(value) {
+        this.offset$.next(value);
     }
-    ngAfterViewChecked() {
-        this.updateSize();
+    setLimit(value) {
+        const newLimit = value === '' ? '-1' : value;
+        this.limit$.next(newLimit);
     }
-    ngOnDestroy() {
-        this.scrollSub.unsubscribe();
-        this.placeholderEl.remove();
+    setFormat(value) {
+        this.format$.next(String(value));
     }
-    updateSize() {
-        this.zone.runOutsideAngular(() => {
-            if (window.scrollY === this.parentScroll)
-                return;
-            this.parentScroll = window.scrollY;
-            const offsetTop = Math.max(0, this.parentScroll - this.placeholderEl.offsetTop);
-            const newHeightPx = Math.max(this.minHeightPx, this.fullHeightPx - offsetTop);
-            this.innerContainer.nativeElement.style.transform = `translate(0, ${newHeightPx - this.fullHeightPx}px)`;
-            this.expandRatio =
-                (newHeightPx - this.minHeightPx) /
-                    (this.fullHeightPx - this.minHeightPx);
-            this.changeDetector.detectChanges();
-        });
+    resetUrl() {
+        this.offset$.next(DEFAULT_PARAMS.OFFSET);
+        this.limit$.next(DEFAULT_PARAMS.LIMIT);
+        this.format$.next(DEFAULT_PARAMS.FORMAT);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: StickyHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef, host: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: StickyHeaderComponent, selector: "gn-ui-sticky-header", inputs: { minHeightPx: "minHeightPx", fullHeightPx: "fullHeightPx" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "outerContainer", first: true, predicate: ["outerContainer"], descendants: true }, { propertyName: "innerContainer", first: true, predicate: ["innerContainer"], descendants: true }], ngImport: i0, template: "<div\n  #outerContainer\n  class=\"sticky pointer-events-none z-50 top-0\"\n  [style.height]=\"fullHeightPx + 'px'\"\n>\n  <div\n    #innerContainer\n    class=\"relative pointer-events-auto\"\n    [style.height]=\"fullHeightPx + 'px'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: expandRatio }\"\n    ></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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", "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: StickyHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordApiFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-sticky-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #outerContainer\n  class=\"sticky pointer-events-none z-50 top-0\"\n  [style.height]=\"fullHeightPx + 'px'\"\n>\n  <div\n    #innerContainer\n    class=\"relative pointer-events-auto\"\n    [style.height]=\"fullHeightPx + 'px'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: expandRatio }\"\n    ></ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef, decorators: [{
-                    type: Host
-                }] }, { type: i0.NgZone }]; }, propDecorators: { minHeightPx: [{
+            args: [{ selector: 'gn-ui-record-api-form', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], propDecorators: { apiLink: [{
                 type: Input
-            }], fullHeightPx: [{
+            }] } });
+
+class RelatedRecordCardComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RelatedRecordCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RelatedRecordCardComponent, selector: "gn-ui-related-record-card", inputs: { record: "record" }, ngImport: i0, template: "<a\n  class=\"w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { 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: RelatedRecordCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-related-record-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n" }]
+        }], propDecorators: { record: [{
+                type: Input
+            }] } });
+
+var ErrorType;
+(function (ErrorType) {
+    ErrorType[ErrorType["COULD_NOT_REACH_API"] = 0] = "COULD_NOT_REACH_API";
+    ErrorType[ErrorType["RECEIVED_ERROR"] = 1] = "RECEIVED_ERROR";
+    ErrorType[ErrorType["RECORD_NOT_FOUND"] = 2] = "RECORD_NOT_FOUND";
+})(ErrorType || (ErrorType = {}));
+class SearchResultsErrorComponent {
+    constructor() {
+        this.types = ErrorType;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SearchResultsErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SearchResultsErrorComponent, selector: "gn-ui-search-results-error", inputs: { type: "type", error: "error", recordId: "recordId" }, ngImport: i0, template: "<div\n  class=\"p-[1.7em] bg-red-50 text-red-800 text-[1.5em] text-center rounded-lg\"\n>\n  <div *ngIf=\"type === types.COULD_NOT_REACH_API\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">face</mat-icon>\n      <mat-icon class=\"material-symbols-outlined question-mark1\"\n        >question_mark</mat-icon\n      >\n      <mat-icon class=\"material-symbols-outlined question-mark2\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate>search.error.couldNotReachApi</div>\n  </div>\n  <div *ngIf=\"type === types.RECEIVED_ERROR\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">mood_bad</mat-icon>\n    </div>\n    <div translate>search.error.receivedError</div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n  <div *ngIf=\"type === types.RECORD_NOT_FOUND\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined computer\">computer</mat-icon>\n      <mat-icon class=\"material-symbols-outlined computer-question-mark\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate [translateParams]=\"{ id: recordId }\">\n      search.error.recordNotFound\n    </div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n</div>\n", styles: ["mat-icon{width:auto;height:auto}mat-icon.face{font-size:3em}mat-icon.question-mark1{position:absolute;bottom:1.1em;left:calc(50% + .7em);font-size:1.7em}mat-icon.question-mark2{position:absolute;bottom:1.6em;left:calc(50% + 1.6em);font-size:1.4em}.computer{font-size:3em}.computer-question-mark{position:absolute;top:.6em;left:calc(50% - .5em);font-size:1.2em}\n"], dependencies: [{ 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: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SearchResultsErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-search-results-error', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"p-[1.7em] bg-red-50 text-red-800 text-[1.5em] text-center rounded-lg\"\n>\n  <div *ngIf=\"type === types.COULD_NOT_REACH_API\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">face</mat-icon>\n      <mat-icon class=\"material-symbols-outlined question-mark1\"\n        >question_mark</mat-icon\n      >\n      <mat-icon class=\"material-symbols-outlined question-mark2\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate>search.error.couldNotReachApi</div>\n  </div>\n  <div *ngIf=\"type === types.RECEIVED_ERROR\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">mood_bad</mat-icon>\n    </div>\n    <div translate>search.error.receivedError</div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n  <div *ngIf=\"type === types.RECORD_NOT_FOUND\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined computer\">computer</mat-icon>\n      <mat-icon class=\"material-symbols-outlined computer-question-mark\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate [translateParams]=\"{ id: recordId }\">\n      search.error.recordNotFound\n    </div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n</div>\n", styles: ["mat-icon{width:auto;height:auto}mat-icon.face{font-size:3em}mat-icon.question-mark1{position:absolute;bottom:1.1em;left:calc(50% + .7em);font-size:1.7em}mat-icon.question-mark2{position:absolute;bottom:1.6em;left:calc(50% + 1.6em);font-size:1.4em}.computer{font-size:3em}.computer-question-mark{position:absolute;top:.6em;left:calc(50% - .5em);font-size:1.2em}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], recordId: [{
                 type: Input
-            }], template: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], outerContainer: [{
-                type: ViewChild,
-                args: ['outerContainer']
-            }], innerContainer: [{
-                type: ViewChild,
-                args: ['innerContainer']
             }] } });
 
 class AnchorLinkDirective {
@@ -26880,6 +27275,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 args: ['carouselOverflowContainer']
             }] } });
 
+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 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 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: [{
+                type: Input
+            }] } });
+
+class InteractiveTableColumnComponent {
+    constructor() {
+        this.grow = false;
+        this.sortable = false;
+        this.activeSort = null;
+        this.sortChange = new EventEmitter();
+    }
+    handleSortChange() {
+        this.activeSort = this.activeSort === 'asc' ? 'desc' : 'asc';
+        this.sortChange.emit(this.activeSort);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: InteractiveTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: InteractiveTableColumnComponent, isStandalone: true, selector: "gn-ui-interactive-table-column", inputs: { grow: "grow", sortable: "sortable", activeSort: "activeSort" }, outputs: { sortChange: "sortChange" }, queries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "cell", first: true, predicate: ["cell"], descendants: true }], ngImport: i0, template: "<span>empty</span>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: InteractiveTableColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-interactive-table-column', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span>empty</span>\n" }]
+        }], propDecorators: { header: [{
+                type: ContentChild,
+                args: ['header']
+            }], cell: [{
+                type: ContentChild,
+                args: ['cell']
+            }], grow: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], activeSort: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
+            }] } });
+
+class InteractiveTableComponent {
+    constructor() {
+        this.items = [];
+        this.itemClick = new EventEmitter();
+    }
+    get gridStyle() {
+        return {
+            'grid-template-columns': this.columns
+                .map((column) => column.grow ? `minmax(0px,1fr)` : `minmax(0px,max-content)`)
+                .join(' '),
+        };
+    }
+    handleRowClick(item) {
+        this.itemClick.emit(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: InteractiveTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: InteractiveTableComponent, isStandalone: true, selector: "gn-ui-interactive-table", inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, queries: [{ propertyName: "columns", predicate: InteractiveTableColumnComponent }], ngImport: i0, template: "<div class=\"grid w-full\" [ngStyle]=\"gridStyle\">\n  <div class=\"contents\">\n    <ng-container *ngFor=\"let column of columns\">\n      <button\n        *ngIf=\"column.sortable\"\n        type=\"button\"\n        class=\"table-header-cell\"\n        (click)=\"column.sortable && column.handleSortChange()\"\n      >\n        <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n        <div class=\"sort-button flex flex-col\" *ngIf=\"column.sortable\">\n          <mat-icon\n            class=\"material-symbols-outlined text-gray-600\"\n            [ngClass]=\"{ 'text-main': column.activeSort === 'asc' }\"\n            >expand_less</mat-icon\n          >\n          <mat-icon\n            class=\"material-symbols-outlined text-gray-600\"\n            [ngClass]=\"{ 'text-main': column.activeSort === 'desc' }\"\n            >expand_more</mat-icon\n          >\n        </div>\n      </button>\n      <div *ngIf=\"!column.sortable\" class=\"table-header-cell\">\n        <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <div\n    class=\"contents text-gray-900 cursor-pointer group\"\n    *ngFor=\"let item of items\"\n    (click)=\"handleRowClick(item)\"\n  >\n    <div\n      class=\"relative h-0\"\n      [ngStyle]=\"{ 'grid-column': 'span ' + this.columns.length }\"\n    >\n      <!-- this element is only used in keyboard navigation -->\n      <button\n        type=\"button\"\n        class=\"absolute inset-x-0 h-[50px] bg-transparent pointer-events-none\"\n      ></button>\n    </div>\n    <ng-container *ngFor=\"let column of columns\">\n      <div\n        class=\"table-row-cell px-4 py-3 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"column.cell; context: { $implicit: item }\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sort-button mat-icon{padding:0;margin:0;height:8px;line-height:8px;font-size:18px}.table-header-cell{@apply text-gray-700 px-4 py-5 flex items-center truncate bg-white;}button.table-header-cell{@apply transition-colors duration-75 hover:text-main hover:bg-gray-50 focus:text-main focus:bg-gray-50;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: InteractiveTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-interactive-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, InteractiveTableColumnComponent, MatIconModule], template: "<div class=\"grid w-full\" [ngStyle]=\"gridStyle\">\n  <div class=\"contents\">\n    <ng-container *ngFor=\"let column of columns\">\n      <button\n        *ngIf=\"column.sortable\"\n        type=\"button\"\n        class=\"table-header-cell\"\n        (click)=\"column.sortable && column.handleSortChange()\"\n      >\n        <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n        <div class=\"sort-button flex flex-col\" *ngIf=\"column.sortable\">\n          <mat-icon\n            class=\"material-symbols-outlined text-gray-600\"\n            [ngClass]=\"{ 'text-main': column.activeSort === 'asc' }\"\n            >expand_less</mat-icon\n          >\n          <mat-icon\n            class=\"material-symbols-outlined text-gray-600\"\n            [ngClass]=\"{ 'text-main': column.activeSort === 'desc' }\"\n            >expand_more</mat-icon\n          >\n        </div>\n      </button>\n      <div *ngIf=\"!column.sortable\" class=\"table-header-cell\">\n        <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <div\n    class=\"contents text-gray-900 cursor-pointer group\"\n    *ngFor=\"let item of items\"\n    (click)=\"handleRowClick(item)\"\n  >\n    <div\n      class=\"relative h-0\"\n      [ngStyle]=\"{ 'grid-column': 'span ' + this.columns.length }\"\n    >\n      <!-- this element is only used in keyboard navigation -->\n      <button\n        type=\"button\"\n        class=\"absolute inset-x-0 h-[50px] bg-transparent pointer-events-none\"\n      ></button>\n    </div>\n    <ng-container *ngFor=\"let column of columns\">\n      <div\n        class=\"table-row-cell px-4 py-3 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"column.cell; context: { $implicit: item }\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sort-button mat-icon{padding:0;margin:0;height:8px;line-height:8px;font-size:18px}.table-header-cell{@apply text-gray-700 px-4 py-5 flex items-center truncate bg-white;}button.table-header-cell{@apply transition-colors duration-75 hover:text-main hover:bg-gray-50 focus:text-main focus:bg-gray-50;}\n"] }]
+        }], propDecorators: { columns: [{
+                type: ContentChildren,
+                args: [InteractiveTableColumnComponent]
+            }], items: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }] } });
+
+/**
+ * This component will make a block that will stay sticky on the top of the page,
+ * but will also shrink down to a minimum height when scrolling.
+ * The ratio between minimum and nominal height is stored in the shrinkRatio
+ * property, and can be used to change e.g. the opacity or size of child elements.
+ * This component renders at z-index: 50 by default.
+ * The first parent element with an overflow of `scroll` or `overflow` is considered
+ * for scroll events.
+ */
+class StickyHeaderComponent {
+    constructor(changeDetector, hostEl, zone) {
+        this.changeDetector = changeDetector;
+        this.hostEl = hostEl;
+        this.zone = zone;
+    }
+    ngAfterViewInit() {
+        this.scrollSub = fromEvent(window, 'scroll', {
+            passive: true,
+        })
+            .pipe(throttleTime(0, animationFrameScheduler, {
+            leading: true,
+            trailing: true,
+        }))
+            .subscribe(this.updateSize.bind(this));
+    }
+    ngOnInit() {
+        this.placeholderEl = document.createElement('div');
+        this.placeholderEl.style.position = 'absolute';
+        this.placeholderEl.classList.add('sticky-header-placeholder');
+        this.hostEl.nativeElement.insertAdjacentElement('beforebegin', this.placeholderEl);
+    }
+    ngAfterViewChecked() {
+        this.updateSize();
+    }
+    ngOnDestroy() {
+        this.scrollSub.unsubscribe();
+        this.placeholderEl.remove();
+    }
+    updateSize() {
+        this.zone.runOutsideAngular(() => {
+            if (window.scrollY === this.parentScroll)
+                return;
+            this.parentScroll = window.scrollY;
+            const offsetTop = Math.max(0, this.parentScroll - this.placeholderEl.offsetTop);
+            const newHeightPx = Math.max(this.minHeightPx, this.fullHeightPx - offsetTop);
+            this.innerContainer.nativeElement.style.transform = `translate(0, ${newHeightPx - this.fullHeightPx}px)`;
+            this.expandRatio =
+                (newHeightPx - this.minHeightPx) /
+                    (this.fullHeightPx - this.minHeightPx);
+            this.changeDetector.detectChanges();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: StickyHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef, host: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: StickyHeaderComponent, selector: "gn-ui-sticky-header", inputs: { minHeightPx: "minHeightPx", fullHeightPx: "fullHeightPx" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "outerContainer", first: true, predicate: ["outerContainer"], descendants: true }, { propertyName: "innerContainer", first: true, predicate: ["innerContainer"], descendants: true }], ngImport: i0, template: "<div\n  #outerContainer\n  class=\"sticky pointer-events-none z-50 top-0\"\n  [style.height]=\"fullHeightPx + 'px'\"\n>\n  <div\n    #innerContainer\n    class=\"relative pointer-events-auto\"\n    [style.height]=\"fullHeightPx + 'px'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: expandRatio }\"\n    ></ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: StickyHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-sticky-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #outerContainer\n  class=\"sticky pointer-events-none z-50 top-0\"\n  [style.height]=\"fullHeightPx + 'px'\"\n>\n  <div\n    #innerContainer\n    class=\"relative pointer-events-auto\"\n    [style.height]=\"fullHeightPx + 'px'\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: expandRatio }\"\n    ></ng-container>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef, decorators: [{
+                    type: Host
+                }] }, { type: i0.NgZone }]; }, propDecorators: { minHeightPx: [{
+                type: Input
+            }], fullHeightPx: [{
+                type: Input
+            }], template: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], outerContainer: [{
+                type: ViewChild,
+                args: ['outerContainer']
+            }], innerContainer: [{
+                type: ViewChild,
+                args: ['innerContainer']
+            }] } });
+
 class UiLayoutModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiLayoutModule, declarations: [ExpandablePanelComponent,
@@ -26914,225 +27460,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
-class InteractiveTableColumnComponent {
-    constructor() {
-        this.grow = false;
-        this.sortable = false;
-        this.activeSort = null;
-        this.sortChange = new EventEmitter();
-    }
-    handleSortChange() {
-        this.activeSort = this.activeSort === 'asc' ? 'desc' : 'asc';
-        this.sortChange.emit(this.activeSort);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: InteractiveTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: InteractiveTableColumnComponent, isStandalone: true, selector: "gn-ui-interactive-table-column", inputs: { grow: "grow", sortable: "sortable", activeSort: "activeSort" }, outputs: { sortChange: "sortChange" }, queries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "cell", first: true, predicate: ["cell"], descendants: true }], ngImport: i0, template: "<span>empty</span>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: InteractiveTableColumnComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-interactive-table-column', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span>empty</span>\n" }]
-        }], propDecorators: { header: [{
-                type: ContentChild,
-                args: ['header']
-            }], cell: [{
-                type: ContentChild,
-                args: ['cell']
-            }], grow: [{
-                type: Input
-            }], sortable: [{
-                type: Input
-            }], activeSort: [{
-                type: Input
-            }], sortChange: [{
-                type: Output
-            }] } });
-
-class InteractiveTableComponent {
-    constructor() {
-        this.items = [];
-        this.itemClick = new EventEmitter();
-    }
-    get gridStyle() {
-        return {
-            'grid-template-columns': this.columns
-                .map((column) => column.grow ? `minmax(0px,1fr)` : `minmax(0px,max-content)`)
-                .join(' '),
-        };
-    }
-    handleRowClick(item) {
-        this.itemClick.emit(item);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: InteractiveTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: InteractiveTableComponent, isStandalone: true, selector: "gn-ui-interactive-table", inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, queries: [{ propertyName: "columns", predicate: InteractiveTableColumnComponent }], ngImport: i0, template: "<div class=\"grid w-full\" [ngStyle]=\"gridStyle\">\n  <div class=\"contents\">\n    <ng-container *ngFor=\"let column of columns\">\n      <button\n        *ngIf=\"column.sortable\"\n        type=\"button\"\n        class=\"table-header-cell\"\n        (click)=\"column.sortable && column.handleSortChange()\"\n      >\n        <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n        <div class=\"sort-button flex flex-col\" *ngIf=\"column.sortable\">\n          <mat-icon\n            class=\"material-symbols-outlined text-gray-600\"\n            [ngClass]=\"{ 'text-main': column.activeSort === 'asc' }\"\n            >expand_less</mat-icon\n          >\n          <mat-icon\n            class=\"material-symbols-outlined text-gray-600\"\n            [ngClass]=\"{ 'text-main': column.activeSort === 'desc' }\"\n            >expand_more</mat-icon\n          >\n        </div>\n      </button>\n      <div *ngIf=\"!column.sortable\" class=\"table-header-cell\">\n        <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <div\n    class=\"contents text-gray-900 cursor-pointer group\"\n    *ngFor=\"let item of items\"\n    (click)=\"handleRowClick(item)\"\n  >\n    <div\n      class=\"relative h-0\"\n      [ngStyle]=\"{ 'grid-column': 'span ' + this.columns.length }\"\n    >\n      <!-- this element is only used in keyboard navigation -->\n      <button\n        type=\"button\"\n        class=\"absolute inset-x-0 h-[50px] bg-transparent pointer-events-none\"\n      ></button>\n    </div>\n    <ng-container *ngFor=\"let column of columns\">\n      <div\n        class=\"table-row-cell px-4 py-3 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"column.cell; context: { $implicit: item }\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sort-button mat-icon{padding:0;margin:0;height:8px;line-height:8px;font-size:18px}.table-header-cell{@apply text-gray-700 px-4 py-5 flex items-center truncate bg-white;}button.table-header-cell{@apply transition-colors duration-75 hover:text-main hover:bg-gray-50 focus:text-main focus:bg-gray-50;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: InteractiveTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-interactive-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, InteractiveTableColumnComponent, MatIconModule], template: "<div class=\"grid w-full\" [ngStyle]=\"gridStyle\">\n  <div class=\"contents\">\n    <ng-container *ngFor=\"let column of columns\">\n      <button\n        *ngIf=\"column.sortable\"\n        type=\"button\"\n        class=\"table-header-cell\"\n        (click)=\"column.sortable && column.handleSortChange()\"\n      >\n        <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n        <div class=\"sort-button flex flex-col\" *ngIf=\"column.sortable\">\n          <mat-icon\n            class=\"material-symbols-outlined text-gray-600\"\n            [ngClass]=\"{ 'text-main': column.activeSort === 'asc' }\"\n            >expand_less</mat-icon\n          >\n          <mat-icon\n            class=\"material-symbols-outlined text-gray-600\"\n            [ngClass]=\"{ 'text-main': column.activeSort === 'desc' }\"\n            >expand_more</mat-icon\n          >\n        </div>\n      </button>\n      <div *ngIf=\"!column.sortable\" class=\"table-header-cell\">\n        <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <div\n    class=\"contents text-gray-900 cursor-pointer group\"\n    *ngFor=\"let item of items\"\n    (click)=\"handleRowClick(item)\"\n  >\n    <div\n      class=\"relative h-0\"\n      [ngStyle]=\"{ 'grid-column': 'span ' + this.columns.length }\"\n    >\n      <!-- this element is only used in keyboard navigation -->\n      <button\n        type=\"button\"\n        class=\"absolute inset-x-0 h-[50px] bg-transparent pointer-events-none\"\n      ></button>\n    </div>\n    <ng-container *ngFor=\"let column of columns\">\n      <div\n        class=\"table-row-cell px-4 py-3 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"column.cell; context: { $implicit: item }\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sort-button mat-icon{padding:0;margin:0;height:8px;line-height:8px;font-size:18px}.table-header-cell{@apply text-gray-700 px-4 py-5 flex items-center truncate bg-white;}button.table-header-cell{@apply transition-colors duration-75 hover:text-main hover:bg-gray-50 focus:text-main focus:bg-gray-50;}\n"] }]
-        }], propDecorators: { columns: [{
-                type: ContentChildren,
-                args: [InteractiveTableColumnComponent]
-            }], items: [{
-                type: Input
-            }], itemClick: [{
-                type: Output
-            }] } });
-
-class LinkCardComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: LinkCardComponent, selector: "gn-ui-link-card", inputs: { link: "link" }, ngImport: i0, template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80\"\n>\n  <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n    <p\n      class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n    >\n      {{ link.name }}\n    </p>\n    <p class=\"font-medium text-sm break-words\">\n      {{ link.description }}\n    </p>\n    <p\n      *ngIf=\"!link.name && !link.description\"\n      class=\"font-medium text-sm break-words truncate\"\n    >\n      {{ link.url }}\n    </p>\n  </div>\n  <div>\n    <mat-icon class=\"material-symbols-outlined card-icon\">open_in_new</mat-icon>\n  </div>\n</a>\n", styles: [""], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-link-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80\"\n>\n  <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n    <p\n      class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n    >\n      {{ link.name }}\n    </p>\n    <p class=\"font-medium text-sm break-words\">\n      {{ link.description }}\n    </p>\n    <p\n      *ngIf=\"!link.name && !link.description\"\n      class=\"font-medium text-sm break-words truncate\"\n    >\n      {{ link.url }}\n    </p>\n  </div>\n  <div>\n    <mat-icon class=\"material-symbols-outlined card-icon\">open_in_new</mat-icon>\n  </div>\n</a>\n" }]
-        }], propDecorators: { link: [{
-                type: Input
-            }] } });
-
-class RelatedRecordCardComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RelatedRecordCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RelatedRecordCardComponent, selector: "gn-ui-related-record-card", inputs: { record: "record" }, ngImport: i0, template: "<a\n  class=\"w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { 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: RelatedRecordCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-related-record-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n" }]
-        }], propDecorators: { record: [{
-                type: Input
-            }] } });
-
-class MetadataContactComponent {
-    constructor() {
-        this.organizationClick = new EventEmitter();
-        this.contactClick = new EventEmitter();
-    }
-    get shownOrganization() {
-        return this.metadata.ownerOrganization;
-    }
-    get contacts() {
-        return ((this.metadata.kind === 'dataset'
-            ? this.metadata.contactsForResource
-            : this.metadata.contacts) || []);
-    }
-    get address() {
-        const addressParts = this.contacts[0].address
-            .split(',')
-            .map((part) => part.trim());
-        return addressParts;
-    }
-    onOrganizationClick() {
-        this.organizationClick.emit(this.shownOrganization);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MetadataContactComponent, selector: "gn-ui-metadata-contact", inputs: { metadata: "metadata" }, outputs: { organizationClick: "organizationClick", contactClick: "contactClick" }, ngImport: i0, template: "<div class=\"py-5 px-5 rounded bg-gray-100 text-black mb-6\">\n  <div class=\"grid gap-3 overflow-hidden\">\n    <div>\n      <p class=\"text-sm font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name\"\n        >\n          {{ shownOrganization?.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n    </div>\n    <div class=\"grid gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >call_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >person_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            location_on</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\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: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataContactComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-metadata-contact', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"py-5 px-5 rounded bg-gray-100 text-black mb-6\">\n  <div class=\"grid gap-3 overflow-hidden\">\n    <div>\n      <p class=\"text-sm font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name\"\n        >\n          {{ shownOrganization?.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n    </div>\n    <div class=\"grid gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >call_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >person_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            location_on</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { metadata: [{
-                type: Input
-            }], organizationClick: [{
-                type: Output
-            }], contactClick: [{
-                type: Output
-            }] } });
-
-class MetadataCatalogComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MetadataCatalogComponent, selector: "gn-ui-metadata-catalog", inputs: { sourceLabel: "sourceLabel" }, ngImport: i0, template: "<div>\n  <p class=\"text-gray-700 text-xs mb-3 uppercase\" translate>\n    record.metadata.catalog\n  </p>\n  <p class=\"text-primary font-title text-21 mb-1\">\n    {{ sourceLabel }}\n  </p>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataCatalogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-metadata-catalog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <p class=\"text-gray-700 text-xs mb-3 uppercase\" translate>\n    record.metadata.catalog\n  </p>\n  <p class=\"text-primary font-title text-21 mb-1\">\n    {{ sourceLabel }}\n  </p>\n</div>\n" }]
-        }], propDecorators: { sourceLabel: [{
-                type: Input
-            }] } });
-
-var ErrorType;
-(function (ErrorType) {
-    ErrorType[ErrorType["COULD_NOT_REACH_API"] = 0] = "COULD_NOT_REACH_API";
-    ErrorType[ErrorType["RECEIVED_ERROR"] = 1] = "RECEIVED_ERROR";
-    ErrorType[ErrorType["RECORD_NOT_FOUND"] = 2] = "RECORD_NOT_FOUND";
-})(ErrorType || (ErrorType = {}));
-class SearchResultsErrorComponent {
-    constructor() {
-        this.types = ErrorType;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SearchResultsErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SearchResultsErrorComponent, selector: "gn-ui-search-results-error", inputs: { type: "type", error: "error", recordId: "recordId" }, ngImport: i0, template: "<div\n  class=\"p-[1.7em] bg-red-50 text-red-800 text-[1.5em] text-center rounded-lg\"\n>\n  <div *ngIf=\"type === types.COULD_NOT_REACH_API\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">face</mat-icon>\n      <mat-icon class=\"material-symbols-outlined question-mark1\"\n        >question_mark</mat-icon\n      >\n      <mat-icon class=\"material-symbols-outlined question-mark2\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate>search.error.couldNotReachApi</div>\n  </div>\n  <div *ngIf=\"type === types.RECEIVED_ERROR\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">mood_bad</mat-icon>\n    </div>\n    <div translate>search.error.receivedError</div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n  <div *ngIf=\"type === types.RECORD_NOT_FOUND\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined computer\">computer</mat-icon>\n      <mat-icon class=\"material-symbols-outlined computer-question-mark\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate [translateParams]=\"{ id: recordId }\">\n      search.error.recordNotFound\n    </div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n</div>\n", styles: ["mat-icon{width:auto;height:auto}mat-icon.face{font-size:3em}mat-icon.question-mark1{position:absolute;bottom:1.1em;left:calc(50% + .7em);font-size:1.7em}mat-icon.question-mark2{position:absolute;bottom:1.6em;left:calc(50% + 1.6em);font-size:1.4em}.computer{font-size:3em}.computer-question-mark{position:absolute;top:.6em;left:calc(50% - .5em);font-size:1.2em}\n"], dependencies: [{ 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: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SearchResultsErrorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-search-results-error', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"p-[1.7em] bg-red-50 text-red-800 text-[1.5em] text-center rounded-lg\"\n>\n  <div *ngIf=\"type === types.COULD_NOT_REACH_API\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">face</mat-icon>\n      <mat-icon class=\"material-symbols-outlined question-mark1\"\n        >question_mark</mat-icon\n      >\n      <mat-icon class=\"material-symbols-outlined question-mark2\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate>search.error.couldNotReachApi</div>\n  </div>\n  <div *ngIf=\"type === types.RECEIVED_ERROR\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined face\">mood_bad</mat-icon>\n    </div>\n    <div translate>search.error.receivedError</div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n  <div *ngIf=\"type === types.RECORD_NOT_FOUND\">\n    <div class=\"relative opacity-40\">\n      <mat-icon class=\"material-symbols-outlined computer\">computer</mat-icon>\n      <mat-icon class=\"material-symbols-outlined computer-question-mark\"\n        >question_mark</mat-icon\n      >\n    </div>\n    <div translate [translateParams]=\"{ id: recordId }\">\n      search.error.recordNotFound\n    </div>\n    <div *ngIf=\"error\">{{ error }}</div>\n  </div>\n</div>\n", styles: ["mat-icon{width:auto;height:auto}mat-icon.face{font-size:3em}mat-icon.question-mark1{position:absolute;bottom:1.1em;left:calc(50% + .7em);font-size:1.7em}mat-icon.question-mark2{position:absolute;bottom:1.6em;left:calc(50% + 1.6em);font-size:1.4em}.computer{font-size:3em}.computer-question-mark{position:absolute;top:.6em;left:calc(50% - .5em);font-size:1.2em}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], recordId: [{
-                type: Input
-            }] } });
-
-class PaginationComponent {
-    constructor() {
-        this.currentPage = 1;
-        this.nPages = 1;
-        this.hideButton = false;
-        this.newCurrentPageEvent = new EventEmitter();
-    }
-    applyPageBounds() {
-        // make sure this works with NaN inputs as well by adding `|| 1`
-        this.nPages = Math.max(1, this.nPages || 1);
-        this.currentPage = Math.max(1, Math.min(this.nPages, this.currentPage || 1));
-    }
-    ngOnChanges(changes) {
-        // make sure the inputs are valid
-        if ('currentPage' in changes || 'nPages' in changes) {
-            this.applyPageBounds();
-        }
-    }
-    setPage(newPage) {
-        if (!Number.isInteger(newPage))
-            return;
-        this.currentPage = newPage;
-        this.applyPageBounds();
-        this.newCurrentPageEvent.emit(this.currentPage);
-    }
-    nextPage() {
-        this.setPage(this.currentPage + 1);
-    }
-    previousPage() {
-        this.setPage(this.currentPage - 1);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: PaginationComponent, selector: "gn-ui-pagination", inputs: { currentPage: "currentPage", nPages: "nPages", hideButton: "hideButton" }, outputs: { newCurrentPageEvent: "newCurrentPageEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"sm:absolute sm:inset-0\" *ngIf=\"!hideButton\">\n    <gn-ui-button\n      (buttonClick)=\"nextPage()\"\n      type=\"secondary\"\n      [disabled]=\"currentPage === nPages\"\n      extraClass=\"lg:m-auto !p-[22px]\"\n    >\n      <span class=\"uppercase font-medium tracking-widest\" translate\n        >pagination.nextPage</span\n      >\n    </gn-ui-button>\n  </div>\n  <div\n    class=\"relative pointer-events-none flex flex-row justify-start sm:justify-end\"\n  >\n    <div class=\"pointer-events-auto flex flex-row items-center py-[13px]\">\n      <span class=\"mr-3 capitalize text-sm text-gray-900\" translate\n        >pagination.page</span\n      >\n      <input\n        type=\"number\"\n        [ngModel]=\"currentPage\"\n        [min]=\"1\"\n        [max]=\"nPages\"\n        (ngModelChange)=\"setPage($event)\"\n        class=\"border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center\"\n      />\n      <span class=\"mr-3 text-sm text-gray-900\"\n        ><span translate>pagination.pageOf</span> {{ nPages }}</span\n      >\n      <gn-ui-button\n        (buttonClick)=\"previousPage()\"\n        id=\"navigate_previous\"\n        class=\"mr-2\"\n        [disabled]=\"currentPage === 1\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"prev-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_before</mat-icon>\n      </gn-ui-button>\n      <gn-ui-button\n        (buttonClick)=\"nextPage()\"\n        id=\"navigate_next\"\n        [disabled]=\"currentPage === nPages\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"next-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_next</mat-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ 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: "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: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n  <div class=\"sm:absolute sm:inset-0\" *ngIf=\"!hideButton\">\n    <gn-ui-button\n      (buttonClick)=\"nextPage()\"\n      type=\"secondary\"\n      [disabled]=\"currentPage === nPages\"\n      extraClass=\"lg:m-auto !p-[22px]\"\n    >\n      <span class=\"uppercase font-medium tracking-widest\" translate\n        >pagination.nextPage</span\n      >\n    </gn-ui-button>\n  </div>\n  <div\n    class=\"relative pointer-events-none flex flex-row justify-start sm:justify-end\"\n  >\n    <div class=\"pointer-events-auto flex flex-row items-center py-[13px]\">\n      <span class=\"mr-3 capitalize text-sm text-gray-900\" translate\n        >pagination.page</span\n      >\n      <input\n        type=\"number\"\n        [ngModel]=\"currentPage\"\n        [min]=\"1\"\n        [max]=\"nPages\"\n        (ngModelChange)=\"setPage($event)\"\n        class=\"border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center\"\n      />\n      <span class=\"mr-3 text-sm text-gray-900\"\n        ><span translate>pagination.pageOf</span> {{ nPages }}</span\n      >\n      <gn-ui-button\n        (buttonClick)=\"previousPage()\"\n        id=\"navigate_previous\"\n        class=\"mr-2\"\n        [disabled]=\"currentPage === 1\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"prev-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_before</mat-icon>\n      </gn-ui-button>\n      <gn-ui-button\n        (buttonClick)=\"nextPage()\"\n        id=\"navigate_next\"\n        [disabled]=\"currentPage === nPages\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"next-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_next</mat-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { currentPage: [{
-                type: Input
-            }], nPages: [{
-                type: Input
-            }], hideButton: [{
-                type: Input
-            }], newCurrentPageEvent: [{
-                type: Output
-            }] } });
-
-class AvatarComponent {
-    hideImage() {
-        this.avatarUrl = this.avatarPlaceholder;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AvatarComponent, selector: "gn-ui-avatar", inputs: { avatarUrl: "avatarUrl", avatarPlaceholder: "avatarPlaceholder" }, ngImport: i0, template: "<img\n  *ngIf=\"avatarUrl\"\n  class=\"rounded-full object-cover\"\n  [src]=\"avatarUrl\"\n  (error)=\"hideImage()\"\n/>\n<div\n  *ngIf=\"!avatarUrl\"\n  class=\"w-full h-full rounded-full bg-gradient-to-tr from-primary to-slate-200\"\n></div>\n", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AvatarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n  *ngIf=\"avatarUrl\"\n  class=\"rounded-full object-cover\"\n  [src]=\"avatarUrl\"\n  (error)=\"hideImage()\"\n/>\n<div\n  *ngIf=\"!avatarUrl\"\n  class=\"w-full h-full rounded-full bg-gradient-to-tr from-primary to-slate-200\"\n></div>\n" }]
-        }], propDecorators: { avatarUrl: [{
-                type: Input
-            }], avatarPlaceholder: [{
-                type: Input
-            }] } });
-
 class UserPreviewComponent {
     get userFullName() {
         return (this.user.name + ' ' + this.user.surname).trim();
@@ -27149,146 +27476,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
-class PaginationButtonsComponent {
-    constructor() {
-        this.visiblePages = [];
-        this.newCurrentPageEvent = new EventEmitter();
-    }
-    ngOnChanges() {
-        this.calculateVisiblePages();
+class TimeSincePipe {
+    constructor(translate) {
+        this.translate = translate;
     }
-    calculateVisiblePages() {
-        const maxVisiblePages = 5;
-        const halfVisible = Math.floor(maxVisiblePages / 2);
-        const startPage = Math.max(this.currentPage - halfVisible, 1);
-        const endPage = Math.min(this.currentPage + halfVisible, this.totalPages);
-        const visiblePages = [];
-        if (startPage > 1) {
-            visiblePages.push(1);
-            if (startPage > 2) {
-                visiblePages.push('...');
-            }
-        }
-        for (let page = startPage; page <= endPage; page++) {
-            visiblePages.push(page);
+    transform(value) {
+        if (isNaN(value.getTime())) {
+            throw new Error('Invalid Date');
         }
-        if (endPage < this.totalPages) {
-            if (endPage < this.totalPages - 1) {
-                visiblePages.push('...');
-            }
-            visiblePages.push(this.totalPages);
+        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;
         }
-        this.visiblePages = visiblePages;
-    }
-    changePage(page) {
-        this.setPage(page);
-    }
-    nextPage() {
-        this.setPage(this.currentPage + 1);
-    }
-    previousPage() {
-        this.setPage(this.currentPage - 1);
-    }
-    setPage(newPage) {
-        if (!Number.isInteger(newPage))
-            return;
-        this.currentPage = newPage;
-        this.calculateVisiblePages();
-        this.newCurrentPageEvent.emit(this.currentPage);
+        return formatDistance(value, maintenant, {
+            addSuffix: true,
+            locale: locale,
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PaginationButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: PaginationButtonsComponent, selector: "gn-ui-pagination-buttons", inputs: { currentPage: "currentPage", totalPages: "totalPages" }, outputs: { newCurrentPageEvent: "newCurrentPageEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"flex flex-row gap-[5px] items-center\">\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === 1\"\n      (buttonClick)=\"previousPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_left</mat-icon>\n    </gn-ui-button>\n    <ng-container *ngFor=\"let page of visiblePages\">\n      <ng-container *ngIf=\"page === '...'\">\n        <span class=\"mx-[5px]\">{{ page }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"page !== '...'\">\n        <gn-ui-button\n          [type]=\"page === currentPage ? 'primary' : 'light'\"\n          [disabled]=\"page === currentPage\"\n          (buttonClick)=\"changePage(page)\"\n          >{{ page }}</gn-ui-button\n        >\n      </ng-container>\n    </ng-container>\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === totalPages\"\n      (buttonClick)=\"nextPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_right</mat-icon>\n    </gn-ui-button>\n  </div>\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: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }] }); }
+    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: PaginationButtonsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-pagination-buttons', template: "<div class=\"relative\">\n  <div class=\"flex flex-row gap-[5px] items-center\">\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === 1\"\n      (buttonClick)=\"previousPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_left</mat-icon>\n    </gn-ui-button>\n    <ng-container *ngFor=\"let page of visiblePages\">\n      <ng-container *ngIf=\"page === '...'\">\n        <span class=\"mx-[5px]\">{{ page }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"page !== '...'\">\n        <gn-ui-button\n          [type]=\"page === currentPage ? 'primary' : 'light'\"\n          [disabled]=\"page === currentPage\"\n          (buttonClick)=\"changePage(page)\"\n          >{{ page }}</gn-ui-button\n        >\n      </ng-container>\n    </ng-container>\n    <gn-ui-button\n      type=\"light\"\n      [disabled]=\"currentPage === totalPages\"\n      (buttonClick)=\"nextPage()\"\n      extraClass=\"!px-[3px]\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">chevron_right</mat-icon>\n    </gn-ui-button>\n  </div>\n</div>\n" }]
-        }], propDecorators: { currentPage: [{
-                type: Input
-            }], totalPages: [{
-                type: Input
-            }], newCurrentPageEvent: [{
-                type: Output
-            }] } });
+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 }]; } });
 
-const DEFAULT_PARAMS = {
-    OFFSET: '',
-    LIMIT: '-1',
-    FORMAT: 'json',
-};
-class RecordApiFormComponent {
+class UserFeedbackItemComponent {
     constructor() {
-        this.offset$ = new BehaviorSubject('');
-        this.limit$ = new BehaviorSubject('');
-        this.format$ = new BehaviorSubject('');
-        this.formatsList = [
-            { label: 'JSON', value: 'json' },
-            { label: 'CSV', value: 'csv' },
-        ];
-        this.apiQueryUrl$ = combineLatest([this.offset$, this.limit$, this.format$]).pipe(map$2(([offset, limit, format]) => {
-            let outputUrl;
-            if (this.apiBaseUrl) {
-                const url = new URL(this.apiBaseUrl);
-                const params = { offset: offset, limit: limit, f: format };
-                for (const [key, value] of Object.entries(params)) {
-                    if (value && value !== '0') {
-                        url.searchParams.set(key, value);
-                    }
-                    else {
-                        url.searchParams.delete(key);
-                    }
-                }
-                outputUrl = url.toString();
-            }
-            return outputUrl;
-        }));
-        this.noLimitChecked$ = this.limit$.pipe(map$2((limit) => limit === '-1' || limit === ''));
-        this.displayLimit$ = this.limit$.pipe(map$2((limit) => (limit !== '-1' ? limit : '')));
+        this.newUserFeedbackAnswer = new EventEmitter();
+        this.isAnAnswer = false;
+        this.newAnswer = '';
+        this.isAnswerEmpty = true;
     }
-    set apiLink(value) {
-        this.apiBaseUrl = value ? value.url.href : undefined;
-        this.resetUrl();
-    }
-    setOffset(value) {
-        this.offset$.next(value);
-    }
-    setLimit(value) {
-        const newLimit = value === '' ? '-1' : value;
-        this.limit$.next(newLimit);
+    ngOnInit() {
+        this.isAnAnswer = !!this.userFeedbackParent.parentUuid;
     }
-    setFormat(value) {
-        this.format$.next(String(value));
+    onNewAnswerValueChange() {
+        this.isAnswerEmpty = this.newAnswer.length === 0;
     }
-    resetUrl() {
-        this.offset$.next(DEFAULT_PARAMS.OFFSET);
-        this.limit$.next(DEFAULT_PARAMS.LIMIT);
-        this.format$.next(DEFAULT_PARAMS.FORMAT);
+    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: 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 flex-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.ɵ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: RecordApiFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UserFeedbackItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-record-api-form', changeDetection: ChangeDetectionStrategy.OnPush, 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 flex-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"] }]
-        }], propDecorators: { apiLink: [{
+            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
-            }] } });
-
-class ImageOverlayPreviewComponent {
-    constructor() {
-        this.isPlaceholderShown = new EventEmitter();
-    }
-    openLightbox(src) {
-        basicLightbox.create(`<img src="${src}"/>`).show();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ImageOverlayPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ImageOverlayPreviewComponent, selector: "gn-ui-image-overlay-preview", inputs: { imageUrl: "imageUrl" }, outputs: { isPlaceholderShown: "isPlaceholderShown" }, ngImport: i0, template: "<gn-ui-content-ghost\n  [showContent]=\"imageUrl !== undefined\"\n  ghostClass=\"h-48 mb-3\"\n>\n  <div\n    *ngIf=\"imageUrl\"\n    [showContent]=\"imageUrl !== undefined\"\n    data-cy=\"record-thumbnail\"\n    class=\"flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3\"\n  >\n    <gn-ui-thumbnail\n      class=\"relative h-full w-full\"\n      [thumbnailUrl]=\"imageUrl\"\n      fit=\"cover\"\n      (placeholderShown)=\"isPlaceholderShown.emit($event)\"\n    ></gn-ui-thumbnail>\n    <div class=\"relative\">\n      <gn-ui-button\n        class=\"absolute bottom-0 right-0 z-10 mr-2 mb-2\"\n        [type]=\"'outline'\"\n        [extraClass]=\"'!py-2 !px-0'\"\n        (buttonClick)=\"openLightbox(imageUrl)\"\n      >\n        <mat-icon class=\"material-symbols-outlined font-extralight\"\n          >zoom_out_map</mat-icon\n        >\n      </gn-ui-button>\n    </div>\n  </div>\n</gn-ui-content-ghost>\n", styles: [""], dependencies: [{ 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: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ImageOverlayPreviewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-image-overlay-preview', template: "<gn-ui-content-ghost\n  [showContent]=\"imageUrl !== undefined\"\n  ghostClass=\"h-48 mb-3\"\n>\n  <div\n    *ngIf=\"imageUrl\"\n    [showContent]=\"imageUrl !== undefined\"\n    data-cy=\"record-thumbnail\"\n    class=\"flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3\"\n  >\n    <gn-ui-thumbnail\n      class=\"relative h-full w-full\"\n      [thumbnailUrl]=\"imageUrl\"\n      fit=\"cover\"\n      (placeholderShown)=\"isPlaceholderShown.emit($event)\"\n    ></gn-ui-thumbnail>\n    <div class=\"relative\">\n      <gn-ui-button\n        class=\"absolute bottom-0 right-0 z-10 mr-2 mb-2\"\n        [type]=\"'outline'\"\n        [extraClass]=\"'!py-2 !px-0'\"\n        (buttonClick)=\"openLightbox(imageUrl)\"\n      >\n        <mat-icon class=\"material-symbols-outlined font-extralight\"\n          >zoom_out_map</mat-icon\n        >\n      </gn-ui-button>\n    </div>\n  </div>\n</gn-ui-content-ghost>\n" }]
-        }], propDecorators: { imageUrl: [{
+            }], userFeedBacksAnswers: [{
                 type: Input
-            }], isPlaceholderShown: [{
+            }], isActiveUserEditor: [{
+                type: Input
+            }], activeUser: [{
+                type: Input
+            }], isLastComment: [{
+                type: Input
+            }], isAddUserFeedbackLoading: [{
+                type: Input
+            }], newUserFeedbackAnswer: [{
                 type: Output
             }] } });
 
@@ -27313,6 +27603,7 @@ class UiElementsModule {
             PaginationButtonsComponent,
             MaxLinesComponent,
             RecordApiFormComponent,
+            UserFeedbackItemComponent,
             ImageOverlayPreviewComponent], imports: [CommonModule,
             MatIconModule,
             MatTooltipModule,
@@ -27323,7 +27614,8 @@ class UiElementsModule {
             FormsModule,
             NgOptimizedImage,
             MarkdownParserComponent,
-            ThumbnailComponent], exports: [MetadataInfoComponent,
+            ThumbnailComponent,
+            TimeSincePipe], exports: [MetadataInfoComponent,
             ContentGhostComponent,
             DownloadItemComponent,
             DownloadsListComponent,
@@ -27343,6 +27635,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,
@@ -27373,6 +27666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         NgOptimizedImage,
                         MarkdownParserComponent,
                         ThumbnailComponent,
+                        TimeSincePipe,
                     ],
                     declarations: [
                         MetadataInfoComponent,
@@ -27394,6 +27688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         PaginationButtonsComponent,
                         MaxLinesComponent,
                         RecordApiFormComponent,
+                        UserFeedbackItemComponent,
                         ImageOverlayPreviewComponent,
                     ],
                     exports: [
@@ -27417,11 +27712,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         MaxLinesComponent,
                         RecordApiFormComponent,
                         MarkdownParserComponent,
+                        UserFeedbackItemComponent,
                         ImageOverlayPreviewComponent,
                     ],
                 }]
         }] });
 
+class NotificationComponent {
+    constructor() {
+        this.type = 'info';
+        this.notificationClose = new EventEmitter();
+    }
+    handleClose(event) {
+        event?.preventDefault();
+        this.notificationClose.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NotificationComponent, isStandalone: true, selector: "gn-ui-notification", inputs: { type: "type", title: "title", text: "text", closeMessage: "closeMessage" }, outputs: { notificationClose: "notificationClose" }, ngImport: i0, template: "<div\n  class=\"p-[16px] flex flex-row gap-[16px] items-start border border-gray-200 shadow-md rounded bg-background\"\n>\n  <div\n    role=\"alert\"\n    class=\"rounded-full text-white p-[6px] w-[32px] h-[32px] flex shrink-0\"\n    [ngClass]=\"{\n      'bg-red-500': type === 'error',\n      'bg-yellow-500': type === 'warning',\n      'bg-green-500': type === 'success',\n      'bg-blue-500': type === 'info'\n    }\"\n    [ngSwitch]=\"type\"\n  >\n    <mat-icon class=\"material-symbols-outlined !w-[18px] !h-[18px] text-[20px]\">\n      <ng-container *ngSwitchCase=\"'success'\">check_circle</ng-container>\n      <ng-container *ngSwitchCase=\"'info'\">info</ng-container>\n      <ng-container *ngSwitchCase=\"'warning'\">warning</ng-container>\n      <ng-container *ngSwitchCase=\"'error'\">error</ng-container>\n    </mat-icon>\n  </div>\n  <div\n    class=\"flex flex-col items-start gap-[4px] pt-[3px] grow shrink overflow-hidden\"\n  >\n    <div class=\"font-bold text-[16px] text-gray-900\">\n      {{ title }}\n    </div>\n    <div class=\"text-[14px] text-gray-800\">\n      {{ text }}\n    </div>\n    <a\n      href\n      *ngIf=\"closeMessage\"\n      class=\"text-[14px] gn-ui-link\"\n      (click)=\"handleClose($event)\"\n    >\n      {{ closeMessage }}\n    </a>\n  </div>\n  <gn-ui-button\n    type=\"light\"\n    class=\"shrink-0\"\n    (buttonClick)=\"handleClose()\"\n    [style.--gn-ui-button-padding]=\"0\"\n    [style.--gn-ui-button-width]=\"'21px'\"\n    [style.--gn-ui-button-height]=\"'21px'\"\n  >\n    <mat-icon class=\"material-symbols-outlined text-[22px] !w-[21px] !h-[21px]\"\n      >close</mat-icon\n    >\n  </gn-ui-button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: NotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-notification', standalone: true, imports: [CommonModule, MatIconModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"p-[16px] flex flex-row gap-[16px] items-start border border-gray-200 shadow-md rounded bg-background\"\n>\n  <div\n    role=\"alert\"\n    class=\"rounded-full text-white p-[6px] w-[32px] h-[32px] flex shrink-0\"\n    [ngClass]=\"{\n      'bg-red-500': type === 'error',\n      'bg-yellow-500': type === 'warning',\n      'bg-green-500': type === 'success',\n      'bg-blue-500': type === 'info'\n    }\"\n    [ngSwitch]=\"type\"\n  >\n    <mat-icon class=\"material-symbols-outlined !w-[18px] !h-[18px] text-[20px]\">\n      <ng-container *ngSwitchCase=\"'success'\">check_circle</ng-container>\n      <ng-container *ngSwitchCase=\"'info'\">info</ng-container>\n      <ng-container *ngSwitchCase=\"'warning'\">warning</ng-container>\n      <ng-container *ngSwitchCase=\"'error'\">error</ng-container>\n    </mat-icon>\n  </div>\n  <div\n    class=\"flex flex-col items-start gap-[4px] pt-[3px] grow shrink overflow-hidden\"\n  >\n    <div class=\"font-bold text-[16px] text-gray-900\">\n      {{ title }}\n    </div>\n    <div class=\"text-[14px] text-gray-800\">\n      {{ text }}\n    </div>\n    <a\n      href\n      *ngIf=\"closeMessage\"\n      class=\"text-[14px] gn-ui-link\"\n      (click)=\"handleClose($event)\"\n    >\n      {{ closeMessage }}\n    </a>\n  </div>\n  <gn-ui-button\n    type=\"light\"\n    class=\"shrink-0\"\n    (buttonClick)=\"handleClose()\"\n    [style.--gn-ui-button-padding]=\"0\"\n    [style.--gn-ui-button-width]=\"'21px'\"\n    [style.--gn-ui-button-height]=\"'21px'\"\n  >\n    <mat-icon class=\"material-symbols-outlined text-[22px] !w-[21px] !h-[21px]\"\n      >close</mat-icon\n    >\n  </gn-ui-button>\n</div>\n" }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], closeMessage: [{
+                type: Input
+            }], notificationClose: [{
+                type: Output
+            }] } });
+
 class UiSearchModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiSearchModule, declarations: [RecordPreviewComponent,
@@ -29577,7 +29900,7 @@ class ResultsTableComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ResultsTableComponent, deps: [{ token: SearchFacade }, { token: SearchService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ResultsTableComponent, isStandalone: true, selector: "gn-ui-results-table", outputs: { recordClick: "recordClick" }, ngImport: i0, template: "<gn-ui-interactive-table\n  [items]=\"records$ | async\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <gn-ui-checkbox\n        [checked]=\"isAllSelected() | async\"\n        [indeterminate]=\"isSomeSelected() | async\"\n        (changed)=\"toggleSelectAll()\"\n        type=\"default\"\n        class=\"-m-2 mr-3\"\n      >\n      </gn-ui-checkbox>\n    </ng-template>\n    <ng-template #cell let-item>\n      <gn-ui-checkbox\n        [checked]=\"isChecked(item) | async\"\n        (changed)=\"handleRecordSelectedChange($event, item)\"\n        class=\"-m-2\"\n        type=\"default\"\n      ></gn-ui-checkbox>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword') | async\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.title }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"flex-shrink-0\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner') | async\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.author</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <mat-icon class=\"material-symbols-outlined\">person</mat-icon>\n      <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.status }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate') | async\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.updatedOn</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ dateToString(item.recordUpdated) }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: CheckboxComponent, selector: "gn-ui-checkbox", inputs: ["type", "checked", "indeterminate"], outputs: ["changed"] }, { kind: "component", type: InteractiveTableComponent, selector: "gn-ui-interactive-table", inputs: ["items"], outputs: ["itemClick"] }, { kind: "component", type: InteractiveTableColumnComponent, selector: "gn-ui-interactive-table-column", inputs: ["grow", "sortable", "activeSort"], outputs: ["sortChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ResultsTableComponent, isStandalone: true, selector: "gn-ui-results-table", outputs: { recordClick: "recordClick" }, ngImport: i0, template: "<gn-ui-interactive-table\n  [items]=\"records$ | async\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <gn-ui-checkbox\n        [checked]=\"isAllSelected() | async\"\n        [indeterminate]=\"isSomeSelected() | async\"\n        (changed)=\"toggleSelectAll()\"\n        type=\"default\"\n        class=\"-m-2 mr-3\"\n      >\n      </gn-ui-checkbox>\n    </ng-template>\n    <ng-template #cell let-item>\n      <gn-ui-checkbox\n        [checked]=\"isChecked(item) | async\"\n        (changed)=\"handleRecordSelectedChange($event, item)\"\n        class=\"-m-2\"\n        type=\"default\"\n      ></gn-ui-checkbox>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword') | async\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.title }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"shrink-0\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner') | async\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.author</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <mat-icon class=\"material-symbols-outlined\">person</mat-icon>\n      <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.status }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate') | async\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.updatedOn</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ dateToString(item.recordUpdated) }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: CheckboxComponent, selector: "gn-ui-checkbox", inputs: ["type", "checked", "indeterminate"], outputs: ["changed"] }, { kind: "component", type: InteractiveTableComponent, selector: "gn-ui-interactive-table", inputs: ["items"], outputs: ["itemClick"] }, { kind: "component", type: InteractiveTableColumnComponent, selector: "gn-ui-interactive-table-column", inputs: ["grow", "sortable", "activeSort"], outputs: ["sortChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ResultsTableComponent, decorators: [{
             type: Component,
@@ -29588,7 +29911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         InteractiveTableColumnComponent,
                         MatIconModule,
                         TranslateModule,
-                    ], template: "<gn-ui-interactive-table\n  [items]=\"records$ | async\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <gn-ui-checkbox\n        [checked]=\"isAllSelected() | async\"\n        [indeterminate]=\"isSomeSelected() | async\"\n        (changed)=\"toggleSelectAll()\"\n        type=\"default\"\n        class=\"-m-2 mr-3\"\n      >\n      </gn-ui-checkbox>\n    </ng-template>\n    <ng-template #cell let-item>\n      <gn-ui-checkbox\n        [checked]=\"isChecked(item) | async\"\n        (changed)=\"handleRecordSelectedChange($event, item)\"\n        class=\"-m-2\"\n        type=\"default\"\n      ></gn-ui-checkbox>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword') | async\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.title }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"flex-shrink-0\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner') | async\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.author</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <mat-icon class=\"material-symbols-outlined\">person</mat-icon>\n      <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.status }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate') | async\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.updatedOn</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ dateToString(item.recordUpdated) }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n" }]
+                    ], template: "<gn-ui-interactive-table\n  [items]=\"records$ | async\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <gn-ui-checkbox\n        [checked]=\"isAllSelected() | async\"\n        [indeterminate]=\"isSomeSelected() | async\"\n        (changed)=\"toggleSelectAll()\"\n        type=\"default\"\n        class=\"-m-2 mr-3\"\n      >\n      </gn-ui-checkbox>\n    </ng-template>\n    <ng-template #cell let-item>\n      <gn-ui-checkbox\n        [checked]=\"isChecked(item) | async\"\n        (changed)=\"handleRecordSelectedChange($event, item)\"\n        class=\"-m-2\"\n        type=\"default\"\n      ></gn-ui-checkbox>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword') | async\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.title }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"shrink-0\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner') | async\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.author</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <mat-icon class=\"material-symbols-outlined\">person</mat-icon>\n      <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.status }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate') | async\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.updatedOn</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ dateToString(item.recordUpdated) }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n" }]
         }], ctorParameters: function () { return [{ type: SearchFacade }, { type: SearchService }, { type: SelectionService }]; }, propDecorators: { recordClick: [{
                 type: Output
             }] } });
@@ -29719,7 +30042,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,
@@ -29818,11 +30141,11 @@ class AddLayerFromFileComponent {
         }, 5000);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromFileComponent, deps: [{ token: MapFacade }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromFileComponent, selector: "gn-ui-add-layer-from-file", ngImport: i0, template: "<div class=\"flex flex-col gap-2 my-2\">\n  <div class=\"flex items-center gap-4\">\n    <div class=\"flex-grow rounded-md border-2 border-gray-200\">\n      <gn-ui-drag-and-drop-file-input\n        (fileChange)=\"handleFileChange($event)\"\n        [accept]=\"acceptedMimeType.join(',')\"\n        [placeholder]=\"'map.addFromFile.placeholder' | translate\"\n        class=\"placeholder-grey\"\n      ></gn-ui-drag-and-drop-file-input>\n    </div>\n  </div>\n  <p class=\"text-sm text-gray-600\" translate>map.help.addFromFile</p>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"successMessage\" class=\"text-green-500 mt-2\">\n  {{ successMessage }}\n</div>\n", styles: [""], dependencies: [{ 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: DragAndDropFileInputComponent, selector: "gn-ui-drag-and-drop-file-input", inputs: ["placeholder", "accept"], outputs: ["fileChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromFileComponent, selector: "gn-ui-add-layer-from-file", ngImport: i0, template: "<div class=\"flex flex-col gap-2 my-2\">\n  <div class=\"flex items-center gap-4\">\n    <div class=\"grow rounded-md border-2 border-gray-200\">\n      <gn-ui-drag-and-drop-file-input\n        (fileChange)=\"handleFileChange($event)\"\n        [accept]=\"acceptedMimeType.join(',')\"\n        [placeholder]=\"'map.addFromFile.placeholder' | translate\"\n        class=\"placeholder-grey\"\n      ></gn-ui-drag-and-drop-file-input>\n    </div>\n  </div>\n  <p class=\"text-sm text-gray-600\" translate>map.help.addFromFile</p>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"successMessage\" class=\"text-green-500 mt-2\">\n  {{ successMessage }}\n</div>\n", styles: [""], dependencies: [{ 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: DragAndDropFileInputComponent, selector: "gn-ui-drag-and-drop-file-input", inputs: ["placeholder", "accept"], outputs: ["fileChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-add-layer-from-file', template: "<div class=\"flex flex-col gap-2 my-2\">\n  <div class=\"flex items-center gap-4\">\n    <div class=\"flex-grow rounded-md border-2 border-gray-200\">\n      <gn-ui-drag-and-drop-file-input\n        (fileChange)=\"handleFileChange($event)\"\n        [accept]=\"acceptedMimeType.join(',')\"\n        [placeholder]=\"'map.addFromFile.placeholder' | translate\"\n        class=\"placeholder-grey\"\n      ></gn-ui-drag-and-drop-file-input>\n    </div>\n  </div>\n  <p class=\"text-sm text-gray-600\" translate>map.help.addFromFile</p>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"successMessage\" class=\"text-green-500 mt-2\">\n  {{ successMessage }}\n</div>\n" }]
+            args: [{ selector: 'gn-ui-add-layer-from-file', template: "<div class=\"flex flex-col gap-2 my-2\">\n  <div class=\"flex items-center gap-4\">\n    <div class=\"grow rounded-md border-2 border-gray-200\">\n      <gn-ui-drag-and-drop-file-input\n        (fileChange)=\"handleFileChange($event)\"\n        [accept]=\"acceptedMimeType.join(',')\"\n        [placeholder]=\"'map.addFromFile.placeholder' | translate\"\n        class=\"placeholder-grey\"\n      ></gn-ui-drag-and-drop-file-input>\n    </div>\n  </div>\n  <p class=\"text-sm text-gray-600\" translate>map.help.addFromFile</p>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"successMessage\" class=\"text-green-500 mt-2\">\n  {{ successMessage }}\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: MapFacade }, { type: i0.ChangeDetectorRef }]; } });
 
 class AddLayerFromWfsComponent {
@@ -29870,7 +30193,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,
@@ -30183,31 +30506,143 @@ const DEFAULT_STYLE_HL_FIXTURE = new Style$1({
     }),
 });
 
+class NotificationsService {
+    constructor() {
+        this.notifications$ = new BehaviorSubject([]);
+    }
+    showNotification(content, timeoutMs) {
+        const id = Math.floor(Math.random() * 1000000);
+        this.notifications$.next([...this.notifications$.value, { ...content, id }]);
+        if (typeof timeoutMs === 'undefined')
+            return;
+        setTimeout(() => {
+            this.removeNotificationById(id);
+        }, timeoutMs);
+    }
+    removeNotificationById(id) {
+        this.notifications$.next(this.notifications$.value.filter((n) => n.id !== id));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NotificationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NotificationsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NotificationsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class FeatureNotificationsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FeatureNotificationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: FeatureNotificationsModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FeatureNotificationsModule, providers: [NotificationsService] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FeatureNotificationsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    exports: [],
+                    imports: [],
+                    providers: [NotificationsService],
+                }]
+        }] });
+
+class NotificationsContainerComponent {
+    constructor(notificationsService) {
+        this.notificationsService = notificationsService;
+    }
+    trackById(index, notification) {
+        return notification.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NotificationsContainerComponent, deps: [{ token: NotificationsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NotificationsContainerComponent, isStandalone: true, selector: "gn-ui-notifications-container", ngImport: i0, 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", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "component", type: NotificationComponent, selector: "gn-ui-notification", inputs: ["type", "title", "text", "closeMessage"], outputs: ["notificationClose"] }], animations: [
+            trigger('enterExit', [
+                transition(':enter', [
+                    animate('150ms', keyframes([
+                        style({ transform: 'scale(1)', opacity: 0 }),
+                        style({ transform: 'scale(1.03)', opacity: 0.5 }),
+                        style({ transform: 'scale(1)', opacity: 1 }),
+                    ])),
+                ]),
+                transition(':leave', [
+                    animate('200ms', style({ transform: 'translateX(50px)', opacity: 0 })),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NotificationsContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-notifications-container', standalone: true, imports: [CommonModule, NotificationComponent], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('enterExit', [
+                            transition(':enter', [
+                                animate('150ms', keyframes([
+                                    style({ transform: 'scale(1)', opacity: 0 }),
+                                    style({ transform: 'scale(1.03)', opacity: 0.5 }),
+                                    style({ transform: 'scale(1)', opacity: 1 }),
+                                ])),
+                            ]),
+                            transition(':leave', [
+                                animate('200ms', style({ transform: 'translateX(50px)', opacity: 0 })),
+                            ]),
+                        ]),
+                    ], 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,
@@ -30215,38 +30650,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.
@@ -30255,11 +30734,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));
@@ -30273,6 +30753,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
@@ -30287,39 +30770,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() {
@@ -32105,11 +32622,11 @@ class OrganisationPreviewComponent {
         this.clickedOrganisation.emit(this.organisation);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: OrganisationPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: OrganisationPreviewComponent, selector: "gn-ui-organisation-preview", inputs: { organisation: "organisation", organisationUrl: "organisationUrl" }, outputs: { clickedOrganisation: "clickedOrganisation" }, ngImport: i0, template: "<a href (click)=\"clickOrganisation($event)\" [attr.href]=\"organisationUrl\">\n  <div\n    class=\"group cursor-pointer rounded-lg h-full flex flex-col\"\n    [title]=\"organisation.name\"\n  >\n    <div\n      class=\"flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"organisation.logoUrl\"\n        [fit]=\"'contain'\"\n      >\n      </gn-ui-thumbnail>\n    </div>\n    <div class=\"px-3 pb-2 capitalize flex flex-col flex-grow overflow-hidden\">\n      <span\n        class=\"flex-shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors\"\n        data-cy=\"organizationName\"\n      >\n        {{ organisation.name }}</span\n      >\n      <p\n        class=\"abstract mt-4 mb-5 sm:mb-2 sm:mt-0 flex-grow flex-shrink-1 overflow-hidden\"\n        data-cy=\"organizationDesc\"\n      >\n        {{ organisation.description }}\n      </p>\n      <div class=\"flex-shrink-0 text-primary opacity-50 flex leading-6\">\n        <mat-icon class=\"material-symbols-outlined text-primary opacity-50 mr-1\"\n          >folder_open\n        </mat-icon>\n        <span class=\"mx-1\" data-cy=\"organizationRecordsCount\">{{\n          organisation.recordCount\n        }}</span>\n        <span translate>record.metadata.publications</span>\n      </div>\n    </div>\n  </div>\n</a>\n", styles: [".abstract{position:relative}.abstract:after{content:\"\";position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,white,transparent);height:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { 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: OrganisationPreviewComponent, selector: "gn-ui-organisation-preview", inputs: { organisation: "organisation", organisationUrl: "organisationUrl" }, outputs: { clickedOrganisation: "clickedOrganisation" }, ngImport: i0, template: "<a href (click)=\"clickOrganisation($event)\" [attr.href]=\"organisationUrl\">\n  <div\n    class=\"group cursor-pointer rounded-lg h-full flex flex-col\"\n    [title]=\"organisation.name\"\n  >\n    <div\n      class=\"shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"organisation.logoUrl\"\n        [fit]=\"'contain'\"\n      >\n      </gn-ui-thumbnail>\n    </div>\n    <div class=\"px-3 pb-2 capitalize flex flex-col grow overflow-hidden\">\n      <span\n        class=\"shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors\"\n        data-cy=\"organizationName\"\n      >\n        {{ organisation.name }}</span\n      >\n      <p\n        class=\"abstract mt-4 mb-5 sm:mb-2 sm:mt-0 grow shrink-1 overflow-hidden\"\n        data-cy=\"organizationDesc\"\n      >\n        {{ organisation.description }}\n      </p>\n      <div class=\"shrink-0 text-primary opacity-50 flex leading-6\">\n        <mat-icon class=\"material-symbols-outlined text-primary opacity-50 mr-1\"\n          >folder_open\n        </mat-icon>\n        <span class=\"mx-1\" data-cy=\"organizationRecordsCount\">{{\n          organisation.recordCount\n        }}</span>\n        <span translate>record.metadata.publications</span>\n      </div>\n    </div>\n  </div>\n</a>\n", styles: [".abstract{position:relative}.abstract:after{content:\"\";position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,white,transparent);height:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: OrganisationPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-organisation-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a href (click)=\"clickOrganisation($event)\" [attr.href]=\"organisationUrl\">\n  <div\n    class=\"group cursor-pointer rounded-lg h-full flex flex-col\"\n    [title]=\"organisation.name\"\n  >\n    <div\n      class=\"flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"organisation.logoUrl\"\n        [fit]=\"'contain'\"\n      >\n      </gn-ui-thumbnail>\n    </div>\n    <div class=\"px-3 pb-2 capitalize flex flex-col flex-grow overflow-hidden\">\n      <span\n        class=\"flex-shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors\"\n        data-cy=\"organizationName\"\n      >\n        {{ organisation.name }}</span\n      >\n      <p\n        class=\"abstract mt-4 mb-5 sm:mb-2 sm:mt-0 flex-grow flex-shrink-1 overflow-hidden\"\n        data-cy=\"organizationDesc\"\n      >\n        {{ organisation.description }}\n      </p>\n      <div class=\"flex-shrink-0 text-primary opacity-50 flex leading-6\">\n        <mat-icon class=\"material-symbols-outlined text-primary opacity-50 mr-1\"\n          >folder_open\n        </mat-icon>\n        <span class=\"mx-1\" data-cy=\"organizationRecordsCount\">{{\n          organisation.recordCount\n        }}</span>\n        <span translate>record.metadata.publications</span>\n      </div>\n    </div>\n  </div>\n</a>\n", styles: [".abstract{position:relative}.abstract:after{content:\"\";position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,white,transparent);height:10px}\n"] }]
+            args: [{ selector: 'gn-ui-organisation-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a href (click)=\"clickOrganisation($event)\" [attr.href]=\"organisationUrl\">\n  <div\n    class=\"group cursor-pointer rounded-lg h-full flex flex-col\"\n    [title]=\"organisation.name\"\n  >\n    <div\n      class=\"shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"organisation.logoUrl\"\n        [fit]=\"'contain'\"\n      >\n      </gn-ui-thumbnail>\n    </div>\n    <div class=\"px-3 pb-2 capitalize flex flex-col grow overflow-hidden\">\n      <span\n        class=\"shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors\"\n        data-cy=\"organizationName\"\n      >\n        {{ organisation.name }}</span\n      >\n      <p\n        class=\"abstract mt-4 mb-5 sm:mb-2 sm:mt-0 grow shrink-1 overflow-hidden\"\n        data-cy=\"organizationDesc\"\n      >\n        {{ organisation.description }}\n      </p>\n      <div class=\"shrink-0 text-primary opacity-50 flex leading-6\">\n        <mat-icon class=\"material-symbols-outlined text-primary opacity-50 mr-1\"\n          >folder_open\n        </mat-icon>\n        <span class=\"mx-1\" data-cy=\"organizationRecordsCount\">{{\n          organisation.recordCount\n        }}</span>\n        <span translate>record.metadata.publications</span>\n      </div>\n    </div>\n  </div>\n</a>\n", styles: [".abstract{position:relative}.abstract:after{content:\"\";position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,white,transparent);height:10px}\n"] }]
         }], propDecorators: { organisation: [{
                 type: Input
             }], organisationUrl: [{
@@ -32638,7 +33155,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,
@@ -32666,7 +33183,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,
@@ -32731,6 +33248,13 @@ const DEFAULT_FIELDS = [
         },
         onSaveProcess: '${dateNow()}',
     },
+    {
+        model: 'licenses',
+        formFieldConfig: {
+            labelKey: marker('editor.record.form.license'),
+            type: 'list',
+        },
+    },
 ];
 
 const EDITOR_FEATURE_KEY = 'editor';
@@ -32786,9 +33310,11 @@ const selectRecordFields = createSelector(selectEditorState, (state) => state.fi
 class EditorFacade {
     constructor() {
         this.store = inject(Store);
+        this.actions$ = inject(Actions);
         this.record$ = this.store.pipe(select(selectRecord));
         this.saving$ = this.store.pipe(select(selectRecordSaving));
-        this.saveError$ = this.store.pipe(select(selectRecordSaveError));
+        this.saveError$ = this.store.pipe(select(selectRecordSaveError), filter$1((error) => !!error));
+        this.saveSuccess$ = this.actions$.pipe(ofType(saveRecordSuccess));
         this.changedSinceSave$ = this.store.pipe(select(selectRecordChangedSinceSave));
         this.recordFields$ = this.store.pipe(select(selectRecordFields));
     }
@@ -32808,6 +33334,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             type: Injectable
         }] });
 
+function evaluate(expression) {
+    if (expression.match(/^\${.*}$/)) {
+        return evaluate(expression.slice(2, -1));
+    }
+    const operator = expression.split('(')[0];
+    switch (operator) {
+        case 'dateNow':
+            return () => new Date();
+        default:
+            throw new Error(`Unknown operator: ${operator}`);
+    }
+}
+
+class EditorService {
+    constructor(http, apiConfiguration) {
+        this.http = http;
+        this.apiConfiguration = apiConfiguration;
+        this.apiUrl = `${this.apiConfiguration?.basePath || '/geonetwork/srv/api'}`;
+    }
+    // TODO: use the catalog repository instead
+    loadRecordByUuid(uuid) {
+        return this.http
+            .get(`${this.apiUrl}/records/${uuid}/formatters/xml`, {
+            responseType: 'text',
+            headers: {
+                Accept: 'application/xml',
+            },
+        })
+            .pipe(switchMap$1((response) => findConverterForDocument(response).readRecord(response.toString())));
+    }
+    // returns the record as it was when saved
+    saveRecord(record, fieldsConfig) {
+        const savedRecord = { ...record };
+        // run onSave processes
+        for (const field of fieldsConfig) {
+            if (field.onSaveProcess && field.model) {
+                const evaluator = evaluate(field.onSaveProcess);
+                savedRecord[field.model] = evaluator({
+                    config: field,
+                    value: record[field.model],
+                });
+            }
+        }
+        // TODO: use the catalog repository instead
+        // TODO: use converter based on the format of the record before change
+        return from(new Iso19139Converter().writeRecord(savedRecord)).pipe(switchMap$1((recordXml) => this.http.put(`${this.apiUrl}/records?metadataType=METADATA&uuidProcessing=OVERWRITE&transformWith=_none_&publishToAll=on`, recordXml, {
+            headers: {
+                'Content-Type': 'application/xml',
+            },
+            withCredentials: true,
+        })), map$1(() => savedRecord));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorService, deps: [{ token: i1.HttpClient }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: Configuration, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [Configuration]
+                }] }]; } });
+
+class EditorEffects {
+    constructor() {
+        this.actions$ = inject(Actions);
+        this.editorService = inject(EditorService);
+        this.store = inject(Store);
+        this.saveRecord$ = createEffect(() => this.actions$.pipe(ofType(saveRecord), withLatestFrom$1(this.store.select(selectRecord), this.store.select(selectRecordFieldsConfig)), switchMap$1(([, record, fieldsConfig]) => this.editorService.saveRecord(record, fieldsConfig).pipe(switchMap$1((newRecord) => of(saveRecordSuccess(), openRecord({ record: newRecord }))), catchError((error) => of(saveRecordFailure({
+            error: error.message,
+        })))))));
+        this.markAsChanged$ = createEffect(() => this.actions$.pipe(ofType(updateRecordField), map$1(() => markRecordAsChanged())));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorEffects }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorEffects, decorators: [{
+            type: Injectable
+        }] });
+
+var WizardFieldType;
+(function (WizardFieldType) {
+    WizardFieldType[WizardFieldType["TEXT"] = 0] = "TEXT";
+    WizardFieldType[WizardFieldType["TEXT_AREA"] = 1] = "TEXT_AREA";
+    WizardFieldType[WizardFieldType["CHIPS"] = 2] = "CHIPS";
+    WizardFieldType[WizardFieldType["DATA_PICKER"] = 3] = "DATA_PICKER";
+    WizardFieldType[WizardFieldType["DROPDOWN"] = 4] = "DROPDOWN";
+})(WizardFieldType || (WizardFieldType = {}));
+
 class WizardService {
     constructor(translateService) {
         this.translateService = translateService;
@@ -32891,15 +33510,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
 
-var WizardFieldType;
-(function (WizardFieldType) {
-    WizardFieldType[WizardFieldType["TEXT"] = 0] = "TEXT";
-    WizardFieldType[WizardFieldType["TEXT_AREA"] = 1] = "TEXT_AREA";
-    WizardFieldType[WizardFieldType["CHIPS"] = 2] = "CHIPS";
-    WizardFieldType[WizardFieldType["DATA_PICKER"] = 3] = "DATA_PICKER";
-    WizardFieldType[WizardFieldType["DROPDOWN"] = 4] = "DROPDOWN";
-})(WizardFieldType || (WizardFieldType = {}));
-
 marker('datafeeder.month.january');
 marker('datafeeder.month.february');
 marker('datafeeder.month.march');
@@ -33029,7 +33639,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,
@@ -33058,6 +33668,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 args: ['dropdown']
             }] } });
 
+class WizardSummarizeComponent {
+    get title() {
+        return this.wizardService.getWizardFieldData('title') || '';
+    }
+    get abstract() {
+        return this.wizardService.getWizardFieldData('abstract') || '';
+    }
+    get tags() {
+        if (!this.wizardService.getWizardFieldData('tags')) {
+            return '';
+        }
+        return JSON.parse(this.wizardService.getWizardFieldData('tags'))
+            .map((t) => t.display)
+            .join(' - ');
+    }
+    get createdDate() {
+        const time = this.wizardService.getWizardFieldData('datepicker');
+        const locale = this.translateService.currentLang;
+        return new Date(Number(time)).toLocaleDateString(locale, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        });
+    }
+    get scale() {
+        if (!this.wizardService.getWizardFieldData('dropdown')) {
+            return '';
+        }
+        const scaleValue = JSON.parse(this.wizardService.getWizardFieldData('dropdown'));
+        return `1:${scaleValue}`;
+    }
+    get description() {
+        return this.wizardService.getWizardFieldData('description') || '';
+    }
+    constructor(wizardService, translateService) {
+        this.wizardService = wizardService;
+        this.translateService = translateService;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardSummarizeComponent, deps: [{ token: WizardService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: WizardSummarizeComponent, selector: "gn-ui-wizard-summarize", ngImport: i0, template: "<div>\n  <div class=\"text-2xl font-bold title\">\n    {{ title | uppercase }}\n  </div>\n  <div class=\"text-lg font-bold pt-2 abstract\">\n    {{ abstract }}\n  </div>\n  <div class=\"text-lg font-normal\">\n    <span translate>datafeeder.wizardSummarize.createdAt</span>\n    &nbsp;<span class=\"date\">{{ createdDate }}</span> -\n    <span translate>datafeeder.wizardSummarize.scale</span>\n    &nbsp;<span class=\"scale\">{{ scale }}</span>\n  </div>\n  <div class=\"text-lg italic font-normal description\">\n    {{ description }}\n  </div>\n  <div class=\"text-sm font-medium pt-4 tags\">\n    <span class=\"icon-tag pr-2\"></span>\n    {{ tags }}\n  </div>\n</div>\n", styles: [".icon-tag:before{font-size:18px}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$3.UpperCasePipe, name: "uppercase" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardSummarizeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-wizard-summarize', template: "<div>\n  <div class=\"text-2xl font-bold title\">\n    {{ title | uppercase }}\n  </div>\n  <div class=\"text-lg font-bold pt-2 abstract\">\n    {{ abstract }}\n  </div>\n  <div class=\"text-lg font-normal\">\n    <span translate>datafeeder.wizardSummarize.createdAt</span>\n    &nbsp;<span class=\"date\">{{ createdDate }}</span> -\n    <span translate>datafeeder.wizardSummarize.scale</span>\n    &nbsp;<span class=\"scale\">{{ scale }}</span>\n  </div>\n  <div class=\"text-lg italic font-normal description\">\n    {{ description }}\n  </div>\n  <div class=\"text-sm font-medium pt-4 tags\">\n    <span class=\"icon-tag pr-2\"></span>\n    {{ tags }}\n  </div>\n</div>\n", styles: [".icon-tag:before{font-size:18px}\n"] }]
+        }], ctorParameters: function () { return [{ type: WizardService }, { type: i1$1.TranslateService }]; } });
+
 class WizardComponent {
     constructor(wizardService, translate) {
         this.wizardService = wizardService;
@@ -33123,136 +33779,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 args: ['wizardFields']
             }] } });
 
-class WizardSummarizeComponent {
-    get title() {
-        return this.wizardService.getWizardFieldData('title') || '';
-    }
-    get abstract() {
-        return this.wizardService.getWizardFieldData('abstract') || '';
-    }
-    get tags() {
-        if (!this.wizardService.getWizardFieldData('tags')) {
-            return '';
-        }
-        return JSON.parse(this.wizardService.getWizardFieldData('tags'))
-            .map((t) => t.display)
-            .join(' - ');
-    }
-    get createdDate() {
-        const time = this.wizardService.getWizardFieldData('datepicker');
-        const locale = this.translateService.currentLang;
-        return new Date(Number(time)).toLocaleDateString(locale, {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-        });
-    }
-    get scale() {
-        if (!this.wizardService.getWizardFieldData('dropdown')) {
-            return '';
-        }
-        const scaleValue = JSON.parse(this.wizardService.getWizardFieldData('dropdown'));
-        return `1:${scaleValue}`;
-    }
-    get description() {
-        return this.wizardService.getWizardFieldData('description') || '';
-    }
-    constructor(wizardService, translateService) {
-        this.wizardService = wizardService;
-        this.translateService = translateService;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardSummarizeComponent, deps: [{ token: WizardService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: WizardSummarizeComponent, selector: "gn-ui-wizard-summarize", ngImport: i0, template: "<div>\n  <div class=\"text-2xl font-bold title\">\n    {{ title | uppercase }}\n  </div>\n  <div class=\"text-lg font-bold pt-2 abstract\">\n    {{ abstract }}\n  </div>\n  <div class=\"text-lg font-normal\">\n    <span translate>datafeeder.wizardSummarize.createdAt</span>\n    &nbsp;<span class=\"date\">{{ createdDate }}</span> -\n    <span translate>datafeeder.wizardSummarize.scale</span>\n    &nbsp;<span class=\"scale\">{{ scale }}</span>\n  </div>\n  <div class=\"text-lg italic font-normal description\">\n    {{ description }}\n  </div>\n  <div class=\"text-sm font-medium pt-4 tags\">\n    <span class=\"icon-tag pr-2\"></span>\n    {{ tags }}\n  </div>\n</div>\n", styles: [".icon-tag:before{font-size:18px}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$3.UpperCasePipe, name: "uppercase" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardSummarizeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-wizard-summarize', template: "<div>\n  <div class=\"text-2xl font-bold title\">\n    {{ title | uppercase }}\n  </div>\n  <div class=\"text-lg font-bold pt-2 abstract\">\n    {{ abstract }}\n  </div>\n  <div class=\"text-lg font-normal\">\n    <span translate>datafeeder.wizardSummarize.createdAt</span>\n    &nbsp;<span class=\"date\">{{ createdDate }}</span> -\n    <span translate>datafeeder.wizardSummarize.scale</span>\n    &nbsp;<span class=\"scale\">{{ scale }}</span>\n  </div>\n  <div class=\"text-lg italic font-normal description\">\n    {{ description }}\n  </div>\n  <div class=\"text-sm font-medium pt-4 tags\">\n    <span class=\"icon-tag pr-2\"></span>\n    {{ tags }}\n  </div>\n</div>\n", styles: [".icon-tag:before{font-size:18px}\n"] }]
-        }], ctorParameters: function () { return [{ type: WizardService }, { type: i1$1.TranslateService }]; } });
-
-function evaluate(expression) {
-    if (expression.match(/^\${.*}$/)) {
-        return evaluate(expression.slice(2, -1));
-    }
-    const operator = expression.split('(')[0];
-    switch (operator) {
-        case 'dateNow':
-            return () => new Date();
-        default:
-            throw new Error(`Unknown operator: ${operator}`);
-    }
-}
-
-class EditorService {
-    constructor(http, apiConfiguration) {
-        this.http = http;
-        this.apiConfiguration = apiConfiguration;
-        this.apiUrl = `${this.apiConfiguration?.basePath || '/geonetwork/srv/api'}`;
-    }
-    // TODO: use the catalog repository instead
-    loadRecordByUuid(uuid) {
-        return this.http
-            .get(`${this.apiUrl}/records/${uuid}/formatters/xml`, {
-            responseType: 'text',
-            headers: {
-                Accept: 'application/xml',
-            },
-        })
-            .pipe(switchMap$1((response) => findConverterForDocument(response).readRecord(response.toString())));
-    }
-    // returns the record as it was when saved
-    saveRecord(record, fieldsConfig) {
-        const savedRecord = { ...record };
-        // run onSave processes
-        for (const field of fieldsConfig) {
-            if (field.onSaveProcess && field.model) {
-                const evaluator = evaluate(field.onSaveProcess);
-                savedRecord[field.model] = evaluator({
-                    config: field,
-                    value: record[field.model],
-                });
-            }
-        }
-        // TODO: use the catalog repository instead
-        // TODO: use converter based on the format of the record before change
-        return from(new Iso19139Converter().writeRecord(savedRecord)).pipe(switchMap$1((recordXml) => this.http.put(`${this.apiUrl}/records?metadataType=METADATA&uuidProcessing=OVERWRITE&transformWith=_none_&publishToAll=on`, recordXml, {
-            headers: {
-                'Content-Type': 'application/xml',
-            },
-            withCredentials: true,
-        })), map$1(() => savedRecord));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorService, deps: [{ token: i1.HttpClient }, { token: Configuration, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: Configuration, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [Configuration]
-                }] }]; } });
-
-class EditorEffects {
-    constructor() {
-        this.actions$ = inject(Actions);
-        this.editorService = inject(EditorService);
-        this.store = inject(Store);
-        this.saveRecord$ = createEffect(() => this.actions$.pipe(ofType(saveRecord), withLatestFrom$1(this.store.select(selectRecord), this.store.select(selectRecordFieldsConfig)), switchMap$1(([, record, fieldsConfig]) => this.editorService.saveRecord(record, fieldsConfig).pipe(switchMap$1((newRecord) => of(saveRecordSuccess(), openRecord({ record: newRecord }))), catchError((error) => of(saveRecordFailure({
-            error: error.message,
-        })))))));
-        this.markAsChanged$ = createEffect(() => this.actions$.pipe(ofType(updateRecordField), map$1(() => markRecordAsChanged())));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorEffects }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditorEffects, decorators: [{
-            type: Injectable
-        }] });
-
 class FeatureEditorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FeatureEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: FeatureEditorModule, declarations: [WizardComponent,
@@ -33302,6 +33828,300 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
+class FormFieldSimpleComponent {
+    constructor() {
+        this.readonly = false;
+        this.invalid = false;
+        this.placeholder = '';
+    }
+    get inputType() {
+        switch (this.type) {
+            case 'url':
+            case 'text':
+                return 'text';
+            case 'date':
+                return 'datetime-local';
+            case 'number':
+                return 'number';
+            case 'toggle':
+                return 'checkbox';
+            default:
+                return '';
+        }
+    }
+    get isSelect() {
+        return this.type === 'list';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldSimpleComponent, isStandalone: true, selector: "gn-ui-form-field-simple", inputs: { type: "type", control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder", options: "options" }, ngImport: i0, template: "<input\n  *ngIf=\"!isSelect\"\n  [type]=\"inputType\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n<select\n  *ngIf=\"isSelect\"\n  [formControl]=\"control\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n>\n  <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n    {{ option.label }}\n  </option>\n</select>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSimpleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-simple', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<input\n  *ngIf=\"!isSelect\"\n  [type]=\"inputType\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n<select\n  *ngIf=\"isSelect\"\n  [formControl]=\"control\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n>\n  <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n    {{ option.label }}\n  </option>\n</select>\n" }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+class FormFieldFileComponent {
+    constructor() {
+        this.readonly = false;
+        this.invalid = false;
+        this.placeholder = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldFileComponent, isStandalone: true, selector: "gn-ui-form-field-file", inputs: { control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder" }, ngImport: i0, template: "<input\n  type=\"file\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldFileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-file', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<input\n  type=\"file\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }] } });
+
+class FormFieldRichComponent {
+    constructor() {
+        this.placeholder = 'Votre texte ici'; //TODO: translate
+        this.preview = false;
+    }
+    getButtonExtraClass() {
+        return `${this.preview ? 'text-gray-200 bg-gray-900' : 'text-gray-900 bg-gray-200'} rounded-[1.25rem] p-[0.375rem] text-xs font-medium w-24`;
+    }
+    togglePreview() {
+        this.preview = !this.preview;
+    }
+    handleTextContentChanged(textContent) {
+        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 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,
+            args: [{ selector: 'gn-ui-form-field-rich', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        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 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: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], helperText: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }] } });
+
+class FormFieldObjectComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldObjectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldObjectComponent, isStandalone: true, selector: "gn-ui-form-field-object", ngImport: i0, template: "<p>form-field-object works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldObjectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-object', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<p>form-field-object works!</p>\n" }]
+        }] });
+
+class FormFieldArrayComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldArrayComponent, isStandalone: true, selector: "gn-ui-form-field-array", ngImport: i0, template: "<p>form-field-array works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldArrayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-array', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<p>form-field-array works!</p>\n" }]
+        }] });
+
+class FormFieldSpatialExtentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSpatialExtentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldSpatialExtentComponent, isStandalone: true, selector: "gn-ui-form-field-spatial-extent", ngImport: i0, template: "<p>form-field-spatial-extent works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldSpatialExtentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-spatial-extent', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<p>form-field-spatial-extent works!</p>\n" }]
+        }] });
+
+class FormFieldTemporalExtentComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldTemporalExtentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldTemporalExtentComponent, isStandalone: true, selector: "gn-ui-form-field-temporal-extent", ngImport: i0, template: "<p>form-field-temporal-extent works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldTemporalExtentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-temporal-extent', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<p>form-field-temporal-extent works!</p>\n" }]
+        }] });
+
+class FormFieldLicenseComponent {
+    constructor() {
+        this.choices = [
+            {
+                value: 'cc-by',
+                label: marker('editor.record.form.license.cc-by'),
+            },
+            {
+                value: 'cc-by-sa',
+                label: marker('editor.record.form.license.cc-by-sa'),
+            },
+            {
+                value: 'cc-zero',
+                label: marker('editor.record.form.license.cc-zero'),
+            },
+            {
+                value: 'etalab',
+                label: marker('editor.record.form.license.etalab'),
+            },
+            {
+                value: 'etalab-v2',
+                label: marker('editor.record.form.license.etalab-v2'),
+            },
+            {
+                value: 'odbl',
+                label: marker('editor.record.form.license.odbl'),
+            },
+            {
+                value: 'odc-by',
+                label: marker('editor.record.form.license.odc-by'),
+            },
+            {
+                value: 'pddl',
+                label: marker('editor.record.form.license.pddl'),
+            },
+            {
+                value: 'unknown',
+                label: marker('editor.record.form.license.unknown'),
+            },
+        ];
+    }
+    get selected() {
+        return this.control.value[0]?.text;
+    }
+    onSelectValue(value) {
+        this.control.setValue([{ text: value }]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldLicenseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldLicenseComponent, isStandalone: true, selector: "gn-ui-form-field-license", inputs: { control: "control", label: "label" }, ngImport: i0, template: "<gn-ui-dropdown-selector\n  [title]=\"label\"\n  [showTitle]=\"false\"\n  [choices]=\"choices\"\n  [selected]=\"selected\"\n  (selectValue)=\"onSelectValue($event)\"\n>\n</gn-ui-dropdown-selector>\n", styles: [""], dependencies: [{ kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldLicenseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-license', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [DropdownSelectorComponent], template: "<gn-ui-dropdown-selector\n  [title]=\"label\"\n  [showTitle]=\"false\"\n  [choices]=\"choices\"\n  [selected]=\"selected\"\n  (selectValue)=\"onSelectValue($event)\"\n>\n</gn-ui-dropdown-selector>\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
+class FormFieldComponent {
+    set value(v) {
+        this.formControl.setValue(v, {
+            emitEvent: false,
+        });
+    }
+    constructor() {
+        this.formControl = new FormControl();
+        this.valueChange = this.formControl.valueChanges;
+    }
+    focusTitleInput() {
+        this.titleInput.nativeElement.children[0].focus();
+    }
+    get simpleType() {
+        return this.config.type;
+    }
+    get isSimpleField() {
+        return (this.config.type === 'text' ||
+            this.config.type === 'number' ||
+            this.config.type === 'date' ||
+            this.config.type === 'list' ||
+            this.config.type === 'url' ||
+            this.config.type === 'toggle');
+    }
+    get isFileField() {
+        return this.config.type === 'file';
+    }
+    get isSpatialExtentField() {
+        return this.config.type === 'spatial_extent';
+    }
+    get isTemporalExtentField() {
+        return this.config.type === 'temporal_extent';
+    }
+    get isArrayField() {
+        return this.config.type === 'array';
+    }
+    get isObjectField() {
+        return this.config.type === 'object';
+    }
+    get isFieldOk() {
+        return !this.config.locked && !this.config.invalid;
+    }
+    get isFieldLocked() {
+        return this.config.locked;
+    }
+    get isFieldInvalid() {
+        return !this.config.locked && this.config.invalid;
+    }
+    get isTitle() {
+        return this.model === 'title';
+    }
+    get isAbstract() {
+        return this.model === 'abstract';
+    }
+    get isLicenses() {
+        return this.model === 'licenses';
+    }
+    get withoutWrapper() {
+        return this.model === 'title' || 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" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full\">\n  <ng-container *ngIf=\"withoutWrapper; else withGenericWrapper\">\n    <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n  </ng-container>\n  <ng-template #withGenericWrapper>\n    <gn-ui-form-field-wrapper\n      [label]=\"config.labelKey | translate\"\n      [hint]=\"config.hintKey | translate\"\n    >\n      <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n    </gn-ui-form-field-wrapper>\n  </ng-template>\n</div>\n\n<ng-template #fieldContent>\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=\"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=\"isLicenses\">\n    <gn-ui-form-field-license\n      [control]=\"formControl\"\n      [label]=\"config.labelKey | translate\"\n    ></gn-ui-form-field-license>\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=\"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</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: EditableLabelDirective, selector: "[gnUiEditableLabel]", inputs: ["gnUiEditableLabel"], outputs: ["editableLabelChanged"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormFieldWrapperComponent, selector: "gn-ui-form-field-wrapper", inputs: ["label", "hint"] }, { 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: "component", type: FormFieldLicenseComponent, selector: "gn-ui-form-field-license", inputs: ["control", "label"] }, { 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,
+                        FormFieldWrapperComponent,
+                        FormFieldSimpleComponent,
+                        FormFieldRichComponent,
+                        FormFieldObjectComponent,
+                        FormFieldSpatialExtentComponent,
+                        FormFieldTemporalExtentComponent,
+                        FormFieldFileComponent,
+                        FormFieldArrayComponent,
+                        FormFieldLicenseComponent,
+                        TranslateModule,
+                    ], template: "<div class=\"flex flex-col h-full\">\n  <ng-container *ngIf=\"withoutWrapper; else withGenericWrapper\">\n    <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n  </ng-container>\n  <ng-template #withGenericWrapper>\n    <gn-ui-form-field-wrapper\n      [label]=\"config.labelKey | translate\"\n      [hint]=\"config.hintKey | translate\"\n    >\n      <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n    </gn-ui-form-field-wrapper>\n  </ng-template>\n</div>\n\n<ng-template #fieldContent>\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=\"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=\"isLicenses\">\n    <gn-ui-form-field-license\n      [control]=\"formControl\"\n      [label]=\"config.labelKey | translate\"\n    ></gn-ui-form-field-license>\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=\"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</ng-template>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], titleInput: [{
+                type: ViewChild,
+                args: ['titleInput']
+            }] } });
+
 class RecordFormComponent {
     constructor(facade) {
         this.facade = facade;
@@ -33317,11 +34137,11 @@ class RecordFormComponent {
         return field.config.model;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordFormComponent, deps: [{ token: EditorFacade }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordFormComponent, isStandalone: true, selector: "gn-ui-record-form", ngImport: i0, 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      [config]=\"field.config.formFieldConfig\"\n      [value]=\"field.value\"\n      (valueChange)=\"handleFieldValueChange(field, $event)\"\n    ></gn-ui-form-field>\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: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: FormFieldComponent, selector: "gn-ui-form-field", inputs: ["config", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordFormComponent, isStandalone: true, selector: "gn-ui-record-form", ngImport: i0, 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", 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: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "component", type: FormFieldComponent, selector: "gn-ui-form-field", inputs: ["model", "config", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 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, UiInputsModule], 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      [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';
@@ -33619,7 +34439,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 });
@@ -33689,5 +34509,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, AuthService, AutocompleteComponent, AvatarComponent, AvatarServiceInterface, BLOCK_MODEL_FIXTURE, BadgeComponent, BaseReader, ButtonComponent, CLEAR_ERROR, CLEAR_RESULTS, CONFIG_MALFORMED, CONFIG_MINIMAL, CONFIG_MISSING_MANDATORY, CONFIG_OK, CONFIG_UNRECOGNIZED_KEYS, CONFIG_WITH_TRANSLATIONS, CONFIG_WRONG_LANGUAGE_CODE, CarouselComponent, CatalogTitleComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ChipsInputComponent, ClearError, ClearResults, ColorScaleComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_BASELAYER_CONTEXT, DEFAULT_GN4_LOGIN_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DEFAULT_STYLE_FIXTURE, DEFAULT_STYLE_HL_FIXTURE, DEFAULT_VIEW, DataService, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DateRangePickerComponent, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EDITOR_FEATURE_KEY, EMPTY_BLOCK_MODEL_FIXTURE, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EditableLabelDirective, EditorFacade, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalViewerButtonComponent, FACET_ITEM_FIXTURE, FEATURE_MAP_OPTIONS, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FORMATS, FacetBlockComponent, FacetBlockStubComponent, FacetItemComponent, FacetItemStubComponent, FacetListComponent, FacetsContainerComponent, FacetsModule, FavoriteStarComponent, FavoritesService, FeatureAuthModule, FeatureCatalogModule, FeatureDatavizModule, FeatureDetailComponent, FeatureEditorModule, FeatureInfoService, FeatureMapModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileTranslateLoader, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldFileComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentComponent, FuzzySearchComponent, GN_UI_VERSION, GeoTableViewComponent, GeocodingComponent, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, ImageOverlayPreviewComponent, InteractiveTableColumnComponent, InteractiveTableComponent, Iso191153Converter, Iso19139Converter, LANGUAGES_LIST, LANGUAGE_NAMES, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LANG_3_TO_2_MAPPER, LOGIN_URL, LONLAT_CRS_CODES, LangService, LanguageSwitcherComponent, LayersPanelComponent, LinkCardComponent, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_CONFIG_FIXTURE, MAP_FEATURE_KEY, METADATA_LANGUAGE, MY_FORMATS, MapComponent, MapContainerComponent, MapContextComponent, MapContextLayerTypeEnum, MapContextService, MapFacade, MapInstanceDirective, MapManagerService, MapStyleService, MapUtilsService, MapViewComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataInfoComponent, MetadataLinkType, MetadataQualityComponent, MetadataQualityItemComponent, MyOrgService, NavigationButtonComponent, ORGANIZATIONS_STRATEGY, ORGANIZATION_URL_TOKEN, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationsFromGroupsService, OrganizationsFromMetadataService, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PatchResultsAggregations, PopupAlertComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_URL_TOKEN, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESULTS_LAYOUT_CONFIG, ROUTER_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_SEARCH, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordsMetricsComponent, RecordsService, RelatedRecordCardComponent, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SET_CONFIG_AGGREGATIONS, SET_CONFIG_FILTERS, SET_CONFIG_REQUEST_FIELDS, SET_ERROR, SET_FAVORITES_ONLY, SET_FILTERS, SET_INCLUDE_ON_AGGREGATION, SET_PAGE_SIZE, SET_RESULTS_AGGREGATIONS, SET_RESULTS_HITS, SET_RESULTS_LAYOUT, SET_SEARCH, SET_SORT_BY, SET_SPATIAL_FILTER_ENABLED, SearchEffects, SearchFacade, SearchInputComponent, SearchResultsErrorComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SiteTitleComponent, SortByComponent, SourceLabelComponent, SourcesService, SpinningLoaderComponent, StarToggleComponent, StepBarComponent, StickyHeaderComponent, SupportedTypes, TABLE_ITEM_FIXTURE, TABLE_ITEM_FIXTURE_HAB, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableComponent, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UiCatalogModule, UiDatavizModule, UiElementsModule, FacetsModule$1 as UiFacetsModule, UiInputsModule, UiLayoutModule, UiMapModule, UiSearchModule, UiWidgetsModule, UpdateConfigAggregations, UpdateFilters, UserPreviewComponent, UtilI18nModule, UtilSharedModule, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, WFS_MAX_FEATURES, WizardComponent, WizardFieldComponent, WizardFieldType, WizardService, WizardSummarizeComponent, _reset, addLayer, changeLayerOrder, checkFileFormat, clearLayerError, createFuzzyFilter, currentPage, defaultMapOptions, downgradeImage, downsizeImage, dragPanCondition, dropEmptyTranslations, editorReducer, findConverterForDocument, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryFromGeoJSON, getGlobalConfig, getJsonDataItemsProxy, getLangFromBrowser, getLinkLabel, getLinkPriority, getMapLayers, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSpatialFilterEnabled, getTemporalRangeUnion, getThemeConfig, initSearch, initialEditorState, initialMapState, initialState, isConfigLoaded, isEndOfResults, isFormatInQueryParam, loadAppConfig, mapContact, mapKeywords, mapLogo, mapOrganization, mapReducer, markRecordAsChanged, megabytesToBytes, mimeTypeToFormat, mouseWheelZoomCondition, openDataset, openRecord, parse, placeholder, propagateToDocumentOnly, provideGn4, provideRepositoryUrl, readDataset, readDatasetHeaders, reducer$2 as reducer, reducerSearch, removeLayer, removeSearchParams, removeWhitespace, saveRecord, saveRecordFailure, saveRecordSuccess, selectEditorState, selectFallback, selectFallbackFields, selectField, selectRecord, selectRecordChangedSinceSave, selectRecordFields, selectRecordFieldsConfig, selectRecordSaveError, selectRecordSaving, selectTranslatedField, selectTranslatedValue, setLayerError, sortByFromString, sortByToString, sortByToStrings, stripHtml, toDate, totalPages, updateLayer, updateRecordField };
+export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, AuthService, AutocompleteComponent, AvatarComponent, AvatarServiceInterface, BLOCK_MODEL_FIXTURE, BadgeComponent, BaseReader, ButtonComponent, CLEAR_ERROR, CLEAR_RESULTS, CONFIG_MALFORMED, CONFIG_MINIMAL, CONFIG_MISSING_MANDATORY, CONFIG_OK, CONFIG_UNRECOGNIZED_KEYS, CONFIG_WITH_TRANSLATIONS, CONFIG_WRONG_LANGUAGE_CODE, CarouselComponent, CatalogTitleComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ChipsInputComponent, ClearError, ClearResults, ColorScaleComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_BASELAYER_CONTEXT, DEFAULT_GN4_LOGIN_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DEFAULT_STYLE_FIXTURE, DEFAULT_STYLE_HL_FIXTURE, DEFAULT_VIEW, DataService, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DateRangePickerComponent, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EDITOR_FEATURE_KEY, EMPTY_BLOCK_MODEL_FIXTURE, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EditableLabelDirective, EditorFacade, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalViewerButtonComponent, FACET_ITEM_FIXTURE, FEATURE_MAP_OPTIONS, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FORMATS, FacetBlockComponent, FacetBlockStubComponent, FacetItemComponent, FacetItemStubComponent, FacetListComponent, FacetsContainerComponent, FacetsModule, FavoriteStarComponent, FavoritesService, FeatureAuthModule, FeatureCatalogModule, FeatureDatavizModule, FeatureDetailComponent, FeatureEditorModule, FeatureInfoService, FeatureMapModule, FeatureNotificationsModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileTranslateLoader, FilterDropdownComponent, FormFieldWrapperComponent, FuzzySearchComponent, GN_UI_VERSION, GeoTableViewComponent, GeocodingComponent, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, ImageOverlayPreviewComponent, InteractiveTableColumnComponent, InteractiveTableComponent, Iso191153Converter, Iso19139Converter, LANGUAGES_LIST, LANGUAGE_NAMES, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LANG_3_TO_2_MAPPER, LOGIN_URL, LONLAT_CRS_CODES, LangService, LanguageSwitcherComponent, LayersPanelComponent, LinkCardComponent, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_CONFIG_FIXTURE, MAP_FEATURE_KEY, METADATA_LANGUAGE, MY_FORMATS, MapComponent, MapContainerComponent, MapContextComponent, MapContextLayerTypeEnum, MapContextService, MapFacade, MapInstanceDirective, MapManagerService, MapStyleService, MapUtilsService, MapViewComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataInfoComponent, MetadataLinkType, MetadataQualityComponent, MetadataQualityItemComponent, MyOrgService, NavigationButtonComponent, NotificationComponent, NotificationsContainerComponent, NotificationsService, ORGANIZATIONS_STRATEGY, ORGANIZATION_URL_TOKEN, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationsFromGroupsService, OrganizationsFromMetadataService, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PatchResultsAggregations, PopupAlertComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_URL_TOKEN, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESULTS_LAYOUT_CONFIG, ROUTER_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_SEARCH, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordsMetricsComponent, RecordsService, RelatedRecordCardComponent, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SET_CONFIG_AGGREGATIONS, SET_CONFIG_FILTERS, SET_CONFIG_REQUEST_FIELDS, SET_ERROR, SET_FAVORITES_ONLY, SET_FILTERS, SET_INCLUDE_ON_AGGREGATION, SET_PAGE_SIZE, SET_RESULTS_AGGREGATIONS, SET_RESULTS_HITS, SET_RESULTS_LAYOUT, SET_SEARCH, SET_SORT_BY, SET_SPATIAL_FILTER_ENABLED, SearchEffects, SearchFacade, SearchInputComponent, SearchResultsErrorComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SiteTitleComponent, SortByComponent, SourceLabelComponent, SourcesService, SpinningLoaderComponent, StarToggleComponent, StepBarComponent, StickyHeaderComponent, SupportedTypes, TABLE_ITEM_FIXTURE, TABLE_ITEM_FIXTURE_HAB, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableComponent, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UiCatalogModule, UiDatavizModule, UiElementsModule, FacetsModule$1 as UiFacetsModule, UiInputsModule, UiLayoutModule, UiMapModule, UiSearchModule, UiWidgetsModule, UpdateConfigAggregations, UpdateFilters, UserPreviewComponent, UtilI18nModule, UtilSharedModule, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, WFS_MAX_FEATURES, WizardComponent, WizardFieldComponent, WizardFieldType, WizardService, WizardSummarizeComponent, _reset, addLayer, changeLayerOrder, checkFileFormat, clearLayerError, createFuzzyFilter, currentPage, defaultMapOptions, downgradeImage, downsizeImage, dragPanCondition, dropEmptyTranslations, editorReducer, findConverterForDocument, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryFromGeoJSON, getGlobalConfig, getJsonDataItemsProxy, getLangFromBrowser, getLinkLabel, getLinkPriority, getMapLayers, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSpatialFilterEnabled, getTemporalRangeUnion, getThemeConfig, initSearch, initialEditorState, initialMapState, initialState, isConfigLoaded, isEndOfResults, isFormatInQueryParam, loadAppConfig, mapContact, mapKeywords, mapLogo, mapOrganization, mapReducer, markRecordAsChanged, megabytesToBytes, mimeTypeToFormat, mouseWheelZoomCondition, openDataset, openRecord, parse, placeholder, propagateToDocumentOnly, provideGn4, provideRepositoryUrl, readDataset, readDatasetHeaders, reducer$2 as reducer, reducerSearch, removeLayer, removeSearchParams, removeWhitespace, saveRecord, saveRecordFailure, saveRecordSuccess, selectEditorState, selectFallback, selectFallbackFields, selectField, selectRecord, selectRecordChangedSinceSave, selectRecordFields, selectRecordFieldsConfig, selectRecordSaveError, selectRecordSaving, selectTranslatedField, selectTranslatedValue, setLayerError, sortByFromString, sortByToString, sortByToStrings, stripHtml, toDate, totalPages, updateLayer, updateRecordField };
 //# sourceMappingURL=geonetwork-ui.mjs.map