geonetwork-ui 2.2.0-dev.bea8410b → 2.2.0-dev.dc3a671b

package/fesm2022/geonetwork-ui.mjs

@@ -32,7 +32,7 @@ import WMTS, { optionsFromCapabilities } from 'ol/source/WMTS';
 import { defaults, DragPan, MouseWheelZoom } from 'ol/interaction';
 import { mouseOnly, noModifierKeys, primaryAction, platformModifierKeyOnly } from 'ol/events/condition';
 import WMTSCapabilities from 'ol/format/WMTSCapabilities';
-import { WmsEndpoint, sharedFetch, useCache, WfsEndpoint } from '@camptocamp/ogc-client';
+import { WmsEndpoint, WfsEndpoint, sharedFetch, useCache } from '@camptocamp/ogc-client';
 import chroma from 'chroma-js';
 import { register, fromEPSGCode } from 'ol/proj/proj4';
 import proj4 from 'proj4/dist/proj4';
@@ -73,6 +73,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i3$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
+import * as basicLightbox from 'basiclightbox';
 import * as i1$8 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
 import tippy from 'tippy.js';
@@ -16848,6 +16849,8 @@ var de = {
 	"map.add.layer.file": "Aus einer Datei",
 	"map.add.layer.wfs": "Aus WFS",
 	"map.add.layer.wms": "Aus WMS",
+	"map.addFromFile.placeholder": "",
+	"map.help.addFromFile": "",
 	"map.layer.add": "",
 	"map.layers.available": "",
 	"map.layers.list": "Ebenen",
@@ -16855,6 +16858,7 @@ var de = {
 	"map.loading.service": "",
 	"map.navigation.message": "Bitte verwenden Sie STRG + Maus (oder zwei Finger auf einem Mobilgerät), um die Karte zu navigieren",
 	"map.select.layer": "Datenquelle",
+	"map.wfs.urlInput.hint": "",
 	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "Suche",
 	"nav.back": "Zurück",
@@ -17183,6 +17187,8 @@ var en = {
 	"map.add.layer.file": "From a file",
 	"map.add.layer.wfs": "From WFS",
 	"map.add.layer.wms": "From WMS",
+	"map.addFromFile.placeholder": "Click or drop a file here",
+	"map.help.addFromFile": "Click or drag and drop a file to add to the map (currently supports GeoJSON format only).",
 	"map.layer.add": "Add",
 	"map.layers.available": "Available Layers",
 	"map.layers.list": "Layers",
@@ -17190,6 +17196,7 @@ var en = {
 	"map.loading.service": "Loading service...",
 	"map.navigation.message": "Please use CTRL + mouse (or two fingers on mobile) to navigate the map",
 	"map.select.layer": "Data source",
+	"map.wfs.urlInput.hint": "Enter WFS service URL",
 	"map.wms.urlInput.hint": "Enter WMS service URL",
 	"multiselect.filter.placeholder": "Search",
 	"nav.back": "Back",
@@ -17518,6 +17525,8 @@ var es = {
 	"map.add.layer.file": "",
 	"map.add.layer.wfs": "",
 	"map.add.layer.wms": "",
+	"map.addFromFile.placeholder": "",
+	"map.help.addFromFile": "",
 	"map.layer.add": "",
 	"map.layers.available": "",
 	"map.layers.list": "",
@@ -17525,6 +17534,7 @@ var es = {
 	"map.loading.service": "",
 	"map.navigation.message": "",
 	"map.select.layer": "",
+	"map.wfs.urlInput.hint": "",
 	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "",
 	"nav.back": "",
@@ -17853,6 +17863,8 @@ var fr = {
 	"map.add.layer.file": "",
 	"map.add.layer.wfs": "",
 	"map.add.layer.wms": "",
+	"map.addFromFile.placeholder": "",
+	"map.help.addFromFile": "",
 	"map.layer.add": "",
 	"map.layers.available": "",
 	"map.layers.list": "",
@@ -17860,6 +17872,7 @@ var fr = {
 	"map.loading.service": "",
 	"map.navigation.message": "Veuillez utiliser CTRL + souris (ou deux doigts sur mobile) pour naviguer sur la carte",
 	"map.select.layer": "Source de données",
+	"map.wfs.urlInput.hint": "",
 	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "Rechercher",
 	"nav.back": "Retour",
@@ -18188,6 +18201,8 @@ var it = {
 	"map.add.layer.file": "Da un file",
 	"map.add.layer.wfs": "Da un WFS",
 	"map.add.layer.wms": "Da un WMS",
+	"map.addFromFile.placeholder": "",
+	"map.help.addFromFile": "",
 	"map.layer.add": "",
 	"map.layers.available": "",
 	"map.layers.list": "Layers",
@@ -18195,6 +18210,7 @@ var it = {
 	"map.loading.service": "",
 	"map.navigation.message": "Si prega di utilizzare CTRL + mouse (o due dita su mobile) per navigare sulla mappa",
 	"map.select.layer": "Sorgente dati",
+	"map.wfs.urlInput.hint": "",
 	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "Cerca",
 	"nav.back": "Indietro",
@@ -18523,6 +18539,8 @@ var nl = {
 	"map.add.layer.file": "",
 	"map.add.layer.wfs": "",
 	"map.add.layer.wms": "",
+	"map.addFromFile.placeholder": "",
+	"map.help.addFromFile": "",
 	"map.layer.add": "",
 	"map.layers.available": "",
 	"map.layers.list": "",
@@ -18530,6 +18548,7 @@ var nl = {
 	"map.loading.service": "",
 	"map.navigation.message": "",
 	"map.select.layer": "",
+	"map.wfs.urlInput.hint": "",
 	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "",
 	"nav.back": "",
@@ -18858,6 +18877,8 @@ var pt = {
 	"map.add.layer.file": "",
 	"map.add.layer.wfs": "",
 	"map.add.layer.wms": "",
+	"map.addFromFile.placeholder": "",
+	"map.help.addFromFile": "",
 	"map.layer.add": "",
 	"map.layers.available": "",
 	"map.layers.list": "",
@@ -18865,6 +18886,7 @@ var pt = {
 	"map.loading.service": "",
 	"map.navigation.message": "",
 	"map.select.layer": "",
+	"map.wfs.urlInput.hint": "",
 	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "",
 	"nav.back": "",
@@ -19337,6 +19359,7 @@ class Gn4MetadataMapper extends MetadataBaseMapper {
             useLimitations: [],
             spatialExtents: [],
             temporalExtents: [],
+            overviews: [],
         };
         const record = Object.keys(_source).reduce((prev, fieldName) => this.fieldMapper.getMappingFn(fieldName)(prev, _source), emptyRecord);
         return lastValueFrom(this.orgsService.addOrganizationToRecordFromSource(_source, record));
@@ -22574,6 +22597,7 @@ const DEFAULT_VIEW = {
     center: [0, 15],
     zoom: 2,
 };
+const WFS_MAX_FEATURES = 10000;
 class MapContextService {
     constructor(mapUtils, styleService) {
         this.mapUtils = mapUtils;
@@ -22632,6 +22656,7 @@ class MapContextService {
                             urlObj.searchParams.set('typename', layerModel.name);
                             urlObj.searchParams.set('srsname', 'EPSG:3857');
                             urlObj.searchParams.set('bbox', `${extent.join(',')},EPSG:3857`);
+                            urlObj.searchParams.set('maxFeatures', WFS_MAX_FEATURES.toString());
                             return urlObj.toString();
                         },
                         strategy: bbox,
@@ -23179,6 +23204,7 @@ class ThumbnailComponent {
     constructor(optionalPlaceholderUrl) {
         this.optionalPlaceholderUrl = optionalPlaceholderUrl;
         this.fit = 'cover';
+        this.placeholderShown = new EventEmitter();
         this.placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER;
         this.images = [];
     }
@@ -23214,6 +23240,7 @@ class ThumbnailComponent {
     setNewSrcImage(image) {
         this.imgFit = image.fit;
         this.imgUrl = image.url;
+        this.placeholderShown.emit(this.isPlaceholder);
     }
     setPlaceholder() {
         this.setNewSrcImage({ url: this.placeholderUrl, fit: 'scale-down' });
@@ -23236,7 +23263,7 @@ class ThumbnailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ThumbnailComponent, deps: [{ token: THUMBNAIL_PLACEHOLDER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: { thumbnailUrl: "thumbnailUrl", fit: "fit" }, viewQueries: [{ propertyName: "imgElement", first: true, predicate: ["imageElement"], descendants: true }, { propertyName: "containerElement", first: true, predicate: ["containerElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #containerElement\n  class=\"h-full w-full relative shrink-0 overflow-hidden flex items-center\"\n  [ngClass]=\"isPlaceholder ? 'bg-gray-100' : 'bg-white'\"\n  [attr.data-cy-is-placeholder]=\"isPlaceholder.toString()\"\n>\n  <img\n    #imageElement\n    class=\"relative w-full object-center\"\n    [ngClass]=\"imgFit === 'contain' ? 'h-4/5' : 'h-full'\"\n    [ngStyle]=\"{ objectFit: imgFit }\"\n    alt=\"thumbnail\"\n    loading=\"lazy\"\n    (load)=\"setObjectFit()\"\n    [src]=\"imgUrl\"\n    (error)=\"useFallback()\"\n  />\n</div>\n", dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: { thumbnailUrl: "thumbnailUrl", fit: "fit" }, outputs: { placeholderShown: "placeholderShown" }, viewQueries: [{ propertyName: "imgElement", first: true, predicate: ["imageElement"], descendants: true }, { propertyName: "containerElement", first: true, predicate: ["containerElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #containerElement\n  class=\"h-full w-full relative shrink-0 overflow-hidden flex items-center\"\n  [ngClass]=\"isPlaceholder ? 'bg-gray-100' : 'bg-white'\"\n  [attr.data-cy-is-placeholder]=\"isPlaceholder.toString()\"\n>\n  <img\n    #imageElement\n    class=\"relative w-full object-center\"\n    [ngClass]=\"imgFit === 'contain' ? 'h-4/5' : 'h-full'\"\n    [ngStyle]=\"{ objectFit: imgFit }\"\n    alt=\"thumbnail\"\n    loading=\"lazy\"\n    (load)=\"setObjectFit()\"\n    [src]=\"imgUrl\"\n    (error)=\"useFallback()\"\n  />\n</div>\n", dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ThumbnailComponent, decorators: [{
             type: Component,
@@ -23256,11 +23283,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             }], containerElement: [{
                 type: ViewChild,
                 args: ['containerElement']
+            }], placeholderShown: [{
+                type: Output
             }] } });
 
 class RecordPreviewCardComponent extends RecordPreviewComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordPreviewCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordPreviewCardComponent, selector: "gn-ui-record-preview-card", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"h-full border bg-white rounded-sm overflow-hidden transition duration-200 transform hover:scale-105 hover:bg-gray-50 border-gray-300 hover:border-primary hover:text-primary\"\n>\n  <a\n    [href]=\"record.landingPage\"\n    [title]=\"record.abstract\"\n    [target]=\"linkTarget\"\n  >\n    <div class=\"flex flex-col min-h-full\">\n      <gn-ui-thumbnail\n        class=\"lg:h-48 md:h-36 border-b border-gray-200 bg-gray-100\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n      ></gn-ui-thumbnail>\n\n      <div class=\"grow p-4\">\n        <h1 class=\"title-font text-lg font-medium mb-3 clamp-2\">\n          {{ record.title }}\n        </h1>\n        <p class=\"leading-relaxed text-sm text-gray-700 clamp-3\">\n          {{ record.abstract }}\n        </p>\n      </div>\n    </div>\n  </a>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordPreviewCardComponent, selector: "gn-ui-record-preview-card", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"h-full border bg-white rounded-sm overflow-hidden transition duration-200 transform hover:scale-105 hover:bg-gray-50 border-gray-300 hover:border-primary hover:text-primary\"\n>\n  <a\n    [href]=\"record.landingPage\"\n    [title]=\"record.abstract\"\n    [target]=\"linkTarget\"\n  >\n    <div class=\"flex flex-col min-h-full\">\n      <gn-ui-thumbnail\n        class=\"lg:h-48 md:h-36 border-b border-gray-200 bg-gray-100\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n      ></gn-ui-thumbnail>\n\n      <div class=\"grow p-4\">\n        <h1 class=\"title-font text-lg font-medium mb-3 clamp-2\">\n          {{ record.title }}\n        </h1>\n        <p class=\"leading-relaxed text-sm text-gray-700 clamp-3\">\n          {{ record.abstract }}\n        </p>\n      </div>\n    </div>\n  </a>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordPreviewCardComponent, decorators: [{
             type: Component,
@@ -23269,7 +23298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 class RecordPreviewListComponent extends RecordPreviewComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordPreviewListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordPreviewListComponent, selector: "gn-ui-record-preview-list", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"h-40 bg-white transition duration-200 border border-gray-200 rounded-md hover:bg-gray-50 hover:border-primary hover:text-primary\"\n>\n  <a\n    [href]=\"record.landingPage\"\n    [target]=\"linkTarget\"\n    [title]=\"record.abstract\"\n  >\n    <div class=\"h-full flex flex-row items-center shadow-sm\">\n      <gn-ui-thumbnail\n        class=\"w-40 h-full shrink-0 border-r border-gray-200 bg-gray-100\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n      ></gn-ui-thumbnail>\n\n      <div class=\"grow h-full px-6 py-4 flex flex-col overflow-hidden\">\n        <div class=\"title-font text-lg font-medium mb-2\">\n          <h1 class=\"truncate\">{{ record.title }}</h1>\n        </div>\n        <p class=\"leading-relaxed clamp-3 text-sm text-gray-700\">\n          {{ record.abstract }}\n        </p>\n        <div class=\"grow\"></div>\n        <div class=\"flex flex-row items-center\">\n          <div\n            class=\"text-gray-500 text-xs truncate capitalize border-r mr-4 pr-4\"\n            *ngIf=\"record.kind === 'dataset'\"\n          >\n            <span translate>{{ record.updateFrequency }}</span>\n          </div>\n          <div\n            class=\"text-gray-500 text-xs border-gray-300 truncate viewable-downloadable\"\n            *ngIf=\"isViewable || isDownloadable\"\n          >\n            <span *ngIf=\"isViewable\" translate>record.action.view</span>\n            <span *ngIf=\"isViewable && isDownloadable\">,&nbsp;</span>\n            <span *ngIf=\"isDownloadable\" translate>record.action.download</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </a>\n</div>\n", styles: [".viewable-downloadable :first-child{text-transform:capitalize}\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: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordPreviewListComponent, selector: "gn-ui-record-preview-list", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"h-40 bg-white transition duration-200 border border-gray-200 rounded-md hover:bg-gray-50 hover:border-primary hover:text-primary\"\n>\n  <a\n    [href]=\"record.landingPage\"\n    [target]=\"linkTarget\"\n    [title]=\"record.abstract\"\n  >\n    <div class=\"h-full flex flex-row items-center shadow-sm\">\n      <gn-ui-thumbnail\n        class=\"w-40 h-full shrink-0 border-r border-gray-200 bg-gray-100\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n      ></gn-ui-thumbnail>\n\n      <div class=\"grow h-full px-6 py-4 flex flex-col overflow-hidden\">\n        <div class=\"title-font text-lg font-medium mb-2\">\n          <h1 class=\"truncate\">{{ record.title }}</h1>\n        </div>\n        <p class=\"leading-relaxed clamp-3 text-sm text-gray-700\">\n          {{ record.abstract }}\n        </p>\n        <div class=\"grow\"></div>\n        <div class=\"flex flex-row items-center\">\n          <div\n            class=\"text-gray-500 text-xs truncate capitalize border-r mr-4 pr-4\"\n            *ngIf=\"record.kind === 'dataset'\"\n          >\n            <span translate>{{ record.updateFrequency }}</span>\n          </div>\n          <div\n            class=\"text-gray-500 text-xs border-gray-300 truncate viewable-downloadable\"\n            *ngIf=\"isViewable || isDownloadable\"\n          >\n            <span *ngIf=\"isViewable\" translate>record.action.view</span>\n            <span *ngIf=\"isViewable && isDownloadable\">,&nbsp;</span>\n            <span *ngIf=\"isDownloadable\" translate>record.action.download</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </a>\n</div>\n", styles: [".viewable-downloadable :first-child{text-transform:capitalize}\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: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordPreviewListComponent, decorators: [{
             type: Component,
@@ -23417,7 +23446,7 @@ class RecordPreviewRowComponent extends RecordPreviewComponent {
         this.elementRef = elementRef;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordPreviewRowComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordPreviewRowComponent, selector: "gn-ui-record-preview-row", usesInheritance: true, ngImport: i0, template: "<a\n  class=\"group container-lg mx-auto flex cursor-pointer flex-wrap sm:flex-nowrap\"\n  [title]=\"record.title\"\n  [attr.href]=\"linkHref\"\n>\n  <div class=\"shrink-0 w-full sm:w-52\">\n    <div\n      class=\"overflow-hidden bg-gray-100 rounded-lg w-full border border-gray-300 h-36\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full object-cover object-left-top\"\n        [thumbnailUrl]=\"[record.overviews?.[0]?.url?.toString(), organization?.logoUrl?.toString()]\"\n        [fit]=\"['cover', 'contain']\"\n      ></gn-ui-thumbnail>\n    </div>\n  </div>\n  <div\n    class=\"content grid grow relative sm:pl-6 sm:pr-12\"\n    style=\"grid-template-columns: auto 70px\"\n  >\n    <div class=\"mb-3 mt-5 sm:mt-2\">\n      <div\n        class=\"font-title text-21 text-title line-clamp-2 col-start-1 col-span-2 sm:line-clamp-1 group-hover:text-primary transition-colors\"\n        data-cy=\"recordTitle\"\n      >\n        {{ record.title }}\n      </div>\n    </div>\n    <div\n      class=\"abstract mt-4 mb-5 h-36 line-clamp-6 col-start-1 col-span-2 row-start-3 sm:mb-2 sm:h-[4.5rem] sm:line-clamp-3 sm:row-start-2 sm:mt-0\"\n      data-cy=\"recordAbstract\"\n    >\n      {{ abstract }}\n    </div>\n    <div\n      class=\"text-primary opacity-45 uppercase col-start-1 col-span-2 row-start-2 sm:truncate sm:row-start-3 sm:col-span-1\"\n      data-cy=\"recordOrg\"\n      [class]=\"metadataQualityDisplay ? 'limit-organisation-with-quality' : ''\"\n    >\n      {{ organization?.name }}\n    </div>\n    <div\n      class=\"icons flex flex-row col-start-1 row-start-4 sm:col-start-2 sm:row-start-3 sm:absolute sm:right-[0.4em]\"\n    >\n      <mat-icon\n        *ngIf=\"isDownloadable\"\n        class=\"material-symbols-outlined text-primary opacity-45 mx-1\"\n        >cloud_download</mat-icon\n      >\n      <mat-icon\n        *ngIf=\"isViewable\"\n        class=\"material-symbols-outlined text-primary opacity-45 mx-1\"\n        >map</mat-icon\n      >\n    </div>\n    <div\n      *ngIf=\"metadataQualityDisplay\"\n      class=\"col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]\"\n    >\n      <gn-ui-metadata-quality\n        smaller=\"true\"\n        [metadata]=\"record\"\n        [metadataQualityDisplay]=\"metadataQualityDisplay\"\n      ></gn-ui-metadata-quality>\n    </div>\n    <div\n      class=\"text-right col-start-3 row-start-4 sm:absolute sm:col-start-2 sm:row-start-1 sm:top-[-1.125em] sm:right-[0.4em]\"\n      data-cy=\"recordFav\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"favoriteTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: record }\"\n      ></ng-container>\n    </div>\n  </div>\n</a>\n", styles: [".limit-organisation-with-quality{max-width:calc(100% - 170px)}\n"], dependencies: [{ 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: "component", type: MetadataQualityComponent, selector: "gn-ui-metadata-quality", inputs: ["metadata", "smaller", "metadataQualityDisplay"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordPreviewRowComponent, selector: "gn-ui-record-preview-row", usesInheritance: true, ngImport: i0, template: "<a\n  class=\"group container-lg mx-auto flex cursor-pointer flex-wrap sm:flex-nowrap\"\n  [title]=\"record.title\"\n  [attr.href]=\"linkHref\"\n>\n  <div class=\"shrink-0 w-full sm:w-52\">\n    <div\n      class=\"overflow-hidden bg-gray-100 rounded-lg w-full border border-gray-300 h-36\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full object-cover object-left-top\"\n        [thumbnailUrl]=\"[record.overviews?.[0]?.url?.toString(), organization?.logoUrl?.toString()]\"\n        [fit]=\"['cover', 'contain']\"\n      ></gn-ui-thumbnail>\n    </div>\n  </div>\n  <div\n    class=\"content grid grow relative sm:pl-6 sm:pr-12\"\n    style=\"grid-template-columns: auto 70px\"\n  >\n    <div class=\"mb-3 mt-5 sm:mt-2\">\n      <div\n        class=\"font-title text-21 text-title line-clamp-2 col-start-1 col-span-2 sm:line-clamp-1 group-hover:text-primary transition-colors\"\n        data-cy=\"recordTitle\"\n      >\n        {{ record.title }}\n      </div>\n    </div>\n    <div\n      class=\"abstract mt-4 mb-5 h-36 line-clamp-6 col-start-1 col-span-2 row-start-3 sm:mb-2 sm:h-[4.5rem] sm:line-clamp-3 sm:row-start-2 sm:mt-0\"\n      data-cy=\"recordAbstract\"\n    >\n      {{ abstract }}\n    </div>\n    <div\n      class=\"text-primary opacity-45 uppercase col-start-1 col-span-2 row-start-2 sm:truncate sm:row-start-3 sm:col-span-1\"\n      data-cy=\"recordOrg\"\n      [class]=\"metadataQualityDisplay ? 'limit-organisation-with-quality' : ''\"\n    >\n      {{ organization?.name }}\n    </div>\n    <div\n      class=\"icons flex flex-row col-start-1 row-start-4 sm:col-start-2 sm:row-start-3 sm:absolute sm:right-[0.4em]\"\n    >\n      <mat-icon\n        *ngIf=\"isDownloadable\"\n        class=\"material-symbols-outlined text-primary opacity-45 mx-1\"\n        >cloud_download</mat-icon\n      >\n      <mat-icon\n        *ngIf=\"isViewable\"\n        class=\"material-symbols-outlined text-primary opacity-45 mx-1\"\n        >map</mat-icon\n      >\n    </div>\n    <div\n      *ngIf=\"metadataQualityDisplay\"\n      class=\"col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]\"\n    >\n      <gn-ui-metadata-quality\n        smaller=\"true\"\n        [metadata]=\"record\"\n        [metadataQualityDisplay]=\"metadataQualityDisplay\"\n      ></gn-ui-metadata-quality>\n    </div>\n    <div\n      class=\"text-right col-start-3 row-start-4 sm:absolute sm:col-start-2 sm:row-start-1 sm:top-[-1.125em] sm:right-[0.4em]\"\n      data-cy=\"recordFav\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"favoriteTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: record }\"\n      ></ng-container>\n    </div>\n  </div>\n</a>\n", styles: [".limit-organisation-with-quality{max-width:calc(100% - 170px)}\n"], dependencies: [{ 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: "component", type: MetadataQualityComponent, selector: "gn-ui-metadata-quality", inputs: ["metadata", "smaller", "metadataQualityDisplay"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordPreviewRowComponent, decorators: [{
             type: Component,
@@ -23435,7 +23464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 class RecordPreviewTitleComponent extends RecordPreviewComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordPreviewTitleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordPreviewTitleComponent, selector: "gn-ui-record-preview-title", usesInheritance: true, ngImport: i0, template: "<!-- Record list item: List Small -->\n<div\n  class=\"h-10 w-full border-b border-gray-200 transition duration-200 rounded-sm hover:text-primary\"\n>\n  <a\n    [href]=\"record.landingPage\"\n    [target]=\"linkTarget\"\n    [title]=\"record.abstract\"\n  >\n    <div class=\"h-full flex flex-row items-center\">\n      <gn-ui-thumbnail\n        class=\"w-10 h-full shrink-0 border-r border-gray-200 bg-gray-100\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n      ></gn-ui-thumbnail>\n\n      <div class=\"grow px-3 py-1 flex flex-col overflow-hidden\">\n        <h1 class=\"title-font text-sm font-bold truncate md:text-clip\">\n          {{ record.title }}\n        </h1>\n      </div>\n    </div>\n  </a>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordPreviewTitleComponent, selector: "gn-ui-record-preview-title", usesInheritance: true, ngImport: i0, template: "<!-- Record list item: List Small -->\n<div\n  class=\"h-10 w-full border-b border-gray-200 transition duration-200 rounded-sm hover:text-primary\"\n>\n  <a\n    [href]=\"record.landingPage\"\n    [target]=\"linkTarget\"\n    [title]=\"record.abstract\"\n  >\n    <div class=\"h-full flex flex-row items-center\">\n      <gn-ui-thumbnail\n        class=\"w-10 h-full shrink-0 border-r border-gray-200 bg-gray-100\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n      ></gn-ui-thumbnail>\n\n      <div class=\"grow px-3 py-1 flex flex-col overflow-hidden\">\n        <h1 class=\"title-font text-sm font-bold truncate md:text-clip\">\n          {{ record.title }}\n        </h1>\n      </div>\n    </div>\n  </a>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordPreviewTitleComponent, decorators: [{
             type: Component,
@@ -23475,7 +23504,7 @@ class RecordPreviewFeedComponent extends RecordPreviewComponent {
         return this.timeFormat.format(this.record.recordCreated, Date.now());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordPreviewFeedComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordPreviewFeedComponent, selector: "gn-ui-record-preview-feed", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"mx-[18px] pl-[18px] pb-[18px] border-solid border-l-2 border-gray-100\"\n>\n  <a\n    class=\"record-container block rounded-lg bg-white border border-white card-shadow\"\n    [attr.href]=\"linkHref\"\n    [target]=\"linkTarget\"\n  >\n    <div\n      class=\"record-header py-4 px-4 border-b border-gray-300 flex flex-row items-center relative transition duration-200\"\n    >\n      <div\n        class=\"absolute w-3 h-3 bg-secondary rounded-full\"\n        style=\"right: calc(100% + 14px)\"\n      ></div>\n      <div\n        class=\"record-header-image border border-gray-300 bg-white rounded-full w-16 h-16 object-contain mr-4 overflow-hidden transition duration-200 shrink-0\"\n      >\n        <mat-icon\n          *ngIf=\"!hasLogo\"\n          class=\"material-symbols-outlined text-gray-200\"\n          style=\"width: 42px; height: 42px; font-size: 42px; margin: 10px\"\n          >{{ hasOnlyPerson ? 'face' : 'home_work' }}</mat-icon\n        >\n        <gn-ui-thumbnail\n          *ngIf=\"hasLogo\"\n          [thumbnailUrl]=\"record.ownerOrganization?.logoUrl?.toString()\"\n          [fit]=\"'contain'\"\n        ></gn-ui-thumbnail>\n      </div>\n      <div class=\"flex flex-col overflow-hidden items-start\">\n        <span\n          *ngIf=\"hasOrganization\"\n          class=\"font-bold transition duration-200 text-primary truncate max-w-full\"\n        >\n          {{ record.ownerOrganization.name }}\n        </span>\n        <span\n          *ngIf=\"hasOnlyPerson\"\n          class=\"font-bold transition duration-200 text-primary truncate max-w-full\"\n        >\n          {{ contact.firstName }} {{ contact.lastName }}\n        </span>\n        <p class=\"\">\n          <span translate [translateParams]=\"{ time }\"\n            >record.was.created.time</span\n          >\n        </p>\n      </div>\n    </div>\n    <div class=\"pt-5 pb-5 px-10 relative\">\n      <div class=\"absolute top-[0.85em] right-[0.85em]\">\n        <ng-container\n          [ngTemplateOutlet]=\"favoriteTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: record }\"\n        ></ng-container>\n      </div>\n      <h1\n        class=\"font-title text-black text-[21px] font-medium mb-3 pr-8\"\n        data-cy=\"recordTitle\"\n      >\n        {{ record.title }}\n      </h1>\n      <p class=\"line-clamp-3\">{{ abstract }}</p>\n      <gn-ui-thumbnail\n        *ngIf=\"record.overviews?.[0]\"\n        class=\"block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n      ></gn-ui-thumbnail>\n      <div class=\"flex flex-row mt-3\" *ngIf=\"isDownloadable || isViewable\">\n        <mat-icon\n          *ngIf=\"isDownloadable\"\n          class=\"material-symbols-outlined text-primary opacity-45 mr-3\"\n          >cloud_download\n        </mat-icon>\n        <mat-icon\n          *ngIf=\"isViewable\"\n          class=\"material-symbols-outlined text-primary opacity-45 mr-3\"\n          >map\n        </mat-icon>\n      </div>\n    </div>\n  </a>\n</div>\n", styles: [".record-container:hover .record-header,.record-container:hover .record-header-image{border-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordPreviewFeedComponent, selector: "gn-ui-record-preview-feed", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"mx-[18px] pl-[18px] pb-[18px] border-solid border-l-2 border-gray-100\"\n>\n  <a\n    class=\"record-container block rounded-lg bg-white border border-white card-shadow\"\n    [attr.href]=\"linkHref\"\n    [target]=\"linkTarget\"\n  >\n    <div\n      class=\"record-header py-4 px-4 border-b border-gray-300 flex flex-row items-center relative transition duration-200\"\n    >\n      <div\n        class=\"absolute w-3 h-3 bg-secondary rounded-full\"\n        style=\"right: calc(100% + 14px)\"\n      ></div>\n      <div\n        class=\"record-header-image border border-gray-300 bg-white rounded-full w-16 h-16 object-contain mr-4 overflow-hidden transition duration-200 shrink-0\"\n      >\n        <mat-icon\n          *ngIf=\"!hasLogo\"\n          class=\"material-symbols-outlined text-gray-200\"\n          style=\"width: 42px; height: 42px; font-size: 42px; margin: 10px\"\n          >{{ hasOnlyPerson ? 'face' : 'home_work' }}</mat-icon\n        >\n        <gn-ui-thumbnail\n          *ngIf=\"hasLogo\"\n          [thumbnailUrl]=\"record.ownerOrganization?.logoUrl?.toString()\"\n          [fit]=\"'contain'\"\n        ></gn-ui-thumbnail>\n      </div>\n      <div class=\"flex flex-col overflow-hidden items-start\">\n        <span\n          *ngIf=\"hasOrganization\"\n          class=\"font-bold transition duration-200 text-primary truncate max-w-full\"\n        >\n          {{ record.ownerOrganization.name }}\n        </span>\n        <span\n          *ngIf=\"hasOnlyPerson\"\n          class=\"font-bold transition duration-200 text-primary truncate max-w-full\"\n        >\n          {{ contact.firstName }} {{ contact.lastName }}\n        </span>\n        <p class=\"\">\n          <span translate [translateParams]=\"{ time }\"\n            >record.was.created.time</span\n          >\n        </p>\n      </div>\n    </div>\n    <div class=\"pt-5 pb-5 px-10 relative\">\n      <div class=\"absolute top-[0.85em] right-[0.85em]\">\n        <ng-container\n          [ngTemplateOutlet]=\"favoriteTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: record }\"\n        ></ng-container>\n      </div>\n      <h1\n        class=\"font-title text-black text-[21px] font-medium mb-3 pr-8\"\n        data-cy=\"recordTitle\"\n      >\n        {{ record.title }}\n      </h1>\n      <p class=\"line-clamp-3\">{{ abstract }}</p>\n      <gn-ui-thumbnail\n        *ngIf=\"record.overviews?.[0]\"\n        class=\"block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n      ></gn-ui-thumbnail>\n      <div class=\"flex flex-row mt-3\" *ngIf=\"isDownloadable || isViewable\">\n        <mat-icon\n          *ngIf=\"isDownloadable\"\n          class=\"material-symbols-outlined text-primary opacity-45 mr-3\"\n          >cloud_download\n        </mat-icon>\n        <mat-icon\n          *ngIf=\"isViewable\"\n          class=\"material-symbols-outlined text-primary opacity-45 mr-3\"\n          >map\n        </mat-icon>\n      </div>\n    </div>\n  </a>\n</div>\n", styles: [".record-container:hover .record-header,.record-container:hover .record-header-image{border-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordPreviewFeedComponent, decorators: [{
             type: Component,
@@ -24461,11 +24490,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 class RelatedRecordCardComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RelatedRecordCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RelatedRecordCardComponent, selector: "gn-ui-related-record-card", inputs: { record: "record" }, ngImport: i0, template: "<a\n  class=\"w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0].url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$5.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"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RelatedRecordCardComponent, selector: "gn-ui-related-record-card", inputs: { record: "record" }, ngImport: i0, template: "<a\n  class=\"w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RelatedRecordCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-related-record-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0].url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n" }]
+            args: [{ selector: 'gn-ui-related-record-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n" }]
         }], propDecorators: { record: [{
                 type: Input
             }] } });
@@ -24493,11 +24522,11 @@ class MetadataContactComponent {
         this.organizationClick.emit(this.shownOrganization);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MetadataContactComponent, selector: "gn-ui-metadata-contact", inputs: { metadata: "metadata" }, outputs: { organizationClick: "organizationClick", contactClick: "contactClick" }, ngImport: i0, template: "<div class=\"py-5 px-5 rounded bg-gray-100 text-black mb-6 sm:mb-12\">\n  <div class=\"grid gap-3\">\n    <div>\n      <p class=\"text-sm font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name\"\n        >\n          {{ shownOrganization.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n    </div>\n    <div class=\"grid gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >call_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >person_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            location_on</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MetadataContactComponent, selector: "gn-ui-metadata-contact", inputs: { metadata: "metadata" }, outputs: { organizationClick: "organizationClick", contactClick: "contactClick" }, ngImport: i0, template: "<div class=\"py-5 px-5 rounded bg-gray-100 text-black mb-6 sm:mb-12\">\n  <div class=\"grid gap-3\">\n    <div>\n      <p class=\"text-sm font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name\"\n        >\n          {{ shownOrganization?.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n    </div>\n    <div class=\"grid gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >call_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >person_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            location_on</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataContactComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-metadata-contact', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"py-5 px-5 rounded bg-gray-100 text-black mb-6 sm:mb-12\">\n  <div class=\"grid gap-3\">\n    <div>\n      <p class=\"text-sm font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name\"\n        >\n          {{ shownOrganization.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n    </div>\n    <div class=\"grid gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >call_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >person_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            location_on</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'gn-ui-metadata-contact', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"py-5 px-5 rounded bg-gray-100 text-black mb-6 sm:mb-12\">\n  <div class=\"grid gap-3\">\n    <div>\n      <p class=\"text-sm font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name\"\n        >\n          {{ shownOrganization?.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n    </div>\n    <div class=\"grid gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >call_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            >person_outline</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            location_on</mat-icon\n          >\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { metadata: [{
                 type: Input
             }], organizationClick: [{
@@ -25900,6 +25929,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
+class ImageOverlayPreviewComponent {
+    constructor() {
+        this.isPlaceholderShown = new EventEmitter();
+    }
+    openLightbox(src) {
+        basicLightbox.create(`<img src="${src}"/>`).show();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ImageOverlayPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ImageOverlayPreviewComponent, selector: "gn-ui-image-overlay-preview", inputs: { imageUrl: "imageUrl" }, outputs: { isPlaceholderShown: "isPlaceholderShown" }, ngImport: i0, template: "<gn-ui-content-ghost\n  [showContent]=\"imageUrl !== undefined\"\n  ghostClass=\"h-36 mb-3\"\n>\n  <div\n    *ngIf=\"imageUrl\"\n    data-cy=\"record-thumbnail\"\n    class=\"flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0 mb-3\"\n  >\n    <gn-ui-thumbnail\n      class=\"relative h-full w-full\"\n      [thumbnailUrl]=\"imageUrl\"\n      fit=\"cover\"\n      (placeholderShown)=\"isPlaceholderShown.emit($event)\"\n    ></gn-ui-thumbnail>\n    <div class=\"relative\">\n      <gn-ui-button\n        class=\"absolute bottom-0 right-0 z-10 mr-2 mb-2\"\n        [type]=\"'outline'\"\n        [extraClass]=\"'!py-2 !px-0'\"\n        (buttonClick)=\"openLightbox(imageUrl)\"\n      >\n        <mat-icon class=\"material-symbols-outlined font-extralight\"\n          >zoom_out_map</mat-icon\n        >\n      </gn-ui-button>\n    </div>\n  </div>\n</gn-ui-content-ghost>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ImageOverlayPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-image-overlay-preview', template: "<gn-ui-content-ghost\n  [showContent]=\"imageUrl !== undefined\"\n  ghostClass=\"h-36 mb-3\"\n>\n  <div\n    *ngIf=\"imageUrl\"\n    data-cy=\"record-thumbnail\"\n    class=\"flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36 group-hover:shadow-xl group-hover:border-0 mb-3\"\n  >\n    <gn-ui-thumbnail\n      class=\"relative h-full w-full\"\n      [thumbnailUrl]=\"imageUrl\"\n      fit=\"cover\"\n      (placeholderShown)=\"isPlaceholderShown.emit($event)\"\n    ></gn-ui-thumbnail>\n    <div class=\"relative\">\n      <gn-ui-button\n        class=\"absolute bottom-0 right-0 z-10 mr-2 mb-2\"\n        [type]=\"'outline'\"\n        [extraClass]=\"'!py-2 !px-0'\"\n        (buttonClick)=\"openLightbox(imageUrl)\"\n      >\n        <mat-icon class=\"material-symbols-outlined font-extralight\"\n          >zoom_out_map</mat-icon\n        >\n      </gn-ui-button>\n    </div>\n  </div>\n</gn-ui-content-ghost>\n" }]
+        }], propDecorators: { imageUrl: [{
+                type: Input
+            }], isPlaceholderShown: [{
+                type: Output
+            }] } });
+
 class UiElementsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiElementsModule, declarations: [MetadataInfoComponent,
@@ -25922,7 +25970,8 @@ class UiElementsModule {
             PaginationButtonsComponent,
             MaxLinesComponent,
             RecordApiFormComponent,
-            MarkdownParserComponent], imports: [CommonModule,
+            MarkdownParserComponent,
+            ImageOverlayPreviewComponent], imports: [CommonModule,
             MatIconModule,
             MatTooltipModule,
             UiWidgetsModule,
@@ -25948,7 +25997,8 @@ class UiElementsModule {
             UserPreviewComponent,
             PaginationButtonsComponent,
             RecordApiFormComponent,
-            MarkdownParserComponent] }); }
+            MarkdownParserComponent,
+            ImageOverlayPreviewComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiElementsModule, imports: [CommonModule,
             MatIconModule,
             MatTooltipModule,
@@ -25998,6 +26048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         MaxLinesComponent,
                         RecordApiFormComponent,
                         MarkdownParserComponent,
+                        ImageOverlayPreviewComponent,
                     ],
                     exports: [
                         MetadataInfoComponent,
@@ -26019,6 +26070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         PaginationButtonsComponent,
                         RecordApiFormComponent,
                         MarkdownParserComponent,
+                        ImageOverlayPreviewComponent,
                     ],
                 }]
         }] });
@@ -28233,7 +28285,7 @@ class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
         return getLinkLabel(link);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerRecordPreviewComponent, deps: [{ token: i0.ElementRef }, { token: LinkClassifierService }, { token: MapFacade }, { token: MapUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerRecordPreviewComponent, selector: "gn-ui-add-layer-record-preview", usesInheritance: true, ngImport: i0, template: "<div class=\"w-full flex flex-row rounded-sm\" [title]=\"record.abstract\">\n  <gn-ui-thumbnail\n    class=\"w-16 h-16 shrink-0 border-r border-gray-200 bg-gray-100\"\n    [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n  ></gn-ui-thumbnail>\n\n  <div class=\"flex flex-col p-2 gap-2 overflow-hidden\">\n    <h1 class=\"text-sm font-medium truncate\">\n      {{ record.title }}\n    </h1>\n    <ng-container *ngFor=\"let link of mapLinks\">\n      <gn-ui-button\n        [type]=\"'outline'\"\n        (buttonClick)=\"handleLinkClick(link)\"\n        extraClass=\"!py-[8px] !px-[12px]\"\n      >\n        <div class=\"text-left text-[12px] line-clamp-2\">\n          {{ getLinkLabel(link) }}\n        </div>\n      </gn-ui-button>\n    </ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerRecordPreviewComponent, selector: "gn-ui-add-layer-record-preview", usesInheritance: true, ngImport: i0, template: "<div class=\"w-full flex flex-row rounded-sm\" [title]=\"record.abstract\">\n  <gn-ui-thumbnail\n    class=\"w-16 h-16 shrink-0 border-r border-gray-200 bg-gray-100\"\n    [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n  ></gn-ui-thumbnail>\n\n  <div class=\"flex flex-col p-2 gap-2 overflow-hidden\">\n    <h1 class=\"text-sm font-medium truncate\">\n      {{ record.title }}\n    </h1>\n    <ng-container *ngFor=\"let link of mapLinks\">\n      <gn-ui-button\n        [type]=\"'outline'\"\n        (buttonClick)=\"handleLinkClick(link)\"\n        extraClass=\"!py-[8px] !px-[12px]\"\n      >\n        <div class=\"text-left text-[12px] line-clamp-2\">\n          {{ getLinkLabel(link) }}\n        </div>\n      </gn-ui-button>\n    </ng-container>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerRecordPreviewComponent, decorators: [{
             type: Component,
@@ -28328,6 +28380,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             args: [{ selector: 'gn-ui-add-layer-from-wms', template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wmsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.wms.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container\n    *ngFor=\"let layer of layers\"\n    [ngTemplateOutlet]=\"layerTreeItem\"\n    [ngTemplateOutletContext]=\"{\n      layer: layer\n    }\"\n  ></ng-container>\n</div>\n\n<ng-template #layerTreeItem let-layer=\"layer\">\n  <div class=\"flex items-center justify-between layer-tree-item my-2\">\n    <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n      {{ layer.title }}\n    </p>\n    <gn-ui-button\n      *ngIf=\"layer.name\"\n      class=\"layer-add-btn\"\n      type=\"primary\"\n      (buttonClick)=\"addLayer(layer)\"\n      extraClass=\"text-sm !px-2 !py-1\"\n      translate\n      ><span translate> map.layer.add </span></gn-ui-button\n    >\n  </div>\n  <div *ngIf=\"layer.children?.length > 0\" class=\"ml-4\">\n    <ng-container\n      *ngFor=\"let child of layer.children\"\n      [ngTemplateOutlet]=\"layerTreeItem\"\n      [ngTemplateOutletContext]=\"{\n        layer: child\n      }\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: MapFacade }, { type: i0.ChangeDetectorRef }]; } });
 
+const INVALID_FILE_FORMAT_ERROR_MESSAGE = 'Invalid file format';
+class AddLayerFromFileComponent {
+    constructor(mapFacade, changeDetectorRef) {
+        this.mapFacade = mapFacade;
+        this.changeDetectorRef = changeDetectorRef;
+        this.errorMessage = null;
+        this.successMessage = null;
+        this.loading = false;
+        this.acceptedMimeType = ['.geojson'];
+        this.maxFileSize = 5000000;
+    }
+    async handleFileChange(file) {
+        if (!file) {
+            this.displayMessage(INVALID_FILE_FORMAT_ERROR_MESSAGE, 'error');
+            return;
+        }
+        if (file.size > this.maxFileSize) {
+            this.displayMessage('File size exceeds the limit of 5MB', 'error');
+            return;
+        }
+        await this.addLayer(file);
+    }
+    async addLayer(file) {
+        this.errorMessage = null;
+        this.loading = true;
+        try {
+            if (!this.isFileFormatValid(file)) {
+                this.displayMessage(INVALID_FILE_FORMAT_ERROR_MESSAGE, 'error');
+                return;
+            }
+            const fileExtension = this.getFileExtension(file);
+            switch (fileExtension) {
+                case 'geojson':
+                    await this.addGeoJsonLayer(file);
+                    break;
+                default:
+                    this.displayMessage(INVALID_FILE_FORMAT_ERROR_MESSAGE, 'error');
+                    break;
+            }
+        }
+        catch (error) {
+            const err = error;
+            this.displayMessage('Error loading file: ' + err.message, 'error');
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    addGeoJsonLayer(file) {
+        return new Promise((resolve, reject) => {
+            try {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    const result = reader.result;
+                    const title = file.name.split('.').slice(0, -1).join('.');
+                    const layerToAdd = {
+                        type: 'geojson',
+                        data: result,
+                    };
+                    this.mapFacade.addLayer({ ...layerToAdd, title: title });
+                    this.displayMessage('File successfully added to map', 'success');
+                    resolve();
+                };
+                reader.onerror = reject;
+                reader.readAsText(file);
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+    }
+    isFileFormatValid(file) {
+        const fileExtension = this.getFileExtension(file);
+        return this.acceptedMimeType.includes(`.${fileExtension}`);
+    }
+    getFileExtension(file) {
+        return file.name.split('.').pop();
+    }
+    displayMessage(message, type) {
+        if (type === 'success') {
+            this.successMessage = message;
+        }
+        else if (type === 'error') {
+            this.errorMessage = message;
+        }
+        setTimeout(() => {
+            this.successMessage = null;
+            this.errorMessage = null;
+            this.changeDetectorRef.detectChanges();
+        }, 5000);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromFileComponent, deps: [{ token: MapFacade }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromFileComponent, selector: "gn-ui-add-layer-from-file", ngImport: i0, template: "<div class=\"flex flex-col gap-2 my-2\">\n  <div class=\"flex items-center gap-4\">\n    <div class=\"flex-grow rounded-md border-2 border-gray-200\">\n      <gn-ui-drag-and-drop-file-input\n        (fileChange)=\"handleFileChange($event)\"\n        [accept]=\"acceptedMimeType.join(',')\"\n        [placeholder]=\"'map.addFromFile.placeholder' | translate\"\n        class=\"placeholder-grey\"\n      ></gn-ui-drag-and-drop-file-input>\n    </div>\n  </div>\n  <p class=\"text-sm text-gray-600\" translate>map.help.addFromFile</p>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"successMessage\" class=\"text-green-500 mt-2\">\n  {{ successMessage }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DragAndDropFileInputComponent, selector: "gn-ui-drag-and-drop-file-input", inputs: ["placeholder", "accept"], outputs: ["fileChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromFileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-add-layer-from-file', template: "<div class=\"flex flex-col gap-2 my-2\">\n  <div class=\"flex items-center gap-4\">\n    <div class=\"flex-grow rounded-md border-2 border-gray-200\">\n      <gn-ui-drag-and-drop-file-input\n        (fileChange)=\"handleFileChange($event)\"\n        [accept]=\"acceptedMimeType.join(',')\"\n        [placeholder]=\"'map.addFromFile.placeholder' | translate\"\n        class=\"placeholder-grey\"\n      ></gn-ui-drag-and-drop-file-input>\n    </div>\n  </div>\n  <p class=\"text-sm text-gray-600\" translate>map.help.addFromFile</p>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"successMessage\" class=\"text-green-500 mt-2\">\n  {{ successMessage }}\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: MapFacade }, { type: i0.ChangeDetectorRef }]; } });
+
+class AddLayerFromWfsComponent {
+    constructor(mapFacade, changeDetectorRef) {
+        this.mapFacade = mapFacade;
+        this.changeDetectorRef = changeDetectorRef;
+        this.wfsUrl = '';
+        this.loading = false;
+        this.layers = [];
+        this.wfsEndpoint = null;
+        this.urlChange = new Subject();
+        this.errorMessage = null;
+    }
+    ngOnInit() {
+        this.urlChange.pipe(debounceTime(700)).subscribe(() => this.loadLayers());
+    }
+    async loadLayers() {
+        this.errorMessage = null;
+        try {
+            this.loading = true;
+            if (this.wfsUrl.trim() === '') {
+                this.layers = [];
+                return;
+            }
+            this.wfsEndpoint = await new WfsEndpoint(this.wfsUrl).isReady();
+            this.layers = this.wfsEndpoint.getFeatureTypes();
+            console.log(this.layers);
+        }
+        catch (error) {
+            const err = error;
+            this.layers = [];
+            this.errorMessage = 'Error loading layers: ' + err.message;
+        }
+        finally {
+            this.loading = false;
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+    addLayer(layer) {
+        const layerToAdd = {
+            name: layer.name,
+            url: this.wfsUrl.toString(),
+            type: MapContextLayerTypeEnum.WFS,
+        };
+        this.mapFacade.addLayer({ ...layerToAdd, title: layer.title });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromWfsComponent, deps: [{ token: MapFacade }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromWfsComponent, selector: "gn-ui-add-layer-from-wfs", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wfsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.wfs.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container *ngFor=\"let layer of layers\">\n    <div class=\"flex items-center justify-between my-2 layer-item-tree\">\n      <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n        {{ layer.title }}\n      </p>\n      <gn-ui-button\n        *ngIf=\"layer.name\"\n        class=\"layer-add-btn\"\n        type=\"primary\"\n        (buttonClick)=\"addLayer(layer)\"\n        extraClass=\"text-sm !px-2 !py-1\"\n        translate\n        ><span translate> map.layer.add </span></gn-ui-button\n      >\n    </div>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromWfsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-add-layer-from-wfs', template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wfsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.wfs.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container *ngFor=\"let layer of layers\">\n    <div class=\"flex items-center justify-between my-2 layer-item-tree\">\n      <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n        {{ layer.title }}\n      </p>\n      <gn-ui-button\n        *ngIf=\"layer.name\"\n        class=\"layer-add-btn\"\n        type=\"primary\"\n        (buttonClick)=\"addLayer(layer)\"\n        extraClass=\"text-sm !px-2 !py-1\"\n        translate\n        ><span translate> map.layer.add </span></gn-ui-button\n      >\n    </div>\n  </ng-container>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: MapFacade }, { type: i0.ChangeDetectorRef }]; } });
+
 class LayersPanelComponent {
     constructor(mapFacade) {
         this.mapFacade = mapFacade;
@@ -28337,11 +28540,11 @@ class LayersPanelComponent {
         this.mapFacade.removeLayer(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LayersPanelComponent, deps: [{ token: MapFacade }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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 h-full\">Add from WFS</div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.file' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3 h-full\">Add from file</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$3.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$3.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: AddLayerFromCatalogComponent, selector: "gn-ui-add-layer-from-catalog" }, { kind: "component", type: AddLayerFromWmsComponent, selector: "gn-ui-add-layer-from-wms" }, { 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.1.7", 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.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$3.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$3.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: 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.1.7", ngImport: i0, type: LayersPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-layers-panel', changeDetection: ChangeDetectionStrategy.OnPush, 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 h-full\">Add from WFS</div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.file' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3 h-full\">Add from file</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" }]
+            args: [{ selector: 'gn-ui-layers-panel', changeDetection: ChangeDetectionStrategy.OnPush, 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.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" }]
         }], ctorParameters: function () { return [{ type: MapFacade }]; } });
 
 class MapEffects {
@@ -28382,7 +28585,9 @@ class FeatureMapModule {
             AddLayerFromCatalogComponent,
             MapContainerComponent,
             AddLayerRecordPreviewComponent,
-            AddLayerFromWmsComponent], imports: [CommonModule,
+            AddLayerFromWmsComponent,
+            AddLayerFromFileComponent,
+            AddLayerFromWfsComponent], imports: [CommonModule,
             UiMapModule,
             UiLayoutModule,
             MatIconModule,
@@ -28423,6 +28628,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         MapContainerComponent,
                         AddLayerRecordPreviewComponent,
                         AddLayerFromWmsComponent,
+                        AddLayerFromFileComponent,
+                        AddLayerFromWfsComponent,
                     ],
                     exports: [
                         MapContextComponent,
@@ -30403,7 +30610,7 @@ class OrganisationPreviewComponent {
         this.clickedOrganisation.emit(this.organisation);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: OrganisationPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: OrganisationPreviewComponent, selector: "gn-ui-organisation-preview", inputs: { organisation: "organisation", organisationUrl: "organisationUrl" }, outputs: { clickedOrganisation: "clickedOrganisation" }, ngImport: i0, template: "<a href (click)=\"clickOrganisation($event)\" [attr.href]=\"organisationUrl\">\n  <div\n    class=\"group cursor-pointer rounded-lg h-full flex flex-col\"\n    [title]=\"organisation.name\"\n  >\n    <div\n      class=\"flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"organisation.logoUrl\"\n        [fit]=\"'contain'\"\n      >\n      </gn-ui-thumbnail>\n    </div>\n    <div class=\"px-3 pb-2 capitalize flex flex-col flex-grow overflow-hidden\">\n      <span\n        class=\"flex-shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors\"\n        data-cy=\"organizationName\"\n      >\n        {{ organisation.name }}</span\n      >\n      <p\n        class=\"abstract mt-4 mb-5 sm:mb-2 sm:mt-0 flex-grow flex-shrink-1 overflow-hidden\"\n        data-cy=\"organizationDesc\"\n      >\n        {{ organisation.description }}\n      </p>\n      <div class=\"flex-shrink-0 text-primary opacity-50 flex leading-6\">\n        <mat-icon class=\"material-symbols-outlined text-primary opacity-50 mr-1\"\n          >folder_open\n        </mat-icon>\n        <span class=\"mx-1\" data-cy=\"organizationRecordsCount\">{{\n          organisation.recordCount\n        }}</span>\n        <span translate>record.metadata.publications</span>\n      </div>\n    </div>\n  </div>\n</a>\n", styles: [".abstract{position:relative}.abstract:after{content:\"\";position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,white,transparent);height:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: OrganisationPreviewComponent, selector: "gn-ui-organisation-preview", inputs: { organisation: "organisation", organisationUrl: "organisationUrl" }, outputs: { clickedOrganisation: "clickedOrganisation" }, ngImport: i0, template: "<a href (click)=\"clickOrganisation($event)\" [attr.href]=\"organisationUrl\">\n  <div\n    class=\"group cursor-pointer rounded-lg h-full flex flex-col\"\n    [title]=\"organisation.name\"\n  >\n    <div\n      class=\"flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"organisation.logoUrl\"\n        [fit]=\"'contain'\"\n      >\n      </gn-ui-thumbnail>\n    </div>\n    <div class=\"px-3 pb-2 capitalize flex flex-col flex-grow overflow-hidden\">\n      <span\n        class=\"flex-shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors\"\n        data-cy=\"organizationName\"\n      >\n        {{ organisation.name }}</span\n      >\n      <p\n        class=\"abstract mt-4 mb-5 sm:mb-2 sm:mt-0 flex-grow flex-shrink-1 overflow-hidden\"\n        data-cy=\"organizationDesc\"\n      >\n        {{ organisation.description }}\n      </p>\n      <div class=\"flex-shrink-0 text-primary opacity-50 flex leading-6\">\n        <mat-icon class=\"material-symbols-outlined text-primary opacity-50 mr-1\"\n          >folder_open\n        </mat-icon>\n        <span class=\"mx-1\" data-cy=\"organizationRecordsCount\">{{\n          organisation.recordCount\n        }}</span>\n        <span translate>record.metadata.publications</span>\n      </div>\n    </div>\n  </div>\n</a>\n", styles: [".abstract{position:relative}.abstract:after{content:\"\";position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,white,transparent);height:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: OrganisationPreviewComponent, decorators: [{
             type: Component,
@@ -31862,5 +32069,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, AuthService, AutocompleteComponent, AvatarComponent, AvatarServiceInterface, BLOCK_MODEL_FIXTURE, BadgeComponent, BaseReader, ButtonComponent, CLEAR_ERROR, CLEAR_RESULTS, CONFIG_MALFORMED, CONFIG_MINIMAL, CONFIG_MISSING_MANDATORY, CONFIG_OK, CONFIG_UNRECOGNIZED_KEYS, CONFIG_WITH_TRANSLATIONS, CONFIG_WRONG_LANGUAGE_CODE, CarouselComponent, CatalogTitleComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ChipsInputComponent, ClearError, ClearResults, ColorScaleComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_BASELAYER_CONTEXT, DEFAULT_GN4_LOGIN_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DEFAULT_STYLE_FIXTURE, DEFAULT_STYLE_HL_FIXTURE, DEFAULT_VIEW, DataService, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DateRangePickerComponent, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EMPTY_BLOCK_MODEL_FIXTURE, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalViewerButtonComponent, FACET_ITEM_FIXTURE, FEATURE_MAP_OPTIONS, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FORMATS, FacetBlockComponent, FacetBlockStubComponent, FacetItemComponent, FacetItemStubComponent, FacetListComponent, FacetsContainerComponent, FacetsModule, FavoriteStarComponent, FavoritesService, FeatureAuthModule, FeatureCatalogModule, FeatureDatavizModule, FeatureDetailComponent, FeatureEditorModule, FeatureInfoService, FeatureMapModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileTranslateLoader, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldFileComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentComponent, FuzzySearchComponent, GN_UI_VERSION, GeoTableViewComponent, Gn4MetadataMapper, Gn4Repository, Gn4SettingsService, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, LANGUAGES_LIST, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LANG_3_TO_2_MAPPER, LOGIN_URL, LONLAT_CRS_CODES, LangService, LanguageSwitcherComponent, LayersPanelComponent, LinkCardComponent, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_CONFIG_FIXTURE, MAP_FEATURE_KEY, METADATA_LANGUAGE, MY_FORMATS, MapComponent, MapContainerComponent, MapContextComponent, MapContextLayerTypeEnum, MapContextService, MapFacade, MapInstanceDirective, MapManagerService, MapStyleService, MapUtilsService, MapUtilsWMSService, MapViewComponent, MarkdownParserComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataInfoComponent, MetadataLinkType, MetadataQualityComponent, MetadataQualityItemComponent, MyOrgService, NavigationButtonComponent, ORGANIZATIONS_STRATEGY, ORGANIZATION_URL_TOKEN, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationsFromGroupsService, OrganizationsFromMetadataService, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PatchResultsAggregations, PopupAlertComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_URL_TOKEN, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESULTS_LAYOUT_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_SEARCH, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordTableComponent, RecordsMetricsComponent, RecordsService, RelatedRecordCardComponent, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SET_CONFIG_AGGREGATIONS, SET_CONFIG_FILTERS, SET_CONFIG_REQUEST_FIELDS, SET_ERROR, SET_FAVORITES_ONLY, SET_FILTERS, SET_INCLUDE_ON_AGGREGATION, SET_PAGE_SIZE, SET_RESULTS_AGGREGATIONS, SET_RESULTS_HITS, SET_RESULTS_LAYOUT, SET_SEARCH, SET_SORT_BY, SET_SPATIAL_FILTER_ENABLED, SearchEffects, SearchFacade, SearchInputComponent, SearchResultsErrorComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SiteTitleComponent, SortByComponent, SourceLabelComponent, SourcesService, SpinningLoaderComponent, StarToggleComponent, StepBarComponent, StickyHeaderComponent, SupportedTypes, TABLE_ITEM_FIXTURE, TABLE_ITEM_FIXTURE_HAB, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableComponent, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, TranslateTestingModule, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UiCatalogModule, UiDatavizModule, UiElementsModule, FacetsModule$1 as UiFacetsModule, UiInputsModule, UiLayoutModule, UiMapModule, UiSearchModule, UiWidgetsModule, UpdateConfigAggregations, UpdateFilters, UserPreviewComponent, UtilI18nModule, UtilSharedModule, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, WizardComponent, WizardFieldComponent, WizardFieldType, WizardService, WizardSummarizeComponent, _reset, addLayer, changeLayerOrder, checkFileFormat, clearLayerError, createFuzzyFilter, currentPage, defaultMapOptions, dragPanCondition, dropEmptyTranslations, extensionToFormat, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFirstValue, getFormatPriority, getGeometryFromGeoJSON, getGlobalConfig, getJsonDataItemsProxy, getLangFromBrowser, getLinkLabel, getLinkPriority, getMapLayers, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSpatialFilterEnabled, getThemeConfig, initSearch, initialMapState, initialState, isConfigLoaded, isEndOfResults, isFormatInQueryParam, loadAppConfig, mapContact, mapLogo, mapOrganization, mapReducer, mimeTypeToFormat, mouseWheelZoomCondition, openDataset, parse, placeholder, propagateToDocumentOnly, provideGn4, provideRepositoryUrl, readDataset, readDatasetHeaders, reducer$1 as reducer, reducerSearch, removeLayer, removeSearchParams, removeWhitespace, selectFallback, selectFallbackFields, selectField, selectTranslatedField, selectTranslatedValue, setLayerError, sortByFromString, sortByToString, sortByToStrings, stripHtml, toDate, toModel, toXml, totalPages, updateLayer };
+export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, AuthService, AutocompleteComponent, AvatarComponent, AvatarServiceInterface, BLOCK_MODEL_FIXTURE, BadgeComponent, BaseReader, ButtonComponent, CLEAR_ERROR, CLEAR_RESULTS, CONFIG_MALFORMED, CONFIG_MINIMAL, CONFIG_MISSING_MANDATORY, CONFIG_OK, CONFIG_UNRECOGNIZED_KEYS, CONFIG_WITH_TRANSLATIONS, CONFIG_WRONG_LANGUAGE_CODE, CarouselComponent, CatalogTitleComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ChipsInputComponent, ClearError, ClearResults, ColorScaleComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_BASELAYER_CONTEXT, DEFAULT_GN4_LOGIN_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DEFAULT_STYLE_FIXTURE, DEFAULT_STYLE_HL_FIXTURE, DEFAULT_VIEW, DataService, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DateRangePickerComponent, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EMPTY_BLOCK_MODEL_FIXTURE, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalViewerButtonComponent, FACET_ITEM_FIXTURE, FEATURE_MAP_OPTIONS, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FORMATS, FacetBlockComponent, FacetBlockStubComponent, FacetItemComponent, FacetItemStubComponent, FacetListComponent, FacetsContainerComponent, FacetsModule, FavoriteStarComponent, FavoritesService, FeatureAuthModule, FeatureCatalogModule, FeatureDatavizModule, FeatureDetailComponent, FeatureEditorModule, FeatureInfoService, FeatureMapModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileTranslateLoader, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldFileComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentComponent, FuzzySearchComponent, GN_UI_VERSION, GeoTableViewComponent, Gn4MetadataMapper, Gn4Repository, Gn4SettingsService, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, ImageOverlayPreviewComponent, LANGUAGES_LIST, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LANG_3_TO_2_MAPPER, LOGIN_URL, LONLAT_CRS_CODES, LangService, LanguageSwitcherComponent, LayersPanelComponent, LinkCardComponent, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_CONFIG_FIXTURE, MAP_FEATURE_KEY, METADATA_LANGUAGE, MY_FORMATS, MapComponent, MapContainerComponent, MapContextComponent, MapContextLayerTypeEnum, MapContextService, MapFacade, MapInstanceDirective, MapManagerService, MapStyleService, MapUtilsService, MapUtilsWMSService, MapViewComponent, MarkdownParserComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataInfoComponent, MetadataLinkType, MetadataQualityComponent, MetadataQualityItemComponent, MyOrgService, NavigationButtonComponent, ORGANIZATIONS_STRATEGY, ORGANIZATION_URL_TOKEN, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationsFromGroupsService, OrganizationsFromMetadataService, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PatchResultsAggregations, PopupAlertComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_URL_TOKEN, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESULTS_LAYOUT_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_SEARCH, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordTableComponent, RecordsMetricsComponent, RecordsService, RelatedRecordCardComponent, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SET_CONFIG_AGGREGATIONS, SET_CONFIG_FILTERS, SET_CONFIG_REQUEST_FIELDS, SET_ERROR, SET_FAVORITES_ONLY, SET_FILTERS, SET_INCLUDE_ON_AGGREGATION, SET_PAGE_SIZE, SET_RESULTS_AGGREGATIONS, SET_RESULTS_HITS, SET_RESULTS_LAYOUT, SET_SEARCH, SET_SORT_BY, SET_SPATIAL_FILTER_ENABLED, SearchEffects, SearchFacade, SearchInputComponent, SearchResultsErrorComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SiteTitleComponent, SortByComponent, SourceLabelComponent, SourcesService, SpinningLoaderComponent, StarToggleComponent, StepBarComponent, StickyHeaderComponent, SupportedTypes, TABLE_ITEM_FIXTURE, TABLE_ITEM_FIXTURE_HAB, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableComponent, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, TranslateTestingModule, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UiCatalogModule, UiDatavizModule, UiElementsModule, FacetsModule$1 as UiFacetsModule, UiInputsModule, UiLayoutModule, UiMapModule, UiSearchModule, UiWidgetsModule, UpdateConfigAggregations, UpdateFilters, UserPreviewComponent, UtilI18nModule, UtilSharedModule, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, WFS_MAX_FEATURES, WizardComponent, WizardFieldComponent, WizardFieldType, WizardService, WizardSummarizeComponent, _reset, addLayer, changeLayerOrder, checkFileFormat, clearLayerError, createFuzzyFilter, currentPage, defaultMapOptions, dragPanCondition, dropEmptyTranslations, extensionToFormat, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFirstValue, getFormatPriority, getGeometryFromGeoJSON, getGlobalConfig, getJsonDataItemsProxy, getLangFromBrowser, getLinkLabel, getLinkPriority, getMapLayers, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSpatialFilterEnabled, getThemeConfig, initSearch, initialMapState, initialState, isConfigLoaded, isEndOfResults, isFormatInQueryParam, loadAppConfig, mapContact, mapLogo, mapOrganization, mapReducer, mimeTypeToFormat, mouseWheelZoomCondition, openDataset, parse, placeholder, propagateToDocumentOnly, provideGn4, provideRepositoryUrl, readDataset, readDatasetHeaders, reducer$1 as reducer, reducerSearch, removeLayer, removeSearchParams, removeWhitespace, selectFallback, selectFallbackFields, selectField, selectTranslatedField, selectTranslatedValue, setLayerError, sortByFromString, sortByToString, sortByToStrings, stripHtml, toDate, toModel, toXml, totalPages, updateLayer };
 //# sourceMappingURL=geonetwork-ui.mjs.map