geonetwork-ui 2.8.0-dev.cba2fd2eb → 2.8.0-dev.e46888fcc

package/fesm2022/geonetwork-ui.mjs

@@ -7,7 +7,7 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import { format } from 'date-fns/format';
 import { Namespace, Literal, lit, parse as parse$2, sym, BlankNode, graph } from 'rdflib';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, APP_INITIALIZER, makeEnvironmentProviders, Directive, Input, HostListener, EventEmitter, Component, ChangeDetectionStrategy, Output, ViewChild, ViewEncapsulation, HostBinding, TemplateRef, ElementRef, ViewChildren, ContentChild, ContentChildren, Host, Pipe, ViewContainerRef, inject } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, APP_INITIALIZER, makeEnvironmentProviders, Directive, Input, HostListener, EventEmitter, Component, ChangeDetectionStrategy, Output, ViewChild, ViewEncapsulation, HostBinding, TemplateRef, ElementRef, ViewChildren, ContentChild, ContentChildren, Host, ViewContainerRef, inject } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpClient, provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS, HttpEventType } from '@angular/common/http';
 import * as i1$1 from '@ngx-translate/core';
@@ -20,9 +20,10 @@ import { lt, valid, coerce, satisfies, ltr } from 'semver';
 import chroma from 'chroma-js';
 import * as i1$2 from '@angular/common';
 import { CommonModule, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgClass, NgTemplateOutlet, DatePipe } from '@angular/common';
+import { formatDistance } from 'date-fns/formatDistance';
 import * as i1$d from '@angular/router';
 import { Scroll, NavigationEnd, RouteReuseStrategy } from '@angular/router';
-import { WmtsEndpoint, WmsEndpoint, WfsEndpoint, OgcApiEndpoint, sharedFetch, useCache, TmsEndpoint } from '@camptocamp/ogc-client';
+import { WmtsEndpoint, WmsEndpoint, WfsEndpoint, OgcApiEndpoint, sharedFetch, useCache, StacEndpoint, TmsEndpoint } from '@camptocamp/ogc-client';
 import { getLength } from 'ol/sphere';
 import { LineString, Polygon } from 'ol/geom';
 import * as i1$3 from '@ngrx/store';
@@ -44,7 +45,7 @@ import { iconoirNavArrowRight, iconoirNavArrowLeft, iconoirSearch, iconoirLongAr
 import { MatButtonModule } from '@angular/material/button';
 import * as i1$8 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, OverlayModule, CdkOverlayOrigin } from '@angular/cdk/overlay';
-import * as i2$1 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$5 from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -52,13 +53,13 @@ import tippy from 'tippy.js';
 import * as i1$4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { matClose, matContentCopy, matExpandMore, matExpandLess, matSearch, matStar, matStarBorder, matAdd, matRemove, matChevronLeft, matChevronRight, matArrowBackIos, matArrowForwardIos, matFace, matQuestionMark, matMoodBad, matZoomOutMap, matOpenInNew, matMailOutline, matPersonOutline, matCheck, matWarningAmber, matCheckCircleOutline, matWarning, matMoreVert } from '@ng-icons/material-icons/baseline';
-import * as i2 from '@angular/material/core';
-import { MatNativeDateModule } from '@angular/material/core';
-import * as i1$6 from '@angular/material/checkbox';
+import * as i1$6 from '@angular/material/core';
+import { MAT_DATE_LOCALE, MatNativeDateModule } from '@angular/material/core';
+import * as i1$7 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2$2 from '@angular/material/tooltip';
+import * as i2$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$7 from '@angular/material/datepicker';
+import * as i2$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$9 from 'ngx-dropzone';
 import { NgxDropzoneModule } from 'ngx-dropzone';
@@ -74,8 +75,6 @@ import { createEffect, ofType, EffectsModule, Actions } from '@ngrx/effects';
 import { valid as valid$1 } from 'geojson-validation';
 import * as basicLightbox from 'basiclightbox';
 import { marked } from 'marked';
-import { formatDistance } from 'date-fns/formatDistance';
-import { enUS, sk as sk$1, 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 i2$3 from '@angular/cdk/scrolling';
 import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling';
 import Duration from 'duration-relativetimeformat';
@@ -18811,6 +18810,9 @@ var de = {
 	"dataset.error.restrictedAccess": "",
 	"dataset.error.unknown": "Die Daten können nicht angezeigt werden: \"{ info }\"",
 	"dataset.error.unsupportedType": "Der folgende Inhaltstyp wird nicht unterstützt: \"{ info }\"",
+	"daterange.filter.from": "",
+	"daterange.filter.period": "",
+	"daterange.filter.to": "",
 	"domain.contact.role.author": "",
 	"domain.contact.role.collaborator": "",
 	"domain.contact.role.contributor": "",
@@ -19146,6 +19148,7 @@ var de = {
 	"pagination.nextPage": "Nächste Seite",
 	"pagination.page": "Seite",
 	"pagination.pageOf": "von",
+	"pagination.previousPage": "Vorherige Seite",
 	"record.action.delete": "Löschen",
 	"record.action.download": "Herunterladen",
 	"record.action.duplicate": "",
@@ -19260,9 +19263,9 @@ var de = {
 	"record.metadata.quality.updateFrequency.failed": "Aktualisierungsfrequenz nicht angegeben",
 	"record.metadata.quality.updateFrequency.success": "Aktualisierungsfrequenz angegeben",
 	"record.metadata.related": "Entdecken Sie den Katalog",
-	"record.metadata.resourceCreated": "Erstellt am {date}",
-	"record.metadata.resourcePublished": "Veröffentlicht am {date}",
-	"record.metadata.resourceUpdated": "Zuletzt aktualisiert am {date}",
+	"record.metadata.resourceCreated": "Erstellt",
+	"record.metadata.resourcePublished": "Veröffentlicht",
+	"record.metadata.resourceUpdated": "Zuletzt aktualisiert",
 	"record.metadata.ressources.and.links": "Ressourcen und Links",
 	"record.metadata.sheet": "Weitere Informationen verfügbar unter:",
 	"record.metadata.status": "Status",
@@ -19277,7 +19280,7 @@ var de = {
 	"record.metadata.uniqueId": "Eindeutige Kennung",
 	"record.metadata.update": "Aktualisierungsdatum",
 	"record.metadata.updateFrequency": "Aktualisierungsfrequenz der Daten",
-	"record.metadata.updatedOn": "Informationen geändert am",
+	"record.metadata.updatedOn": "Informationen geändert",
 	"record.metadata.usage": "Nutzung und Einschränkungen",
 	"record.metadata.userFeedbacks": "",
 	"record.metadata.userFeedbacks.anonymousUser": "",
@@ -19384,10 +19387,8 @@ var de = {
 	"service.metadata.spatialExtent": "",
 	"share.tab.permalink": "Teilen",
 	"share.tab.webComponent": "Integrieren",
-	"stac.filter.from": "",
-	"stac.filter.period": "",
 	"stac.filter.reset": "",
-	"stac.filter.to": "",
+	"stac.results.noResults": "Ihre Suchfilter lieferten keine Ergebnisse",
 	"table.loading.data": "Daten werden geladen...",
 	"table.object.count": "Objekte in diesem Datensatz",
 	"table.paginator.firstPage": "Erste Seite",
@@ -19476,6 +19477,9 @@ var en = {
 	"dataset.error.restrictedAccess": "Access to this resource is restricted",
 	"dataset.error.unknown": "The data cannot be displayed: \"{ info }\"",
 	"dataset.error.unsupportedType": "The following content type is unsupported: \"{ info }\"",
+	"daterange.filter.from": "From",
+	"daterange.filter.period": "Period",
+	"daterange.filter.to": "To",
 	"domain.contact.role.author": "Author",
 	"domain.contact.role.collaborator": "Collaborator",
 	"domain.contact.role.contributor": "Contributor",
@@ -19811,6 +19815,7 @@ var en = {
 	"pagination.nextPage": "Next page",
 	"pagination.page": "Page",
 	"pagination.pageOf": "of",
+	"pagination.previousPage": "Previous page",
 	"record.action.delete": "Delete",
 	"record.action.download": "Download",
 	"record.action.duplicate": "Duplicate",
@@ -19925,9 +19930,9 @@ var en = {
 	"record.metadata.quality.updateFrequency.failed": "Update frequency is not specified",
 	"record.metadata.quality.updateFrequency.success": "Update frequency is specified",
 	"record.metadata.related": "Explore the catalog",
-	"record.metadata.resourceCreated": "Created on {date}",
-	"record.metadata.resourcePublished": "Published on {date}",
-	"record.metadata.resourceUpdated": "Last updated on {date}",
+	"record.metadata.resourceCreated": "Created",
+	"record.metadata.resourcePublished": "Published",
+	"record.metadata.resourceUpdated": "Last updated",
 	"record.metadata.ressources.and.links": "Resources and links",
 	"record.metadata.sheet": "Original metadata",
 	"record.metadata.status": "Status",
@@ -19942,7 +19947,7 @@ var en = {
 	"record.metadata.uniqueId": "Unique Identifier",
 	"record.metadata.update": "Date of update",
 	"record.metadata.updateFrequency": "Data Update Frequency",
-	"record.metadata.updatedOn": "Metadata modified on",
+	"record.metadata.updatedOn": "Metadata modified",
 	"record.metadata.usage": "License and Conditions",
 	"record.metadata.userFeedbacks": "Questions / Answers",
 	"record.metadata.userFeedbacks.anonymousUser": "In order to leave a comment, please log in.",
@@ -20049,10 +20054,8 @@ var en = {
 	"service.metadata.spatialExtent": "Spatial extent",
 	"share.tab.permalink": "Share",
 	"share.tab.webComponent": "Integrate",
-	"stac.filter.from": "From",
-	"stac.filter.period": "Period",
 	"stac.filter.reset": "Reset filters",
-	"stac.filter.to": "To",
+	"stac.results.noResults": "Your search filters did not match any items",
 	"table.loading.data": "Loading data...",
 	"table.object.count": "Objects in this dataset",
 	"table.paginator.firstPage": "First page",
@@ -20141,6 +20144,9 @@ var es = {
 	"dataset.error.restrictedAccess": "",
 	"dataset.error.unknown": "",
 	"dataset.error.unsupportedType": "",
+	"daterange.filter.from": "",
+	"daterange.filter.period": "",
+	"daterange.filter.to": "",
 	"domain.contact.role.author": "",
 	"domain.contact.role.collaborator": "",
 	"domain.contact.role.contributor": "",
@@ -20476,6 +20482,7 @@ var es = {
 	"pagination.nextPage": "",
 	"pagination.page": "",
 	"pagination.pageOf": "",
+	"pagination.previousPage": "",
 	"record.action.delete": "",
 	"record.action.download": "",
 	"record.action.duplicate": "",
@@ -20714,10 +20721,8 @@ var es = {
 	"service.metadata.spatialExtent": "",
 	"share.tab.permalink": "",
 	"share.tab.webComponent": "",
-	"stac.filter.from": "",
-	"stac.filter.period": "",
 	"stac.filter.reset": "",
-	"stac.filter.to": "",
+	"stac.results.noResults": "",
 	"table.loading.data": "",
 	"table.object.count": "",
 	"table.paginator.firstPage": "Primera página",
@@ -20806,6 +20811,9 @@ var fr = {
 	"dataset.error.restrictedAccess": "L’accès à cette ressource est restreint",
 	"dataset.error.unknown": "Les données ne peuvent être affichées: \"{ info }\"",
 	"dataset.error.unsupportedType": "Le type de contenu suivant n'est pas pris en charge: \"{ info }\"",
+	"daterange.filter.from": "Du",
+	"daterange.filter.period": "Choix de la période",
+	"daterange.filter.to": "Au",
 	"domain.contact.role.author": "Auteur",
 	"domain.contact.role.collaborator": "Collaborateur",
 	"domain.contact.role.contributor": "Contributeur",
@@ -21141,6 +21149,7 @@ var fr = {
 	"pagination.nextPage": "Page suivante",
 	"pagination.page": "Page",
 	"pagination.pageOf": "sur",
+	"pagination.previousPage": "Page précédente",
 	"record.action.delete": "Supprimer",
 	"record.action.download": "Télécharger",
 	"record.action.duplicate": "Dupliquer",
@@ -21255,9 +21264,9 @@ var fr = {
 	"record.metadata.quality.updateFrequency.failed": "La fréquence de mise à jour n'est pas renseignée",
 	"record.metadata.quality.updateFrequency.success": "La fréquence de mise à jour est renseignée",
 	"record.metadata.related": "Explorez le catalogue",
-	"record.metadata.resourceCreated": "Créé le {date}",
-	"record.metadata.resourcePublished": "Publié le {date}",
-	"record.metadata.resourceUpdated": "Mis à jour le {date}",
+	"record.metadata.resourceCreated": "Créé",
+	"record.metadata.resourcePublished": "Publié",
+	"record.metadata.resourceUpdated": "Mis à jour",
 	"record.metadata.ressources.and.links": "Ressources et liens",
 	"record.metadata.sheet": "Fiche de métadonnées d'origine",
 	"record.metadata.status": "Statut",
@@ -21272,7 +21281,7 @@ var fr = {
 	"record.metadata.uniqueId": "Identificateur de ressource unique",
 	"record.metadata.update": "Date de mise à jour",
 	"record.metadata.updateFrequency": "Fréquence de mise à jour des données",
-	"record.metadata.updatedOn": "Fiche de métadonnées modifiée le",
+	"record.metadata.updatedOn": "Fiche de métadonnées modifiée",
 	"record.metadata.usage": "Licences et conditions d'utilisation",
 	"record.metadata.userFeedbacks": "Questions / Réponses",
 	"record.metadata.userFeedbacks.anonymousUser": "Pour rédiger un commentaire, veuillez vous identifier.",
@@ -21379,10 +21388,8 @@ var fr = {
 	"service.metadata.spatialExtent": "Etendue spatiale",
 	"share.tab.permalink": "Partager",
 	"share.tab.webComponent": "Intégrer",
-	"stac.filter.from": "Du",
-	"stac.filter.period": "Choix de la période",
 	"stac.filter.reset": "Réinitialiser les filtres",
-	"stac.filter.to": "Au",
+	"stac.results.noResults": "Vos filtres ne permettent pas d’afficher de résultats",
 	"table.loading.data": "Chargement des données...",
 	"table.object.count": "enregistrements dans ce jeu de données",
 	"table.paginator.firstPage": "Première page",
@@ -21471,6 +21478,9 @@ var it = {
 	"dataset.error.restrictedAccess": "L'accesso a questa risorsa è limitato",
 	"dataset.error.unknown": "Impossibile visualizzare i dati: \"{info}\"",
 	"dataset.error.unsupportedType": "Il seguente tipo di contenuto non è supportato: \"{info}\"",
+	"daterange.filter.from": "",
+	"daterange.filter.period": "",
+	"daterange.filter.to": "",
 	"domain.contact.role.author": "Autore",
 	"domain.contact.role.collaborator": "Collaboratore",
 	"domain.contact.role.contributor": "Collaboratore",
@@ -21806,6 +21816,7 @@ var it = {
 	"pagination.nextPage": "Pagina successiva",
 	"pagination.page": "pagina",
 	"pagination.pageOf": "di",
+	"pagination.previousPage": "",
 	"record.action.delete": "Elimina",
 	"record.action.download": "Scarica",
 	"record.action.duplicate": "Duplicato",
@@ -21920,9 +21931,9 @@ 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.resourceCreated": "Creato il {date}",
-	"record.metadata.resourcePublished": "Pubblicato il {date}",
-	"record.metadata.resourceUpdated": "Ultimo aggiornamento il {date}",
+	"record.metadata.resourceCreated": "Creato",
+	"record.metadata.resourcePublished": "Pubblicato",
+	"record.metadata.resourceUpdated": "Ultimo aggiornamento",
 	"record.metadata.ressources.and.links": "Risorse e collegamenti",
 	"record.metadata.sheet": "Origine dei metadati",
 	"record.metadata.status": "Stato",
@@ -21937,7 +21948,7 @@ var it = {
 	"record.metadata.uniqueId": "Identificatore unico di risorsa",
 	"record.metadata.update": "Data di aggiornamento",
 	"record.metadata.updateFrequency": "Frequenza di aggiornamento dei dati",
-	"record.metadata.updatedOn": "Metadati modificati il",
+	"record.metadata.updatedOn": "Metadati modificati",
 	"record.metadata.usage": "Licenze e limiti di utilizzo",
 	"record.metadata.userFeedbacks": "Domande / Risposte",
 	"record.metadata.userFeedbacks.anonymousUser": "Per pubblicare un commento, effettua il login.",
@@ -22044,10 +22055,8 @@ var it = {
 	"service.metadata.spatialExtent": "Estensione spaziale",
 	"share.tab.permalink": "Condividere",
 	"share.tab.webComponent": "Incorporare",
-	"stac.filter.from": "",
-	"stac.filter.period": "",
 	"stac.filter.reset": "",
-	"stac.filter.to": "",
+	"stac.results.noResults": "",
 	"table.loading.data": "Caricamento dei dati...",
 	"table.object.count": "record in questi dati",
 	"table.paginator.firstPage": "Prima pagina",
@@ -22136,6 +22145,9 @@ var nl = {
 	"dataset.error.restrictedAccess": "",
 	"dataset.error.unknown": "",
 	"dataset.error.unsupportedType": "",
+	"daterange.filter.from": "",
+	"daterange.filter.period": "",
+	"daterange.filter.to": "",
 	"domain.contact.role.author": "",
 	"domain.contact.role.collaborator": "",
 	"domain.contact.role.contributor": "",
@@ -22471,6 +22483,7 @@ var nl = {
 	"pagination.nextPage": "",
 	"pagination.page": "",
 	"pagination.pageOf": "",
+	"pagination.previousPage": "",
 	"record.action.delete": "",
 	"record.action.download": "",
 	"record.action.duplicate": "",
@@ -22709,10 +22722,8 @@ var nl = {
 	"service.metadata.spatialExtent": "",
 	"share.tab.permalink": "",
 	"share.tab.webComponent": "",
-	"stac.filter.from": "",
-	"stac.filter.period": "",
 	"stac.filter.reset": "",
-	"stac.filter.to": "",
+	"stac.results.noResults": "",
 	"table.loading.data": "",
 	"table.object.count": "",
 	"table.paginator.firstPage": "",
@@ -22801,6 +22812,9 @@ var pt = {
 	"dataset.error.restrictedAccess": "",
 	"dataset.error.unknown": "",
 	"dataset.error.unsupportedType": "",
+	"daterange.filter.from": "",
+	"daterange.filter.period": "",
+	"daterange.filter.to": "",
 	"domain.contact.role.author": "",
 	"domain.contact.role.collaborator": "",
 	"domain.contact.role.contributor": "",
@@ -23136,6 +23150,7 @@ var pt = {
 	"pagination.nextPage": "",
 	"pagination.page": "",
 	"pagination.pageOf": "",
+	"pagination.previousPage": "",
 	"record.action.delete": "",
 	"record.action.download": "",
 	"record.action.duplicate": "",
@@ -23374,10 +23389,8 @@ var pt = {
 	"service.metadata.spatialExtent": "",
 	"share.tab.permalink": "",
 	"share.tab.webComponent": "",
-	"stac.filter.from": "",
-	"stac.filter.period": "",
 	"stac.filter.reset": "",
-	"stac.filter.to": "",
+	"stac.results.noResults": "",
 	"table.loading.data": "",
 	"table.object.count": "",
 	"table.paginator.firstPage": "",
@@ -23466,6 +23479,9 @@ var sk = {
 	"dataset.error.restrictedAccess": "",
 	"dataset.error.unknown": "Dáta nie je možné zobraziť: \"{ info }\"",
 	"dataset.error.unsupportedType": "Nepodporovaný typ obsahu: \"{ info }\"",
+	"daterange.filter.from": "",
+	"daterange.filter.period": "",
+	"daterange.filter.to": "",
 	"domain.contact.role.author": "",
 	"domain.contact.role.collaborator": "",
 	"domain.contact.role.contributor": "",
@@ -23801,6 +23817,7 @@ var sk = {
 	"pagination.nextPage": "Ďalšia stránka",
 	"pagination.page": "strana",
 	"pagination.pageOf": "z",
+	"pagination.previousPage": "",
 	"record.action.delete": "",
 	"record.action.download": "Stiahnuť",
 	"record.action.duplicate": "",
@@ -23932,7 +23949,7 @@ var sk = {
 	"record.metadata.uniqueId": "Jedinečný identifikátor",
 	"record.metadata.update": "Dátum aktualizácie",
 	"record.metadata.updateFrequency": "Frekvencia aktualizácie metadát",
-	"record.metadata.updatedOn": "Metadáta zmenené dňa",
+	"record.metadata.updatedOn": "Metadáta zmenené",
 	"record.metadata.usage": "Použitie a obmedzenia",
 	"record.metadata.userFeedbacks": "",
 	"record.metadata.userFeedbacks.anonymousUser": "",
@@ -24039,10 +24056,8 @@ var sk = {
 	"service.metadata.spatialExtent": "",
 	"share.tab.permalink": "Zdieľať",
 	"share.tab.webComponent": "Integrovať",
-	"stac.filter.from": "",
-	"stac.filter.period": "",
 	"stac.filter.reset": "",
-	"stac.filter.to": "",
+	"stac.results.noResults": "",
 	"table.loading.data": "Načítanie údajov...",
 	"table.object.count": "objekty v tomto súbore údajov",
 	"table.paginator.firstPage": "",
@@ -24595,7 +24610,6 @@ const ES_SOURCE_SUMMARY = [
     'resourceAbstractObject',
     'overview',
     'logo',
-    'codelist_status_text',
     'link',
     'linkProtocol',
     'contactForResource*.organisation*',
@@ -24780,9 +24794,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.Location }] });
 
+const DEFAULT_LANGUAGE = 'en';
 class DateService {
     constructor(translateService) {
         this.translateService = translateService;
+        this.dateLocales = import('./geonetwork-ui-date-locales-MYnkDJ5h.mjs').then((obj) => obj.default);
     }
     getDateObject(date) {
         if (typeof date === 'string') {
@@ -24795,10 +24811,15 @@ class DateService {
         return date;
     }
     getLocaleAndDate(date) {
-        const locale = this.translateService.currentLang || 'en-US';
+        const locale = this.translateService.currentLang || DEFAULT_LANGUAGE;
         const dateObj = this.getDateObject(date);
         return { locale, dateObj };
     }
+    async getDateLocale() {
+        const lang = this.translateService.currentLang || DEFAULT_LANGUAGE;
+        const locales = await this.dateLocales;
+        return locales[lang];
+    }
     formatDate(date, options) {
         const { locale, dateObj } = this.getLocaleAndDate(date);
         return dateObj.toLocaleDateString(locale, options);
@@ -24807,6 +24828,15 @@ class DateService {
         const { locale, dateObj } = this.getLocaleAndDate(date);
         return dateObj.toLocaleString(locale, options);
     }
+    async formatRelativeDateTime(date) {
+        const dateObj = this.getDateObject(date);
+        const now = new Date();
+        const locale = await this.getDateLocale();
+        return formatDistance(dateObj, now, {
+            addSuffix: true,
+            locale: locale,
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateService, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateService, providedIn: 'root' }); }
 }
@@ -25597,7 +25627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 var name = "geonetwork-ui";
-var version = "2.8.0-dev.cba2fd2eb";
+var version = "2.8.0-dev.e46888fcc";
 var engines = {
 	node: ">=20"
 };
@@ -25799,6 +25829,35 @@ function updateLanguages(record, defaultLanguage, otherLanguages) {
     return updatedRecord;
 }
 
+class GnUiHumanizeDateDirective {
+    constructor(dateService, el, renderer) {
+        this.dateService = dateService;
+        this.el = el;
+        this.renderer = renderer;
+    }
+    async ngOnInit() {
+        await this.updateElement();
+    }
+    async updateElement() {
+        const dateValue = this.gnUiHumanizeDate;
+        const fullDateTime = this.dateService.formatDateTime(dateValue);
+        const relativeDate = await this.dateService.formatRelativeDateTime(dateValue);
+        this.renderer.setAttribute(this.el.nativeElement, 'title', fullDateTime);
+        this.renderer.setProperty(this.el.nativeElement, 'textContent', relativeDate);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GnUiHumanizeDateDirective, deps: [{ token: DateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GnUiHumanizeDateDirective, isStandalone: true, selector: "[gnUiHumanizeDate]", inputs: { gnUiHumanizeDate: "gnUiHumanizeDate" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GnUiHumanizeDateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gnUiHumanizeDate]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: DateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { gnUiHumanizeDate: [{
+                type: Input
+            }] } });
+
 class ElasticsearchService {
     // we're using getters in case the defined languages change over time
     get metadataLang() {
@@ -29351,7 +29410,7 @@ class AutocompleteComponent {
             provideNgIconsConfig({
                 size: '1.75rem',
             }),
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <div\n    class=\"absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none\"\n    *ngIf=\"!allowSubmit\"\n  >\n    <ng-icon name=\"iconoirSearch\" class=\"text-primary search\"></ng-icon>\n  </div>\n  <div class=\"flex flex-row\">\n    <input\n      #searchInput\n      type=\"text\"\n      class=\"gn-ui-text-input\"\n      (input)=\"handleInput($event)\"\n      [placeholder]=\"placeholder\"\n      [formControl]=\"control\"\n      [matAutocomplete]=\"auto\"\n      (keyup.enter)=\"handleSearch()\"\n      [ngClass]=\"{\n        'text-primary': searchActive && enterButton,\n        'text-gray-900': !searchActive,\n        'px-[--icon-width]': !allowSubmit,\n      }\"\n    />\n    <gn-ui-button\n      type=\"gray\"\n      *ngIf=\"searchInput.value && displayEnterBtn\"\n      extraClass=\"w-32 h-8 !opacity-100\"\n      [ngStyle]=\"{ left: enterBtnPosition + 'px' }\"\n      class=\"absolute\"\n      disabled=\"true\"\n    >\n      <ng-icon\n        name=\"iconoirLongArrowDownLeft\"\n        class=\"!w-4 text-gray-900 font-bold\"\n      ></ng-icon>\n      <span translate class=\"text-bold text-gray-900 font-bold\">\n        Enter to search\n      </span>\n    </gn-ui-button>\n  </div>\n  <gn-ui-button\n    type=\"primary\"\n    [extraClass]=\"getExtraClass()\"\n    data-test=\"clear-btn\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (buttonClick)=\"clear()\"\n  >\n    <ng-icon class=\"text-white\" name=\"matClose\"></ng-icon>\n  </gn-ui-button>\n  <gn-ui-button\n    type=\"light\"\n    extraClass=\"border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]\"\n    aria-label=\"Trigger search\"\n    *ngIf=\"allowSubmit\"\n    data-test=\"autocomplete-submit-btn\"\n    (buttonClick)=\"handleSearch()\"\n  >\n    <ng-icon name=\"iconoirSearch\"></ng-icon>\n  </gn-ui-button>\n\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"matErrorOutlineOutline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</span>\n\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFnInternal\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion text-start\"\n  >\n    {{ displayWithFnInternal(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: ["span{--icon-padding: var(--gn-ui-text-input-border-size, 2px);--icon-width: calc(var(--gn-ui-text-input-padding, .6em) * 2 + 1.25em)}span>*:not(gn-ui-popup-alert){font-size:var(--gn-ui-text-input-font-size, 1em)}input:placeholder-shown{text-overflow:ellipsis}gn-ui-button{--gn-ui-button-rounded: 0;--gn-ui-button-width: var(--icon-width);--gn-ui-button-padding: 0;font-size:1em}ng-icon.search{margin-top:.6rem;margin-left:.6rem}gn-ui-button:last-of-type{--gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, .25em) var(--gn-ui-text-input-rounded, .25em) 0}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <div\n    class=\"absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none\"\n    *ngIf=\"!allowSubmit\"\n  >\n    <ng-icon name=\"iconoirSearch\" class=\"text-primary search\"></ng-icon>\n  </div>\n  <div class=\"flex flex-row\">\n    <input\n      #searchInput\n      type=\"text\"\n      class=\"gn-ui-text-input\"\n      (input)=\"handleInput($event)\"\n      [placeholder]=\"placeholder\"\n      [formControl]=\"control\"\n      [matAutocomplete]=\"auto\"\n      (keyup.enter)=\"handleSearch()\"\n      [ngClass]=\"{\n        'text-primary': searchActive && enterButton,\n        'text-gray-900': !searchActive,\n        'px-[--icon-width]': !allowSubmit,\n      }\"\n    />\n    <gn-ui-button\n      type=\"gray\"\n      *ngIf=\"searchInput.value && displayEnterBtn\"\n      extraClass=\"w-32 h-8 !opacity-100\"\n      [ngStyle]=\"{ left: enterBtnPosition + 'px' }\"\n      class=\"absolute\"\n      disabled=\"true\"\n    >\n      <ng-icon\n        name=\"iconoirLongArrowDownLeft\"\n        class=\"!w-4 text-gray-900 font-bold\"\n      ></ng-icon>\n      <span translate class=\"text-bold text-gray-900 font-bold\">\n        Enter to search\n      </span>\n    </gn-ui-button>\n  </div>\n  <gn-ui-button\n    type=\"primary\"\n    [extraClass]=\"getExtraClass()\"\n    data-test=\"clear-btn\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (buttonClick)=\"clear()\"\n  >\n    <ng-icon class=\"text-white\" name=\"matClose\"></ng-icon>\n  </gn-ui-button>\n  <gn-ui-button\n    type=\"light\"\n    extraClass=\"border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]\"\n    aria-label=\"Trigger search\"\n    *ngIf=\"allowSubmit\"\n    data-test=\"autocomplete-submit-btn\"\n    (buttonClick)=\"handleSearch()\"\n  >\n    <ng-icon name=\"iconoirSearch\"></ng-icon>\n  </gn-ui-button>\n\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"matErrorOutlineOutline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</span>\n\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFnInternal\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion text-start\"\n  >\n    {{ displayWithFnInternal(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: ["span{--icon-padding: var(--gn-ui-text-input-border-size, 2px);--icon-width: calc(var(--gn-ui-text-input-padding, .6em) * 2 + 1.25em)}span>*:not(gn-ui-popup-alert){font-size:var(--gn-ui-text-input-font-size, 1em)}input:placeholder-shown{text-overflow:ellipsis}gn-ui-button{--gn-ui-button-rounded: 0;--gn-ui-button-width: var(--icon-width);--gn-ui-button-padding: 0;font-size:1em}ng-icon.search{margin-top:.6rem;margin-left:.6rem}gn-ui-button:last-of-type{--gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, .25em) var(--gn-ui-text-input-rounded, .25em) 0}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i1$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -29460,7 +29519,7 @@ class CheckToggleComponent {
         this.toggled.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckToggleComponent, isStandalone: true, selector: "gn-ui-check-toggle", inputs: { title: "title", label: "label", value: "value", color: "color" }, outputs: { toggled: "toggled" }, ngImport: i0, template: "<label\n  class=\"inline-flex relative items-start cursor-pointer\"\n  [title]=\"title || label\"\n>\n  <span class=\"shrink-0\">\n    <input\n      type=\"checkbox\"\n      class=\"sr-only peer\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"toggle($event)\"\n    />\n    <div\n      class=\"w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all\"\n      [class]=\"\n        color === 'secondary'\n          ? 'peer-focus:ring-secondary-lighter peer-checked:bg-secondary'\n          : 'peer-focus:ring-primary-lighter peer-checked:bg-primary'\n      \"\n    ></div>\n  </span>\n  <span class=\"ml-3 mt-[2px] text-sm font-medium\">{{ label }}</span>\n</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckToggleComponent, isStandalone: true, selector: "gn-ui-check-toggle", inputs: { title: "title", label: "label", value: "value", color: "color" }, outputs: { toggled: "toggled" }, ngImport: i0, template: "<label\n  class=\"inline-flex relative items-start cursor-pointer\"\n  [title]=\"title || label\"\n>\n  <span class=\"shrink-0\">\n    <input\n      type=\"checkbox\"\n      class=\"sr-only peer\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"toggle($event)\"\n    />\n    <div\n      class=\"w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all\"\n      [class]=\"\n        color === 'secondary'\n          ? 'peer-focus:ring-secondary-lighter peer-checked:bg-secondary'\n          : 'peer-focus:ring-primary-lighter peer-checked:bg-primary'\n      \"\n    ></div>\n  </span>\n  <span class=\"ml-3 mt-[2px] text-sm font-medium\">{{ label }}</span>\n</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "18.2.13", ngImport: i0, type: CheckToggleComponent, decorators: [{
             type: Component,
@@ -29493,7 +29552,7 @@ class CheckboxComponent {
         this.changed.emit(this.checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxComponent, isStandalone: true, selector: "gn-ui-checkbox", inputs: { type: "type", checked: "checked", indeterminate: "indeterminate" }, outputs: { changed: "changed" }, ngImport: i0, template: "<mat-checkbox\n  class=\"cursor-pointer\"\n  [class]=\"classList\"\n  [checked]=\"checked\"\n  [indeterminate]=\"indeterminate\"\n  (click)=\"handleClick($event)\"\n></mat-checkbox>\n", styles: [".default{--gn-ui-checkbox-color: var(--color-main)}.secondary{--gn-ui-checkbox-color: var(--color-secondary)}.primary{--gn-ui-checkbox-color: var(--color-primary)}mat-checkbox{--mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-state-layer-color: var( --gn-ui-checkbox-color )}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxComponent, isStandalone: true, selector: "gn-ui-checkbox", inputs: { type: "type", checked: "checked", indeterminate: "indeterminate" }, outputs: { changed: "changed" }, ngImport: i0, template: "<mat-checkbox\n  class=\"cursor-pointer\"\n  [class]=\"classList\"\n  [checked]=\"checked\"\n  [indeterminate]=\"indeterminate\"\n  (click)=\"handleClick($event)\"\n></mat-checkbox>\n", styles: [".default{--gn-ui-checkbox-color: var(--color-main)}.secondary{--gn-ui-checkbox-color: var(--color-secondary)}.primary{--gn-ui-checkbox-color: var(--color-primary)}mat-checkbox{--mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-state-layer-color: var( --gn-ui-checkbox-color )}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -29518,7 +29577,7 @@ class CopyTextButtonComponent {
         event.target.blur();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CopyTextButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CopyTextButtonComponent, isStandalone: true, selector: "gn-ui-copy-text-button", inputs: { text: "text", tooltipText: "tooltipText", displayText: "displayText", rows: "rows" }, ngImport: i0, template: "<div class=\"flex\">\n  <input\n    *ngIf=\"displayText && rows <= 1\"\n    type=\"text\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate\"\n    value=\"{{ text }}\"\n    readonly\n  />\n  <textarea\n    *ngIf=\"displayText && rows > 1\"\n    [rows]=\"rows\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max\"\n    readonly\n    >{{ text }}</textarea\n  >\n  <button\n    type=\"button\"\n    (click)=\"copyText($event)\"\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    [matTooltip]=\"tooltipText\"\n    matTooltipPosition=\"above\"\n  >\n    <ng-icon\n      name=\"matContentCopy\"\n      class=\"pointer-events-none align-middle card-icon\"\n    ></ng-icon>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [provideIcons({ matContentCopy })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CopyTextButtonComponent, isStandalone: true, selector: "gn-ui-copy-text-button", inputs: { text: "text", tooltipText: "tooltipText", displayText: "displayText", rows: "rows" }, ngImport: i0, template: "<div class=\"flex\">\n  <input\n    *ngIf=\"displayText && rows <= 1\"\n    type=\"text\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate\"\n    value=\"{{ text }}\"\n    readonly\n  />\n  <textarea\n    *ngIf=\"displayText && rows > 1\"\n    [rows]=\"rows\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max\"\n    readonly\n    >{{ text }}</textarea\n  >\n  <button\n    type=\"button\"\n    (click)=\"copyText($event)\"\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    [matTooltip]=\"tooltipText\"\n    matTooltipPosition=\"above\"\n  >\n    <ng-icon\n      name=\"matContentCopy\"\n      class=\"pointer-events-none align-middle card-icon\"\n    ></ng-icon>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [provideIcons({ matContentCopy })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CopyTextButtonComponent, decorators: [{
             type: Component,
@@ -29534,16 +29593,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class DatePickerComponent {
-    constructor() {
+    constructor(dateAdapter, translate) {
+        this.dateAdapter = dateAdapter;
+        this.translate = translate;
         this.dateChange = new EventEmitter();
+        this.dateAdapter.setLocale(this.translate.currentLang);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1$6.DateAdapter }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatePickerComponent, isStandalone: true, selector: "gn-ui-date-picker", inputs: { date: "date" }, outputs: { dateChange: "dateChange" }, providers: [
             provideIcons({ iconoirCalendar }),
             provideNgIconsConfig({
                 size: '1.5rem',
             }),
-        ], ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <input\n    class=\"gn-ui-text-input pr-[var(--text-padding)]\"\n    [matDatepicker]=\"picker\"\n    [value]=\"date\"\n    (dateChange)=\"dateChange.emit($event.value)\"\n  />\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    data-cy=\"date-picker-button\"\n    extraClass=\"h-full\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-datepicker #picker></mat-datepicker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"], dependencies: [{ kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            {
+                provide: MAT_DATE_LOCALE,
+                useFactory: (locale) => locale,
+            },
+        ], ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <input\n    class=\"gn-ui-text-input pr-[var(--text-padding)]\"\n    [matDatepicker]=\"picker\"\n    [value]=\"date\"\n    (dateChange)=\"dateChange.emit($event.value)\"\n  />\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    data-cy=\"date-picker-button\"\n    extraClass=\"h-full\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-datepicker #picker></mat-datepicker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"], dependencies: [{ kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -29557,8 +29623,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         provideNgIconsConfig({
                             size: '1.5rem',
                         }),
+                        {
+                            provide: MAT_DATE_LOCALE,
+                            useFactory: (locale) => locale,
+                        },
                     ], template: "<span class=\"w-full inline-block relative\">\n  <input\n    class=\"gn-ui-text-input pr-[var(--text-padding)]\"\n    [matDatepicker]=\"picker\"\n    [value]=\"date\"\n    (dateChange)=\"dateChange.emit($event.value)\"\n  />\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    data-cy=\"date-picker-button\"\n    extraClass=\"h-full\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-datepicker #picker></mat-datepicker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"] }]
-        }], propDecorators: { date: [{
+        }], ctorParameters: () => [{ type: i1$6.DateAdapter }, { type: i1$1.TranslateService }], propDecorators: { date: [{
                 type: Input
             }], dateChange: [{
                 type: Output
@@ -29587,7 +29657,7 @@ class DateRangeDropdownComponent {
                 matExpandMore,
                 matExpandLess,
             }),
-        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  (buttonClick)=\"picker.open()\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n  </div>\n  <ng-icon\n    [name]=\"isPickerDisplayed ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n<!--date range input is just present for output events and hidden from the DOM-->\n<mat-date-range-input [rangePicker]=\"picker\">\n  <input\n    matStartDate\n    [value]=\"startDate\"\n    (dateInput)=\"startDateChange.emit($event.value)\"\n  />\n  <input\n    matEndDate\n    [value]=\"endDate\"\n    (dateInput)=\"endDateChange.emit($event.value)\"\n  />\n</mat-date-range-input>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host .mat-date-range-input-container{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$7.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$7.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }] }); }
+        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  (buttonClick)=\"picker.open()\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n  </div>\n  <ng-icon\n    [name]=\"isPickerDisplayed ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n<!--date range input is just present for output events and hidden from the DOM-->\n<mat-date-range-input [rangePicker]=\"picker\">\n  <input\n    matStartDate\n    [value]=\"startDate\"\n    (dateInput)=\"startDateChange.emit($event.value)\"\n  />\n  <input\n    matEndDate\n    [value]=\"endDate\"\n    (dateInput)=\"endDateChange.emit($event.value)\"\n  />\n</mat-date-range-input>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host .mat-date-range-input-container{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeDropdownComponent, decorators: [{
             type: Component,
@@ -29629,7 +29699,7 @@ class DateRangePickerComponent {
             provideNgIconsConfig({
                 size: '1.5rem',
             }),
-        ], ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <mat-date-range-input [rangePicker]=\"picker\" class=\"gn-ui-text-input\">\n    <input\n      matStartDate\n      placeholder=\"Start date\"\n      [value]=\"startDate\"\n      (dateInput)=\"startDateChange.emit($event.value)\"\n    />\n    <input\n      matEndDate\n      placeholder=\"End date\"\n      [value]=\"endDate\"\n      (dateInput)=\"endDateChange.emit($event.value)\"\n    />\n  </mat-date-range-input>\n\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    extraClass=\"h-full\"\n    data-cy=\"date-picker-button\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"], dependencies: [{ kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$7.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$7.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <mat-date-range-input [rangePicker]=\"picker\" class=\"gn-ui-text-input\">\n    <input\n      matStartDate\n      placeholder=\"Start date\"\n      [value]=\"startDate\"\n      (dateInput)=\"startDateChange.emit($event.value)\"\n    />\n    <input\n      matEndDate\n      placeholder=\"End date\"\n      [value]=\"endDate\"\n      (dateInput)=\"endDateChange.emit($event.value)\"\n    />\n  </mat-date-range-input>\n\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    extraClass=\"h-full\"\n    data-cy=\"date-picker-button\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"], dependencies: [{ kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -29836,7 +29906,7 @@ class DropdownMultiselectComponent {
                 matExpandMore,
                 matExpandLess,
             }),
-        ], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, read: ElementRef }, { propertyName: "searchFieldInput", first: true, predicate: ["searchFieldInput"], descendants: true }, { propertyName: "checkboxes", predicate: ["checkBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    <div\n      *ngIf=\"hasSelectedChoices\"\n      class=\"gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n    >\n      {{ selected.length }}\n    </div>\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    <ng-icon\n      class=\"shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n      *ngIf=\"hasSelectedChoices && !overlayOpen\"\n      (click)=\"clearSelection($event)\"\n      name=\"matClose\"\n    ></ng-icon>\n  </button>\n  <ng-icon\n    [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\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.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    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      <button\n        type=\"button\"\n        *ngFor=\"let selected of selectedChoices\"\n        [title]=\"selected.label\"\n        class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n        (click)=\"select(selected, false)\"\n      >\n        <div class=\"text-sm truncate leading-[26px] px-2\">\n          {{ selected.label }}\n        </div>\n        <div\n          class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n        >\n          <ng-icon\n            name=\"matClose\"\n            class=\"!h-[12px] !w-[11px] text-[12px]\"\n          ></ng-icon>\n        </div>\n      </button>\n\n      <div *ngIf=\"allowSearch\" class=\"w-[50%] relative grow shrink\">\n        <input\n          #searchFieldInput\n          class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n          [(ngModel)]=\"searchInputValue\"\n          [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n        />\n        <button\n          *ngIf=\"!!searchInputValue\"\n          class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n          (click)=\"clearSearchInputValue($event)\"\n        >\n          <ng-icon class=\"!h-[10px] !w-[12px] text-[12px]\" name=\"matClose\">\n          </ng-icon>\n        </button>\n      </div>\n    </div>\n\n    <label\n      *ngFor=\"let choice of filteredChoicesByText\"\n      [title]=\"choice.label\"\n      class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n    >\n      <input\n        class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n        type=\"checkbox\"\n        #checkBox\n        [checked]=\"isSelected(choice)\"\n        (change)=\"select(choice, checkBox.checked)\"\n      />\n      <span class=\"ml-[8px] text-[14px] truncate\">\n        {{ choice.label }}\n      </span>\n    </label>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$8.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", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$8.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, read: ElementRef }, { propertyName: "searchFieldInput", first: true, predicate: ["searchFieldInput"], descendants: true }, { propertyName: "checkboxes", predicate: ["checkBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    <div\n      *ngIf=\"hasSelectedChoices\"\n      class=\"gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n    >\n      {{ selected.length }}\n    </div>\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    <ng-icon\n      class=\"shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n      *ngIf=\"hasSelectedChoices && !overlayOpen\"\n      (click)=\"clearSelection($event)\"\n      name=\"matClose\"\n    ></ng-icon>\n  </button>\n  <ng-icon\n    [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\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.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    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      <button\n        type=\"button\"\n        *ngFor=\"let selected of selectedChoices\"\n        [title]=\"selected.label\"\n        class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n        (click)=\"select(selected, false)\"\n      >\n        <div class=\"text-sm truncate leading-[26px] px-2\">\n          {{ selected.label }}\n        </div>\n        <div\n          class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n        >\n          <ng-icon\n            name=\"matClose\"\n            class=\"!h-[12px] !w-[11px] text-[12px]\"\n          ></ng-icon>\n        </div>\n      </button>\n\n      <div *ngIf=\"allowSearch\" class=\"w-[50%] relative grow shrink\">\n        <input\n          #searchFieldInput\n          class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n          [(ngModel)]=\"searchInputValue\"\n          [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n        />\n        <button\n          *ngIf=\"!!searchInputValue\"\n          class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n          (click)=\"clearSearchInputValue($event)\"\n        >\n          <ng-icon class=\"!h-[10px] !w-[12px] text-[12px]\" name=\"matClose\">\n          </ng-icon>\n        </button>\n      </div>\n    </div>\n\n    <label\n      *ngFor=\"let choice of filteredChoicesByText\"\n      [title]=\"choice.label\"\n      class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n    >\n      <input\n        class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n        type=\"checkbox\"\n        #checkBox\n        [checked]=\"isSelected(choice)\"\n        (change)=\"select(choice, checkBox.checked)\"\n      />\n      <span class=\"ml-[8px] text-[14px] truncate\">\n        {{ choice.label }}\n      </span>\n    </label>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$8.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", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$8.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownMultiselectComponent, decorators: [{
             type: Component,
@@ -30678,7 +30748,7 @@ class SearchFeatureCatalogComponent {
         return (this.filteredFeatureCatalog?.featureTypes?.reduce((total, featureType) => total + (featureType.attributes?.length || 0), 0) || 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchFeatureCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchFeatureCatalogComponent, isStandalone: true, selector: "gn-ui-search-feature-catalog", inputs: { featureCatalog: "featureCatalog" }, outputs: { filteredFeatureCatalogChange: "filteredFeatureCatalogChange" }, ngImport: i0, template: "<div\n  class=\"flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300\"\n  *ngIf=\"\n    (isMobile$ | async) === false || featureCatalog?.featureTypes?.length > 1\n  \"\n>\n  <div\n    class=\"relative shrink-0\"\n    *ngIf=\"featureCatalog?.featureTypes?.length > 1\"\n  >\n    <input\n      type=\"text\"\n      [placeholder]=\"'search.filter.into.feature.catalog' | translate\"\n      class=\"w-[220px] h-8 pl-3 pr-10 py-2 border rounded-md\"\n      [(ngModel)]=\"searchTerm\"\n      (ngModelChange)=\"filterAction(searchTerm)\"\n    />\n    <ng-icon\n      class=\"absolute right-2.5 top-1 w-6 h-6 text-black\"\n      name=\"iconoirSearch\"\n    ></ng-icon>\n  </div>\n  <div\n    *ngIf=\"(isMobile$ | async) === false\"\n    class=\"text-sm px-1 ml-auto inline\"\n  >\n    <ng-container *ngIf=\"featureCatalog?.featureTypes?.length > 1\">\n      <span\n        class=\"text-sm font-medium text-gray-900\"\n        data-cy=\"total-objects-label\"\n        translate\n        >record.feature.catalog.number.total.object</span\n      ><span\n        class=\"text-sm font-bold px-1 text-gray-900\"\n        data-cy=\"total-objects\"\n        >{{ totalObjects }}</span\n      >\n      <span class=\"px-1.5\">|</span>\n    </ng-container>\n    <span\n      class=\"text-sm font-medium px-1 text-gray-900\"\n      data-cy=\"total-attributes-label\"\n      translate\n      >record.feature.catalog.number.total.attribute</span\n    ><span class=\"text-sm font-bold text-gray-900\" data-cy=\"total-attributes\">{{\n      totalAttributes\n    }}</span>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchFeatureCatalogComponent, isStandalone: true, selector: "gn-ui-search-feature-catalog", inputs: { featureCatalog: "featureCatalog" }, outputs: { filteredFeatureCatalogChange: "filteredFeatureCatalogChange" }, ngImport: i0, template: "<div\n  class=\"flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300\"\n  *ngIf=\"\n    (isMobile$ | async) === false || featureCatalog?.featureTypes?.length > 1\n  \"\n>\n  <div\n    class=\"relative shrink-0\"\n    *ngIf=\"featureCatalog?.featureTypes?.length > 1\"\n  >\n    <input\n      type=\"text\"\n      [placeholder]=\"'search.filter.into.feature.catalog' | translate\"\n      class=\"w-[220px] h-8 pl-3 pr-10 py-2 border rounded-md\"\n      [(ngModel)]=\"searchTerm\"\n      (ngModelChange)=\"filterAction(searchTerm)\"\n    />\n    <ng-icon\n      class=\"absolute right-2.5 top-1 w-6 h-6 text-black\"\n      name=\"iconoirSearch\"\n    ></ng-icon>\n  </div>\n  <div\n    *ngIf=\"(isMobile$ | async) === false\"\n    class=\"text-sm px-1 ml-auto inline\"\n  >\n    <ng-container *ngIf=\"featureCatalog?.featureTypes?.length > 1\">\n      <span\n        class=\"text-sm font-medium text-gray-900\"\n        data-cy=\"total-objects-label\"\n        translate\n        >record.feature.catalog.number.total.object</span\n      ><span\n        class=\"text-sm font-bold px-1 text-gray-900\"\n        data-cy=\"total-objects\"\n        >{{ totalObjects }}</span\n      >\n      <span class=\"px-1.5\">|</span>\n    </ng-container>\n    <span\n      class=\"text-sm font-medium px-1 text-gray-900\"\n      data-cy=\"total-attributes-label\"\n      translate\n      >record.feature.catalog.number.total.attribute</span\n    ><span class=\"text-sm font-bold text-gray-900\" data-cy=\"total-attributes\">{{\n      totalAttributes\n    }}</span>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [
             provideIcons({ iconoirSearch }),
             provideNgIconsConfig({
                 size: '1.5rem',
@@ -30705,6 +30775,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
+class DateRangeInputsComponent {
+    constructor() {
+        this.temporalExtentChange = new EventEmitter();
+    }
+    onStartDateChange(date) {
+        this.temporalExtent = {
+            ...this.temporalExtent,
+            start: date,
+        };
+        this.temporalExtentChange.emit(this.temporalExtent);
+    }
+    onEndDateChange(date) {
+        this.temporalExtent = {
+            ...this.temporalExtent,
+            end: date,
+        };
+        this.temporalExtentChange.emit(this.temporalExtent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeInputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateRangeInputsComponent, isStandalone: true, selector: "gn-ui-date-range-inputs", inputs: { temporalExtent: "temporalExtent" }, outputs: { temporalExtentChange: "temporalExtentChange" }, ngImport: i0, template: "<div class=\"m-8\">\n  <p class=\"mb-4\" translate>daterange.filter.period</p>\n  <p translate>daterange.filter.from</p>\n  <gn-ui-date-picker\n    id=\"start-date-picker\"\n    [date]=\"temporalExtent?.start\"\n    (dateChange)=\"onStartDateChange($event)\"\n  ></gn-ui-date-picker>\n  <p class=\"mt-4\" translate>daterange.filter.to</p>\n  <gn-ui-date-picker\n    id=\"end-date-picker\"\n    [date]=\"temporalExtent?.end\"\n    (dateChange)=\"onEndDateChange($event)\"\n  ></gn-ui-date-picker>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DatePickerComponent, selector: "gn-ui-date-picker", inputs: ["date"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeInputsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-date-range-inputs', standalone: true, imports: [CommonModule, TranslateDirective, DatePickerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"m-8\">\n  <p class=\"mb-4\" translate>daterange.filter.period</p>\n  <p translate>daterange.filter.from</p>\n  <gn-ui-date-picker\n    id=\"start-date-picker\"\n    [date]=\"temporalExtent?.start\"\n    (dateChange)=\"onStartDateChange($event)\"\n  ></gn-ui-date-picker>\n  <p class=\"mt-4\" translate>daterange.filter.to</p>\n  <gn-ui-date-picker\n    id=\"end-date-picker\"\n    [date]=\"temporalExtent?.end\"\n    (dateChange)=\"onEndDateChange($event)\"\n  ></gn-ui-date-picker>\n</div>\n" }]
+        }], propDecorators: { temporalExtent: [{
+                type: Input
+            }], temporalExtentChange: [{
+                type: Output
+            }] } });
+
 class CellPopinComponent {
     set activePopin(active) {
         this._activePopin = !!active;
@@ -30874,7 +30974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class FormFieldWrapperComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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\" *ngIf=\"label; else onlyContent\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\" translate=\"\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\n        *ngIf=\"hint\"\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 mt-2\">\n    <ng-container *ngTemplateOutlet=\"onlyContent\"> </ng-container>\n  </div>\n</div>\n\n<ng-template #onlyContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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\" *ngIf=\"label; else onlyContent\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\" translate=\"\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\n        *ngIf=\"hint\"\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 mt-2\">\n    <ng-container *ngTemplateOutlet=\"onlyContent\"> </ng-container>\n  </div>\n</div>\n\n<ng-template #onlyContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldWrapperComponent, decorators: [{
             type: Component,
@@ -31305,7 +31405,7 @@ class PaginationComponent {
         this.listComponent.goToPage(this.applyPageBounds(newPage));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaginationComponent, isStandalone: true, selector: "gn-ui-pagination", inputs: { listComponent: "listComponent", hideButton: "hideButton" }, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"sm:absolute sm:inset-0\" *ngIf=\"!hideButton\">\n    <gn-ui-button\n      (buttonClick)=\"listComponent.goToNextPage()\"\n      type=\"secondary\"\n      [disabled]=\"listComponent.isLastPage\"\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]=\"listComponent.currentPage\"\n        [min]=\"1\"\n        [max]=\"listComponent.pagesCount\"\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>\n        {{ listComponent.pagesCount }}</span\n      >\n      <gn-ui-button\n        (buttonClick)=\"listComponent.goToPrevPage()\"\n        class=\"mr-2\"\n        [disabled]=\"listComponent.isFirstPage\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"prev-page\"\n      >\n        <ng-icon name=\"matChevronLeft\"></ng-icon>\n      </gn-ui-button>\n      <gn-ui-button\n        (buttonClick)=\"listComponent.goToNextPage()\"\n        [disabled]=\"listComponent.isLastPage\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"next-page\"\n      >\n        <ng-icon name=\"matChevronRight\"></ng-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaginationComponent, isStandalone: true, selector: "gn-ui-pagination", inputs: { listComponent: "listComponent", hideButton: "hideButton" }, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"sm:absolute sm:inset-0\" *ngIf=\"!hideButton\">\n    <gn-ui-button\n      (buttonClick)=\"listComponent.goToNextPage()\"\n      type=\"secondary\"\n      [disabled]=\"listComponent.isLastPage\"\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]=\"listComponent.currentPage\"\n        [min]=\"1\"\n        [max]=\"listComponent.pagesCount\"\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>\n        {{ listComponent.pagesCount }}</span\n      >\n      <gn-ui-button\n        (buttonClick)=\"listComponent.goToPrevPage()\"\n        class=\"mr-2\"\n        [disabled]=\"listComponent.isFirstPage\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"prev-page\"\n      >\n        <ng-icon name=\"matChevronLeft\"></ng-icon>\n      </gn-ui-button>\n      <gn-ui-button\n        (buttonClick)=\"listComponent.goToNextPage()\"\n        [disabled]=\"listComponent.isLastPage\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"next-page\"\n      >\n        <ng-icon name=\"matChevronRight\"></ng-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], viewProviders: [
             provideIcons({
                 matChevronLeft,
                 matChevronRight,
@@ -31378,24 +31478,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class PreviousNextButtonsComponent {
+    constructor() {
+        this.displayLabels = false;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PreviousNextButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PreviousNextButtonsComponent, isStandalone: true, selector: "gn-ui-previous-next-buttons", inputs: { listComponent: "listComponent" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PreviousNextButtonsComponent, isStandalone: true, selector: "gn-ui-previous-next-buttons", inputs: { listComponent: "listComponent", displayLabels: "displayLabels" }, providers: [
             provideIcons({ matArrowBackIos, matArrowForwardIos }),
             provideNgIconsConfig({
                 size: '0.875em',
             }),
-        ], ngImport: i0, template: "<div class=\"flex flex-row gap-x-1 items-center\">\n  <gn-ui-button\n    data-test=\"previousButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isFirstPage\n        ? 'border border-gray-300'\n        : 'border border-gray-100')\n    \"\n    [disabled]=\"listComponent.isFirstPage\"\n    (buttonClick)=\"listComponent.goToPrevPage()\"\n  >\n    <ng-icon name=\"matArrowBackIos\"></ng-icon>\n  </gn-ui-button>\n  <gn-ui-button\n    data-test=\"nextButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isLastPage\n        ? 'border border-gray-300'\n        : 'border border-gray-100')\n    \"\n    [disabled]=\"listComponent.isLastPage\"\n    (buttonClick)=\"listComponent.goToNextPage()\"\n  >\n    <ng-icon name=\"matArrowForwardIos\"></ng-icon>\n  </gn-ui-button>\n</div>\n", styles: [":host{--gn-ui-button-rounded: 100%;--gn-ui-button-width: 8px;--gn-ui-button-height: 8px;--gn-ui-button-padding: 12px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }] }); }
+        ], ngImport: i0, template: "<div class=\"flex flex-row gap-x-1 items-center\">\n  <gn-ui-button\n    data-test=\"previousButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isFirstPage\n        ? 'border border-gray-300 text-main'\n        : 'border border-gray-100 text-gray-300')\n    \"\n    [disabled]=\"listComponent.isFirstPage\"\n    (buttonClick)=\"listComponent.goToPrevPage()\"\n  >\n    <ng-icon name=\"matArrowBackIos\"></ng-icon>\n    <span *ngIf=\"displayLabels\" class=\"ml-2\" translate\n      >pagination.previousPage</span\n    >\n  </gn-ui-button>\n  <gn-ui-button\n    data-test=\"nextButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isLastPage\n        ? 'border border-gray-300 text-main'\n        : 'border border-gray-100 text-gray-300')\n    \"\n    [disabled]=\"listComponent.isLastPage\"\n    (buttonClick)=\"listComponent.goToNextPage()\"\n  >\n    <span *ngIf=\"displayLabels\" class=\"mr-2\" translate\n      >pagination.nextPage</span\n    >\n    <ng-icon name=\"matArrowForwardIos\"></ng-icon>\n  </gn-ui-button>\n</div>\n", styles: [":host{--gn-ui-button-rounded: 100%;--gn-ui-button-width: 8px;--gn-ui-button-height: 8px;--gn-ui-button-padding: 12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PreviousNextButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-previous-next-buttons', standalone: true, imports: [ButtonComponent, NgIconComponent], providers: [
+            args: [{ selector: 'gn-ui-previous-next-buttons', standalone: true, imports: [CommonModule, ButtonComponent, NgIconComponent, TranslateDirective], providers: [
                         provideIcons({ matArrowBackIos, matArrowForwardIos }),
                         provideNgIconsConfig({
                             size: '0.875em',
                         }),
-                    ], template: "<div class=\"flex flex-row gap-x-1 items-center\">\n  <gn-ui-button\n    data-test=\"previousButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isFirstPage\n        ? 'border border-gray-300'\n        : 'border border-gray-100')\n    \"\n    [disabled]=\"listComponent.isFirstPage\"\n    (buttonClick)=\"listComponent.goToPrevPage()\"\n  >\n    <ng-icon name=\"matArrowBackIos\"></ng-icon>\n  </gn-ui-button>\n  <gn-ui-button\n    data-test=\"nextButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isLastPage\n        ? 'border border-gray-300'\n        : 'border border-gray-100')\n    \"\n    [disabled]=\"listComponent.isLastPage\"\n    (buttonClick)=\"listComponent.goToNextPage()\"\n  >\n    <ng-icon name=\"matArrowForwardIos\"></ng-icon>\n  </gn-ui-button>\n</div>\n", styles: [":host{--gn-ui-button-rounded: 100%;--gn-ui-button-width: 8px;--gn-ui-button-height: 8px;--gn-ui-button-padding: 12px}\n"] }]
+                    ], template: "<div class=\"flex flex-row gap-x-1 items-center\">\n  <gn-ui-button\n    data-test=\"previousButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isFirstPage\n        ? 'border border-gray-300 text-main'\n        : 'border border-gray-100 text-gray-300')\n    \"\n    [disabled]=\"listComponent.isFirstPage\"\n    (buttonClick)=\"listComponent.goToPrevPage()\"\n  >\n    <ng-icon name=\"matArrowBackIos\"></ng-icon>\n    <span *ngIf=\"displayLabels\" class=\"ml-2\" translate\n      >pagination.previousPage</span\n    >\n  </gn-ui-button>\n  <gn-ui-button\n    data-test=\"nextButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isLastPage\n        ? 'border border-gray-300 text-main'\n        : 'border border-gray-100 text-gray-300')\n    \"\n    [disabled]=\"listComponent.isLastPage\"\n    (buttonClick)=\"listComponent.goToNextPage()\"\n  >\n    <span *ngIf=\"displayLabels\" class=\"mr-2\" translate\n      >pagination.nextPage</span\n    >\n    <ng-icon name=\"matArrowForwardIos\"></ng-icon>\n  </gn-ui-button>\n</div>\n", styles: [":host{--gn-ui-button-rounded: 100%;--gn-ui-button-width: 8px;--gn-ui-button-height: 8px;--gn-ui-button-padding: 12px}\n"] }]
         }], propDecorators: { listComponent: [{
                 type: Input
+            }], displayLabels: [{
+                type: Input
             }] } });
 
 class TruncatedTextComponent {
@@ -31923,7 +32028,6 @@ const FIELDS_SUMMARY = [
     'resourceAbstractObject',
     'overview',
     'logo',
-    'codelist_status_text',
     'link',
     'linkProtocol',
     'contactForResource*.organisation*',
@@ -33121,7 +33225,7 @@ class ApiCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ApiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ApiCardComponent, isStandalone: true, selector: "gn-ui-api-card", inputs: { link: "link", currentLink: "currentLink", size: "size" }, outputs: { openRecordApiForm: "openRecordApiForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"group flex justify-between rounded filter overflow-hidden card-shadow\"\n  [ngClass]=\"cardClass\"\n>\n  <ng-container *ngIf=\"size !== 'S'\">\n    <div class=\"flex-1 min-w-0\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <div class=\"flex items-center min-w-[32px]\">\n      <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"size === 'S'\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #buttons>\n  <div class=\"flex flex-row gap-2\">\n    <gn-ui-copy-text-button\n      [text]=\"link.url\"\n      [tooltipText]=\"'tooltip.url.copy' | translate\"\n      [displayText]=\"false\"\n      class=\"border border-gray-300 rounded-lg pt-1 px-2 h-[34px]\"\n    ></gn-ui-copy-text-button>\n    <button\n      *ngIf=\"displayApiFormButton\"\n      type=\"button\"\n      class=\"gn-ui-card-icon\"\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      [matTooltip]=\"\n        !currentlyActive\n          ? ('record.metadata.api.form.openForm' | translate)\n          : ('record.metadata.api.form.closeForm' | translate)\n      \"\n      matTooltipPosition=\"above\"\n      (click)=\"openRecordApiFormPanel()\"\n    >\n      <ng-icon\n        class=\"pointer-events-none align-middle card-icon\"\n        name=\"iconoirSettings\"\n        [ngClass]=\"{\n          'text-secondary opacity-100': currentlyActive,\n        }\"\n      ></ng-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #content>\n  <div class=\"flex-1 min-w-0\">\n    <div class=\"gn-ui-card-title\">\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"gn-ui-card-detail\">\n      {{ link.name }}\n    </div>\n  </div>\n  <div class=\"flex flex-row justify-between\">\n    <div class=\"flex flex-row gap-2.5 items-center pt-1\">\n      <span\n        *ngIf=\"link.accessServiceProtocol !== 'GPFDL'\"\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        translate\n        >record.metadata.api.accessServiceProtocol.{{\n          link.accessServiceProtocol\n        }}</span\n      >\n      <span\n        *ngIf=\"link.accessServiceProtocol === 'GPFDL'\"\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        translate\n      >\n        record.metadata.api.gpfdl</span\n      >\n    </div>\n    <div *ngIf=\"size === 'S'\">\n      <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ApiCardComponent, isStandalone: true, selector: "gn-ui-api-card", inputs: { link: "link", currentLink: "currentLink", size: "size" }, outputs: { openRecordApiForm: "openRecordApiForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"group flex justify-between rounded filter overflow-hidden card-shadow\"\n  [ngClass]=\"cardClass\"\n>\n  <ng-container *ngIf=\"size !== 'S'\">\n    <div class=\"flex-1 min-w-0\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <div class=\"flex items-center min-w-[32px]\">\n      <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"size === 'S'\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #buttons>\n  <div class=\"flex flex-row gap-2\">\n    <gn-ui-copy-text-button\n      [text]=\"link.url\"\n      [tooltipText]=\"'tooltip.url.copy' | translate\"\n      [displayText]=\"false\"\n      class=\"border border-gray-300 rounded-lg pt-1 px-2 h-[34px]\"\n    ></gn-ui-copy-text-button>\n    <button\n      *ngIf=\"displayApiFormButton\"\n      type=\"button\"\n      class=\"gn-ui-card-icon\"\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      [matTooltip]=\"\n        !currentlyActive\n          ? ('record.metadata.api.form.openForm' | translate)\n          : ('record.metadata.api.form.closeForm' | translate)\n      \"\n      matTooltipPosition=\"above\"\n      (click)=\"openRecordApiFormPanel()\"\n    >\n      <ng-icon\n        class=\"pointer-events-none align-middle card-icon\"\n        name=\"iconoirSettings\"\n        [ngClass]=\"{\n          'text-secondary opacity-100': currentlyActive,\n        }\"\n      ></ng-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #content>\n  <div class=\"flex-1 min-w-0\">\n    <div class=\"gn-ui-card-title\">\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"gn-ui-card-detail\">\n      {{ link.name }}\n    </div>\n  </div>\n  <div class=\"flex flex-row justify-between\">\n    <div class=\"flex flex-row gap-2.5 items-center pt-1\">\n      <span\n        *ngIf=\"link.accessServiceProtocol !== 'GPFDL'\"\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        translate\n        >record.metadata.api.accessServiceProtocol.{{\n          link.accessServiceProtocol\n        }}</span\n      >\n      <span\n        *ngIf=\"link.accessServiceProtocol === 'GPFDL'\"\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        translate\n      >\n        record.metadata.api.gpfdl</span\n      >\n    </div>\n    <div *ngIf=\"size === 'S'\">\n      <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [
             provideIcons({
                 iconoirSettings,
             }),
@@ -33363,7 +33467,7 @@ class DownloadsListComponent {
                 link.accessServiceProtocol === 'ogcFeatures'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DownloadsListComponent, deps: [{ token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DownloadsListComponent, isStandalone: true, selector: "gn-ui-downloads-list", inputs: { links: "links" }, ngImport: i0, template: "<div\n  class=\"flex flex-wrap justify-between items-center pb-4\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <div class=\"flex flex-row items-center gap-x-4\">\n    <div>\n      <h3\n        class=\"inline-block font-title text-xl text-title font-medium mr-4\"\n        translate\n      >\n        record.metadata.download\n      </h3>\n      <span class=\"px-3\">({{ linksCount }})</span>\n    </div>\n    <gn-ui-previous-next-buttons\n      *ngIf=\"(isMobile$ | async) === false && _list?.pagesCount > 1\"\n      [listComponent]=\"_list\"\n    ></gn-ui-previous-next-buttons>\n  </div>\n\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end\"\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-60')\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\n<ng-container>\n  <gn-ui-block-list\n    *ngIf=\"(isMobile$ | async) === false\"\n    #blockList\n    (listChanges)=\"updateList($event)\"\n    containerClass=\"gap-4 pt-5 pb-7\"\n  >\n    <gn-ui-download-item\n      #block\n      *ngFor=\"let link of filteredLinks\"\n      [link]=\"link\"\n      [color]=\"getLinkColor(link)\"\n      [format]=\"getLinkFormat(link)\"\n      [isFromApi]=\"isFromApi(link)\"\n      [size]=\"blockList.subComponentSize\"\n    ></gn-ui-download-item>\n  </gn-ui-block-list>\n</ng-container>\n\n<div class=\"mb-5\" *ngFor=\"let link of filteredLinks\">\n  <ng-container *ngIf=\"(isMobile$ | async) === true\">\n    <gn-ui-download-item\n      size=\"M\"\n      [link]=\"link\"\n      [color]=\"getLinkColor(link)\"\n      [format]=\"getLinkFormat(link)\"\n      [isFromApi]=\"isFromApi(link)\"\n    ></gn-ui-download-item>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: BlockListComponent, selector: "gn-ui-block-list", inputs: ["containerClass", "paginationContainerClass"], outputs: ["listChanges"] }, { kind: "component", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: ["link", "color", "format", "isFromApi", "size"], outputs: ["exportUrl"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: PreviousNextButtonsComponent, selector: "gn-ui-previous-next-buttons", inputs: ["listComponent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DownloadsListComponent, isStandalone: true, selector: "gn-ui-downloads-list", inputs: { links: "links" }, ngImport: i0, template: "<div\n  class=\"flex flex-wrap justify-between items-center pb-4\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <div class=\"flex flex-row items-center gap-x-4\">\n    <div>\n      <h3\n        class=\"inline-block font-title text-xl text-title font-medium mr-4\"\n        translate\n      >\n        record.metadata.download\n      </h3>\n      <span class=\"px-3\">({{ linksCount }})</span>\n    </div>\n    <gn-ui-previous-next-buttons\n      *ngIf=\"(isMobile$ | async) === false && _list?.pagesCount > 1\"\n      [listComponent]=\"_list\"\n    ></gn-ui-previous-next-buttons>\n  </div>\n\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end\"\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-60')\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\n<ng-container>\n  <gn-ui-block-list\n    *ngIf=\"(isMobile$ | async) === false\"\n    #blockList\n    (listChanges)=\"updateList($event)\"\n    containerClass=\"gap-4 pt-5 pb-7\"\n  >\n    <gn-ui-download-item\n      #block\n      *ngFor=\"let link of filteredLinks\"\n      [link]=\"link\"\n      [color]=\"getLinkColor(link)\"\n      [format]=\"getLinkFormat(link)\"\n      [isFromApi]=\"isFromApi(link)\"\n      [size]=\"blockList.subComponentSize\"\n    ></gn-ui-download-item>\n  </gn-ui-block-list>\n</ng-container>\n\n<div class=\"mb-5\" *ngFor=\"let link of filteredLinks\">\n  <ng-container *ngIf=\"(isMobile$ | async) === true\">\n    <gn-ui-download-item\n      size=\"M\"\n      [link]=\"link\"\n      [color]=\"getLinkColor(link)\"\n      [format]=\"getLinkFormat(link)\"\n      [isFromApi]=\"isFromApi(link)\"\n    ></gn-ui-download-item>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: BlockListComponent, selector: "gn-ui-block-list", inputs: ["containerClass", "paginationContainerClass"], outputs: ["listChanges"] }, { kind: "component", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: ["link", "color", "format", "isFromApi", "size"], outputs: ["exportUrl"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: PreviousNextButtonsComponent, selector: "gn-ui-previous-next-buttons", inputs: ["listComponent", "displayLabels"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DownloadsListComponent, decorators: [{
             type: Component,
@@ -34050,7 +34154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class MetadataDoiComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataDoiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MetadataDoiComponent, isStandalone: true, selector: "gn-ui-metadata-doi", inputs: { code: "code", link: "link" }, ngImport: i0, template: "<div\n  class=\"border border-gray-300 rounded-lg py-4 px-5 text-black flex justify-between items-center gap-4\"\n>\n  <div class=\"overflow-hidden flex-1\">\n    <p class=\"text-base font-medium mb-3\">DOI</p>\n    <p\n      class=\"text-base font-medium overflow-hidden text-ellipsis whitespace-nowrap\"\n      [title]=\"code\"\n    >\n      {{ code }}\n    </p>\n  </div>\n  <div class=\"flex gap-2 items-start\">\n    <gn-ui-copy-text-button\n      [text]=\"code\"\n      [displayText]=\"false\"\n      [tooltipText]=\"'record.metadata.doi.copy' | translate\"\n      class=\"[&>div]:flex [&>div]:items-center [&>div]:justify-center [&_button]:w-[40px] [&_button]:h-[32px] [&_button]:flex [&_button]:items-center [&_button]:justify-center [&_button]:hover:bg-gray-100 [&_button]:rounded-lg [&_button]:transition-colors [&_button]:border [&_button]:border-gray-300 [&_button]:px-2 [&_button]:py-1 [&_ng-icon]:w-5 [&_ng-icon]:h-5\"\n    ></gn-ui-copy-text-button>\n    <a\n      *ngIf=\"link\"\n      [href]=\"link\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      class=\"w-[40px] h-[32px] flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors border border-gray-300 px-2 py-1\"\n      [matTooltip]=\"'record.metadata.doi.open' | translate\"\n    >\n      <ng-icon name=\"matOpenInNew\" size=\"20\"></ng-icon>\n    </a>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MetadataDoiComponent, isStandalone: true, selector: "gn-ui-metadata-doi", inputs: { code: "code", link: "link" }, ngImport: i0, template: "<div\n  class=\"border border-gray-300 rounded-lg py-4 px-5 text-black flex justify-between items-center gap-4\"\n>\n  <div class=\"overflow-hidden flex-1\">\n    <p class=\"text-base font-medium mb-3\">DOI</p>\n    <p\n      class=\"text-base font-medium overflow-hidden text-ellipsis whitespace-nowrap\"\n      [title]=\"code\"\n    >\n      {{ code }}\n    </p>\n  </div>\n  <div class=\"flex gap-2 items-start\">\n    <gn-ui-copy-text-button\n      [text]=\"code\"\n      [displayText]=\"false\"\n      [tooltipText]=\"'record.metadata.doi.copy' | translate\"\n      class=\"[&>div]:flex [&>div]:items-center [&>div]:justify-center [&_button]:w-[40px] [&_button]:h-[32px] [&_button]:flex [&_button]:items-center [&_button]:justify-center [&_button]:hover:bg-gray-100 [&_button]:rounded-lg [&_button]:transition-colors [&_button]:border [&_button]:border-gray-300 [&_button]:px-2 [&_button]:py-1 [&_ng-icon]:w-5 [&_ng-icon]:h-5\"\n    ></gn-ui-copy-text-button>\n    <a\n      *ngIf=\"link\"\n      [href]=\"link\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      class=\"w-[40px] h-[32px] flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors border border-gray-300 px-2 py-1\"\n      [matTooltip]=\"'record.metadata.doi.open' | translate\"\n    >\n      <ng-icon name=\"matOpenInNew\" size=\"20\"></ng-icon>\n    </a>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }], viewProviders: [
             provideIcons({
                 matOpenInNew,
             }),
@@ -34218,14 +34322,8 @@ class MetadataInfoComponent {
     onKeywordClick(keyword) {
         this.keyword.emit(keyword);
     }
-    formatDate(date) {
-        return this.dateService.formatDate(date);
-    }
-    formatDateTime(date) {
-        return this.dateService.formatDateTime(date);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataInfoComponent, deps: [{ token: DateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MetadataInfoComponent, isStandalone: true, selector: "gn-ui-metadata-info", inputs: { metadata: "metadata", incomplete: "incomplete" }, outputs: { keyword: "keyword" }, ngImport: i0, template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost\n    ghostClass=\"h-[178px]\"\n    [showContent]=\"fieldReady('abstract')\"\n  >\n    <gn-ui-max-lines\n      [maxLines]=\"6\"\n      *ngIf=\"metadata.abstract\"\n      data-test=\"metadata-info-abstract\"\n    >\n      <div class=\"mb-6\">\n        <gn-ui-markdown-parser\n          [textContent]=\"metadata.abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n\n  <p\n    class=\"mt-6 mb-3 font-medium text-black text-sm\"\n    translate\n    *ngIf=\"!fieldReady('keywords') || metadata.keywords?.length\"\n  >\n    record.metadata.keywords\n  </p>\n\n  <gn-ui-content-ghost\n    ghostClass=\"h-[31px] w-3/4\"\n    [showContent]=\"fieldReady('keywords')\"\n  >\n    <gn-ui-max-lines [maxLines]=\"7\" *ngIf=\"metadata.keywords?.length\">\n      <div class=\"metadata-info-keywords sm:pb-4 flex flex-wrap gap-2\">\n        <gn-ui-badge\n          class=\"inline-block lowercase\"\n          (click)=\"onKeywordClick(keyword)\"\n          [clickable]=\"true\"\n          *ngFor=\"let keyword of metadata.keywords\"\n          >{{ keyword.label }}</gn-ui-badge\n        >\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.licenses ||\n    metadata.legalConstraints ||\n    metadata.securityConstraints ||\n    metadata.otherConstraints\n  \"\n  [title]=\"'record.metadata.usage' | translate\"\n  data-test=\"usage-panel\"\n>\n  <div class=\"flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900\">\n    <ng-container *ngFor=\"let license of licenses\">\n      <div *ngIf=\"license.url; else noUrl\" class=\"text-primary\">\n        <a\n          [href]=\"license.url\"\n          target=\"_blank\"\n          class=\"cursor-pointer hover:underline transition-all\"\n        >\n          {{ license.text }}\n          <ng-icon\n            class=\"!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            name=\"matOpenInNew\"\n          ></ng-icon>\n        </a>\n      </div>\n      <ng-template #noUrl>\n        <div class=\"text-primary\" gnUiLinkify>\n          {{ license.text }}\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"legalConstraints.length\">\n      <div class=\"mb-6\">\n        <gn-ui-markdown-parser\n          *ngFor=\"let constraint of legalConstraints\"\n          [textContent]=\"constraint\"\n        >\n        </gn-ui-markdown-parser>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <span\n          translate\n          class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\"\n        >\n          record.metadata.otherConstraints\n        </span>\n        <div class=\"mb-6\">\n          <gn-ui-markdown-parser [textContent]=\"constraint\">\n          </gn-ui-markdown-parser>\n        </div>\n      </div>\n    </ng-container>\n\n    <span class=\"noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    (metadata.kind === 'dataset' && metadata.lineage) ||\n    resourceContact ||\n    metadata.resourceCreated ||\n    metadata.resourcePublished ||\n    metadata.resourceUpdated ||\n    (metadata.kind === 'dataset' && metadata.updateFrequency) ||\n    metadata.otherLanguages?.length ||\n    (metadata.kind === 'dataset' && temporalExtent)\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n  data-test=\"details-panel\"\n>\n  <div\n    *ngIf=\"metadata.kind === 'dataset' && metadata.lineage\"\n    class=\"text-gray-900 flex flex-col mt-4 gap-2\"\n    data-test=\"details-panel-lineage\"\n  >\n    <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n      {{ metadata.lineage }}\n    </p>\n  </div>\n  <div\n    class=\"flex flex-row gap-6 mt-5 mb-8 resource-contact\"\n    *ngIf=\"resourceContact\"\n    data-test=\"details-panel-resource-contact\"\n  >\n    <div\n      *ngIf=\"resourceContact.organization?.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]=\"resourceContact.organization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\" translate>record.metadata.producer</p>\n      <div\n        class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n        data-cy=\"organization-name\"\n      >\n        {{ resourceContact.organization?.name }}\n      </div>\n      <div *ngIf=\"resourceContact.organization?.website\">\n        <a\n          [href]=\"resourceContact.organization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ resourceContact.organization.website }}\n          <ng-icon\n            class=\"!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            name=\"matOpenInNew\"\n          ></ng-icon>\n        </a>\n      </div>\n      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matMailOutline\"\n          ></ng-icon>\n          <a\n            *ngIf=\"resourceContact.email\"\n            [href]=\"'mailto:' + resourceContact.email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ resourceContact?.email }}</a\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n  >\n    <div\n      *ngIf=\"metadata.resourceCreated\"\n      data-test=\"details-panel-resource-created\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.creation</p>\n      <p class=\"text-primary font-medium mt-1 resource-created\">\n        {{ formatDate(metadata.resourceCreated) }}\n      </p>\n    </div>\n    <div\n      *ngIf=\"metadata.resourcePublished\"\n      data-test=\"details-panel-resource-published\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.publication</p>\n      <p class=\"text-primary font-medium mt-1 resource-published\">\n        {{ formatDate(metadata.resourcePublished) }}\n      </p>\n    </div>\n    <div\n      *ngIf=\"metadata.resourceUpdated\"\n      data-test=\"details-panel-resource-updated\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.update</p>\n      <p class=\"text-primary font-medium mt-1 resource-updated\">\n        {{ formatDate(metadata.resourceUpdated) }}\n      </p>\n    </div>\n    <div\n      *ngIf=\"metadata.kind === 'dataset' && metadata.updateFrequency\"\n      data-test=\"details-panel-update-frequency\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div\n      *ngIf=\"metadata.otherLanguages?.length\"\n      data-test=\"details-panel-other-languages\"\n    >\n      <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n      <div class=\"flex flex-row gap-1 flex-wrap\">\n        <p\n          class=\"text-primary font-medium other-languages\"\n          translate\n          *ngFor=\"let language of metadata.otherLanguages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div\n      *ngIf=\"metadata.kind === 'dataset' && temporalExtent\"\n      data-test=\"details-panel-temporal-extent\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n      <div\n        class=\"flex flex-row gap-1 mb-1 text-primary font-medium temporal-extent\"\n      >\n        <p\n          *ngIf=\"temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{\n            start: temporalExtent.start,\n            end: temporalExtent.end,\n          }\"\n        >\n          record.metadata.temporalExtent.fromDateToDate\n        </p>\n        <p\n          *ngIf=\"temporalExtent.start && !temporalExtent.end\"\n          translate\n          [translateParams]=\"{ start: temporalExtent.start }\"\n        >\n          record.metadata.temporalExtent.sinceDate\n        </p>\n        <p\n          *ngIf=\"!temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{ end: temporalExtent.end }\"\n        >\n          record.metadata.temporalExtent.untilDate\n        </p>\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.kind !== 'dataset' &&\n    metadata.spatialExtents &&\n    metadata.spatialExtents.length\n  \"\n  [title]=\"'service.metadata.spatialExtent' | translate\"\n  data-test=\"spatial-extent-panel\"\n>\n  <gn-ui-spatial-extent\n    class=\"flex h-[271px] w-full rounded-lg border border-gray-100 mt-3 mb-6\"\n    [spatialExtents]=\"metadata.spatialExtents\"\n  ></gn-ui-spatial-extent>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'service.metadata.other' | translate\"\n  data-test=\"other-panel\"\n>\n  <div class=\"flex flex-col gap-4 mr-4 py-5 rounded text-gray-700\">\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.recordUpdated && formatDateTime(metadata.recordUpdated) }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.landingPage\">\n      <p class=\"text-sm\" translate>record.metadata.sheet</p>\n      <p class=\"text-primary font-medium\" translate>\n        <a [href]=\"metadata.landingPage\" target=\"_blank\">\n          <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n        </a>\n      </p>\n    </div>\n    <div *ngIf=\"metadata.ownerOrganization\">\n      <p class=\"text-sm\" translate>record.metadata.owner</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.ownerOrganization.name }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.uniqueIdentifier\">\n      <p class=\"text-sm\" translate>record.metadata.uniqueId</p>\n      <div class=\"flex flex-row content-align items-end gap-1\">\n        <gn-ui-copy-text-button\n          [text]=\"metadata.uniqueIdentifier\"\n          [tooltipText]=\"'tooltip.id.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <p class=\"text-primary font-medium\">\n          {{ metadata.uniqueIdentifier }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"metadata.topics?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          [clickable]=\"false\"\n          class=\"inline-block mr-2 mb-2 lowercase\"\n          *ngFor=\"let topic of metadata.topics\"\n          >{{ topic }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button ng-icon{transform:scale(.8)}:host{--gn-ui-badge-background-color: var(--color-primary-white);--gn-ui-badge-text-color: var(--color-primary-darkest)}:host .metadata-info-keywords ::ng-deep gn-ui-badge:hover{--gn-ui-badge-text-color: white}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "iconColor", "collapsed"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: MaxLinesComponent, selector: "gn-ui-max-lines", inputs: ["maxLines"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "component", type: SpatialExtentComponent, selector: "gn-ui-spatial-extent", inputs: ["spatialExtents"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MetadataInfoComponent, isStandalone: true, selector: "gn-ui-metadata-info", inputs: { metadata: "metadata", incomplete: "incomplete" }, outputs: { keyword: "keyword" }, ngImport: i0, template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost\n    ghostClass=\"h-[178px]\"\n    [showContent]=\"fieldReady('abstract')\"\n  >\n    <gn-ui-max-lines\n      [maxLines]=\"6\"\n      *ngIf=\"metadata.abstract\"\n      data-test=\"metadata-info-abstract\"\n    >\n      <div class=\"mb-6\">\n        <gn-ui-markdown-parser\n          [textContent]=\"metadata.abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n\n  <p\n    class=\"mt-6 mb-3 font-medium text-black text-sm\"\n    translate\n    *ngIf=\"!fieldReady('keywords') || metadata.keywords?.length\"\n  >\n    record.metadata.keywords\n  </p>\n\n  <gn-ui-content-ghost\n    ghostClass=\"h-[31px] w-3/4\"\n    [showContent]=\"fieldReady('keywords')\"\n  >\n    <gn-ui-max-lines [maxLines]=\"7\" *ngIf=\"metadata.keywords?.length\">\n      <div class=\"metadata-info-keywords sm:pb-4 flex flex-wrap gap-2\">\n        <gn-ui-badge\n          class=\"inline-block lowercase\"\n          (click)=\"onKeywordClick(keyword)\"\n          [clickable]=\"true\"\n          *ngFor=\"let keyword of metadata.keywords\"\n          >{{ keyword.label }}</gn-ui-badge\n        >\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.licenses ||\n    metadata.legalConstraints ||\n    metadata.securityConstraints ||\n    metadata.otherConstraints\n  \"\n  [title]=\"'record.metadata.usage' | translate\"\n  data-test=\"usage-panel\"\n>\n  <div class=\"flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900\">\n    <ng-container *ngFor=\"let license of licenses\">\n      <div *ngIf=\"license.url; else noUrl\" class=\"text-primary\">\n        <a\n          [href]=\"license.url\"\n          target=\"_blank\"\n          class=\"cursor-pointer hover:underline transition-all\"\n        >\n          {{ license.text }}\n          <ng-icon\n            class=\"!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            name=\"matOpenInNew\"\n          ></ng-icon>\n        </a>\n      </div>\n      <ng-template #noUrl>\n        <div class=\"text-primary\" gnUiLinkify>\n          {{ license.text }}\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"legalConstraints.length\">\n      <div class=\"mb-6\">\n        <gn-ui-markdown-parser\n          *ngFor=\"let constraint of legalConstraints\"\n          [textContent]=\"constraint\"\n        >\n        </gn-ui-markdown-parser>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <span\n          translate\n          class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\"\n        >\n          record.metadata.otherConstraints\n        </span>\n        <div class=\"mb-6\">\n          <gn-ui-markdown-parser [textContent]=\"constraint\">\n          </gn-ui-markdown-parser>\n        </div>\n      </div>\n    </ng-container>\n\n    <span class=\"noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    (metadata.kind === 'dataset' && metadata.lineage) ||\n    resourceContact ||\n    metadata.resourceCreated ||\n    metadata.resourcePublished ||\n    metadata.resourceUpdated ||\n    (metadata.kind === 'dataset' && metadata.updateFrequency) ||\n    metadata.otherLanguages?.length ||\n    (metadata.kind === 'dataset' && temporalExtent)\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n  data-test=\"details-panel\"\n>\n  <div\n    *ngIf=\"metadata.kind === 'dataset' && metadata.lineage\"\n    class=\"text-gray-900 flex flex-col mt-4 gap-2\"\n    data-test=\"details-panel-lineage\"\n  >\n    <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n      {{ metadata.lineage }}\n    </p>\n  </div>\n  <div\n    class=\"flex flex-row gap-6 mt-5 mb-8 resource-contact\"\n    *ngIf=\"resourceContact\"\n    data-test=\"details-panel-resource-contact\"\n  >\n    <div\n      *ngIf=\"resourceContact.organization?.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]=\"resourceContact.organization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\" translate>record.metadata.producer</p>\n      <div\n        class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n        data-cy=\"organization-name\"\n      >\n        {{ resourceContact.organization?.name }}\n      </div>\n      <div *ngIf=\"resourceContact.organization?.website\">\n        <a\n          [href]=\"resourceContact.organization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ resourceContact.organization.website }}\n          <ng-icon\n            class=\"!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            name=\"matOpenInNew\"\n          ></ng-icon>\n        </a>\n      </div>\n      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matMailOutline\"\n          ></ng-icon>\n          <a\n            *ngIf=\"resourceContact.email\"\n            [href]=\"'mailto:' + resourceContact.email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ resourceContact?.email }}</a\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n  >\n    <div\n      *ngIf=\"metadata.resourceCreated\"\n      data-test=\"details-panel-resource-created\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.creation</p>\n      <p\n        class=\"text-primary font-medium mt-1 resource-created\"\n        [gnUiHumanizeDate]=\"metadata.resourceCreated\"\n      ></p>\n    </div>\n    <div\n      *ngIf=\"metadata.resourcePublished\"\n      data-test=\"details-panel-resource-published\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.publication</p>\n      <p\n        class=\"text-primary font-medium mt-1 resource-published\"\n        [gnUiHumanizeDate]=\"metadata.resourcePublished\"\n      ></p>\n    </div>\n    <div\n      *ngIf=\"metadata.resourceUpdated\"\n      data-test=\"details-panel-resource-updated\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.update</p>\n      <p\n        class=\"text-primary font-medium mt-1 resource-updated\"\n        [gnUiHumanizeDate]=\"metadata.resourceUpdated\"\n      ></p>\n    </div>\n    <div\n      *ngIf=\"metadata.kind === 'dataset' && metadata.updateFrequency\"\n      data-test=\"details-panel-update-frequency\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div\n      *ngIf=\"metadata.otherLanguages?.length\"\n      data-test=\"details-panel-other-languages\"\n    >\n      <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n      <div class=\"flex flex-row gap-1 flex-wrap\">\n        <p\n          class=\"text-primary font-medium other-languages\"\n          translate\n          *ngFor=\"let language of metadata.otherLanguages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div\n      *ngIf=\"metadata.kind === 'dataset' && temporalExtent\"\n      data-test=\"details-panel-temporal-extent\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n      <div\n        class=\"flex flex-row gap-1 mb-1 text-primary font-medium temporal-extent\"\n      >\n        <p\n          *ngIf=\"temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{\n            start: temporalExtent.start,\n            end: temporalExtent.end,\n          }\"\n        >\n          record.metadata.temporalExtent.fromDateToDate\n        </p>\n        <p\n          *ngIf=\"temporalExtent.start && !temporalExtent.end\"\n          translate\n          [translateParams]=\"{ start: temporalExtent.start }\"\n        >\n          record.metadata.temporalExtent.sinceDate\n        </p>\n        <p\n          *ngIf=\"!temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{ end: temporalExtent.end }\"\n        >\n          record.metadata.temporalExtent.untilDate\n        </p>\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.kind !== 'dataset' &&\n    metadata.spatialExtents &&\n    metadata.spatialExtents.length\n  \"\n  [title]=\"'service.metadata.spatialExtent' | translate\"\n  data-test=\"spatial-extent-panel\"\n>\n  <gn-ui-spatial-extent\n    class=\"flex h-[271px] w-full rounded-lg border border-gray-100 mt-3 mb-6\"\n    [spatialExtents]=\"metadata.spatialExtents\"\n  ></gn-ui-spatial-extent>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'service.metadata.other' | translate\"\n  data-test=\"other-panel\"\n>\n  <div class=\"flex flex-col gap-4 mr-4 py-5 rounded text-gray-700\">\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p\n        class=\"text-primary font-medium\"\n        [gnUiHumanizeDate]=\"metadata.recordUpdated\"\n      ></p>\n    </div>\n    <div *ngIf=\"metadata.landingPage\">\n      <p class=\"text-sm\" translate>record.metadata.sheet</p>\n      <p class=\"text-primary font-medium\" translate>\n        <a [href]=\"metadata.landingPage\" target=\"_blank\">\n          <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n        </a>\n      </p>\n    </div>\n    <div *ngIf=\"metadata.ownerOrganization\">\n      <p class=\"text-sm\" translate>record.metadata.owner</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.ownerOrganization.name }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.uniqueIdentifier\">\n      <p class=\"text-sm\" translate>record.metadata.uniqueId</p>\n      <div class=\"flex flex-row content-align items-end gap-1\">\n        <gn-ui-copy-text-button\n          [text]=\"metadata.uniqueIdentifier\"\n          [tooltipText]=\"'tooltip.id.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <p class=\"text-primary font-medium\">\n          {{ metadata.uniqueIdentifier }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"metadata.topics?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          [clickable]=\"false\"\n          class=\"inline-block mr-2 mb-2 lowercase\"\n          *ngFor=\"let topic of metadata.topics\"\n          >{{ topic }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button ng-icon{transform:scale(.8)}:host{--gn-ui-badge-background-color: var(--color-primary-white);--gn-ui-badge-text-color: var(--color-primary-darkest)}:host .metadata-info-keywords ::ng-deep gn-ui-badge:hover{--gn-ui-badge-text-color: white}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "iconColor", "collapsed"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: MaxLinesComponent, selector: "gn-ui-max-lines", inputs: ["maxLines"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "directive", type: GnUiHumanizeDateDirective, selector: "[gnUiHumanizeDate]", inputs: ["gnUiHumanizeDate"] }, { kind: "component", type: SpatialExtentComponent, selector: "gn-ui-spatial-extent", inputs: ["spatialExtents"] }], viewProviders: [
             provideIcons({
                 matOpenInNew,
                 matMailOutline: matMailOutline$1,
@@ -34247,13 +34345,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CopyTextButtonComponent,
                         NgIcon,
                         GnUiLinkifyDirective,
+                        GnUiHumanizeDateDirective,
                         SpatialExtentComponent,
                     ], viewProviders: [
                         provideIcons({
                             matOpenInNew,
                             matMailOutline: matMailOutline$1,
                         }),
-                    ], template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost\n    ghostClass=\"h-[178px]\"\n    [showContent]=\"fieldReady('abstract')\"\n  >\n    <gn-ui-max-lines\n      [maxLines]=\"6\"\n      *ngIf=\"metadata.abstract\"\n      data-test=\"metadata-info-abstract\"\n    >\n      <div class=\"mb-6\">\n        <gn-ui-markdown-parser\n          [textContent]=\"metadata.abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n\n  <p\n    class=\"mt-6 mb-3 font-medium text-black text-sm\"\n    translate\n    *ngIf=\"!fieldReady('keywords') || metadata.keywords?.length\"\n  >\n    record.metadata.keywords\n  </p>\n\n  <gn-ui-content-ghost\n    ghostClass=\"h-[31px] w-3/4\"\n    [showContent]=\"fieldReady('keywords')\"\n  >\n    <gn-ui-max-lines [maxLines]=\"7\" *ngIf=\"metadata.keywords?.length\">\n      <div class=\"metadata-info-keywords sm:pb-4 flex flex-wrap gap-2\">\n        <gn-ui-badge\n          class=\"inline-block lowercase\"\n          (click)=\"onKeywordClick(keyword)\"\n          [clickable]=\"true\"\n          *ngFor=\"let keyword of metadata.keywords\"\n          >{{ keyword.label }}</gn-ui-badge\n        >\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.licenses ||\n    metadata.legalConstraints ||\n    metadata.securityConstraints ||\n    metadata.otherConstraints\n  \"\n  [title]=\"'record.metadata.usage' | translate\"\n  data-test=\"usage-panel\"\n>\n  <div class=\"flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900\">\n    <ng-container *ngFor=\"let license of licenses\">\n      <div *ngIf=\"license.url; else noUrl\" class=\"text-primary\">\n        <a\n          [href]=\"license.url\"\n          target=\"_blank\"\n          class=\"cursor-pointer hover:underline transition-all\"\n        >\n          {{ license.text }}\n          <ng-icon\n            class=\"!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            name=\"matOpenInNew\"\n          ></ng-icon>\n        </a>\n      </div>\n      <ng-template #noUrl>\n        <div class=\"text-primary\" gnUiLinkify>\n          {{ license.text }}\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"legalConstraints.length\">\n      <div class=\"mb-6\">\n        <gn-ui-markdown-parser\n          *ngFor=\"let constraint of legalConstraints\"\n          [textContent]=\"constraint\"\n        >\n        </gn-ui-markdown-parser>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <span\n          translate\n          class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\"\n        >\n          record.metadata.otherConstraints\n        </span>\n        <div class=\"mb-6\">\n          <gn-ui-markdown-parser [textContent]=\"constraint\">\n          </gn-ui-markdown-parser>\n        </div>\n      </div>\n    </ng-container>\n\n    <span class=\"noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    (metadata.kind === 'dataset' && metadata.lineage) ||\n    resourceContact ||\n    metadata.resourceCreated ||\n    metadata.resourcePublished ||\n    metadata.resourceUpdated ||\n    (metadata.kind === 'dataset' && metadata.updateFrequency) ||\n    metadata.otherLanguages?.length ||\n    (metadata.kind === 'dataset' && temporalExtent)\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n  data-test=\"details-panel\"\n>\n  <div\n    *ngIf=\"metadata.kind === 'dataset' && metadata.lineage\"\n    class=\"text-gray-900 flex flex-col mt-4 gap-2\"\n    data-test=\"details-panel-lineage\"\n  >\n    <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n      {{ metadata.lineage }}\n    </p>\n  </div>\n  <div\n    class=\"flex flex-row gap-6 mt-5 mb-8 resource-contact\"\n    *ngIf=\"resourceContact\"\n    data-test=\"details-panel-resource-contact\"\n  >\n    <div\n      *ngIf=\"resourceContact.organization?.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]=\"resourceContact.organization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\" translate>record.metadata.producer</p>\n      <div\n        class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n        data-cy=\"organization-name\"\n      >\n        {{ resourceContact.organization?.name }}\n      </div>\n      <div *ngIf=\"resourceContact.organization?.website\">\n        <a\n          [href]=\"resourceContact.organization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ resourceContact.organization.website }}\n          <ng-icon\n            class=\"!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            name=\"matOpenInNew\"\n          ></ng-icon>\n        </a>\n      </div>\n      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matMailOutline\"\n          ></ng-icon>\n          <a\n            *ngIf=\"resourceContact.email\"\n            [href]=\"'mailto:' + resourceContact.email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ resourceContact?.email }}</a\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n  >\n    <div\n      *ngIf=\"metadata.resourceCreated\"\n      data-test=\"details-panel-resource-created\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.creation</p>\n      <p class=\"text-primary font-medium mt-1 resource-created\">\n        {{ formatDate(metadata.resourceCreated) }}\n      </p>\n    </div>\n    <div\n      *ngIf=\"metadata.resourcePublished\"\n      data-test=\"details-panel-resource-published\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.publication</p>\n      <p class=\"text-primary font-medium mt-1 resource-published\">\n        {{ formatDate(metadata.resourcePublished) }}\n      </p>\n    </div>\n    <div\n      *ngIf=\"metadata.resourceUpdated\"\n      data-test=\"details-panel-resource-updated\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.update</p>\n      <p class=\"text-primary font-medium mt-1 resource-updated\">\n        {{ formatDate(metadata.resourceUpdated) }}\n      </p>\n    </div>\n    <div\n      *ngIf=\"metadata.kind === 'dataset' && metadata.updateFrequency\"\n      data-test=\"details-panel-update-frequency\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div\n      *ngIf=\"metadata.otherLanguages?.length\"\n      data-test=\"details-panel-other-languages\"\n    >\n      <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n      <div class=\"flex flex-row gap-1 flex-wrap\">\n        <p\n          class=\"text-primary font-medium other-languages\"\n          translate\n          *ngFor=\"let language of metadata.otherLanguages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div\n      *ngIf=\"metadata.kind === 'dataset' && temporalExtent\"\n      data-test=\"details-panel-temporal-extent\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n      <div\n        class=\"flex flex-row gap-1 mb-1 text-primary font-medium temporal-extent\"\n      >\n        <p\n          *ngIf=\"temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{\n            start: temporalExtent.start,\n            end: temporalExtent.end,\n          }\"\n        >\n          record.metadata.temporalExtent.fromDateToDate\n        </p>\n        <p\n          *ngIf=\"temporalExtent.start && !temporalExtent.end\"\n          translate\n          [translateParams]=\"{ start: temporalExtent.start }\"\n        >\n          record.metadata.temporalExtent.sinceDate\n        </p>\n        <p\n          *ngIf=\"!temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{ end: temporalExtent.end }\"\n        >\n          record.metadata.temporalExtent.untilDate\n        </p>\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.kind !== 'dataset' &&\n    metadata.spatialExtents &&\n    metadata.spatialExtents.length\n  \"\n  [title]=\"'service.metadata.spatialExtent' | translate\"\n  data-test=\"spatial-extent-panel\"\n>\n  <gn-ui-spatial-extent\n    class=\"flex h-[271px] w-full rounded-lg border border-gray-100 mt-3 mb-6\"\n    [spatialExtents]=\"metadata.spatialExtents\"\n  ></gn-ui-spatial-extent>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'service.metadata.other' | translate\"\n  data-test=\"other-panel\"\n>\n  <div class=\"flex flex-col gap-4 mr-4 py-5 rounded text-gray-700\">\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.recordUpdated && formatDateTime(metadata.recordUpdated) }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.landingPage\">\n      <p class=\"text-sm\" translate>record.metadata.sheet</p>\n      <p class=\"text-primary font-medium\" translate>\n        <a [href]=\"metadata.landingPage\" target=\"_blank\">\n          <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n        </a>\n      </p>\n    </div>\n    <div *ngIf=\"metadata.ownerOrganization\">\n      <p class=\"text-sm\" translate>record.metadata.owner</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.ownerOrganization.name }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.uniqueIdentifier\">\n      <p class=\"text-sm\" translate>record.metadata.uniqueId</p>\n      <div class=\"flex flex-row content-align items-end gap-1\">\n        <gn-ui-copy-text-button\n          [text]=\"metadata.uniqueIdentifier\"\n          [tooltipText]=\"'tooltip.id.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <p class=\"text-primary font-medium\">\n          {{ metadata.uniqueIdentifier }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"metadata.topics?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          [clickable]=\"false\"\n          class=\"inline-block mr-2 mb-2 lowercase\"\n          *ngFor=\"let topic of metadata.topics\"\n          >{{ topic }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button ng-icon{transform:scale(.8)}:host{--gn-ui-badge-background-color: var(--color-primary-white);--gn-ui-badge-text-color: var(--color-primary-darkest)}:host .metadata-info-keywords ::ng-deep gn-ui-badge:hover{--gn-ui-badge-text-color: white}\n"] }]
+                    ], template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost\n    ghostClass=\"h-[178px]\"\n    [showContent]=\"fieldReady('abstract')\"\n  >\n    <gn-ui-max-lines\n      [maxLines]=\"6\"\n      *ngIf=\"metadata.abstract\"\n      data-test=\"metadata-info-abstract\"\n    >\n      <div class=\"mb-6\">\n        <gn-ui-markdown-parser\n          [textContent]=\"metadata.abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n\n  <p\n    class=\"mt-6 mb-3 font-medium text-black text-sm\"\n    translate\n    *ngIf=\"!fieldReady('keywords') || metadata.keywords?.length\"\n  >\n    record.metadata.keywords\n  </p>\n\n  <gn-ui-content-ghost\n    ghostClass=\"h-[31px] w-3/4\"\n    [showContent]=\"fieldReady('keywords')\"\n  >\n    <gn-ui-max-lines [maxLines]=\"7\" *ngIf=\"metadata.keywords?.length\">\n      <div class=\"metadata-info-keywords sm:pb-4 flex flex-wrap gap-2\">\n        <gn-ui-badge\n          class=\"inline-block lowercase\"\n          (click)=\"onKeywordClick(keyword)\"\n          [clickable]=\"true\"\n          *ngFor=\"let keyword of metadata.keywords\"\n          >{{ keyword.label }}</gn-ui-badge\n        >\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.licenses ||\n    metadata.legalConstraints ||\n    metadata.securityConstraints ||\n    metadata.otherConstraints\n  \"\n  [title]=\"'record.metadata.usage' | translate\"\n  data-test=\"usage-panel\"\n>\n  <div class=\"flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900\">\n    <ng-container *ngFor=\"let license of licenses\">\n      <div *ngIf=\"license.url; else noUrl\" class=\"text-primary\">\n        <a\n          [href]=\"license.url\"\n          target=\"_blank\"\n          class=\"cursor-pointer hover:underline transition-all\"\n        >\n          {{ license.text }}\n          <ng-icon\n            class=\"!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            name=\"matOpenInNew\"\n          ></ng-icon>\n        </a>\n      </div>\n      <ng-template #noUrl>\n        <div class=\"text-primary\" gnUiLinkify>\n          {{ license.text }}\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"legalConstraints.length\">\n      <div class=\"mb-6\">\n        <gn-ui-markdown-parser\n          *ngFor=\"let constraint of legalConstraints\"\n          [textContent]=\"constraint\"\n        >\n        </gn-ui-markdown-parser>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <span\n          translate\n          class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\"\n        >\n          record.metadata.otherConstraints\n        </span>\n        <div class=\"mb-6\">\n          <gn-ui-markdown-parser [textContent]=\"constraint\">\n          </gn-ui-markdown-parser>\n        </div>\n      </div>\n    </ng-container>\n\n    <span class=\"noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    (metadata.kind === 'dataset' && metadata.lineage) ||\n    resourceContact ||\n    metadata.resourceCreated ||\n    metadata.resourcePublished ||\n    metadata.resourceUpdated ||\n    (metadata.kind === 'dataset' && metadata.updateFrequency) ||\n    metadata.otherLanguages?.length ||\n    (metadata.kind === 'dataset' && temporalExtent)\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n  data-test=\"details-panel\"\n>\n  <div\n    *ngIf=\"metadata.kind === 'dataset' && metadata.lineage\"\n    class=\"text-gray-900 flex flex-col mt-4 gap-2\"\n    data-test=\"details-panel-lineage\"\n  >\n    <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n      {{ metadata.lineage }}\n    </p>\n  </div>\n  <div\n    class=\"flex flex-row gap-6 mt-5 mb-8 resource-contact\"\n    *ngIf=\"resourceContact\"\n    data-test=\"details-panel-resource-contact\"\n  >\n    <div\n      *ngIf=\"resourceContact.organization?.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]=\"resourceContact.organization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\" translate>record.metadata.producer</p>\n      <div\n        class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n        data-cy=\"organization-name\"\n      >\n        {{ resourceContact.organization?.name }}\n      </div>\n      <div *ngIf=\"resourceContact.organization?.website\">\n        <a\n          [href]=\"resourceContact.organization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ resourceContact.organization.website }}\n          <ng-icon\n            class=\"!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            name=\"matOpenInNew\"\n          ></ng-icon>\n        </a>\n      </div>\n      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matMailOutline\"\n          ></ng-icon>\n          <a\n            *ngIf=\"resourceContact.email\"\n            [href]=\"'mailto:' + resourceContact.email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ resourceContact?.email }}</a\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n  >\n    <div\n      *ngIf=\"metadata.resourceCreated\"\n      data-test=\"details-panel-resource-created\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.creation</p>\n      <p\n        class=\"text-primary font-medium mt-1 resource-created\"\n        [gnUiHumanizeDate]=\"metadata.resourceCreated\"\n      ></p>\n    </div>\n    <div\n      *ngIf=\"metadata.resourcePublished\"\n      data-test=\"details-panel-resource-published\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.publication</p>\n      <p\n        class=\"text-primary font-medium mt-1 resource-published\"\n        [gnUiHumanizeDate]=\"metadata.resourcePublished\"\n      ></p>\n    </div>\n    <div\n      *ngIf=\"metadata.resourceUpdated\"\n      data-test=\"details-panel-resource-updated\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.update</p>\n      <p\n        class=\"text-primary font-medium mt-1 resource-updated\"\n        [gnUiHumanizeDate]=\"metadata.resourceUpdated\"\n      ></p>\n    </div>\n    <div\n      *ngIf=\"metadata.kind === 'dataset' && metadata.updateFrequency\"\n      data-test=\"details-panel-update-frequency\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div\n      *ngIf=\"metadata.otherLanguages?.length\"\n      data-test=\"details-panel-other-languages\"\n    >\n      <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n      <div class=\"flex flex-row gap-1 flex-wrap\">\n        <p\n          class=\"text-primary font-medium other-languages\"\n          translate\n          *ngFor=\"let language of metadata.otherLanguages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div\n      *ngIf=\"metadata.kind === 'dataset' && temporalExtent\"\n      data-test=\"details-panel-temporal-extent\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n      <div\n        class=\"flex flex-row gap-1 mb-1 text-primary font-medium temporal-extent\"\n      >\n        <p\n          *ngIf=\"temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{\n            start: temporalExtent.start,\n            end: temporalExtent.end,\n          }\"\n        >\n          record.metadata.temporalExtent.fromDateToDate\n        </p>\n        <p\n          *ngIf=\"temporalExtent.start && !temporalExtent.end\"\n          translate\n          [translateParams]=\"{ start: temporalExtent.start }\"\n        >\n          record.metadata.temporalExtent.sinceDate\n        </p>\n        <p\n          *ngIf=\"!temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{ end: temporalExtent.end }\"\n        >\n          record.metadata.temporalExtent.untilDate\n        </p>\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.kind !== 'dataset' &&\n    metadata.spatialExtents &&\n    metadata.spatialExtents.length\n  \"\n  [title]=\"'service.metadata.spatialExtent' | translate\"\n  data-test=\"spatial-extent-panel\"\n>\n  <gn-ui-spatial-extent\n    class=\"flex h-[271px] w-full rounded-lg border border-gray-100 mt-3 mb-6\"\n    [spatialExtents]=\"metadata.spatialExtents\"\n  ></gn-ui-spatial-extent>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'service.metadata.other' | translate\"\n  data-test=\"other-panel\"\n>\n  <div class=\"flex flex-col gap-4 mr-4 py-5 rounded text-gray-700\">\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p\n        class=\"text-primary font-medium\"\n        [gnUiHumanizeDate]=\"metadata.recordUpdated\"\n      ></p>\n    </div>\n    <div *ngIf=\"metadata.landingPage\">\n      <p class=\"text-sm\" translate>record.metadata.sheet</p>\n      <p class=\"text-primary font-medium\" translate>\n        <a [href]=\"metadata.landingPage\" target=\"_blank\">\n          <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n        </a>\n      </p>\n    </div>\n    <div *ngIf=\"metadata.ownerOrganization\">\n      <p class=\"text-sm\" translate>record.metadata.owner</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.ownerOrganization.name }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.uniqueIdentifier\">\n      <p class=\"text-sm\" translate>record.metadata.uniqueId</p>\n      <div class=\"flex flex-row content-align items-end gap-1\">\n        <gn-ui-copy-text-button\n          [text]=\"metadata.uniqueIdentifier\"\n          [tooltipText]=\"'tooltip.id.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <p class=\"text-primary font-medium\">\n          {{ metadata.uniqueIdentifier }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"metadata.topics?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          [clickable]=\"false\"\n          class=\"inline-block mr-2 mb-2 lowercase\"\n          *ngFor=\"let topic of metadata.topics\"\n          >{{ topic }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button ng-icon{transform:scale(.8)}:host{--gn-ui-badge-background-color: var(--color-primary-white);--gn-ui-badge-text-color: var(--color-primary-darkest)}:host .metadata-info-keywords ::ng-deep gn-ui-badge:hover{--gn-ui-badge-text-color: white}\n"] }]
         }], ctorParameters: () => [{ type: DateService }], propDecorators: { metadata: [{
                 type: Input
             }], incomplete: [{
@@ -34551,7 +34650,7 @@ class RecordApiFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RecordApiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RecordApiFormComponent, isStandalone: true, 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            placeholder=\"\"\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 relative\">\n        <p class=\"text-sm\" [class.text-gray-600]=\"!supportOffset\" translate>\n          record.metadata.api.form.offset\n        </p>\n        <div class=\"flex items-center\">\n          <gn-ui-text-input\n            class=\"w-20\"\n            [value]=\"offset$ | async\"\n            [disabled]=\"!supportOffset\"\n            (valueChange)=\"supportOffset ? setOffset($event) : null\"\n            placeholder=\"\"\n          >\n          </gn-ui-text-input>\n          <div\n            *ngIf=\"!supportOffset\"\n            class=\"flex items-center gap-2 text-orange-500 z-10 ml-3\"\n          >\n            <span\n              class=\"material-symbols-outlined\"\n              matTooltip=\"Not supported on this service\"\n            >\n              warning\n            </span>\n          </div>\n        </div>\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]=\"outputFormats\"\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 ng-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover ng-icon{color:#d3d3d3!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RecordApiFormComponent, isStandalone: true, 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            placeholder=\"\"\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 relative\">\n        <p class=\"text-sm\" [class.text-gray-600]=\"!supportOffset\" translate>\n          record.metadata.api.form.offset\n        </p>\n        <div class=\"flex items-center\">\n          <gn-ui-text-input\n            class=\"w-20\"\n            [value]=\"offset$ | async\"\n            [disabled]=\"!supportOffset\"\n            (valueChange)=\"supportOffset ? setOffset($event) : null\"\n            placeholder=\"\"\n          >\n          </gn-ui-text-input>\n          <div\n            *ngIf=\"!supportOffset\"\n            class=\"flex items-center gap-2 text-orange-500 z-10 ml-3\"\n          >\n            <span\n              class=\"material-symbols-outlined\"\n              matTooltip=\"Not supported on this service\"\n            >\n              warning\n            </span>\n          </div>\n        </div>\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]=\"outputFormats\"\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 ng-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover ng-icon{color:#d3d3d3!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RecordApiFormComponent, decorators: [{
             type: Component,
@@ -34567,59 +34666,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-class TimeSincePipe {
-    constructor(translate) {
-        this.translate = translate;
-    }
-    transform(value) {
-        if (isNaN(value.getTime())) {
-            throw new Error('Invalid Date');
-        }
-        const maintenant = new Date();
-        let locale;
-        switch (this.translate.currentLang) {
-            case 'fr':
-                locale = fr$1;
-                break;
-            case 'de':
-                locale = de$1;
-                break;
-            case 'es':
-                locale = es$1;
-                break;
-            case 'it':
-                locale = it$1;
-                break;
-            case 'nl':
-                locale = nl$1;
-                break;
-            case 'pt':
-                locale = pt$1;
-                break;
-            case 'sk':
-                locale = sk$1;
-                break;
-            case 'en':
-            default:
-                locale = enUS;
-                break;
-        }
-        return formatDistance(value, maintenant, {
-            addSuffix: true,
-            locale: locale,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeSincePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TimeSincePipe, isStandalone: true, name: "timeSince" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeSincePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'timeSince',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
-
 class UserFeedbackItemComponent {
     constructor() {
         this.newUserFeedbackAnswer = new EventEmitter();
@@ -34652,7 +34698,7 @@ class UserFeedbackItemComponent {
         this.onNewAnswerValueChange();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserFeedbackItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserFeedbackItemComponent, isStandalone: true, selector: "gn-ui-user-feedback-item", inputs: { userFeedbackParent: "userFeedbackParent", userFeedBacksAnswers: "userFeedBacksAnswers", 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=\"activeUser\" 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          <ng-icon *ngIf=\"!isAddUserFeedbackLoading\" name=\"matSendOutline\">\n          </ng-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: "component", type: UserFeedbackItemComponent, selector: "gn-ui-user-feedback-item", inputs: ["userFeedbackParent", "userFeedBacksAnswers", "activeUser", "isLastComment", "isAddUserFeedbackLoading"], outputs: ["newUserFeedbackAnswer"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TimeSincePipe, name: "timeSince" }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserFeedbackItemComponent, isStandalone: true, selector: "gn-ui-user-feedback-item", inputs: { userFeedbackParent: "userFeedbackParent", userFeedBacksAnswers: "userFeedBacksAnswers", 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 [gnUiHumanizeDate]=\"userFeedbackParent.date\"></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=\"activeUser\" 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          <ng-icon *ngIf=\"!isAddUserFeedbackLoading\" name=\"matSendOutline\">\n          </ng-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: "component", type: UserFeedbackItemComponent, selector: "gn-ui-user-feedback-item", inputs: ["userFeedbackParent", "userFeedBacksAnswers", "activeUser", "isLastComment", "isAddUserFeedbackLoading"], outputs: ["newUserFeedbackAnswer"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "directive", type: GnUiHumanizeDateDirective, selector: "[gnUiHumanizeDate]", inputs: ["gnUiHumanizeDate"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [
             provideIcons({
                 matSendOutline,
             }),
@@ -34662,17 +34708,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Component,
             args: [{ selector: 'gn-ui-user-feedback-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
-                        TimeSincePipe,
                         TextAreaComponent,
                         TranslatePipe,
                         ButtonComponent,
                         SpinningLoaderComponent,
+                        GnUiHumanizeDateDirective,
                         NgIcon,
                     ], viewProviders: [
                         provideIcons({
                             matSendOutline,
                         }),
-                    ], 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=\"activeUser\" 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          <ng-icon *ngIf=\"!isAddUserFeedbackLoading\" name=\"matSendOutline\">\n          </ng-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" }]
+                    ], 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 [gnUiHumanizeDate]=\"userFeedbackParent.date\"></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=\"activeUser\" 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          <ng-icon *ngIf=\"!isAddUserFeedbackLoading\" name=\"matSendOutline\">\n          </ng-icon>\n          <ng-container *ngIf=\"isAddUserFeedbackLoading\">\n            <div class=\"flex justify-center w-full\">\n              <gn-ui-spinning-loader></gn-ui-spinning-loader>\n            </div>\n          </ng-container>\n        </gn-ui-button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { userFeedbackParent: [{
                 type: Input
             }], userFeedBacksAnswers: [{
@@ -34692,7 +34738,7 @@ class UserPreviewComponent {
         return (this.user.name + ' ' + this.user.surname).trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserPreviewComponent, isStandalone: true, selector: "gn-ui-user-preview", inputs: { user: "user", avatarPlaceholder: "avatarPlaceholder" }, ngImport: i0, template: "<figure class=\"text-center\">\n  <div class=\"w-10 h-10 rounded-full capitalize\" [matTooltip]=\"userFullName\">\n    <gn-ui-avatar\n      [avatarUrl]=\"user.profileIcon\"\n      [avatarPlaceholder]=\"avatarPlaceholder\"\n    ></gn-ui-avatar>\n  </div>\n</figure>\n", dependencies: [{ kind: "component", type: AvatarComponent, selector: "gn-ui-avatar", inputs: ["avatarUrl", "avatarPlaceholder"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserPreviewComponent, isStandalone: true, selector: "gn-ui-user-preview", inputs: { user: "user", avatarPlaceholder: "avatarPlaceholder" }, ngImport: i0, template: "<figure class=\"text-center\">\n  <div class=\"w-10 h-10 rounded-full capitalize\" [matTooltip]=\"userFullName\">\n    <gn-ui-avatar\n      [avatarUrl]=\"user.profileIcon\"\n      [avatarPlaceholder]=\"avatarPlaceholder\"\n    ></gn-ui-avatar>\n  </div>\n</figure>\n", dependencies: [{ kind: "component", type: AvatarComponent, selector: "gn-ui-avatar", inputs: ["avatarUrl", "avatarPlaceholder"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserPreviewComponent, decorators: [{
             type: Component,
@@ -35060,6 +35106,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['expanel', { read: ExpandablePanelComponent, static: true }]
             }] } });
 
+class StacItemsResultGridComponent {
+    constructor() {
+        this.items = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StacItemsResultGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StacItemsResultGridComponent, isStandalone: true, selector: "gn-ui-stac-items-result-grid", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[10px]\">\n  <div *ngFor=\"let item of items\">\n    <div\n      data-cy=\"stac-item-card\"\n      class=\"h-[173px] flex flex-col justify-between gap-4 bg-white rounded-lg border border-gray-300 px-5 py-3 mx-auto\"\n    >\n      <h2 class=\"text-xl text-black line-clamp-4 break-words\">\n        {{ item.id }}\n      </h2>\n      <p class=\"truncate\">{{ item.properties.datetime }}</p>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StacItemsResultGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-stac-items-result-grid', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[10px]\">\n  <div *ngFor=\"let item of items\">\n    <div\n      data-cy=\"stac-item-card\"\n      class=\"h-[173px] flex flex-col justify-between gap-4 bg-white rounded-lg border border-gray-300 px-5 py-3 mx-auto\"\n    >\n      <h2 class=\"text-xl text-black line-clamp-4 break-words\">\n        {{ item.id }}\n      </h2>\n      <p class=\"truncate\">{{ item.properties.datetime }}</p>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { items: [{
+                type: Input
+            }] } });
+
 const blockModelFixture = () => ({
     key: 'tag',
     items: [
@@ -35126,7 +35186,7 @@ class FacetItemComponent {
         this.onInvertedChange(this.inverted);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FacetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FacetItemComponent, isStandalone: true, selector: "gn-ui-facet-item", inputs: { label: "label", count: "count", selected: "selected", inverted: "inverted" }, outputs: { selectedChange: "selectedChange", invertedChange: "invertedChange" }, ngImport: i0, template: "<div\n  class=\"flex flex-row items-center group px-1 my-1 hover:bg-gray-100 rounded-sm\"\n>\n  <label class=\"grow shrink truncate cursor-pointer group-hover:text-black\">\n    <input\n      type=\"checkbox\"\n      class=\"cursor-pointer\"\n      [ngModel]=\"selected\"\n      (ngModelChange)=\"onSelectedChange($event)\"\n    />\n    {{ label | translate }}\n    <span class=\"group-hover:text-black\">({{ count }})</span>\n  </label>\n  <div\n    *ngIf=\"!inverted\"\n    class=\"shrink-0 cursor-pointer invisible group-hover:visible icon-exclude\"\n    style=\"min-width: 20px\"\n    (click)=\"toggleInverted()\"\n  >\n    <!-- minus svg -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\"\n        clip-rule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    *ngIf=\"inverted\"\n    class=\"shrink-0 cursor-pointer invisible group-hover:visible icon-include\"\n    style=\"min-width: 20px\"\n    (click)=\"toggleInverted()\"\n  >\n    <!-- check svg -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n        clip-rule=\"evenodd\"\n      />\n    </svg>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FacetItemComponent, isStandalone: true, selector: "gn-ui-facet-item", inputs: { label: "label", count: "count", selected: "selected", inverted: "inverted" }, outputs: { selectedChange: "selectedChange", invertedChange: "invertedChange" }, ngImport: i0, template: "<div\n  class=\"flex flex-row items-center group px-1 my-1 hover:bg-gray-100 rounded-sm\"\n>\n  <label class=\"grow shrink truncate cursor-pointer group-hover:text-black\">\n    <input\n      type=\"checkbox\"\n      class=\"cursor-pointer\"\n      [ngModel]=\"selected\"\n      (ngModelChange)=\"onSelectedChange($event)\"\n    />\n    {{ label | translate }}\n    <span class=\"group-hover:text-black\">({{ count }})</span>\n  </label>\n  <div\n    *ngIf=\"!inverted\"\n    class=\"shrink-0 cursor-pointer invisible group-hover:visible icon-exclude\"\n    style=\"min-width: 20px\"\n    (click)=\"toggleInverted()\"\n  >\n    <!-- minus svg -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\"\n        clip-rule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    *ngIf=\"inverted\"\n    class=\"shrink-0 cursor-pointer invisible group-hover:visible icon-include\"\n    style=\"min-width: 20px\"\n    (click)=\"toggleInverted()\"\n  >\n    <!-- check svg -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n        clip-rule=\"evenodd\"\n      />\n    </svg>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FacetItemComponent, decorators: [{
             type: Component,
@@ -38462,6 +38522,13 @@ class DataService {
             throw new Error(`ogc.unreachable.unknown`);
         });
     }
+    async getItemsFromStacApi(url, options) {
+        return await StacEndpoint.getItemsFromUrl(url, options)
+            .then((response) => response)
+            .catch(() => {
+            throw new Error(`ogc.unreachable.unknown`);
+        });
+    }
     async getGeodataLinksFromTms(tmsLink, keepOriginalLink = false) {
         const endpoint = new TmsEndpoint(tmsLink.url.toString().replace(/\/?$/, `/${tmsLink.name}`));
         const tileMaps = await endpoint.allTileMaps.catch(() => {
@@ -39491,49 +39558,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-class StacViewComponent {
-    constructor() {
-        this.currentTemporalExtent = null;
-        this.isTemporalFilterModified = false;
-    }
-    onStartDateChange(date) {
-        this.currentTemporalExtent = {
-            ...this.currentTemporalExtent,
-            start: date,
-        };
-        this.isTemporalFilterModified = true;
-    }
-    onEndDateChange(date) {
-        this.currentTemporalExtent = {
-            ...this.currentTemporalExtent,
-            end: date,
-        };
-        this.isTemporalFilterModified = true;
-    }
-    onResetFilters() {
-        this.currentTemporalExtent = this.initialTemporalExtent;
-        this.isTemporalFilterModified = false;
-    }
-    ngOnInit() {
-        this.currentTemporalExtent = this.initialTemporalExtent;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StacViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StacViewComponent, isStandalone: true, selector: "gn-ui-stac-view", inputs: { link: "link", initialTemporalExtent: "initialTemporalExtent" }, ngImport: i0, template: "<div\n  class=\"w-full h-full flex flex-row mt-6 bg-white border border-gray-300 rounded-lg overflow-hidden\"\n>\n  <div class=\"flex-1 flex flex-col\">\n    <div class=\"m-8\">\n      <p class=\"mb-4\" translate>stac.filter.period</p>\n      <p translate>stac.filter.from</p>\n      <gn-ui-date-picker\n        id=\"start-date-picker\"\n        [date]=\"currentTemporalExtent?.start\"\n        (dateChange)=\"onStartDateChange($event)\"\n      />\n      <p class=\"mt-4\" translate>stac.filter.to</p>\n      <gn-ui-date-picker\n        id=\"end-date-picker\"\n        [date]=\"currentTemporalExtent?.end\"\n        (dateChange)=\"onEndDateChange($event)\"\n      />\n    </div>\n\n    <div class=\"mt-auto mb-8 mx-8\" *ngIf=\"isTemporalFilterModified\">\n      <button\n        id=\"reset-filters-button\"\n        type=\"button\"\n        class=\"flex items-center\"\n        (click)=\"onResetFilters()\"\n      >\n        <span translate>stac.filter.reset</span>\n        <ng-icon\n          name=\"matDeleteOutline\"\n          class=\"pointer-events-none ml-2\"\n        ></ng-icon>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"w-[655px] flex-shrink-0 flex items-center justify-center\">\n    <span>Map...</span>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DatePickerComponent, selector: "gn-ui-date-picker", inputs: ["date"], outputs: ["dateChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], viewProviders: [provideIcons({ matDeleteOutline })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StacViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-stac-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        CommonModule,
-                        DatePickerComponent,
-                        NgIconComponent,
-                        TranslateDirective,
-                    ], viewProviders: [provideIcons({ matDeleteOutline })], template: "<div\n  class=\"w-full h-full flex flex-row mt-6 bg-white border border-gray-300 rounded-lg overflow-hidden\"\n>\n  <div class=\"flex-1 flex flex-col\">\n    <div class=\"m-8\">\n      <p class=\"mb-4\" translate>stac.filter.period</p>\n      <p translate>stac.filter.from</p>\n      <gn-ui-date-picker\n        id=\"start-date-picker\"\n        [date]=\"currentTemporalExtent?.start\"\n        (dateChange)=\"onStartDateChange($event)\"\n      />\n      <p class=\"mt-4\" translate>stac.filter.to</p>\n      <gn-ui-date-picker\n        id=\"end-date-picker\"\n        [date]=\"currentTemporalExtent?.end\"\n        (dateChange)=\"onEndDateChange($event)\"\n      />\n    </div>\n\n    <div class=\"mt-auto mb-8 mx-8\" *ngIf=\"isTemporalFilterModified\">\n      <button\n        id=\"reset-filters-button\"\n        type=\"button\"\n        class=\"flex items-center\"\n        (click)=\"onResetFilters()\"\n      >\n        <span translate>stac.filter.reset</span>\n        <ng-icon\n          name=\"matDeleteOutline\"\n          class=\"pointer-events-none ml-2\"\n        ></ng-icon>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"w-[655px] flex-shrink-0 flex items-center justify-center\">\n    <span>Map...</span>\n  </div>\n</div>\n" }]
-        }], propDecorators: { link: [{
-                type: Input
-            }], initialTemporalExtent: [{
-                type: Input
-            }] } });
-
 /**
  * The Metadata View Facade is used to render complete metadata records.
  * Supply it with an incomplete record (at least containing the uuid) and the
@@ -40663,6 +40687,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+const STAC_ITEMS_PER_PAGE = 12;
+const DEBOUNCE_TIME_MS = 500;
+class StacViewComponent {
+    constructor(dataService, metadataViewFacade, translateService) {
+        this.dataService = dataService;
+        this.metadataViewFacade = metadataViewFacade;
+        this.translateService = translateService;
+        this.isFilterModified = false;
+        this.error = null;
+        this.initialTemporalExtent = null;
+        this.currentTemporalExtent$ = new BehaviorSubject(null);
+        this.currentPageUrl$ = new BehaviorSubject(null);
+        this.items$ = combineLatest([
+            this.currentPageUrl$,
+            this.currentTemporalExtent$,
+        ]).pipe(debounceTime$1(DEBOUNCE_TIME_MS), switchMap(([currentPageUrl, temporalExtent]) => {
+            this.error = null;
+            const options = {
+                limit: STAC_ITEMS_PER_PAGE,
+            };
+            if (temporalExtent && (temporalExtent.start || temporalExtent.end)) {
+                options.datetime = {
+                    ...(temporalExtent.start && { start: temporalExtent.start }),
+                    ...(temporalExtent.end && { end: temporalExtent.end }),
+                };
+            }
+            return from(this.dataService.getItemsFromStacApi(currentPageUrl, options)).pipe(tap$2((stacDocument) => {
+                this.previousPageUrl =
+                    stacDocument.links.find((link) => link.rel === 'previous')?.href ||
+                        null;
+                this.nextPageUrl =
+                    stacDocument.links.find((link) => link.rel === 'next')?.href || null;
+            }), map$2((stacDocument) => stacDocument.features), catchError$1((err) => {
+                this.handleError(err);
+                return of([]);
+            }));
+        }));
+    }
+    ngOnInit() {
+        this.metadataViewFacade.metadata$
+            .pipe(take$1(1), map$2((metadata) => {
+            const temporalExtents = metadata?.kind === 'dataset'
+                ? metadata.temporalExtents
+                : [];
+            return temporalExtents.length > 0
+                ? temporalExtents[0]
+                : {
+                    start: null,
+                    end: null,
+                };
+        }))
+            .subscribe((extent) => {
+            this.initialTemporalExtent = extent;
+            this.currentTemporalExtent$.next(extent);
+        });
+        this.metadataViewFacade.stacLinks$
+            .pipe(take$1(1), map$2((links) => (links && links.length > 0 ? links[0] : null)))
+            .subscribe((link) => {
+            if (link) {
+                this.initialPageUrl = link.url.href;
+                this.currentPageUrl$.next(link.url.href);
+            }
+        });
+    }
+    onTemporalExtentChange(extent) {
+        this.currentTemporalExtent$.next(extent);
+        // make sure to use url without pagination token when temporal filter changes
+        this.currentPageUrl$.next(this.initialPageUrl);
+        this.isFilterModified = true;
+    }
+    onResetFilters() {
+        this.currentTemporalExtent$.next(this.initialTemporalExtent);
+        this.isFilterModified = false;
+    }
+    handleError(error) {
+        if (error instanceof FetchError) {
+            this.error = this.translateService.instant(`dataset.error.${error.type}`, {
+                info: error.info,
+            });
+            console.warn(error.message);
+        }
+        else if (error instanceof Error) {
+            this.error = this.translateService.instant(error.message);
+            console.warn(error.stack || error);
+        }
+        else {
+            this.error = this.translateService.instant(error);
+            console.warn(error);
+        }
+    }
+    // Paginable API
+    get isFirstPage() {
+        return this.previousPageUrl == null;
+    }
+    get isLastPage() {
+        return this.nextPageUrl == null;
+    }
+    goToNextPage() {
+        this.currentPageUrl$.next(this.nextPageUrl);
+    }
+    goToPrevPage() {
+        this.currentPageUrl$.next(this.previousPageUrl);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StacViewComponent, deps: [{ token: DataService }, { token: MdViewFacade }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StacViewComponent, isStandalone: true, selector: "gn-ui-stac-view", ngImport: i0, template: "<div class=\"mt-6 bg-white border border-gray-300 overflow-hidden rounded-lg\">\n  <div\n    class=\"w-full min-h-[366px] flex md:flex-row flex-col border-b border-gray-300\"\n  >\n    <div class=\"md:w-1/2 w-full flex-1 flex flex-col\">\n      <gn-ui-date-range-inputs\n        [temporalExtent]=\"currentTemporalExtent$ | async\"\n        (temporalExtentChange)=\"onTemporalExtentChange($event)\"\n      ></gn-ui-date-range-inputs>\n\n      <div class=\"mt-auto mb-8 mx-8\" *ngIf=\"isFilterModified\">\n        <gn-ui-button\n          id=\"reset-filters-button\"\n          type=\"light\"\n          (buttonClick)=\"onResetFilters()\"\n        >\n          <span translate>stac.filter.reset</span>\n          <ng-icon name=\"matDeleteOutline\" class=\"ml-2\"></ng-icon>\n        </gn-ui-button>\n      </div>\n    </div>\n\n    <div class=\"md:w-1/2 w-full min-h-[280px] flex items-center justify-center\">\n      <span>Map...</span>\n    </div>\n  </div>\n  <div\n    class=\"relative mx-5 my-[30px] min-h-[274px] flex items-center justify-center flex-col\"\n  >\n    <!-- Keep grid outside ngIf to keep items$ observable alive -->\n    <gn-ui-stac-items-result-grid\n      [items]=\"items$ | async\"\n    ></gn-ui-stac-items-result-grid>\n    <div\n      *ngIf=\"(items$ | async)?.length > 0; else noResultsOrError\"\n      class=\"mt-[20px] mx-auto flex justify-center\"\n    >\n      <gn-ui-previous-next-buttons\n        [listComponent]=\"this\"\n        [displayLabels]=\"true\"\n      ></gn-ui-previous-next-buttons>\n    </div>\n    <ng-template #noResultsOrError>\n      <gn-ui-popup-alert\n        *ngIf=\"error\"\n        type=\"warning\"\n        icon=\"matErrorOutlineOutline\"\n        class=\"absolute left-0 top-0 w-full block\"\n      >\n        <span translate>{{ error }}</span>\n      </gn-ui-popup-alert>\n      <div\n        *ngIf=\"!error\"\n        class=\"flex items-center justify-center flex-col h-full gap-[10px]\"\n      >\n        <h2 class=\"text-center text-xl\" translate>stac.results.noResults</h2>\n        <gn-ui-button\n          id=\"no-results-button\"\n          type=\"secondary\"\n          (buttonClick)=\"onResetFilters()\"\n        >\n          <span translate>stac.filter.reset</span>\n          <ng-icon name=\"matDeleteOutline\" class=\"ml-2\"></ng-icon>\n        </gn-ui-button>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [":host{--gn-ui-button-padding: 7px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: StacItemsResultGridComponent, selector: "gn-ui-stac-items-result-grid", inputs: ["items"] }, { kind: "component", type: DateRangeInputsComponent, selector: "gn-ui-date-range-inputs", inputs: ["temporalExtent"], outputs: ["temporalExtentChange"] }, { kind: "component", type: PreviousNextButtonsComponent, selector: "gn-ui-previous-next-buttons", inputs: ["listComponent", "displayLabels"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], viewProviders: [provideIcons({ matDeleteOutline })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StacViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-stac-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        NgIconComponent,
+                        TranslateDirective,
+                        StacItemsResultGridComponent,
+                        DateRangeInputsComponent,
+                        PreviousNextButtonsComponent,
+                        PopupAlertComponent,
+                        ButtonComponent,
+                    ], viewProviders: [provideIcons({ matDeleteOutline })], template: "<div class=\"mt-6 bg-white border border-gray-300 overflow-hidden rounded-lg\">\n  <div\n    class=\"w-full min-h-[366px] flex md:flex-row flex-col border-b border-gray-300\"\n  >\n    <div class=\"md:w-1/2 w-full flex-1 flex flex-col\">\n      <gn-ui-date-range-inputs\n        [temporalExtent]=\"currentTemporalExtent$ | async\"\n        (temporalExtentChange)=\"onTemporalExtentChange($event)\"\n      ></gn-ui-date-range-inputs>\n\n      <div class=\"mt-auto mb-8 mx-8\" *ngIf=\"isFilterModified\">\n        <gn-ui-button\n          id=\"reset-filters-button\"\n          type=\"light\"\n          (buttonClick)=\"onResetFilters()\"\n        >\n          <span translate>stac.filter.reset</span>\n          <ng-icon name=\"matDeleteOutline\" class=\"ml-2\"></ng-icon>\n        </gn-ui-button>\n      </div>\n    </div>\n\n    <div class=\"md:w-1/2 w-full min-h-[280px] flex items-center justify-center\">\n      <span>Map...</span>\n    </div>\n  </div>\n  <div\n    class=\"relative mx-5 my-[30px] min-h-[274px] flex items-center justify-center flex-col\"\n  >\n    <!-- Keep grid outside ngIf to keep items$ observable alive -->\n    <gn-ui-stac-items-result-grid\n      [items]=\"items$ | async\"\n    ></gn-ui-stac-items-result-grid>\n    <div\n      *ngIf=\"(items$ | async)?.length > 0; else noResultsOrError\"\n      class=\"mt-[20px] mx-auto flex justify-center\"\n    >\n      <gn-ui-previous-next-buttons\n        [listComponent]=\"this\"\n        [displayLabels]=\"true\"\n      ></gn-ui-previous-next-buttons>\n    </div>\n    <ng-template #noResultsOrError>\n      <gn-ui-popup-alert\n        *ngIf=\"error\"\n        type=\"warning\"\n        icon=\"matErrorOutlineOutline\"\n        class=\"absolute left-0 top-0 w-full block\"\n      >\n        <span translate>{{ error }}</span>\n      </gn-ui-popup-alert>\n      <div\n        *ngIf=\"!error\"\n        class=\"flex items-center justify-center flex-col h-full gap-[10px]\"\n      >\n        <h2 class=\"text-center text-xl\" translate>stac.results.noResults</h2>\n        <gn-ui-button\n          id=\"no-results-button\"\n          type=\"secondary\"\n          (buttonClick)=\"onResetFilters()\"\n        >\n          <span translate>stac.filter.reset</span>\n          <ng-icon name=\"matDeleteOutline\" class=\"ml-2\"></ng-icon>\n        </gn-ui-button>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [":host{--gn-ui-button-padding: 7px 8px}\n"] }]
+        }], ctorParameters: () => [{ type: DataService }, { type: MdViewFacade }, { type: i1$1.TranslateService }] });
+
 // expects the replacement key ${name}
 const ORGANIZATION_PAGE_URL_TOKEN = new InjectionToken('organization-page-url-token');
 // expects the replacement key ${name}
@@ -42083,7 +42227,7 @@ class FormFieldSimpleComponent {
         this.valueChange = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldSimpleComponent, isStandalone: true, selector: "gn-ui-form-field-simple", inputs: { type: "type", readonly: "readonly", invalid: "invalid", placeholder: "placeholder", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<input\n  [type]=\"type\"\n  [readonly]=\"readonly\"\n  [placeholder]=\"placeholder\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"valueChange.emit($event)\"\n  class=\"gn-ui-text-input\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldSimpleComponent, isStandalone: true, selector: "gn-ui-form-field-simple", inputs: { type: "type", readonly: "readonly", invalid: "invalid", placeholder: "placeholder", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<input\n  [type]=\"type\"\n  [readonly]=\"readonly\"\n  [placeholder]=\"placeholder\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"valueChange.emit($event)\"\n  class=\"gn-ui-text-input\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "18.2.13", ngImport: i0, type: FormFieldSimpleComponent, decorators: [{
             type: Component,
@@ -42109,7 +42253,7 @@ class FormFieldFileComponent {
         this.placeholder = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$2.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldFileComponent, decorators: [{
             type: Component,
@@ -42840,7 +42984,7 @@ class OnlineServiceResourceInputComponent {
             provideNgIconsConfig({
                 size: '1.5em',
             }),
-        ], ngImport: i0, template: "<div class=\"flex flex-row justify-between\">\n  <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n    editor.record.form.field.onlineResource.edit.protocol\n  </h3>\n  <span\n    *ngIf=\"protocolHint\"\n    class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n    [matTooltip]=\"protocolHint\"\n    matTooltipPosition=\"above\"\n  >\n    help\n  </span>\n</div>\n<div class=\"flex flex-row items-center gap-4 h-[48px]\">\n  <mat-radio-group\n    aria-labelledby=\"example-radio-group-label\"\n    class=\"flex flex-row gap-[8px]\"\n    [(ngModel)]=\"_service.accessServiceProtocol\"\n    [disabled]=\"disabled\"\n    (change)=\"resetAllFormFields()\"\n  >\n    <mat-radio-button\n      *ngFor=\"let protocolOption of protocolOptions\"\n      [value]=\"protocolOption.value\"\n    >\n      {{ protocolOption.label | translate }}\n    </mat-radio-button>\n  </mat-radio-group>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n  <gn-ui-url-input\n    class=\"w-full\"\n    (uploadClick)=\"handleUploadClick($event)\"\n    (valueChange)=\"handleUrlValueChange($event)\"\n    [disabled]=\"disabled\"\n    [value]=\"_service.url?.toString()\"\n    [showValidateButton]=\"activeLayerSuggestion\"\n    [resetUrlOnChange]=\"resetUrlOnChange\"\n  >\n    <ng-content *ngIf=\"activeLayerSuggestion\">\n      <ng-icon name=\"iconoirRefresh\"></ng-icon>\n    </ng-content>\n  </gn-ui-url-input>\n\n  <p class=\"text-sm text-red-500 pl-4\" *ngIf=\"errorMessage\" translate>\n    editor.record.form.field.onlineResource.edit.identifier.error\n  </p>\n\n  <gn-ui-text-input\n    class=\"grow border-b border-gray-300 pb-4\"\n    [(value)]=\"_service.identifierInService\"\n    [placeholder]=\"getIdentifierPlaceholder() | translate\"\n    data-cy=\"identifier-in-service\"\n    [disabled]=\"disabled\"\n    *ngIf=\"\n      !activeLayerSuggestion ||\n      (_service.url && errorMessage) ||\n      (modifyMode && (layers$ | async).length === 0)\n    \"\n  ></gn-ui-text-input>\n  <gn-ui-autocomplete\n    class=\"border-b border-gray-300 pb-4\"\n    [placeholder]=\"\n      'editor.record.form.field.onlineResource.edit.identifier.select.label'\n        | translate\n    \"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"handleSelectValue($event)\"\n    [displayWithFn]=\"displayWithFn\"\n    [minCharacterCount]=\"0\"\n    [clearOnSelection]=\"false\"\n    *ngIf=\"activeLayerSuggestion && (layers$ | async)?.length > 0\"\n  >\n  </gn-ui-autocomplete>\n  <gn-ui-button\n    (buttonClick)=\"submit()\"\n    [disabled]=\"disabled || !_service.identifierInService\"\n    type=\"primary\"\n    *ngIf=\"\n      !modifyMode &&\n      ((activeLayerSuggestion && (layers$ | async)) ||\n        !activeLayerSuggestion ||\n        (_service.url && errorMessage))\n    \"\n  >\n    <span class=\"text-white font-bold\" translate>\n      editor.record.form.field.onlineResource.edit.identifier.submit</span\n    >\n  </gn-ui-button>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"flex flex-row justify-between\">\n  <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n    editor.record.form.field.onlineResource.edit.protocol\n  </h3>\n  <span\n    *ngIf=\"protocolHint\"\n    class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n    [matTooltip]=\"protocolHint\"\n    matTooltipPosition=\"above\"\n  >\n    help\n  </span>\n</div>\n<div class=\"flex flex-row items-center gap-4 h-[48px]\">\n  <mat-radio-group\n    aria-labelledby=\"example-radio-group-label\"\n    class=\"flex flex-row gap-[8px]\"\n    [(ngModel)]=\"_service.accessServiceProtocol\"\n    [disabled]=\"disabled\"\n    (change)=\"resetAllFormFields()\"\n  >\n    <mat-radio-button\n      *ngFor=\"let protocolOption of protocolOptions\"\n      [value]=\"protocolOption.value\"\n    >\n      {{ protocolOption.label | translate }}\n    </mat-radio-button>\n  </mat-radio-group>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n  <gn-ui-url-input\n    class=\"w-full\"\n    (uploadClick)=\"handleUploadClick($event)\"\n    (valueChange)=\"handleUrlValueChange($event)\"\n    [disabled]=\"disabled\"\n    [value]=\"_service.url?.toString()\"\n    [showValidateButton]=\"activeLayerSuggestion\"\n    [resetUrlOnChange]=\"resetUrlOnChange\"\n  >\n    <ng-content *ngIf=\"activeLayerSuggestion\">\n      <ng-icon name=\"iconoirRefresh\"></ng-icon>\n    </ng-content>\n  </gn-ui-url-input>\n\n  <p class=\"text-sm text-red-500 pl-4\" *ngIf=\"errorMessage\" translate>\n    editor.record.form.field.onlineResource.edit.identifier.error\n  </p>\n\n  <gn-ui-text-input\n    class=\"grow border-b border-gray-300 pb-4\"\n    [(value)]=\"_service.identifierInService\"\n    [placeholder]=\"getIdentifierPlaceholder() | translate\"\n    data-cy=\"identifier-in-service\"\n    [disabled]=\"disabled\"\n    *ngIf=\"\n      !activeLayerSuggestion ||\n      (_service.url && errorMessage) ||\n      (modifyMode && (layers$ | async).length === 0)\n    \"\n  ></gn-ui-text-input>\n  <gn-ui-autocomplete\n    class=\"border-b border-gray-300 pb-4\"\n    [placeholder]=\"\n      'editor.record.form.field.onlineResource.edit.identifier.select.label'\n        | translate\n    \"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"handleSelectValue($event)\"\n    [displayWithFn]=\"displayWithFn\"\n    [minCharacterCount]=\"0\"\n    [clearOnSelection]=\"false\"\n    *ngIf=\"activeLayerSuggestion && (layers$ | async)?.length > 0\"\n  >\n  </gn-ui-autocomplete>\n  <gn-ui-button\n    (buttonClick)=\"submit()\"\n    [disabled]=\"disabled || !_service.identifierInService\"\n    type=\"primary\"\n    *ngIf=\"\n      !modifyMode &&\n      ((activeLayerSuggestion && (layers$ | async)) ||\n        !activeLayerSuggestion ||\n        (_service.url && errorMessage))\n    \"\n  >\n    <span class=\"text-white font-bold\" translate>\n      editor.record.form.field.onlineResource.edit.identifier.submit</span\n    >\n  </gn-ui-button>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnlineServiceResourceInputComponent, decorators: [{
             type: Component,
@@ -43639,7 +43783,7 @@ class FormFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldComponent, isStandalone: true, selector: "gn-ui-form-field", inputs: { uniqueIdentifier: "uniqueIdentifier", model: "model", modelSpecifier: "modelSpecifier", componentName: "componentName", config: "config", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }], ngImport: i0, template: "<!-- TEMPORARY - disabling the open data switch -->\n<!-- <ng-container *ngIf=\"model === 'licenses'\">\n  <gn-ui-form-field-open-data\n    [value]=\"valueAsConstraints\"\n    (valueChange)=\"valueChange.emit($event)\"\n    (openDataChange)=\"toggleIsOpenData($event)\"\n  ></gn-ui-form-field-open-data>\n</ng-container> -->\n<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 [ngSwitch]=\"model\">\n    <ng-container *ngSwitchCase=\"'title'\">\n      <div class=\"flex flex-row flex-start items-center gap-3 mb-[12px]\">\n        <textarea\n          #titleInput\n          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          data-test=\"recordTitleInput\"\n          class=\"grow font-title text-3xl font-normal overflow-hidden text-black/80\"\n          (change)=\"valueChange.emit($event.target.value)\"\n          [placeholder]=\"\n            'editor.record.form.field.title.placeholder' | translate\n          \"\n          >{{ valueAsString }}</textarea\n        >\n        <div class=\"flex flex-row justify-between self-start mt-0.5\">\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            *ngIf=\"config.hintKey\"\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      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'abstract'\">\n      <gn-ui-form-field-rich\n        [label]=\"config.labelKey! | translate\"\n        [hint]=\"config.hintKey! | translate\"\n        [value]=\"valueAsString\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-rich>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'overviews'\">\n      <gn-ui-form-field-overviews\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOverviews\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-overviews>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceIdentifiers'\">\n      <gn-ui-form-field-simple\n        [type]=\"'text'\"\n        [value]=\"valueAsResourceIdentifierCode\"\n        (valueChange)=\"handleResourceIdentifierChange($event)\"\n      ></gn-ui-form-field-simple>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceCreated'\">\n      <gn-ui-form-field-date\n        [value]=\"valueAsDate\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-date>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceUpdated'\">\n      <gn-ui-form-field-date\n        [value]=\"valueAsDate\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-date>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'updateFrequency'\">\n      <gn-ui-form-field-update-frequency\n        [value]=\"valueAsUpdateFrequency\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-update-frequency>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'temporalExtents'\">\n      <gn-ui-form-field-temporal-extents\n        [value]=\"valueAsTemporalExtents\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-temporal-extents>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'spatialExtents'\">\n      <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'keywords'\">\n      <gn-ui-form-field-keywords\n        [value]=\"valueAsKeywords\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-keywords>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'topics'\">\n      <gn-ui-form-field-topics\n        [value]=\"valueAsTopics\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-topics>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'licenses'\">\n      <gn-ui-form-field-license\n        [label]=\"config.labelKey! | translate\"\n        [recordLicences]=\"valueAsConstraints\"\n        (recordLicencesChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-license>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'legalConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'securityConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'otherConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container\n    ></ng-container>\n    <ng-template #formFieldConstraints>\n      <gn-ui-form-field-constraints\n        [label]=\"config.labelKey\"\n        [value]=\"valueAsConstraints\"\n        [constraintType]=\"model\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-constraints\n    ></ng-template>\n\n    <ng-container *ngSwitchCase=\"'contactsForResource'\">\n      <gn-ui-form-field-contacts-for-resource\n        [value]=\"valueAsIndividuals\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-contacts-for-resource>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'contacts'\">\n      <gn-ui-form-field-contacts\n        [value]=\"valueAsIndividuals\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-contacts>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'onlineResources'\">\n      <gn-ui-form-field-online-resources\n        *ngIf=\"modelSpecifier === 'onlineResourceType:!link'\"\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOnlineResources\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-online-resources>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'onlineResources'\">\n      <gn-ui-form-field-online-link-resources\n        *ngIf=\"modelSpecifier === 'onlineResourceType:link'\"\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOnlineResources\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-online-link-resources>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"!model\">\n    <ng-container [ngSwitch]=\"componentName\">\n      <ng-container *ngSwitchCase=\"'form-field-constraints-shortcuts'\">\n        <gn-ui-form-field-constraints-shortcuts></gn-ui-form-field-constraints-shortcuts>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'form-field-spatial-toggle'\">\n        <gn-ui-form-field-spatial-toggle></gn-ui-form-field-spatial-toggle>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormFieldWrapperComponent, selector: "gn-ui-form-field-wrapper", inputs: ["label", "hint"] }, { kind: "component", type: FormFieldLicenseComponent, selector: "gn-ui-form-field-license", inputs: ["label", "recordLicences"], outputs: ["recordLicencesChange"] }, { kind: "component", type: FormFieldDateComponent, selector: "gn-ui-form-field-date", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldUpdateFrequencyComponent, selector: "gn-ui-form-field-update-frequency", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldTemporalExtentsComponent, selector: "gn-ui-form-field-temporal-extents", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: ["type", "readonly", "invalid", "placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["label", "hint", "placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent" }, { kind: "component", type: FormFieldKeywordsComponent, selector: "gn-ui-form-field-keywords", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldOverviewsComponent, selector: "gn-ui-form-field-overviews", inputs: ["metadataUuid", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldContactsForResourceComponent, selector: "gn-ui-form-field-contacts-for-resource", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldOnlineResourcesComponent, selector: "gn-ui-form-field-online-resources", inputs: ["metadataUuid", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldOnlineLinkResourcesComponent, selector: "gn-ui-form-field-online-link-resources", inputs: ["metadataUuid", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldContactsComponent, selector: "gn-ui-form-field-contacts", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldConstraintsComponent, selector: "gn-ui-form-field-constraints", inputs: ["label", "value", "constraintType"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldConstraintsShortcutsComponent, selector: "gn-ui-form-field-constraints-shortcuts" }, { kind: "component", type: FormFieldSpatialToggleComponent, selector: "gn-ui-form-field-spatial-toggle" }, { kind: "component", type: FormFieldTopicsComponent, selector: "gn-ui-form-field-topics", inputs: ["value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "directive", type: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldComponent, isStandalone: true, selector: "gn-ui-form-field", inputs: { uniqueIdentifier: "uniqueIdentifier", model: "model", modelSpecifier: "modelSpecifier", componentName: "componentName", config: "config", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }], ngImport: i0, template: "<!-- TEMPORARY - disabling the open data switch -->\n<!-- <ng-container *ngIf=\"model === 'licenses'\">\n  <gn-ui-form-field-open-data\n    [value]=\"valueAsConstraints\"\n    (valueChange)=\"valueChange.emit($event)\"\n    (openDataChange)=\"toggleIsOpenData($event)\"\n  ></gn-ui-form-field-open-data>\n</ng-container> -->\n<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 [ngSwitch]=\"model\">\n    <ng-container *ngSwitchCase=\"'title'\">\n      <div class=\"flex flex-row flex-start items-center gap-3 mb-[12px]\">\n        <textarea\n          #titleInput\n          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          data-test=\"recordTitleInput\"\n          class=\"grow font-title text-3xl font-normal overflow-hidden text-black/80\"\n          (change)=\"valueChange.emit($event.target.value)\"\n          [placeholder]=\"\n            'editor.record.form.field.title.placeholder' | translate\n          \"\n          >{{ valueAsString }}</textarea\n        >\n        <div class=\"flex flex-row justify-between self-start mt-0.5\">\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            *ngIf=\"config.hintKey\"\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      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'abstract'\">\n      <gn-ui-form-field-rich\n        [label]=\"config.labelKey! | translate\"\n        [hint]=\"config.hintKey! | translate\"\n        [value]=\"valueAsString\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-rich>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'overviews'\">\n      <gn-ui-form-field-overviews\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOverviews\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-overviews>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceIdentifiers'\">\n      <gn-ui-form-field-simple\n        [type]=\"'text'\"\n        [value]=\"valueAsResourceIdentifierCode\"\n        (valueChange)=\"handleResourceIdentifierChange($event)\"\n      ></gn-ui-form-field-simple>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceCreated'\">\n      <gn-ui-form-field-date\n        [value]=\"valueAsDate\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-date>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceUpdated'\">\n      <gn-ui-form-field-date\n        [value]=\"valueAsDate\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-date>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'updateFrequency'\">\n      <gn-ui-form-field-update-frequency\n        [value]=\"valueAsUpdateFrequency\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-update-frequency>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'temporalExtents'\">\n      <gn-ui-form-field-temporal-extents\n        [value]=\"valueAsTemporalExtents\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-temporal-extents>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'spatialExtents'\">\n      <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'keywords'\">\n      <gn-ui-form-field-keywords\n        [value]=\"valueAsKeywords\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-keywords>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'topics'\">\n      <gn-ui-form-field-topics\n        [value]=\"valueAsTopics\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-topics>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'licenses'\">\n      <gn-ui-form-field-license\n        [label]=\"config.labelKey! | translate\"\n        [recordLicences]=\"valueAsConstraints\"\n        (recordLicencesChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-license>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'legalConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'securityConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'otherConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container\n    ></ng-container>\n    <ng-template #formFieldConstraints>\n      <gn-ui-form-field-constraints\n        [label]=\"config.labelKey\"\n        [value]=\"valueAsConstraints\"\n        [constraintType]=\"model\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-constraints\n    ></ng-template>\n\n    <ng-container *ngSwitchCase=\"'contactsForResource'\">\n      <gn-ui-form-field-contacts-for-resource\n        [value]=\"valueAsIndividuals\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-contacts-for-resource>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'contacts'\">\n      <gn-ui-form-field-contacts\n        [value]=\"valueAsIndividuals\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-contacts>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'onlineResources'\">\n      <gn-ui-form-field-online-resources\n        *ngIf=\"modelSpecifier === 'onlineResourceType:!link'\"\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOnlineResources\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-online-resources>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'onlineResources'\">\n      <gn-ui-form-field-online-link-resources\n        *ngIf=\"modelSpecifier === 'onlineResourceType:link'\"\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOnlineResources\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-online-link-resources>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"!model\">\n    <ng-container [ngSwitch]=\"componentName\">\n      <ng-container *ngSwitchCase=\"'form-field-constraints-shortcuts'\">\n        <gn-ui-form-field-constraints-shortcuts></gn-ui-form-field-constraints-shortcuts>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'form-field-spatial-toggle'\">\n        <gn-ui-form-field-spatial-toggle></gn-ui-form-field-spatial-toggle>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormFieldWrapperComponent, selector: "gn-ui-form-field-wrapper", inputs: ["label", "hint"] }, { kind: "component", type: FormFieldLicenseComponent, selector: "gn-ui-form-field-license", inputs: ["label", "recordLicences"], outputs: ["recordLicencesChange"] }, { kind: "component", type: FormFieldDateComponent, selector: "gn-ui-form-field-date", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldUpdateFrequencyComponent, selector: "gn-ui-form-field-update-frequency", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldTemporalExtentsComponent, selector: "gn-ui-form-field-temporal-extents", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: ["type", "readonly", "invalid", "placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["label", "hint", "placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent" }, { kind: "component", type: FormFieldKeywordsComponent, selector: "gn-ui-form-field-keywords", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldOverviewsComponent, selector: "gn-ui-form-field-overviews", inputs: ["metadataUuid", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldContactsForResourceComponent, selector: "gn-ui-form-field-contacts-for-resource", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldOnlineResourcesComponent, selector: "gn-ui-form-field-online-resources", inputs: ["metadataUuid", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldOnlineLinkResourcesComponent, selector: "gn-ui-form-field-online-link-resources", inputs: ["metadataUuid", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldContactsComponent, selector: "gn-ui-form-field-contacts", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldConstraintsComponent, selector: "gn-ui-form-field-constraints", inputs: ["label", "value", "constraintType"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldConstraintsShortcutsComponent, selector: "gn-ui-form-field-constraints-shortcuts" }, { kind: "component", type: FormFieldSpatialToggleComponent, selector: "gn-ui-form-field-spatial-toggle" }, { kind: "component", type: FormFieldTopicsComponent, selector: "gn-ui-form-field-topics", inputs: ["value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "directive", type: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -43934,7 +44078,7 @@ class MultilingualPanelComponent {
             provideNgIconsConfig({
                 size: '1.25em',
             }),
-        ], viewQueries: [{ propertyName: "actionMenuButtons", predicate: ["actionMenuButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-6 overflow-auto\"\n  style=\"background-color: #fafaf9\"\n>\n  <div class=\"flex flex-row px-2 justify-between\">\n    <span class=\"text-3xl font-title text-black/80\" translate\n      >editor.record.form.multilingual.title</span\n    >\n    <button\n      [title]=\"'editor.record.form.multilingual.open' | translate\"\n      (click)=\"toggleLanguageSelection()\"\n      *ngIf=\"isMultilingual\"\n      data-test=\"activateSelection\"\n    >\n      <ng-icon class=\"mt-1\" name=\"iconoirSettings\"></ng-icon>\n    </button>\n  </div>\n  <div class=\"flex flex-col gap-2\" *ngIf=\"editTranslations || !isMultilingual\">\n    <gn-ui-check-toggle\n      class=\"p-2\"\n      [label]=\"'editor.record.form.multilingual.enable' | translate\"\n      [color]=\"'primary'\"\n      [(value)]=\"isMultilingual\"\n      (toggled)=\"switchMultilingual($event)\"\n    ></gn-ui-check-toggle>\n    <div *ngIf=\"isMultilingual\" class=\"flex flex-col gap-2\">\n      <div class=\"flex flex-row justify-between border-t border-gray-300 p-3\">\n        <span class=\"mt-2 text-sm text-gray-600\" translate\n          >editor.record.form.multilingual.activate</span\n        >\n        <gn-ui-button\n          extraClass=\"w-16 h-8 font-bold\"\n          type=\"gray\"\n          (buttonClick)=\"validateTranslations()\"\n          data-test=\"validateSelection\"\n          >{{ 'editor.record.form.multilingual.validate' | translate }}\n        </gn-ui-button>\n      </div>\n      <ng-container *ngIf=\"supportedLanguages$ | async as languages\">\n        <div\n          class=\"flex flex-col gap-2 w-full px-2\"\n          data-test=\"langAvailable\"\n          *ngFor=\"let lang of languages\"\n        >\n          <gn-ui-button\n            [extraClass]=\"getExtraClass(lang)\"\n            type=\"gray\"\n            (buttonClick)=\"toggleLanguage(lang)\"\n            [disabled]=\"lang === _record.defaultLanguage\"\n            [title]=\"getToggleTitle(lang)\"\n          >\n            <span [class]=\"getIconClass(lang)\"></span>\n            <span class=\"ml-2\">{{ 'language.' + lang | translate }}</span>\n          </gn-ui-button>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div *ngIf=\"!editTranslations && isMultilingual\" class=\"flex flex-col gap-2\">\n    <gn-ui-button\n      *ngFor=\"let recordLang of sortLanguages(recordLanguages); let i = index\"\n      extraClass=\"flex flex-row justify-between bg-white border border-white rounded mb-1 h-[34px] w-full\"\n      [ngClass]=\"{\n        'mt-8': isFirstUnsupported(i),\n        '': true,\n      }\"\n      (buttonClick)=\"switchFormLang(recordLang)\"\n      type=\"outline\"\n      data-test=\"langSwitch\"\n    >\n      <div class=\"flex flex-row gap-2 items-center\">\n        <ng-icon\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-primary mt-1\"\n          name=\"iconoirCheckCircle\"\n        ></ng-icon>\n        <ng-icon\n          *ngIf=\"recordLang !== formLanguage\"\n          class=\"text-gray-800 mt-1\"\n          name=\"iconoirCircle\"\n        ></ng-icon>\n        <span\n          *ngIf=\"recordLang.length === 2\"\n          [class]=\"getIconClass(recordLang) + 'mt-1'\"\n        ></span>\n        <span [ngClass]=\"recordLang === formLanguage ? 'text-black' : ''\">{{\n          isLangSupported(recordLang)\n            ? ('language.' + recordLang | translate)\n            : recordLang.toUpperCase()\n        }}</span>\n      </div>\n      <div class=\"flex flex-row gap-2 items-center\">\n        <span\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-xs text-base\"\n          translate\n          >editor.record.form.multilingual.default</span\n        >\n        <button\n          (click)=\"\n            openActionMenu(recordLang, template); $event.stopPropagation()\n          \"\n          cdkOverlayOrigin\n          #actionMenuButton\n        >\n          <ng-icon class=\"pb-5\" name=\"matMoreHorizOutline\"></ng-icon>\n        </button>\n        <ng-template #template>\n          <gn-ui-action-menu\n            [canDelete]=\"recordLang !== _record.defaultLanguage\"\n            page=\"record\"\n            (delete)=\"confirmDeleteAction(recordLang)\"\n            (closeActionMenu)=\"closeActionMenu()\"\n            (switch)=\"switchDefaultLang(recordLang)\"\n          >\n          </gn-ui-action-menu>\n        </ng-template>\n      </div>\n    </gn-ui-button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: CheckToggleComponent, selector: "gn-ui-check-toggle", inputs: ["title", "label", "value", "color"], outputs: ["toggled"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ActionMenuComponent, selector: "gn-ui-action-menu", inputs: ["canDuplicate", "isDuplicating", "canDelete", "page"], outputs: ["duplicate", "delete", "closeActionMenu", "rollback", "switch"] }] }); }
+        ], viewQueries: [{ propertyName: "actionMenuButtons", predicate: ["actionMenuButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-6 overflow-auto\"\n  style=\"background-color: #fafaf9\"\n>\n  <div class=\"flex flex-row px-2 justify-between\">\n    <span class=\"text-3xl font-title text-black/80\" translate\n      >editor.record.form.multilingual.title</span\n    >\n    <button\n      [title]=\"'editor.record.form.multilingual.open' | translate\"\n      (click)=\"toggleLanguageSelection()\"\n      *ngIf=\"isMultilingual\"\n      data-test=\"activateSelection\"\n    >\n      <ng-icon class=\"mt-1\" name=\"iconoirSettings\"></ng-icon>\n    </button>\n  </div>\n  <div class=\"flex flex-col gap-2\" *ngIf=\"editTranslations || !isMultilingual\">\n    <gn-ui-check-toggle\n      class=\"p-2\"\n      [label]=\"'editor.record.form.multilingual.enable' | translate\"\n      [color]=\"'primary'\"\n      [(value)]=\"isMultilingual\"\n      (toggled)=\"switchMultilingual($event)\"\n    ></gn-ui-check-toggle>\n    <div *ngIf=\"isMultilingual\" class=\"flex flex-col gap-2\">\n      <div class=\"flex flex-row justify-between border-t border-gray-300 p-3\">\n        <span class=\"mt-2 text-sm text-gray-600\" translate\n          >editor.record.form.multilingual.activate</span\n        >\n        <gn-ui-button\n          extraClass=\"w-16 h-8 font-bold\"\n          type=\"gray\"\n          (buttonClick)=\"validateTranslations()\"\n          data-test=\"validateSelection\"\n          >{{ 'editor.record.form.multilingual.validate' | translate }}\n        </gn-ui-button>\n      </div>\n      <ng-container *ngIf=\"supportedLanguages$ | async as languages\">\n        <div\n          class=\"flex flex-col gap-2 w-full px-2\"\n          data-test=\"langAvailable\"\n          [attr.data-test-lang]=\"lang\"\n          *ngFor=\"let lang of languages\"\n        >\n          <gn-ui-button\n            [extraClass]=\"getExtraClass(lang)\"\n            type=\"gray\"\n            (buttonClick)=\"toggleLanguage(lang)\"\n            [disabled]=\"lang === _record.defaultLanguage\"\n            [title]=\"getToggleTitle(lang)\"\n          >\n            <span [class]=\"getIconClass(lang)\"></span>\n            <span class=\"ml-2\">{{ 'language.' + lang | translate }}</span>\n          </gn-ui-button>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div *ngIf=\"!editTranslations && isMultilingual\" class=\"flex flex-col gap-2\">\n    <gn-ui-button\n      *ngFor=\"let recordLang of sortLanguages(recordLanguages); let i = index\"\n      extraClass=\"flex flex-row justify-between bg-white border border-white rounded mb-1 h-[34px] w-full\"\n      [ngClass]=\"{\n        'mt-8': isFirstUnsupported(i),\n        '': true,\n      }\"\n      (buttonClick)=\"switchFormLang(recordLang)\"\n      type=\"outline\"\n      data-test=\"langSwitch\"\n    >\n      <div class=\"flex flex-row gap-2 items-center\">\n        <ng-icon\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-primary mt-1\"\n          name=\"iconoirCheckCircle\"\n        ></ng-icon>\n        <ng-icon\n          *ngIf=\"recordLang !== formLanguage\"\n          class=\"text-gray-800 mt-1\"\n          name=\"iconoirCircle\"\n        ></ng-icon>\n        <span\n          *ngIf=\"recordLang.length === 2\"\n          [class]=\"getIconClass(recordLang) + 'mt-1'\"\n        ></span>\n        <span [ngClass]=\"recordLang === formLanguage ? 'text-black' : ''\">{{\n          isLangSupported(recordLang)\n            ? ('language.' + recordLang | translate)\n            : recordLang.toUpperCase()\n        }}</span>\n      </div>\n      <div class=\"flex flex-row gap-2 items-center\">\n        <span\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-xs text-base\"\n          translate\n          >editor.record.form.multilingual.default</span\n        >\n        <button\n          (click)=\"\n            openActionMenu(recordLang, template); $event.stopPropagation()\n          \"\n          cdkOverlayOrigin\n          #actionMenuButton\n        >\n          <ng-icon class=\"pb-5\" name=\"matMoreHorizOutline\"></ng-icon>\n        </button>\n        <ng-template #template>\n          <gn-ui-action-menu\n            [canDelete]=\"recordLang !== _record.defaultLanguage\"\n            page=\"record\"\n            (delete)=\"confirmDeleteAction(recordLang)\"\n            (closeActionMenu)=\"closeActionMenu()\"\n            (switch)=\"switchDefaultLang(recordLang)\"\n          >\n          </gn-ui-action-menu>\n        </ng-template>\n      </div>\n    </gn-ui-button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: CheckToggleComponent, selector: "gn-ui-check-toggle", inputs: ["title", "label", "value", "color"], outputs: ["toggled"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ActionMenuComponent, selector: "gn-ui-action-menu", inputs: ["canDuplicate", "isDuplicating", "canDelete", "page"], outputs: ["duplicate", "delete", "closeActionMenu", "rollback", "switch"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultilingualPanelComponent, decorators: [{
             type: Component,
@@ -43956,7 +44100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         provideNgIconsConfig({
                             size: '1.25em',
                         }),
-                    ], template: "<div\n  class=\"flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-6 overflow-auto\"\n  style=\"background-color: #fafaf9\"\n>\n  <div class=\"flex flex-row px-2 justify-between\">\n    <span class=\"text-3xl font-title text-black/80\" translate\n      >editor.record.form.multilingual.title</span\n    >\n    <button\n      [title]=\"'editor.record.form.multilingual.open' | translate\"\n      (click)=\"toggleLanguageSelection()\"\n      *ngIf=\"isMultilingual\"\n      data-test=\"activateSelection\"\n    >\n      <ng-icon class=\"mt-1\" name=\"iconoirSettings\"></ng-icon>\n    </button>\n  </div>\n  <div class=\"flex flex-col gap-2\" *ngIf=\"editTranslations || !isMultilingual\">\n    <gn-ui-check-toggle\n      class=\"p-2\"\n      [label]=\"'editor.record.form.multilingual.enable' | translate\"\n      [color]=\"'primary'\"\n      [(value)]=\"isMultilingual\"\n      (toggled)=\"switchMultilingual($event)\"\n    ></gn-ui-check-toggle>\n    <div *ngIf=\"isMultilingual\" class=\"flex flex-col gap-2\">\n      <div class=\"flex flex-row justify-between border-t border-gray-300 p-3\">\n        <span class=\"mt-2 text-sm text-gray-600\" translate\n          >editor.record.form.multilingual.activate</span\n        >\n        <gn-ui-button\n          extraClass=\"w-16 h-8 font-bold\"\n          type=\"gray\"\n          (buttonClick)=\"validateTranslations()\"\n          data-test=\"validateSelection\"\n          >{{ 'editor.record.form.multilingual.validate' | translate }}\n        </gn-ui-button>\n      </div>\n      <ng-container *ngIf=\"supportedLanguages$ | async as languages\">\n        <div\n          class=\"flex flex-col gap-2 w-full px-2\"\n          data-test=\"langAvailable\"\n          *ngFor=\"let lang of languages\"\n        >\n          <gn-ui-button\n            [extraClass]=\"getExtraClass(lang)\"\n            type=\"gray\"\n            (buttonClick)=\"toggleLanguage(lang)\"\n            [disabled]=\"lang === _record.defaultLanguage\"\n            [title]=\"getToggleTitle(lang)\"\n          >\n            <span [class]=\"getIconClass(lang)\"></span>\n            <span class=\"ml-2\">{{ 'language.' + lang | translate }}</span>\n          </gn-ui-button>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div *ngIf=\"!editTranslations && isMultilingual\" class=\"flex flex-col gap-2\">\n    <gn-ui-button\n      *ngFor=\"let recordLang of sortLanguages(recordLanguages); let i = index\"\n      extraClass=\"flex flex-row justify-between bg-white border border-white rounded mb-1 h-[34px] w-full\"\n      [ngClass]=\"{\n        'mt-8': isFirstUnsupported(i),\n        '': true,\n      }\"\n      (buttonClick)=\"switchFormLang(recordLang)\"\n      type=\"outline\"\n      data-test=\"langSwitch\"\n    >\n      <div class=\"flex flex-row gap-2 items-center\">\n        <ng-icon\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-primary mt-1\"\n          name=\"iconoirCheckCircle\"\n        ></ng-icon>\n        <ng-icon\n          *ngIf=\"recordLang !== formLanguage\"\n          class=\"text-gray-800 mt-1\"\n          name=\"iconoirCircle\"\n        ></ng-icon>\n        <span\n          *ngIf=\"recordLang.length === 2\"\n          [class]=\"getIconClass(recordLang) + 'mt-1'\"\n        ></span>\n        <span [ngClass]=\"recordLang === formLanguage ? 'text-black' : ''\">{{\n          isLangSupported(recordLang)\n            ? ('language.' + recordLang | translate)\n            : recordLang.toUpperCase()\n        }}</span>\n      </div>\n      <div class=\"flex flex-row gap-2 items-center\">\n        <span\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-xs text-base\"\n          translate\n          >editor.record.form.multilingual.default</span\n        >\n        <button\n          (click)=\"\n            openActionMenu(recordLang, template); $event.stopPropagation()\n          \"\n          cdkOverlayOrigin\n          #actionMenuButton\n        >\n          <ng-icon class=\"pb-5\" name=\"matMoreHorizOutline\"></ng-icon>\n        </button>\n        <ng-template #template>\n          <gn-ui-action-menu\n            [canDelete]=\"recordLang !== _record.defaultLanguage\"\n            page=\"record\"\n            (delete)=\"confirmDeleteAction(recordLang)\"\n            (closeActionMenu)=\"closeActionMenu()\"\n            (switch)=\"switchDefaultLang(recordLang)\"\n          >\n          </gn-ui-action-menu>\n        </ng-template>\n      </div>\n    </gn-ui-button>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-6 overflow-auto\"\n  style=\"background-color: #fafaf9\"\n>\n  <div class=\"flex flex-row px-2 justify-between\">\n    <span class=\"text-3xl font-title text-black/80\" translate\n      >editor.record.form.multilingual.title</span\n    >\n    <button\n      [title]=\"'editor.record.form.multilingual.open' | translate\"\n      (click)=\"toggleLanguageSelection()\"\n      *ngIf=\"isMultilingual\"\n      data-test=\"activateSelection\"\n    >\n      <ng-icon class=\"mt-1\" name=\"iconoirSettings\"></ng-icon>\n    </button>\n  </div>\n  <div class=\"flex flex-col gap-2\" *ngIf=\"editTranslations || !isMultilingual\">\n    <gn-ui-check-toggle\n      class=\"p-2\"\n      [label]=\"'editor.record.form.multilingual.enable' | translate\"\n      [color]=\"'primary'\"\n      [(value)]=\"isMultilingual\"\n      (toggled)=\"switchMultilingual($event)\"\n    ></gn-ui-check-toggle>\n    <div *ngIf=\"isMultilingual\" class=\"flex flex-col gap-2\">\n      <div class=\"flex flex-row justify-between border-t border-gray-300 p-3\">\n        <span class=\"mt-2 text-sm text-gray-600\" translate\n          >editor.record.form.multilingual.activate</span\n        >\n        <gn-ui-button\n          extraClass=\"w-16 h-8 font-bold\"\n          type=\"gray\"\n          (buttonClick)=\"validateTranslations()\"\n          data-test=\"validateSelection\"\n          >{{ 'editor.record.form.multilingual.validate' | translate }}\n        </gn-ui-button>\n      </div>\n      <ng-container *ngIf=\"supportedLanguages$ | async as languages\">\n        <div\n          class=\"flex flex-col gap-2 w-full px-2\"\n          data-test=\"langAvailable\"\n          [attr.data-test-lang]=\"lang\"\n          *ngFor=\"let lang of languages\"\n        >\n          <gn-ui-button\n            [extraClass]=\"getExtraClass(lang)\"\n            type=\"gray\"\n            (buttonClick)=\"toggleLanguage(lang)\"\n            [disabled]=\"lang === _record.defaultLanguage\"\n            [title]=\"getToggleTitle(lang)\"\n          >\n            <span [class]=\"getIconClass(lang)\"></span>\n            <span class=\"ml-2\">{{ 'language.' + lang | translate }}</span>\n          </gn-ui-button>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div *ngIf=\"!editTranslations && isMultilingual\" class=\"flex flex-col gap-2\">\n    <gn-ui-button\n      *ngFor=\"let recordLang of sortLanguages(recordLanguages); let i = index\"\n      extraClass=\"flex flex-row justify-between bg-white border border-white rounded mb-1 h-[34px] w-full\"\n      [ngClass]=\"{\n        'mt-8': isFirstUnsupported(i),\n        '': true,\n      }\"\n      (buttonClick)=\"switchFormLang(recordLang)\"\n      type=\"outline\"\n      data-test=\"langSwitch\"\n    >\n      <div class=\"flex flex-row gap-2 items-center\">\n        <ng-icon\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-primary mt-1\"\n          name=\"iconoirCheckCircle\"\n        ></ng-icon>\n        <ng-icon\n          *ngIf=\"recordLang !== formLanguage\"\n          class=\"text-gray-800 mt-1\"\n          name=\"iconoirCircle\"\n        ></ng-icon>\n        <span\n          *ngIf=\"recordLang.length === 2\"\n          [class]=\"getIconClass(recordLang) + 'mt-1'\"\n        ></span>\n        <span [ngClass]=\"recordLang === formLanguage ? 'text-black' : ''\">{{\n          isLangSupported(recordLang)\n            ? ('language.' + recordLang | translate)\n            : recordLang.toUpperCase()\n        }}</span>\n      </div>\n      <div class=\"flex flex-row gap-2 items-center\">\n        <span\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-xs text-base\"\n          translate\n          >editor.record.form.multilingual.default</span\n        >\n        <button\n          (click)=\"\n            openActionMenu(recordLang, template); $event.stopPropagation()\n          \"\n          cdkOverlayOrigin\n          #actionMenuButton\n        >\n          <ng-icon class=\"pb-5\" name=\"matMoreHorizOutline\"></ng-icon>\n        </button>\n        <ng-template #template>\n          <gn-ui-action-menu\n            [canDelete]=\"recordLang !== _record.defaultLanguage\"\n            page=\"record\"\n            (delete)=\"confirmDeleteAction(recordLang)\"\n            (closeActionMenu)=\"closeActionMenu()\"\n            (switch)=\"switchDefaultLang(recordLang)\"\n          >\n          </gn-ui-action-menu>\n        </ng-template>\n      </div>\n    </gn-ui-button>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: EditorFacade }, { type: i1$b.MatDialog }, { type: i1$1.TranslateService }, { type: RecordsRepositoryInterface }, { type: i1$8.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { record: [{
                 type: Input
             }], actionMenuButtons: [{
@@ -44483,5 +44627,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AbstractSearchField, ActionMenuComponent, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, ApplicationBannerComponent, AuthService, AutocompleteComponent, AvailableServicesField, AvatarComponent, AvatarServiceInterface, BASEMAP_LAYERS, BadgeComponent, BaseConverter, BaseFileReader, BaseReader, BlockListComponent, ButtonComponent, CLEAR_ERROR, CLEAR_RESULTS, CarouselComponent, CatalogTitleComponent, CellPopinComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ClearError, ClearResults, ColorScaleComponent, ConfirmationDialogComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_GN4_LOGIN_URL, DEFAULT_GN4_LOGOUT_URL, DEFAULT_GN4_SETTINGS_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DISABLE_AUTH, DO_NOT_USE_DEFAULT_BASEMAP, DataService, DataTableComponent, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DatePickerComponent, DateRangeDropdownComponent, DateRangePickerComponent, DateRangeSearchField, DateService, DcatApConverter, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EDITOR_FEATURE_KEY, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EXTERNAL_VIEWER_OPEN_NEW_TAB, EXTERNAL_VIEWER_URL_TEMPLATE, EditableLabelDirective, EditorFacade, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorComponent, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalLinkCardComponent, ExternalViewerButtonComponent, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FILTER_SUMMARY_IGNORE_LIST, FORMATS, FacetBlockComponent, FacetItemComponent, FacetListComponent, FacetsContainerComponent, FavoriteStarComponent, FavoritesService, FeatureCatalogListComponent, FeatureDetailComponent, FeatureEditorModule, FeatureMapModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileInputComponent, FileTranslateLoader, FilesDropDirective, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldDateComponent, FormFieldFileComponent, FormFieldKeywordsComponent, FormFieldLicenseComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentsComponent, FormFieldTopicsComponent, FormFieldWrapperComponent, FullTextSearchField, FuzzySearchComponent, GEONETWORK_UI_TAG_NAME, GEONETWORK_UI_VERSION, GeoDataBadgeComponent, GeoTableViewComponent, GeocodingComponent, GeojsonReader, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GpfApiDlComponent, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, ImageInputComponent, ImageOverlayPreviewComponent, ImportRecordComponent, InlineFilterComponent, InteractiveTableColumnComponent, InteractiveTableComponent, InternalLinkCardComponent, IsSpatialSearchField, Iso191153Converter, Iso19139Converter, KindBadgeComponent, LANGUAGES_LIST, LANGUAGE_NAMES, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LOGIN_URL, LOGOUT_URL, LONLAT_CRS_CODES, LanguageSwitcherComponent, LayersPanelComponent, LicenseSearchField, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_FEATURE_KEY, MAP_VIEW_CONSTRAINTS, METADATA_LANGUAGE, MapContainerComponent, MapFacade, MapLegendComponent, MapStateContainerComponent, MapStyleService, MapUtilsService, MapViewComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataDoiComponent, MetadataInfoComponent, MetadataLinkType, MetadataMapperContext, MetadataQualityComponent, MetadataQualityItemComponent, MetadataQualityPanelComponent, ModalDialogComponent, MultilingualPanelComponent, MultilingualSearchField, MyOrgService, NAMESPACES, NOT_APPLICABLE_CONSTRAINT, NOT_KNOWN_CONSTRAINT, NotificationComponent, NotificationsContainerComponent, NotificationsService, ORGANIZATIONS_STRATEGY, ORGANIZATION_PAGE_URL_TOKEN, ORGANIZATION_URL_TOKEN, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationSearchField, OrganizationsFromGroupsService, OrganizationsFromMetadataService, OrganizationsServiceInterface, OwnerSearchField, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PaginationDotsComponent, PatchResultsAggregations, PlatformServiceInterface, PopoverComponent, PopupAlertComponent, PossibleResourceTypes, PossibleResourceTypesDefinition, PreviousNextButtonsComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_DATASET_URL_TOKEN, RECORD_REUSE_URL_TOKEN, RECORD_SERVICE_URL_TOKEN, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESULTS_LAYOUT_CONFIG, ROUTER_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_ORGANIZATION, ROUTER_ROUTE_REUSE, ROUTER_ROUTE_SEARCH, ROUTER_ROUTE_SERVICE, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordKindField, RecordMetaComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordsMetricsComponent, RecordsService, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResourceTypeLegacyField, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsHitsSearchKindComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, ResultsTableContainerComponent, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SETTINGS_URL, 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, SearchFeatureCatalogComponent, SearchFiltersSummaryComponent, SearchFiltersSummaryItemComponent, SearchInputComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, ServiceCapabilitiesComponent, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SimpleSearchField, SiteTitleComponent, SortByComponent, SortableListComponent, SourceLabelComponent, SourcesService, SpatialExtentComponent, SpinningLoaderComponent, StacViewComponent, StarToggleComponent, StickyHeaderComponent, SupportedTypes, SwitchToggleComponent, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEBUG_CONFIG, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, TranslatedSearchField, TruncatedTextComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UpdateConfigAggregations, UpdateFilters, UrlInputComponent, UserFeedbackItemComponent, UserPreviewComponent, UserSearchField, VECTOR_STYLE_DEFAULT, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, XmlParseError, _reset, allChildrenElement, appConfigWithTranslationFixture, appendChildTree, appendChildren, assertValidXml, blockModelFixture, bytesToMegabytes, canEditRecord, checkFileFormat, clearSelectedFeatures, createChild, createDocument, createElement, createFuzzyFilter, createNestedChild, createNestedElement, currentPage, defaultMapStyleFixture, defaultMapStyleHlFixture, downgradeImage, downsizeImage, draftSaveSuccess, dragPanCondition, dropEmptyTranslations, editorReducer, emptyBlockModelFixture, findChildElement, findChildOrCreate, findChildrenElement, findConverterForDocument, findNestedChildOrCreate, findNestedElement, findNestedElements, findParent, firstChildElement, formatDate, formatUserInfo, getAllKeysValidator, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryBoundingBox, getGeometryFromGeoJSON, getGlobalConfig, getIsMobile, getJsonDataItemsProxy, getLayers, getLinkId, getLinkLabel, getLinkPriority, getMapContext, getMapContextLayerFromConfig, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getNamespace, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getQualityValidators, getResourceType, getReuseType, getRootElement, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSelectedFeatures, getSpatialFilterEnabled, getTemporalRangeUnion, getThemeConfig, handleScrollOnNavigation, hasRecordChangedSinceDraft, hasRecordChangedSinceDraftSuccess, initSearch, initialEditorState, initialMapState, initialState, isConfigLoaded, isDateRange, isFormatInQueryParam, isPublished, itemModelFixture, kindToCodeListValue, loadAppConfig, malformedConfigFixture, mapConfigFixture, mapContact, mapKeywords, mapLogo, mapOrganization, mapReducer, markRecordAsChanged, matchesNoApplicableConstraint, matchesNoKnownConstraint, megabytesToBytes, mimeTypeToFormat, minimalAppConfigFixture, missingMandatoryConfigFixture, mouseWheelZoomCondition, noDuplicateFileName, okAppConfigFixture, openDataset, openRecord, organizationsServiceFactory, parse, parseXmlString, placeholder, prioritizePageScroll, propagateToDocumentOnly, provideGn4, provideI18n, provideRepositoryUrl, readAttribute, readDataset, readDatasetHeaders, readText, reducer$2 as reducer, reducerSearch, removeAllChildren, removeChildren, removeChildrenByName, removeSearchParams, removeWhitespace, renameElements, saveRecord, saveRecordFailure, saveRecordSuccess, selectCanEditRecord, selectCurrentPage, selectEditorConfig, selectEditorState, selectFallback, selectFallbackFields, selectField, selectHasRecordChanged, selectIsPublished, selectRecord, selectRecordChangedSinceSave, selectRecordSaveError, selectRecordSaving, selectRecordSections, selectRecordSource, selectTranslatedField, selectTranslatedValue, setContext, setCurrentPage, setFieldVisibility, setSelectedFeatures, setTextContent, someHabTableItemFixture, sortByFromString, sortByToString, sortByToStrings, stripHtml, stripNamespace, tableItemsFixture, toDate, toLang2, toLang3, totalPages, undoRecordDraft, unrecognizedKeysConfigFixture, updateLanguages, updateRecordField, updateRecordLanguages, wmsLayerFlatten, writeAttribute, wrongLanguageCodeConfigFixture, xmlToString };
+export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AbstractSearchField, ActionMenuComponent, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, ApplicationBannerComponent, AuthService, AutocompleteComponent, AvailableServicesField, AvatarComponent, AvatarServiceInterface, BASEMAP_LAYERS, BadgeComponent, BaseConverter, BaseFileReader, BaseReader, BlockListComponent, ButtonComponent, CLEAR_ERROR, CLEAR_RESULTS, CarouselComponent, CatalogTitleComponent, CellPopinComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ClearError, ClearResults, ColorScaleComponent, ConfirmationDialogComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_GN4_LOGIN_URL, DEFAULT_GN4_LOGOUT_URL, DEFAULT_GN4_SETTINGS_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DISABLE_AUTH, DO_NOT_USE_DEFAULT_BASEMAP, DataService, DataTableComponent, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DatePickerComponent, DateRangeDropdownComponent, DateRangeInputsComponent, DateRangePickerComponent, DateRangeSearchField, DateService, DcatApConverter, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EDITOR_FEATURE_KEY, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EXTERNAL_VIEWER_OPEN_NEW_TAB, EXTERNAL_VIEWER_URL_TEMPLATE, EditableLabelDirective, EditorFacade, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorComponent, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalLinkCardComponent, ExternalViewerButtonComponent, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FILTER_SUMMARY_IGNORE_LIST, FORMATS, FacetBlockComponent, FacetItemComponent, FacetListComponent, FacetsContainerComponent, FavoriteStarComponent, FavoritesService, FeatureCatalogListComponent, FeatureDetailComponent, FeatureEditorModule, FeatureMapModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileInputComponent, FileTranslateLoader, FilesDropDirective, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldDateComponent, FormFieldFileComponent, FormFieldKeywordsComponent, FormFieldLicenseComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentsComponent, FormFieldTopicsComponent, FormFieldWrapperComponent, FullTextSearchField, FuzzySearchComponent, GEONETWORK_UI_TAG_NAME, GEONETWORK_UI_VERSION, GeoDataBadgeComponent, GeoTableViewComponent, GeocodingComponent, GeojsonReader, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GnUiHumanizeDateDirective, GpfApiDlComponent, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, ImageInputComponent, ImageOverlayPreviewComponent, ImportRecordComponent, InlineFilterComponent, InteractiveTableColumnComponent, InteractiveTableComponent, InternalLinkCardComponent, IsSpatialSearchField, Iso191153Converter, Iso19139Converter, KindBadgeComponent, LANGUAGES_LIST, LANGUAGE_NAMES, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LOGIN_URL, LOGOUT_URL, LONLAT_CRS_CODES, LanguageSwitcherComponent, LayersPanelComponent, LicenseSearchField, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_FEATURE_KEY, MAP_VIEW_CONSTRAINTS, METADATA_LANGUAGE, MapContainerComponent, MapFacade, MapLegendComponent, MapStateContainerComponent, MapStyleService, MapUtilsService, MapViewComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataDoiComponent, MetadataInfoComponent, MetadataLinkType, MetadataMapperContext, MetadataQualityComponent, MetadataQualityItemComponent, MetadataQualityPanelComponent, ModalDialogComponent, MultilingualPanelComponent, MultilingualSearchField, MyOrgService, NAMESPACES, NOT_APPLICABLE_CONSTRAINT, NOT_KNOWN_CONSTRAINT, NotificationComponent, NotificationsContainerComponent, NotificationsService, ORGANIZATIONS_STRATEGY, ORGANIZATION_PAGE_URL_TOKEN, ORGANIZATION_URL_TOKEN, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationSearchField, OrganizationsFromGroupsService, OrganizationsFromMetadataService, OrganizationsServiceInterface, OwnerSearchField, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PaginationDotsComponent, PatchResultsAggregations, PlatformServiceInterface, PopoverComponent, PopupAlertComponent, PossibleResourceTypes, PossibleResourceTypesDefinition, PreviousNextButtonsComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_DATASET_URL_TOKEN, RECORD_REUSE_URL_TOKEN, RECORD_SERVICE_URL_TOKEN, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESULTS_LAYOUT_CONFIG, ROUTER_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_ORGANIZATION, ROUTER_ROUTE_REUSE, ROUTER_ROUTE_SEARCH, ROUTER_ROUTE_SERVICE, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordKindField, RecordMetaComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordsMetricsComponent, RecordsService, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResourceTypeLegacyField, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsHitsSearchKindComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, ResultsTableContainerComponent, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SETTINGS_URL, 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, SearchFeatureCatalogComponent, SearchFiltersSummaryComponent, SearchFiltersSummaryItemComponent, SearchInputComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, ServiceCapabilitiesComponent, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SimpleSearchField, SiteTitleComponent, SortByComponent, SortableListComponent, SourceLabelComponent, SourcesService, SpatialExtentComponent, SpinningLoaderComponent, StacItemsResultGridComponent, StacViewComponent, StarToggleComponent, StickyHeaderComponent, SupportedTypes, SwitchToggleComponent, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEBUG_CONFIG, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, TranslatedSearchField, TruncatedTextComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UpdateConfigAggregations, UpdateFilters, UrlInputComponent, UserFeedbackItemComponent, UserPreviewComponent, UserSearchField, VECTOR_STYLE_DEFAULT, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, XmlParseError, _reset, allChildrenElement, appConfigWithTranslationFixture, appendChildTree, appendChildren, assertValidXml, blockModelFixture, bytesToMegabytes, canEditRecord, checkFileFormat, clearSelectedFeatures, createChild, createDocument, createElement, createFuzzyFilter, createNestedChild, createNestedElement, currentPage, defaultMapStyleFixture, defaultMapStyleHlFixture, downgradeImage, downsizeImage, draftSaveSuccess, dragPanCondition, dropEmptyTranslations, editorReducer, emptyBlockModelFixture, findChildElement, findChildOrCreate, findChildrenElement, findConverterForDocument, findNestedChildOrCreate, findNestedElement, findNestedElements, findParent, firstChildElement, formatDate, formatUserInfo, getAllKeysValidator, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryBoundingBox, getGeometryFromGeoJSON, getGlobalConfig, getIsMobile, getJsonDataItemsProxy, getLayers, getLinkId, getLinkLabel, getLinkPriority, getMapContext, getMapContextLayerFromConfig, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getNamespace, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getQualityValidators, getResourceType, getReuseType, getRootElement, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSelectedFeatures, getSpatialFilterEnabled, getTemporalRangeUnion, getThemeConfig, handleScrollOnNavigation, hasRecordChangedSinceDraft, hasRecordChangedSinceDraftSuccess, initSearch, initialEditorState, initialMapState, initialState, isConfigLoaded, isDateRange, isFormatInQueryParam, isPublished, itemModelFixture, kindToCodeListValue, loadAppConfig, malformedConfigFixture, mapConfigFixture, mapContact, mapKeywords, mapLogo, mapOrganization, mapReducer, markRecordAsChanged, matchesNoApplicableConstraint, matchesNoKnownConstraint, megabytesToBytes, mimeTypeToFormat, minimalAppConfigFixture, missingMandatoryConfigFixture, mouseWheelZoomCondition, noDuplicateFileName, okAppConfigFixture, openDataset, openRecord, organizationsServiceFactory, parse, parseXmlString, placeholder, prioritizePageScroll, propagateToDocumentOnly, provideGn4, provideI18n, provideRepositoryUrl, readAttribute, readDataset, readDatasetHeaders, readText, reducer$2 as reducer, reducerSearch, removeAllChildren, removeChildren, removeChildrenByName, removeSearchParams, removeWhitespace, renameElements, saveRecord, saveRecordFailure, saveRecordSuccess, selectCanEditRecord, selectCurrentPage, selectEditorConfig, selectEditorState, selectFallback, selectFallbackFields, selectField, selectHasRecordChanged, selectIsPublished, selectRecord, selectRecordChangedSinceSave, selectRecordSaveError, selectRecordSaving, selectRecordSections, selectRecordSource, selectTranslatedField, selectTranslatedValue, setContext, setCurrentPage, setFieldVisibility, setSelectedFeatures, setTextContent, someHabTableItemFixture, sortByFromString, sortByToString, sortByToStrings, stripHtml, stripNamespace, tableItemsFixture, toDate, toLang2, toLang3, totalPages, undoRecordDraft, unrecognizedKeysConfigFixture, updateLanguages, updateRecordField, updateRecordLanguages, wmsLayerFlatten, writeAttribute, wrongLanguageCodeConfigFixture, xmlToString };
 //# sourceMappingURL=geonetwork-ui.mjs.map