npm - geonetwork-ui - Versions diffs - 2.4.0-dev.aa5f997e → 2.4.0-dev.caf9e4e4 - Mend

geonetwork-ui 2.4.0-dev.aa5f997e → 2.4.0-dev.caf9e4e4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (85) hide show

package/fesm2022/geonetwork-ui.mjs CHANGED Viewed

@@ -1,4 +1,7 @@
 import { parseXml, XmlDocument, XmlElement, XmlText } from '@rgrove/parse-xml';
+import GML32 from 'ol/format/GML32';
+import GeoJSON from 'ol/format/GeoJSON';
+import { parse as parse$1 } from 'ol/xml';
 import format from 'date-fns/format';
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostListener, EventEmitter, Output, TemplateRef, ElementRef, ViewChildren, ViewContainerRef, HostBinding, ContentChild, ContentChildren, Host, Pipe, inject } from '@angular/core';
@@ -23,7 +26,6 @@ import 'ol/Feature';
 import { Circle, Fill, Stroke, Style as Style$1 } from 'ol/style';
 import Style, { createDefaultStyle } from 'ol/style/Style';
 import { extend, isEmpty } from 'ol/extent';
-import GeoJSON from 'ol/format/GeoJSON';
 import { transformExtent, fromLonLat } from 'ol/proj';
 import ImageWMS from 'ol/source/ImageWMS';
 import TileWMS from 'ol/source/TileWMS';
@@ -48,13 +50,13 @@ import { MVT, WFS, GeoJSON as GeoJSON$1 } from 'ol/format';
 import VectorTileLayer from 'ol/layer/VectorTile';
 import OGCMapTile from 'ol/source/OGCMapTile.js';
 import ImageLayer from 'ol/layer/Image';
-import * as i2$6 from '@angular/material/tabs';
+import * as i2$5 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i2$2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, UntypedFormControl, FormArray, FormControl } from '@angular/forms';
 import * as i2$1 from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i3$1 from 'ngx-dropzone';
+import * as i3$2 from 'ngx-dropzone';
 import { NgxDropzoneModule } from 'ngx-dropzone';
 import * as i5 from 'ngx-chips';
 import { TagInputModule } from 'ngx-chips';
@@ -65,9 +67,9 @@ import * as i3 from '@angular/material/core';
 import { MatNativeDateModule, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import * as i1$5 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2$3 from '@angular/material/tooltip';
+import * as i3$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2$4 from '@angular/material/datepicker';
+import * as i2$3 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$6 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
@@ -82,7 +84,7 @@ import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/c
 import EmblaCarousel from 'embla-carousel';
 import { formatDistance } from 'date-fns';
 import { enUS, sk, pt as pt$1, nl as nl$1, it as it$1, es as es$1, de as de$1, fr as fr$1 } from 'date-fns/locale';
-import * as i2$5 from '@angular/material/menu';
+import * as i2$4 from '@angular/material/menu';
 import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
 import * as i1$8 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule, Actions } from '@ngrx/effects';
@@ -93,17 +95,17 @@ import { trigger, transition, animate, keyframes, style } from '@angular/animati
 import { Chart, BarController, BarElement, CategoryScale, LinearScale, LineController, LineElement, PointElement, PieController, ArcElement, ScatterController, Tooltip, Colors, Legend } from 'chart.js';
 import * as i4 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import * as i2$7 from '@angular/material/sort';
+import * as i2$6 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i1$9 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i3$2 from 'ng-table-virtual-scroll';
+import * as i3$3 from 'ng-table-virtual-scroll';
 import { TableVirtualScrollDataSource, TableVirtualScrollModule } from 'ng-table-virtual-scroll';
 import * as Papa from 'papaparse';
 import parseDate from 'date-fns/parse';
 import parseIsoDate from 'date-fns/parseISO';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
-import * as i3$3 from '@ngrx/router-store';
+import * as i3$4 from '@ngrx/router-store';
 import { getRouterSelectors, routerReducer, StoreRouterConnectingModule, FullRouterStateSerializer } from '@ngrx/router-store';
 import { navigation } from '@ngrx/router-store/data-persistence';
@@ -271,6 +273,9 @@ function allChildrenElement(element) {
         ...element.children.filter((el) => el instanceof XmlElement),
     ];
 }
+function firstChildElement(element) {
+    return allChildrenElement(element)[0] ?? null;
+}
 /**
  * Will return all matching elements nested according to the given
  * names (similar to a path), starting form the input element;
@@ -429,10 +434,12 @@ function getTreeRoot(element) {
 }
 // stays on the parent element
 // if the given elements are part of a subtree, will add the root of subtree
+// will filter out falsy elements
 function appendChildren(...childrenFns) {
     return (element) => {
         if (!element)
             return null;
+        childrenFns = childrenFns.filter((fn) => fn);
         element.children.push(...childrenFns.map((fn) => fn()).map(getTreeRoot));
         element.children.forEach((el) => (el.parent = element));
         return element;
@@ -561,6 +568,33 @@ function matchMimeType(format) {
     return format || null;
 }
+function readGeometry(el) {
+    const xmlDoc = createDocument(el);
+    xmlDoc.root.attributes['xmlns'] = 'http://www.opengis.net/gml/3.2';
+    const gmlString = xmlToString(xmlDoc);
+    const doc = parse$1(gmlString);
+    // we need an intermediate node to be able to parse the GML
+    const node = document.createElement('pre');
+    node.appendChild(doc.documentElement);
+    const gml32Format = new GML32();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const geometry = gml32Format.readGeometryFromNode(node);
+    const geojsonFormat = new GeoJSON();
+    return geojsonFormat.writeGeometryObject(geometry);
+}
+function writeGeometry(geometryObject) {
+    const geojsonFormat = new GeoJSON();
+    const geometry = geojsonFormat.readGeometry(geometryObject);
+    const gml32Format = new GML32();
+    const node = gml32Format.writeGeometryNode(geometry);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const element = node.firstElementChild;
+    const gmlString = new XMLSerializer().serializeToString(element);
+    return getRootElement(parseXmlString(gmlString));
+}
 /**
  * Parts are [firstName, lastName]
  * Second part will be null if no separation could be done
@@ -729,6 +763,9 @@ function extractCharacterString() {
 function extractDateTime() {
     return pipe(fallback(findChildElement('gco:DateTime', false), findChildElement('gco:Date', false)), readText(), map((dateStr) => (dateStr ? new Date(dateStr) : null)));
 }
+function extractDecimal() {
+    return pipe(findChildElement('gco:Decimal', false), readText(), map((numberStr) => (numberStr ? Number(numberStr) : null)));
+}
 function extractUrl() {
     const getUrl = pipe(findChildElement('gmd:URL', false), readText());
     const getCharacterString = pipe(findChildElement('gco:CharacterString', false), readText());
@@ -1086,6 +1123,30 @@ function readTemporalExtents(rootEl) {
         }
     }))(rootEl);
 }
+function readSpatialExtents(rootEl) {
+    const extractGeometry = (rootEl) => {
+        if (!rootEl)
+            return null;
+        return pipe(findChildElement('gmd:polygon', false), firstChildElement, map((el) => readGeometry(el)))(rootEl);
+    };
+    const extractBBox = (rootEl) => {
+        if (!rootEl)
+            return null;
+        return pipe(combine(pipe(findChildElement('gmd:westBoundLongitude'), extractDecimal()), pipe(findChildElement('gmd:southBoundLatitude'), extractDecimal()), pipe(findChildElement('gmd:eastBoundLongitude'), extractDecimal()), pipe(findChildElement('gmd:northBoundLatitude'), extractDecimal())))(rootEl);
+    };
+    const extractDescription = (rootEl) => {
+        if (!rootEl)
+            return null;
+        return pipe(findNestedElement('gmd:geographicIdentifier', 'gmd:MD_Identifier', 'gmd:code'), extractCharacterString())(rootEl);
+    };
+    return pipe(findIdentification(), findNestedElements('gmd:extent', 'gmd:EX_Extent', 'gmd:geographicElement'), mapArray(combine(pipe(findChildElement('gmd:EX_BoundingPolygon'), extractGeometry), pipe(findChildElement('gmd:EX_GeographicBoundingBox'), extractBBox), pipe(findChildElement('gmd:EX_GeographicDescription'), extractDescription))), mapArray(([geometry, bbox, description]) => {
+        return {
+            ...(geometry && { geometry }),
+            ...(bbox && { bbox }),
+            ...(description && { description }),
+        };
+    }))(rootEl);
+}
 function writeCharacterString(text) {
     return tap(pipe(findChildOrCreate('gco:CharacterString'), setTextContent(text)));
@@ -1102,6 +1163,9 @@ function writeDateTime(date) {
 function writeDate(date) {
     return tap(pipe(findChildOrCreate('gco:Date'), setTextContent(format(date, 'yyyy-MM-dd'))));
 }
+function writeDecimal(decimal) {
+    return tap(pipe(findChildOrCreate('gco:Decimal'), setTextContent(decimal.toString())));
+}
 function getProgressCode(status) {
     switch (status) {
         case 'completed':
@@ -1495,6 +1559,24 @@ function writeTemporalExtents(record, rootEl) {
             ? setTextContent(format(extent.start, 'yyyy-MM-dd'))
             : addAttribute('indeterminatePosition', 'unknown'))))))))))(rootEl);
 }
+function writeSpatialExtents(record, rootEl) {
+    const appendBoundingPolygon = (geometry) => {
+        if (!geometry)
+            return null;
+        return pipe(createElement('gmd:EX_BoundingPolygon'), appendChildren(pipe(createElement('gmd:polygon'), appendChildren(() => writeGeometry(geometry)))));
+    };
+    const appendGeographicBoundingBox = (bbox) => {
+        if (!bbox)
+            return null;
+        return pipe(createElement('gmd:EX_GeographicBoundingBox'), appendChildren(pipe(createElement('gmd:westBoundLongitude'), writeDecimal(bbox[0])), pipe(createElement('gmd:eastBoundLongitude'), writeDecimal(bbox[2])), pipe(createElement('gmd:southBoundLatitude'), writeDecimal(bbox[1])), pipe(createElement('gmd:northBoundLatitude'), writeDecimal(bbox[3]))));
+    };
+    const appendGeographicDescription = (description) => {
+        if (!description)
+            return null;
+        return pipe(createElement('gmd:EX_GeographicDescription'), createChild('gmd:geographicIdentifier'), createChild('gmd:MD_Identifier'), createChild('gmd:code'), writeCharacterString(description));
+    };
+    pipe(findOrCreateIdentification(), findNestedChildOrCreate('gmd:extent', 'gmd:EX_Extent'), removeChildrenByName('gmd:geographicElement'), appendChildren(...record.spatialExtents.map((extent) => pipe(createElement('gmd:geographicElement'), appendChildren(appendBoundingPolygon(extent.geometry), appendGeographicBoundingBox(extent.bbox), appendGeographicDescription(extent.description))))))(rootEl);
+}
 class Iso19139Converter extends BaseConverter {
     constructor() {
@@ -1527,8 +1609,8 @@ class Iso19139Converter extends BaseConverter {
             distributions: readDistributions$1,
             onlineResources: readOnlineResources,
             temporalExtents: readTemporalExtents,
+            spatialExtents: readSpatialExtents,
             // TODO
-            spatialExtents: () => [],
             extras: () => undefined,
             landingPage: () => undefined,
             languages: () => [],
@@ -1561,8 +1643,8 @@ class Iso19139Converter extends BaseConverter {
             distributions: writeDistributions$1,
             onlineResources: writeOnlineResources,
             temporalExtents: writeTemporalExtents,
+            spatialExtents: () => writeSpatialExtents,
             // TODO
-            spatialExtents: () => undefined,
             extras: () => undefined,
             landingPage: () => undefined,
             languages: () => undefined,
@@ -17474,18 +17556,16 @@ var de = {
 	"editor.record.form.bottomButtons.comeBackLater": "",
 	"editor.record.form.bottomButtons.next": "",
 	"editor.record.form.bottomButtons.previous": "",
-	"editor.record.form.field.abstract": "",
+	"editor.record.form.field.abstract": "Kurzbeschreibung",
 	"editor.record.form.field.keywords": "Schlagwörter",
 	"editor.record.form.field.license": "Lizenz",
-	"editor.record.form.field.recordUpdated": "",
-	"editor.record.form.field.resourceUpdated": "",
-	"editor.record.form.field.temporalExtents": "",
-	"editor.record.form.field.title": "",
-	"editor.record.form.field.uniqueIdentifier": "",
-	"editor.record.form.field.updateFrequency": "",
-	"editor.record.form.abstract": "Kurzbeschreibung",
-	"editor.record.form.keywords": "Schlüsselwörter",
-	"editor.record.form.license": "Lizenz",
+	"editor.record.form.field.overviews": "",
+	"editor.record.form.field.recordUpdated": "Datensatz zuletzt aktualisiert",
+	"editor.record.form.field.resourceUpdated": "Letztes Aktualisierungsdatum",
+	"editor.record.form.field.temporalExtents": "Zeitlicher Umfang",
+	"editor.record.form.field.title": "Metadaten-Titel",
+	"editor.record.form.field.uniqueIdentifier": "Eindeutige Kennung (ID)",
+	"editor.record.form.field.updateFrequency": "Aktualisierungshäufigkeit",
 	"editor.record.form.license.cc-by": "Creative Commons CC-BY",
 	"editor.record.form.license.cc-by-sa": "Creative Commons CC-BY-SA",
 	"editor.record.form.license.cc-zero": "Creative Commons CC-0",
@@ -17511,16 +17591,10 @@ var de = {
 	"editor.record.form.section.dataPointOfContact.label": "",
 	"editor.record.form.section.geographicalCoverage.label": "",
 	"editor.record.form.section.useAndAccessConditions.label": "",
-	"editor.record.form.metadata.title": "Metadaten-Titel",
-	"editor.record.form.record.updated": "Datensatz zuletzt aktualisiert",
-	"editor.record.form.resourceUpdated": "Letztes Aktualisierungsdatum",
-	"editor.record.form.temporalExtents": "Zeitlicher Umfang",
 	"editor.record.form.temporalExtents.addDate": "Zeitpunkt",
 	"editor.record.form.temporalExtents.addRange": "Zeitraum",
 	"editor.record.form.temporalExtents.date": "Datum",
 	"editor.record.form.temporalExtents.range": "Datumsbereich",
-	"editor.record.form.unique.identifier": "Eindeutige Kennung (ID)",
-	"editor.record.form.updateFrequency": "Aktualisierungshäufigkeit",
 	"editor.record.form.updateFrequency.planned": "Die Daten sollten regelmäßig aktualisiert werden.",
 	"editor.record.loadError.body": "Der Datensatz konnte nicht geladen werden:",
 	"editor.record.loadError.closeMessage": "Verstanden",
@@ -17942,15 +18016,13 @@ var en = {
 	"editor.record.form.field.abstract": "Abstract",
 	"editor.record.form.field.keywords": "Keywords",
 	"editor.record.form.field.license": "License",
+	"editor.record.form.field.overviews": "Overviews",
 	"editor.record.form.field.recordUpdated": "Record Updated",
 	"editor.record.form.field.resourceUpdated": "Resource Updated",
 	"editor.record.form.field.temporalExtents": "Temporal extents",
 	"editor.record.form.field.title": "Metadata title",
 	"editor.record.form.field.uniqueIdentifier": "Unique identifier",
 	"editor.record.form.field.updateFrequency": "Update frequency",
-	"editor.record.form.abstract": "Abstract",
-	"editor.record.form.keywords": "Keywords",
-	"editor.record.form.license": "License",
 	"editor.record.form.license.cc-by": "Creative Commons CC-BY",
 	"editor.record.form.license.cc-by-sa": "Creative Commons CC-BY-SA",
 	"editor.record.form.license.cc-zero": "Creative Commons CC-0",
@@ -17976,16 +18048,10 @@ var en = {
 	"editor.record.form.section.dataPointOfContact.label": "Data point of contact",
 	"editor.record.form.section.geographicalCoverage.label": "Geographical coverage",
 	"editor.record.form.section.useAndAccessConditions.label": "Use and access conditions",
-	"editor.record.form.metadata.title": "Metadata title",
-	"editor.record.form.record.updated": "Record updated",
-	"editor.record.form.resourceUpdated": "Last update date",
-	"editor.record.form.temporalExtents": "Temporal extent",
 	"editor.record.form.temporalExtents.addDate": "Time instant",
 	"editor.record.form.temporalExtents.addRange": "Time period",
 	"editor.record.form.temporalExtents.date": "Date",
 	"editor.record.form.temporalExtents.range": "Date range",
-	"editor.record.form.unique.identifier": "Unique identifier",
-	"editor.record.form.updateFrequency": "Update frequency",
 	"editor.record.form.updateFrequency.planned": "The data should be updated regularly.",
 	"editor.record.loadError.body": "The record could not be loaded:",
 	"editor.record.loadError.closeMessage": "Understood",
@@ -18407,15 +18473,13 @@ var es = {
 	"editor.record.form.field.abstract": "",
 	"editor.record.form.field.keywords": "",
 	"editor.record.form.field.license": "",
+	"editor.record.form.field.overviews": "",
 	"editor.record.form.field.recordUpdated": "",
 	"editor.record.form.field.resourceUpdated": "",
 	"editor.record.form.field.temporalExtents": "",
 	"editor.record.form.field.title": "",
 	"editor.record.form.field.uniqueIdentifier": "",
 	"editor.record.form.field.updateFrequency": "",
-	"editor.record.form.abstract": "",
-	"editor.record.form.keywords": "",
-	"editor.record.form.license": "",
 	"editor.record.form.license.cc-by": "",
 	"editor.record.form.license.cc-by-sa": "",
 	"editor.record.form.license.cc-zero": "",
@@ -18441,16 +18505,10 @@ var es = {
 	"editor.record.form.section.dataPointOfContact.label": "",
 	"editor.record.form.section.geographicalCoverage.label": "",
 	"editor.record.form.section.useAndAccessConditions.label": "",
-	"editor.record.form.metadata.title": "",
-	"editor.record.form.record.updated": "",
-	"editor.record.form.resourceUpdated": "",
-	"editor.record.form.temporalExtents": "",
 	"editor.record.form.temporalExtents.addDate": "",
 	"editor.record.form.temporalExtents.addRange": "",
 	"editor.record.form.temporalExtents.date": "",
 	"editor.record.form.temporalExtents.range": "",
-	"editor.record.form.unique.identifier": "",
-	"editor.record.form.updateFrequency": "",
 	"editor.record.form.updateFrequency.planned": "",
 	"editor.record.loadError.body": "",
 	"editor.record.loadError.closeMessage": "",
@@ -18872,15 +18930,13 @@ var fr = {
 	"editor.record.form.field.abstract": "Résumé",
 	"editor.record.form.field.keywords": "Mots-clés",
 	"editor.record.form.field.license": "Licence",
+	"editor.record.form.field.overviews": "Aperçus",
 	"editor.record.form.field.recordUpdated": "Date de dernière révision",
 	"editor.record.form.field.resourceUpdated": "Date de dernière révision",
 	"editor.record.form.field.temporalExtents": "Étendue temporelle",
 	"editor.record.form.field.title": "Titre",
 	"editor.record.form.field.uniqueIdentifier": "Identifiant unique",
 	"editor.record.form.field.updateFrequency": "Fréquence de mise à jour",
-	"editor.record.form.abstract": "",
-	"editor.record.form.keywords": "",
-	"editor.record.form.license": "Licence",
 	"editor.record.form.license.cc-by": "",
 	"editor.record.form.license.cc-by-sa": "",
 	"editor.record.form.license.cc-zero": "",
@@ -18906,16 +18962,10 @@ var fr = {
 	"editor.record.form.section.dataPointOfContact.label": "Point de contact de la metadonee",
 	"editor.record.form.section.geographicalCoverage.label": "Couverture geographique",
 	"editor.record.form.section.useAndAccessConditions.label": "Conditions d'acces et usage",
-	"editor.record.form.metadata.title": "",
-	"editor.record.form.record.updated": "",
-	"editor.record.form.resourceUpdated": "Date de dernière révision",
-	"editor.record.form.temporalExtents": "Étendue temporelle",
 	"editor.record.form.temporalExtents.addDate": "Date déterminée",
 	"editor.record.form.temporalExtents.addRange": "Période de temps",
 	"editor.record.form.temporalExtents.date": "Date concernée",
 	"editor.record.form.temporalExtents.range": "Période concernée",
-	"editor.record.form.unique.identifier": "",
-	"editor.record.form.updateFrequency": "Fréquence de mise à jour",
 	"editor.record.form.updateFrequency.planned": "Ces données doivent être mise à jour régulièrement.",
 	"editor.record.loadError.body": "",
 	"editor.record.loadError.closeMessage": "",
@@ -19337,15 +19387,13 @@ var it = {
 	"editor.record.form.field.abstract": "",
 	"editor.record.form.field.keywords": "",
 	"editor.record.form.field.license": "Licenza",
+	"editor.record.form.field.overviews": "",
 	"editor.record.form.field.recordUpdated": "",
 	"editor.record.form.field.resourceUpdated": "",
 	"editor.record.form.field.temporalExtents": "",
 	"editor.record.form.field.title": "",
 	"editor.record.form.field.uniqueIdentifier": "",
 	"editor.record.form.field.updateFrequency": "",
-	"editor.record.form.abstract": "",
-	"editor.record.form.keywords": "",
-	"editor.record.form.license": "Licenza",
 	"editor.record.form.license.cc-by": "",
 	"editor.record.form.license.cc-by-sa": "",
 	"editor.record.form.license.cc-zero": "",
@@ -19371,16 +19419,10 @@ var it = {
 	"editor.record.form.section.dataPointOfContact.label": "",
 	"editor.record.form.section.geographicalCoverage.label": "",
 	"editor.record.form.section.useAndAccessConditions.label": "",
-	"editor.record.form.metadata.title": "",
-	"editor.record.form.record.updated": "",
-	"editor.record.form.resourceUpdated": "",
-	"editor.record.form.temporalExtents": "",
 	"editor.record.form.temporalExtents.addDate": "",
 	"editor.record.form.temporalExtents.addRange": "",
 	"editor.record.form.temporalExtents.date": "",
 	"editor.record.form.temporalExtents.range": "",
-	"editor.record.form.unique.identifier": "",
-	"editor.record.form.updateFrequency": "",
 	"editor.record.form.updateFrequency.planned": "",
 	"editor.record.loadError.body": "",
 	"editor.record.loadError.closeMessage": "",
@@ -19802,15 +19844,13 @@ var nl = {
 	"editor.record.form.field.abstract": "",
 	"editor.record.form.field.keywords": "",
 	"editor.record.form.field.license": "",
+	"editor.record.form.field.overviews": "",
 	"editor.record.form.field.recordUpdated": "",
 	"editor.record.form.field.resourceUpdated": "",
 	"editor.record.form.field.temporalExtents": "",
 	"editor.record.form.field.title": "",
 	"editor.record.form.field.uniqueIdentifier": "",
 	"editor.record.form.field.updateFrequency": "",
-	"editor.record.form.abstract": "",
-	"editor.record.form.keywords": "",
-	"editor.record.form.license": "",
 	"editor.record.form.license.cc-by": "",
 	"editor.record.form.license.cc-by-sa": "",
 	"editor.record.form.license.cc-zero": "",
@@ -19836,16 +19876,10 @@ var nl = {
 	"editor.record.form.section.dataPointOfContact.label": "",
 	"editor.record.form.section.geographicalCoverage.label": "",
 	"editor.record.form.section.useAndAccessConditions.label": "",
-	"editor.record.form.metadata.title": "",
-	"editor.record.form.record.updated": "",
-	"editor.record.form.resourceUpdated": "",
-	"editor.record.form.temporalExtents": "",
 	"editor.record.form.temporalExtents.addDate": "",
 	"editor.record.form.temporalExtents.addRange": "",
 	"editor.record.form.temporalExtents.date": "",
 	"editor.record.form.temporalExtents.range": "",
-	"editor.record.form.unique.identifier": "",
-	"editor.record.form.updateFrequency": "",
 	"editor.record.form.updateFrequency.planned": "",
 	"editor.record.loadError.body": "",
 	"editor.record.loadError.closeMessage": "",
@@ -20267,15 +20301,13 @@ var pt = {
 	"editor.record.form.field.abstract": "",
 	"editor.record.form.field.keywords": "",
 	"editor.record.form.field.license": "",
+	"editor.record.form.field.overviews": "",
 	"editor.record.form.field.recordUpdated": "",
 	"editor.record.form.field.resourceUpdated": "",
 	"editor.record.form.field.temporalExtents": "",
 	"editor.record.form.field.title": "",
 	"editor.record.form.field.uniqueIdentifier": "",
 	"editor.record.form.field.updateFrequency": "",
-	"editor.record.form.abstract": "",
-	"editor.record.form.keywords": "",
-	"editor.record.form.license": "",
 	"editor.record.form.license.cc-by": "",
 	"editor.record.form.license.cc-by-sa": "",
 	"editor.record.form.license.cc-zero": "",
@@ -20301,16 +20333,10 @@ var pt = {
 	"editor.record.form.section.dataPointOfContact.label": "",
 	"editor.record.form.section.geographicalCoverage.label": "",
 	"editor.record.form.section.useAndAccessConditions.label": "",
-	"editor.record.form.metadata.title": "",
-	"editor.record.form.record.updated": "",
-	"editor.record.form.resourceUpdated": "",
-	"editor.record.form.temporalExtents": "",
 	"editor.record.form.temporalExtents.addDate": "",
 	"editor.record.form.temporalExtents.addRange": "",
 	"editor.record.form.temporalExtents.date": "",
 	"editor.record.form.temporalExtents.range": "",
-	"editor.record.form.unique.identifier": "",
-	"editor.record.form.updateFrequency": "",
 	"editor.record.form.updateFrequency.planned": "",
 	"editor.record.loadError.body": "",
 	"editor.record.loadError.closeMessage": "",
@@ -23320,10 +23346,9 @@ class MapUtilsService {
         if (!('spatialExtents' in record) || record.spatialExtents.length === 0) {
             return null;
         }
-        // transform an array of geojson geometries into a bbox
+        // extend all the spatial extents bbox into an including bbox
         const totalExtent = record.spatialExtents.reduce((prev, curr) => {
-            const geom = GEOJSON.readGeometry(curr.geometry);
-            return extend(prev, geom.getExtent());
+            return extend(prev, curr.bbox);
         }, [Infinity, Infinity, -Infinity, -Infinity]);
         return transformExtent(totalExtent, 'EPSG:4326', 'EPSG:3857');
     }
@@ -25377,7 +25402,7 @@ class CopyTextButtonComponent {
         event.target.blur();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CopyTextButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CopyTextButtonComponent, 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    mat-raised-button\n    [matTooltip]=\"tooltipText\"\n    matTooltipPosition=\"above\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n      >content_copy</mat-icon\n    >\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CopyTextButtonComponent, 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    mat-raised-button\n    [matTooltip]=\"tooltipText\"\n    matTooltipPosition=\"above\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n      >content_copy</mat-icon\n    >\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CopyTextButtonComponent, decorators: [{
             type: Component,
@@ -25397,7 +25422,7 @@ class DatePickerComponent {
         this.dateChange = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DatePickerComponent, isStandalone: true, selector: "gn-ui-date-picker", inputs: { date: "date" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div\n  class=\"flex items-center justify-between rounded-lg border border-gray-300 bg-white\"\n>\n  <input\n    class=\"pl-3\"\n    [matDatepicker]=\"picker\"\n    [value]=\"date\"\n    (dateChange)=\"dateChange.emit($event.value)\"\n  />\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n</div>\n<mat-datepicker #picker></mat-datepicker>\n", styles: ["mat-datepicker-toggle{@apply text-primary;}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DatePickerComponent, isStandalone: true, selector: "gn-ui-date-picker", inputs: { date: "date" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div\n  class=\"flex items-center justify-between rounded-lg border border-gray-300 bg-white\"\n>\n  <input\n    class=\"pl-3\"\n    [matDatepicker]=\"picker\"\n    [value]=\"date\"\n    (dateChange)=\"dateChange.emit($event.value)\"\n  />\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n</div>\n<mat-datepicker #picker></mat-datepicker>\n", styles: ["mat-datepicker-toggle{@apply text-primary;}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -25414,7 +25439,7 @@ class DateRangePickerComponent {
         this.endDateChange = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateRangePickerComponent, isStandalone: true, selector: "gn-ui-date-range-picker", inputs: { startDate: "startDate", endDate: "endDate" }, outputs: { startDateChange: "startDateChange", endDateChange: "endDateChange" }, ngImport: i0, template: "<div\n  class=\"flex items-center justify-between rounded-lg border border-gray-300 bg-white\"\n>\n  <div class=\"pl-3 flex justify-center\">\n    <mat-date-range-input [rangePicker]=\"picker\" class=\"w-full\">\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  </div>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon>calendar_today</mat-icon>\n  </mat-datepicker-toggle>\n</div>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: ["mat-datepicker-toggle{@apply text-primary;}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateRangePickerComponent, isStandalone: true, selector: "gn-ui-date-range-picker", inputs: { startDate: "startDate", endDate: "endDate" }, outputs: { startDateChange: "startDateChange", endDateChange: "endDateChange" }, ngImport: i0, template: "<div\n  class=\"flex items-center justify-between rounded-lg border border-gray-300 bg-white\"\n>\n  <div class=\"pl-3 flex justify-center\">\n    <mat-date-range-input [rangePicker]=\"picker\" class=\"w-full\">\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  </div>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon>calendar_today</mat-icon>\n  </mat-datepicker-toggle>\n</div>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: ["mat-datepicker-toggle{@apply text-primary;}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$3.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$3.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -25446,7 +25471,7 @@ class DragAndDropFileInputComponent {
         this.fileChange.emit(this.selectedFile);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragAndDropFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DragAndDropFileInputComponent, selector: "gn-ui-drag-and-drop-file-input", inputs: { placeholder: "placeholder", accept: "accept" }, outputs: { fileChange: "fileChange" }, ngImport: i0, template: "<div class=\"flex h-full\">\n  <ngx-dropzone\n    class=\"flex-1\"\n    multiple=\"false\"\n    (change)=\"selectFile($event)\"\n    [accept]=\"accept\"\n  >\n    <div *ngIf=\"!fileName\" class=\"text-gray-900 pl-2 py-2\" translate=\"\">\n      {{ placeholder }}\n    </div>\n\n    <div *ngIf=\"fileName\" class=\"text-gray-900 pl-2 py-2\">{{ fileName }}</div>\n  </ngx-dropzone>\n</div>\n", styles: ["ngx-dropzone{height:auto;border:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i3$1.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "processDirectoryDrop", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DragAndDropFileInputComponent, selector: "gn-ui-drag-and-drop-file-input", inputs: { placeholder: "placeholder", accept: "accept" }, outputs: { fileChange: "fileChange" }, ngImport: i0, template: "<div class=\"flex h-full\">\n  <ngx-dropzone\n    class=\"flex-1\"\n    multiple=\"false\"\n    (change)=\"selectFile($event)\"\n    [accept]=\"accept\"\n  >\n    <div *ngIf=\"!fileName\" class=\"text-gray-900 pl-2 py-2\" translate=\"\">\n      {{ placeholder }}\n    </div>\n\n    <div *ngIf=\"fileName\" class=\"text-gray-900 pl-2 py-2\">{{ fileName }}</div>\n  </ngx-dropzone>\n</div>\n", styles: ["ngx-dropzone{height:auto;border:none}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i3$2.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "processDirectoryDrop", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragAndDropFileInputComponent, decorators: [{
             type: Component,
@@ -26225,7 +26250,8 @@ class ImageInputComponent {
                         const file = new File([blob], name);
                         this.fileChange.emit(file);
                     },
-                    error: () => {
+                    error: (error) => {
+                        console.error(error);
                         this.downloadError = true;
                         this.cd.markForCheck();
                         this.urlChange.emit(this.urlInputValue);
@@ -26261,6 +26287,7 @@ class ImageInputComponent {
         }
     }
     handleDelete() {
+        this.formControl.markAsDirty();
         this.delete.emit();
     }
     toggleAltTextInput() {
@@ -26283,7 +26310,7 @@ class ImageInputComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageInputComponent, deps: [{ token: i1.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ImageInputComponent, isStandalone: true, selector: "gn-ui-image-input", inputs: { maxSizeMB: "maxSizeMB", previewUrl: "previewUrl", altText: "altText", uploadProgress: "uploadProgress", uploadError: "uploadError" }, outputs: { fileChange: "fileChange", urlChange: "urlChange", uploadCancel: "uploadCancel", delete: "delete", altTextChange: "altTextChange" }, ngImport: i0, template: "<ng-container *ngIf=\"previewUrl; then withImage; else withoutImage\">\n</ng-container>\n\n<ng-template #withImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <div class=\"flex-1 group relative\">\n      <img\n        class=\"w-full h-full object-cover border-2 border-gray-300 rounded-lg\"\n        [alt]=\"altText\"\n        loading=\"lazy\"\n        [src]=\"previewUrl\"\n      />\n      <gn-ui-button\n        [extraClass]=\"\n          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'\n        \"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">delete</mat-icon>\n      </gn-ui-button>\n    </div>\n    <input\n      *ngIf=\"showAltTextInput\"\n      type=\"text\"\n      class=\"py-3 px-2 border-2 border-gray-300 rounded-lg text-sm font-medium\"\n      [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n      [value]=\"altText\"\n      (change)=\"handleAltTextChange($event)\"\n    />\n    <div class=\"flex flex-row gap-2\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">delete</mat-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      <gn-ui-button\n        *ngIf=\"!showAltTextInput\"\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"toggleAltTextInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">add</mat-icon>\n        {{ 'input.image.displayAltTextInput' | translate }}\n      </gn-ui-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #withoutImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      <div class=\"w-14 h-14 rounded-md bg-gray-200 grid\">\n        <mat-icon\n          *ngIf=\"!dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >image</mat-icon\n        >\n        <mat-icon\n          *ngIf=\"dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >add_box</mat-icon\n        >\n        <div *ngIf=\"uploadProgress\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            [mode]=\"'determinate'\"\n            [value]=\"uploadProgress\"\n          ></mat-progress-spinner>\n          <span\n            class=\"text-sm font-medium relative inline-block width-[30px] bottom-[40px] left-[15px]\"\n          >\n            {{ uploadProgress }}%\n          </span>\n        </div>\n        <mat-icon\n          *ngIf=\"uploadError\"\n          class=\"material-symbols-outlined place-self-center text-rose-500\"\n          >broken_image</mat-icon\n        >\n      </div>\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\">{{ getPrimaryText() | translate }}</p>\n        <p\n          class=\"text-sm\"\n          [class]=\"\n            uploadProgress || uploadError\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick()\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"showUrlInput || uploadProgress || uploadError\"\n      />\n    </label>\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"displayUrlInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">link</mat-icon>\n        {{ 'input.image.displayUrlInput' | translate }}\n      </gn-ui-button>\n    </div>\n    <div *ngIf=\"showUrlInput\" class=\"flex-none flex flex-col gap-2\">\n      <div class=\"h-2\"></div>\n      <div class=\"flex gap-2 items-center\">\n        <div class=\"flex-1 flex rounded-lg\">\n          <span\n            class=\"material-symbols-outlined px-4 inline-flex items-center min-w-fit rounded-s-lg border-2 border-e-0 border-gray-300\"\n            >link</span\n          >\n          <input\n            type=\"text\"\n            class=\"py-3 ps-1 block w-full border-2 border-s-0 border-e-0 border-gray-300 text-sm font-medium\"\n            placeholder=\"https://exemple.com/image.jpg\"\n            (change)=\"handleUrlChange($event)\"\n          />\n          <gn-ui-button\n            class=\"px-1 inline-flex items-center min-w-fit rounded-e-lg border-2 border-s-0 border-gray-300 text-white\"\n            [extraClass]=\"\n              urlInputValue && !downloadError ? 'bg-blue-500' : 'bg-gray-500'\n            \"\n            [disabled]=\"!urlInputValue || downloadError\"\n            (buttonClick)=\"downloadUrl()\"\n          >\n            <mat-icon class=\"material-symbols-outlined\">arrow_upward</mat-icon>\n          </gn-ui-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: FilesDropDirective, selector: "[gnUiFilesDrop]", outputs: ["dragFilesOver", "dropFiles"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ImageInputComponent, isStandalone: true, selector: "gn-ui-image-input", inputs: { formControl: "formControl", maxSizeMB: "maxSizeMB", previewUrl: "previewUrl", altText: "altText", uploadProgress: "uploadProgress", uploadError: "uploadError" }, outputs: { fileChange: "fileChange", urlChange: "urlChange", uploadCancel: "uploadCancel", delete: "delete", altTextChange: "altTextChange" }, ngImport: i0, template: "<ng-container *ngIf=\"previewUrl; then withImage; else withoutImage\">\n</ng-container>\n\n<ng-template #withImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <div class=\"flex-1 group relative\">\n      <img\n        class=\"w-full h-full object-cover border-2 border-gray-300 rounded-lg\"\n        [alt]=\"altText\"\n        loading=\"lazy\"\n        [src]=\"previewUrl\"\n      />\n      <gn-ui-button\n        [extraClass]=\"\n          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'\n        \"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">delete</mat-icon>\n      </gn-ui-button>\n    </div>\n    <input\n      *ngIf=\"showAltTextInput\"\n      type=\"text\"\n      class=\"py-3 px-2 border-2 border-gray-300 rounded-lg text-sm font-medium\"\n      [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n      [value]=\"altText\"\n      (change)=\"handleAltTextChange($event)\"\n    />\n    <div class=\"flex flex-row gap-2\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">delete</mat-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      <gn-ui-button\n        *ngIf=\"!showAltTextInput\"\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"toggleAltTextInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">add</mat-icon>\n        {{ 'input.image.displayAltTextInput' | translate }}\n      </gn-ui-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #withoutImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4 hover:cursor-pointer\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      <div class=\"w-14 h-14 rounded-md bg-gray-200 grid\">\n        <mat-icon\n          *ngIf=\"!dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >image</mat-icon\n        >\n        <mat-icon\n          *ngIf=\"dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >add_box</mat-icon\n        >\n        <div *ngIf=\"uploadProgress\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            [mode]=\"'determinate'\"\n            [value]=\"uploadProgress\"\n          ></mat-progress-spinner>\n          <span\n            class=\"text-sm font-medium relative inline-block width-[30px] bottom-[40px] left-[15px]\"\n          >\n            {{ uploadProgress }}%\n          </span>\n        </div>\n        <mat-icon\n          *ngIf=\"uploadError\"\n          class=\"material-symbols-outlined place-self-center text-rose-500\"\n          >broken_image</mat-icon\n        >\n      </div>\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\">{{ getPrimaryText() | translate }}</p>\n        <p\n          class=\"text-sm\"\n          [class]=\"\n            uploadProgress || uploadError\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick()\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"showUrlInput || uploadProgress || uploadError\"\n      />\n    </label>\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"displayUrlInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">link</mat-icon>\n        {{ 'input.image.displayUrlInput' | translate }}\n      </gn-ui-button>\n    </div>\n    <div *ngIf=\"showUrlInput\" class=\"flex-none flex flex-col gap-2\">\n      <div class=\"h-2\"></div>\n      <div class=\"flex gap-2 items-center\">\n        <div class=\"flex-1 flex rounded-lg\">\n          <span\n            class=\"material-symbols-outlined px-4 inline-flex items-center min-w-fit rounded-s-lg border-2 border-e-0 border-gray-300\"\n            >link</span\n          >\n          <input\n            type=\"text\"\n            class=\"py-3 ps-1 block w-full border-2 border-s-0 border-e-0 border-gray-300 text-sm font-medium\"\n            placeholder=\"https://exemple.com/image.jpg\"\n            (change)=\"handleUrlChange($event)\"\n          />\n          <gn-ui-button\n            class=\"px-1 inline-flex items-center min-w-fit rounded-e-lg border-2 border-s-0 border-gray-300 text-white\"\n            [extraClass]=\"\n              urlInputValue && !downloadError ? 'bg-blue-500' : 'bg-gray-500'\n            \"\n            [disabled]=\"!urlInputValue || downloadError\"\n            (buttonClick)=\"downloadUrl()\"\n          >\n            <mat-icon class=\"material-symbols-outlined\">arrow_upward</mat-icon>\n          </gn-ui-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: FilesDropDirective, selector: "[gnUiFilesDrop]", outputs: ["dragFilesOver", "dropFiles"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageInputComponent, decorators: [{
             type: Component,
@@ -26294,8 +26321,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FilesDropDirective,
                         MatProgressSpinnerModule,
                         TranslateModule,
-                    ], template: "<ng-container *ngIf=\"previewUrl; then withImage; else withoutImage\">\n</ng-container>\n\n<ng-template #withImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <div class=\"flex-1 group relative\">\n      <img\n        class=\"w-full h-full object-cover border-2 border-gray-300 rounded-lg\"\n        [alt]=\"altText\"\n        loading=\"lazy\"\n        [src]=\"previewUrl\"\n      />\n      <gn-ui-button\n        [extraClass]=\"\n          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'\n        \"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">delete</mat-icon>\n      </gn-ui-button>\n    </div>\n    <input\n      *ngIf=\"showAltTextInput\"\n      type=\"text\"\n      class=\"py-3 px-2 border-2 border-gray-300 rounded-lg text-sm font-medium\"\n      [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n      [value]=\"altText\"\n      (change)=\"handleAltTextChange($event)\"\n    />\n    <div class=\"flex flex-row gap-2\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">delete</mat-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      <gn-ui-button\n        *ngIf=\"!showAltTextInput\"\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"toggleAltTextInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">add</mat-icon>\n        {{ 'input.image.displayAltTextInput' | translate }}\n      </gn-ui-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #withoutImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      <div class=\"w-14 h-14 rounded-md bg-gray-200 grid\">\n        <mat-icon\n          *ngIf=\"!dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >image</mat-icon\n        >\n        <mat-icon\n          *ngIf=\"dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >add_box</mat-icon\n        >\n        <div *ngIf=\"uploadProgress\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            [mode]=\"'determinate'\"\n            [value]=\"uploadProgress\"\n          ></mat-progress-spinner>\n          <span\n            class=\"text-sm font-medium relative inline-block width-[30px] bottom-[40px] left-[15px]\"\n          >\n            {{ uploadProgress }}%\n          </span>\n        </div>\n        <mat-icon\n          *ngIf=\"uploadError\"\n          class=\"material-symbols-outlined place-self-center text-rose-500\"\n          >broken_image</mat-icon\n        >\n      </div>\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\">{{ getPrimaryText() | translate }}</p>\n        <p\n          class=\"text-sm\"\n          [class]=\"\n            uploadProgress || uploadError\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick()\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"showUrlInput || uploadProgress || uploadError\"\n      />\n    </label>\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"displayUrlInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">link</mat-icon>\n        {{ 'input.image.displayUrlInput' | translate }}\n      </gn-ui-button>\n    </div>\n    <div *ngIf=\"showUrlInput\" class=\"flex-none flex flex-col gap-2\">\n      <div class=\"h-2\"></div>\n      <div class=\"flex gap-2 items-center\">\n        <div class=\"flex-1 flex rounded-lg\">\n          <span\n            class=\"material-symbols-outlined px-4 inline-flex items-center min-w-fit rounded-s-lg border-2 border-e-0 border-gray-300\"\n            >link</span\n          >\n          <input\n            type=\"text\"\n            class=\"py-3 ps-1 block w-full border-2 border-s-0 border-e-0 border-gray-300 text-sm font-medium\"\n            placeholder=\"https://exemple.com/image.jpg\"\n            (change)=\"handleUrlChange($event)\"\n          />\n          <gn-ui-button\n            class=\"px-1 inline-flex items-center min-w-fit rounded-e-lg border-2 border-s-0 border-gray-300 text-white\"\n            [extraClass]=\"\n              urlInputValue && !downloadError ? 'bg-blue-500' : 'bg-gray-500'\n            \"\n            [disabled]=\"!urlInputValue || downloadError\"\n            (buttonClick)=\"downloadUrl()\"\n          >\n            <mat-icon class=\"material-symbols-outlined\">arrow_upward</mat-icon>\n          </gn-ui-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { maxSizeMB: [{
+                        ReactiveFormsModule,
+                    ], template: "<ng-container *ngIf=\"previewUrl; then withImage; else withoutImage\">\n</ng-container>\n\n<ng-template #withImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <div class=\"flex-1 group relative\">\n      <img\n        class=\"w-full h-full object-cover border-2 border-gray-300 rounded-lg\"\n        [alt]=\"altText\"\n        loading=\"lazy\"\n        [src]=\"previewUrl\"\n      />\n      <gn-ui-button\n        [extraClass]=\"\n          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'\n        \"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">delete</mat-icon>\n      </gn-ui-button>\n    </div>\n    <input\n      *ngIf=\"showAltTextInput\"\n      type=\"text\"\n      class=\"py-3 px-2 border-2 border-gray-300 rounded-lg text-sm font-medium\"\n      [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n      [value]=\"altText\"\n      (change)=\"handleAltTextChange($event)\"\n    />\n    <div class=\"flex flex-row gap-2\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">delete</mat-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      <gn-ui-button\n        *ngIf=\"!showAltTextInput\"\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"toggleAltTextInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">add</mat-icon>\n        {{ 'input.image.displayAltTextInput' | translate }}\n      </gn-ui-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #withoutImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4 hover:cursor-pointer\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      <div class=\"w-14 h-14 rounded-md bg-gray-200 grid\">\n        <mat-icon\n          *ngIf=\"!dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >image</mat-icon\n        >\n        <mat-icon\n          *ngIf=\"dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >add_box</mat-icon\n        >\n        <div *ngIf=\"uploadProgress\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            [mode]=\"'determinate'\"\n            [value]=\"uploadProgress\"\n          ></mat-progress-spinner>\n          <span\n            class=\"text-sm font-medium relative inline-block width-[30px] bottom-[40px] left-[15px]\"\n          >\n            {{ uploadProgress }}%\n          </span>\n        </div>\n        <mat-icon\n          *ngIf=\"uploadError\"\n          class=\"material-symbols-outlined place-self-center text-rose-500\"\n          >broken_image</mat-icon\n        >\n      </div>\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\">{{ getPrimaryText() | translate }}</p>\n        <p\n          class=\"text-sm\"\n          [class]=\"\n            uploadProgress || uploadError\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick()\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"showUrlInput || uploadProgress || uploadError\"\n      />\n    </label>\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"displayUrlInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">link</mat-icon>\n        {{ 'input.image.displayUrlInput' | translate }}\n      </gn-ui-button>\n    </div>\n    <div *ngIf=\"showUrlInput\" class=\"flex-none flex flex-col gap-2\">\n      <div class=\"h-2\"></div>\n      <div class=\"flex gap-2 items-center\">\n        <div class=\"flex-1 flex rounded-lg\">\n          <span\n            class=\"material-symbols-outlined px-4 inline-flex items-center min-w-fit rounded-s-lg border-2 border-e-0 border-gray-300\"\n            >link</span\n          >\n          <input\n            type=\"text\"\n            class=\"py-3 ps-1 block w-full border-2 border-s-0 border-e-0 border-gray-300 text-sm font-medium\"\n            placeholder=\"https://exemple.com/image.jpg\"\n            (change)=\"handleUrlChange($event)\"\n          />\n          <gn-ui-button\n            class=\"px-1 inline-flex items-center min-w-fit rounded-e-lg border-2 border-s-0 border-gray-300 text-white\"\n            [extraClass]=\"\n              urlInputValue && !downloadError ? 'bg-blue-500' : 'bg-gray-500'\n            \"\n            [disabled]=\"!urlInputValue || downloadError\"\n            (buttonClick)=\"downloadUrl()\"\n          >\n            <mat-icon class=\"material-symbols-outlined\">arrow_upward</mat-icon>\n          </gn-ui-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { formControl: [{
+                type: Input
+            }], maxSizeMB: [{
                 type: Input
             }], previewUrl: [{
                 type: Input
@@ -27334,7 +27364,7 @@ class ApiCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ApiCardComponent, selector: "gn-ui-api-card", inputs: { link: "link", currentLink: "currentLink" }, outputs: { openRecordApiForm: "openRecordApiForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden cursor-default\"\n>\n  <div\n    class=\"font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]\"\n  >\n    {{ link.name || link.description }}\n  </div>\n  <div class=\"\">\n    <div class=\"flex flex-row justify-between\">\n      <span\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive\n        }\"\n        >{{ link.accessServiceProtocol }}</span\n      >\n      <div class=\"flex flex-row gap-2 items-center\">\n        <gn-ui-copy-text-button\n          [text]=\"link.url\"\n          [tooltipText]=\"'tooltip.url.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <button\n          *ngIf=\"displayApiFormButton\"\n          type=\"button\"\n          [ngClass]=\"{\n            'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n              displayText\n          }\"\n          mat-raised-button\n          [matTooltip]=\"\n            !currentlyActive\n              ? ('record.metadata.api.form.openForm' | translate)\n              : ('record.metadata.api.form.closeForm' | translate)\n          \"\n          matTooltipPosition=\"above\"\n          (click)=\"openRecordApiFormPanel()\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n            [ngClass]=\"{\n              'text-secondary opacity-100': currentlyActive\n            }\"\n            >more_horiz</mat-icon\n          >\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ApiCardComponent, selector: "gn-ui-api-card", inputs: { link: "link", currentLink: "currentLink" }, outputs: { openRecordApiForm: "openRecordApiForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden cursor-default\"\n>\n  <div\n    class=\"font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]\"\n  >\n    {{ link.name || link.description }}\n  </div>\n  <div class=\"\">\n    <div class=\"flex flex-row justify-between\">\n      <span\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive\n        }\"\n        >{{ link.accessServiceProtocol }}</span\n      >\n      <div class=\"flex flex-row gap-2 items-center\">\n        <gn-ui-copy-text-button\n          [text]=\"link.url\"\n          [tooltipText]=\"'tooltip.url.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <button\n          *ngIf=\"displayApiFormButton\"\n          type=\"button\"\n          [ngClass]=\"{\n            'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n              displayText\n          }\"\n          mat-raised-button\n          [matTooltip]=\"\n            !currentlyActive\n              ? ('record.metadata.api.form.openForm' | translate)\n              : ('record.metadata.api.form.closeForm' | translate)\n          \"\n          matTooltipPosition=\"above\"\n          (click)=\"openRecordApiFormPanel()\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n            [ngClass]=\"{\n              'text-secondary opacity-100': currentlyActive\n            }\"\n            >more_horiz</mat-icon\n          >\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApiCardComponent, decorators: [{
             type: Component,
@@ -27550,11 +27580,11 @@ class MarkdownParserComponent {
         return marked.parse(this.textContent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarkdownParserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MarkdownParserComponent, isStandalone: true, selector: "gn-ui-markdown-parser", inputs: { textContent: "textContent" }, ngImport: i0, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host ::ng-deep .markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0px 0px 1.5rem;line-height:1.5;word-wrap:break-word}:host ::ng-deep .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host ::ng-deep .markdown-body h1,:host ::ng-deep .markdown-body h2,:host ::ng-deep .markdown-body h3,:host ::ng-deep .markdown-body h4,:host ::ng-deep .markdown-body h5,:host ::ng-deep .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host ::ng-deep .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host ::ng-deep .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host ::ng-deep .markdown-body p{margin-top:0;margin-bottom:10px}:host ::ng-deep .markdown-body p>a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none}:host ::ng-deep .markdown-body p>a:hover{color:var(--color-primary-darker)!important;@apply underline;}:host ::ng-deep .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host ::ng-deep .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host ::ng-deep .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host ::ng-deep .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host ::ng-deep .markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;border:0}:host ::ng-deep .markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--color-secondary);height:.15em;padding:0;margin:24px 0;background-color:var(--color-secondary);border:0}:host ::ng-deep .markdown-body hr:before{display:table;content:\"\"}:host ::ng-deep .markdown-body hr:after{display:table;clear:both;content:\"\"}:host ::ng-deep .markdown-body ul,:host ::ng-deep .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host ::ng-deep .markdown-body ol ol,:host ::ng-deep .markdown-body ul ol{list-style-type:lower-roman}:host ::ng-deep .markdown-body ul ul ol,:host ::ng-deep .markdown-body ul ol ol,:host ::ng-deep .markdown-body ol ul ol,:host ::ng-deep .markdown-body ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host ::ng-deep .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host ::ng-deep .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host ::ng-deep .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body div>ol:not([type]){list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host ::ng-deep .markdown-body td,:host ::ng-deep .markdown-body th{padding:0}:host ::ng-deep .markdown-body th{color:var(--color-secondary)}:host ::ng-deep .markdown-body table th,:host ::ng-deep .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host ::ng-deep .markdown-body table td>:last-child{margin-bottom:0}:host ::ng-deep .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host ::ng-deep .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host ::ng-deep .markdown-body table img{background-color:transparent}:host ::ng-deep .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host ::ng-deep .markdown-body img[align=right]{padding-left:20px}:host ::ng-deep .markdown-body img[align=left]{padding-right:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MarkdownParserComponent, isStandalone: true, selector: "gn-ui-markdown-parser", inputs: { textContent: "textContent" }, ngImport: i0, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host ::ng-deep .markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0;line-height:1.5;word-wrap:break-word;height:100%}:host ::ng-deep .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host ::ng-deep .markdown-body h1,:host ::ng-deep .markdown-body h2,:host ::ng-deep .markdown-body h3,:host ::ng-deep .markdown-body h4,:host ::ng-deep .markdown-body h5,:host ::ng-deep .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host ::ng-deep .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host ::ng-deep .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host ::ng-deep .markdown-body p{margin-top:0;margin-bottom:10px}:host ::ng-deep .markdown-body p>a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none}:host ::ng-deep .markdown-body p>a:hover{color:var(--color-primary-darker)!important;@apply underline;}:host ::ng-deep .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host ::ng-deep .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host ::ng-deep .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host ::ng-deep .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host ::ng-deep .markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;border:0}:host ::ng-deep .markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--color-secondary);height:.15em;padding:0;margin:24px 0;background-color:var(--color-secondary);border:0}:host ::ng-deep .markdown-body hr:before{display:table;content:\"\"}:host ::ng-deep .markdown-body hr:after{display:table;clear:both;content:\"\"}:host ::ng-deep .markdown-body ul,:host ::ng-deep .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host ::ng-deep .markdown-body ol ol,:host ::ng-deep .markdown-body ul ol{list-style-type:lower-roman}:host ::ng-deep .markdown-body ul ul ol,:host ::ng-deep .markdown-body ul ol ol,:host ::ng-deep .markdown-body ol ul ol,:host ::ng-deep .markdown-body ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host ::ng-deep .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host ::ng-deep .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host ::ng-deep .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body div>ol:not([type]){list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host ::ng-deep .markdown-body td,:host ::ng-deep .markdown-body th{padding:0}:host ::ng-deep .markdown-body th{color:var(--color-secondary)}:host ::ng-deep .markdown-body table th,:host ::ng-deep .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host ::ng-deep .markdown-body table td>:last-child{margin-bottom:0}:host ::ng-deep .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host ::ng-deep .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host ::ng-deep .markdown-body table img{background-color:transparent}:host ::ng-deep .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host ::ng-deep .markdown-body img[align=right]{padding-left:20px}:host ::ng-deep .markdown-body img[align=left]{padding-right:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarkdownParserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-markdown-parser', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host ::ng-deep .markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0px 0px 1.5rem;line-height:1.5;word-wrap:break-word}:host ::ng-deep .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host ::ng-deep .markdown-body h1,:host ::ng-deep .markdown-body h2,:host ::ng-deep .markdown-body h3,:host ::ng-deep .markdown-body h4,:host ::ng-deep .markdown-body h5,:host ::ng-deep .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host ::ng-deep .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host ::ng-deep .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host ::ng-deep .markdown-body p{margin-top:0;margin-bottom:10px}:host ::ng-deep .markdown-body p>a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none}:host ::ng-deep .markdown-body p>a:hover{color:var(--color-primary-darker)!important;@apply underline;}:host ::ng-deep .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host ::ng-deep .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host ::ng-deep .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host ::ng-deep .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host ::ng-deep .markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;border:0}:host ::ng-deep .markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--color-secondary);height:.15em;padding:0;margin:24px 0;background-color:var(--color-secondary);border:0}:host ::ng-deep .markdown-body hr:before{display:table;content:\"\"}:host ::ng-deep .markdown-body hr:after{display:table;clear:both;content:\"\"}:host ::ng-deep .markdown-body ul,:host ::ng-deep .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host ::ng-deep .markdown-body ol ol,:host ::ng-deep .markdown-body ul ol{list-style-type:lower-roman}:host ::ng-deep .markdown-body ul ul ol,:host ::ng-deep .markdown-body ul ol ol,:host ::ng-deep .markdown-body ol ul ol,:host ::ng-deep .markdown-body ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host ::ng-deep .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host ::ng-deep .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host ::ng-deep .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body div>ol:not([type]){list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host ::ng-deep .markdown-body td,:host ::ng-deep .markdown-body th{padding:0}:host ::ng-deep .markdown-body th{color:var(--color-secondary)}:host ::ng-deep .markdown-body table th,:host ::ng-deep .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host ::ng-deep .markdown-body table td>:last-child{margin-bottom:0}:host ::ng-deep .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host ::ng-deep .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host ::ng-deep .markdown-body table img{background-color:transparent}:host ::ng-deep .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host ::ng-deep .markdown-body img[align=right]{padding-left:20px}:host ::ng-deep .markdown-body img[align=left]{padding-right:20px}\n"] }]
+            args: [{ selector: 'gn-ui-markdown-parser', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host ::ng-deep .markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0;line-height:1.5;word-wrap:break-word;height:100%}:host ::ng-deep .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host ::ng-deep .markdown-body h1,:host ::ng-deep .markdown-body h2,:host ::ng-deep .markdown-body h3,:host ::ng-deep .markdown-body h4,:host ::ng-deep .markdown-body h5,:host ::ng-deep .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host ::ng-deep .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host ::ng-deep .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host ::ng-deep .markdown-body p{margin-top:0;margin-bottom:10px}:host ::ng-deep .markdown-body p>a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none}:host ::ng-deep .markdown-body p>a:hover{color:var(--color-primary-darker)!important;@apply underline;}:host ::ng-deep .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host ::ng-deep .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host ::ng-deep .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host ::ng-deep .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host ::ng-deep .markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;border:0}:host ::ng-deep .markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--color-secondary);height:.15em;padding:0;margin:24px 0;background-color:var(--color-secondary);border:0}:host ::ng-deep .markdown-body hr:before{display:table;content:\"\"}:host ::ng-deep .markdown-body hr:after{display:table;clear:both;content:\"\"}:host ::ng-deep .markdown-body ul,:host ::ng-deep .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host ::ng-deep .markdown-body ol ol,:host ::ng-deep .markdown-body ul ol{list-style-type:lower-roman}:host ::ng-deep .markdown-body ul ul ol,:host ::ng-deep .markdown-body ul ol ol,:host ::ng-deep .markdown-body ol ul ol,:host ::ng-deep .markdown-body ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host ::ng-deep .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host ::ng-deep .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host ::ng-deep .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body div>ol:not([type]){list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host ::ng-deep .markdown-body td,:host ::ng-deep .markdown-body th{padding:0}:host ::ng-deep .markdown-body th{color:var(--color-secondary)}:host ::ng-deep .markdown-body table th,:host ::ng-deep .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host ::ng-deep .markdown-body table td>:last-child{margin-bottom:0}:host ::ng-deep .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host ::ng-deep .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host ::ng-deep .markdown-body table img{background-color:transparent}:host ::ng-deep .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host ::ng-deep .markdown-body img[align=right]{padding-left:20px}:host ::ng-deep .markdown-body img[align=left]{padding-right:20px}\n"] }]
         }], propDecorators: { textContent: [{
                 type: Input
             }] } });
@@ -27569,7 +27599,7 @@ class MarkdownEditorComponent {
         this.textContentChanged.emit(this.textContent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarkdownEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MarkdownEditorComponent, isStandalone: true, selector: "gn-ui-markdown-editor", inputs: { preview: "preview", helperText: "helperText", placeholder: "placeholder", textContent: "textContent" }, outputs: { textContentChanged: "textContentChanged" }, ngImport: i0, template: "<div class=\"h-full flex flex-col\">\n  <p class=\"flex-none mb-2 font-medium text-sm text-gray-900\">\n    {{ helperText }}\n  </p>\n  <div class=\"flex-1\" [hidden]=\"preview\">\n    <gn-ui-text-area\n      [placeholder]=\"placeholder\"\n      [value]=\"textContent\"\n      (valueChange)=\"textContentChangedHandler($event)\"\n    ></gn-ui-text-area>\n  </div>\n  <div\n    class=\"flex-1 border border-gray-800 rounded overflow-y-scroll\"\n    [hidden]=\"!preview\"\n  >\n    <gn-ui-markdown-parser [textContent]=\"textContent\"></gn-ui-markdown-parser>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MarkdownEditorComponent, isStandalone: true, selector: "gn-ui-markdown-editor", inputs: { preview: "preview", helperText: "helperText", placeholder: "placeholder", textContent: "textContent" }, outputs: { textContentChanged: "textContentChanged" }, ngImport: i0, template: "<div class=\"h-full flex flex-col\">\n  <p\n    *ngIf=\"helperText\"\n    class=\"flex-none mb-2 font-medium text-sm text-gray-900\"\n  >\n    {{ helperText }}\n  </p>\n  <div class=\"flex-1\" [hidden]=\"preview\">\n    <gn-ui-text-area\n      [placeholder]=\"placeholder\"\n      [value]=\"textContent\"\n      (valueChange)=\"textContentChangedHandler($event)\"\n    ></gn-ui-text-area>\n  </div>\n  <div\n    class=\"flex-1 border border-gray-800 rounded overflow-y-scroll\"\n    [hidden]=\"!preview\"\n  >\n    <gn-ui-markdown-parser [textContent]=\"textContent\"></gn-ui-markdown-parser>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MarkdownEditorComponent, decorators: [{
             type: Component,
@@ -27582,7 +27612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TextAreaComponent,
                         MarkdownParserComponent,
                         TranslateModule,
-                    ], template: "<div class=\"h-full flex flex-col\">\n  <p class=\"flex-none mb-2 font-medium text-sm text-gray-900\">\n    {{ helperText }}\n  </p>\n  <div class=\"flex-1\" [hidden]=\"preview\">\n    <gn-ui-text-area\n      [placeholder]=\"placeholder\"\n      [value]=\"textContent\"\n      (valueChange)=\"textContentChangedHandler($event)\"\n    ></gn-ui-text-area>\n  </div>\n  <div\n    class=\"flex-1 border border-gray-800 rounded overflow-y-scroll\"\n    [hidden]=\"!preview\"\n  >\n    <gn-ui-markdown-parser [textContent]=\"textContent\"></gn-ui-markdown-parser>\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"h-full flex flex-col\">\n  <p\n    *ngIf=\"helperText\"\n    class=\"flex-none mb-2 font-medium text-sm text-gray-900\"\n  >\n    {{ helperText }}\n  </p>\n  <div class=\"flex-1\" [hidden]=\"preview\">\n    <gn-ui-text-area\n      [placeholder]=\"placeholder\"\n      [value]=\"textContent\"\n      (valueChange)=\"textContentChangedHandler($event)\"\n    ></gn-ui-text-area>\n  </div>\n  <div\n    class=\"flex-1 border border-gray-800 rounded overflow-y-scroll\"\n    [hidden]=\"!preview\"\n  >\n    <gn-ui-markdown-parser [textContent]=\"textContent\"></gn-ui-markdown-parser>\n  </div>\n</div>\n" }]
         }], propDecorators: { preview: [{
                 type: Input
             }], helperText: [{
@@ -27873,11 +27903,11 @@ class MetadataInfoComponent {
         this.keyword.emit(keyword);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MetadataInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MetadataInfoComponent, 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 ghostClass=\"h-32\" [showContent]=\"fieldReady('abstract')\">\n    <gn-ui-max-lines [maxLines]=\"6\" *ngIf=\"metadata.abstract\">\n      <div>\n        <gn-ui-markdown-parser\n          [textContent]=\"metadata.abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n    </gn-ui-max-lines>\n    <div *ngIf=\"metadata.keywords?.length\">\n      <p class=\"mt-6 mb-3 font-medium text-primary text-sm\" translate>\n        record.metadata.keywords\n      </p>\n      <div class=\"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    </div>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\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          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <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      <gn-ui-markdown-parser\n        *ngFor=\"let constraint of legalConstraints\"\n        [textContent]=\"constraint\"\n      >\n      </gn-ui-markdown-parser>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <h5 translate class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\">\n          record.metadata.otherConstraints\n        </h5>\n        <gn-ui-markdown-parser [textContent]=\"constraint\">\n        </gn-ui-markdown-parser>\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.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div *ngIf=\"metadata.lineage\" class=\"text-gray-900 flex flex-col mt-4 gap-2\">\n    <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n      {{ metadata.lineage }}\n    </p>\n  </div>\n  <div class=\"flex flex-row gap-6 mt-5 mb-8\" *ngIf=\"resourceContact\">\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          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"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 *ngIf=\"metadata.recordCreated\">\n      <p class=\"text-sm\" translate>record.metadata.creation</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordCreated.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.recordPublished\">\n      <p class=\"text-sm\" translate>record.metadata.publication</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordPublished.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"updateFrequency\">\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 *ngIf=\"metadata.languages\">\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\"\n          translate\n          *ngFor=\"let language of metadata.languages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"temporalExtent\">\n      <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n      <div class=\"flex flex-row gap-1 mb-1 text-primary font-medium\">\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=\"metadata.landingPage\"\n  [title]=\"'record.metadata.technical' | translate\"\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 && metadata.recordUpdated.toLocaleString() }}\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          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 mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "collapsed"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { 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: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MetadataInfoComponent, 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 ghostClass=\"h-32\" [showContent]=\"fieldReady('abstract')\">\n    <gn-ui-max-lines [maxLines]=\"6\" *ngIf=\"metadata.abstract\">\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    <div *ngIf=\"metadata.keywords?.length\">\n      <p class=\"mt-6 mb-3 font-medium text-primary text-sm\" translate>\n        record.metadata.keywords\n      </p>\n      <div class=\"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    </div>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\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          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <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        <h5 translate class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\">\n          record.metadata.otherConstraints\n        </h5>\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.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div *ngIf=\"metadata.lineage\" class=\"text-gray-900 flex flex-col mt-4 gap-2\">\n    <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n      {{ metadata.lineage }}\n    </p>\n  </div>\n  <div class=\"flex flex-row gap-6 mt-5 mb-8\" *ngIf=\"resourceContact\">\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          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"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 *ngIf=\"metadata.recordCreated\">\n      <p class=\"text-sm\" translate>record.metadata.creation</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordCreated.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.recordPublished\">\n      <p class=\"text-sm\" translate>record.metadata.publication</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordPublished.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"updateFrequency\">\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 *ngIf=\"metadata.languages\">\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\"\n          translate\n          *ngFor=\"let language of metadata.languages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"temporalExtent\">\n      <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n      <div class=\"flex flex-row gap-1 mb-1 text-primary font-medium\">\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=\"metadata.landingPage\"\n  [title]=\"'record.metadata.technical' | translate\"\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 && metadata.recordUpdated.toLocaleString() }}\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          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 mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "collapsed"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { 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: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MetadataInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-metadata-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost ghostClass=\"h-32\" [showContent]=\"fieldReady('abstract')\">\n    <gn-ui-max-lines [maxLines]=\"6\" *ngIf=\"metadata.abstract\">\n      <div>\n        <gn-ui-markdown-parser\n          [textContent]=\"metadata.abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n    </gn-ui-max-lines>\n    <div *ngIf=\"metadata.keywords?.length\">\n      <p class=\"mt-6 mb-3 font-medium text-primary text-sm\" translate>\n        record.metadata.keywords\n      </p>\n      <div class=\"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    </div>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\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          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <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      <gn-ui-markdown-parser\n        *ngFor=\"let constraint of legalConstraints\"\n        [textContent]=\"constraint\"\n      >\n      </gn-ui-markdown-parser>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <h5 translate class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\">\n          record.metadata.otherConstraints\n        </h5>\n        <gn-ui-markdown-parser [textContent]=\"constraint\">\n        </gn-ui-markdown-parser>\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.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div *ngIf=\"metadata.lineage\" class=\"text-gray-900 flex flex-col mt-4 gap-2\">\n    <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n      {{ metadata.lineage }}\n    </p>\n  </div>\n  <div class=\"flex flex-row gap-6 mt-5 mb-8\" *ngIf=\"resourceContact\">\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          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"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 *ngIf=\"metadata.recordCreated\">\n      <p class=\"text-sm\" translate>record.metadata.creation</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordCreated.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.recordPublished\">\n      <p class=\"text-sm\" translate>record.metadata.publication</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordPublished.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"updateFrequency\">\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 *ngIf=\"metadata.languages\">\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\"\n          translate\n          *ngFor=\"let language of metadata.languages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"temporalExtent\">\n      <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n      <div class=\"flex flex-row gap-1 mb-1 text-primary font-medium\">\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=\"metadata.landingPage\"\n  [title]=\"'record.metadata.technical' | translate\"\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 && metadata.recordUpdated.toLocaleString() }}\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          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 mat-icon{transform:scale(.8)}\n"] }]
+            args: [{ selector: 'gn-ui-metadata-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost ghostClass=\"h-32\" [showContent]=\"fieldReady('abstract')\">\n    <gn-ui-max-lines [maxLines]=\"6\" *ngIf=\"metadata.abstract\">\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    <div *ngIf=\"metadata.keywords?.length\">\n      <p class=\"mt-6 mb-3 font-medium text-primary text-sm\" translate>\n        record.metadata.keywords\n      </p>\n      <div class=\"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    </div>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\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          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <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        <h5 translate class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\">\n          record.metadata.otherConstraints\n        </h5>\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.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div *ngIf=\"metadata.lineage\" class=\"text-gray-900 flex flex-col mt-4 gap-2\">\n    <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n      {{ metadata.lineage }}\n    </p>\n  </div>\n  <div class=\"flex flex-row gap-6 mt-5 mb-8\" *ngIf=\"resourceContact\">\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          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"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 *ngIf=\"metadata.recordCreated\">\n      <p class=\"text-sm\" translate>record.metadata.creation</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordCreated.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.recordPublished\">\n      <p class=\"text-sm\" translate>record.metadata.publication</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordPublished.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"updateFrequency\">\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 *ngIf=\"metadata.languages\">\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\"\n          translate\n          *ngFor=\"let language of metadata.languages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"temporalExtent\">\n      <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n      <div class=\"flex flex-row gap-1 mb-1 text-primary font-medium\">\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=\"metadata.landingPage\"\n  [title]=\"'record.metadata.technical' | translate\"\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 && metadata.recordUpdated.toLocaleString() }}\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          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 mat-icon{transform:scale(.8)}\n"] }]
         }], propDecorators: { metadata: [{
                 type: Input
             }], incomplete: [{
@@ -28134,7 +28164,7 @@ class RecordApiFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RecordApiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RecordApiFormComponent, selector: "gn-ui-record-api-form", inputs: { apiLink: "apiLink" }, ngImport: i0, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3 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            hint=\"\"\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 mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "hint", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RecordApiFormComponent, selector: "gn-ui-record-api-form", inputs: { apiLink: "apiLink" }, ngImport: i0, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3 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            hint=\"\"\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 mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "hint", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RecordApiFormComponent, decorators: [{
             type: Component,
@@ -28162,7 +28192,7 @@ class RelatedRecordCardComponent {
         return `${this.baseClasses} ${this.extraClass}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RelatedRecordCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RelatedRecordCardComponent, selector: "gn-ui-related-record-card", inputs: { record: "record", extraClass: "extraClass" }, ngImport: i0, template: "<a\n  [class]=\"classList\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RelatedRecordCardComponent, selector: "gn-ui-related-record-card", inputs: { record: "record", extraClass: "extraClass" }, ngImport: i0, template: "<a\n  [class]=\"classList\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RelatedRecordCardComponent, decorators: [{
             type: Component,
@@ -28337,11 +28367,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class FormFieldWrapperComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldWrapperComponent, isStandalone: true, selector: "gn-ui-form-field-wrapper", inputs: { label: "label", hint: "hint" }, ngImport: i0, template: "<div class=\"h-full flex flex-col\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\n        class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n        [matTooltip]=\"hint\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </div>\n  <div class=\"flex-1\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldWrapperComponent, isStandalone: true, selector: "gn-ui-form-field-wrapper", inputs: { label: "label", hint: "hint" }, ngImport: i0, template: "<div class=\"h-full flex flex-col\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\n        class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n        [matTooltip]=\"hint\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </div>\n  <div class=\"flex-1 overflow-y-auto\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-form-field-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIconModule, MatTooltipModule], template: "<div class=\"h-full flex flex-col\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\n        class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n        [matTooltip]=\"hint\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </div>\n  <div class=\"flex-1\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'gn-ui-form-field-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIconModule, MatTooltipModule], template: "<div class=\"h-full flex flex-col\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\n        class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n        [matTooltip]=\"hint\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </div>\n  <div class=\"flex-1 overflow-y-auto\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -28593,7 +28623,7 @@ class UserPreviewComponent {
         return (this.user.name + ' ' + this.user.surname).trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserPreviewComponent, selector: "gn-ui-user-preview", inputs: { user: "user", avatarPlaceholder: "avatarPlaceholder" }, ngImport: i0, template: "<figure class=\"text-center\">\n  <div\n    class=\"w-10 h-10 border border-primary rounded-full capitalize\"\n    [matTooltip]=\"userFullName\"\n  >\n    <gn-ui-avatar\n      [avatarUrl]=\"user.profileIcon\"\n      [avatarPlaceholder]=\"avatarPlaceholder\"\n    ></gn-ui-avatar>\n  </div>\n</figure>\n", dependencies: [{ kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AvatarComponent, selector: "gn-ui-avatar", inputs: ["avatarUrl", "avatarPlaceholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserPreviewComponent, selector: "gn-ui-user-preview", inputs: { user: "user", avatarPlaceholder: "avatarPlaceholder" }, ngImport: i0, template: "<figure class=\"text-center\">\n  <div\n    class=\"w-10 h-10 border border-primary rounded-full capitalize\"\n    [matTooltip]=\"userFullName\"\n  >\n    <gn-ui-avatar\n      [avatarUrl]=\"user.profileIcon\"\n      [avatarPlaceholder]=\"avatarPlaceholder\"\n    ></gn-ui-avatar>\n  </div>\n</figure>\n", dependencies: [{ kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AvatarComponent, selector: "gn-ui-avatar", inputs: ["avatarUrl", "avatarPlaceholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserPreviewComponent, decorators: [{
             type: Component,
@@ -28957,7 +28987,7 @@ class ActionMenuComponent {
         this.trigger.openMenu();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionMenuComponent, isStandalone: true, selector: "gn-ui-action-menu", outputs: { duplicate: "duplicate" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  [matMenuTriggerFor]=\"menu\"\n  (buttonClick)=\"openMenu()\"\n  data-test=\"record-menu-button\"\n>\n  <mat-icon class=\"material-symbols-outlined\">more_vert</mat-icon>\n</gn-ui-button>\n<mat-menu #menu=\"matMenu\">\n  <button\n    mat-menu-item\n    (click)=\"duplicate.emit()\"\n    data-test=\"record-menu-duplicate-button\"\n  >\n    <span translate>record.action.duplicate</span>\n  </button>\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i2$5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActionMenuComponent, isStandalone: true, selector: "gn-ui-action-menu", outputs: { duplicate: "duplicate" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  [matMenuTriggerFor]=\"menu\"\n  (buttonClick)=\"openMenu()\"\n  data-test=\"record-menu-button\"\n>\n  <mat-icon class=\"material-symbols-outlined\">more_vert</mat-icon>\n</gn-ui-button>\n<mat-menu #menu=\"matMenu\">\n  <button\n    mat-menu-item\n    (click)=\"duplicate.emit()\"\n    data-test=\"record-menu-duplicate-button\"\n  >\n    <span translate>record.action.duplicate</span>\n  </button>\n</mat-menu>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i2$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActionMenuComponent, decorators: [{
             type: Component,
@@ -31392,7 +31422,7 @@ class LayersPanelComponent {
         this.mapFacade.addLayer(layer);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayersPanelComponent, deps: [{ token: MapFacade }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayersPanelComponent, selector: "gn-ui-layers-panel", ngImport: i0, template: "<div\n  class=\"bg-white rounded shadow shadow-lg relative h-full w-[400px] overflow-hidden\"\n>\n  <div class=\"p-3 border-b border-gray-300 flex items-center\">\n    <mat-icon class=\"material-symbols-outlined mr-2\">layers</mat-icon>\n    <span translate>map.layers.list</span>\n  </div>\n  <div class=\"flex flex-col px-4 divide-y divide-y-gray-50\">\n    <div\n      *ngFor=\"let layer of layers$ | async; let index = index\"\n      class=\"flex flex-row py-3\"\n    >\n      <mat-icon class=\"material-symbols-outlined -ml-2 mr-2 shrink-0\"\n        >chevron_right</mat-icon\n      >\n      <span class=\"mr-2 grow\">{{ layer.title }}</span>\n      <a\n        href\n        class=\"underline text-sm text-red-700 hover:text-red-900\"\n        (click)=\"deleteLayer(index)\"\n      >\n        delete\n      </a>\n    </div>\n  </div>\n  <gn-ui-expandable-panel-button [titleTemplate]=\"addLayerTitle\">\n    <mat-tab-group animationDuration=\"200ms\" class=\"h-full\">\n      <mat-tab [label]=\"'map.add.layer.catalog' | translate\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-catalog></gn-ui-add-layer-from-catalog>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wms' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-wms></gn-ui-add-layer-from-wms>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wfs' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-wfs></gn-ui-add-layer-from-wfs>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.ogc.api' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-ogc-api\n            [ogcUrl]=\"ogcUrl\"\n            (layerAdded)=\"addLayer($event)\"\n          ></gn-ui-add-layer-from-ogc-api>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.file' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-file></gn-ui-add-layer-from-file>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </gn-ui-expandable-panel-button>\n</div>\n\n<ng-template #addLayerTitle>\n  <mat-icon class=\"material-symbols-outlined mr-4\">add_circle</mat-icon>\n  <span translate>map.add.layer</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ExpandablePanelButtonComponent, selector: "gn-ui-expandable-panel-button", inputs: ["titleTemplate", "collapsed"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$6.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: AddLayerFromOgcApiComponent, selector: "gn-ui-add-layer-from-ogc-api", inputs: ["ogcUrl"], outputs: ["layerAdded"] }, { kind: "component", type: AddLayerFromCatalogComponent, selector: "gn-ui-add-layer-from-catalog" }, { kind: "component", type: AddLayerFromWmsComponent, selector: "gn-ui-add-layer-from-wms" }, { kind: "component", type: AddLayerFromFileComponent, selector: "gn-ui-add-layer-from-file" }, { kind: "component", type: AddLayerFromWfsComponent, selector: "gn-ui-add-layer-from-wfs" }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LayersPanelComponent, selector: "gn-ui-layers-panel", ngImport: i0, template: "<div\n  class=\"bg-white rounded shadow shadow-lg relative h-full w-[400px] overflow-hidden\"\n>\n  <div class=\"p-3 border-b border-gray-300 flex items-center\">\n    <mat-icon class=\"material-symbols-outlined mr-2\">layers</mat-icon>\n    <span translate>map.layers.list</span>\n  </div>\n  <div class=\"flex flex-col px-4 divide-y divide-y-gray-50\">\n    <div\n      *ngFor=\"let layer of layers$ | async; let index = index\"\n      class=\"flex flex-row py-3\"\n    >\n      <mat-icon class=\"material-symbols-outlined -ml-2 mr-2 shrink-0\"\n        >chevron_right</mat-icon\n      >\n      <span class=\"mr-2 grow\">{{ layer.title }}</span>\n      <a\n        href\n        class=\"underline text-sm text-red-700 hover:text-red-900\"\n        (click)=\"deleteLayer(index)\"\n      >\n        delete\n      </a>\n    </div>\n  </div>\n  <gn-ui-expandable-panel-button [titleTemplate]=\"addLayerTitle\">\n    <mat-tab-group animationDuration=\"200ms\" class=\"h-full\">\n      <mat-tab [label]=\"'map.add.layer.catalog' | translate\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-catalog></gn-ui-add-layer-from-catalog>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wms' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-wms></gn-ui-add-layer-from-wms>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wfs' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-wfs></gn-ui-add-layer-from-wfs>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.ogc.api' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-ogc-api\n            [ogcUrl]=\"ogcUrl\"\n            (layerAdded)=\"addLayer($event)\"\n          ></gn-ui-add-layer-from-ogc-api>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.file' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-file></gn-ui-add-layer-from-file>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </gn-ui-expandable-panel-button>\n</div>\n\n<ng-template #addLayerTitle>\n  <mat-icon class=\"material-symbols-outlined mr-4\">add_circle</mat-icon>\n  <span translate>map.add.layer</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ExpandablePanelButtonComponent, selector: "gn-ui-expandable-panel-button", inputs: ["titleTemplate", "collapsed"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$5.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: AddLayerFromOgcApiComponent, selector: "gn-ui-add-layer-from-ogc-api", inputs: ["ogcUrl"], outputs: ["layerAdded"] }, { kind: "component", type: AddLayerFromCatalogComponent, selector: "gn-ui-add-layer-from-catalog" }, { kind: "component", type: AddLayerFromWmsComponent, selector: "gn-ui-add-layer-from-wms" }, { kind: "component", type: AddLayerFromFileComponent, selector: "gn-ui-add-layer-from-file" }, { kind: "component", type: AddLayerFromWfsComponent, selector: "gn-ui-add-layer-from-wfs" }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayersPanelComponent, decorators: [{
             type: Component,
@@ -32134,7 +32164,7 @@ class TableComponent {
         return rowIdPrefix + id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, isStandalone: true, selector: "gn-ui-table", inputs: { data: "data", activeId: "activeId" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"border border-gray-300 rounded-lg overflow-hidden bg-white h-full\">\n  <cdk-virtual-scroll-viewport\n    tvsItemSize=\"48\"\n    headerHeight=\"56\"\n    style=\"height: calc(100% - 37px)\"\n  >\n    <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z8\" matSort>\n      <ng-container *ngFor=\"let prop of properties\" [matColumnDef]=\"prop\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          class=\"text-sm text-black bg-white\"\n        >\n          {{ prop }}\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let element\"\n          class=\"whitespace-nowrap pr-1 truncate\"\n        >\n          {{ element[prop] }}\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"properties; sticky: true\"></tr>\n      <tr\n        [id]=\"getRowEltId(row.id)\"\n        mat-row\n        *matRowDef=\"let row; columns: properties\"\n        (click)=\"selected.emit(row)\"\n        [class.active]=\"row.id === activeId\"\n      ></tr>\n    </table>\n  </cdk-virtual-scroll-viewport>\n  <div class=\"text-gray-900 border-t border-gray-300 px-4 py-2 text-sm\">\n    <span class=\"count font-extrabold text-primary\">{{ count }}</span\n    >&nbsp;<span translate>table.object.count</span>.\n  </div>\n</div>\n", styles: ["table{width:100%;background:white}th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding-right:20px}tr.mat-mdc-row,tr.mat-mdc-footer-row{height:36px}tr:hover{background:whitesmoke}tr.mat-mdc-header-row{height:48px}[mat-header-cell]{color:#0000008a;font-size:12px;font-weight:500}tr{cursor:pointer}.active .mat-mdc-cell{color:var(--color-primary)}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i1$9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: TableVirtualScrollModule }, { kind: "directive", type: i3$2.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableComponent, isStandalone: true, selector: "gn-ui-table", inputs: { data: "data", activeId: "activeId" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"border border-gray-300 rounded-lg overflow-hidden bg-white h-full\">\n  <cdk-virtual-scroll-viewport\n    tvsItemSize=\"48\"\n    headerHeight=\"56\"\n    style=\"height: calc(100% - 37px)\"\n  >\n    <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z8\" matSort>\n      <ng-container *ngFor=\"let prop of properties\" [matColumnDef]=\"prop\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          class=\"text-sm text-black bg-white\"\n        >\n          {{ prop }}\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let element\"\n          class=\"whitespace-nowrap pr-1 truncate\"\n        >\n          {{ element[prop] }}\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"properties; sticky: true\"></tr>\n      <tr\n        [id]=\"getRowEltId(row.id)\"\n        mat-row\n        *matRowDef=\"let row; columns: properties\"\n        (click)=\"selected.emit(row)\"\n        [class.active]=\"row.id === activeId\"\n      ></tr>\n    </table>\n  </cdk-virtual-scroll-viewport>\n  <div class=\"text-gray-900 border-t border-gray-300 px-4 py-2 text-sm\">\n    <span class=\"count font-extrabold text-primary\">{{ count }}</span\n    >&nbsp;<span translate>table.object.count</span>.\n  </div>\n</div>\n", styles: ["table{width:100%;background:white}th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding-right:20px}tr.mat-mdc-row,tr.mat-mdc-footer-row{height:36px}tr:hover{background:whitesmoke}tr.mat-mdc-header-row{height:48px}[mat-header-cell]{color:#0000008a;font-size:12px;font-weight:500}tr{cursor:pointer}.active .mat-mdc-cell{color:var(--color-primary)}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i1$9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$6.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: TableVirtualScrollModule }, { kind: "directive", type: i3$3.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -34433,7 +34463,7 @@ class DataViewShareComponent {
         this.wcEmbedderBaseUrl = wcEmbedderBaseUrl;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataViewShareComponent, deps: [{ token: WEB_COMPONENT_EMBEDDER_URL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataViewShareComponent, selector: "gn-ui-data-view-share", inputs: { viewType: "viewType" }, ngImport: i0, template: "<div class=\"container-lg px-5 my-1 lg:mx-auto\">\n  <mat-tab-group\n    [selectedIndex]=\"0\"\n    animationDuration=\"0ms\"\n    mat-stretch-tabs=\"false\"\n    mat-align-tabs=\"start\"\n    [disableRipple]=\"!wcEmbedderBaseUrl\"\n  >\n    <mat-tab *ngIf=\"wcEmbedderBaseUrl\">\n      <ng-template mat-tab-label>\n        <span class=\"tab-header-label-gray\" translate>share.tab.permalink</span>\n      </ng-template>\n      <gn-ui-data-view-permalink\n        [viewType]=\"viewType\"\n      ></gn-ui-data-view-permalink>\n    </mat-tab>\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <span\n          [class]=\"\n            wcEmbedderBaseUrl\n              ? 'tab-header-label-gray'\n              : 'single-tab-header-label-gray'\n          \"\n          translate\n          >share.tab.webComponent</span\n        >\n      </ng-template>\n      <gn-ui-data-view-web-component\n        [viewType]=\"viewType\"\n      ></gn-ui-data-view-web-component>\n    </mat-tab>\n  </mat-tab-group>\n</div>\n", styles: ["::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .tab-header-label-gray{opacity:100%;font-weight:700}.tab-header-label-gray{@apply text-sm text-gray-700 opacity-75 hover:text-gray-900;}.single-tab-header-label-gray{@apply text-sm text-gray-900;}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$6.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$6.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DataViewPermalinkComponent, selector: "gn-ui-data-view-permalink", inputs: ["viewType"] }, { kind: "component", type: DataViewWebComponentComponent, selector: "gn-ui-data-view-web-component", inputs: ["viewType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataViewShareComponent, selector: "gn-ui-data-view-share", inputs: { viewType: "viewType" }, ngImport: i0, template: "<div class=\"container-lg px-5 my-1 lg:mx-auto\">\n  <mat-tab-group\n    [selectedIndex]=\"0\"\n    animationDuration=\"0ms\"\n    mat-stretch-tabs=\"false\"\n    mat-align-tabs=\"start\"\n    [disableRipple]=\"!wcEmbedderBaseUrl\"\n  >\n    <mat-tab *ngIf=\"wcEmbedderBaseUrl\">\n      <ng-template mat-tab-label>\n        <span class=\"tab-header-label-gray\" translate>share.tab.permalink</span>\n      </ng-template>\n      <gn-ui-data-view-permalink\n        [viewType]=\"viewType\"\n      ></gn-ui-data-view-permalink>\n    </mat-tab>\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <span\n          [class]=\"\n            wcEmbedderBaseUrl\n              ? 'tab-header-label-gray'\n              : 'single-tab-header-label-gray'\n          \"\n          translate\n          >share.tab.webComponent</span\n        >\n      </ng-template>\n      <gn-ui-data-view-web-component\n        [viewType]=\"viewType\"\n      ></gn-ui-data-view-web-component>\n    </mat-tab>\n  </mat-tab-group>\n</div>\n", styles: ["::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .tab-header-label-gray{opacity:100%;font-weight:700}.tab-header-label-gray{@apply text-sm text-gray-700 opacity-75 hover:text-gray-900;}.single-tab-header-label-gray{@apply text-sm text-gray-900;}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$5.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$5.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DataViewPermalinkComponent, selector: "gn-ui-data-view-permalink", inputs: ["viewType"] }, { kind: "component", type: DataViewWebComponentComponent, selector: "gn-ui-data-view-web-component", inputs: ["viewType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataViewShareComponent, decorators: [{
             type: Component,
@@ -34604,13 +34634,23 @@ const RECORD_ABSTRACT_FIELD = {
         labelKey: marker('editor.record.form.field.abstract'),
     },
 };
+const RECORD_GRAPHICAL_OVERVIEW_FIELD = {
+    model: 'overviews',
+    formFieldConfig: {
+        labelKey: marker('editor.record.form.field.overviews'),
+    },
+};
 /************************************************************
  ***************          SECTIONS          *****************
  ************************************************************
  */
 const TITLE_SECTION = {
     hidden: false,
-    fields: [RECORD_TITLE_FIELD, RECORD_ABSTRACT_FIELD],
+    fields: [
+        RECORD_TITLE_FIELD,
+        RECORD_ABSTRACT_FIELD,
+        RECORD_GRAPHICAL_OVERVIEW_FIELD,
+    ],
 };
 const ABOUT_SECTION = {
     labelKey: marker('editor.record.form.section.about.label'),
@@ -35098,7 +35138,7 @@ class WizardFieldComponent {
                 deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
-        ], viewQueries: [{ propertyName: "searchText", first: true, predicate: ["searchText"], descendants: true }, { propertyName: "chips", first: true, predicate: ["chips"], descendants: true }, { propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-1\">\n  <span [class]=\"wizardFieldConfig.icon + ' pr-10'\"></span>\n  <div class=\"flex flex-col flex-1\">\n    <div translate class=\"text-xl font-bold pb-1\">\n      {{ wizardFieldConfig.label }}\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.TEXT === wizardFieldConfig.type\"\n    >\n      <gn-ui-text-input\n        #searchText\n        [id]=\"wizardFieldConfig.id\"\n        [value]=\"wizardFieldData\"\n        [required]=\"wizardFieldConfig.required || false\"\n        hint=\"\"\n      ></gn-ui-text-input>\n    </div>\n    <div\n      class=\"flex-1 w-11/12\"\n      *ngIf=\"wizardFieldType.CHIPS === wizardFieldConfig.type\"\n    >\n      <gn-ui-chips-input\n        #chips\n        [selectedItems]=\"wizardFieldData\"\n        placeholder=\"\"\n        [id]=\"wizardFieldConfig.id\"\n        [url]=\"wizardFieldConfig.options.url\"\n        [loadOnce]=\"wizardFieldConfig.options.loadOnce\"\n      ></gn-ui-chips-input>\n    </div>\n    <div\n      class=\"h-32 w-11/12\"\n      *ngIf=\"wizardFieldType.TEXT_AREA === wizardFieldConfig.type\"\n    >\n      <gn-ui-text-area\n        #textArea\n        [id]=\"wizardFieldConfig.id\"\n        [value]=\"wizardFieldData\"\n        [required]=\"wizardFieldConfig.required || false\"\n        placeholder=\"\"\n      ></gn-ui-text-area>\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.DATA_PICKER === wizardFieldConfig.type\"\n    >\n      <input\n        [id]=\"wizardFieldConfig.id\"\n        type=\"text\"\n        (click)=\"datepicker.open()\"\n        class=\"rounded p-2 text-gray-700 w-full leading-tight focus:outline-none focus:border-primary\"\n        [value]=\"wizardFieldData\"\n        [matDatepicker]=\"datepicker\"\n        (dateChange)=\"onDateChange($event)\"\n      />\n      <mat-datepicker #datepicker></mat-datepicker>\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.DROPDOWN === wizardFieldConfig.type\"\n    >\n      <gn-ui-dropdown-selector\n        #dropdown\n        [id]=\"wizardFieldConfig.id\"\n        [title]=\"''\"\n        [extraBtnClass]=\"'secondary min-w-full'\"\n        [showTitle]=\"false\"\n        [choices]=\"dropdownChoices\"\n        [selected]=\"wizardFieldData\"\n        ariaName=\"search-sort-by\"\n      ></gn-ui-dropdown-selector>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex:1}gn-ui-text-input::ng-deep input,input[type=text]{height:100%;background:white;color:#000;font-style:italic;border-width:2px;border-color:var(--color-primary)}gn-ui-text-area::ng-deep textarea{border-width:2px;border-color:var(--color-primary)}gn-ui-dropdown-selector::ng-deep div{height:100%}gn-ui-dropdown-selector::ng-deep select{height:100%;border-width:2px;border-color:var(--color-primary);background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "hint", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: ChipsInputComponent, selector: "gn-ui-chips-input", inputs: ["url", "placeholder", "selectedItems", "required", "loadOnce", "autocompleteItems"], outputs: ["itemsChange"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "searchText", first: true, predicate: ["searchText"], descendants: true }, { propertyName: "chips", first: true, predicate: ["chips"], descendants: true }, { propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-1\">\n  <span [class]=\"wizardFieldConfig.icon + ' pr-10'\"></span>\n  <div class=\"flex flex-col flex-1\">\n    <div translate class=\"text-xl font-bold pb-1\">\n      {{ wizardFieldConfig.label }}\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.TEXT === wizardFieldConfig.type\"\n    >\n      <gn-ui-text-input\n        #searchText\n        [id]=\"wizardFieldConfig.id\"\n        [value]=\"wizardFieldData\"\n        [required]=\"wizardFieldConfig.required || false\"\n        hint=\"\"\n      ></gn-ui-text-input>\n    </div>\n    <div\n      class=\"flex-1 w-11/12\"\n      *ngIf=\"wizardFieldType.CHIPS === wizardFieldConfig.type\"\n    >\n      <gn-ui-chips-input\n        #chips\n        [selectedItems]=\"wizardFieldData\"\n        placeholder=\"\"\n        [id]=\"wizardFieldConfig.id\"\n        [url]=\"wizardFieldConfig.options.url\"\n        [loadOnce]=\"wizardFieldConfig.options.loadOnce\"\n      ></gn-ui-chips-input>\n    </div>\n    <div\n      class=\"h-32 w-11/12\"\n      *ngIf=\"wizardFieldType.TEXT_AREA === wizardFieldConfig.type\"\n    >\n      <gn-ui-text-area\n        #textArea\n        [id]=\"wizardFieldConfig.id\"\n        [value]=\"wizardFieldData\"\n        [required]=\"wizardFieldConfig.required || false\"\n        placeholder=\"\"\n      ></gn-ui-text-area>\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.DATA_PICKER === wizardFieldConfig.type\"\n    >\n      <input\n        [id]=\"wizardFieldConfig.id\"\n        type=\"text\"\n        (click)=\"datepicker.open()\"\n        class=\"rounded p-2 text-gray-700 w-full leading-tight focus:outline-none focus:border-primary\"\n        [value]=\"wizardFieldData\"\n        [matDatepicker]=\"datepicker\"\n        (dateChange)=\"onDateChange($event)\"\n      />\n      <mat-datepicker #datepicker></mat-datepicker>\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.DROPDOWN === wizardFieldConfig.type\"\n    >\n      <gn-ui-dropdown-selector\n        #dropdown\n        [id]=\"wizardFieldConfig.id\"\n        [title]=\"''\"\n        [extraBtnClass]=\"'secondary min-w-full'\"\n        [showTitle]=\"false\"\n        [choices]=\"dropdownChoices\"\n        [selected]=\"wizardFieldData\"\n        ariaName=\"search-sort-by\"\n      ></gn-ui-dropdown-selector>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex:1}gn-ui-text-input::ng-deep input,input[type=text]{height:100%;background:white;color:#000;font-style:italic;border-width:2px;border-color:var(--color-primary)}gn-ui-text-area::ng-deep textarea{border-width:2px;border-color:var(--color-primary)}gn-ui-dropdown-selector::ng-deep div{height:100%}gn-ui-dropdown-selector::ng-deep select{height:100%;border-width:2px;border-color:var(--color-primary);background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "hint", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: ChipsInputComponent, selector: "gn-ui-chips-input", inputs: ["url", "placeholder", "selectedItems", "required", "loadOnce", "autocompleteItems"], outputs: ["itemsChange"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WizardFieldComponent, decorators: [{
             type: Component,
@@ -35763,13 +35803,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
+const extractFileNameFromUrl = (url) => {
+    const pattern = new RegExp(`attachments/([^/?#]+)(?:[/?#]|$)`, 'i');
+    const match = url.match(pattern);
+    return match ? match[1] : '';
+};
+class OverviewUploadComponent {
+    constructor(recordsApiService, cd) {
+        this.recordsApiService = recordsApiService;
+        this.cd = cd;
+        this.overviewChange = new EventEmitter();
+        this.altTextChange = new EventEmitter();
+        this.resourceAltText = ''; // = ressourceFileName by default
+        this.resourceFileName = '';
+        this.errorHandle = (error) => {
+            console.error(error);
+            this.resourceUrl = null;
+            this.resourceAltText = '';
+            this.resourceFileName = '';
+            this.overviewChange.emit(null);
+            this.cd.markForCheck();
+        };
+    }
+    ngOnInit() {
+        this.recordsApiService.getAllResources(this.metadataUuid).subscribe({
+            next: (resources) => {
+                if (resources && resources.length > 0) {
+                    this.resourceUrl = new URL(resources[0]?.url);
+                    this.resourceAltText =
+                        this.resourceAltText === ''
+                            ? resources[0].filename
+                            : this.resourceAltText;
+                    this.resourceFileName = extractFileNameFromUrl(resources[0]?.url);
+                }
+                else {
+                    this.resourceUrl = null;
+                    this.resourceAltText = '';
+                    this.resourceFileName = '';
+                }
+                this.cd.markForCheck();
+            },
+            error: this.errorHandle,
+        });
+    }
+    handleFileChange(file) {
+        this.recordsApiService
+            .putResource(this.metadataUuid, file, 'public')
+            .subscribe({
+            next: (resource) => {
+                this.resourceUrl = new URL(resource.url);
+                this.resourceAltText = resource.filename;
+                this.overviewChange.emit({
+                    url: new URL(resource.url),
+                    description: resource.filename,
+                });
+                this.cd.markForCheck();
+            },
+            error: this.errorHandle,
+        });
+    }
+    handleUrlChange(url) {
+        this.recordsApiService
+            .putResourceFromURL(this.metadataUuid, url, 'public')
+            .subscribe({
+            next: (resource) => {
+                this.resourceUrl = new URL(resource.url);
+                this.resourceAltText = resource.filename;
+                this.overviewChange.emit({
+                    url: new URL(resource.url),
+                    description: resource.filename,
+                });
+                this.cd.markForCheck();
+            },
+            error: this.errorHandle,
+        });
+    }
+    handleAltTextChange(newAltText) {
+        this.resourceAltText = newAltText;
+        this.overviewChange.emit({
+            url: this.resourceUrl,
+            description: this.resourceAltText,
+        });
+        this.cd.markForCheck();
+    }
+    handleDelete() {
+        this.recordsApiService
+            .delResource(this.metadataUuid, this.resourceFileName)
+            .subscribe({
+            next: () => {
+                this.resourceAltText = null;
+                this.resourceUrl = null;
+                this.overviewChange.emit(null);
+                this.cd.markForCheck();
+            },
+            error: this.errorHandle,
+        });
+    }
+    ngOnChanges(changes) {
+        const overviewChanges = changes['formControl'];
+        if (overviewChanges &&
+            overviewChanges.currentValue !== overviewChanges.previousValue) {
+            let overview;
+            if (overviewChanges.currentValue.value &&
+                overviewChanges.currentValue.value.length > 0) {
+                overview = overviewChanges.currentValue.value[0];
+            }
+            else {
+                return;
+            }
+            if (overview.description && overview.description !== '') {
+                this.resourceAltText = overview.description;
+                this.cd.markForCheck();
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OverviewUploadComponent, deps: [{ token: RecordsApiService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OverviewUploadComponent, isStandalone: true, selector: "gn-ui-overview-upload", inputs: { metadataUuid: "metadataUuid", formControl: "formControl" }, outputs: { overviewChange: "overviewChange", altTextChange: "altTextChange" }, usesOnChanges: true, ngImport: i0, template: "<gn-ui-image-input\n  [maxSizeMB]=\"5\"\n  [previewUrl]=\"resourceUrl\"\n  [altText]=\"resourceAltText\"\n  [formControl]=\"formControl\"\n  (fileChange)=\"handleFileChange($event)\"\n  (urlChange)=\"handleUrlChange($event)\"\n  (altTextChange)=\"handleAltTextChange($event)\"\n  (delete)=\"handleDelete()\"\n></gn-ui-image-input>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: ImageInputComponent, selector: "gn-ui-image-input", inputs: ["formControl", "maxSizeMB", "previewUrl", "altText", "uploadProgress", "uploadError"], outputs: ["fileChange", "urlChange", "uploadCancel", "delete", "altTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OverviewUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-overview-upload', standalone: true, imports: [CommonModule, UiInputsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<gn-ui-image-input\n  [maxSizeMB]=\"5\"\n  [previewUrl]=\"resourceUrl\"\n  [altText]=\"resourceAltText\"\n  [formControl]=\"formControl\"\n  (fileChange)=\"handleFileChange($event)\"\n  (urlChange)=\"handleUrlChange($event)\"\n  (altTextChange)=\"handleAltTextChange($event)\"\n  (delete)=\"handleDelete()\"\n></gn-ui-image-input>\n" }]
+        }], ctorParameters: function () { return [{ type: RecordsApiService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { metadataUuid: [{
+                type: Input
+            }], formControl: [{
+                type: Input
+            }], overviewChange: [{
+                type: Output
+            }], altTextChange: [{
+                type: Output
+            }] } });
+class FormFieldOverviewsComponent {
+    handleOverviewChange(overView) {
+        this.control.setValue(overView ? [overView] : []);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldOverviewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldOverviewsComponent, isStandalone: true, selector: "gn-ui-form-field-overviews", inputs: { metadataUuid: "metadataUuid", control: "control" }, ngImport: i0, template: "<gn-ui-overview-upload\n  [metadataUuid]=\"metadataUuid\"\n  [formControl]=\"control\"\n  (overviewChange)=\"handleOverviewChange($event)\"\n></gn-ui-overview-upload>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OverviewUploadComponent, selector: "gn-ui-overview-upload", inputs: ["metadataUuid", "formControl"], outputs: ["overviewChange", "altTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldOverviewsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-overviews', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, OverviewUploadComponent], template: "<gn-ui-overview-upload\n  [metadataUuid]=\"metadataUuid\"\n  [formControl]=\"control\"\n  (overviewChange)=\"handleOverviewChange($event)\"\n></gn-ui-overview-upload>\n" }]
+        }], propDecorators: { metadataUuid: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }] } });
 class FormFieldComponent {
     set value(v) {
         this.formControl.setValue(v, {
             emitEvent: false,
         });
     }
-    constructor() {
+    constructor(facade) {
+        this.facade = facade;
+        this.metadataUuid$ = this.facade.record$.pipe(take(1), map$1((record) => record.uniqueIdentifier));
         this.formControl = new FormControl();
         this.valueChange = this.formControl.valueChanges;
     }
@@ -35797,6 +35985,9 @@ class FormFieldComponent {
     get isSpatialExtentField() {
         return this.model === 'spatialExtents';
     }
+    get isGraphicOverview() {
+        return this.model === 'overviews';
+    }
     get isSimpleField() {
         return this.model === 'uniqueIdentifier' || this.model === 'recordUpdated';
     }
@@ -35809,8 +36000,8 @@ class FormFieldComponent {
     get withoutWrapper() {
         return this.model === 'title' || this.model === 'abstract';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldComponent, isStandalone: true, selector: "gn-ui-form-field", inputs: { model: "model", config: "config", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full\">\n  <ng-container *ngIf=\"withoutWrapper; else withGenericWrapper\">\n    <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n  </ng-container>\n  <ng-template #withGenericWrapper>\n    <gn-ui-form-field-wrapper\n      [label]=\"config.labelKey! | translate\"\n      [hint]=\"config.hintKey! | translate\"\n    >\n      <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n    </gn-ui-form-field-wrapper>\n  </ng-template>\n</div>\n\n<ng-template #fieldContent>\n  <ng-container *ngIf=\"isTitle\">\n    <div class=\"flex justify-between items-center gap-3\">\n      <span\n        #titleInput\n        class=\"grow font-title text-3xl font-normal\"\n        [gnUiEditableLabel]=\"true\"\n        (editableLabelChanged)=\"formControl.setValue($event)\"\n      >\n        {{ formControl.value }}\n      </span>\n      <span\n        class=\"material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer\"\n        (click)=\"focusTitleInput()\"\n        >edit</span\n      >\n      <span\n        class=\"material-symbols-outlined gn-ui-icon-small m-2\"\n        [matTooltip]=\"config.hintKey! | translate\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"isAbstract\">\n    <gn-ui-form-field-rich\n      class=\"h-[8rem]\"\n      [control]=\"formControl\"\n      [label]=\"config.labelKey! | translate\"\n      [hint]=\"config.hintKey! | translate\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isLicenses\">\n    <gn-ui-form-field-license\n      [control]=\"formControl\"\n      [label]=\"config.labelKey! | translate\"\n    ></gn-ui-form-field-license>\n  </ng-container>\n  <ng-container *ngIf=\"isResourceUpdated\">\n    <gn-ui-form-field-resource-updated\n      [control]=\"formControl\"\n    ></gn-ui-form-field-resource-updated>\n  </ng-container>\n  <ng-container *ngIf=\"isUpdateFrequency\">\n    <gn-ui-form-field-update-frequency\n      [control]=\"formControl\"\n    ></gn-ui-form-field-update-frequency>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtents\">\n    <gn-ui-form-field-temporal-extents\n      [control]=\"formControl\"\n    ></gn-ui-form-field-temporal-extents>\n  </ng-container>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      type=\"text\"\n      [control]=\"formControl\"\n      [readonly]=\"isReadOnly\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isKeywords\">\n    <gn-ui-form-field-keywords\n      [control]=\"formControl\"\n    ></gn-ui-form-field-keywords>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: EditableLabelDirective, selector: "[gnUiEditableLabel]", inputs: ["gnUiEditableLabel"], outputs: ["editableLabelChanged"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", 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: ["control", "label"] }, { kind: "component", type: FormFieldResourceUpdatedComponent, selector: "gn-ui-form-field-resource-updated", inputs: ["control"] }, { kind: "component", type: FormFieldUpdateFrequencyComponent, selector: "gn-ui-form-field-update-frequency", inputs: ["control"] }, { kind: "component", type: FormFieldTemporalExtentsComponent, selector: "gn-ui-form-field-temporal-extents", inputs: ["control"] }, { kind: "component", type: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: ["type", "control", "readonly", "invalid", "placeholder", "options"] }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["control", "label", "hint", "helperText", "placeholder"] }, { kind: "component", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent" }, { kind: "component", type: FormFieldKeywordsComponent, selector: "gn-ui-form-field-keywords", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, deps: [{ token: EditorFacade }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldComponent, isStandalone: true, selector: "gn-ui-form-field", inputs: { model: "model", config: "config", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full\">\n  <ng-container *ngIf=\"withoutWrapper; else withGenericWrapper\">\n    <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n  </ng-container>\n  <ng-template #withGenericWrapper>\n    <gn-ui-form-field-wrapper\n      [label]=\"config.labelKey! | translate\"\n      [hint]=\"config.hintKey! | translate\"\n    >\n      <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n    </gn-ui-form-field-wrapper>\n  </ng-template>\n</div>\n\n<ng-template #fieldContent>\n  <ng-container *ngIf=\"isTitle\">\n    <div class=\"flex justify-between items-center gap-3\">\n      <span\n        #titleInput\n        class=\"grow font-title text-3xl font-normal\"\n        [gnUiEditableLabel]=\"true\"\n        (editableLabelChanged)=\"formControl.setValue($event)\"\n      >\n        {{ formControl.value }}\n      </span>\n      <span\n        class=\"material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer\"\n        (click)=\"focusTitleInput()\"\n        >edit</span\n      >\n      <span\n        class=\"material-symbols-outlined gn-ui-icon-small m-2\"\n        [matTooltip]=\"config.hintKey! | translate\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"isAbstract\">\n    <gn-ui-form-field-rich\n      class=\"h-[8rem]\"\n      [control]=\"formControl\"\n      [label]=\"config.labelKey! | translate\"\n      [hint]=\"config.hintKey! | translate\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isLicenses\">\n    <gn-ui-form-field-license\n      [control]=\"formControl\"\n      [label]=\"config.labelKey! | translate\"\n    ></gn-ui-form-field-license>\n  </ng-container>\n  <ng-container *ngIf=\"isResourceUpdated\">\n    <gn-ui-form-field-resource-updated\n      [control]=\"formControl\"\n    ></gn-ui-form-field-resource-updated>\n  </ng-container>\n  <ng-container *ngIf=\"isUpdateFrequency\">\n    <gn-ui-form-field-update-frequency\n      [control]=\"formControl\"\n    ></gn-ui-form-field-update-frequency>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtents\">\n    <gn-ui-form-field-temporal-extents\n      [control]=\"formControl\"\n    ></gn-ui-form-field-temporal-extents>\n  </ng-container>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      type=\"text\"\n      [control]=\"formControl\"\n      [readonly]=\"isReadOnly\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isGraphicOverview\">\n    <gn-ui-form-field-overviews\n      [control]=\"formControl\"\n      [metadataUuid]=\"metadataUuid$ | async\"\n    ></gn-ui-form-field-overviews>\n  </ng-container>\n  <ng-container *ngIf=\"isKeywords\">\n    <gn-ui-form-field-keywords\n      [control]=\"formControl\"\n    ></gn-ui-form-field-keywords>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: EditableLabelDirective, selector: "[gnUiEditableLabel]", inputs: ["gnUiEditableLabel"], outputs: ["editableLabelChanged"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormFieldWrapperComponent, selector: "gn-ui-form-field-wrapper", inputs: ["label", "hint"] }, { kind: "component", type: FormFieldLicenseComponent, selector: "gn-ui-form-field-license", inputs: ["control", "label"] }, { kind: "component", type: FormFieldResourceUpdatedComponent, selector: "gn-ui-form-field-resource-updated", inputs: ["control"] }, { kind: "component", type: FormFieldUpdateFrequencyComponent, selector: "gn-ui-form-field-update-frequency", inputs: ["control"] }, { kind: "component", type: FormFieldTemporalExtentsComponent, selector: "gn-ui-form-field-temporal-extents", inputs: ["control"] }, { kind: "component", type: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: ["type", "control", "readonly", "invalid", "placeholder", "options"] }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["control", "label", "hint", "helperText", "placeholder"] }, { kind: "component", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent" }, { kind: "component", type: FormFieldKeywordsComponent, selector: "gn-ui-form-field-keywords", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: FormFieldOverviewsComponent, selector: "gn-ui-form-field-overviews", inputs: ["metadataUuid", "control"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -35833,8 +36024,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FormFieldArrayComponent,
                         FormFieldKeywordsComponent,
                         TranslateModule,
-                    ], template: "<div class=\"flex flex-col h-full\">\n  <ng-container *ngIf=\"withoutWrapper; else withGenericWrapper\">\n    <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n  </ng-container>\n  <ng-template #withGenericWrapper>\n    <gn-ui-form-field-wrapper\n      [label]=\"config.labelKey! | translate\"\n      [hint]=\"config.hintKey! | translate\"\n    >\n      <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n    </gn-ui-form-field-wrapper>\n  </ng-template>\n</div>\n\n<ng-template #fieldContent>\n  <ng-container *ngIf=\"isTitle\">\n    <div class=\"flex justify-between items-center gap-3\">\n      <span\n        #titleInput\n        class=\"grow font-title text-3xl font-normal\"\n        [gnUiEditableLabel]=\"true\"\n        (editableLabelChanged)=\"formControl.setValue($event)\"\n      >\n        {{ formControl.value }}\n      </span>\n      <span\n        class=\"material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer\"\n        (click)=\"focusTitleInput()\"\n        >edit</span\n      >\n      <span\n        class=\"material-symbols-outlined gn-ui-icon-small m-2\"\n        [matTooltip]=\"config.hintKey! | translate\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"isAbstract\">\n    <gn-ui-form-field-rich\n      class=\"h-[8rem]\"\n      [control]=\"formControl\"\n      [label]=\"config.labelKey! | translate\"\n      [hint]=\"config.hintKey! | translate\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isLicenses\">\n    <gn-ui-form-field-license\n      [control]=\"formControl\"\n      [label]=\"config.labelKey! | translate\"\n    ></gn-ui-form-field-license>\n  </ng-container>\n  <ng-container *ngIf=\"isResourceUpdated\">\n    <gn-ui-form-field-resource-updated\n      [control]=\"formControl\"\n    ></gn-ui-form-field-resource-updated>\n  </ng-container>\n  <ng-container *ngIf=\"isUpdateFrequency\">\n    <gn-ui-form-field-update-frequency\n      [control]=\"formControl\"\n    ></gn-ui-form-field-update-frequency>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtents\">\n    <gn-ui-form-field-temporal-extents\n      [control]=\"formControl\"\n    ></gn-ui-form-field-temporal-extents>\n  </ng-container>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      type=\"text\"\n      [control]=\"formControl\"\n      [readonly]=\"isReadOnly\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isKeywords\">\n    <gn-ui-form-field-keywords\n      [control]=\"formControl\"\n    ></gn-ui-form-field-keywords>\n  </ng-container>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { model: [{
+                        FormFieldOverviewsComponent,
+                    ], template: "<div class=\"flex flex-col h-full\">\n  <ng-container *ngIf=\"withoutWrapper; else withGenericWrapper\">\n    <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n  </ng-container>\n  <ng-template #withGenericWrapper>\n    <gn-ui-form-field-wrapper\n      [label]=\"config.labelKey! | translate\"\n      [hint]=\"config.hintKey! | translate\"\n    >\n      <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n    </gn-ui-form-field-wrapper>\n  </ng-template>\n</div>\n\n<ng-template #fieldContent>\n  <ng-container *ngIf=\"isTitle\">\n    <div class=\"flex justify-between items-center gap-3\">\n      <span\n        #titleInput\n        class=\"grow font-title text-3xl font-normal\"\n        [gnUiEditableLabel]=\"true\"\n        (editableLabelChanged)=\"formControl.setValue($event)\"\n      >\n        {{ formControl.value }}\n      </span>\n      <span\n        class=\"material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer\"\n        (click)=\"focusTitleInput()\"\n        >edit</span\n      >\n      <span\n        class=\"material-symbols-outlined gn-ui-icon-small m-2\"\n        [matTooltip]=\"config.hintKey! | translate\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"isAbstract\">\n    <gn-ui-form-field-rich\n      class=\"h-[8rem]\"\n      [control]=\"formControl\"\n      [label]=\"config.labelKey! | translate\"\n      [hint]=\"config.hintKey! | translate\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isLicenses\">\n    <gn-ui-form-field-license\n      [control]=\"formControl\"\n      [label]=\"config.labelKey! | translate\"\n    ></gn-ui-form-field-license>\n  </ng-container>\n  <ng-container *ngIf=\"isResourceUpdated\">\n    <gn-ui-form-field-resource-updated\n      [control]=\"formControl\"\n    ></gn-ui-form-field-resource-updated>\n  </ng-container>\n  <ng-container *ngIf=\"isUpdateFrequency\">\n    <gn-ui-form-field-update-frequency\n      [control]=\"formControl\"\n    ></gn-ui-form-field-update-frequency>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtents\">\n    <gn-ui-form-field-temporal-extents\n      [control]=\"formControl\"\n    ></gn-ui-form-field-temporal-extents>\n  </ng-container>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      type=\"text\"\n      [control]=\"formControl\"\n      [readonly]=\"isReadOnly\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isGraphicOverview\">\n    <gn-ui-form-field-overviews\n      [control]=\"formControl\"\n      [metadataUuid]=\"metadataUuid$ | async\"\n    ></gn-ui-form-field-overviews>\n  </ng-container>\n  <ng-container *ngIf=\"isKeywords\">\n    <gn-ui-form-field-keywords\n      [control]=\"formControl\"\n    ></gn-ui-form-field-keywords>\n  </ng-container>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: EditorFacade }]; }, propDecorators: { model: [{
                 type: Input
             }], config: [{
                 type: Input
@@ -35855,6 +36047,7 @@ class RecordFormComponent {
         if (!model) {
             return;
         }
+        console.log(newValue);
         this.facade.updateRecordField(model, newValue);
     }
     fieldTracker(index, field) {
@@ -36208,7 +36401,7 @@ class DefaultRouterModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultRouterModule, deps: [{ token: RouterService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DefaultRouterModule, declarations: [SearchRouterContainerDirective], imports: [i1$2.StoreFeatureModule, i3$3.StoreRouterConnectingModule, i1$8.EffectsFeatureModule], exports: [SearchRouterContainerDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DefaultRouterModule, declarations: [SearchRouterContainerDirective], imports: [i1$2.StoreFeatureModule, i3$4.StoreRouterConnectingModule, i1$8.EffectsFeatureModule], exports: [SearchRouterContainerDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultRouterModule, providers: [
             RouterFacade,
             {