geonetwork-ui 2.2.0-dev.81737006 → 2.2.0-dev.8cce3b0e

package/fesm2022/geonetwork-ui.mjs

@@ -1,18 +1,18 @@
 import { parseXml, XmlDocument, XmlElement, XmlText } from '@rgrove/parse-xml';
 import format from 'date-fns/format';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostListener, EventEmitter, Output, ViewContainerRef, TemplateRef, Host, ContentChild, HostBinding, ElementRef, ViewChildren } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostListener, EventEmitter, Output, ViewContainerRef, TemplateRef, Host, ContentChild, HostBinding, ContentChildren, ElementRef, ViewChildren } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpClient, HttpClientModule, HTTP_INTERCEPTORS, HttpClientXsrfModule } from '@angular/common/http';
 import * as i1$1 from '@ngx-translate/core';
-import { TranslateCompiler, TranslateLoader, TranslateModule, TranslateService, TranslateFakeCompiler, TranslateDefaultParser, FakeMissingTranslationHandler } from '@ngx-translate/core';
+import { TranslateCompiler, TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { map as map$1, shareReplay, filter, tap as tap$1, startWith, switchMap as switchMap$1, catchError, take, withLatestFrom, delay, debounceTime, throttleTime, distinctUntilChanged, finalize, first, share, pairwise, mergeMap } from 'rxjs/operators';
+import { map as map$1, shareReplay, filter, tap as tap$1, startWith, withLatestFrom, switchMap as switchMap$1, catchError, take, delay, debounceTime, throttleTime, distinctUntilChanged, finalize, first, share, pairwise, mergeMap } from 'rxjs/operators';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import * as i1$3 from '@angular/common';
 import { CommonModule, NgOptimizedImage, NgForOf } from '@angular/common';
-import { of, map as map$2, lastValueFrom, switchMap, combineLatest, takeLast, forkJoin, Subject, merge, throwError, BehaviorSubject, tap as tap$2, fromEvent, timer, from, Subscription, animationFrameScheduler, firstValueFrom, ReplaySubject, distinctUntilChanged as distinctUntilChanged$1, Observable, buffer, debounceTime as debounceTime$1, combineLatestWith, EMPTY, startWith as startWith$1, pairwise as pairwise$1 } from 'rxjs';
+import { of, map as map$2, lastValueFrom, switchMap, combineLatest, takeLast, forkJoin, Subject, merge, throwError, BehaviorSubject, firstValueFrom, fromEvent, timer, from, Subscription, animationFrameScheduler, ReplaySubject, distinctUntilChanged as distinctUntilChanged$1, tap as tap$2, Observable, buffer, debounceTime as debounceTime$1, combineLatestWith, catchError as catchError$1, takeUntil, EMPTY, withLatestFrom as withLatestFrom$1, startWith as startWith$1, pairwise as pairwise$1 } from 'rxjs';
 import { valid, coerce, satisfies, ltr } from 'semver';
 import * as i1$2 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, select, StoreModule } from '@ngrx/store';
@@ -32,8 +32,8 @@ 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 chroma from 'chroma-js';
+import { WmsEndpoint, WfsEndpoint, sharedFetch, useCache } from '@camptocamp/ogc-client';
 import { register, fromEPSGCode } from 'ol/proj/proj4';
 import proj4 from 'proj4/dist/proj4';
 import * as TOML from '@ltd/j-toml';
@@ -58,6 +58,7 @@ import * as i1$4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { marked } from 'marked';
 import EmblaCarousel from 'embla-carousel';
 import * as i1$6 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
@@ -72,10 +73,13 @@ 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';
 import { valid as valid$1 } from 'geojson-validation';
+import { Polygon } from 'ol/geom';
+import { queryDataGouvFr, queryGeonames, queryGeoadmin } from '@geospatial-sdk/geocoding';
 import { Chart, BarController, BarElement, CategoryScale, LinearScale, LineController, LineElement, PointElement, PieController, ArcElement, ScatterController, Tooltip, Colors, Legend } from 'chart.js';
 import * as i4$1 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
@@ -645,28 +649,32 @@ function extractStatus() {
     return pipe(findChildElement('gmd:MD_ProgressCode'), readAttribute('codeListValue'), map(getStatusFromStatusCode));
 }
 // from gmd:resourceConstraints
-function extractAccessConstraints() {
-    const getOtherConstraints = pipe(findChildrenElement('gmd:MD_LegalConstraints', false), filterArray(pipe(findChildrenElement('gmd:MD_RestrictionCode'), mapArray(readAttribute('codeListValue')), map((values) => values.indexOf('license') === -1 &&
-        values.indexOf('otherRestrictions') > -1))), mapArray(findChildrenElement('gmd:otherConstraints')), flattenArray(), mapArray(extractCharacterString()), mapArray((text) => ({
+function extractLegalConstraints() {
+    return pipe(findChildrenElement('gmd:MD_LegalConstraints', false), filterArray(pipe(findChildrenElement('gmd:MD_RestrictionCode'), mapArray(readAttribute('codeListValue')), map((values) => values.indexOf('license') === -1))), mapArray(combine(findChildrenElement('gmd:otherConstraints'), findChildrenElement('gmd:useLimitation'))), flattenArray(), flattenArray(), mapArray(combine(extractCharacterString(), extractUrl())), mapArray(([text, url]) => ({
+        ...(url && { url }),
         text,
-        type: 'other',
     })));
-    const getSecurityConstraints = pipe(findNestedElements('gmd:MD_SecurityConstraints', 'gmd:useLimitation'), mapArray(extractCharacterString()), mapArray((text) => ({
+}
+// from gmd:resourceConstraints
+function extractSecurityConstraints() {
+    return pipe(findNestedElements('gmd:MD_SecurityConstraints', 'gmd:useLimitation'), flattenArray(), mapArray(combine(extractCharacterString(), extractUrl())), mapArray(([text, url]) => ({
+        ...(url && { url }),
         text,
-        type: 'security',
     })));
-    return pipe(combine(getOtherConstraints, getSecurityConstraints), flattenArray());
 }
 // from gmd:resourceConstraints
-function extractUseLimitations() {
-    return pipe(combine(findNestedElements('gmd:MD_Constraints', 'gmd:useLimitation'), findNestedElements('gmd:MD_LegalConstraints', 'gmd:useLimitation')), flattenArray(), mapArray(extractCharacterString()));
+function extractOtherConstraints() {
+    return pipe(findNestedElements('gmd:MD_Constraints', 'gmd:useLimitation'), flattenArray(), mapArray(combine(extractCharacterString(), extractUrl())), mapArray(([text, url]) => ({
+        ...(url && { url }),
+        text,
+    })));
 }
 // from gmd:resourceConstraints
 function extractLicenses() {
-    return pipe(findChildrenElement('gmd:MD_LegalConstraints', false), filterArray(pipe(findChildrenElement('gmd:MD_RestrictionCode'), mapArray(readAttribute('codeListValue')), map((values) => values.indexOf('license') > -1))), mapArray(pipe(findChildElement('gmd:otherConstraints'), combine(extractCharacterString(), extractUrl()), map(([text, url]) => ({
+    return pipe(findChildrenElement('gmd:MD_LegalConstraints', false), filterArray(pipe(findChildrenElement('gmd:MD_RestrictionCode'), mapArray(readAttribute('codeListValue')), map((values) => values.indexOf('license') > -1))), mapArray(combine(findChildrenElement('gmd:otherConstraints'), findChildrenElement('gmd:useLimitation'))), flattenArray(), flattenArray(), mapArray(combine(extractCharacterString(), extractUrl())), mapArray(([text, url]) => ({
         ...(url && { url }),
         text,
-    })))));
+    })));
 }
 // from gmd:MD_Distribution
 function extractDatasetDistributions() {
@@ -838,11 +846,14 @@ function readStatus(rootEl) {
     return pipe(findIdentification(), findChildElement('gmd:status', false), extractStatus())(rootEl);
 }
 const getConstraints = pipe(findIdentification(), findChildrenElement('gmd:resourceConstraints', false));
-function readAccessConstraints(rootEl) {
-    return pipe(getConstraints, mapArray(extractAccessConstraints()), flattenArray(), flattenArray())(rootEl);
+function readLegalConstraints(rootEl) {
+    return pipe(getConstraints, mapArray(extractLegalConstraints()), flattenArray(), flattenArray())(rootEl);
 }
-function readUseLimitations(rootEl) {
-    return pipe(getConstraints, mapArray(extractUseLimitations()), flattenArray())(rootEl);
+function readSecurityConstraints(rootEl) {
+    return pipe(getConstraints, mapArray(extractSecurityConstraints()), flattenArray())(rootEl);
+}
+function readOtherConstraints(rootEl) {
+    return pipe(getConstraints, mapArray(extractOtherConstraints()), flattenArray())(rootEl);
 }
 function readLicenses(rootEl) {
     return pipe(getConstraints, mapArray(extractLicenses()), flattenArray())(rootEl);
@@ -1075,23 +1086,23 @@ function appendKeywords(keywords, type) {
         ? appendChildren(pipe(createElement('gmd:type'), createChild('gmd:MD_KeywordTypeCode'), addAttribute('codeList', 'http://standards.iso.org/iso/19139/resources/gmxCodelists.xml#MD_KeywordTypeCode'), addAttribute('codeListValue', type)))
         : noop, appendChildren(...keywords.map((keyword) => pipe(createElement('gmd:keyword'), writeCharacterString(keyword))))));
 }
-function removeAccessConstraints() {
-    const securityConstraintsFilter = pipe(findChildrenElement('gmd:MD_SecurityConstraints'), (array) => array.length > 0);
-    // remove legal constraints that *only* have 'otherRestrictions'
-    const otherConstraintsFilter = pipe(findNestedElements('gmd:MD_LegalConstraints', 'gmd:accessConstraints', 'gmd:MD_RestrictionCode'), mapArray(readAttribute('codeListValue')), (restrictionCodes) => restrictionCodes.every((code) => code === 'otherRestrictions'));
-    return removeChildren(pipe(findChildrenElement('gmd:resourceConstraints'), filterArray((el) => securityConstraintsFilter(el) || otherConstraintsFilter(el))));
-}
-function createAccessConstraint(constraint) {
-    if (constraint.type === 'security') {
+function createConstraint(constraint, type) {
+    if (type === 'security') {
         return pipe(createElement('gmd:resourceConstraints'), createChild('gmd:MD_SecurityConstraints'), appendChildren(pipe(createElement('gmd:classification'), createChild('gmd:MD_ClassificationCode'), addAttribute('codeList', 'http://standards.iso.org/iso/19139/resources/gmxCodelists.xml#MD_ClassificationCode'), addAttribute('codeListValue', 'restricted')), pipe(createElement('gmd:useLimitation'), writeCharacterString(constraint.text))));
     }
-    return pipe(createElement('gmd:resourceConstraints'), createChild('gmd:MD_LegalConstraints'), appendChildren(pipe(createElement('gmd:accessConstraints'), createChild('gmd:MD_RestrictionCode'), addAttribute('codeList', 'http://standards.iso.org/iso/19139/resources/gmxCodelists.xml#MD_RestrictionCode'), addAttribute('codeListValue', 'otherRestrictions')), pipe(createElement('gmd:otherConstraints'), writeCharacterString(constraint.text))));
+    else if (type === 'legal') {
+        return pipe(createElement('gmd:resourceConstraints'), createChild('gmd:MD_LegalConstraints'), appendChildren(pipe(createElement('gmd:accessConstraints'), createChild('gmd:MD_RestrictionCode'), addAttribute('codeList', 'http://standards.iso.org/iso/19139/resources/gmxCodelists.xml#MD_RestrictionCode'), addAttribute('codeListValue', 'otherRestrictions')), pipe(createElement('gmd:otherConstraints'), writeCharacterString(constraint.text))));
+    }
+    return pipe(createElement('gmd:resourceConstraints'), createChild('gmd:MD_Constraints'), appendChildren(pipe(createElement('gmd:useLimitation'), writeCharacterString(constraint.text))));
 }
-function removeUseLimitations() {
+function removeOtherConstraints() {
     return removeChildren(pipe(findChildrenElement('gmd:resourceConstraints'), filterArray(pipe(findNestedElements('gmd:MD_Constraints', 'gmd:useLimitation'), (array) => array.length > 0))));
 }
-function createUseLimitation(useLimitation) {
-    return pipe(createElement('gmd:resourceConstraints'), createChild('gmd:MD_Constraints'), createChild('gmd:useLimitation'), writeCharacterString(useLimitation));
+function removeSecurityConstraints() {
+    return removeChildren(pipe(findChildrenElement('gmd:resourceConstraints'), filterArray(pipe(findNestedElements('gmd:MD_SecurityConstraints', 'gmd:useLimitation'), (array) => array.length > 0))));
+}
+function removeLegalConstraints() {
+    return removeChildren(pipe(findChildrenElement('gmd:resourceConstraints'), filterArray(pipe(findNestedElements('gmd:MD_LegalConstraints', 'gmd:accessConstraints', 'gmd:MD_RestrictionCode'), mapArray(readAttribute('codeListValue')), (restrictionCodes) => restrictionCodes.every((code) => code !== 'license')))));
 }
 function removeLicenses() {
     return removeChildren(pipe(findChildrenElement('gmd:resourceConstraints'), filterArray(pipe(findNestedElements('gmd:MD_LegalConstraints', 'gmd:accessConstraints', 'gmd:MD_RestrictionCode'), mapArray(readAttribute('codeListValue')), (restrictionCodes) => restrictionCodes.some((code) => code === 'license')))));
@@ -1195,14 +1206,17 @@ function writeKeywords(record, rootEl) {
 function writeThemes(record, rootEl) {
     pipe(findOrCreateIdentification(), removeKeywords('theme'), appendKeywords(record.themes, 'theme'))(rootEl);
 }
-function writeAccessConstraints(record, rootEl) {
-    pipe(findOrCreateIdentification(), removeAccessConstraints(), appendChildren(...record.accessConstraints.map(createAccessConstraint)))(rootEl);
-}
 function writeLicenses(record, rootEl) {
     pipe(findOrCreateIdentification(), removeLicenses(), appendChildren(...record.licenses.map(createLicense)))(rootEl);
 }
-function writeUseLimitations(record, rootEl) {
-    pipe(findOrCreateIdentification(), removeUseLimitations(), appendChildren(...record.useLimitations.map(createUseLimitation)))(rootEl);
+function writeLegalConstraints(record, rootEl) {
+    pipe(findOrCreateIdentification(), removeLegalConstraints(), appendChildren(...record.legalConstraints.map((c) => createConstraint(c, 'legal'))))(rootEl);
+}
+function writeSecurityConstraints(record, rootEl) {
+    pipe(findOrCreateIdentification(), removeSecurityConstraints(), appendChildren(...record.securityConstraints.map((c) => createConstraint(c, 'security'))))(rootEl);
+}
+function writeOtherConstraints(record, rootEl) {
+    pipe(findOrCreateIdentification(), removeOtherConstraints(), appendChildren(...record.otherConstraints.map((c) => createConstraint(c, 'other'))))(rootEl);
 }
 function writeUpdateFrequency(record, rootEl) {
     pipe(findOrCreateIdentification(), findChildOrCreate('gmd:resourceMaintenance'), removeAllChildren(), findChildOrCreate('gmd:MD_MaintenanceInformation'), typeof record.updateFrequency === 'object'
@@ -1300,8 +1314,9 @@ function toModel(xml) {
     const recordCreated = recordUpdated;
     const keywords = readKeywords(rootEl);
     const themes = readThemes(rootEl);
-    const accessConstraints = readAccessConstraints(rootEl);
-    const useLimitations = readUseLimitations(rootEl);
+    const legalConstraints = readLegalConstraints(rootEl);
+    const otherConstraints = readOtherConstraints(rootEl);
+    const securityConstraints = readSecurityConstraints(rootEl);
     const licenses = readLicenses(rootEl);
     const overviews = readOverviews(rootEl);
     // not used yet
@@ -1329,9 +1344,10 @@ function toModel(xml) {
             contactsForResource: [],
             keywords,
             themes,
-            accessConstraints,
-            useLimitations,
             licenses,
+            legalConstraints,
+            securityConstraints,
+            otherConstraints,
             ...(datasetCreated && { datasetCreated }),
             ...(datasetUpdated && { datasetUpdated }),
             lineage,
@@ -1356,9 +1372,10 @@ function toModel(xml) {
             contacts,
             keywords,
             themes,
-            accessConstraints,
-            useLimitations,
             licenses,
+            legalConstraints,
+            securityConstraints,
+            otherConstraints,
             overviews,
             onlineResources,
         };
@@ -1384,9 +1401,11 @@ function toXml(record, originalXml) {
     fieldChanged('contacts') && writeContacts(record, rootEl);
     fieldChanged('keywords') && writeKeywords(record, rootEl);
     fieldChanged('themes') && writeThemes(record, rootEl);
-    fieldChanged('accessConstraints') && writeAccessConstraints(record, rootEl);
+    fieldChanged('legalConstraints') && writeLegalConstraints(record, rootEl);
+    fieldChanged('securityConstraints') &&
+        writeSecurityConstraints(record, rootEl);
     fieldChanged('licenses') && writeLicenses(record, rootEl);
-    fieldChanged('useLimitations') && writeUseLimitations(record, rootEl);
+    fieldChanged('otherConstraints') && writeOtherConstraints(record, rootEl);
     if (record.kind === 'dataset') {
         writeStatus(record, rootEl);
         fieldChanged('updateFrequency') && writeUpdateFrequency(record, rootEl);
@@ -1412,6 +1431,7 @@ const selectTranslatedValue = (source, lang3) => selectFallback(selectField(sour
 const selectTranslatedField = (source, fieldName, lang3) => selectTranslatedValue(selectField(source, fieldName), lang3);
 const toDate = (field) => new Date(field);
 const getFirstValue = (field) => Array.isArray(field) ? field[0] : field;
+const getArrayItem = (field, index) => Array.isArray(field) && field[index] !== undefined ? field[index] : null;
 const getAsArray = (field) => Array.isArray(field) ? field : field !== null ? [field] : [];
 const getAsUrl = (field, location = window.location.toString()) => {
     // an empty string is not a valid url, even though it could be considered an empty path to the root
@@ -16538,133 +16558,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
 
-// IMPORTANT:
-// This was copy-pasted from https://github.com/mwootendev/ngx-translate-plugins/blob/7c6c73c7d16c9519a7bafff939d29fd8ea5e574a/projects/testing/src/lib/test-translate-loader.service.ts
-// because the original package was expecting rxjs 7+ as a peer dep and that was conflicting with many other dependencies
-// FIXME: when rxjs 7 can be used in the project, remove this and do `npm install ngx-translate-testing --save-dev`
-class TestTranslateLoader extends TranslateLoader {
-    constructor(_translations = {}) {
-        super();
-        this._translations = _translations;
-    }
-    /**
-     * Returns an {Observable} of translations for the specified language. If the
-     * language is not recognized, an empty translations object will be returned.
-     *
-     * @param language the language for which the translations should be retrieved.
-     * @returns the translations for the specified
-     *          language or an empty set of translations if the language is not recognized.
-     */
-    getTranslation(language) {
-        return of(this._translations[language] || {});
-    }
-}
-
-// IMPORTANT:
-// This was copy-pasted from https://github.com/mwootendev/ngx-translate-plugins/blob/7c6c73c7d16c9519a7bafff939d29fd8ea5e574a/projects/testing/src/lib/testing.module.ts
-// because the original package was expecting rxjs 7+ as a peer dep and that was conflicting with many other dependencies
-// FIXME: when rxjs 7 can be used in the project, remove this and do `npm install ngx-translate-testing --save-dev`
-/**
- * The TranslateTestingModule provides the {TranslateModule} as well as a
- * {TranslateService} configured to return translations specific for the
- * test environment.
- *
- * @export
- */
-class TranslateTestingModule {
-    constructor() {
-        this._translations = {};
-    }
-    static withTranslations(languageOrTranslations, translations) {
-        const translateTestingModule = new TranslateTestingModule();
-        if (typeof languageOrTranslations === 'string') {
-            return translateTestingModule.withTranslations(languageOrTranslations, translations);
-        }
-        return translateTestingModule.withTranslations(languageOrTranslations);
-    }
-    get ngModule() {
-        return TranslateTestingModule;
-    }
-    get providers() {
-        const translateService = new TranslateService(null, new TestTranslateLoader(this._translations), this._compiler || new TranslateFakeCompiler(), new TranslateDefaultParser(), new FakeMissingTranslationHandler(), true, true, false, this._defaultLanguage);
-        return [
-            {
-                provide: TranslateService,
-                useValue: translateService,
-            },
-        ];
-    }
-    withTranslations(languageOrTranslations, translations) {
-        if (typeof languageOrTranslations === 'string' && translations) {
-            this.addTranslations(languageOrTranslations, translations);
-            this._defaultLanguage = languageOrTranslations;
-        }
-        else if (languageOrTranslations) {
-            Object.keys(languageOrTranslations).forEach((language) => this.addTranslations(language, languageOrTranslations[language]));
-        }
-        return this;
-    }
-    /**
-     * Updates the {TranslationTestingModule} to provide a {TranslateService} that will
-     * use the provided {TranslateCompiler} to translate the test translations.
-     *
-     * @example
-     *
-     * TranslateTestingModule.withTranslations('en', {people: '{gender, select, male{He is} female{She is} other{They are}} {how})'})
-     *   .withCompiler(new TranslateMessageFormatCompiler());
-     *
-     * @param compiler the compiler to use to compile the test translations.
-     * @returns the instance that can be used to chain additional configuration.
-     * @memberof TranslateTestingModule
-     */
-    withCompiler(compiler) {
-        this._compiler = compiler;
-        return this;
-    }
-    /**
-     * Updates the {TranslateTestingModule} to use the provided language as the default language.
-     * By default, the default language will be set to the first language provided.
-     *
-     * @example
-     *
-     * TranslateTestingModule.withTranslations('es', SPANISH_TRANSLATIONS)
-     *   .withTranslations('en', ENGLISH_TRANSLATIONS)
-     *   .withDefaultLanguage('en');
-     *
-     * @param language the new default language for translations.
-     * @returns the instance that can be used to chain additional configuration.
-     * @memberof TranslateTestingModule
-     */
-    withDefaultLanguage(language) {
-        this._defaultLanguage = language || this._defaultLanguage;
-        return this;
-    }
-    addTranslations(language, translations) {
-        if (!this._defaultLanguage) {
-            this._defaultLanguage = language;
-        }
-        if (this._translations[language]) {
-            this._translations[language] = {
-                ...this._translations[language],
-                ...translations,
-            };
-        }
-        else {
-            this._translations[language] = translations;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TranslateTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: TranslateTestingModule, imports: [TranslateModule], exports: [TranslateModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TranslateTestingModule, imports: [TranslateModule, TranslateModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TranslateTestingModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [TranslateModule],
-                    exports: [TranslateModule],
-                }]
-        }] });
-
 var dropFile$6 = "Datei ablegen";
 var next$6 = "weiter";
 var previous$6 = "zurück";
@@ -16687,20 +16580,21 @@ var de = {
 	"chart.type.line": "Liniendiagramm",
 	"chart.type.lineSmooth": "Geglättes Liniendiagramm",
 	"chart.type.pie": "Kreisdiagramm",
-	"dashboard.labels.mySpace": "",
-	"dashboard.records.all": "",
-	"dashboard.records.myDraft": "",
-	"dashboard.records.myLibrary": "",
-	"dashboard.records.myOrg": "",
-	"dashboard.records.myRecords": "",
-	"dashboard.records.noRecord": "",
-	"dashboard.records.noUser": "",
-	"dashboard.records.publishedRecords": "",
-	"dashboard.records.search": "",
-	"dashboard.records.userDetail": "",
-	"dashboard.records.userEmail": "",
-	"dashboard.records.username": "",
-	"dashboard.records.users": "",
+	"dashboard.createRecord": "",
+	"dashboard.labels.mySpace": "Mein Bereich",
+	"dashboard.records.all": "Katalog",
+	"dashboard.records.myDraft": "Meine Entwürfe",
+	"dashboard.records.myLibrary": "Meine Bibliothek",
+	"dashboard.records.myOrg": "Meine Organisation",
+	"dashboard.records.myRecords": "Meine Datensätze",
+	"dashboard.records.publishedRecords": "{count, plural, =1{veröffentlichter Datensatz} other{veröffentlichte Datensätze}}",
+	"dashboard.records.search": "Suche nach \"{searchText}\"",
+	"dashboard.records.userDetail": "Name",
+	"dashboard.records.userEmail": "E-Mail",
+	"dashboard.records.username": "Benutzername",
+	"dashboard.records.users": "{count, plural, =1{Benutzer} other{Benutzer}}",
+	"dashboard.results.listMetadata": "",
+	"dashboard.results.listResources": "",
 	"datafeeder.analysisProgressBar.illustration.fileFormatDetection": "Dateiformat-Erkennung",
 	"datafeeder.analysisProgressBar.illustration.gatheringDatasetInformation": "Sammeln von Datensatzinformationen",
 	"datafeeder.analysisProgressBar.illustration.samplingData": "Datenauswahl",
@@ -16714,7 +16608,7 @@ var de = {
 	"datafeeder.form.datepicker": "Wissen Sie, wann der Datensatz erstellt wurde?",
 	"datafeeder.form.description": "Beschreiben Sie abschließend den Prozess, der zur Erstellung des Datensatzes verwendet wurde",
 	"datafeeder.form.dropdown": "Für welche Skala wurde er erstellt?",
-	"datafeeder.form.tags": "Wählen Sie einen oder mehrere Tags aus, die zu Ihrem Datensatz passen",
+	"datafeeder.form.tags": "Wählen Sie einen oder mehrere Tage aus, die zu Ihrem Datensatz passen",
 	"datafeeder.form.title": "Geben Sie Ihrem Datensatz den besten Titel",
 	"datafeeder.formsPage.title": "Erzählen Sie uns mehr über Ihren Datensatz",
 	"datafeeder.month.april": "April",
@@ -16729,16 +16623,16 @@ var de = {
 	"datafeeder.month.november": "November",
 	"datafeeder.month.october": "Oktober",
 	"datafeeder.month.september": "September",
-	"datafeeder.publish.hint": "Sie können diese Seite sicher verlassen. Sie werden benachrichtigt, wenn der Vorgang abgeschlossen ist",
-	"datafeeder.publish.illustration.title": "Ein weiterer Datensatz zum Veröffentlichen?",
+	"datafeeder.publish.hint": "Sie können diese Seite sicher verlassen. Sie werden benachrichtigt, wenn der Vorgang abgeschlossen ist.",
+	"datafeeder.publish.illustration.title": "Ein weiterer Datensatz \n zum Veröffentlichen?",
 	"datafeeder.publish.subtitle": "Das Veröffentlichen kann einige Minuten dauern.",
-	"datafeeder.publish.title": "Vielen Dank! Ihr Datensatz wird veröffentlicht",
+	"datafeeder.publish.title": "Vielen Dank! \n Ihr Datensatz wird veröffentlicht",
 	"datafeeder.publish.upload": "Jetzt hochladen",
 	"datafeeder.publishSuccess.geonetworkRecord": "Metadatensatz",
 	"datafeeder.publishSuccess.illustration.title": "Erledigt, alles ist gut!",
 	"datafeeder.publishSuccess.mapViewer": "Kartenviewer",
 	"datafeeder.publishSuccess.subtitle": "Zeigen Sie Ihre Daten an in:",
-	"datafeeder.publishSuccess.title": "Herzlichen Glückwunsch! Ihr Datensatz wurde veröffentlicht",
+	"datafeeder.publishSuccess.title": "Herzlichen Glückwunsch! \n Ihr Datensatz wurde veröffentlicht",
 	"datafeeder.publishSuccess.uploadAnotherData": "Ein weiteren Datensatz hochladen",
 	"datafeeder.summarizePage.illustration": "Kein Fehler? Los geht's!",
 	"datafeeder.summarizePage.previous": "Zurück",
@@ -16746,11 +16640,11 @@ var de = {
 	"datafeeder.summarizePage.title": "Sie sind fast fertig...",
 	"datafeeder.upload.acceptedFormats": "Akzeptierte Dateiformate:",
 	"datafeeder.upload.checkboxLabel": "Ich besitze die Rechte zur Veröffentlichung dieses Datensatzes",
-	"datafeeder.upload.error.subtitle.analysis": "Überprüfen Sie, ob die Datei einen gültigen geospatialen Datensatz enthält",
+	"datafeeder.upload.error.subtitle.analysis": "Überprüfen Sie, ob die Datei einen gültigen geografischen Datensatz enthält",
 	"datafeeder.upload.error.subtitle.cantOpenFile": "Bitte überprüfen Sie, ob die Datei gültig ist",
 	"datafeeder.upload.error.subtitle.fileFormat": "Beachten Sie: Nur SHP-Dateien",
-	"datafeeder.upload.error.subtitle.fileSize": "Beachten Sie: Maximal {size} MB",
-	"datafeeder.upload.error.title.analysis": "Fehler bei der Datensatzanalyse",
+	"datafeeder.upload.error.subtitle.fileSize": "Beachten Sie: Maximale Dateigröße {size} MB",
+	"datafeeder.upload.error.title.analysis": "Fehler während der Datensatzanalyse",
 	"datafeeder.upload.error.title.cantOpenFile": "Fehler beim Öffnen der Datei",
 	"datafeeder.upload.error.title.fileFormat": "Das ausgewählte Dateiformat wird nicht unterstützt",
 	"datafeeder.upload.error.title.fileHasntSelected": "Keine Datei ausgewählt",
@@ -16758,19 +16652,19 @@ var de = {
 	"datafeeder.upload.error.title.noRightsToSendData": "Sie dürfen diesen Datensatz nicht veröffentlichen",
 	"datafeeder.upload.illustration.enrichment": "Anreicherung",
 	"datafeeder.upload.illustration.import": "Import",
-	"datafeeder.upload.illustration.title": "Das Hinzufügen von Daten war noch nie einfacher",
+	"datafeeder.upload.illustration.title": "Das Hinzufügen von Daten \n war noch nie so einfach",
 	"datafeeder.upload.illustration.validation": "Validierung",
-	"datafeeder.upload.illustration.verification": "Verifizierung",
+	"datafeeder.upload.illustration.verification": "Überprüfung",
 	"datafeeder.upload.inputLabel": "Importieren Sie Ihre Datei",
 	"datafeeder.upload.maxFileSize": "Maximale Dateigröße beträgt {size} MB",
 	"datafeeder.upload.title": "Laden Sie Ihren Datensatz hoch",
 	"datafeeder.upload.uploadButton": "Hochladen",
-	"datafeeder.validation.encoding": "Kodierung",
+	"datafeeder.validation.encoding": "Codierung",
 	"datafeeder.validation.extent.title": "Hier ist der Datensatzumfang",
 	"datafeeder.validation.extent.title.unknown": "Das Projektionssystem ist unbekannt",
 	"datafeeder.validation.projection": "Raumbezugssystem:",
-	"datafeeder.validation.projection.unknown": "Wählen Sie ein Raumbezugssystem",
-	"datafeeder.validation.sample.title": "Und eine Beispieleinheit aus dem Datensatz",
+	"datafeeder.validation.projection.unknown": "Wählen Sie ein Raumbezugssystem aus",
+	"datafeeder.validation.sample.title": "Und eine Beispielentität aus dem Datensatz",
 	"datafeeder.wizard.emptyRequiredValuesMessage": "Bitte füllen Sie die obligatorischen Felder aus",
 	"datafeeder.wizardSummarize.createdAt": "Erstellt am",
 	"datafeeder.wizardSummarize.scale": "Maßstab",
@@ -16780,19 +16674,20 @@ var de = {
 	"datahub.header.news": "Startseite",
 	"datahub.header.organisations": "Organisationen",
 	"datahub.header.popularRecords": "Die beliebtesten",
-	"datahub.header.title.html": "<div class=\"text-white\">Entdecken Sie offene<br> Daten von meiner Organisation</div>",
-	"datahub.news.contact.contactus": "",
-	"datahub.news.contact.html": "",
-	"datahub.news.contact.title": "",
+	"datahub.header.title.html": "<div class=\"text-white\">Entdecken Sie offene<br> Daten meiner Organisation</div>",
+	"datahub.news.contact.contactus": "Kontaktieren Sie uns",
+	"datahub.news.contact.html": "<p>Brauchen Sie Daten, die derzeit nicht auf der Plattform vorhanden sind?</p><p>Unsere Teams stehen Ihnen zur Verfügung.</p>",
+	"datahub.news.contact.title": "Ein spezielles Bedürfnis?",
 	"datahub.news.feed": "Nachrichtenfeed",
 	"datahub.news.figures": "Indikatoren",
-	"datahub.search.back": "Zurück zu den Ergebnissen",
+	"datahub.record.addToFavorites": "Zu Favoriten hinzufügen",
+	"datahub.search.back": "Zurück",
 	"datahub.search.filter.all": "Alle",
-	"datahub.search.filter.generatedByWfs": "Generiert durch API",
+	"datahub.search.filter.generatedByWfs": "Generiert durch eine API",
 	"datahub.search.filter.others": "Andere",
 	"dataset.error.http": "Die Daten konnten aufgrund eines HTTP-Fehlers nicht geladen werden: \"{ info }\"",
 	"dataset.error.network": "Die Daten konnten aufgrund eines Netzwerkfehlers oder CORS-Beschränkungen nicht geladen werden: \"{ info }\"",
-	"dataset.error.parse": "Die Daten wurden geladen, konnten aber nicht geparst werden: \"{ info }\"",
+	"dataset.error.parse": "Die Daten wurden geladen, konnten aber nicht gelesen werden: \"{ info }\"",
 	"dataset.error.unknown": "Die Daten können nicht angezeigt werden: \"{ info }\"",
 	"dataset.error.unsupportedType": "Der folgende Inhaltstyp wird nicht unterstützt: \"{ info }\"",
 	"domain.record.status.completed": "Abgeschlossen",
@@ -16800,18 +16695,18 @@ var de = {
 	"domain.record.status.ongoing": "Kontinuierliche Aktualisierung",
 	"domain.record.status.removed": "Entfernt",
 	"domain.record.status.under_development": "In Erstellung",
-	"domain.record.updateFrequency.asNeeded": "Bei Bedarf",
-	"domain.record.updateFrequency.continual": "Kontinuierlich",
+	"domain.record.updateFrequency.asNeeded": "Nach Bedarf",
+	"domain.record.updateFrequency.continual": "Fortlaufend",
 	"domain.record.updateFrequency.day": "{count, plural, =0{0} one{Ein} other{{count}}} mal am Tag",
-	"domain.record.updateFrequency.irregular": "Unregelmässig",
+	"domain.record.updateFrequency.irregular": "Unregelmäßig",
 	"domain.record.updateFrequency.month": "{count, plural, =0{0} one{Ein} other{{count}}} mal im Monat",
 	"domain.record.updateFrequency.notPlanned": "Nicht geplant",
-	"domain.record.updateFrequency.periodic": "Regelmässig",
+	"domain.record.updateFrequency.periodic": "Regelmäßig",
 	"domain.record.updateFrequency.unknown": "Unbekannt",
 	"domain.record.updateFrequency.week": "{count, plural, =0{0} one{Ein} other{{count}}} mal in der Woche",
 	"domain.record.updateFrequency.year": "{count, plural, =0{0} one{Ein} other{{count}}} mal im Jahr",
 	"downloads.format.unknown": "unbekannt",
-	"downloads.wfs.featuretype.not.found": "Die Schicht wurde nicht gefunden",
+	"downloads.wfs.featuretype.not.found": "Der Layer wurde nicht gefunden",
 	dropFile: dropFile$6,
 	"externalviewer.dataset.unnamed": "Datensatz aus dem Datahub",
 	"facets.block.title.OrgForResource": "Organisation",
@@ -16846,10 +16741,18 @@ var de = {
 	"map.add.layer.file": "Aus einer Datei",
 	"map.add.layer.wfs": "Aus WFS",
 	"map.add.layer.wms": "Aus WMS",
+	"map.addFromFile.placeholder": "Klicke hier oder ziehe eine Datei herein",
+	"map.geocoding.placeholder": "",
+	"map.help.addFromFile": "Klicke oder ziehe eine Datei herein um eine Karte hinzuzufügen (momentan wird nur das GeoJSON-Format unterstützt).",
+	"map.layer.add": "Hinzufügen",
+	"map.layers.available": "Verfügbare Layer",
 	"map.layers.list": "Ebenen",
 	"map.loading.data": "Kartendaten werden geladen...",
+	"map.loading.service": "Dienst wird geladen...",
 	"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": "Geben Sie die WFS URL ein",
+	"map.wms.urlInput.hint": "Geben Sie die WMS URL ein",
 	"multiselect.filter.placeholder": "Suche",
 	"nav.back": "Zurück",
 	next: next$6,
@@ -16865,56 +16768,61 @@ var de = {
 	"pagination.pageOf": "von",
 	previous: previous$6,
 	"record.action.download": "Herunterladen",
-	"record.action.view": "Ansehen",
+	"record.action.view": "Anzeigen",
 	"record.externalViewer.open": "In externem Kartenviewer öffnen",
 	"record.metadata.about": "Beschreibung",
 	"record.metadata.api": "API",
-	"record.metadata.api.form.closeButton": "",
-	"record.metadata.api.form.closeForm": "",
-	"record.metadata.api.form.create": "",
-	"record.metadata.api.form.customUrl": "",
-	"record.metadata.api.form.limit": "",
-	"record.metadata.api.form.limit.all": "",
-	"record.metadata.api.form.offset": "",
-	"record.metadata.api.form.openForm": "",
-	"record.metadata.api.form.reset": "",
-	"record.metadata.api.form.title": "",
-	"record.metadata.api.form.type": "",
-	"record.metadata.author": "",
+	"record.metadata.api.form.closeButton": "Schließen",
+	"record.metadata.api.form.closeForm": "Formular schließen",
+	"record.metadata.api.form.create": "Ihre Anfrage erstellen",
+	"record.metadata.api.form.customUrl": "Benutzerdefinierte URL",
+	"record.metadata.api.form.limit": "Anzahl der Datensätze",
+	"record.metadata.api.form.limit.all": "Alle",
+	"record.metadata.api.form.offset": "Anzahl des ersten Datensatzes",
+	"record.metadata.api.form.openForm": "Formular öffnen",
+	"record.metadata.api.form.reset": "Zurücksetzen",
+	"record.metadata.api.form.title": "Benutzerdefinierte URL generieren",
+	"record.metadata.api.form.type": "Ausgabeformat",
+	"record.metadata.author": "Autor",
 	"record.metadata.catalog": "Katalog",
 	"record.metadata.contact": "Kontakt",
-	"record.metadata.createdOn": "Erstellt am",
-	"record.metadata.details": "Details",
+	"record.metadata.details": "Technische Informationen",
 	"record.metadata.download": "Downloads",
-	"record.metadata.formats": "",
-	"record.metadata.isOpenData": "Open Data",
+	"record.metadata.formats": "Formate",
 	"record.metadata.keywords": "Stichworte",
+	"record.metadata.lastUpdate": "Zuletzt aktualisiert am",
 	"record.metadata.links": "Links",
-	"record.metadata.noUsage": "Für diesen Datensatz sind keine Verwendungsbedingungen angegeben.",
+	"record.metadata.noUsage": "Für diesen Datensatz sind keine Nutzungsbedingungen angegeben.",
 	"record.metadata.origin": "Über die Daten",
+	"record.metadata.otherConstraints": "",
+	"record.metadata.owner": "",
 	"record.metadata.preview": "Vorschau",
 	"record.metadata.publications": "Veröffentlichungen",
-	"record.metadata.quality": "",
-	"record.metadata.quality.contact.failed": "",
-	"record.metadata.quality.contact.success": "",
-	"record.metadata.quality.description.failed": "",
-	"record.metadata.quality.description.success": "",
-	"record.metadata.quality.details": "",
-	"record.metadata.quality.keywords.failed": "",
-	"record.metadata.quality.keywords.success": "",
-	"record.metadata.quality.legalConstraints.failed": "",
-	"record.metadata.quality.legalConstraints.success": "",
-	"record.metadata.quality.organisation.failed": "",
-	"record.metadata.quality.organisation.success": "",
-	"record.metadata.quality.title.failed": "",
-	"record.metadata.quality.title.success": "",
-	"record.metadata.quality.topic.failed": "",
-	"record.metadata.quality.topic.success": "",
-	"record.metadata.quality.updateFrequency.failed": "",
-	"record.metadata.quality.updateFrequency.success": "",
+	"record.metadata.quality": "Metadatenqualität",
+	"record.metadata.quality.contact.failed": "Kontakt nicht angegeben",
+	"record.metadata.quality.contact.success": "Kontakt angegeben",
+	"record.metadata.quality.description.failed": "Beschreibung nicht angegeben",
+	"record.metadata.quality.description.success": "Beschreibung angegeben",
+	"record.metadata.quality.details": "Details",
+	"record.metadata.quality.keywords.failed": "Schlagwörter nicht angegeben",
+	"record.metadata.quality.keywords.success": "Schlagwörter angegeben",
+	"record.metadata.quality.legalConstraints.failed": "Rechtliche Beschränkungen nicht angegeben",
+	"record.metadata.quality.legalConstraints.success": "Rechtliche Beschränkungen angegeben",
+	"record.metadata.quality.organisation.failed": "Organisation nicht angegeben",
+	"record.metadata.quality.organisation.success": "Organisation angegeben",
+	"record.metadata.quality.title.failed": "Titel nicht angegeben",
+	"record.metadata.quality.title.success": "Titel angegeben",
+	"record.metadata.quality.topic.failed": "Thema nicht angegeben",
+	"record.metadata.quality.topic.success": "Thema angegeben",
+	"record.metadata.quality.updateFrequency.failed": "Aktualisierungsfrequenz nicht angegeben",
+	"record.metadata.quality.updateFrequency.success": "Aktualisierungsfrequenz angegeben",
 	"record.metadata.related": "Ähnliche Datensätze",
-	"record.metadata.sheet": "Weitere Informationen erhalten Sie unter :",
+	"record.metadata.sheet": "Weitere Informationen verfügbar unter:",
+	"record.metadata.status": "",
+	"record.metadata.themes": "Kategorien",
 	"record.metadata.title": "Titel",
+	"record.metadata.type": "Geographischer Datensatz",
+	"record.metadata.uniqueId": "Eindeutige Kennung",
 	"record.metadata.updateFrequency": "Aktualisierungsfrequenz der Daten",
 	"record.metadata.updateStatus": "Aktualisierungsstatus der Daten",
 	"record.metadata.updatedOn": "Letzte Aktualisierung der Dateninformationen",
@@ -16926,28 +16834,29 @@ var de = {
 	"record.was.created.time": "erstellte diesen Datensatz {time}",
 	records: records$6,
 	"results.layout.selectOne": "Layout auswählen",
-	"results.records.hits.displayedOn": "{displayed, plural, =0{Kein Datensatz.} one{1 Datensatz} other{{displayed} Datensätze }} {hits, plural, other{auf {hits} insgesamt angezeigt.}}",
-	"results.records.hits.empty.help.html": "Vorschläge: <ul class='list-disc list-inside'><li>Versuchen Sie andere Wörter</li><li>Geben Sie weniger Wörter ein</li></ul>",
+	"results.records.hits.displayedOn": "{displayed, plural, =0{Kein Datensatz.} one{1 Datensatz} other{{displayed} Datensätze }} {hits, plural, other{angezeigt von {hits} insgesamt.}}",
+	"results.records.hits.empty.help.html": "Vorschläge: <ul class='list-disc list-inside'><li>Versuchen Sie es mit anderen Worten</li><li>Beschränken Sie die Suchwörter</li></ul>",
 	"results.records.hits.found": "{hits, plural, =0{Keine Dokumente entsprechen der angegebenen Suche.} one{1 Datensatz gefunden.} other{{hits} Datensätze gefunden.}}",
-	"results.records.hits.selected": "",
+	"results.records.hits.selected": "{ amount } ausgewählt",
 	"results.showMore": "Mehr Ergebnisse anzeigen...",
-	"results.sortBy.dateStamp": "Letzte Aktualisierungen",
+	"results.sortBy.dateStamp": "Neueste",
 	"results.sortBy.popularity": "Beliebtheit",
-	"results.sortBy.qualityScore": "",
+	"results.sortBy.qualityScore": "Qualitätsbewertung",
 	"results.sortBy.relevancy": "Relevanz",
 	"search.autocomplete.error": "Vorschläge konnten nicht abgerufen werden:",
 	"search.error.couldNotReachApi": "Die API konnte nicht erreicht werden",
-	"search.error.receivedError": "Ein Fehler wurde empfangen",
+	"search.error.receivedError": "Ein Fehler ist aufgetreten",
 	"search.error.recordNotFound": "Der Datensatz mit der Kennung \"{ id }\" konnte nicht gefunden werden.",
-	"search.field.any.placeholder": "Suche nach Datensätzen ...",
+	"search.field.any.placeholder": "Suche Datensätze ...",
 	"search.field.sortBy": "Sortieren nach:",
 	"search.filters.clear": "Zurücksetzen",
-	"search.filters.contact": "Kontakt",
+	"search.filters.contact": "Kontakte",
 	"search.filters.format": "Formate",
 	"search.filters.inspireKeyword": "INSPIRE-Schlüsselwort",
 	"search.filters.isSpatial": "Ist räumliche Daten",
 	"search.filters.isSpatial.no": "nicht räumlich",
 	"search.filters.isSpatial.yes": "räumlich",
+	"search.filters.keyword": "Schlüsselwort",
 	"search.filters.license": "Lizenz",
 	"search.filters.license.cc-by": "Creative Commons CC-BY",
 	"search.filters.license.cc-by-sa": "Creative Commons CC-BY-SA",
@@ -16960,13 +16869,13 @@ var de = {
 	"search.filters.license.unknown": "Unbekannt oder nicht vorhanden",
 	"search.filters.maximize": "Erweitern",
 	"search.filters.minimize": "Minimieren",
-	"search.filters.myRecords": "",
-	"search.filters.myRecordsHelp": "",
-	"search.filters.otherRecords": "",
+	"search.filters.myRecords": "Nur meine Datensätze anzeigen",
+	"search.filters.myRecordsHelp": "Wenn dies aktiviert ist, werden nur von mir erstellte Datensätze angezeigt; Datensätze, die von anderen erstellt wurden, werden nicht angezeigt.",
+	"search.filters.otherRecords": "Datensätze von einer anderen Person anzeigen",
 	"search.filters.publicationYear": "Veröffentlichungsjahr",
 	"search.filters.publisher": "Organisationen",
-	"search.filters.representationType": "",
-	"search.filters.resourceType": "",
+	"search.filters.representationType": "Repräsentationstyp",
+	"search.filters.resourceType": "Ressourcentyp",
 	"search.filters.standard": "Standard",
 	"search.filters.title": "Ergebnisse filtern",
 	"search.filters.topic": "Thema",
@@ -16978,6 +16887,7 @@ var de = {
 	"table.object.count": "Objekte in diesem Datensatz",
 	"table.select.data": "Datenquelle",
 	"tooltip.html.copy": "HTML kopieren",
+	"tooltip.id.copy": "",
 	"tooltip.url.copy": "URL kopieren",
 	"tooltip.url.open": "URL öffnen",
 	"ui.readLess": "Weniger lesen",
@@ -17011,20 +16921,21 @@ var en = {
 	"chart.type.line": "line chart",
 	"chart.type.lineSmooth": "smooth line chart",
 	"chart.type.pie": "pie chart",
+	"dashboard.createRecord": "New record",
 	"dashboard.labels.mySpace": "My space",
-	"dashboard.records.all": "Catalog",
+	"dashboard.records.all": "Metadata records",
 	"dashboard.records.myDraft": "My drafts",
 	"dashboard.records.myLibrary": "My library",
 	"dashboard.records.myOrg": "Organization",
 	"dashboard.records.myRecords": "My Records",
-	"dashboard.records.noRecord": "No record for this organization",
-	"dashboard.records.noUser": "No users for this organization",
 	"dashboard.records.publishedRecords": "{count, plural, =1{published record} other{published records}}",
 	"dashboard.records.search": "Search for \"{searchText}\"",
 	"dashboard.records.userDetail": "Name",
 	"dashboard.records.userEmail": "Email",
 	"dashboard.records.username": "Username",
 	"dashboard.records.users": "{count, plural, =1{user} other{users}}",
+	"dashboard.results.listMetadata": "Show metadata",
+	"dashboard.results.listResources": "Show resources",
 	"datafeeder.analysisProgressBar.illustration.fileFormatDetection": "File format \n detection",
 	"datafeeder.analysisProgressBar.illustration.gatheringDatasetInformation": "Gathering dataset \n information",
 	"datafeeder.analysisProgressBar.illustration.samplingData": "Sampling \n data",
@@ -17110,7 +17021,8 @@ var en = {
 	"datahub.news.contact.title": "A specific need?",
 	"datahub.news.feed": "News feed",
 	"datahub.news.figures": "Indicators",
-	"datahub.search.back": "Back to results",
+	"datahub.record.addToFavorites": "Add to favorites",
+	"datahub.search.back": "Back",
 	"datahub.search.filter.all": "All",
 	"datahub.search.filter.generatedByWfs": "generated by an API",
 	"datahub.search.filter.others": "Others",
@@ -17170,10 +17082,18 @@ 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.geocoding.placeholder": "Search for a place",
+	"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",
 	"map.loading.data": "Loading map data...",
+	"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",
 	next: next$5,
@@ -17207,42 +17127,47 @@ var en = {
 	"record.metadata.author": "Author",
 	"record.metadata.catalog": "Catalog",
 	"record.metadata.contact": "Contact",
-	"record.metadata.createdOn": "Created on",
-	"record.metadata.details": "Details",
+	"record.metadata.details": "Technical information",
 	"record.metadata.download": "Downloads",
 	"record.metadata.formats": "Formats",
-	"record.metadata.isOpenData": "Open Data",
 	"record.metadata.keywords": "Keywords",
+	"record.metadata.lastUpdate": "Last updated on",
 	"record.metadata.links": "Links",
 	"record.metadata.noUsage": "No usage conditions specified for this record.",
 	"record.metadata.origin": "About the data",
+	"record.metadata.otherConstraints": "Additional Conditions",
+	"record.metadata.owner": "Catalog of origin",
 	"record.metadata.preview": "Preview",
 	"record.metadata.publications": "publications",
 	"record.metadata.quality": "Metadata Quality",
-	"record.metadata.quality.contact.failed": "Contact is not completed",
-	"record.metadata.quality.contact.success": "Contact is completed",
-	"record.metadata.quality.description.failed": "Description is not completed",
-	"record.metadata.quality.description.success": "Description is completed",
+	"record.metadata.quality.contact.failed": "Contact is not specified",
+	"record.metadata.quality.contact.success": "Contact is specified",
+	"record.metadata.quality.description.failed": "Description is not specified",
+	"record.metadata.quality.description.success": "Description is specified",
 	"record.metadata.quality.details": "Details",
-	"record.metadata.quality.keywords.failed": "Keywords are not completed",
-	"record.metadata.quality.keywords.success": "Keywords are completed",
-	"record.metadata.quality.legalConstraints.failed": "Legal constraints are not completed",
-	"record.metadata.quality.legalConstraints.success": "Legal constraints are completed",
-	"record.metadata.quality.organisation.failed": "Organisation is not completed",
-	"record.metadata.quality.organisation.success": "Organisation is completed",
-	"record.metadata.quality.title.failed": "Title is not completed",
-	"record.metadata.quality.title.success": "Title is completed",
-	"record.metadata.quality.topic.failed": "Topic is not completed",
-	"record.metadata.quality.topic.success": "Topic is completed",
-	"record.metadata.quality.updateFrequency.failed": "Update frequency is not completed",
-	"record.metadata.quality.updateFrequency.success": "Update frequency is completed",
+	"record.metadata.quality.keywords.failed": "Keywords are not specified",
+	"record.metadata.quality.keywords.success": "Keywords are specified",
+	"record.metadata.quality.legalConstraints.failed": "Legal constraints are not specified",
+	"record.metadata.quality.legalConstraints.success": "Legal constraints are specified",
+	"record.metadata.quality.organisation.failed": "Organisation is not specified",
+	"record.metadata.quality.organisation.success": "Organisation is specified",
+	"record.metadata.quality.title.failed": "Title is not specified",
+	"record.metadata.quality.title.success": "Title is specified",
+	"record.metadata.quality.topic.failed": "Topic is not specified",
+	"record.metadata.quality.topic.success": "Topic is specified",
+	"record.metadata.quality.updateFrequency.failed": "Update frequency is not specified",
+	"record.metadata.quality.updateFrequency.success": "Update frequency is specified",
 	"record.metadata.related": "Related records",
-	"record.metadata.sheet": "More information available from:",
+	"record.metadata.sheet": "Original metadata",
+	"record.metadata.status": "Status",
+	"record.metadata.themes": "Categories",
 	"record.metadata.title": "Title",
+	"record.metadata.type": "Geographical dataset",
+	"record.metadata.uniqueId": "Unique Identifier",
 	"record.metadata.updateFrequency": "Data Update Frequency",
 	"record.metadata.updateStatus": "Data Update Status",
 	"record.metadata.updatedOn": "Last Data Information Update",
-	"record.metadata.usage": "Usage & constraints",
+	"record.metadata.usage": "License and Conditions",
 	"record.more.details": "Read more",
 	"record.tab.chart": "Chart",
 	"record.tab.data": "Table",
@@ -17272,6 +17197,7 @@ var en = {
 	"search.filters.isSpatial": "Is spatial data",
 	"search.filters.isSpatial.no": "non spatial",
 	"search.filters.isSpatial.yes": "spatial",
+	"search.filters.keyword": "Keyword",
 	"search.filters.license": "License",
 	"search.filters.license.cc-by": "Creative Commons CC-BY",
 	"search.filters.license.cc-by-sa": "Creative Commons CC-BY-SA",
@@ -17302,6 +17228,7 @@ var en = {
 	"table.object.count": "objects in this dataset",
 	"table.select.data": "Data source",
 	"tooltip.html.copy": "Copy HTML",
+	"tooltip.id.copy": "Copy unique identifier",
 	"tooltip.url.copy": "Copy URL",
 	"tooltip.url.open": "Open URL",
 	"ui.readLess": "Read less",
@@ -17335,20 +17262,21 @@ var es = {
 	"chart.type.line": "gráfico de líneas",
 	"chart.type.lineSmooth": "gráfico de líneas suave",
 	"chart.type.pie": "gráfico circular",
+	"dashboard.createRecord": "",
 	"dashboard.labels.mySpace": "Mi espacio",
 	"dashboard.records.all": "Catálogo",
 	"dashboard.records.myDraft": "Mis borradores",
 	"dashboard.records.myLibrary": "Mi biblioteca",
 	"dashboard.records.myOrg": "Organización",
 	"dashboard.records.myRecords": "Mis Registros",
-	"dashboard.records.noRecord": "",
-	"dashboard.records.noUser": "",
 	"dashboard.records.publishedRecords": "",
 	"dashboard.records.search": "Buscar \"{searchText}\"",
 	"dashboard.records.userDetail": "",
 	"dashboard.records.userEmail": "",
 	"dashboard.records.username": "",
 	"dashboard.records.users": "",
+	"dashboard.results.listMetadata": "",
+	"dashboard.results.listResources": "",
 	"datafeeder.analysisProgressBar.illustration.fileFormatDetection": "",
 	"datafeeder.analysisProgressBar.illustration.gatheringDatasetInformation": "",
 	"datafeeder.analysisProgressBar.illustration.samplingData": "",
@@ -17434,6 +17362,7 @@ var es = {
 	"datahub.news.contact.title": "",
 	"datahub.news.feed": "",
 	"datahub.news.figures": "",
+	"datahub.record.addToFavorites": "",
 	"datahub.search.back": "",
 	"datahub.search.filter.all": "",
 	"datahub.search.filter.generatedByWfs": "",
@@ -17494,10 +17423,18 @@ var es = {
 	"map.add.layer.file": "",
 	"map.add.layer.wfs": "",
 	"map.add.layer.wms": "",
+	"map.addFromFile.placeholder": "",
+	"map.geocoding.placeholder": "",
+	"map.help.addFromFile": "",
+	"map.layer.add": "",
+	"map.layers.available": "",
 	"map.layers.list": "",
 	"map.loading.data": "",
+	"map.loading.service": "",
 	"map.navigation.message": "",
 	"map.select.layer": "",
+	"map.wfs.urlInput.hint": "",
+	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "",
 	"nav.back": "",
 	next: next$4,
@@ -17531,15 +17468,16 @@ var es = {
 	"record.metadata.author": "",
 	"record.metadata.catalog": "",
 	"record.metadata.contact": "",
-	"record.metadata.createdOn": "",
 	"record.metadata.details": "",
 	"record.metadata.download": "",
 	"record.metadata.formats": "",
-	"record.metadata.isOpenData": "",
 	"record.metadata.keywords": "",
+	"record.metadata.lastUpdate": "",
 	"record.metadata.links": "",
 	"record.metadata.noUsage": "",
 	"record.metadata.origin": "",
+	"record.metadata.otherConstraints": "",
+	"record.metadata.owner": "",
 	"record.metadata.preview": "",
 	"record.metadata.publications": "",
 	"record.metadata.quality": "",
@@ -17562,7 +17500,11 @@ var es = {
 	"record.metadata.quality.updateFrequency.success": "",
 	"record.metadata.related": "",
 	"record.metadata.sheet": "",
+	"record.metadata.status": "",
+	"record.metadata.themes": "",
 	"record.metadata.title": "",
+	"record.metadata.type": "",
+	"record.metadata.uniqueId": "",
 	"record.metadata.updateFrequency": "",
 	"record.metadata.updateStatus": "",
 	"record.metadata.updatedOn": "",
@@ -17596,6 +17538,7 @@ var es = {
 	"search.filters.isSpatial": "",
 	"search.filters.isSpatial.no": "",
 	"search.filters.isSpatial.yes": "",
+	"search.filters.keyword": "",
 	"search.filters.license": "",
 	"search.filters.license.cc-by": "",
 	"search.filters.license.cc-by-sa": "",
@@ -17626,6 +17569,7 @@ var es = {
 	"table.object.count": "",
 	"table.select.data": "",
 	"tooltip.html.copy": "",
+	"tooltip.id.copy": "",
 	"tooltip.url.copy": "",
 	"tooltip.url.open": "",
 	"ui.readLess": "",
@@ -17659,20 +17603,21 @@ var fr = {
 	"chart.type.line": "ligne",
 	"chart.type.lineSmooth": "ligne lisse",
 	"chart.type.pie": "camembert",
+	"dashboard.createRecord": "",
 	"dashboard.labels.mySpace": "Mon espace",
 	"dashboard.records.all": "Catalogue",
 	"dashboard.records.myDraft": "Mes brouillons",
 	"dashboard.records.myLibrary": "Ma bibliothèque",
 	"dashboard.records.myOrg": "Mon organisation",
 	"dashboard.records.myRecords": "Mes fiches publiées",
-	"dashboard.records.noRecord": "Aucun jeu de données pour cette organisation",
-	"dashboard.records.noUser": "Aucun utilisateur pour cette organisation",
 	"dashboard.records.publishedRecords": "{count, plural, =1{donnée publiée} other{données publiées}}",
 	"dashboard.records.search": "Résultats pour \"{searchText}\"",
 	"dashboard.records.userDetail": "Nom",
 	"dashboard.records.userEmail": "Email",
 	"dashboard.records.username": "Nom d'utilisateur",
 	"dashboard.records.users": "{count, plural, =1{utilisateur} other{utilisateurs}}",
+	"dashboard.results.listMetadata": "",
+	"dashboard.results.listResources": "",
 	"datafeeder.analysisProgressBar.illustration.fileFormatDetection": "Détection du \n format de fichier",
 	"datafeeder.analysisProgressBar.illustration.gatheringDatasetInformation": "Récupération des informations \n sur le jeu de données",
 	"datafeeder.analysisProgressBar.illustration.samplingData": "Sampling \n des données",
@@ -17754,11 +17699,12 @@ var fr = {
 	"datahub.header.popularRecords": "Les plus appréciées",
 	"datahub.header.title.html": "<div class=\"text-white\">Toutes les données<br>publiques de mon organisation</div>",
 	"datahub.news.contact.contactus": "Contactez-nous",
-	"datahub.news.contact.html": "<p>Vous avez besoin de données qui ne sont pas présentes sur la plateforme actuellement ? </p><p> Nos équipes sont la pour vous répondre.</p>",
+	"datahub.news.contact.html": "<p>Vous avez besoin de données qui ne sont pas présentes sur la plateforme actuellement ? </p><p> Nos équipes sont là pour vous répondre.</p>",
 	"datahub.news.contact.title": "Un besoin spécifique ?",
 	"datahub.news.feed": "Fil d'activité",
 	"datahub.news.figures": "Quelques chiffres",
-	"datahub.search.back": "Retour aux résultats",
+	"datahub.record.addToFavorites": "Ajouter aux favoris",
+	"datahub.search.back": "Retour",
 	"datahub.search.filter.all": "Tous",
 	"datahub.search.filter.generatedByWfs": "généré par une API",
 	"datahub.search.filter.others": "Autres",
@@ -17818,10 +17764,18 @@ var fr = {
 	"map.add.layer.file": "",
 	"map.add.layer.wfs": "",
 	"map.add.layer.wms": "",
+	"map.addFromFile.placeholder": "",
+	"map.geocoding.placeholder": "",
+	"map.help.addFromFile": "",
+	"map.layer.add": "",
+	"map.layers.available": "",
 	"map.layers.list": "",
 	"map.loading.data": "Chargement des données...",
+	"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",
 	next: next$3,
@@ -17855,15 +17809,16 @@ var fr = {
 	"record.metadata.author": "Auteur",
 	"record.metadata.catalog": "Catalogue",
 	"record.metadata.contact": "Contact",
-	"record.metadata.createdOn": "Créé le",
-	"record.metadata.details": "Détails",
+	"record.metadata.details": "Informations techniques",
 	"record.metadata.download": "Téléchargements",
 	"record.metadata.formats": "Formats",
-	"record.metadata.isOpenData": "Donnée Ouverte",
 	"record.metadata.keywords": "Mots clés",
+	"record.metadata.lastUpdate": "Mis à jour le",
 	"record.metadata.links": "Liens",
 	"record.metadata.noUsage": "Aucune condition d'utilisation spécifiée pour ces données",
 	"record.metadata.origin": "À propos des données",
+	"record.metadata.otherConstraints": "Limitations d'usage",
+	"record.metadata.owner": "Catalogue d'origine",
 	"record.metadata.preview": "Aperçu",
 	"record.metadata.publications": "données",
 	"record.metadata.quality": "Qualité des métadonnées",
@@ -17885,12 +17840,16 @@ var fr = {
 	"record.metadata.quality.updateFrequency.failed": "Fréquence de mise à jour n'est pas renseignée",
 	"record.metadata.quality.updateFrequency.success": "Fréquence de mise à jour est renseignée",
 	"record.metadata.related": "Voir aussi",
-	"record.metadata.sheet": "Plus d'informations à l'adresse suivante :",
+	"record.metadata.sheet": "Fiche de métadonnées d'origine",
+	"record.metadata.status": "",
+	"record.metadata.themes": "Catégories",
 	"record.metadata.title": "Titre",
+	"record.metadata.type": "Donnée géographique",
+	"record.metadata.uniqueId": "Identificateur de ressource unique",
 	"record.metadata.updateFrequency": "Fréquence de mise à jour des données",
 	"record.metadata.updateStatus": "Statut de mise à jour des données",
 	"record.metadata.updatedOn": "Dernière mise à jour des informations sur les données",
-	"record.metadata.usage": "Conditions d'utilisation",
+	"record.metadata.usage": "Licences et conditions d'utilisation",
 	"record.more.details": "Détails",
 	"record.tab.chart": "Graphique",
 	"record.tab.data": "Tableau",
@@ -17920,6 +17879,7 @@ var fr = {
 	"search.filters.isSpatial": "Données spatiales",
 	"search.filters.isSpatial.no": "non-géolocalisées",
 	"search.filters.isSpatial.yes": "géolocalisées",
+	"search.filters.keyword": "Mot-clé",
 	"search.filters.license": "Licence",
 	"search.filters.license.cc-by": "cc-by",
 	"search.filters.license.cc-by-sa": "cc-by-sa",
@@ -17950,6 +17910,7 @@ var fr = {
 	"table.object.count": "enregistrements dans ces données",
 	"table.select.data": "Source de données",
 	"tooltip.html.copy": "Copier le HTML",
+	"tooltip.id.copy": "Copier l'identifiant unique",
 	"tooltip.url.copy": "Copier l'URL",
 	"tooltip.url.open": "Ouvrir l'URL",
 	"ui.readLess": "Réduire",
@@ -17983,20 +17944,21 @@ var it = {
 	"chart.type.line": "grafico a linee",
 	"chart.type.lineSmooth": "grafico a linea liscia",
 	"chart.type.pie": "grafico a torta",
+	"dashboard.createRecord": "",
 	"dashboard.labels.mySpace": "Il mio spazio",
 	"dashboard.records.all": "Catalogo",
 	"dashboard.records.myDraft": "Le mie bozze",
 	"dashboard.records.myLibrary": "La mia biblioteca",
 	"dashboard.records.myOrg": "La mia organizzazione",
 	"dashboard.records.myRecords": "I miei dati",
-	"dashboard.records.noRecord": "Nessun dati per questa organizzazione",
-	"dashboard.records.noUser": "Nessun utente per questa organizzazione",
 	"dashboard.records.publishedRecords": "dati pubblicati",
 	"dashboard.records.search": "Risultati per \"{searchText}\"",
 	"dashboard.records.userDetail": "Nome",
 	"dashboard.records.userEmail": "Email",
 	"dashboard.records.username": "Nome utente",
 	"dashboard.records.users": "utenti",
+	"dashboard.results.listMetadata": "",
+	"dashboard.results.listResources": "",
 	"datafeeder.analysisProgressBar.illustration.fileFormatDetection": "Rilevamento del formato dei file",
 	"datafeeder.analysisProgressBar.illustration.gatheringDatasetInformation": "Recupero delle informazioni dal dataset",
 	"datafeeder.analysisProgressBar.illustration.samplingData": "Campionatura dei dati",
@@ -18077,12 +18039,13 @@ var it = {
 	"datahub.header.organisations": "Organizzazioni",
 	"datahub.header.popularRecords": "Più popolari",
 	"datahub.header.title.html": "<div class=\"text-white\">Tutti i dati<br>pubblici della mia organizzazione</div>",
-	"datahub.news.contact.contactus": "",
-	"datahub.news.contact.html": "",
-	"datahub.news.contact.title": "",
+	"datahub.news.contact.contactus": "Contattateci",
+	"datahub.news.contact.html": "<p>Ha bisogno di dati che non sono attualmente disponibili sulla piattaforma? </p><p> I nostri team sono qui per aiutarla.</p>",
+	"datahub.news.contact.title": "Ha un bisogno specifico?",
 	"datahub.news.feed": "Feed di attività",
 	"datahub.news.figures": "Alcune figure",
-	"datahub.search.back": "Torna ai risultati",
+	"datahub.record.addToFavorites": "Aggiungere a miei preferiti",
+	"datahub.search.back": "Ritorna",
 	"datahub.search.filter.all": "Tutti",
 	"datahub.search.filter.generatedByWfs": "generato da un'API",
 	"datahub.search.filter.others": "Altri",
@@ -18109,7 +18072,7 @@ var it = {
 	"downloads.format.unknown": "sconosciuto",
 	"downloads.wfs.featuretype.not.found": "Il layer non è stato trovato",
 	dropFile: dropFile$2,
-	"externalviewer.dataset.unnamed": "",
+	"externalviewer.dataset.unnamed": "Layer del datahub",
 	"facets.block.title.OrgForResource": "Organizzazione",
 	"facets.block.title.availableInServices": "Disponibile per",
 	"facets.block.title.cl_hierarchyLevel.key": "Tipo di risorsa",
@@ -18142,10 +18105,18 @@ 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.geocoding.placeholder": "",
+	"map.help.addFromFile": "",
+	"map.layer.add": "",
+	"map.layers.available": "",
 	"map.layers.list": "Layers",
 	"map.loading.data": "Caricamento dati...",
+	"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",
 	next: next$2,
@@ -18179,15 +18150,16 @@ var it = {
 	"record.metadata.author": "Autore",
 	"record.metadata.catalog": "Catalogo",
 	"record.metadata.contact": "Contatto",
-	"record.metadata.createdOn": "Creato il",
-	"record.metadata.details": "Dettagli",
+	"record.metadata.details": "Informazioni tecniche",
 	"record.metadata.download": "Download",
 	"record.metadata.formats": "Formati",
-	"record.metadata.isOpenData": "Data aperta",
 	"record.metadata.keywords": "Parole chiave",
+	"record.metadata.lastUpdate": "Ultimo aggiornamento",
 	"record.metadata.links": "Collegamenti",
 	"record.metadata.noUsage": "Nessuna condizione d'uso specificata per questi dati",
 	"record.metadata.origin": "Informazioni sui dati",
+	"record.metadata.otherConstraints": "Limitazioni di uso",
+	"record.metadata.owner": "Catalogo originale",
 	"record.metadata.preview": "Anteprima",
 	"record.metadata.publications": "pubblicazioni",
 	"record.metadata.quality": "Qualità dei metadati",
@@ -18209,12 +18181,16 @@ var it = {
 	"record.metadata.quality.updateFrequency.failed": "La frequenza di aggiornamento non è specificata",
 	"record.metadata.quality.updateFrequency.success": "La frequenza di aggiornamento è specificata",
 	"record.metadata.related": "Vedi anche",
-	"record.metadata.sheet": "Per ulteriori informazioni, cliccate qui:",
+	"record.metadata.sheet": "Origine del metadata",
+	"record.metadata.status": "",
+	"record.metadata.themes": "Categorie",
 	"record.metadata.title": "Titolo",
+	"record.metadata.type": "Dati geografici",
+	"record.metadata.uniqueId": "Identificatore unico di risorsa",
 	"record.metadata.updateFrequency": "Frequenza di aggiornamento dei dati",
 	"record.metadata.updateStatus": "Stato di aggiornamento dei dati",
 	"record.metadata.updatedOn": "Ultimo aggiornamento delle informazioni sui dati",
-	"record.metadata.usage": "Condizioni d'uso",
+	"record.metadata.usage": "Licenze e limiti di utilizzo",
 	"record.more.details": "Dettagli",
 	"record.tab.chart": "Grafico",
 	"record.tab.data": "Tabella",
@@ -18222,10 +18198,10 @@ var it = {
 	"record.was.created.time": "ha creato questi dati {time}",
 	records: records$2,
 	"results.layout.selectOne": "Mostra risultati",
-	"results.records.hits.displayedOn": "",
+	"results.records.hits.displayedOn": "{displayed, plural, =0{Nessun record} one{1 record visualizzato} other{{displayed} records visualizzati}} {hits, plural, other{su {hits} in totale.}}",
 	"results.records.hits.empty.help.html": "Suggerimenti: <ul class='list-disc list-inside'><li>Prova con altre parole chiave</li><li>Cerca con meno parole</li></ul>",
 	"results.records.hits.found": "{hits, plural, =0{Nessuna corrispondenza.} one{1 record trovato.} other{{hits} risultati.}}",
-	"results.records.hits.selected": "",
+	"results.records.hits.selected": "{amount, plural, one{1 selezionato} other{{ amount } selezionati}}",
 	"results.showMore": "Altri risultati...",
 	"results.sortBy.dateStamp": "Più recente",
 	"results.sortBy.popularity": "Popolarità",
@@ -18244,6 +18220,7 @@ var it = {
 	"search.filters.isSpatial": "Dati spaziali",
 	"search.filters.isSpatial.no": "Non geolocalizzati",
 	"search.filters.isSpatial.yes": "Geolocalizzati",
+	"search.filters.keyword": "Parola chiave",
 	"search.filters.license": "Licenza",
 	"search.filters.license.cc-by": "cc-by",
 	"search.filters.license.cc-by-sa": "cc-by-sa",
@@ -18274,10 +18251,11 @@ var it = {
 	"table.object.count": "record in questi dati",
 	"table.select.data": "Sorgente dati",
 	"tooltip.html.copy": "Copiare il HTML",
+	"tooltip.id.copy": "Copiare l'identificatore unico",
 	"tooltip.url.copy": "Copiare l'URL",
 	"tooltip.url.open": "Aprire l'URL",
-	"ui.readLess": "",
-	"ui.readMore": "",
+	"ui.readLess": "Ridurre",
+	"ui.readMore": "Leggi di più",
 	"wfs.featuretype.notfound": "La classe di oggetto non è stata trovata nel servizio",
 	"wfs.geojsongml.notsupported": "Il servizio non supporta il formato GeoJSON o GML",
 	"wfs.unreachable.cors": "Il servizio non è accessibile a causa di limitazioni CORS",
@@ -18307,20 +18285,21 @@ var nl = {
 	"chart.type.line": "lijndiagram",
 	"chart.type.lineSmooth": "glad lijndiagram",
 	"chart.type.pie": "cirkeldiagram",
+	"dashboard.createRecord": "",
 	"dashboard.labels.mySpace": "Mijn ruimte",
 	"dashboard.records.all": "Catalogus",
 	"dashboard.records.myDraft": "Mijn concepten",
 	"dashboard.records.myLibrary": "Mijn bibliotheek",
 	"dashboard.records.myOrg": "Organisatie",
 	"dashboard.records.myRecords": "Mijn Records",
-	"dashboard.records.noRecord": "",
-	"dashboard.records.noUser": "",
 	"dashboard.records.publishedRecords": "",
 	"dashboard.records.search": "Zoeken naar \"{searchText}\"",
 	"dashboard.records.userDetail": "",
 	"dashboard.records.userEmail": "",
 	"dashboard.records.username": "",
 	"dashboard.records.users": "",
+	"dashboard.results.listMetadata": "",
+	"dashboard.results.listResources": "",
 	"datafeeder.analysisProgressBar.illustration.fileFormatDetection": "",
 	"datafeeder.analysisProgressBar.illustration.gatheringDatasetInformation": "",
 	"datafeeder.analysisProgressBar.illustration.samplingData": "",
@@ -18406,6 +18385,7 @@ var nl = {
 	"datahub.news.contact.title": "",
 	"datahub.news.feed": "",
 	"datahub.news.figures": "",
+	"datahub.record.addToFavorites": "",
 	"datahub.search.back": "",
 	"datahub.search.filter.all": "",
 	"datahub.search.filter.generatedByWfs": "",
@@ -18466,10 +18446,18 @@ var nl = {
 	"map.add.layer.file": "",
 	"map.add.layer.wfs": "",
 	"map.add.layer.wms": "",
+	"map.addFromFile.placeholder": "",
+	"map.geocoding.placeholder": "",
+	"map.help.addFromFile": "",
+	"map.layer.add": "",
+	"map.layers.available": "",
 	"map.layers.list": "",
 	"map.loading.data": "",
+	"map.loading.service": "",
 	"map.navigation.message": "",
 	"map.select.layer": "",
+	"map.wfs.urlInput.hint": "",
+	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "",
 	"nav.back": "",
 	next: next$1,
@@ -18503,15 +18491,16 @@ var nl = {
 	"record.metadata.author": "",
 	"record.metadata.catalog": "",
 	"record.metadata.contact": "",
-	"record.metadata.createdOn": "",
 	"record.metadata.details": "",
 	"record.metadata.download": "",
 	"record.metadata.formats": "",
-	"record.metadata.isOpenData": "",
 	"record.metadata.keywords": "",
+	"record.metadata.lastUpdate": "",
 	"record.metadata.links": "",
 	"record.metadata.noUsage": "",
 	"record.metadata.origin": "",
+	"record.metadata.otherConstraints": "",
+	"record.metadata.owner": "",
 	"record.metadata.preview": "",
 	"record.metadata.publications": "",
 	"record.metadata.quality": "",
@@ -18534,7 +18523,11 @@ var nl = {
 	"record.metadata.quality.updateFrequency.success": "",
 	"record.metadata.related": "",
 	"record.metadata.sheet": "",
+	"record.metadata.status": "",
+	"record.metadata.themes": "",
 	"record.metadata.title": "",
+	"record.metadata.type": "",
+	"record.metadata.uniqueId": "",
 	"record.metadata.updateFrequency": "",
 	"record.metadata.updateStatus": "",
 	"record.metadata.updatedOn": "",
@@ -18568,6 +18561,7 @@ var nl = {
 	"search.filters.isSpatial": "",
 	"search.filters.isSpatial.no": "",
 	"search.filters.isSpatial.yes": "",
+	"search.filters.keyword": "",
 	"search.filters.license": "",
 	"search.filters.license.cc-by": "",
 	"search.filters.license.cc-by-sa": "",
@@ -18598,6 +18592,7 @@ var nl = {
 	"table.object.count": "",
 	"table.select.data": "",
 	"tooltip.html.copy": "",
+	"tooltip.id.copy": "",
 	"tooltip.url.copy": "",
 	"tooltip.url.open": "",
 	"ui.readLess": "",
@@ -18631,20 +18626,21 @@ var pt = {
 	"chart.type.line": "gráfico de linha",
 	"chart.type.lineSmooth": "gráfico de linha suave",
 	"chart.type.pie": "gráfico de pizza",
+	"dashboard.createRecord": "",
 	"dashboard.labels.mySpace": "Meu espaço",
 	"dashboard.records.all": "Catálogo",
 	"dashboard.records.myDraft": "Meus rascunhos",
 	"dashboard.records.myLibrary": "Minha biblioteca",
 	"dashboard.records.myOrg": "Organização",
 	"dashboard.records.myRecords": "Meus Registros",
-	"dashboard.records.noRecord": "",
-	"dashboard.records.noUser": "",
 	"dashboard.records.publishedRecords": "",
 	"dashboard.records.search": "Buscar por \"{searchText}\"",
 	"dashboard.records.userDetail": "",
 	"dashboard.records.userEmail": "",
 	"dashboard.records.username": "",
 	"dashboard.records.users": "",
+	"dashboard.results.listMetadata": "",
+	"dashboard.results.listResources": "",
 	"datafeeder.analysisProgressBar.illustration.fileFormatDetection": "",
 	"datafeeder.analysisProgressBar.illustration.gatheringDatasetInformation": "",
 	"datafeeder.analysisProgressBar.illustration.samplingData": "",
@@ -18730,6 +18726,7 @@ var pt = {
 	"datahub.news.contact.title": "",
 	"datahub.news.feed": "",
 	"datahub.news.figures": "",
+	"datahub.record.addToFavorites": "",
 	"datahub.search.back": "",
 	"datahub.search.filter.all": "",
 	"datahub.search.filter.generatedByWfs": "",
@@ -18790,10 +18787,18 @@ var pt = {
 	"map.add.layer.file": "",
 	"map.add.layer.wfs": "",
 	"map.add.layer.wms": "",
+	"map.addFromFile.placeholder": "",
+	"map.geocoding.placeholder": "",
+	"map.help.addFromFile": "",
+	"map.layer.add": "",
+	"map.layers.available": "",
 	"map.layers.list": "",
 	"map.loading.data": "",
+	"map.loading.service": "",
 	"map.navigation.message": "",
 	"map.select.layer": "",
+	"map.wfs.urlInput.hint": "",
+	"map.wms.urlInput.hint": "",
 	"multiselect.filter.placeholder": "",
 	"nav.back": "",
 	next: next,
@@ -18827,15 +18832,16 @@ var pt = {
 	"record.metadata.author": "",
 	"record.metadata.catalog": "",
 	"record.metadata.contact": "",
-	"record.metadata.createdOn": "",
 	"record.metadata.details": "",
 	"record.metadata.download": "",
 	"record.metadata.formats": "",
-	"record.metadata.isOpenData": "",
 	"record.metadata.keywords": "",
+	"record.metadata.lastUpdate": "",
 	"record.metadata.links": "",
 	"record.metadata.noUsage": "",
 	"record.metadata.origin": "",
+	"record.metadata.otherConstraints": "",
+	"record.metadata.owner": "",
 	"record.metadata.preview": "",
 	"record.metadata.publications": "",
 	"record.metadata.quality": "",
@@ -18858,7 +18864,11 @@ var pt = {
 	"record.metadata.quality.updateFrequency.success": "",
 	"record.metadata.related": "",
 	"record.metadata.sheet": "",
+	"record.metadata.status": "",
+	"record.metadata.themes": "",
 	"record.metadata.title": "",
+	"record.metadata.type": "",
+	"record.metadata.uniqueId": "",
 	"record.metadata.updateFrequency": "",
 	"record.metadata.updateStatus": "",
 	"record.metadata.updatedOn": "",
@@ -18892,6 +18902,7 @@ var pt = {
 	"search.filters.isSpatial": "",
 	"search.filters.isSpatial.no": "",
 	"search.filters.isSpatial.yes": "",
+	"search.filters.keyword": "",
 	"search.filters.license": "",
 	"search.filters.license.cc-by": "",
 	"search.filters.license.cc-by-sa": "",
@@ -18922,6 +18933,7 @@ var pt = {
 	"table.object.count": "",
 	"table.select.data": "",
 	"tooltip.html.copy": "",
+	"tooltip.id.copy": "",
 	"tooltip.url.copy": "",
 	"tooltip.url.open": "",
 	"ui.readLess": "",
@@ -19066,20 +19078,11 @@ class Gn4FieldMapper {
                     ...getAsArray(selectField(source, 'inspireTheme_syn')),
                 ],
             }),
-            MD_ConstraintsUseLimitationObject: (output, source) => this.constraintField('MD_ConstraintsUseLimitationObject', output, source),
-            MD_LegalConstraintsUseLimitationObject: (output, source) => this.constraintField('MD_LegalConstraintsUseLimitationObject', output, source),
-            MD_LegalConstraintsOtherConstraintsObject: (output, source) => this.constraintField('MD_LegalConstraintsOtherConstraintsObject', output, source),
-            MD_SecurityConstraintsUseLimitationObject: (output, source) => this.constraintField('MD_SecurityConstraintsUseLimitationObject', output, source),
-            licenseObject: (output, source) => ({
-                ...output,
-                licenses: getAsArray(selectField(source, 'licenseObject')).map((license) => {
-                    const link = getAsUrl(selectField(license, 'link'));
-                    return {
-                        text: selectTranslatedValue(license, this.lang3),
-                        ...(link ? { link } : {}),
-                    };
-                }),
-            }),
+            MD_ConstraintsUseLimitationObject: (output, source) => this.constraintField('other', output, getAsArray(selectField(source, 'MD_ConstraintsUseLimitationObject'))),
+            MD_LegalConstraintsUseLimitationObject: (output, source) => this.constraintField('legal', output, getAsArray(selectField(source, 'MD_LegalConstraintsUseLimitationObject'))),
+            MD_LegalConstraintsOtherConstraintsObject: (output, source) => this.constraintField('legal', output, getAsArray(selectField(source, 'MD_LegalConstraintsOtherConstraintsObject'))),
+            MD_SecurityConstraintsUseLimitationObject: (output, source) => this.constraintField('security', output, getAsArray(selectField(source, 'MD_SecurityConstraintsUseLimitationObject'))),
+            licenseObject: (output, source) => this.constraintField('license', output, getAsArray(selectField(source, 'licenseObject'))),
             lineageObject: (output, source) => ({
                 ...output,
                 lineage: selectTranslatedField(source, 'lineageObject', this.lang3),
@@ -19105,33 +19108,78 @@ class Gn4FieldMapper {
                     kind,
                 };
             },
+            geom: (output, source) => {
+                const geoms = getAsArray(selectField(source, 'geom'));
+                const shapes = getAsArray(selectField(source, 'shape'));
+                const extentDescriptions = getAsArray(selectField(source, 'extentDescriptionObject'));
+                const spatialExtents = getAsArray(selectField(source, 'spatialExtents'));
+                return {
+                    ...output,
+                    spatialExtents: [
+                        ...spatialExtents,
+                        ...geoms.map((geom, index) => {
+                            const description = selectTranslatedValue(getArrayItem(extentDescriptions, index), this.lang3);
+                            const geometry = shapes[index] ?? geom;
+                            return {
+                                ...(description !== null ? { description } : null),
+                                geometry,
+                            };
+                        }),
+                    ],
+                };
+            },
+            resourceTemporalDateRange: (output, source) => {
+                const ranges = getAsArray(selectField(source, 'resourceTemporalDateRange'));
+                return {
+                    ...output,
+                    temporalExtents: ranges.map((range) => {
+                        const start = selectField(range, 'gte');
+                        const end = selectField(range, 'lte');
+                        return {
+                            ...(start !== null ? { start: toDate(start) } : null),
+                            ...(end !== null ? { end: toDate(end) } : null),
+                        };
+                    }),
+                };
+            },
         };
         this.genericField = (output) => output;
-        this.constraintField = (fieldName, output, source) => ({
-            ...output,
-            ...(fieldName.endsWith('UseLimitationObject')
-                ? {
-                    legalConstraints: fieldName === 'MD_LegalConstraintsUseLimitationObject'
-                        ? [
-                            ...(output.legalConstraints || []),
-                            ...selectField(source, fieldName).map((source) => selectTranslatedValue(source, this.lang3)),
-                        ]
-                        : output.legalConstraints || [],
-                    useLimitations: [
-                        ...(output.useLimitations || []),
-                        ...selectField(source, fieldName).map((source) => selectTranslatedValue(source, this.lang3)),
-                    ],
-                }
-                : {
-                    accessConstraints: [
-                        ...(output.accessConstraints || []),
-                        ...selectField(source, fieldName).map((field) => ({
-                            text: selectTranslatedValue(field, this.lang3),
-                            type: this.getConstraintsType(fieldName),
-                        })),
-                    ],
-                }),
-        });
+        this.constraintField = (type, output, constraintArray) => {
+            let outputField;
+            switch (type) {
+                case 'license':
+                    outputField = 'licenses';
+                    break;
+                case 'legal':
+                    outputField = 'legalConstraints';
+                    break;
+                case 'security':
+                    outputField = 'securityConstraints';
+                    break;
+                case 'other':
+                    outputField = 'otherConstraints';
+                    break;
+            }
+            const outputArray = outputField in output ? output[outputField] : [];
+            outputArray.push(...constraintArray.map((item) => {
+                const text = selectTranslatedValue(item, this.lang3);
+                const url = getAsUrl(selectField(item, 'link'));
+                return {
+                    text,
+                    ...(url ? { url } : {}),
+                };
+            }));
+            const result = {
+                ...output,
+                [outputField]: outputArray,
+            };
+            // avoid legal constraints being duplicates of licenses
+            if ('legalConstraints' in result &&
+                (type === 'legal' || type === 'license')) {
+                result.legalConstraints = result.legalConstraints.filter((constraint) => !output.licenses?.some((license) => license.text === constraint.text));
+            }
+            return result;
+        };
         this.mapLink = (sourceLink) => {
             const url = getAsUrl(selectFallback(selectTranslatedField(sourceLink, 'urlObject', this.lang3), selectField(sourceLink, 'url')));
             const name = selectFallback(selectTranslatedField(sourceLink, 'nameObject', this.lang3), selectField(sourceLink, 'name'));
@@ -19179,17 +19227,6 @@ class Gn4FieldMapper {
             extras: { ...(output.extras || {}), ...value },
         });
     }
-    getConstraintsType(indexField) {
-        switch (indexField) {
-            case 'MD_LegalConstraintsUseLimitationObject':
-                return 'legal';
-            case 'MD_SecurityConstraintsUseLimitationObject':
-                return 'security';
-            case 'MD_ConstraintsUseLimitationObject':
-            default:
-                return 'other';
-        }
-    }
     getMappingFn(fieldName) {
         return fieldName in this.fields ? this.fields[fieldName] : this.genericField;
     }
@@ -19251,14 +19288,16 @@ class Gn4MetadataMapper extends MetadataBaseMapper {
             recordUpdated: null,
             ownerOrganization: null,
             licenses: [],
+            legalConstraints: [],
+            securityConstraints: [],
+            otherConstraints: [],
             contacts: [],
             contactsForResource: [],
-            accessConstraints: [],
             keywords: [],
             themes: [],
-            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));
@@ -20023,11 +20062,18 @@ class OrganizationsFromMetadataService {
         if (!allContactOrgs.length)
             return of(record);
         const ownerOrganization = allContactOrgs[0];
-        return this.organisations$.pipe(takeLast(1), map$1((organisations) => {
+        // read the owner group as well to have a fallback logo
+        const groupId = selectField(source, 'groupOwner');
+        const group$ = this.groups$.pipe(map$1((groups) => groups.find((group) => {
+            return group.id === Number(groupId);
+        })));
+        return this.organisations$.pipe(takeLast(1), withLatestFrom(group$), map$1(([organisations, group]) => {
             const recordOrganisation = organisations.filter((org) => org.name === ownerOrganization.name)[0];
+            const logoUrl = group?.logo && getAsUrl(`${IMAGE_URL$1}${group.logo}`);
             return {
                 ...record,
                 ownerOrganization: {
+                    logoUrl,
                     ...ownerOrganization,
                     ...recordOrganisation,
                 },
@@ -20292,36 +20338,23 @@ class SelectionService {
         this.selectedRecordsIdentifiers$.next(filtered);
     }
     selectRecords(records) {
-        const newIds = [];
-        records.map((record) => {
-            newIds.push(record.uniqueIdentifier);
-        });
-        const apiResponse = this.selectionsApi.add(BUCKET_ID, newIds);
-        return apiResponse.pipe(tap$2(() => {
+        const newIds = records.map((record) => record.uniqueIdentifier);
+        this.selectionsApi.add(BUCKET_ID, newIds).subscribe(() => {
             this.addIdsToSelected(newIds);
-        }), map$2(() => undefined));
+        });
     }
     deselectRecords(records) {
-        const idsToBeRemoved = [];
-        records.map((record) => {
-            idsToBeRemoved.push(record.uniqueIdentifier);
-        });
-        const apiResponse = this.selectionsApi.clear(BUCKET_ID, idsToBeRemoved);
-        return apiResponse.pipe(tap$2(() => {
+        const idsToBeRemoved = records.map((record) => record.uniqueIdentifier);
+        this.selectionsApi.clear(BUCKET_ID, idsToBeRemoved).subscribe(() => {
             this.removeIdsFromSelected(idsToBeRemoved);
-        }), map$2(() => undefined));
-    }
-    clearSelection() {
-        const currentSelectedResponse = this.selectionsApi.get(BUCKET_ID);
-        let currentSelection;
-        this.subscription = currentSelectedResponse.subscribe((value) => {
-            currentSelection = [...value];
         });
-        this.selectionsApi.clear(BUCKET_ID, currentSelection);
-        const apiResponse = this.selectionsApi.clear(BUCKET_ID, currentSelection);
-        return apiResponse.pipe(tap$2(() => {
+    }
+    async clearSelection() {
+        const response = await firstValueFrom(this.selectionsApi.get(BUCKET_ID));
+        const currentSelection = Array.from(response);
+        this.selectionsApi.clear(BUCKET_ID, currentSelection).subscribe(() => {
             this.removeIdsFromSelected(currentSelection);
-        }), map$2(() => undefined));
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SelectionService, deps: [{ token: SelectionsApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SelectionService, providedIn: 'root' }); }
@@ -20351,12 +20384,21 @@ class Gn4PlatformMapper {
         const { enabled, emailAddresses, organisation, kind, lastLoginDate, accountNonExpired, accountNonLocked, id, credentialsNonExpired, ...user } = apiUser;
         return { ...apiUser, id: id.toString() };
     }
-    thesaurusFromApi(thesaurus) {
+    thesaurusFromApi(thesaurus, lang3) {
         return thesaurus.map((keyword) => {
-            const { uri, value } = keyword;
+            let key = keyword.uri;
+            // sometines GN can prefix an URI with an "all thesaurus" URI; only keep the last one
+            if (key.indexOf('@@@') > -1) {
+                key = key.split('@@@')[1];
+            }
+            const label = lang3 && lang3 in keyword.values ? keyword.values[lang3] : keyword.value;
+            const description = lang3 && lang3 in keyword.definitions
+                ? keyword.definitions[lang3]
+                : keyword.definition;
             return {
-                key: uri,
-                label: value,
+                key,
+                label,
+                description,
             };
         });
     }
@@ -20369,13 +20411,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 const minApiVersion = '4.2.2';
 class Gn4PlatformService {
-    constructor(siteApiService, meApi, usersApi, mapper, toolsApiService, registriesApiService) {
+    constructor(siteApiService, meApi, usersApi, mapper, toolsApiService, registriesApiService, langService) {
         this.siteApiService = siteApiService;
         this.meApi = meApi;
         this.usersApi = usersApi;
         this.mapper = mapper;
         this.toolsApiService = toolsApiService;
         this.registriesApiService = registriesApiService;
+        this.langService = langService;
         this.type = 'GeoNetwork';
         this.keyTranslations$ = this.toolsApiService
             .getTranslationsPackage1('gnui')
@@ -20389,6 +20432,11 @@ class Gn4PlatformService {
                 throw new Error(`Gn4 API version is not compatible.\nMinimum: ${minApiVersion}\nYour version: ${version}`);
             }
         }), shareReplay(1));
+        /**
+         * A map of already loaded thesauri (groups of keywords); the key is a URI
+         * @private
+         */
+        this.thesauri = {};
         this.me$ = this.meApi.getMe().pipe(switchMap((apiUser) => this.mapper.userFromMeApi(apiUser)), shareReplay({ bufferSize: 1, refCount: true }));
         this.isAnonymous$ = this.me$.pipe(map$1((user) => !user || !('id' in user)));
         this.users$ = this.usersApi.getUsers().pipe(map$1((users) => users.map((user) => this.mapper.userFromApi(user))), shareReplay());
@@ -20415,19 +20463,36 @@ class Gn4PlatformService {
         return this.users$;
     }
     translateKey(key) {
+        // if the key is a URI, use the registries API to look for the translation
+        if (key.match(/^https?:\/\//)) {
+            // the thesaurus URI is inferred by removing a part of the keyword URI
+            // this is not exact science but it's OK, we'll still end up loading a bunch of keywords at once anyway
+            const thesaurusUri = key.replace(/\/([^/]+)$/, '/');
+            return this.getThesaurusByUri(thesaurusUri).pipe(map$1((thesaurus) => {
+                for (const item of thesaurus) {
+                    if (item.key === key)
+                        return item.label;
+                }
+                return key;
+            }));
+        }
         return this.keyTranslations$.pipe(map$1((translations) => translations[key]));
     }
-    getThesaurusByLang(thesaurusName, lang) {
-        return this.registriesApiService
-            .searchKeywords(null, lang, 1000, 0, null, [thesaurusName])
-            .pipe(map$1((thesaurus) => this.mapper.thesaurusFromApi(thesaurus)));
+    getThesaurusByUri(uri) {
+        if (this.thesauri[uri]) {
+            return this.thesauri[uri];
+        }
+        this.thesauri[uri] = this.registriesApiService
+            .searchKeywords(null, this.langService.iso3, 1000, 0, null, null, null, `${uri}*`)
+            .pipe(map$1((thesaurus) => this.mapper.thesaurusFromApi(thesaurus, this.langService.iso3)), shareReplay(1));
+        return this.thesauri[uri];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformService, deps: [{ token: SiteApiService }, { token: MeApiService }, { token: UsersApiService }, { token: Gn4PlatformMapper }, { token: ToolsApiService }, { token: RegistriesApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformService, deps: [{ token: SiteApiService }, { token: MeApiService }, { token: UsersApiService }, { token: Gn4PlatformMapper }, { token: ToolsApiService }, { token: RegistriesApiService }, { token: LangService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: SiteApiService }, { type: MeApiService }, { type: UsersApiService }, { type: Gn4PlatformMapper }, { type: ToolsApiService }, { type: RegistriesApiService }]; } });
+        }], ctorParameters: function () { return [{ type: SiteApiService }, { type: MeApiService }, { type: UsersApiService }, { type: Gn4PlatformMapper }, { type: ToolsApiService }, { type: RegistriesApiService }, { type: LangService }]; } });
 
 function provideGn4() {
     return [
@@ -20639,6 +20704,8 @@ const defaultMapOptions = {
 };
 const FEATURE_MAP_OPTIONS = new InjectionToken('mapOptions');
 
+const LONLAT_CRS_CODES = ['EPSG:4326', 'CRS:84'];
+
 var MapContextLayerTypeEnum;
 (function (MapContextLayerTypeEnum) {
     MapContextLayerTypeEnum["XYZ"] = "xyz";
@@ -21014,9 +21081,15 @@ const FORMATS = {
         color: '#328556',
         mimeTypes: ['x-gis/x-shapefile'],
     },
+    gml: {
+        extensions: ['gml'],
+        priority: 5,
+        color: '#c92bce',
+        mimeTypes: ['application/gml+xml', 'text/xml; subtype=gml'],
+    },
     kml: {
         extensions: ['kml', 'kmz'],
-        priority: 5,
+        priority: 6,
         color: '#348009',
         mimeTypes: [
             'application/vnd.google-earth.kml+xml',
@@ -21025,34 +21098,40 @@ const FORMATS = {
     },
     gpkg: {
         extensions: ['gpkg', 'geopackage'],
-        priority: 6,
+        priority: 7,
         color: '#ea79ba',
         mimeTypes: ['application/geopackage+sqlite3'],
     },
     zip: {
         extensions: ['zip', 'tar.gz'],
-        priority: 7,
+        priority: 8,
         color: '#f2bb3a',
         mimeTypes: ['application/zip', 'application/x-zip'],
     },
     pdf: {
         extensions: ['pdf'],
-        priority: 8,
+        priority: 9,
         color: '#db544a',
         mimeTypes: ['application/pdf'],
     },
     jpg: {
         extensions: ['jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp'],
-        priority: 8,
+        priority: 9,
         color: '#673ab7',
         mimeTypes: ['image/jpg'],
     },
     svg: {
         extensions: ['svg'],
-        priority: 9,
+        priority: 10,
         color: '#d98294',
         mimeTypes: ['image/svg+xml'],
     },
+    dxf: {
+        extensions: ['dxf'],
+        priority: 11,
+        color: '#de630b',
+        mimeTypes: ['application/x-dxf', 'image/x-dxf'],
+    },
 };
 function getFormatPriority(linkFormat) {
     for (const format in FORMATS) {
@@ -21069,14 +21148,18 @@ function getFormatPriority(linkFormat) {
 function getLinkPriority(link) {
     return getFormatPriority(getFileFormat(link));
 }
-function extensionToFormat(extension) {
-    for (const format in FORMATS) {
-        for (const alias of FORMATS[format].extensions) {
-            if (alias === extension.toLowerCase())
-                return format;
+function getFileFormatFromServiceOutput(serviceOutput) {
+    function formatMatcher(format) {
+        const output = serviceOutput.toLowerCase();
+        return (format.extensions.some((extension) => output.includes(extension)) ||
+            format.mimeTypes.some((mimeType) => output.includes(mimeType)));
+    }
+    for (const formatName in FORMATS) {
+        if (formatMatcher(FORMATS[formatName])) {
+            return formatName;
         }
     }
-    return undefined;
+    return null;
 }
 function getFileFormat(link) {
     if ('mimeType' in link) {
@@ -21217,72 +21300,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
-const LONLAT_CRS_CODES = ['EPSG:4326', 'CRS:84'];
-
-class MapUtilsWMSService {
-    constructor(proxy) {
-        this.proxy = proxy;
-    }
-    getCapabilities(layer) {
-        return from(new WmsEndpoint(this.proxy.getProxiedUrl(layer.url)).isReady());
-    }
-    getLayerFull(layer) {
-        return this.getCapabilities(layer).pipe(map$1((endpoint) => endpoint.getLayerByName(layer.name)));
-    }
-    getLayerLonLatBBox(layer) {
-        return this.getLayerFull(layer).pipe(switchMap$1((wmsLayerFull) => from(this.getLonLatBBox(wmsLayerFull))));
-    }
-    async getLonLatBBox(wmsLayerFull) {
-        const { boundingBoxes } = wmsLayerFull;
-        const lonLatCRS = Object.keys(boundingBoxes)?.find((crs) => LONLAT_CRS_CODES.includes(crs));
-        if (lonLatCRS) {
-            return boundingBoxes[lonLatCRS];
-        }
-        else {
-            const availableEPSGCode = Object.keys(boundingBoxes)[0];
-            register(proj4);
-            const proj = await fromEPSGCode(availableEPSGCode);
-            proj4.defs(availableEPSGCode, proj);
-            const bboxWithFiniteNumbers = [
-                parseFloat(boundingBoxes[availableEPSGCode][0]),
-                parseFloat(boundingBoxes[availableEPSGCode][1]),
-                parseFloat(boundingBoxes[availableEPSGCode][2]),
-                parseFloat(boundingBoxes[availableEPSGCode][3]),
-            ];
-            const extent = transformExtent(bboxWithFiniteNumbers, proj, 'EPSG:4326');
-            return extent;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MapUtilsWMSService, deps: [{ token: ProxyService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MapUtilsWMSService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MapUtilsWMSService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: ProxyService }]; } });
-
 const FEATURE_PROJECTION = 'EPSG:3857';
 const DATA_PROJECTION = 'EPSG:4326';
+const GEOJSON = new GeoJSON();
 class MapUtilsService {
-    constructor(http, wmsUtils) {
+    constructor(http, proxy) {
         this.http = http;
-        this.wmsUtils = wmsUtils;
+        this.proxy = proxy;
         this.readFeatureCollection = (featureCollection, featureProjection = FEATURE_PROJECTION, dataProjection = DATA_PROJECTION) => {
-            const olFeatures = new GeoJSON().readFeatures(featureCollection, {
+            return GEOJSON.readFeatures(featureCollection, {
                 featureProjection,
                 dataProjection,
             });
-            return olFeatures;
         };
     }
     createEmptyMap() {
-        const map = new Map$1({
+        return new Map$1({
             controls: [],
             pixelRatio: 1,
         });
-        return map;
     }
     isWMSLayer(layer) {
         return (layer.getSource() instanceof TileWMS ||
@@ -21297,8 +21333,7 @@ class MapUtilsService {
             ...source.getParams(),
             INFO_FORMAT: 'application/json',
         };
-        const url = source.getFeatureInfoUrl(coordinate, resolution, projection, params);
-        return url;
+        return source.getFeatureInfoUrl(coordinate, resolution, projection, params);
     }
     getVectorFeaturesFromClick(olMap, event) {
         const features = [];
@@ -21326,38 +21361,56 @@ class MapUtilsService {
     /**
      * Will emit `null` if no extent could be computed
      */
-    getLayerExtent(layer) {
-        let geographicExtent;
+    async getLayerExtent(layer) {
+        let latLonExtent;
         if (layer &&
             layer.type === 'geojson' &&
             'data' in layer &&
             typeof layer.data === 'object' &&
             layer.data.features[0] &&
             layer.data.features[0].geometry) {
-            geographicExtent = of(layer.data).pipe(map$1((layerData) => new GeoJSON()
-                .readFeatures(layerData)
+            latLonExtent = new GeoJSON()
+                .readFeatures(layer.data)
                 .map((feature) => feature.getGeometry())
                 .filter((geom) => !!geom)
-                .reduce((prev, curr) => prev ? extend(prev, curr.getExtent()) : curr.getExtent(), null)));
+                .reduce((prev, curr) => prev ? extend(prev, curr.getExtent()) : curr.getExtent(), null);
         }
         else if (layer && layer.type === 'wms') {
-            geographicExtent = this.wmsUtils.getLayerLonLatBBox(layer);
+            latLonExtent = await this.getWmsLayerExtent(layer);
         }
         else if (layer && layer.type === 'wmts') {
             if (layer.extent) {
-                geographicExtent = of(layer.extent);
+                latLonExtent = layer.extent;
             }
             else {
-                return of(layer.options.tileGrid.getExtent());
+                return layer.options.tileGrid.getExtent();
             }
         }
         else {
-            return of(null);
+            return null;
+        }
+        if (!latLonExtent || isEmpty(latLonExtent)) {
+            return null;
+        }
+        return transformExtent(latLonExtent, 'EPSG:4326', 'EPSG:3857');
+    }
+    async getWmsLayerExtent(layer) {
+        const endpoint = await new WmsEndpoint(this.proxy.getProxiedUrl(layer.url)).isReady();
+        const { boundingBoxes } = endpoint.getLayerByName(layer.name);
+        if (!Object.keys(boundingBoxes).length) {
+            return null;
+        }
+        const lonLatCRS = Object.keys(boundingBoxes)?.find((crs) => LONLAT_CRS_CODES.includes(crs));
+        if (lonLatCRS) {
+            return boundingBoxes[lonLatCRS].map(parseFloat);
+        }
+        else {
+            const availableEPSGCode = Object.keys(boundingBoxes)[0];
+            register(proj4);
+            const proj = await fromEPSGCode(availableEPSGCode);
+            const bboxWithFiniteNumbers = boundingBoxes[availableEPSGCode].map(parseFloat);
+            return transformExtent(bboxWithFiniteNumbers, proj, 'EPSG:4326');
         }
-        return geographicExtent.pipe(map$1((extent) => [
-            ...fromLonLat([extent[0], extent[1]], 'EPSG:3857'),
-            ...fromLonLat([extent[2], extent[3]], 'EPSG:3857'),
-        ]), map$1((extent) => (isEmpty(extent) ? null : extent)));
     }
     getWmtsLayerFromCapabilities(link) {
         const getCapabilitiesUrl = new URL(link.url, window.location.toString());
@@ -21413,7 +21466,18 @@ ${e.stack || e.message || e}`);
         ])
             .getArray());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MapUtilsService, deps: [{ token: i1.HttpClient }, { token: MapUtilsWMSService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    getRecordExtent(record) {
+        if (!('spatialExtents' in record)) {
+            return null;
+        }
+        // transform an array of geojson geometries into a bbox
+        const totalExtent = record.spatialExtents.reduce((prev, curr) => {
+            const geom = GEOJSON.readGeometry(curr.geometry);
+            return extend(prev, geom.getExtent());
+        }, [Infinity, Infinity, -Infinity, -Infinity]);
+        return transformExtent(totalExtent, 'EPSG:4326', 'EPSG:3857');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MapUtilsService, deps: [{ token: i1.HttpClient }, { token: ProxyService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MapUtilsService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MapUtilsService, decorators: [{
@@ -21421,7 +21485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: MapUtilsWMSService }]; } });
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: ProxyService }]; } });
 function dragPanCondition(event) {
     const dragPanCondition = this.getPointerCount() === 2 || mouseOnly(event);
     if (!dragPanCondition) {
@@ -22496,6 +22560,7 @@ const DEFAULT_VIEW = {
     center: [0, 15],
     zoom: 2,
 };
+const WFS_MAX_FEATURES = 10000;
 class MapContextService {
     constructor(mapUtils, styleService) {
         this.mapUtils = mapUtils;
@@ -22505,6 +22570,9 @@ class MapContextService {
         if (mapConfig) {
             mapContext = this.mergeMapConfigWithContext(mapContext, mapConfig);
         }
+        else {
+            mapContext.layers = this.addDefaultBaselayerContext(mapContext.layers);
+        }
         if (!mapContext.view?.extent &&
             (!mapContext.view?.center || !mapContext.view?.zoom)) {
             mapContext.view = this.getFallbackView(mapConfig);
@@ -22554,6 +22622,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,
@@ -22614,6 +22683,11 @@ class MapContextService {
         }
         return view;
     }
+    addDefaultBaselayerContext(layers) {
+        return layers.includes(DEFAULT_BASELAYER_CONTEXT)
+            ? layers
+            : [DEFAULT_BASELAYER_CONTEXT, ...layers];
+    }
     mergeMapConfigWithContext(mapContext, mapConfig) {
         return {
             ...mapContext,
@@ -23101,6 +23175,7 @@ class ThumbnailComponent {
     constructor(optionalPlaceholderUrl) {
         this.optionalPlaceholderUrl = optionalPlaceholderUrl;
         this.fit = 'cover';
+        this.placeholderShown = new EventEmitter();
         this.placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER;
         this.images = [];
     }
@@ -23136,6 +23211,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' });
@@ -23158,7 +23234,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,
@@ -23178,11 +23254,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,
@@ -23191,7 +23269,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,
@@ -23288,8 +23366,7 @@ class MetadataQualityComponent {
             : this.calculatedQualityScore;
     }
     get calculatedQualityScore() {
-        return Math.round((this.items.filter(({ value }) => value === true).length * 100) /
-            this.items.length);
+        return Math.round((this.items.filter(({ value }) => value).length * 100) / this.items.length);
     }
     showMenu() {
         this.isMenuShown = true;
@@ -23339,7 +23416,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,
@@ -23357,7 +23434,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,
@@ -23397,7 +23474,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,
@@ -23730,15 +23807,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 args: ['contentDiv']
             }] } });
 
-class ContentGhostComponent {
+class CopyTextButtonComponent {
     constructor() {
-        this.ghostClass = '';
+        this.displayText = true;
+        this.rows = 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ContentGhostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: { showContent: "showContent", ghostClass: "ghostClass" }, ngImport: i0, template: "<div\n  *ngIf=\"!showContent\"\n  class=\"ghost bg-gray-100 rounded-lg relative overflow-hidden {{ ghostClass }}\"\n></div>\n<ng-content *ngIf=\"showContent\"></ng-content>\n", styles: [".ghost{min-height:2rem;min-width:2rem;overflow:hidden}.ghost:after{content:\"\";position:absolute;top:0;bottom:0;width:50%;background-image:linear-gradient(to left,rgba(251,251,251,.05),rgba(251,251,251,.3),rgba(251,251,251,.6),rgba(251,251,251,.3),rgba(251,251,251,.05));animation:loading 1s infinite}@keyframes loading{0%{left:-50%}to{left:100%}}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ContentGhostComponent, decorators: [{
-            type: Component,
+    copyText(event) {
+        navigator.clipboard.writeText(this.text);
+        event.target.blur();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CopyTextButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: { text: "text", tooltipText: "tooltipText", displayText: "displayText", rows: "rows" }, ngImport: i0, template: "<div class=\"flex\">\n  <input\n    *ngIf=\"displayText && rows <= 1\"\n    type=\"text\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate\"\n    value=\"{{ text }}\"\n    readonly\n  />\n  <textarea\n    *ngIf=\"displayText && rows > 1\"\n    [rows]=\"rows\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max\"\n    readonly\n    >{{ text }}</textarea\n  >\n  <button\n    type=\"button\"\n    (click)=\"copyText($event)\"\n    [ngClass]=\"{\n      'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n        displayText\n    }\"\n    mat-raised-button\n    [matTooltip]=\"tooltipText\"\n    matTooltipPosition=\"above\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n      >content_copy</mat-icon\n    >\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CopyTextButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-copy-text-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\n  <input\n    *ngIf=\"displayText && rows <= 1\"\n    type=\"text\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate\"\n    value=\"{{ text }}\"\n    readonly\n  />\n  <textarea\n    *ngIf=\"displayText && rows > 1\"\n    [rows]=\"rows\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max\"\n    readonly\n    >{{ text }}</textarea\n  >\n  <button\n    type=\"button\"\n    (click)=\"copyText($event)\"\n    [ngClass]=\"{\n      'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n        displayText\n    }\"\n    mat-raised-button\n    [matTooltip]=\"tooltipText\"\n    matTooltipPosition=\"above\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n      >content_copy</mat-icon\n    >\n  </button>\n</div>\n" }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], tooltipText: [{
+                type: Input
+            }], displayText: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }] } });
+
+class MarkdownParserComponent {
+    get parsedMarkdown() {
+        return marked.parse(this.textContent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownParserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MarkdownParserComponent, isStandalone: true, selector: "gn-ui-markdown-parser", inputs: { textContent: "textContent" }, ngImport: i0, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host ::ng-deep .markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0px 0px 1.5rem;line-height:1.5;word-wrap:break-word}:host ::ng-deep .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host ::ng-deep .markdown-body h1,:host ::ng-deep .markdown-body h2,:host ::ng-deep .markdown-body h3,:host ::ng-deep .markdown-body h4,:host ::ng-deep .markdown-body h5,:host ::ng-deep .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host ::ng-deep .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host ::ng-deep .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host ::ng-deep .markdown-body p{margin-top:0;margin-bottom:10px}:host ::ng-deep .markdown-body p>a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none}:host ::ng-deep .markdown-body p>a:hover{color:var(--color-primary-darker)!important;@apply underline;}:host ::ng-deep .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host ::ng-deep .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host ::ng-deep .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host ::ng-deep .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host ::ng-deep .markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;border:0}:host ::ng-deep .markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--color-secondary);height:.15em;padding:0;margin:24px 0;background-color:var(--color-secondary);border:0}:host ::ng-deep .markdown-body hr:before{display:table;content:\"\"}:host ::ng-deep .markdown-body hr:after{display:table;clear:both;content:\"\"}:host ::ng-deep .markdown-body ul,:host ::ng-deep .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host ::ng-deep .markdown-body ol ol,:host ::ng-deep .markdown-body ul ol{list-style-type:lower-roman}:host ::ng-deep .markdown-body ul ul ol,:host ::ng-deep .markdown-body ul ol ol,:host ::ng-deep .markdown-body ol ul ol,:host ::ng-deep .markdown-body ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host ::ng-deep .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host ::ng-deep .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host ::ng-deep .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body div>ol:not([type]){list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host ::ng-deep .markdown-body td,:host ::ng-deep .markdown-body th{padding:0}:host ::ng-deep .markdown-body th{color:var(--color-secondary)}:host ::ng-deep .markdown-body table th,:host ::ng-deep .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host ::ng-deep .markdown-body table td>:last-child{margin-bottom:0}:host ::ng-deep .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host ::ng-deep .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host ::ng-deep .markdown-body table img{background-color:transparent}:host ::ng-deep .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host ::ng-deep .markdown-body img[align=right]{padding-left:20px}:host ::ng-deep .markdown-body img[align=left]{padding-right:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownParserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-markdown-parser', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"markdown-body\" [innerHTML]=\"parsedMarkdown\"></div>\n", styles: [":host ::ng-deep .markdown-body{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0px 0px 1.5rem;line-height:1.5;word-wrap:break-word}:host ::ng-deep .markdown-body strong{@apply font-bold;color:var(--color-secondary-darker)}:host ::ng-deep .markdown-body h1,:host ::ng-deep .markdown-body h2,:host ::ng-deep .markdown-body h3,:host ::ng-deep .markdown-body h4,:host ::ng-deep .markdown-body h5,:host ::ng-deep .markdown-body h6{margin-top:24px;margin-bottom:16px;line-height:1.25;@apply text-title font-title font-bold;}:host ::ng-deep .markdown-body h1{margin:.67em 0;padding-bottom:.3em;font-size:2em;color:var(--color-primary)}:host ::ng-deep .markdown-body h2{padding-bottom:.3em;font-size:1.5em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h3{font-size:1.25em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h4{font-size:1em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h5{font-size:.875em;color:var(--color-secondary)}:host ::ng-deep .markdown-body h6{font-size:.85em;color:var(--color-secondary-lighter)}:host ::ng-deep .markdown-body p{margin-top:0;margin-bottom:10px}:host ::ng-deep .markdown-body p>a{margin-top:0;margin-bottom:10px;color:var(--color-primary)!important;text-decoration:none}:host ::ng-deep .markdown-body p>a:hover{color:var(--color-primary-darker)!important;@apply underline;}:host ::ng-deep .markdown-body blockquote{margin:0;padding:0 1em;color:var(--color-secondary-lighter);border-left:.25em solid var(--color-primary-lighter)}:host ::ng-deep .markdown-body pre{margin-top:0;margin-bottom:0;font-size:12px;background-color:var(--color-gray-100);word-wrap:normal}:host ::ng-deep .markdown-body pre{padding:16px;overflow:auto;font-size:85%;line-height:1.45;color:var(--color-secondary);border-radius:6px}:host ::ng-deep .markdown-body code{padding:.2em .4em;margin:0;font-size:85%;white-space:break-spaces;border-radius:6px}:host ::ng-deep .markdown-body pre code{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;border:0}:host ::ng-deep .markdown-body hr{box-sizing:content-box;overflow:hidden;background:transparent;border-bottom:1px solid var(--color-secondary);height:.15em;padding:0;margin:24px 0;background-color:var(--color-secondary);border:0}:host ::ng-deep .markdown-body hr:before{display:table;content:\"\"}:host ::ng-deep .markdown-body hr:after{display:table;clear:both;content:\"\"}:host ::ng-deep .markdown-body ul,:host ::ng-deep .markdown-body ol{margin-top:0;margin-bottom:0;padding-left:2em;list-style:revert}:host ::ng-deep .markdown-body ol ol,:host ::ng-deep .markdown-body ul ol{list-style-type:lower-roman}:host ::ng-deep .markdown-body ul ul ol,:host ::ng-deep .markdown-body ul ol ol,:host ::ng-deep .markdown-body ol ul ol,:host ::ng-deep .markdown-body ol ol ol{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"a s\"]{list-style-type:lower-alpha}:host ::ng-deep .markdown-body ol[type=\"A s\"]{list-style-type:upper-alpha}:host ::ng-deep .markdown-body ol[type=\"i s\"]{list-style-type:lower-roman}:host ::ng-deep .markdown-body ol[type=\"I s\"]{list-style-type:upper-roman}:host ::ng-deep .markdown-body ol[type=\"1\"]{list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body div>ol:not([type]){list-style:unset;list-style-type:decimal}:host ::ng-deep .markdown-body table{border-spacing:0;border-collapse:collapse;display:block;width:max-content;max-width:100%;overflow:auto;padding-bottom:15px}:host ::ng-deep .markdown-body td,:host ::ng-deep .markdown-body th{padding:0}:host ::ng-deep .markdown-body th{color:var(--color-secondary)}:host ::ng-deep .markdown-body table th,:host ::ng-deep .markdown-body table td{padding:6px 13px;border:1px solid var(--color-gray-500)}:host ::ng-deep .markdown-body table td>:last-child{margin-bottom:0}:host ::ng-deep .markdown-body table tr{background-color:#fff;border-top:1px solid var(--color-secondary-lighter)}:host ::ng-deep .markdown-body table tr:nth-child(2n){background-color:var(--color-gray-100)}:host ::ng-deep .markdown-body table img{background-color:transparent}:host ::ng-deep .markdown-body img{border-style:none;max-width:100%;box-sizing:content-box;background-color:transparent}:host ::ng-deep .markdown-body img[align=right]{padding-left:20px}:host ::ng-deep .markdown-body img[align=left]{padding-right:20px}\n"] }]
+        }], propDecorators: { textContent: [{
+                type: Input
+            }] } });
+
+class ContentGhostComponent {
+    constructor() {
+        this.ghostClass = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ContentGhostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: { showContent: "showContent", ghostClass: "ghostClass" }, ngImport: i0, template: "<div\n  *ngIf=\"!showContent\"\n  class=\"ghost bg-gray-100 rounded-lg relative overflow-hidden {{ ghostClass }}\"\n></div>\n<ng-content *ngIf=\"showContent\"></ng-content>\n", styles: [".ghost{min-height:2rem;min-width:2rem;overflow:hidden}.ghost:after{content:\"\";position:absolute;top:0;bottom:0;width:50%;background-image:linear-gradient(to left,rgba(251,251,251,.05),rgba(251,251,251,.3),rgba(251,251,251,.6),rgba(251,251,251,.3),rgba(251,251,251,.05));animation:loading 1s infinite}@keyframes loading{0%{left:-50%}to{left:100%}}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ContentGhostComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'gn-ui-content-ghost', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"!showContent\"\n  class=\"ghost bg-gray-100 rounded-lg relative overflow-hidden {{ ghostClass }}\"\n></div>\n<ng-content *ngIf=\"showContent\"></ng-content>\n", styles: [".ghost{min-height:2rem;min-width:2rem;overflow:hidden}.ghost:after{content:\"\";position:absolute;top:0;bottom:0;width:50%;background-image:linear-gradient(to left,rgba(251,251,251,.05),rgba(251,251,251,.3),rgba(251,251,251,.6),rgba(251,251,251,.3),rgba(251,251,251,.05));animation:loading 1s infinite}@keyframes loading{0%{left:-50%}to{left:100%}}\n"] }]
         }], propDecorators: { showContent: [{
                 type: Input
@@ -23890,16 +24006,32 @@ class MetadataInfoComponent {
     }
     get hasUsage() {
         return (this.metadata.extras?.isOpenData === true ||
-            this.metadata.useLimitations?.length ||
-            this.metadata.accessConstraints?.length);
+            (this.metadata.legalConstraints?.length > 0 &&
+                this.legalConstraints.length > 0) ||
+            (this.metadata.otherConstraints?.length > 0 &&
+                this.otherConstraints.length > 0) ||
+            (this.metadata.licenses?.length > 0 && this.licenses.length > 0));
     }
-    get usages() {
+    get legalConstraints() {
         let array = [];
-        if (this.metadata.useLimitations?.length) {
-            array = array.concat(this.metadata.useLimitations);
+        if (this.metadata.legalConstraints?.length) {
+            array = array.concat(this.metadata.legalConstraints.filter((c) => c.text).map((c) => c.text));
         }
-        if (this.metadata.accessConstraints?.length) {
-            array = array.concat(this.metadata.accessConstraints.map((c) => c.text));
+        return array;
+    }
+    get otherConstraints() {
+        let array = [];
+        if (this.metadata.otherConstraints?.length) {
+            array = array.concat(this.metadata.otherConstraints.filter((c) => c.text).map((c) => c.text));
+        }
+        return array;
+    }
+    get licenses() {
+        let array = [];
+        if (this.metadata.licenses?.length) {
+            array = array.concat(this.metadata.licenses
+                .filter((c) => c.text)
+                .map((c) => ({ text: c.text, url: c.url })));
         }
         return array;
     }
@@ -23922,11 +24054,11 @@ class MetadataInfoComponent {
         this.keyword.emit(keyword);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MetadataInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MetadataInfoComponent, selector: "gn-ui-metadata-info", inputs: { metadata: "metadata", incomplete: "incomplete" }, outputs: { keyword: "keyword" }, ngImport: i0, template: "<p\n  class=\"text-[28px] text-title text-center mb-6 font-title sm:text-left\"\n  translate\n>\n  record.metadata.about\n</p>\n<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost ghostClass=\"h-32\" [showContent]=\"fieldReady('abstract')\">\n    <gn-ui-max-lines [maxLines]=\"6\" *ngIf=\"metadata.abstract\">\n      <div>\n        <p\n          class=\"whitespace-pre-line break-words sm:mb-4 sm:pr-16\"\n          [innerHTML]=\"metadata.abstract\"\n          gnUiLinkify\n        ></p>\n        <ng-container *ngIf=\"metadata.keywords?.length\">\n          <p class=\"mb-3 font-medium text-primary text-sm\" translate>\n            record.metadata.keywords\n          </p>\n          <div class=\"sm:pb-4 sm:pr-16\">\n            <gn-ui-badge\n              class=\"inline-block mr-2 mb-2 lowercase\"\n              (click)=\"onKeywordClick(keyword)\"\n              [clickable]=\"true\"\n              *ngFor=\"let keyword of metadata.keywords\"\n              >{{ keyword }}</gn-ui-badge\n            >\n          </div>\n        </ng-container>\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel\n  class=\"metadata-origin\"\n  *ngIf=\"\n    metadata.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.origin' | translate\"\n>\n  <p\n    *ngIf=\"metadata.lineage\"\n    class=\"mb-5 pt-4 whitespace-pre-line break-words\"\n    gnUiLinkify\n  >\n    {{ metadata.lineage }}\n  </p>\n  <div\n    class=\"py-4 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-[10px] gap-x-[20px] text-gray-700 info-grid\"\n  >\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}\n      </p>\n    </div>\n    <div *ngIf=\"updateFrequency\">\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.status\">\n      <p class=\"text-sm\" translate>record.metadata.updateStatus</p>\n      <p class=\"text-primary font-medium mt-1\" translate>\n        domain.record.status.{{ metadata.status }}\n      </p>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\n  <div class=\"py-4 px-6 rounded bg-gray-100 text-gray-700 flex flex-wrap gap-2\">\n    <gn-ui-badge *ngIf=\"metadata.extras?.isOpenData\">\n      <span translate>record.metadata.isOpenData</span>\n    </gn-ui-badge>\n    <span\n      class=\"text-primary font-medium\"\n      *ngFor=\"let usage of usages\"\n      gnUiLinkify\n    >\n      {{ usage }}\n    </span>\n    <span class=\"text-primary font-medium noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div class=\"py-5 px-5 rounded bg-gray-100 text-gray-700\">\n    <p class=\"text-sm\" translate>record.metadata.sheet</p>\n    <p class=\"text-primary font-medium mt-1\" translate>\n      <a [href]=\"metadata.landingPage\" target=\"_blank\">\n        <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n      </a>\n    </p>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "collapsed"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "component", type: MaxLinesComponent, selector: "gn-ui-max-lines", inputs: ["maxLines"] }, { 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: MetadataInfoComponent, selector: "gn-ui-metadata-info", inputs: { metadata: "metadata", incomplete: "incomplete" }, outputs: { keyword: "keyword" }, ngImport: i0, template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost ghostClass=\"h-32\" [showContent]=\"fieldReady('abstract')\">\n    <gn-ui-max-lines [maxLines]=\"6\" *ngIf=\"metadata.abstract\">\n      <div>\n        <gn-ui-markdown-parser\n          [textContent]=\"metadata.abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\n  <div class=\"flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900\">\n    <ng-container *ngFor=\"let license of licenses\">\n      <div *ngIf=\"license.url; else noUrl\" class=\"text-primary\">\n        <a\n          [href]=\"license.url\"\n          target=\"_blank\"\n          class=\"cursor-pointer hover:underline transition-all\"\n        >\n          {{ license.text }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <ng-template #noUrl>\n        <div class=\"text-primary\" gnUiLinkify>\n          {{ license.text }}\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"legalConstraints.length\">\n      <gn-ui-markdown-parser\n        *ngFor=\"let constraint of legalConstraints\"\n        [textContent]=\"constraint\"\n      >\n      </gn-ui-markdown-parser>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <h5 translate class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\">\n          record.metadata.otherConstraints\n        </h5>\n        <gn-ui-markdown-parser [textContent]=\"constraint\">\n        </gn-ui-markdown-parser>\n      </div>\n    </ng-container>\n\n    <span class=\"noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  class=\"metadata-origin\"\n  *ngIf=\"\n    metadata.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.origin' | translate\"\n>\n  <p\n    *ngIf=\"metadata.lineage\"\n    class=\"mb-5 pt-4 whitespace-pre-line break-words text-gray-900\"\n    gnUiLinkify\n  >\n    {{ metadata.lineage }}\n  </p>\n  <div\n    class=\"py-4 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-[10px] gap-x-[20px] text-gray-700 info-grid\"\n  >\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}\n      </p>\n    </div>\n    <div *ngIf=\"updateFrequency\">\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.status\">\n      <p class=\"text-sm\" translate>record.metadata.updateStatus</p>\n      <p class=\"text-primary font-medium mt-1\" translate>\n        domain.record.status.{{ metadata.status }}\n      </p>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div class=\"flex flex-col gap-4 mr-4 py-5 rounded text-gray-700\">\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.landingPage\">\n      <p class=\"text-sm\" translate>record.metadata.sheet</p>\n      <p class=\"text-primary font-medium\" translate>\n        <a [href]=\"metadata.landingPage\" target=\"_blank\">\n          <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n        </a>\n      </p>\n    </div>\n    <div *ngIf=\"metadata.ownerOrganization\">\n      <p class=\"text-sm\" translate>record.metadata.owner</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.ownerOrganization.name }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.uniqueIdentifier\">\n      <p class=\"text-sm\" translate>record.metadata.uniqueId</p>\n      <div class=\"flex flex-row content-align items-end gap-1\">\n        <gn-ui-copy-text-button\n          [text]=\"metadata.uniqueIdentifier\"\n          [tooltipText]=\"'tooltip.id.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <p class=\"text-primary font-medium\">\n          {{ metadata.uniqueIdentifier }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"metadata.themes?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.themes</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          class=\"inline-block mr-2 lowercase\"\n          *ngFor=\"let theme of metadata.themes\"\n          >{{ theme }}</gn-ui-badge\n        >\n      </div>\n    </div>\n    <div *ngIf=\"metadata.keywords?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.keywords</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          class=\"inline-block mr-2 mb-2 lowercase\"\n          (click)=\"onKeywordClick(keyword)\"\n          [clickable]=\"true\"\n          *ngFor=\"let keyword of metadata.keywords\"\n          >{{ keyword }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button mat-icon{transform:scale(.8)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "collapsed"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "component", type: MaxLinesComponent, selector: "gn-ui-max-lines", inputs: ["maxLines"] }, { 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: MetadataInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-metadata-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p\n  class=\"text-[28px] text-title text-center mb-6 font-title sm:text-left\"\n  translate\n>\n  record.metadata.about\n</p>\n<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost ghostClass=\"h-32\" [showContent]=\"fieldReady('abstract')\">\n    <gn-ui-max-lines [maxLines]=\"6\" *ngIf=\"metadata.abstract\">\n      <div>\n        <p\n          class=\"whitespace-pre-line break-words sm:mb-4 sm:pr-16\"\n          [innerHTML]=\"metadata.abstract\"\n          gnUiLinkify\n        ></p>\n        <ng-container *ngIf=\"metadata.keywords?.length\">\n          <p class=\"mb-3 font-medium text-primary text-sm\" translate>\n            record.metadata.keywords\n          </p>\n          <div class=\"sm:pb-4 sm:pr-16\">\n            <gn-ui-badge\n              class=\"inline-block mr-2 mb-2 lowercase\"\n              (click)=\"onKeywordClick(keyword)\"\n              [clickable]=\"true\"\n              *ngFor=\"let keyword of metadata.keywords\"\n              >{{ keyword }}</gn-ui-badge\n            >\n          </div>\n        </ng-container>\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel\n  class=\"metadata-origin\"\n  *ngIf=\"\n    metadata.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.origin' | translate\"\n>\n  <p\n    *ngIf=\"metadata.lineage\"\n    class=\"mb-5 pt-4 whitespace-pre-line break-words\"\n    gnUiLinkify\n  >\n    {{ metadata.lineage }}\n  </p>\n  <div\n    class=\"py-4 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-[10px] gap-x-[20px] text-gray-700 info-grid\"\n  >\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}\n      </p>\n    </div>\n    <div *ngIf=\"updateFrequency\">\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.status\">\n      <p class=\"text-sm\" translate>record.metadata.updateStatus</p>\n      <p class=\"text-primary font-medium mt-1\" translate>\n        domain.record.status.{{ metadata.status }}\n      </p>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\n  <div class=\"py-4 px-6 rounded bg-gray-100 text-gray-700 flex flex-wrap gap-2\">\n    <gn-ui-badge *ngIf=\"metadata.extras?.isOpenData\">\n      <span translate>record.metadata.isOpenData</span>\n    </gn-ui-badge>\n    <span\n      class=\"text-primary font-medium\"\n      *ngFor=\"let usage of usages\"\n      gnUiLinkify\n    >\n      {{ usage }}\n    </span>\n    <span class=\"text-primary font-medium noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div class=\"py-5 px-5 rounded bg-gray-100 text-gray-700\">\n    <p class=\"text-sm\" translate>record.metadata.sheet</p>\n    <p class=\"text-primary font-medium mt-1\" translate>\n      <a [href]=\"metadata.landingPage\" target=\"_blank\">\n        <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n      </a>\n    </p>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}\n"] }]
+            args: [{ selector: 'gn-ui-metadata-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost ghostClass=\"h-32\" [showContent]=\"fieldReady('abstract')\">\n    <gn-ui-max-lines [maxLines]=\"6\" *ngIf=\"metadata.abstract\">\n      <div>\n        <gn-ui-markdown-parser\n          [textContent]=\"metadata.abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\n  <div class=\"flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900\">\n    <ng-container *ngFor=\"let license of licenses\">\n      <div *ngIf=\"license.url; else noUrl\" class=\"text-primary\">\n        <a\n          [href]=\"license.url\"\n          target=\"_blank\"\n          class=\"cursor-pointer hover:underline transition-all\"\n        >\n          {{ license.text }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <ng-template #noUrl>\n        <div class=\"text-primary\" gnUiLinkify>\n          {{ license.text }}\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"legalConstraints.length\">\n      <gn-ui-markdown-parser\n        *ngFor=\"let constraint of legalConstraints\"\n        [textContent]=\"constraint\"\n      >\n      </gn-ui-markdown-parser>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <h5 translate class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\">\n          record.metadata.otherConstraints\n        </h5>\n        <gn-ui-markdown-parser [textContent]=\"constraint\">\n        </gn-ui-markdown-parser>\n      </div>\n    </ng-container>\n\n    <span class=\"noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  class=\"metadata-origin\"\n  *ngIf=\"\n    metadata.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.origin' | translate\"\n>\n  <p\n    *ngIf=\"metadata.lineage\"\n    class=\"mb-5 pt-4 whitespace-pre-line break-words text-gray-900\"\n    gnUiLinkify\n  >\n    {{ metadata.lineage }}\n  </p>\n  <div\n    class=\"py-4 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-[10px] gap-x-[20px] text-gray-700 info-grid\"\n  >\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}\n      </p>\n    </div>\n    <div *ngIf=\"updateFrequency\">\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.status\">\n      <p class=\"text-sm\" translate>record.metadata.updateStatus</p>\n      <p class=\"text-primary font-medium mt-1\" translate>\n        domain.record.status.{{ metadata.status }}\n      </p>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div class=\"flex flex-col gap-4 mr-4 py-5 rounded text-gray-700\">\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.landingPage\">\n      <p class=\"text-sm\" translate>record.metadata.sheet</p>\n      <p class=\"text-primary font-medium\" translate>\n        <a [href]=\"metadata.landingPage\" target=\"_blank\">\n          <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n        </a>\n      </p>\n    </div>\n    <div *ngIf=\"metadata.ownerOrganization\">\n      <p class=\"text-sm\" translate>record.metadata.owner</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.ownerOrganization.name }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.uniqueIdentifier\">\n      <p class=\"text-sm\" translate>record.metadata.uniqueId</p>\n      <div class=\"flex flex-row content-align items-end gap-1\">\n        <gn-ui-copy-text-button\n          [text]=\"metadata.uniqueIdentifier\"\n          [tooltipText]=\"'tooltip.id.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <p class=\"text-primary font-medium\">\n          {{ metadata.uniqueIdentifier }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"metadata.themes?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.themes</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          class=\"inline-block mr-2 lowercase\"\n          *ngFor=\"let theme of metadata.themes\"\n          >{{ theme }}</gn-ui-badge\n        >\n      </div>\n    </div>\n    <div *ngIf=\"metadata.keywords?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.keywords</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          class=\"inline-block mr-2 mb-2 lowercase\"\n          (click)=\"onKeywordClick(keyword)\"\n          [clickable]=\"true\"\n          *ngFor=\"let keyword of metadata.keywords\"\n          >{{ keyword }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button mat-icon{transform:scale(.8)}\n"] }]
         }], propDecorators: { metadata: [{
                 type: Input
             }], incomplete: [{
@@ -23995,11 +24127,11 @@ class ButtonComponent {
         propagateToDocumentOnly(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ButtonComponent, selector: "gn-ui-button", inputs: { type: "type", disabled: "disabled", extraClass: "extraClass" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none\"\n  [class]=\"classList\"\n  [disabled]=\"disabled\"\n  (click)=\"handleClick($event)\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: [":host /deep/ mat-icon.mat-icon{margin-top:-.325em;margin-bottom:-.325em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ButtonComponent, isStandalone: true, selector: "gn-ui-button", inputs: { type: "type", disabled: "disabled", extraClass: "extraClass" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none\"\n  [class]=\"classList\"\n  [disabled]=\"disabled\"\n  (click)=\"handleClick($event)\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: [":host ::ng-deep mat-icon.mat-icon{margin-top:-.325em;margin-bottom:-.325em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  class=\"flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none\"\n  [class]=\"classList\"\n  [disabled]=\"disabled\"\n  (click)=\"handleClick($event)\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: [":host /deep/ mat-icon.mat-icon{margin-top:-.325em;margin-bottom:-.325em}\n"] }]
+            args: [{ selector: 'gn-ui-button', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button\n  type=\"button\"\n  class=\"flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50 disabled:pointer-events-none\"\n  [class]=\"classList\"\n  [disabled]=\"disabled\"\n  (click)=\"handleClick($event)\"\n>\n  <ng-content></ng-content>\n</button>\n", styles: [":host ::ng-deep mat-icon.mat-icon{margin-top:-.325em;margin-bottom:-.325em}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], disabled: [{
@@ -24074,40 +24206,15 @@ class DownloadsListComponent {
         return link.type === 'service' && link.accessServiceProtocol === 'wfs';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadsListComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DownloadsListComponent, selector: "gn-ui-downloads-list", inputs: { links: "links" }, ngImport: i0, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\">\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromWfs]=\"isFromWfs(link)\"\n  ></gn-ui-download-item>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: ["link", "color", "format", "isFromWfs"], outputs: ["exportUrl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DownloadsListComponent, selector: "gn-ui-downloads-list", inputs: { links: "links" }, ngImport: i0, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromWfs]=\"isFromWfs(link)\"\n  ></gn-ui-download-item>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: ["link", "color", "format", "isFromWfs"], outputs: ["exportUrl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-downloads-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\">\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromWfs]=\"isFromWfs(link)\"\n  ></gn-ui-download-item>\n</div>\n" }]
+            args: [{ selector: 'gn-ui-downloads-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromWfs]=\"isFromWfs(link)\"\n  ></gn-ui-download-item>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; }, propDecorators: { links: [{
                 type: Input
             }] } });
 
-class CopyTextButtonComponent {
-    constructor() {
-        this.displayText = true;
-        this.rows = 1;
-    }
-    copyText(event) {
-        navigator.clipboard.writeText(this.text);
-        event.target.blur();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CopyTextButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: { text: "text", tooltipText: "tooltipText", displayText: "displayText", rows: "rows" }, ngImport: i0, template: "<div class=\"flex\">\n  <input\n    *ngIf=\"displayText && rows <= 1\"\n    type=\"text\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate\"\n    value=\"{{ text }}\"\n    readonly\n  />\n  <textarea\n    *ngIf=\"displayText && rows > 1\"\n    [rows]=\"rows\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max\"\n    readonly\n    >{{ text }}</textarea\n  >\n  <button\n    type=\"button\"\n    (click)=\"copyText($event)\"\n    [ngClass]=\"{\n      'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n        displayText\n    }\"\n    mat-raised-button\n    [matTooltip]=\"tooltipText\"\n    matTooltipPosition=\"above\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n      >content_copy</mat-icon\n    >\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CopyTextButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-copy-text-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\n  <input\n    *ngIf=\"displayText && rows <= 1\"\n    type=\"text\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate\"\n    value=\"{{ text }}\"\n    readonly\n  />\n  <textarea\n    *ngIf=\"displayText && rows > 1\"\n    [rows]=\"rows\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max\"\n    readonly\n    >{{ text }}</textarea\n  >\n  <button\n    type=\"button\"\n    (click)=\"copyText($event)\"\n    [ngClass]=\"{\n      'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n        displayText\n    }\"\n    mat-raised-button\n    [matTooltip]=\"tooltipText\"\n    matTooltipPosition=\"above\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n      >content_copy</mat-icon\n    >\n  </button>\n</div>\n" }]
-        }], propDecorators: { text: [{
-                type: Input
-            }], tooltipText: [{
-                type: Input
-            }], displayText: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }] } });
-
 class ApiCardComponent {
     constructor() {
         this.currentlyActive = false;
@@ -24304,11 +24411,11 @@ class CarouselComponent {
         this.emblaApi.scrollTo(stepIndex);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CarouselComponent, selector: "gn-ui-carousel", inputs: { containerClass: "containerClass", stepsContainerClass: "stepsContainerClass" }, viewQueries: [{ propertyName: "carouselOverflowContainer", first: true, predicate: ["carouselOverflowContainer"], descendants: true }], ngImport: i0, template: "<div #carouselOverflowContainer class=\"overflow-hidden h-full w-full\">\n  <div class=\"carousel-container flex flex-row\" [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<div\n  class=\"absolute right-0 top-0 flex flex-row justify-center gap-[10px] p-1\"\n  [ngClass]=\"stepsContainerClass\"\n>\n  <button\n    *ngFor=\"let step of steps; let i = index\"\n    class=\"carousel-step-dot\"\n    (click)=\"scrollToStep(i)\"\n    [ngClass]=\"selectedStep === i ? 'bg-secondary' : 'bg-gray-400'\"\n  ></button>\n</div>\n", styles: [":host .carousel-container /deep/ > *{flex-shrink:0}:host{position:relative}.carousel-step-dot{width:6px;height:6px;border-radius:6px;position:relative}.carousel-step-dot:after{content:\"\";position:absolute;left:-4px;top:-4px;width:14px;height:14px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CarouselComponent, selector: "gn-ui-carousel", inputs: { containerClass: "containerClass", stepsContainerClass: "stepsContainerClass" }, viewQueries: [{ propertyName: "carouselOverflowContainer", first: true, predicate: ["carouselOverflowContainer"], descendants: true }], ngImport: i0, template: "<div #carouselOverflowContainer class=\"overflow-hidden h-full w-full\">\n  <div class=\"carousel-container flex flex-row\" [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<div\n  class=\"absolute right-0 top-0 flex flex-row justify-center gap-[10px] p-1\"\n  [ngClass]=\"stepsContainerClass\"\n>\n  <button\n    *ngFor=\"let step of steps; let i = index\"\n    class=\"carousel-step-dot\"\n    (click)=\"scrollToStep(i)\"\n    [ngClass]=\"selectedStep === i ? 'bg-secondary' : 'bg-gray-400'\"\n  ></button>\n</div>\n", styles: [":host .carousel-container ::ng-deep>*{flex-shrink:0}:host{position:relative}.carousel-step-dot{width:6px;height:6px;border-radius:6px;position:relative}.carousel-step-dot:after{content:\"\";position:absolute;left:-4px;top:-4px;width:14px;height:14px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-carousel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #carouselOverflowContainer class=\"overflow-hidden h-full w-full\">\n  <div class=\"carousel-container flex flex-row\" [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<div\n  class=\"absolute right-0 top-0 flex flex-row justify-center gap-[10px] p-1\"\n  [ngClass]=\"stepsContainerClass\"\n>\n  <button\n    *ngFor=\"let step of steps; let i = index\"\n    class=\"carousel-step-dot\"\n    (click)=\"scrollToStep(i)\"\n    [ngClass]=\"selectedStep === i ? 'bg-secondary' : 'bg-gray-400'\"\n  ></button>\n</div>\n", styles: [":host .carousel-container /deep/ > *{flex-shrink:0}:host{position:relative}.carousel-step-dot{width:6px;height:6px;border-radius:6px;position:relative}.carousel-step-dot:after{content:\"\";position:absolute;left:-4px;top:-4px;width:14px;height:14px}\n"] }]
+            args: [{ selector: 'gn-ui-carousel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #carouselOverflowContainer class=\"overflow-hidden h-full w-full\">\n  <div class=\"carousel-container flex flex-row\" [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<div\n  class=\"absolute right-0 top-0 flex flex-row justify-center gap-[10px] p-1\"\n  [ngClass]=\"stepsContainerClass\"\n>\n  <button\n    *ngFor=\"let step of steps; let i = index\"\n    class=\"carousel-step-dot\"\n    (click)=\"scrollToStep(i)\"\n    [ngClass]=\"selectedStep === i ? 'bg-secondary' : 'bg-gray-400'\"\n  ></button>\n</div>\n", styles: [":host .carousel-container ::ng-deep>*{flex-shrink:0}:host{position:relative}.carousel-step-dot{width:6px;height:6px;border-radius:6px;position:relative}.carousel-step-dot:after{content:\"\";position:absolute;left:-4px;top:-4px;width:14px;height:14px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { containerClass: [{
                 type: Input
             }], stepsContainerClass: [{
@@ -24352,6 +24459,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
+class InteractiveTableColumnComponent {
+    constructor() {
+        this.grow = false;
+        this.sortable = false;
+        this.activeSort = null;
+        this.sortChange = new EventEmitter();
+    }
+    handleSortChange() {
+        this.activeSort = this.activeSort === 'asc' ? 'desc' : 'asc';
+        this.sortChange.emit(this.activeSort);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: InteractiveTableColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: InteractiveTableColumnComponent, isStandalone: true, selector: "gn-ui-interactive-table-column", inputs: { grow: "grow", sortable: "sortable", activeSort: "activeSort" }, outputs: { sortChange: "sortChange" }, queries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "cell", first: true, predicate: ["cell"], descendants: true }], ngImport: i0, template: "<span>empty</span>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: InteractiveTableColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-interactive-table-column', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span>empty</span>\n" }]
+        }], propDecorators: { header: [{
+                type: ContentChild,
+                args: ['header']
+            }], cell: [{
+                type: ContentChild,
+                args: ['cell']
+            }], grow: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], activeSort: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
+            }] } });
+
+class InteractiveTableComponent {
+    constructor() {
+        this.items = [];
+        this.itemClick = new EventEmitter();
+    }
+    get gridStyle() {
+        return {
+            'grid-template-columns': this.columns
+                .map((column) => column.grow ? `minmax(0px,1fr)` : `minmax(0px,max-content)`)
+                .join(' '),
+        };
+    }
+    handleRowClick(item) {
+        this.itemClick.emit(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: InteractiveTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: InteractiveTableComponent, isStandalone: true, selector: "gn-ui-interactive-table", inputs: { items: "items" }, outputs: { itemClick: "itemClick" }, queries: [{ propertyName: "columns", predicate: InteractiveTableColumnComponent }], ngImport: i0, template: "<div class=\"grid w-full\" [ngStyle]=\"gridStyle\">\n  <div class=\"contents\">\n    <ng-container *ngFor=\"let column of columns\">\n      <button\n        *ngIf=\"column.sortable\"\n        type=\"button\"\n        class=\"table-header-cell\"\n        (click)=\"column.sortable && column.handleSortChange()\"\n      >\n        <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n        <div class=\"sort-button flex flex-col\" *ngIf=\"column.sortable\">\n          <mat-icon\n            class=\"material-symbols-outlined text-gray-600\"\n            [ngClass]=\"{ 'text-main': column.activeSort === 'asc' }\"\n            >expand_less</mat-icon\n          >\n          <mat-icon\n            class=\"material-symbols-outlined text-gray-600\"\n            [ngClass]=\"{ 'text-main': column.activeSort === 'desc' }\"\n            >expand_more</mat-icon\n          >\n        </div>\n      </button>\n      <div *ngIf=\"!column.sortable\" class=\"table-header-cell\">\n        <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <div\n    class=\"contents text-gray-900 cursor-pointer group\"\n    *ngFor=\"let item of items\"\n    (click)=\"handleRowClick(item)\"\n  >\n    <div\n      class=\"relative h-0\"\n      [ngStyle]=\"{ 'grid-column': 'span ' + this.columns.length }\"\n    >\n      <!-- this element is only used in keyboard navigation -->\n      <button\n        type=\"button\"\n        class=\"absolute inset-x-0 h-[50px] bg-transparent pointer-events-none\"\n      ></button>\n    </div>\n    <ng-container *ngFor=\"let column of columns\">\n      <div\n        class=\"table-row-cell px-4 py-3 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"column.cell; context: { $implicit: item }\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sort-button mat-icon{padding:0;margin:0;height:8px;line-height:8px;font-size:18px}.table-header-cell{@apply text-gray-700 px-4 py-5 flex items-center truncate bg-white;}button.table-header-cell{@apply transition-colors duration-75 hover:text-main hover:bg-gray-50 focus:text-main focus:bg-gray-50;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: InteractiveTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-interactive-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, InteractiveTableColumnComponent, MatIconModule], template: "<div class=\"grid w-full\" [ngStyle]=\"gridStyle\">\n  <div class=\"contents\">\n    <ng-container *ngFor=\"let column of columns\">\n      <button\n        *ngIf=\"column.sortable\"\n        type=\"button\"\n        class=\"table-header-cell\"\n        (click)=\"column.sortable && column.handleSortChange()\"\n      >\n        <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n        <div class=\"sort-button flex flex-col\" *ngIf=\"column.sortable\">\n          <mat-icon\n            class=\"material-symbols-outlined text-gray-600\"\n            [ngClass]=\"{ 'text-main': column.activeSort === 'asc' }\"\n            >expand_less</mat-icon\n          >\n          <mat-icon\n            class=\"material-symbols-outlined text-gray-600\"\n            [ngClass]=\"{ 'text-main': column.activeSort === 'desc' }\"\n            >expand_more</mat-icon\n          >\n        </div>\n      </button>\n      <div *ngIf=\"!column.sortable\" class=\"table-header-cell\">\n        <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <div\n    class=\"contents text-gray-900 cursor-pointer group\"\n    *ngFor=\"let item of items\"\n    (click)=\"handleRowClick(item)\"\n  >\n    <div\n      class=\"relative h-0\"\n      [ngStyle]=\"{ 'grid-column': 'span ' + this.columns.length }\"\n    >\n      <!-- this element is only used in keyboard navigation -->\n      <button\n        type=\"button\"\n        class=\"absolute inset-x-0 h-[50px] bg-transparent pointer-events-none\"\n      ></button>\n    </div>\n    <ng-container *ngFor=\"let column of columns\">\n      <div\n        class=\"table-row-cell px-4 py-3 flex items-center bg-white transition-colors duration-75 truncate group-hover:text-main group-hover:bg-gray-50 border-b border-gray-200\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"column.cell; context: { $implicit: item }\"\n        ></ng-container>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sort-button mat-icon{padding:0;margin:0;height:8px;line-height:8px;font-size:18px}.table-header-cell{@apply text-gray-700 px-4 py-5 flex items-center truncate bg-white;}button.table-header-cell{@apply transition-colors duration-75 hover:text-main hover:bg-gray-50 focus:text-main focus:bg-gray-50;}\n"] }]
+        }], propDecorators: { columns: [{
+                type: ContentChildren,
+                args: [InteractiveTableColumnComponent]
+            }], items: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }] } });
+
 class LinkCardComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: LinkCardComponent, selector: "gn-ui-link-card", inputs: { link: "link" }, ngImport: i0, template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80\"\n>\n  <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n    <p\n      class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n    >\n      {{ link.name }}\n    </p>\n    <p class=\"font-medium text-sm break-words\">\n      {{ link.description }}\n    </p>\n    <p\n      *ngIf=\"!link.name && !link.description\"\n      class=\"font-medium text-sm break-words truncate\"\n    >\n      {{ link.url }}\n    </p>\n  </div>\n  <div>\n    <mat-icon class=\"material-symbols-outlined card-icon\">open_in_new</mat-icon>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -24365,11 +24535,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
             }] } });
@@ -24397,11 +24567,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\">\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\">\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: [{
@@ -24805,11 +24975,11 @@ class DropdownMultiselectComponent {
         this.setFocus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DropdownMultiselectComponent, deps: [{ token: i1$6.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DropdownMultiselectComponent, selector: "gn-ui-dropdown-multiselect", inputs: { title: "title", choices: "choices", selected: "selected", allowSearch: "allowSearch", maxRows: "maxRows", searchInputValue: "searchInputValue" }, outputs: { selectValues: "selectValues" }, viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, read: ElementRef }, { propertyName: "searchFieldInput", first: true, predicate: ["searchFieldInput"], descendants: true }, { propertyName: "checkboxes", predicate: ["checkBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    <div\n      *ngIf=\"hasSelectedChoices\"\n      class=\"shrink-0 rounded-full text-primary bg-primary-opacity-25 text-white font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n    >\n      {{ selected.length }}\n    </div>\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    <mat-icon\n      class=\"material-symbols-outlined shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n      *ngIf=\"hasSelectedChoices && !overlayOpen\"\n      (click)=\"clearSelection($event)\"\n    >\n      close\n    </mat-icon>\n  </button>\n  <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n    <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n    <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n  </mat-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      <button\n        type=\"button\"\n        *ngFor=\"let selected of selectedChoices\"\n        [title]=\"selected.label\"\n        class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n        (click)=\"select(selected, false)\"\n      >\n        <div class=\"text-sm truncate leading-[26px] px-2\">\n          {{ selected.label }}\n        </div>\n        <div\n          class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[12px] !w-[12px] text-[12px]\"\n          >\n            close</mat-icon\n          >\n        </div>\n      </button>\n\n      <div *ngIf=\"allowSearch\" class=\"w-[50%] relative grow shrink\">\n        <input\n          #searchFieldInput\n          class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n          [(ngModel)]=\"searchInputValue\"\n          [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n        />\n        <button\n          *ngIf=\"!!searchInputValue\"\n          class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n          (click)=\"clearSearchInputValue($event)\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[10px] !w-[12px] text-[12px]\"\n          >\n            close\n          </mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <label\n      *ngFor=\"let choice of filteredChoicesByText\"\n      [title]=\"choice.label\"\n      class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n    >\n      <input\n        class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n        type=\"checkbox\"\n        #checkBox\n        [checked]=\"isSelected(choice)\"\n        (change)=\"select(choice, $event.target.checked)\"\n      />\n      <span class=\"ml-[8px] text-[14px] truncate\">\n        {{ choice.label }}\n      </span>\n    </label>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DropdownMultiselectComponent, selector: "gn-ui-dropdown-multiselect", inputs: { title: "title", choices: "choices", selected: "selected", allowSearch: "allowSearch", maxRows: "maxRows", searchInputValue: "searchInputValue" }, outputs: { selectValues: "selectValues" }, viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, read: ElementRef }, { propertyName: "searchFieldInput", first: true, predicate: ["searchFieldInput"], descendants: true }, { propertyName: "checkboxes", predicate: ["checkBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    <div\n      *ngIf=\"hasSelectedChoices\"\n      class=\"shrink-0 rounded-full text-primary bg-primary-opacity-25 text-white font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n    >\n      {{ selected.length }}\n    </div>\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    <mat-icon\n      class=\"material-symbols-outlined shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n      *ngIf=\"hasSelectedChoices && !overlayOpen\"\n      (click)=\"clearSelection($event)\"\n    >\n      close\n    </mat-icon>\n  </button>\n  <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n    <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n    <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n  </mat-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      <button\n        type=\"button\"\n        *ngFor=\"let selected of selectedChoices\"\n        [title]=\"selected.label\"\n        class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n        (click)=\"select(selected, false)\"\n      >\n        <div class=\"text-sm truncate leading-[26px] px-2\">\n          {{ selected.label }}\n        </div>\n        <div\n          class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[12px] !w-[12px] text-[12px]\"\n          >\n            close</mat-icon\n          >\n        </div>\n      </button>\n\n      <div *ngIf=\"allowSearch\" class=\"w-[50%] relative grow shrink\">\n        <input\n          #searchFieldInput\n          class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n          [(ngModel)]=\"searchInputValue\"\n          [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n        />\n        <button\n          *ngIf=\"!!searchInputValue\"\n          class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n          (click)=\"clearSearchInputValue($event)\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[10px] !w-[12px] text-[12px]\"\n          >\n            close\n          </mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <label\n      *ngFor=\"let choice of filteredChoicesByText\"\n      [title]=\"choice.label\"\n      class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n    >\n      <input\n        class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n        type=\"checkbox\"\n        #checkBox\n        [checked]=\"isSelected(choice)\"\n        (change)=\"select(choice, checkBox.checked)\"\n      />\n      <span class=\"ml-[8px] text-[14px] truncate\">\n        {{ choice.label }}\n      </span>\n    </label>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DropdownMultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-dropdown-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    <div\n      *ngIf=\"hasSelectedChoices\"\n      class=\"shrink-0 rounded-full text-primary bg-primary-opacity-25 text-white font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n    >\n      {{ selected.length }}\n    </div>\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    <mat-icon\n      class=\"material-symbols-outlined shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n      *ngIf=\"hasSelectedChoices && !overlayOpen\"\n      (click)=\"clearSelection($event)\"\n    >\n      close\n    </mat-icon>\n  </button>\n  <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n    <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n    <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n  </mat-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      <button\n        type=\"button\"\n        *ngFor=\"let selected of selectedChoices\"\n        [title]=\"selected.label\"\n        class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n        (click)=\"select(selected, false)\"\n      >\n        <div class=\"text-sm truncate leading-[26px] px-2\">\n          {{ selected.label }}\n        </div>\n        <div\n          class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[12px] !w-[12px] text-[12px]\"\n          >\n            close</mat-icon\n          >\n        </div>\n      </button>\n\n      <div *ngIf=\"allowSearch\" class=\"w-[50%] relative grow shrink\">\n        <input\n          #searchFieldInput\n          class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n          [(ngModel)]=\"searchInputValue\"\n          [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n        />\n        <button\n          *ngIf=\"!!searchInputValue\"\n          class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n          (click)=\"clearSearchInputValue($event)\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[10px] !w-[12px] text-[12px]\"\n          >\n            close\n          </mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <label\n      *ngFor=\"let choice of filteredChoicesByText\"\n      [title]=\"choice.label\"\n      class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n    >\n      <input\n        class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n        type=\"checkbox\"\n        #checkBox\n        [checked]=\"isSelected(choice)\"\n        (change)=\"select(choice, $event.target.checked)\"\n      />\n      <span class=\"ml-[8px] text-[14px] truncate\">\n        {{ choice.label }}\n      </span>\n    </label>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'gn-ui-dropdown-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    <div\n      *ngIf=\"hasSelectedChoices\"\n      class=\"shrink-0 rounded-full text-primary bg-primary-opacity-25 text-white font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n    >\n      {{ selected.length }}\n    </div>\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    <mat-icon\n      class=\"material-symbols-outlined shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n      *ngIf=\"hasSelectedChoices && !overlayOpen\"\n      (click)=\"clearSelection($event)\"\n    >\n      close\n    </mat-icon>\n  </button>\n  <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n    <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n    <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n  </mat-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      <button\n        type=\"button\"\n        *ngFor=\"let selected of selectedChoices\"\n        [title]=\"selected.label\"\n        class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n        (click)=\"select(selected, false)\"\n      >\n        <div class=\"text-sm truncate leading-[26px] px-2\">\n          {{ selected.label }}\n        </div>\n        <div\n          class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[12px] !w-[12px] text-[12px]\"\n          >\n            close</mat-icon\n          >\n        </div>\n      </button>\n\n      <div *ngIf=\"allowSearch\" class=\"w-[50%] relative grow shrink\">\n        <input\n          #searchFieldInput\n          class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n          [(ngModel)]=\"searchInputValue\"\n          [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n        />\n        <button\n          *ngIf=\"!!searchInputValue\"\n          class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n          (click)=\"clearSearchInputValue($event)\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[10px] !w-[12px] text-[12px]\"\n          >\n            close\n          </mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <label\n      *ngFor=\"let choice of filteredChoicesByText\"\n      [title]=\"choice.label\"\n      class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n    >\n      <input\n        class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n        type=\"checkbox\"\n        #checkBox\n        [checked]=\"isSelected(choice)\"\n        (change)=\"select(choice, checkBox.checked)\"\n      />\n      <span class=\"ml-[8px] text-[14px] truncate\">\n        {{ choice.label }}\n      </span>\n    </label>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i1$6.ScrollStrategyOptions }]; }, propDecorators: { title: [{
                 type: Input
             }], choices: [{
@@ -24963,11 +25133,11 @@ class TextAreaComponent {
         this.rawChange.next(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: { value: "value", placeholder: "placeholder", required: "required" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"h-full flex\">\n  <textarea\n    #input\n    name=\"textArea\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n    class=\"w-full pt-2 pl-2 resize-none border border-gray-800 rounded italic leading-tight focus:outline-none focus:bg-background focus:border-primary\"\n    [attr.required]=\"required || null\"\n  ></textarea>\n</div>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: TextAreaComponent, isStandalone: true, selector: "gn-ui-text-area", inputs: { value: "value", placeholder: "placeholder", required: "required" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"h-full flex\">\n  <textarea\n    #input\n    name=\"textArea\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n    class=\"w-full pt-2 pl-2 resize-none border border-gray-800 rounded italic leading-tight focus:outline-none focus:bg-background focus:border-primary\"\n    [attr.required]=\"required || null\"\n  ></textarea>\n</div>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-text-area', template: "<div class=\"h-full flex\">\n  <textarea\n    #input\n    name=\"textArea\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n    class=\"w-full pt-2 pl-2 resize-none border border-gray-800 rounded italic leading-tight focus:outline-none focus:bg-background focus:border-primary\"\n    [attr.required]=\"required || null\"\n  ></textarea>\n</div>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }]
+            args: [{ selector: 'gn-ui-text-area', standalone: true, template: "<div class=\"h-full flex\">\n  <textarea\n    #input\n    name=\"textArea\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n    class=\"w-full pt-2 pl-2 resize-none border border-gray-800 rounded italic leading-tight focus:outline-none focus:bg-background focus:border-primary\"\n    [attr.required]=\"required || null\"\n  ></textarea>\n</div>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], placeholder: [{
@@ -25068,11 +25238,11 @@ class AutocompleteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: { placeholder: "placeholder", action: "action", value: "value", clearOnSelection: "clearOnSelection", autoFocus: "autoFocus", displayWithFn: "displayWithFn" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted", inputCleared: "inputCleared" }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <input\n    #searchInput\n    type=\"text\"\n    class=\"appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded w-full text-black shadow-xl focus:shadow-[0_0_24px_0_rgba(21,40,184,0.09)]\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"handleEnter($event.target.value)\"\n  />\n  <button\n    type=\"button\"\n    class=\"text-primary-lightest hover:text-primary hover:bg-gray-50 absolute transition-all duration-100 clear-btn inset-y-0\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (click)=\"clear()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">close</mat-icon>\n  </button>\n  <button\n    type=\"button\"\n    class=\"text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 absolute transition-all duration-100 search-btn rounded-r inset-y-0 right-0\"\n    aria-label=\"Trigger search\"\n    (click)=\"handleClickSearch()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n  </button>\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"error_outline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</div>\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFn\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion\"\n  >\n    {{ displayWithFn(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: [":host{--input-height: 3.5em}.clear-btn{width:var(--input-height);right:var(--input-height);height:100%}.search-btn{width:var(--input-height);height:100%;border-left-width:.1em}mat-icon{width:100%;height:100%;padding:.65em;font-size:1.5em}input{height:var(--input-height);padding:1.05em;padding-right:calc(2 * var(--input-height))}input:placeholder-shown{text-overflow:ellipsis}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: { placeholder: "placeholder", action: "action", value: "value", clearOnSelection: "clearOnSelection", autoFocus: "autoFocus", displayWithFn: "displayWithFn" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted", inputCleared: "inputCleared" }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <input\n    #searchInput\n    type=\"text\"\n    class=\"appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded w-full text-black shadow-xl focus:shadow-[0_0_24px_0_rgba(21,40,184,0.09)]\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"handleEnter(searchInput.value)\"\n  />\n  <button\n    type=\"button\"\n    class=\"text-primary-lightest hover:text-primary hover:bg-gray-50 absolute transition-all duration-100 clear-btn inset-y-0\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (click)=\"clear()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">close</mat-icon>\n  </button>\n  <button\n    type=\"button\"\n    class=\"text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 absolute transition-all duration-100 search-btn rounded-r inset-y-0 right-0\"\n    aria-label=\"Trigger search\"\n    (click)=\"handleClickSearch()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n  </button>\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"error_outline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</div>\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFn\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion\"\n  >\n    {{ displayWithFn(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: [":host{--input-height: 3.5em}.clear-btn{width:var(--input-height);right:var(--input-height);height:100%}.search-btn{width:var(--input-height);height:100%;border-left-width:.1em}mat-icon{width:100%;height:100%;padding:.65em;font-size:1.5em}input{height:var(--input-height);padding:1.05em;padding-right:calc(2 * var(--input-height))}input:placeholder-shown{text-overflow:ellipsis}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n  <input\n    #searchInput\n    type=\"text\"\n    class=\"appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded w-full text-black shadow-xl focus:shadow-[0_0_24px_0_rgba(21,40,184,0.09)]\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"handleEnter($event.target.value)\"\n  />\n  <button\n    type=\"button\"\n    class=\"text-primary-lightest hover:text-primary hover:bg-gray-50 absolute transition-all duration-100 clear-btn inset-y-0\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (click)=\"clear()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">close</mat-icon>\n  </button>\n  <button\n    type=\"button\"\n    class=\"text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 absolute transition-all duration-100 search-btn rounded-r inset-y-0 right-0\"\n    aria-label=\"Trigger search\"\n    (click)=\"handleClickSearch()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n  </button>\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"error_outline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</div>\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFn\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion\"\n  >\n    {{ displayWithFn(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: [":host{--input-height: 3.5em}.clear-btn{width:var(--input-height);right:var(--input-height);height:100%}.search-btn{width:var(--input-height);height:100%;border-left-width:.1em}mat-icon{width:100%;height:100%;padding:.65em;font-size:1.5em}input{height:var(--input-height);padding:1.05em;padding-right:calc(2 * var(--input-height))}input:placeholder-shown{text-overflow:ellipsis}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"] }]
+            args: [{ selector: 'gn-ui-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n  <input\n    #searchInput\n    type=\"text\"\n    class=\"appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded w-full text-black shadow-xl focus:shadow-[0_0_24px_0_rgba(21,40,184,0.09)]\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"handleEnter(searchInput.value)\"\n  />\n  <button\n    type=\"button\"\n    class=\"text-primary-lightest hover:text-primary hover:bg-gray-50 absolute transition-all duration-100 clear-btn inset-y-0\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (click)=\"clear()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">close</mat-icon>\n  </button>\n  <button\n    type=\"button\"\n    class=\"text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 absolute transition-all duration-100 search-btn rounded-r inset-y-0 right-0\"\n    aria-label=\"Trigger search\"\n    (click)=\"handleClickSearch()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n  </button>\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"error_outline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</div>\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFn\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion\"\n  >\n    {{ displayWithFn(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: [":host{--input-height: 3.5em}.clear-btn{width:var(--input-height);right:var(--input-height);height:100%}.search-btn{width:var(--input-height);height:100%;border-left-width:.1em}mat-icon{width:100%;height:100%;padding:.65em;font-size:1.5em}input{height:var(--input-height);padding:1.05em;padding-right:calc(2 * var(--input-height))}input:placeholder-shown{text-overflow:ellipsis}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], action: [{
@@ -25121,11 +25291,11 @@ class StarToggleComponent {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: StarToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: StarToggleComponent, selector: "gn-ui-star-toggle", inputs: { toggled: "toggled", disabled: "disabled" }, outputs: { newValue: "newValue" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["starOverlay"], descendants: true }], ngImport: i0, template: "<div class=\"inline-block relative align-middle\" style=\"line-height: 0.7em\">\n  <button\n    type=\"button\"\n    class=\"-m-[8px] p-[8px]\"\n    (click)=\"toggle($event)\"\n    [ngClass]=\"{\n      enabled: toggled,\n      'disabled opacity-45': !toggled,\n      'transition hover:scale-125 will-change-transform': !disabled,\n      'cursor-default': disabled\n    }\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined\"\n      [ngClass]=\"{ 'star-filled': toggled }\"\n      >star</mat-icon\n    >\n  </button>\n  <svg\n    #starOverlay\n    class=\"star-toggle-overlay\"\n    width=\"40px\"\n    height=\"40px\"\n    viewBox=\"-15 -15 30 30\"\n  >\n    <g>\n      <path d=\"M 0,13.229167 V 0\" />\n      <path d=\"M -12.484186,4.0880377 0,0\" />\n      <path d=\"M -7.6784102,-10.70262 0,0\" />\n      <path d=\"M 7.8734079,-10.70262 0,0\" />\n      <path d=\"M 12.679184,4.0880376 0,0\" />\n    </g>\n  </svg>\n</div>\n", styles: ["button.enabled{color:var(--star-toggle-enabled-color, var(--color-secondary))}button.disabled{color:var(--star-toggle-disabled-color, var(--color-primary))}mat-icon{width:1em;height:1em;font-size:1.5em;margin-top:-.1em;font-variation-settings:\"opsz\" 40}.star-filled{font-variation-settings:\"FILL\" 1}.star-toggle-overlay{stroke:var(--color-secondary);stroke-width:3.5px;stroke-linecap:round;position:absolute;top:50%;left:50%;width:2.5em;height:2.5em;transform:translate(-50%,-50%);pointer-events:none;stroke-dasharray:5 20;stroke-dashoffset:-15;animation:overlay-dash .8s cubic-bezier(.16,.66,.44,.96) forwards;animation-play-state:paused}@keyframes overlay-dash{to{stroke-dashoffset:7}}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: StarToggleComponent, selector: "gn-ui-star-toggle", inputs: { toggled: "toggled", disabled: "disabled" }, outputs: { newValue: "newValue" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["starOverlay"], descendants: true }], ngImport: i0, template: "<div class=\"inline-block relative align-middle\" style=\"line-height: 0.7em\">\n  <button\n    type=\"button\"\n    class=\"-m-[8px] p-[8px]\"\n    (click)=\"toggle($event)\"\n    [ngClass]=\"{\n      enabled: toggled,\n      'disabled opacity-45': !toggled,\n      'transition hover:scale-125 will-change-transform': !disabled,\n      'cursor-default': disabled\n    }\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined\"\n      [ngClass]=\"{ 'star-filled': toggled }\"\n      >star</mat-icon\n    >\n  </button>\n  <svg\n    #starOverlay\n    class=\"star-toggle-overlay\"\n    width=\"40px\"\n    height=\"40px\"\n    viewBox=\"-15 -15 30 30\"\n  >\n    <g>\n      <path d=\"M 0,13.229167 V 0\" />\n      <path d=\"M -12.484186,4.0880377 0,0\" />\n      <path d=\"M -7.6784102,-10.70262 0,0\" />\n      <path d=\"M 7.8734079,-10.70262 0,0\" />\n      <path d=\"M 12.679184,4.0880376 0,0\" />\n    </g>\n  </svg>\n</div>\n", styles: ["button.enabled{color:var(--star-toggle-enabled-color, var(--color-secondary))}button.disabled{color:var(--star-toggle-disabled-color, var(--color-primary))}mat-icon{width:1em;height:1em;font-size:1.5em;margin-top:-.1em;font-variation-settings:\"opsz\" 40;stroke:var(--color-primary-darker)}.star-filled{font-variation-settings:\"FILL\" 1}.star-toggle-overlay{stroke:var(--color-secondary);stroke-width:3.5px;stroke-linecap:round;position:absolute;top:50%;left:50%;width:2.5em;height:2.5em;transform:translate(-50%,-50%);pointer-events:none;stroke-dasharray:5 20;stroke-dashoffset:-15;animation:overlay-dash .8s cubic-bezier(.16,.66,.44,.96) forwards;animation-play-state:paused}@keyframes overlay-dash{to{stroke-dashoffset:7}}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: StarToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-star-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inline-block relative align-middle\" style=\"line-height: 0.7em\">\n  <button\n    type=\"button\"\n    class=\"-m-[8px] p-[8px]\"\n    (click)=\"toggle($event)\"\n    [ngClass]=\"{\n      enabled: toggled,\n      'disabled opacity-45': !toggled,\n      'transition hover:scale-125 will-change-transform': !disabled,\n      'cursor-default': disabled\n    }\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined\"\n      [ngClass]=\"{ 'star-filled': toggled }\"\n      >star</mat-icon\n    >\n  </button>\n  <svg\n    #starOverlay\n    class=\"star-toggle-overlay\"\n    width=\"40px\"\n    height=\"40px\"\n    viewBox=\"-15 -15 30 30\"\n  >\n    <g>\n      <path d=\"M 0,13.229167 V 0\" />\n      <path d=\"M -12.484186,4.0880377 0,0\" />\n      <path d=\"M -7.6784102,-10.70262 0,0\" />\n      <path d=\"M 7.8734079,-10.70262 0,0\" />\n      <path d=\"M 12.679184,4.0880376 0,0\" />\n    </g>\n  </svg>\n</div>\n", styles: ["button.enabled{color:var(--star-toggle-enabled-color, var(--color-secondary))}button.disabled{color:var(--star-toggle-disabled-color, var(--color-primary))}mat-icon{width:1em;height:1em;font-size:1.5em;margin-top:-.1em;font-variation-settings:\"opsz\" 40}.star-filled{font-variation-settings:\"FILL\" 1}.star-toggle-overlay{stroke:var(--color-secondary);stroke-width:3.5px;stroke-linecap:round;position:absolute;top:50%;left:50%;width:2.5em;height:2.5em;transform:translate(-50%,-50%);pointer-events:none;stroke-dasharray:5 20;stroke-dashoffset:-15;animation:overlay-dash .8s cubic-bezier(.16,.66,.44,.96) forwards;animation-play-state:paused}@keyframes overlay-dash{to{stroke-dashoffset:7}}\n"] }]
+            args: [{ selector: 'gn-ui-star-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"inline-block relative align-middle\" style=\"line-height: 0.7em\">\n  <button\n    type=\"button\"\n    class=\"-m-[8px] p-[8px]\"\n    (click)=\"toggle($event)\"\n    [ngClass]=\"{\n      enabled: toggled,\n      'disabled opacity-45': !toggled,\n      'transition hover:scale-125 will-change-transform': !disabled,\n      'cursor-default': disabled\n    }\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined\"\n      [ngClass]=\"{ 'star-filled': toggled }\"\n      >star</mat-icon\n    >\n  </button>\n  <svg\n    #starOverlay\n    class=\"star-toggle-overlay\"\n    width=\"40px\"\n    height=\"40px\"\n    viewBox=\"-15 -15 30 30\"\n  >\n    <g>\n      <path d=\"M 0,13.229167 V 0\" />\n      <path d=\"M -12.484186,4.0880377 0,0\" />\n      <path d=\"M -7.6784102,-10.70262 0,0\" />\n      <path d=\"M 7.8734079,-10.70262 0,0\" />\n      <path d=\"M 12.679184,4.0880376 0,0\" />\n    </g>\n  </svg>\n</div>\n", styles: ["button.enabled{color:var(--star-toggle-enabled-color, var(--color-secondary))}button.disabled{color:var(--star-toggle-disabled-color, var(--color-primary))}mat-icon{width:1em;height:1em;font-size:1.5em;margin-top:-.1em;font-variation-settings:\"opsz\" 40;stroke:var(--color-primary-darker)}.star-filled{font-variation-settings:\"FILL\" 1}.star-toggle-overlay{stroke:var(--color-secondary);stroke-width:3.5px;stroke-linecap:round;position:absolute;top:50%;left:50%;width:2.5em;height:2.5em;transform:translate(-50%,-50%);pointer-events:none;stroke-dasharray:5 20;stroke-dashoffset:-15;animation:overlay-dash .8s cubic-bezier(.16,.66,.44,.96) forwards;animation-play-state:paused}@keyframes overlay-dash{to{stroke-dashoffset:7}}\n"] }]
         }], propDecorators: { toggled: [{
                 type: Input
             }], disabled: [{
@@ -25237,11 +25407,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 class NavigationButtonComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NavigationButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NavigationButtonComponent, selector: "gn-ui-navigation-button", inputs: { label: "label", icon: "icon" }, ngImport: i0, template: "<button\n  class=\"group flex items-center justify-center backdrop-blur p-1 bg-primary-opacity-50 text-white rounded\"\n>\n  <mat-icon class=\"material-symbols-outlined align-middle\">{{ icon }}</mat-icon>\n  <span class=\"mx-2 hidden group-hover:inline\">{{ label }}</span>\n</button>\n", styles: [""], dependencies: [{ 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: NavigationButtonComponent, selector: "gn-ui-navigation-button", inputs: { label: "label", icon: "icon" }, ngImport: i0, template: "<button\n  class=\"group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 text-white rounded content-center\"\n>\n  <mat-icon class=\"material-symbols-outlined align-middle w-[18px]\">{{\n    icon\n  }}</mat-icon>\n  <span\n    class=\"mx-2 mt-0.5 text-[16px] tracking-widest content-center opacity-75\"\n    >{{ label.toUpperCase() }}</span\n  >\n</button>\n", styles: [""], dependencies: [{ 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: NavigationButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-navigation-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"group flex items-center justify-center backdrop-blur p-1 bg-primary-opacity-50 text-white rounded\"\n>\n  <mat-icon class=\"material-symbols-outlined align-middle\">{{ icon }}</mat-icon>\n  <span class=\"mx-2 hidden group-hover:inline\">{{ label }}</span>\n</button>\n" }]
+            args: [{ selector: 'gn-ui-navigation-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 text-white rounded content-center\"\n>\n  <mat-icon class=\"material-symbols-outlined align-middle w-[18px]\">{{\n    icon\n  }}</mat-icon>\n  <span\n    class=\"mx-2 mt-0.5 text-[16px] tracking-widest content-center opacity-75\"\n    >{{ label.toUpperCase() }}</span\n  >\n</button>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -25448,11 +25618,11 @@ class CheckboxComponent {
         this.changed.emit(this.checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CheckboxComponent, selector: "gn-ui-checkbox", inputs: { type: "type", checked: "checked", indeterminate: "indeterminate" }, outputs: { changed: "changed" }, ngImport: i0, template: "<mat-checkbox\n  class=\"cursor-pointer\"\n  [class]=\"classList\"\n  type=\"checkbox\"\n  [checked]=\"checked\"\n  [indeterminate]=\"indeterminate\"\n  (click)=\"handleClick($event)\"\n></mat-checkbox>\n", styles: [".default{--gn-ui-checkbox-color: var(--color-main)}.secondary{--gn-ui-checkbox-color: var(--color-secondary)}.primary{--gn-ui-checkbox-color: var(--color-primary)}mat-checkbox{--mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-state-layer-color: var( --gn-ui-checkbox-color )}\n"], dependencies: [{ kind: "component", type: i1$7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CheckboxComponent, selector: "gn-ui-checkbox", inputs: { type: "type", checked: "checked", indeterminate: "indeterminate" }, outputs: { changed: "changed" }, ngImport: i0, template: "<mat-checkbox\n  class=\"cursor-pointer\"\n  [class]=\"classList\"\n  [checked]=\"checked\"\n  [indeterminate]=\"indeterminate\"\n  (click)=\"handleClick($event)\"\n></mat-checkbox>\n", styles: [".default{--gn-ui-checkbox-color: var(--color-main)}.secondary{--gn-ui-checkbox-color: var(--color-secondary)}.primary{--gn-ui-checkbox-color: var(--color-primary)}mat-checkbox{--mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-state-layer-color: var( --gn-ui-checkbox-color )}\n"], dependencies: [{ kind: "component", type: i1$7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-checkbox\n  class=\"cursor-pointer\"\n  [class]=\"classList\"\n  type=\"checkbox\"\n  [checked]=\"checked\"\n  [indeterminate]=\"indeterminate\"\n  (click)=\"handleClick($event)\"\n></mat-checkbox>\n", styles: [".default{--gn-ui-checkbox-color: var(--color-main)}.secondary{--gn-ui-checkbox-color: var(--color-secondary)}.primary{--gn-ui-checkbox-color: var(--color-primary)}mat-checkbox{--mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-state-layer-color: var( --gn-ui-checkbox-color )}\n"] }]
+            args: [{ selector: 'gn-ui-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-checkbox\n  class=\"cursor-pointer\"\n  [class]=\"classList\"\n  [checked]=\"checked\"\n  [indeterminate]=\"indeterminate\"\n  (click)=\"handleClick($event)\"\n></mat-checkbox>\n", styles: [".default{--gn-ui-checkbox-color: var(--color-main)}.secondary{--gn-ui-checkbox-color: var(--color-secondary)}.primary{--gn-ui-checkbox-color: var(--color-primary)}mat-checkbox{--mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-state-layer-color: var( --gn-ui-checkbox-color )}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], checked: [{
@@ -25507,14 +25677,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             args: [{ selector: 'gn-ui-date-range-picker', template: "<div\n  class=\"flex items-center justify-center w-64 h-11 rounded-lg border border-gray-300 bg-white\"\n>\n  <div class=\"w-48 flex justify-between\">\n    <mat-date-range-input [rangePicker]=\"picker\" class=\"w-full\">\n      <input\n        class=\"w-24 text-black font-basierCircle text-base font-medium text-center\"\n        matStartDate\n        placeholder=\"Start date\"\n        (dateInput)=\"startDateSelected($event)\"\n      />\n      <input\n        class=\"w-24 text-black font-basierCircle text-base font-medium text-center\"\n        matEndDate\n        placeholder=\"End date\"\n        (dateInput)=\"endDateSelected($event)\"\n      />\n    </mat-date-range-input>\n  </div>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon>calendar_today</mat-icon>\n  </mat-datepicker-toggle>\n  <mat-date-range-picker #picker></mat-date-range-picker>\n</div>\n", styles: ["mat-datepicker-toggle{@apply text-primary;}\n"] }]
         }] });
 
+class EditableLabelDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.editableLabelChanged = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        if (this.gnUiEditableLabel !== false) {
+            const appendedInput = this.renderer.createElement('input');
+            this.renderer.setStyle(appendedInput, 'background', 'inherit');
+            this.renderer.setStyle(appendedInput, 'color', 'inherit');
+            this.renderer.setStyle(appendedInput, 'font', 'inherit');
+            this.renderer.setStyle(appendedInput, 'border', 'inherit');
+            this.renderer.setStyle(appendedInput, 'width', '100%');
+            this.renderer.setStyle(appendedInput, 'padding', 'inherit');
+            this.renderer.setStyle(appendedInput, 'margin', '0');
+            this.renderer.setStyle(appendedInput, 'height', 'inherit');
+            this.renderer.setStyle(appendedInput, 'line-height', 'inherit');
+            this.renderer.setStyle(appendedInput, 'text-decoration', 'inherit');
+            const hostContent = this.el.nativeElement.textContent || '';
+            const formattedContent = hostContent.replace(/\s+/g, ' ').trim();
+            this.renderer.setProperty(appendedInput, 'value', formattedContent);
+            this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '');
+            this.renderer.listen(appendedInput, 'input', (event) => {
+                this.editableLabelChanged.emit(event.target.value);
+            });
+            this.renderer.appendChild(this.el.nativeElement, appendedInput);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditableLabelDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: EditableLabelDirective, isStandalone: true, selector: "[gnUiEditableLabel]", inputs: { gnUiEditableLabel: "gnUiEditableLabel" }, outputs: { editableLabelChanged: "editableLabelChanged" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditableLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gnUiEditableLabel]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { editableLabelChanged: [{
+                type: Output
+            }], gnUiEditableLabel: [{
+                type: Input
+            }] } });
+
 class UiInputsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, declarations: [DropdownSelectorComponent,
             AutocompleteComponent,
-            ButtonComponent,
             TextInputComponent,
             DragAndDropFileInputComponent,
-            TextAreaComponent,
             ChipsInputComponent,
             NavigationButtonComponent,
             StarToggleComponent,
@@ -25546,7 +25758,10 @@ class UiInputsModule {
             MatFormFieldModule,
             MatInputModule,
             MatDatepickerModule,
-            MatNativeDateModule], exports: [DropdownSelectorComponent,
+            MatNativeDateModule,
+            EditableLabelDirective,
+            TextAreaComponent,
+            ButtonComponent], exports: [DropdownSelectorComponent,
             AutocompleteComponent,
             ButtonComponent,
             TextInputComponent,
@@ -25562,7 +25777,8 @@ class UiInputsModule {
             CopyTextButtonComponent,
             CheckboxComponent,
             SearchInputComponent,
-            DateRangePickerComponent] }); }
+            DateRangePickerComponent,
+            EditableLabelDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, imports: [CommonModule,
             TranslateModule.forChild(),
             NgxDropzoneModule,
@@ -25587,10 +25803,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                     declarations: [
                         DropdownSelectorComponent,
                         AutocompleteComponent,
-                        ButtonComponent,
                         TextInputComponent,
                         DragAndDropFileInputComponent,
-                        TextAreaComponent,
                         ChipsInputComponent,
                         NavigationButtonComponent,
                         StarToggleComponent,
@@ -25628,6 +25842,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         MatInputModule,
                         MatDatepickerModule,
                         MatNativeDateModule,
+                        EditableLabelDirective,
+                        TextAreaComponent,
+                        ButtonComponent,
                     ],
                     exports: [
                         DropdownSelectorComponent,
@@ -25647,6 +25864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         CheckboxComponent,
                         SearchInputComponent,
                         DateRangePickerComponent,
+                        EditableLabelDirective,
                     ],
                 }]
         }] });
@@ -25746,7 +25964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 const DEFAULT_PARAMS = {
     OFFSET: '',
-    LIMIT: '',
+    LIMIT: '-1',
     FORMAT: 'json',
 };
 class RecordApiFormComponent {
@@ -25775,6 +25993,8 @@ class RecordApiFormComponent {
             }
             return outputUrl;
         }));
+        this.noLimitChecked$ = this.limit$.pipe(map$2((limit) => limit === '-1' || limit === ''));
+        this.displayLimit$ = this.limit$.pipe(map$2((limit) => (limit !== '-1' ? limit : '')));
     }
     set apiLink(value) {
         this.apiBaseUrl = value ? value.url.href : undefined;
@@ -25784,10 +26004,11 @@ class RecordApiFormComponent {
         this.offset$.next(value);
     }
     setLimit(value) {
-        this.limit$.next(value);
+        const newLimit = value === '' ? '-1' : value;
+        this.limit$.next(newLimit);
     }
     setFormat(value) {
-        this.format$.next(value);
+        this.format$.next(String(value));
     }
     resetUrl() {
         this.offset$.next(DEFAULT_PARAMS.OFFSET);
@@ -25795,15 +26016,34 @@ class RecordApiFormComponent {
         this.format$.next(DEFAULT_PARAMS.FORMAT);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordApiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordApiFormComponent, selector: "gn-ui-record-api-form", inputs: { apiLink: "apiLink" }, ngImport: i0, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between flex-grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (input)=\"setLimit($event.target.value)\"\n            [value]=\"limit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"(limit$ | async) === ''\"\n              (change)=\"setLimit('')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.offset</p>\n        <gn-ui-text-input\n          class=\"w-20\"\n          [value]=\"offset$ | async\"\n          (input)=\"setOffset($event.target.value)\"\n          hint=\"\"\n        >\n        </gn-ui-text-input>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"formatsList\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordApiFormComponent, selector: "gn-ui-record-api-form", inputs: { apiLink: "apiLink" }, ngImport: i0, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between flex-grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.offset</p>\n        <gn-ui-text-input\n          class=\"w-20\"\n          [value]=\"offset$ | async\"\n          (valueChange)=\"setOffset($event)\"\n          hint=\"\"\n        >\n        </gn-ui-text-input>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"formatsList\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordApiFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-record-api-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between flex-grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (input)=\"setLimit($event.target.value)\"\n            [value]=\"limit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"(limit$ | async) === ''\"\n              (change)=\"setLimit('')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.offset</p>\n        <gn-ui-text-input\n          class=\"w-20\"\n          [value]=\"offset$ | async\"\n          (input)=\"setOffset($event.target.value)\"\n          hint=\"\"\n        >\n        </gn-ui-text-input>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"formatsList\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"] }]
+            args: [{ selector: 'gn-ui-record-api-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between flex-grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.offset</p>\n        <gn-ui-text-input\n          class=\"w-20\"\n          [value]=\"offset$ | async\"\n          (valueChange)=\"setOffset($event)\"\n          hint=\"\"\n        >\n        </gn-ui-text-input>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"formatsList\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"] }]
         }], propDecorators: { apiLink: [{
                 type: Input
             }] } });
 
+class ImageOverlayPreviewComponent {
+    constructor() {
+        this.isPlaceholderShown = new EventEmitter();
+    }
+    openLightbox(src) {
+        basicLightbox.create(`<img src="${src}"/>`).show();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ImageOverlayPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ImageOverlayPreviewComponent, selector: "gn-ui-image-overlay-preview", inputs: { imageUrl: "imageUrl" }, outputs: { isPlaceholderShown: "isPlaceholderShown" }, ngImport: i0, template: "<gn-ui-content-ghost\n  [showContent]=\"imageUrl !== undefined\"\n  ghostClass=\"h-48 mb-3\"\n>\n  <div\n    *ngIf=\"imageUrl\"\n    [showContent]=\"imageUrl !== undefined\"\n    data-cy=\"record-thumbnail\"\n    class=\"flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3\"\n  >\n    <gn-ui-thumbnail\n      class=\"relative h-full w-full\"\n      [thumbnailUrl]=\"imageUrl\"\n      fit=\"cover\"\n      (placeholderShown)=\"isPlaceholderShown.emit($event)\"\n    ></gn-ui-thumbnail>\n    <div class=\"relative\">\n      <gn-ui-button\n        class=\"absolute bottom-0 right-0 z-10 mr-2 mb-2\"\n        [type]=\"'outline'\"\n        [extraClass]=\"'!py-2 !px-0'\"\n        (buttonClick)=\"openLightbox(imageUrl)\"\n      >\n        <mat-icon class=\"material-symbols-outlined font-extralight\"\n          >zoom_out_map</mat-icon\n        >\n      </gn-ui-button>\n    </div>\n  </div>\n</gn-ui-content-ghost>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: 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-48 mb-3\"\n>\n  <div\n    *ngIf=\"imageUrl\"\n    [showContent]=\"imageUrl !== undefined\"\n    data-cy=\"record-thumbnail\"\n    class=\"flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3\"\n  >\n    <gn-ui-thumbnail\n      class=\"relative h-full w-full\"\n      [thumbnailUrl]=\"imageUrl\"\n      fit=\"cover\"\n      (placeholderShown)=\"isPlaceholderShown.emit($event)\"\n    ></gn-ui-thumbnail>\n    <div class=\"relative\">\n      <gn-ui-button\n        class=\"absolute bottom-0 right-0 z-10 mr-2 mb-2\"\n        [type]=\"'outline'\"\n        [extraClass]=\"'!py-2 !px-0'\"\n        (buttonClick)=\"openLightbox(imageUrl)\"\n      >\n        <mat-icon class=\"material-symbols-outlined font-extralight\"\n          >zoom_out_map</mat-icon\n        >\n      </gn-ui-button>\n    </div>\n  </div>\n</gn-ui-content-ghost>\n" }]
+        }], propDecorators: { imageUrl: [{
+                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,
@@ -25825,7 +26065,8 @@ class UiElementsModule {
             GnUiLinkifyDirective,
             PaginationButtonsComponent,
             MaxLinesComponent,
-            RecordApiFormComponent], imports: [CommonModule,
+            RecordApiFormComponent,
+            ImageOverlayPreviewComponent], imports: [CommonModule,
             MatIconModule,
             MatTooltipModule,
             UiWidgetsModule,
@@ -25833,7 +26074,8 @@ class UiElementsModule {
             RouterModule,
             UiInputsModule,
             FormsModule,
-            NgOptimizedImage], exports: [MetadataInfoComponent,
+            NgOptimizedImage,
+            MarkdownParserComponent], exports: [MetadataInfoComponent,
             ContentGhostComponent,
             DownloadItemComponent,
             DownloadsListComponent,
@@ -25850,7 +26092,10 @@ class UiElementsModule {
             AvatarComponent,
             UserPreviewComponent,
             PaginationButtonsComponent,
-            RecordApiFormComponent] }); }
+            MaxLinesComponent,
+            RecordApiFormComponent,
+            MarkdownParserComponent,
+            ImageOverlayPreviewComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiElementsModule, imports: [CommonModule,
             MatIconModule,
             MatTooltipModule,
@@ -25877,6 +26122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         UiInputsModule,
                         FormsModule,
                         NgOptimizedImage,
+                        MarkdownParserComponent,
                     ],
                     declarations: [
                         MetadataInfoComponent,
@@ -25899,6 +26145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         PaginationButtonsComponent,
                         MaxLinesComponent,
                         RecordApiFormComponent,
+                        ImageOverlayPreviewComponent,
                     ],
                     exports: [
                         MetadataInfoComponent,
@@ -25918,148 +26165,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         AvatarComponent,
                         UserPreviewComponent,
                         PaginationButtonsComponent,
+                        MaxLinesComponent,
                         RecordApiFormComponent,
+                        MarkdownParserComponent,
+                        ImageOverlayPreviewComponent,
                     ],
                 }]
         }] });
 
-class RecordTableComponent {
-    constructor() {
-        this.selectedRecords = [];
-        this.records = [];
-        this.recordClick = new EventEmitter();
-        this.recordsSelect = new EventEmitter();
-        this.recordsDeselect = new EventEmitter();
-        this.sortByChange = new EventEmitter();
-    }
-    dateToString(date) {
-        return date?.toLocaleDateString(undefined, {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-            timeZone: 'UTC',
-        });
-    }
-    getStatus(isPublishedToAll) {
-        return isPublishedToAll ? 'published' : 'not published';
-    }
-    formatUserInfo(userInfo) {
-        const infos = (typeof userInfo === 'string' ? userInfo : '').split('|');
-        if (infos && infos.length === 4) {
-            return `${infos[2]} ${infos[1]}`;
-        }
-        return undefined;
-    }
-    getRecordFormats(record) {
-        if (record.kind === 'service' || !('distributions' in record)) {
-            return [];
-        }
-        const formats = Array.from(new Set(record.distributions.map((distribution) => getFileFormat(distribution)))).filter((format) => !!format);
-        formats.sort((a, b) => getFormatPriority(b) - getFormatPriority(a));
-        return formats;
-    }
-    getBadgeColor(format) {
-        return getBadgeColor(format);
-    }
-    getOrderForColumn(col) {
-        if (!this.sortBy) {
-            return null;
-        }
-        let order = null;
-        const sortedArray = Array.isArray(this.sortBy[0])
-            ? this.sortBy
-            : [this.sortBy];
-        sortedArray.forEach((sortedCol) => {
-            if (sortedCol[1] === col) {
-                order = sortedCol[0];
-            }
-        });
-        return order;
-    }
-    setSortBy(col) {
-        const sortOrder = this.getOrderForColumn(col);
-        let newOrder;
-        if (sortOrder) {
-            newOrder = sortOrder === 'asc' ? 'desc' : 'asc';
-        }
-        else {
-            newOrder = 'asc';
-        }
-        this.sortByChange.emit([newOrder, col]);
-        this.sortBy = [newOrder, col];
-    }
-    isSortedBy(col, order) {
-        const sortOrder = this.getOrderForColumn(col);
-        return sortOrder === order;
-    }
-    isChecked(record) {
-        if (this.selectedRecords.includes(record.uniqueIdentifier)) {
-            return true;
-        }
-        return false;
-    }
-    handleRecordSelectedChange(selected, record) {
-        if (!selected) {
-            this.recordsDeselect.emit([record]);
-            this.selectedRecords = this.selectedRecords.filter((val) => val !== record.uniqueIdentifier);
-        }
-        else {
-            this.recordsSelect.emit([record]);
-            this.selectedRecords.push(record.uniqueIdentifier);
-        }
-    }
-    selectAll() {
-        if (this.isAllSelected()) {
-            this.recordsDeselect.emit(this.records);
-            this.selectedRecords = [];
-        }
-        else {
-            this.recordsSelect.emit(this.records);
-            this.selectedRecords = this.records.map((record) => {
-                return record.uniqueIdentifier;
-            });
-        }
-    }
-    isAllSelected() {
-        if (this.selectedRecords.length === this.records.length) {
-            const allRecords = this.records.filter((record) => this.selectedRecords.includes(record.uniqueIdentifier));
-            if (allRecords.length === this.records.length) {
-                return true;
-            }
-        }
-        return false;
-    }
-    isSomeSelected() {
-        if (this.selectedRecords.length > 0 &&
-            this.selectedRecords.length < this.records.length) {
-            return true;
-        }
-        return false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordTableComponent, selector: "gn-ui-record-table", inputs: { selectedRecords: "selectedRecords", records: "records", totalHits: "totalHits", sortBy: "sortBy" }, outputs: { recordClick: "recordClick", recordsSelect: "recordsSelect", recordsDeselect: "recordsDeselect", sortByChange: "sortByChange" }, ngImport: i0, template: "<div>\n  <div *ngIf=\"totalHits\" class=\"\">\n    <div class=\"flex records-information\">\n      <div\n        translate\n        class=\"my-8 ml-4 block text-gray-800\"\n        [translateParams]=\"{\n          displayed: records.length,\n          hits: totalHits\n        }\"\n      >\n        results.records.hits.displayedOn\n      </div>\n      <div\n        *ngIf=\"selectedRecords.length > 0\"\n        class=\"my-8 ml-6 block text-gray-400 selected-records\"\n        translate\n        [translateParams]=\"{ amount: selectedRecords.length }\"\n      >\n        results.records.hits.selected\n      </div>\n    </div>\n\n    <div\n      class=\"grid grid-cols-[repeat(3,minmax(0,max-content))] gap-x-4 gap-y-1\"\n      *ngIf=\"records[0].name\"\n    >\n      <div class=\"contents text-sm\">\n        <div class=\"record-table-header text-gray-400 flex gap-1\">\n          <span translate>dashboard.records.userDetail</span>\n        </div>\n        <div class=\"record-table-header text-gray-400 flex gap-1\">\n          <span translate>dashboard.records.username</span>\n        </div>\n        <div class=\"record-table-header text-gray-400 flex gap-1\">\n          <span translate>dashboard.records.userEmail</span>\n        </div>\n      </div>\n      <div\n        class=\"contents hover:text-gray-900 text-gray-800 cursor-pointer\"\n        (click)=\"recordSelect.emit(record)\"\n        *ngFor=\"let record of records\"\n      >\n        <div class=\"record-table-col text-16\">\n          {{ record.name }}\n        </div>\n        <div class=\"record-table-col text-16\">\n          {{ record.username }}\n        </div>\n        <div class=\"record-table-col text-16\">\n          {{ record.emailAddresses[0] }}\n        </div>\n      </div>\n    </div>\n\n    <div\n      class=\"grid grid-cols-[repeat(6,minmax(0,max-content))] gap-x-4 gap-y-1\"\n      *ngIf=\"!records[0].name\"\n    >\n      <div class=\"contents text-sm\">\n        <div class=\"flex justify-center items-center\">\n          <gn-ui-checkbox\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"isSomeSelected()\"\n            (changed)=\"selectAll()\"\n            type=\"default\"\n          >\n          </gn-ui-checkbox>\n        </div>\n        <div class=\"record-table-header text-gray-400 flex gap-1\">\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"px-3 pl-0 space-x-1 text-left\"\n            (buttonClick)=\"setSortBy('resourceTitleObject.default.keyword')\"\n          >\n            <span translate>record.metadata.title</span>\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('resourceTitleObject.default.keyword', 'desc')\"\n            >\n              expand_more</mat-icon\n            >\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('resourceTitleObject.default.keyword', 'asc')\"\n            >\n              expand_less</mat-icon\n            >\n          </gn-ui-button>\n        </div>\n        <div translate=\"\" class=\"record-table-header text-gray-400 flex gap-1\">\n          record.metadata.formats\n        </div>\n        <div class=\"record-table-header text-gray-400 flex gap-1\">\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"px-3 pl-0 space-x-1\"\n            (buttonClick)=\"setSortBy('recordOwner')\"\n          >\n            <span translate>record.metadata.author</span>\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('recordOwner', 'desc')\"\n            >\n              expand_more</mat-icon\n            >\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('recordOwner', 'asc')\"\n            >\n              expand_less</mat-icon\n            >\n          </gn-ui-button>\n        </div>\n        <div class=\"record-table-header text-gray-400 flex gap-1\">\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"px-3 pl-0 space-x-1\"\n            (buttonClick)=\"setSortBy('changeDate')\"\n          >\n            <span translate>record.metadata.updatedOn</span>\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('changeDate', 'desc')\"\n            >\n              expand_more</mat-icon\n            >\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('changeDate', 'asc')\"\n            >\n              expand_less</mat-icon\n            >\n          </gn-ui-button>\n        </div>\n        <div class=\"record-table-header text-gray-400 flex gap-1\">\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"px-3 pl-0 space-x-1\"\n            (buttonClick)=\"setSortBy('createDate')\"\n          >\n            <span translate>record.metadata.createdOn</span>\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('createDate', 'desc')\"\n            >\n              expand_more</mat-icon\n            >\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('createDate', 'asc')\"\n            >\n              expand_less</mat-icon\n            >\n          </gn-ui-button>\n        </div>\n      </div>\n      <div\n        class=\"contents hover:text-gray-900 text-gray-800 cursor-pointer\"\n        (click)=\"recordSelect.emit(record)\"\n        *ngFor=\"let record of records\"\n      >\n        <div class=\"record-table-col\">\n          <gn-ui-checkbox\n            [checked]=\"isChecked(record)\"\n            (changed)=\"handleRecordSelectedChange($event, record)\"\n            type=\"default\"\n          ></gn-ui-checkbox>\n        </div>\n        <div\n          [title]=\"record.title\"\n          class=\"record-table-col text-16 self-center\"\n        >\n          {{ record.title }}\n        </div>\n        <div\n          class=\"record-table-col flex justify-start items-center gap-2 text-16\"\n          [title]=\"formats.join(', ')\"\n          *ngIf=\"getRecordFormats(record) as formats\"\n        >\n          <span\n            class=\"badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0\"\n            [style.background-color]=\"getBadgeColor(formats[0])\"\n            *ngIf=\"formats[0]\"\n          >\n            {{ formats[0] }}\n          </span>\n          <span\n            class=\"badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0\"\n            [style.background-color]=\"getBadgeColor(formats[1])\"\n            *ngIf=\"formats[1]\"\n          >\n            {{ formats[1] }}\n          </span>\n          <div\n            class=\"flex-shrink-0\"\n            *ngIf=\"!record.name && formats.slice(2).length > 0\"\n          >\n            <span>+{{ formats.slice(2).length }}</span>\n          </div>\n        </div>\n        <div class=\"record-table-col flex items-center gap-2 text-16\">\n          <mat-icon class=\"material-symbols-outlined\"> person </mat-icon>\n          <span class=\"\">{{ formatUserInfo(record.extras?.ownerInfo) }}</span>\n        </div>\n        <div class=\"record-table-col text-16 self-center\">\n          {{ dateToString(record.recordUpdated) }}\n        </div>\n        <div class=\"record-table-col text-16 self-center\">\n          {{ dateToString(record.recordCreated) }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".record-table-col{@apply px-5 py-3 items-center truncate;}.record-table-header{@apply record-table-col capitalize;}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: CheckboxComponent, selector: "gn-ui-checkbox", inputs: ["type", "checked", "indeterminate"], outputs: ["changed"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-record-table', template: "<div>\n  <div *ngIf=\"totalHits\" class=\"\">\n    <div class=\"flex records-information\">\n      <div\n        translate\n        class=\"my-8 ml-4 block text-gray-800\"\n        [translateParams]=\"{\n          displayed: records.length,\n          hits: totalHits\n        }\"\n      >\n        results.records.hits.displayedOn\n      </div>\n      <div\n        *ngIf=\"selectedRecords.length > 0\"\n        class=\"my-8 ml-6 block text-gray-400 selected-records\"\n        translate\n        [translateParams]=\"{ amount: selectedRecords.length }\"\n      >\n        results.records.hits.selected\n      </div>\n    </div>\n\n    <div\n      class=\"grid grid-cols-[repeat(3,minmax(0,max-content))] gap-x-4 gap-y-1\"\n      *ngIf=\"records[0].name\"\n    >\n      <div class=\"contents text-sm\">\n        <div class=\"record-table-header text-gray-400 flex gap-1\">\n          <span translate>dashboard.records.userDetail</span>\n        </div>\n        <div class=\"record-table-header text-gray-400 flex gap-1\">\n          <span translate>dashboard.records.username</span>\n        </div>\n        <div class=\"record-table-header text-gray-400 flex gap-1\">\n          <span translate>dashboard.records.userEmail</span>\n        </div>\n      </div>\n      <div\n        class=\"contents hover:text-gray-900 text-gray-800 cursor-pointer\"\n        (click)=\"recordSelect.emit(record)\"\n        *ngFor=\"let record of records\"\n      >\n        <div class=\"record-table-col text-16\">\n          {{ record.name }}\n        </div>\n        <div class=\"record-table-col text-16\">\n          {{ record.username }}\n        </div>\n        <div class=\"record-table-col text-16\">\n          {{ record.emailAddresses[0] }}\n        </div>\n      </div>\n    </div>\n\n    <div\n      class=\"grid grid-cols-[repeat(6,minmax(0,max-content))] gap-x-4 gap-y-1\"\n      *ngIf=\"!records[0].name\"\n    >\n      <div class=\"contents text-sm\">\n        <div class=\"flex justify-center items-center\">\n          <gn-ui-checkbox\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"isSomeSelected()\"\n            (changed)=\"selectAll()\"\n            type=\"default\"\n          >\n          </gn-ui-checkbox>\n        </div>\n        <div class=\"record-table-header text-gray-400 flex gap-1\">\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"px-3 pl-0 space-x-1 text-left\"\n            (buttonClick)=\"setSortBy('resourceTitleObject.default.keyword')\"\n          >\n            <span translate>record.metadata.title</span>\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('resourceTitleObject.default.keyword', 'desc')\"\n            >\n              expand_more</mat-icon\n            >\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('resourceTitleObject.default.keyword', 'asc')\"\n            >\n              expand_less</mat-icon\n            >\n          </gn-ui-button>\n        </div>\n        <div translate=\"\" class=\"record-table-header text-gray-400 flex gap-1\">\n          record.metadata.formats\n        </div>\n        <div class=\"record-table-header text-gray-400 flex gap-1\">\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"px-3 pl-0 space-x-1\"\n            (buttonClick)=\"setSortBy('recordOwner')\"\n          >\n            <span translate>record.metadata.author</span>\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('recordOwner', 'desc')\"\n            >\n              expand_more</mat-icon\n            >\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('recordOwner', 'asc')\"\n            >\n              expand_less</mat-icon\n            >\n          </gn-ui-button>\n        </div>\n        <div class=\"record-table-header text-gray-400 flex gap-1\">\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"px-3 pl-0 space-x-1\"\n            (buttonClick)=\"setSortBy('changeDate')\"\n          >\n            <span translate>record.metadata.updatedOn</span>\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('changeDate', 'desc')\"\n            >\n              expand_more</mat-icon\n            >\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('changeDate', 'asc')\"\n            >\n              expand_less</mat-icon\n            >\n          </gn-ui-button>\n        </div>\n        <div class=\"record-table-header text-gray-400 flex gap-1\">\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"px-3 pl-0 space-x-1\"\n            (buttonClick)=\"setSortBy('createDate')\"\n          >\n            <span translate>record.metadata.createdOn</span>\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('createDate', 'desc')\"\n            >\n              expand_more</mat-icon\n            >\n            <mat-icon\n              class=\"material-symbols-outlined\"\n              *ngIf=\"isSortedBy('createDate', 'asc')\"\n            >\n              expand_less</mat-icon\n            >\n          </gn-ui-button>\n        </div>\n      </div>\n      <div\n        class=\"contents hover:text-gray-900 text-gray-800 cursor-pointer\"\n        (click)=\"recordSelect.emit(record)\"\n        *ngFor=\"let record of records\"\n      >\n        <div class=\"record-table-col\">\n          <gn-ui-checkbox\n            [checked]=\"isChecked(record)\"\n            (changed)=\"handleRecordSelectedChange($event, record)\"\n            type=\"default\"\n          ></gn-ui-checkbox>\n        </div>\n        <div\n          [title]=\"record.title\"\n          class=\"record-table-col text-16 self-center\"\n        >\n          {{ record.title }}\n        </div>\n        <div\n          class=\"record-table-col flex justify-start items-center gap-2 text-16\"\n          [title]=\"formats.join(', ')\"\n          *ngIf=\"getRecordFormats(record) as formats\"\n        >\n          <span\n            class=\"badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0\"\n            [style.background-color]=\"getBadgeColor(formats[0])\"\n            *ngIf=\"formats[0]\"\n          >\n            {{ formats[0] }}\n          </span>\n          <span\n            class=\"badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0\"\n            [style.background-color]=\"getBadgeColor(formats[1])\"\n            *ngIf=\"formats[1]\"\n          >\n            {{ formats[1] }}\n          </span>\n          <div\n            class=\"flex-shrink-0\"\n            *ngIf=\"!record.name && formats.slice(2).length > 0\"\n          >\n            <span>+{{ formats.slice(2).length }}</span>\n          </div>\n        </div>\n        <div class=\"record-table-col flex items-center gap-2 text-16\">\n          <mat-icon class=\"material-symbols-outlined\"> person </mat-icon>\n          <span class=\"\">{{ formatUserInfo(record.extras?.ownerInfo) }}</span>\n        </div>\n        <div class=\"record-table-col text-16 self-center\">\n          {{ dateToString(record.recordUpdated) }}\n        </div>\n        <div class=\"record-table-col text-16 self-center\">\n          {{ dateToString(record.recordCreated) }}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".record-table-col{@apply px-5 py-3 items-center truncate;}.record-table-header{@apply record-table-col capitalize;}\n"] }]
-        }], propDecorators: { selectedRecords: [{
-                type: Input
-            }], records: [{
-                type: Input
-            }], totalHits: [{
-                type: Input
-            }], sortBy: [{
-                type: Input
-            }], recordClick: [{
-                type: Output
-            }], recordsSelect: [{
-                type: Output
-            }], recordsDeselect: [{
-                type: Output
-            }], sortByChange: [{
-                type: Output
-            }] } });
-
 class UiSearchModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiSearchModule, declarations: [RecordPreviewComponent,
@@ -26072,8 +26185,7 @@ class UiSearchModule {
             ResultsHitsNumberComponent,
             ResultsListItemComponent,
             RecordPreviewFeedComponent,
-            RecordPreviewRowComponent,
-            RecordTableComponent], imports: [CommonModule, i1$1.TranslateModule, NgxDropzoneModule,
+            RecordPreviewRowComponent], imports: [CommonModule, i1$1.TranslateModule, NgxDropzoneModule,
             FacetsModule$1,
             FormsModule,
             ReactiveFormsModule,
@@ -26084,7 +26196,8 @@ class UiSearchModule {
             UiElementsModule,
             MatIconModule,
             MatCheckboxModule,
-            RouterLink], exports: [RecordPreviewListComponent,
+            RouterLink,
+            InteractiveTableComponent], exports: [RecordPreviewListComponent,
             RecordPreviewCardComponent,
             RecordPreviewTextComponent,
             RecordPreviewTitleComponent,
@@ -26094,8 +26207,7 @@ class UiSearchModule {
             RecordPreviewComponent,
             ResultsHitsNumberComponent,
             RecordPreviewFeedComponent,
-            RecordPreviewRowComponent,
-            RecordTableComponent] }); }
+            RecordPreviewRowComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiSearchModule, providers: [
             { provide: RESULTS_LAYOUT_CONFIG, useValue: DEFAULT_RESULTS_LAYOUT_CONFIG },
         ], imports: [CommonModule,
@@ -26110,7 +26222,8 @@ class UiSearchModule {
             UiInputsModule,
             UiElementsModule,
             MatIconModule,
-            MatCheckboxModule, FacetsModule$1] }); }
+            MatCheckboxModule,
+            InteractiveTableComponent, FacetsModule$1] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiSearchModule, decorators: [{
             type: NgModule,
@@ -26127,7 +26240,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         ResultsListItemComponent,
                         RecordPreviewFeedComponent,
                         RecordPreviewRowComponent,
-                        RecordTableComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -26144,6 +26256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         MatIconModule,
                         MatCheckboxModule,
                         RouterLink,
+                        InteractiveTableComponent,
                     ],
                     exports: [
                         RecordPreviewListComponent,
@@ -26157,7 +26270,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         ResultsHitsNumberComponent,
                         RecordPreviewFeedComponent,
                         RecordPreviewRowComponent,
-                        RecordTableComponent,
                     ],
                     providers: [
                         { provide: RESULTS_LAYOUT_CONFIG, useValue: DEFAULT_RESULTS_LAYOUT_CONFIG },
@@ -26716,6 +26828,9 @@ const getFavoritesOnly = createSelector(getSearchStateSearch, (state) => state.p
 const getError = createSelector(getSearchStateSearch, (state) => state.error);
 const getSpatialFilterEnabled = createSelector(getSearchStateSearch, (state) => state.params.useSpatialFilter);
 
+// this geometry will be used to filter & boost results accordingly
+const FILTER_GEOMETRY = new InjectionToken('filter-geometry');
+
 class SearchFacade {
     constructor(store, filterGeometry) {
         this.store = store;
@@ -26820,6 +26935,7 @@ class SearchFacade {
         this.store.dispatch(new SetFilters({}, this.searchId));
         this.store.dispatch(new SetSortBy([], this.searchId));
         this.store.dispatch(new SetFavoritesOnly(false, this.searchId));
+        return this;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SearchFacade, deps: [{ token: i1$2.Store }, { token: FILTER_GEOMETRY, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SearchFacade }); }
@@ -27204,8 +27320,11 @@ class FuzzySearchComponent {
             this.searchService.updateFilters({ any });
         }
     }
-    handleInputCleared() {
-        this.searchService.updateFilters({ any: '' });
+    async handleInputCleared() {
+        const currentSearchFilters = await firstValueFrom(this.searchFacade.searchFilters$);
+        if (currentSearchFilters.any) {
+            this.searchService.updateFilters({ any: '' });
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FuzzySearchComponent, deps: [{ token: SearchFacade }, { token: SearchService }, { token: RecordsRepositoryInterface }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FuzzySearchComponent, selector: "gn-ui-fuzzy-search", inputs: { autoFocus: "autoFocus" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: AutocompleteComponent, descendants: true }], ngImport: i0, template: "<gn-ui-autocomplete\n  [placeholder]=\"'search.field.any.placeholder' | translate\"\n  [displayWithFn]=\"displayWithFn\"\n  [action]=\"autoCompleteAction\"\n  (itemSelected)=\"handleItemSelection($event)\"\n  (inputSubmitted)=\"handleInputSubmission($event)\"\n  (inputCleared)=\"handleInputCleared()\"\n  [value]=\"searchInputValue$ | async\"\n  [clearOnSelection]=\"true\"\n  [autoFocus]=\"autoFocus\"\n></gn-ui-autocomplete>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "action", "value", "clearOnSelection", "autoFocus", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -27285,6 +27404,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                     args: [RESULTS_LAYOUT_CONFIG]
                 }] }]; } });
 
+// expects the replacement key ${uuid}
+const RECORD_URL_TOKEN = new InjectionToken('record-url-token');
+
 class FavoriteStarComponent {
     set record(value) {
         this.record_ = value;
@@ -27305,6 +27427,7 @@ class FavoriteStarComponent {
         this.changeDetector = changeDetector;
         this.authService = authService;
         this.translateService = translateService;
+        this.displayCount = true;
         this.isFavorite$ = this.favoritesService.myFavoritesUuid$.pipe(map$1((favorites) => favorites.indexOf(this.record.uniqueIdentifier) > -1));
         this.isAnonymous$ = this.platformService.isAnonymous();
         this.loading = false;
@@ -27367,12 +27490,14 @@ class FavoriteStarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FavoriteStarComponent, deps: [{ token: FavoritesService }, { token: PlatformServiceInterface }, { token: i0.ChangeDetectorRef }, { token: AuthService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FavoriteStarComponent, selector: "gn-ui-favorite-star", inputs: { record: "record" }, viewQueries: [{ propertyName: "starToggleRef", first: true, predicate: StarToggleComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<div>\n  <span class=\"align-text-top mr-1.5 favorite-count\" *ngIf=\"hasFavoriteCount\">{{\n    favoriteCount\n  }}</span>\n  <gn-ui-star-toggle\n    [toggled]=\"isFavorite$ | async\"\n    (newValue)=\"toggleFavorite($event)\"\n    [disabled]=\"loading || (isAnonymous$ | async)\"\n  ></gn-ui-star-toggle>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: StarToggleComponent, selector: "gn-ui-star-toggle", inputs: ["toggled", "disabled"], outputs: ["newValue"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FavoriteStarComponent, selector: "gn-ui-favorite-star", inputs: { displayCount: "displayCount", record: "record" }, viewQueries: [{ propertyName: "starToggleRef", first: true, predicate: StarToggleComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-row content-center\">\n  <span\n    class=\"align-text-top mr-1.5 mt-1.5 favorite-count\"\n    *ngIf=\"hasFavoriteCount && displayCount\"\n    >{{ favoriteCount }}</span\n  >\n  <gn-ui-star-toggle\n    [toggled]=\"isFavorite$ | async\"\n    (newValue)=\"toggleFavorite($event)\"\n    [disabled]=\"loading || (isAnonymous$ | async)\"\n    class=\"mt-1\"\n  ></gn-ui-star-toggle>\n  <span\n    class=\"align-text-top ml-1.5 favorite-count mt-1.5\"\n    *ngIf=\"!displayCount\"\n    translate=\"datahub.record.addToFavorites\"\n  ></span>\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: StarToggleComponent, selector: "gn-ui-star-toggle", inputs: ["toggled", "disabled"], outputs: ["newValue"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FavoriteStarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-favorite-star', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <span class=\"align-text-top mr-1.5 favorite-count\" *ngIf=\"hasFavoriteCount\">{{\n    favoriteCount\n  }}</span>\n  <gn-ui-star-toggle\n    [toggled]=\"isFavorite$ | async\"\n    (newValue)=\"toggleFavorite($event)\"\n    [disabled]=\"loading || (isAnonymous$ | async)\"\n  ></gn-ui-star-toggle>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: FavoritesService }, { type: PlatformServiceInterface }, { type: i0.ChangeDetectorRef }, { type: AuthService }, { type: i1$1.TranslateService }]; }, propDecorators: { record: [{
+            args: [{ selector: 'gn-ui-favorite-star', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-row content-center\">\n  <span\n    class=\"align-text-top mr-1.5 mt-1.5 favorite-count\"\n    *ngIf=\"hasFavoriteCount && displayCount\"\n    >{{ favoriteCount }}</span\n  >\n  <gn-ui-star-toggle\n    [toggled]=\"isFavorite$ | async\"\n    (newValue)=\"toggleFavorite($event)\"\n    [disabled]=\"loading || (isAnonymous$ | async)\"\n    class=\"mt-1\"\n  ></gn-ui-star-toggle>\n  <span\n    class=\"align-text-top ml-1.5 favorite-count mt-1.5\"\n    *ngIf=\"!displayCount\"\n    translate=\"datahub.record.addToFavorites\"\n  ></span>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: FavoritesService }, { type: PlatformServiceInterface }, { type: i0.ChangeDetectorRef }, { type: AuthService }, { type: i1$1.TranslateService }]; }, propDecorators: { displayCount: [{
+                type: Input
+            }], record: [{
                 type: Input
             }], starToggleRef: [{
                 type: ViewChild,
@@ -27415,7 +27540,7 @@ class ResultsListContainerComponent {
         return this.recordUrlTemplate.replace('${uuid}', metadata.uniqueIdentifier);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ResultsListContainerComponent, deps: [{ token: SearchFacade }, { token: RESULTS_LAYOUT_CONFIG }, { token: RECORD_URL_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ResultsListContainerComponent, selector: "gn-ui-results-list-container", inputs: { metadataQualityDisplay: "metadataQualityDisplay", layout: "layout", showMore: "showMore" }, outputs: { mdSelect: "mdSelect" }, ngImport: i0, template: "<div *ngIf=\"(error$ | async) === null\" class=\"search-results relative\">\n  <gn-ui-results-list\n    [records]=\"facade.results$ | async\"\n    [layoutConfig]=\"layoutConfig$ | async\"\n    [metadataQualityDisplay]=\"\n      metadataQualityDisplay && (pipelineForQualityScoreActivated | async)\n    \"\n    [favoriteTemplate]=\"favoriteToggle\"\n    [recordUrlGetter]=\"recordUrlGetter\"\n    (mdSelect)=\"onMetadataSelection($event)\"\n  ></gn-ui-results-list>\n  <ng-container\n    *ngIf=\"\n      (facade.isLoading$ | async) === false &&\n      (facade.isEndOfResults$ | async) === false\n    \"\n  >\n    <div class=\"show-more h-[100px] pt-[30px]\" *ngIf=\"showMore === 'button'\">\n      <gn-ui-button\n        data-cy=\"addMoreBtn\"\n        type=\"secondary\"\n        (buttonClick)=\"onShowMore()\"\n        extraClass=\"m-auto !p-[22px]\"\n      >\n        <span class=\"uppercase font-medium tracking-widest\" translate\n          >results.showMore</span\n        >\n      </gn-ui-button>\n    </div>\n    <div class=\"show-more h-[100px]\" *ngIf=\"showMore === 'auto'\">\n      <gn-ui-viewport-intersector\n        (entersViewport)=\"onShowMore()\"\n      ></gn-ui-viewport-intersector>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"(facade.isLoading$ | async) === true\">\n    <div class=\"loading flex justify-center h-[100px] pt-[45px]\">\n      <gn-ui-spinning-loader></gn-ui-spinning-loader>\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"p-4 max-w-[600px] m-auto text-[13px]\">\n  <gn-ui-search-results-error\n    *ngIf=\"(errorCode$ | async) === 0\"\n    [type]=\"errorTypes.COULD_NOT_REACH_API\"\n  >\n  </gn-ui-search-results-error>\n  <gn-ui-search-results-error\n    *ngIf=\"(error$ | async) !== null && (errorCode$ | async) !== 0\"\n    [type]=\"errorTypes.RECEIVED_ERROR\"\n    [error]=\"errorMessage$ | async\"\n  ></gn-ui-search-results-error>\n</div>\n\n<ng-template #favoriteToggle let-record>\n  <gn-ui-favorite-star [record]=\"record\"></gn-ui-favorite-star>\n</ng-template>\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: ResultsListComponent, selector: "gn-ui-results-list", inputs: ["records", "layoutConfig", "favoriteTemplate", "recordUrlGetter", "metadataQualityDisplay"], outputs: ["mdSelect"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: ViewportIntersectorComponent, selector: "gn-ui-viewport-intersector", outputs: ["isInViewport", "entersViewport", "exitsViewport"] }, { kind: "component", type: SearchResultsErrorComponent, selector: "gn-ui-search-results-error", inputs: ["type", "error", "recordId"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "component", type: FavoriteStarComponent, selector: "gn-ui-favorite-star", inputs: ["record"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ResultsListContainerComponent, selector: "gn-ui-results-list-container", inputs: { metadataQualityDisplay: "metadataQualityDisplay", layout: "layout", showMore: "showMore" }, outputs: { mdSelect: "mdSelect" }, ngImport: i0, template: "<div *ngIf=\"(error$ | async) === null\" class=\"search-results relative\">\n  <gn-ui-results-list\n    [records]=\"facade.results$ | async\"\n    [layoutConfig]=\"layoutConfig$ | async\"\n    [metadataQualityDisplay]=\"\n      metadataQualityDisplay && (pipelineForQualityScoreActivated | async)\n    \"\n    [favoriteTemplate]=\"favoriteToggle\"\n    [recordUrlGetter]=\"recordUrlGetter\"\n    (mdSelect)=\"onMetadataSelection($event)\"\n  ></gn-ui-results-list>\n  <ng-container\n    *ngIf=\"\n      (facade.isLoading$ | async) === false &&\n      (facade.isEndOfResults$ | async) === false\n    \"\n  >\n    <div class=\"show-more h-[100px] pt-[30px]\" *ngIf=\"showMore === 'button'\">\n      <gn-ui-button\n        data-cy=\"addMoreBtn\"\n        type=\"secondary\"\n        (buttonClick)=\"onShowMore()\"\n        extraClass=\"m-auto !p-[22px]\"\n      >\n        <span class=\"uppercase font-medium tracking-widest\" translate\n          >results.showMore</span\n        >\n      </gn-ui-button>\n    </div>\n    <div class=\"show-more h-[100px]\" *ngIf=\"showMore === 'auto'\">\n      <gn-ui-viewport-intersector\n        (entersViewport)=\"onShowMore()\"\n      ></gn-ui-viewport-intersector>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"(facade.isLoading$ | async) === true\">\n    <div class=\"loading flex justify-center h-[100px] pt-[45px]\">\n      <gn-ui-spinning-loader></gn-ui-spinning-loader>\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"p-4 max-w-[600px] m-auto text-[13px]\">\n  <gn-ui-search-results-error\n    *ngIf=\"(errorCode$ | async) === 0\"\n    [type]=\"errorTypes.COULD_NOT_REACH_API\"\n  >\n  </gn-ui-search-results-error>\n  <gn-ui-search-results-error\n    *ngIf=\"(error$ | async) !== null && (errorCode$ | async) !== 0\"\n    [type]=\"errorTypes.RECEIVED_ERROR\"\n    [error]=\"errorMessage$ | async\"\n  ></gn-ui-search-results-error>\n</div>\n\n<ng-template #favoriteToggle let-record>\n  <gn-ui-favorite-star [record]=\"record\"></gn-ui-favorite-star>\n</ng-template>\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: ResultsListComponent, selector: "gn-ui-results-list", inputs: ["records", "layoutConfig", "favoriteTemplate", "recordUrlGetter", "metadataQualityDisplay"], outputs: ["mdSelect"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: ViewportIntersectorComponent, selector: "gn-ui-viewport-intersector", outputs: ["isInViewport", "entersViewport", "exitsViewport"] }, { kind: "component", type: SearchResultsErrorComponent, selector: "gn-ui-search-results-error", inputs: ["type", "error", "recordId"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "component", type: FavoriteStarComponent, selector: "gn-ui-favorite-star", inputs: ["displayCount", "record"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ResultsListContainerComponent, decorators: [{
             type: Component,
@@ -27543,9 +27668,11 @@ class SearchEffects {
         // I could not get this to work (maybe a bug in rxjs?)
         switchMap$1(([, state]) => this.favoritesService.myFavoritesUuid$.pipe(take(1), map$1((favorites) => [state, favorites]))), switchMap$1(([state, favorites]) => {
             if (!state.params.useSpatialFilter || !this.filterGeometry$) {
-                return of([state, favorites, null]);
+                return of([state, favorites, undefined]);
             }
             return this.filterGeometry$.pipe(tap$2((geom) => {
+                if (!geom)
+                    return;
                 try {
                     const trace = valid$1(geom, true);
                     if (trace?.length > 0) {
@@ -27557,7 +27684,7 @@ class SearchEffects {
                     throw new Error();
                 }
             }), map$1((geom) => [state, favorites, geom]), catchError((e) => {
-                return of([state, favorites, null]);
+                return of([state, favorites, undefined]);
             }));
         }), switchMap$1(([state, favorites, geometry]) => {
             const { currentPage, pageSize, sort } = state.params;
@@ -27656,10 +27783,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 class AbstractSearchField {
 }
 class SimpleSearchField {
-    constructor(esFieldName, order = 'asc', injector) {
+    constructor(esFieldName, injector, order = 'asc', orderType = 'key') {
         this.esFieldName = esFieldName;
-        this.order = order;
         this.injector = injector;
+        this.order = order;
+        this.orderType = orderType;
         this.repository = this.injector.get(RecordsRepositoryInterface);
         // FIXME: this is required to register runtime fields; abstract this as well
         this.esService = this.injector.get(ElasticsearchService);
@@ -27670,12 +27798,12 @@ class SimpleSearchField {
                 type: 'terms',
                 field: this.esFieldName,
                 limit: 1000,
-                sort: [this.order, 'key'],
+                sort: [this.order, this.orderType],
             },
         };
     }
     async getBucketLabel(bucket) {
-        return bucket.term;
+        return bucket.term.toString();
     }
     getAvailableValues() {
         return this.repository.aggregate(this.getAggregations()).pipe(map$1((response) => response[this.esFieldName].buckets || []), switchMap((buckets) => {
@@ -27703,9 +27831,13 @@ class SimpleSearchField {
         return of(values);
     }
 }
-class KeySearchField extends SimpleSearchField {
-    constructor() {
-        super(...arguments);
+class TranslatedSearchField extends SimpleSearchField {
+    constructor(esFieldName, injector, order = 'asc', orderType = 'key') {
+        super(esFieldName, injector, order, orderType);
+        this.esFieldName = esFieldName;
+        this.injector = injector;
+        this.order = order;
+        this.orderType = orderType;
         this.platformService = this.injector.get(PlatformServiceInterface);
     }
     async getTranslation(key) {
@@ -27715,26 +27847,36 @@ class KeySearchField extends SimpleSearchField {
         return (await this.getTranslation(bucket.term)) || bucket.term;
     }
     getAvailableValues() {
+        if (this.orderType === 'count')
+            return super.getAvailableValues();
         // sort values by alphabetical order
         return super
             .getAvailableValues()
             .pipe(map$1((values) => values.sort((a, b) => new Intl.Collator().compare(a.label, b.label))));
     }
 }
-class ThesaurusField extends KeySearchField {
-    constructor(esFieldName, thesaurusName, order = 'asc', injector) {
-        super(esFieldName, order, injector);
-        this.thesaurusName = thesaurusName;
+/**
+ * This search field will either target the `.default` field, or a specific `.langxyz` field according
+ * to the defined METADATA_LANGUAGE token
+ * The provided ES field name should not include any prefix such as `.langeng`
+ */
+class MultilingualSearchField extends SimpleSearchField {
+    constructor(esFieldName, injector, order = 'asc', orderType = 'key') {
+        super(esFieldName, injector, order, orderType);
+        this.esFieldName = esFieldName;
+        this.injector = injector;
+        this.order = order;
+        this.orderType = orderType;
         this.langService = this.injector.get(LangService);
-        this.thesaurus$ = this.platformService
-            .getThesaurusByLang(this.thesaurusName, this.langService.iso3)
-            .pipe(catchError(() => {
-            console.warn('Error while loading thesaurus language package');
-            return of([]);
-        }), shareReplay(1));
-    }
-    async getTranslation(key) {
-        return firstValueFrom(this.thesaurus$.pipe(map$1((thesaurus) => thesaurus.find((keyword) => keyword.key === key)?.label)));
+        this.searchLanguage = this.injector.get(METADATA_LANGUAGE, null);
+        // note: we're excluding the metadata language "current" value because that would produce
+        // permalinks that might not work for different users
+        if (this.searchLanguage && this.searchLanguage !== 'current') {
+            this.esFieldName += `.lang${this.searchLanguage}`;
+        }
+        else {
+            this.esFieldName += '.default';
+        }
     }
 }
 class FullTextSearchField {
@@ -27754,7 +27896,7 @@ marker('search.filters.isSpatial.yes');
 marker('search.filters.isSpatial.no');
 class IsSpatialSearchField extends SimpleSearchField {
     constructor(injector) {
-        super('isSpatial', 'asc', injector);
+        super('isSpatial', injector, 'asc');
         this.translateService = this.injector.get(TranslateService);
         this.esService.registerRuntimeField('isSpatial', `String result = 'no';
 String formats = doc.format.join('|').toLowerCase();
@@ -27804,7 +27946,7 @@ marker('search.filters.license.unknown');
 // Note: values are inspired from https://doc.data.gouv.fr/moissonnage/licences/
 class LicenseSearchField extends SimpleSearchField {
     constructor(injector) {
-        super('license', 'asc', injector);
+        super('license', injector, 'asc');
         this.translateService = this.injector.get(TranslateService);
         this.esService.registerRuntimeField('license', `String raw = '';
 if (doc.containsKey('licenseObject.default.keyword') && doc['licenseObject.default.keyword'].length > 0)
@@ -27888,7 +28030,7 @@ class OrganizationSearchField {
 }
 class OwnerSearchField extends SimpleSearchField {
     constructor(injector) {
-        super('owner', 'asc', injector);
+        super('owner', injector, 'asc');
     }
     getAvailableValues() {
         return of([]);
@@ -27897,6 +28039,7 @@ class OwnerSearchField extends SimpleSearchField {
 
 marker('search.filters.format');
 marker('search.filters.inspireKeyword');
+marker('search.filters.keyword');
 marker('search.filters.isSpatial');
 marker('search.filters.license');
 marker('search.filters.publicationYear');
@@ -27914,13 +28057,14 @@ class FieldsService {
         this.injector = injector;
         this.fields = {
             publisher: new OrganizationSearchField(this.injector),
-            format: new SimpleSearchField('format', 'asc', this.injector),
-            resourceType: new KeySearchField('resourceType', 'asc', this.injector),
-            representationType: new KeySearchField('cl_spatialRepresentationType.key', 'asc', this.injector),
-            publicationYear: new SimpleSearchField('publicationYearForResource', 'desc', this.injector),
-            topic: new KeySearchField('cl_topic.key', 'asc', this.injector),
-            inspireKeyword: new ThesaurusField('th_httpinspireeceuropaeutheme-theme.link', 'external.theme.httpinspireeceuropaeutheme-theme', 'asc', this.injector),
-            documentStandard: new SimpleSearchField('documentStandard', 'asc', this.injector),
+            format: new SimpleSearchField('format', this.injector, 'asc'),
+            resourceType: new TranslatedSearchField('resourceType', this.injector, 'asc'),
+            representationType: new TranslatedSearchField('cl_spatialRepresentationType.key', this.injector, 'asc'),
+            publicationYear: new SimpleSearchField('publicationYearForResource', this.injector, 'desc'),
+            topic: new TranslatedSearchField('cl_topic.key', this.injector, 'asc'),
+            inspireKeyword: new TranslatedSearchField('th_httpinspireeceuropaeutheme-theme.link', this.injector, 'asc'),
+            keyword: new MultilingualSearchField('tag', this.injector, 'desc', 'count'),
+            documentStandard: new SimpleSearchField('documentStandard', this.injector, 'asc'),
             isSpatial: new IsSpatialSearchField(this.injector),
             q: new FullTextSearchField(),
             license: new LicenseSearchField(this.injector),
@@ -27994,10 +28138,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
-// this geometry will be used to filter & boost results accordingly
-const FILTER_GEOMETRY = new InjectionToken('filter-geometry');
-// expects the replacement key ${uuid}
-const RECORD_URL_TOKEN = new InjectionToken('record-url-token');
 class FeatureSearchModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FeatureSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: FeatureSearchModule, declarations: [SortByComponent,
@@ -28096,6 +28236,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
+class ResultsTableComponent {
+    constructor(searchFacade, searchService, selectionService) {
+        this.searchFacade = searchFacade;
+        this.searchService = searchService;
+        this.selectionService = selectionService;
+        this.recordClick = new EventEmitter();
+        this.records$ = this.searchFacade.results$;
+        this.selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$;
+    }
+    dateToString(date) {
+        return date?.toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            timeZone: 'UTC',
+        });
+    }
+    getStatus(isPublishedToAll) {
+        return isPublishedToAll ? 'published' : 'not published';
+    }
+    getRecordFormats(record) {
+        if (record.kind === 'service' || !('distributions' in record)) {
+            return [];
+        }
+        const formats = Array.from(new Set(record.distributions.map((distribution) => getFileFormat(distribution)))).filter((format) => !!format);
+        formats.sort((a, b) => getFormatPriority(b) - getFormatPriority(a));
+        return formats;
+    }
+    formatUserInfo(userInfo) {
+        const infos = (typeof userInfo === 'string' ? userInfo : '').split('|');
+        if (infos && infos.length === 4) {
+            return `${infos[2]} ${infos[1]}`;
+        }
+        return undefined;
+    }
+    getBadgeColor(format) {
+        return getBadgeColor(format);
+    }
+    handleRecordClick(item) {
+        this.recordClick.emit(item);
+    }
+    setSortBy(col, order) {
+        this.searchService.setSortBy([order, col]);
+    }
+    isSortedBy(col) {
+        return this.searchFacade.sortBy$.pipe(take(1), map$1((sortOrder) => {
+            const sortArray = Array.isArray(sortOrder[0])
+                ? sortOrder
+                : [sortOrder];
+            for (const sort of sortArray) {
+                if (sort[1] === col) {
+                    return sort[0];
+                }
+            }
+            return null;
+        }));
+    }
+    isChecked(record) {
+        return this.selectedRecords$.pipe(take(1), map$1((selectedRecords) => {
+            return selectedRecords.includes(record.uniqueIdentifier);
+        }));
+    }
+    handleRecordSelectedChange(selected, record) {
+        if (!selected) {
+            this.selectionService.deselectRecords([record]);
+        }
+        else {
+            this.selectionService.selectRecords([record]);
+        }
+    }
+    async toggleSelectAll() {
+        const records = await firstValueFrom(this.records$);
+        if (await firstValueFrom(this.isAllSelected())) {
+            this.selectionService.deselectRecords(records);
+        }
+        else {
+            this.selectionService.selectRecords(records);
+        }
+    }
+    isAllSelected() {
+        return combineLatest([this.records$, this.selectedRecords$]).pipe(take(1), map$1(([records, selectedRecords]) => {
+            return records.every((record) => selectedRecords.includes(record.uniqueIdentifier));
+        }));
+    }
+    isSomeSelected() {
+        return combineLatest([this.records$, this.selectedRecords$]).pipe(take(1), map$1(([records, selectedRecords]) => {
+            const allSelected = records.every((record) => selectedRecords.includes(record.uniqueIdentifier));
+            const someSelected = records.some((record) => selectedRecords.includes(record.uniqueIdentifier));
+            return !allSelected && someSelected;
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ResultsTableComponent, deps: [{ token: SearchFacade }, { token: SearchService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ResultsTableComponent, isStandalone: true, selector: "gn-ui-results-table", outputs: { recordClick: "recordClick" }, ngImport: i0, template: "<gn-ui-interactive-table\n  [items]=\"records$ | async\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <gn-ui-checkbox\n        [checked]=\"isAllSelected() | async\"\n        [indeterminate]=\"isSomeSelected() | async\"\n        (changed)=\"toggleSelectAll()\"\n        type=\"default\"\n        class=\"-m-2 mr-3\"\n      >\n      </gn-ui-checkbox>\n    </ng-template>\n    <ng-template #cell let-item>\n      <gn-ui-checkbox\n        [checked]=\"isChecked(item) | async\"\n        (changed)=\"handleRecordSelectedChange($event, item)\"\n        class=\"-m-2\"\n        type=\"default\"\n      ></gn-ui-checkbox>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword') | async\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.title }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"flex-shrink-0\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner') | async\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.author</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <mat-icon class=\"material-symbols-outlined\">person</mat-icon>\n      <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.status }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate') | async\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.updatedOn</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ dateToString(item.recordUpdated) }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: CheckboxComponent, selector: "gn-ui-checkbox", inputs: ["type", "checked", "indeterminate"], outputs: ["changed"] }, { kind: "component", type: InteractiveTableComponent, selector: "gn-ui-interactive-table", inputs: ["items"], outputs: ["itemClick"] }, { kind: "component", type: InteractiveTableColumnComponent, selector: "gn-ui-interactive-table-column", inputs: ["grow", "sortable", "activeSort"], outputs: ["sortChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ResultsTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-results-table', standalone: true, imports: [
+                        CommonModule,
+                        UiInputsModule,
+                        InteractiveTableComponent,
+                        InteractiveTableColumnComponent,
+                        MatIconModule,
+                        TranslateModule,
+                    ], template: "<gn-ui-interactive-table\n  [items]=\"records$ | async\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <gn-ui-checkbox\n        [checked]=\"isAllSelected() | async\"\n        [indeterminate]=\"isSomeSelected() | async\"\n        (changed)=\"toggleSelectAll()\"\n        type=\"default\"\n        class=\"-m-2 mr-3\"\n      >\n      </gn-ui-checkbox>\n    </ng-template>\n    <ng-template #cell let-item>\n      <gn-ui-checkbox\n        [checked]=\"isChecked(item) | async\"\n        (changed)=\"handleRecordSelectedChange($event, item)\"\n        class=\"-m-2\"\n        type=\"default\"\n      ></gn-ui-checkbox>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword') | async\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.title }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"flex-shrink-0\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner') | async\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.author</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <mat-icon class=\"material-symbols-outlined\">person</mat-icon>\n      <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.status }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate') | async\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.updatedOn</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ dateToString(item.recordUpdated) }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n" }]
+        }], ctorParameters: function () { return [{ type: SearchFacade }, { type: SearchService }, { type: SelectionService }]; }, propDecorators: { recordClick: [{
+                type: Output
+            }] } });
+
 class AddLayerRecordPreviewComponent extends RecordPreviewComponent {
     get mapLinks() {
         return this.record.distributions.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.MAP_API));
@@ -28130,7 +28378,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,
@@ -28174,6 +28422,208 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                     ], template: "<div class=\"h-full text-sm\">\n  <gn-ui-fuzzy-search></gn-ui-fuzzy-search>\n  <gn-ui-results-list-container\n    layout=\"ADDLAYER\"\n  ></gn-ui-results-list-container>\n</div>\n", styles: ["::ng-deep .mat-tab-body-wrapper{flex-grow:1}\n"] }]
         }], ctorParameters: function () { return [{ type: SearchFacade }]; } });
 
+class AddLayerFromWmsComponent {
+    constructor(mapFacade, changeDetectorRef) {
+        this.mapFacade = mapFacade;
+        this.changeDetectorRef = changeDetectorRef;
+        this.wmsUrl = '';
+        this.loading = false;
+        this.layers = [];
+        this.wmsEndpoint = 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.wmsUrl.trim() === '') {
+                this.layers = [];
+                return;
+            }
+            this.wmsEndpoint = await new WmsEndpoint(this.wmsUrl).isReady();
+            this.layers = this.wmsEndpoint.getLayers();
+        }
+        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.wmsUrl.toString(),
+            type: MapContextLayerTypeEnum.WMS,
+        };
+        this.mapFacade.addLayer({ ...layerToAdd, title: layer.title });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromWmsComponent, deps: [{ token: MapFacade }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromWmsComponent, selector: "gn-ui-add-layer-from-wms", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wmsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.wms.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container\n    *ngFor=\"let layer of layers\"\n    [ngTemplateOutlet]=\"layerTreeItem\"\n    [ngTemplateOutletContext]=\"{\n      layer: layer\n    }\"\n  ></ng-container>\n</div>\n\n<ng-template #layerTreeItem let-layer=\"layer\">\n  <div class=\"flex items-center justify-between layer-tree-item my-2\">\n    <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n      {{ layer.title }}\n    </p>\n    <gn-ui-button\n      *ngIf=\"layer.name\"\n      class=\"layer-add-btn\"\n      type=\"primary\"\n      (buttonClick)=\"addLayer(layer)\"\n      extraClass=\"text-sm !px-2 !py-1\"\n      translate\n      ><span translate> map.layer.add </span></gn-ui-button\n    >\n  </div>\n  <div *ngIf=\"layer.children?.length > 0\" class=\"ml-4\">\n    <ng-container\n      *ngFor=\"let child of layer.children\"\n      [ngTemplateOutlet]=\"layerTreeItem\"\n      [ngTemplateOutletContext]=\"{\n        layer: child\n      }\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromWmsComponent, decorators: [{
+            type: Component,
+            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;
@@ -28183,11 +28633,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 h-full\">Add from WMS</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: "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 h-full\">Add from WMS</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 {
@@ -28220,6 +28670,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             args: [{ selector: 'gn-ui-map-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<gn-ui-map-context [context]=\"context$ | async\"></gn-ui-map-context>\n" }]
         }], ctorParameters: function () { return [{ type: MapFacade }]; } });
 
+const GEOCODING_PROVIDER = new InjectionToken('geocoding-provider');
+class GeocodingService {
+    constructor(provider) {
+        this.provider = provider;
+    }
+    query(text) {
+        let queryObservable;
+        switch (this.provider[0]) {
+            case 'geoadmin':
+                queryObservable = from(queryGeoadmin(text, this.provider[1]));
+                break;
+            case 'geonames':
+                queryObservable = from(queryGeonames(text, this.provider[1]));
+                break;
+            case 'data-gouv-fr':
+                queryObservable = from(queryDataGouvFr(text, this.provider[1]));
+                break;
+            default:
+                return throwError(() => new Error(`Unsupported geocoding provider: ${this.provider[0]}`));
+        }
+        return queryObservable.pipe(catchError((error) => throwError(error)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GeocodingService, deps: [{ token: GEOCODING_PROVIDER }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GeocodingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GeocodingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [GEOCODING_PROVIDER]
+                }] }]; } });
+
+class GeocodingComponent {
+    constructor(mapManager, geocodingService) {
+        this.mapManager = mapManager;
+        this.geocodingService = geocodingService;
+        this.searchText = '';
+        this.results = [];
+        this.searchTextChanged = new Subject();
+        this.destroy$ = new Subject();
+        this.errorMessage = null;
+        this.searchTextChanged
+            .pipe(debounceTime(300), switchMap$1((searchText) => {
+            return from(this.geocodingService.query(searchText)).pipe(catchError$1((error) => {
+                this.errorMessage =
+                    'An error occurred while searching. Please try again.';
+                console.error(error);
+                return [];
+            }));
+        }), takeUntil(this.destroy$))
+            .subscribe((results) => {
+            this.results = results;
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    onSearchChange(searchText) {
+        if (!searchText) {
+            this.clearSearch();
+            return;
+        }
+        else {
+            this.searchTextChanged.next(searchText);
+        }
+    }
+    clearSearch() {
+        this.searchText = '';
+        this.results = [];
+        this.errorMessage = null;
+    }
+    zoomToLocation(result) {
+        const map = this.mapManager.map;
+        const view = map.getView();
+        const geometry = result.geom;
+        if (geometry.type === 'Point') {
+            this.zoomToPoint(geometry.coordinates, view);
+        }
+        else if (geometry.type === 'Polygon') {
+            this.zoomToPolygon(geometry.coordinates, view);
+        }
+        else {
+            console.error(`Unsupported geometry type: ${geometry.type}`);
+        }
+    }
+    zoomToPoint(pointCoords, view) {
+        const transformedCoords = fromLonLat(pointCoords);
+        view.setCenter(transformedCoords);
+        view.setZoom(12);
+    }
+    zoomToPolygon(polygonCoords, view) {
+        const transformedCoords = polygonCoords[0].map((coord) => fromLonLat(coord));
+        const polygon = new Polygon([transformedCoords]);
+        view.fit(polygon, {
+            duration: 100,
+            maxZoom: 12,
+        });
+    }
+    onEnterPress() {
+        if (this.results && this.results.length > 0) {
+            this.zoomToLocation(this.results[0]);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GeocodingComponent, deps: [{ token: MapManagerService }, { token: GeocodingService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: GeocodingComponent, selector: "gn-ui-geocoding", ngImport: i0, template: "<gn-ui-search-input\n  [(value)]=\"searchText\"\n  (valueChange)=\"onSearchChange($event)\"\n  (keyup.enter)=\"onEnterPress()\"\n  [placeholder]=\"'map.geocoding.placeholder' | translate\"\n>\n</gn-ui-search-input>\n<ul\n  class=\"bg-gray-50 border border-gray-200 w-full mt-2 shadow-sm rounded-lg\"\n  *ngIf=\"results && results.length\"\n>\n  <li\n    *ngFor=\"let result of results\"\n    (click)=\"zoomToLocation(result)\"\n    class=\"flex items-center pl-8 pr-4 py-2 border-b border-gray-200 relative cursor-pointer hover:bg-blue-100 hover:text-gray-800 transition duration-300 ease-in-out\"\n  >\n    <svg\n      class=\"stroke-current text-blue-500 absolute w-5 h-5 left-3 top-3\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n      />\n      <path\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n      />\n    </svg>\n    <span class=\"font-sans font-semibold ml-4\">{{ result.label }}</span>\n  </li>\n</ul>\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: SearchInputComponent, selector: "gn-ui-search-input", inputs: ["value", "placeholder"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GeocodingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-geocoding', template: "<gn-ui-search-input\n  [(value)]=\"searchText\"\n  (valueChange)=\"onSearchChange($event)\"\n  (keyup.enter)=\"onEnterPress()\"\n  [placeholder]=\"'map.geocoding.placeholder' | translate\"\n>\n</gn-ui-search-input>\n<ul\n  class=\"bg-gray-50 border border-gray-200 w-full mt-2 shadow-sm rounded-lg\"\n  *ngIf=\"results && results.length\"\n>\n  <li\n    *ngFor=\"let result of results\"\n    (click)=\"zoomToLocation(result)\"\n    class=\"flex items-center pl-8 pr-4 py-2 border-b border-gray-200 relative cursor-pointer hover:bg-blue-100 hover:text-gray-800 transition duration-300 ease-in-out\"\n  >\n    <svg\n      class=\"stroke-current text-blue-500 absolute w-5 h-5 left-3 top-3\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n    >\n      <path\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n      />\n      <path\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n      />\n    </svg>\n    <span class=\"font-sans font-semibold ml-4\">{{ result.label }}</span>\n  </li>\n</ul>\n" }]
+        }], ctorParameters: function () { return [{ type: MapManagerService }, { type: GeocodingService }]; } });
+
 class FeatureMapModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FeatureMapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: FeatureMapModule, declarations: [MapContextComponent,
@@ -28227,7 +28792,11 @@ class FeatureMapModule {
             LayersPanelComponent,
             AddLayerFromCatalogComponent,
             MapContainerComponent,
-            AddLayerRecordPreviewComponent], imports: [CommonModule,
+            AddLayerRecordPreviewComponent,
+            AddLayerFromWmsComponent,
+            AddLayerFromFileComponent,
+            AddLayerFromWfsComponent,
+            GeocodingComponent], imports: [CommonModule,
             UiMapModule,
             UiLayoutModule,
             MatIconModule,
@@ -28238,13 +28807,18 @@ class FeatureMapModule {
             MapInstanceDirective,
             LayersPanelComponent,
             AddLayerFromCatalogComponent,
-            MapContainerComponent] }); }
+            MapContainerComponent,
+            GeocodingComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FeatureMapModule, providers: [
             {
                 provide: FEATURE_MAP_OPTIONS,
                 useValue: defaultMapOptions,
             },
             MapFacade,
+            {
+                provide: GEOCODING_PROVIDER,
+                useValue: ['geonames', { maxRows: 5 }],
+            },
         ], imports: [CommonModule,
             UiMapModule,
             UiLayoutModule,
@@ -28267,6 +28841,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         AddLayerFromCatalogComponent,
                         MapContainerComponent,
                         AddLayerRecordPreviewComponent,
+                        AddLayerFromWmsComponent,
+                        AddLayerFromFileComponent,
+                        AddLayerFromWfsComponent,
+                        GeocodingComponent,
                     ],
                     exports: [
                         MapContextComponent,
@@ -28274,6 +28852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         LayersPanelComponent,
                         AddLayerFromCatalogComponent,
                         MapContainerComponent,
+                        GeocodingComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -28294,6 +28873,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                             useValue: defaultMapOptions,
                         },
                         MapFacade,
+                        {
+                            provide: GEOCODING_PROVIDER,
+                            useValue: ['geonames', { maxRows: 5 }],
+                        },
                     ],
                 }]
         }] });
@@ -28388,7 +28971,7 @@ const mdViewReducer = createReducer(initialMdviewState, on(loadFullMetadata, (st
     ...state,
     chartConfig,
 })), on(close, (state) => {
-    // eslint-disable-next-line
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { metadata, related, ...stateWithoutMd } = state;
     return stateWithoutMd;
 }));
@@ -29655,15 +30238,16 @@ class DataService {
         // Pour DL toutes les données
         return this.getDownloadUrlsFromWfs(wfsLink.url.toString(), wfsLink.name).pipe(map$1((urls) => urls.all), map$1((urls) => Object.keys(urls).map((format) => ({
             ...wfsLink,
+            type: 'download',
             url: new URL(urls[format]),
-            mimeType: getMimeTypeForFormat(extensionToFormat(format)) || format,
+            mimeType: getMimeTypeForFormat(getFileFormatFromServiceOutput(format)),
         }))));
     }
     getDownloadLinksFromEsriRest(esriRestLink) {
         return ['json', 'geojson'].map((format) => ({
             ...esriRestLink,
             url: new URL(this.getDownloadUrlFromEsriRest(esriRestLink.url.toString(), format)),
-            mimeType: getMimeTypeForFormat(extensionToFormat(format)) || format,
+            mimeType: getMimeTypeForFormat(getFileFormatFromServiceOutput(format)),
         }));
     }
     readAsGeoJson(link) {
@@ -30057,12 +30641,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             }] } });
 
 class MapViewComponent {
-    constructor(mdViewFacade, mapManager, mapUtils, dataService, proxy, featureInfo, changeRef, styleService) {
+    constructor(mdViewFacade, mapManager, mapUtils, dataService, featureInfo, changeRef, styleService) {
         this.mdViewFacade = mdViewFacade;
         this.mapManager = mapManager;
         this.mapUtils = mapUtils;
         this.dataService = dataService;
-        this.proxy = proxy;
         this.featureInfo = featureInfo;
         this.changeRef = changeRef;
         this.styleService = styleService;
@@ -30097,7 +30680,7 @@ class MapViewComponent {
                 return of([]);
             }), finalize(() => (this.loading = false)));
         }));
-        this.mapContext$ = this.currentLayers$.pipe(switchMap$1((layers) => this.mapUtils.getLayerExtent(layers[0]).pipe(catchError((error) => {
+        this.mapContext$ = this.currentLayers$.pipe(switchMap$1((layers) => from(this.mapUtils.getLayerExtent(layers[0])).pipe(catchError((error) => {
             console.warn(error); // FIXME: report this to the user somehow
             return of(undefined);
         }), map$1((extent) => ({
@@ -30105,7 +30688,18 @@ class MapViewComponent {
             view: {
                 extent,
             },
-        })), tap$1(() => this.resetSelection()))));
+        })), tap$1(() => this.resetSelection()))), withLatestFrom$1(this.mdViewFacade.metadata$), map$1(([context, metadata]) => {
+            if (context.view.extent)
+                return context;
+            const extent = this.mapUtils.getRecordExtent(metadata);
+            return {
+                ...context,
+                view: {
+                    ...context.view,
+                    extent,
+                },
+            };
+        }));
     }
     ngOnDestroy() {
         this.subscription.unsubscribe();
@@ -30158,13 +30752,13 @@ class MapViewComponent {
     selectLinkToDisplay(link) {
         this.selectedLinkIndex$.next(link);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MapViewComponent, deps: [{ token: MdViewFacade }, { token: MapManagerService }, { token: MapUtilsService }, { token: DataService }, { token: ProxyService }, { token: FeatureInfoService }, { token: i0.ChangeDetectorRef }, { token: MapStyleService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MapViewComponent, deps: [{ token: MdViewFacade }, { token: MapManagerService }, { token: MapUtilsService }, { token: DataService }, { token: FeatureInfoService }, { token: i0.ChangeDetectorRef }, { token: MapStyleService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MapViewComponent, selector: "gn-ui-map-view", ngImport: i0, template: "<div class=\"w-full h-full flex flex-col p-1\">\n  <div class=\"w-full flex justify-end mb-7 mt-1\">\n    <gn-ui-dropdown-selector\n      class=\"truncate p-1 -mx-1\"\n      extraBtnClass=\"!text-primary font-sans font-medium\"\n      [title]=\"'map.select.layer' | translate\"\n      [choices]=\"dropdownChoices$ | async\"\n      (selectValue)=\"selectLinkToDisplay($event)\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-external-viewer-button\n      class=\"shrink-0 py-1 place-self-end\"\n      [link]=\"selectedLink$ | async\"\n      [mapConfig]=\"mapConfig\"\n    >\n    </gn-ui-external-viewer-button>\n  </div>\n  <div\n    class=\"relative w-full h-full bg-white border border-gray-300 rounded-lg overflow-hidden\"\n  >\n    <gn-ui-map-context\n      [context]=\"mapContext$ | async\"\n      [mapConfig]=\"mapConfig\"\n    ></gn-ui-map-context>\n    <div\n      class=\"top-[1em] right-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56\"\n      [class.hidden]=\"!selection\"\n    >\n      <button\n        (click)=\"resetSelection()\"\n        class=\"rounded bg-primary-opacity-25 text-white absolute right-[0.5em]\"\n      >\n        <mat-icon\n          class=\"material-symbols-outlined align-middle text-sm\"\n          style=\"height: 21px\"\n          >close</mat-icon\n        >\n      </button>\n      <gn-ui-feature-detail [feature]=\"selection\"></gn-ui-feature-detail>\n    </div>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'map.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <gn-ui-popup-alert\n      *ngIf=\"error\"\n      type=\"warning\"\n      icon=\"error_outline\"\n      class=\"absolute m-2 inset-0\"\n    >\n      <span translate>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapContextComponent, selector: "gn-ui-map-context", inputs: ["context", "mapConfig"], outputs: ["featureClicked"] }, { kind: "component", type: FeatureDetailComponent, selector: "gn-ui-feature-detail", inputs: ["feature"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ExternalViewerButtonComponent, selector: "gn-ui-external-viewer-button", inputs: ["link", "mapConfig"] }, { 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: MapViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gn-ui-map-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full h-full flex flex-col p-1\">\n  <div class=\"w-full flex justify-end mb-7 mt-1\">\n    <gn-ui-dropdown-selector\n      class=\"truncate p-1 -mx-1\"\n      extraBtnClass=\"!text-primary font-sans font-medium\"\n      [title]=\"'map.select.layer' | translate\"\n      [choices]=\"dropdownChoices$ | async\"\n      (selectValue)=\"selectLinkToDisplay($event)\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-external-viewer-button\n      class=\"shrink-0 py-1 place-self-end\"\n      [link]=\"selectedLink$ | async\"\n      [mapConfig]=\"mapConfig\"\n    >\n    </gn-ui-external-viewer-button>\n  </div>\n  <div\n    class=\"relative w-full h-full bg-white border border-gray-300 rounded-lg overflow-hidden\"\n  >\n    <gn-ui-map-context\n      [context]=\"mapContext$ | async\"\n      [mapConfig]=\"mapConfig\"\n    ></gn-ui-map-context>\n    <div\n      class=\"top-[1em] right-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56\"\n      [class.hidden]=\"!selection\"\n    >\n      <button\n        (click)=\"resetSelection()\"\n        class=\"rounded bg-primary-opacity-25 text-white absolute right-[0.5em]\"\n      >\n        <mat-icon\n          class=\"material-symbols-outlined align-middle text-sm\"\n          style=\"height: 21px\"\n          >close</mat-icon\n        >\n      </button>\n      <gn-ui-feature-detail [feature]=\"selection\"></gn-ui-feature-detail>\n    </div>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'map.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <gn-ui-popup-alert\n      *ngIf=\"error\"\n      type=\"warning\"\n      icon=\"error_outline\"\n      class=\"absolute m-2 inset-0\"\n    >\n      <span translate>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: MdViewFacade }, { type: MapManagerService }, { type: MapUtilsService }, { type: DataService }, { type: ProxyService }, { type: FeatureInfoService }, { type: i0.ChangeDetectorRef }, { type: MapStyleService }]; } });
+        }], ctorParameters: function () { return [{ type: MdViewFacade }, { type: MapManagerService }, { type: MapUtilsService }, { type: DataService }, { type: FeatureInfoService }, { type: i0.ChangeDetectorRef }, { type: MapStyleService }]; } });
 
 class DataViewComponent {
     constructor(mdViewFacade) {
@@ -30247,7 +30841,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,
@@ -30316,7 +30910,7 @@ class LanguageSwitcherComponent {
     ngOnInit() {
         const languages = this.languagePlaceholder || DEFAULT_LANGUAGES;
         this.languageList = languages.map((language) => ({
-            label: `language.${language}`,
+            label: `${language}`.toUpperCase(),
             value: language,
         }));
     }
@@ -30331,11 +30925,11 @@ class LanguageSwitcherComponent {
         this.translate.use(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LanguageSwitcherComponent, deps: [{ token: LANGUAGES_LIST, optional: true }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: LanguageSwitcherComponent, selector: "gn-ui-language-switcher", ngImport: i0, template: "<gn-ui-dropdown-selector\n  [title]=\"'languages'\"\n  [choices]=\"languageList\"\n  (selectValue)=\"changeLanguage($event)\"\n  [selected]=\"currentLang\"\n  ariaName=\"languages\"\n  [showTitle]=\"false\"\n>\n</gn-ui-dropdown-selector>\n", styles: [""], dependencies: [{ kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: LanguageSwitcherComponent, selector: "gn-ui-language-switcher", ngImport: i0, template: "<gn-ui-dropdown-selector\n  [title]=\"'languages'\"\n  [choices]=\"languageList\"\n  (selectValue)=\"changeLanguage($event)\"\n  [selected]=\"currentLang\"\n  ariaName=\"languages\"\n  [showTitle]=\"false\"\n  [extraBtnClass]=\"'flex justify-items-center text-white !pl-2 !py-1'\"\n>\n</gn-ui-dropdown-selector>\n", styles: [""], dependencies: [{ kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LanguageSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-language-switcher', template: "<gn-ui-dropdown-selector\n  [title]=\"'languages'\"\n  [choices]=\"languageList\"\n  (selectValue)=\"changeLanguage($event)\"\n  [selected]=\"currentLang\"\n  ariaName=\"languages\"\n  [showTitle]=\"false\"\n>\n</gn-ui-dropdown-selector>\n" }]
+            args: [{ selector: 'gn-ui-language-switcher', template: "<gn-ui-dropdown-selector\n  [title]=\"'languages'\"\n  [choices]=\"languageList\"\n  (selectValue)=\"changeLanguage($event)\"\n  [selected]=\"currentLang\"\n  ariaName=\"languages\"\n  [showTitle]=\"false\"\n  [extraBtnClass]=\"'flex justify-items-center text-white !pl-2 !py-1'\"\n>\n</gn-ui-dropdown-selector>\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -30616,13 +31210,6 @@ class MyOrgService {
     constructor(platformService, orgService) {
         this.platformService = platformService;
         this.orgService = orgService;
-        this.myOrgDataSubject = new BehaviorSubject({
-            orgName: '',
-            logoUrl: '',
-            recordCount: 0,
-            userCount: 0,
-            userList: [],
-        });
         this.myOrgData$ = combineLatest([
             this.platformService.getMe(),
             this.platformService.getUsers(),
@@ -30641,7 +31228,7 @@ class MyOrgService {
                 userList,
                 userCount,
             };
-        }));
+        }), shareReplay(1));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MyOrgService, deps: [{ token: PlatformServiceInterface }, { token: OrganizationsServiceInterface }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MyOrgService, providedIn: 'root' }); }
@@ -31334,11 +31921,11 @@ class RecordFormComponent {
         return field.config.model;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordFormComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordFormComponent, isStandalone: true, selector: "gn-ui-record-form", ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  <gn-ui-form-field\n    *ngFor=\"let field of editorService.fields$ | async; trackBy: fieldTracker\"\n    [config]=\"field.config\"\n    [value]=\"field.value\"\n    (valueChange)=\"handleFieldValueChange(field.config.model, $event)\"\n  ></gn-ui-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordFormComponent, isStandalone: true, selector: "gn-ui-record-form", ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  <gn-ui-form-field\n    *ngFor=\"let field of editorService.fields$ | async; trackBy: fieldTracker\"\n    [config]=\"field.config\"\n    [value]=\"field.value\"\n    (valueChange)=\"handleFieldValueChange(field.config.model, $event)\"\n  ></gn-ui-form-field>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: FormFieldComponent, selector: "gn-ui-form-field", inputs: ["config", "value"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-record-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div class=\"flex flex-col gap-6\">\n  <gn-ui-form-field\n    *ngFor=\"let field of editorService.fields$ | async; trackBy: fieldTracker\"\n    [config]=\"field.config\"\n    [value]=\"field.value\"\n    (valueChange)=\"handleFieldValueChange(field.config.model, $event)\"\n  ></gn-ui-form-field>\n</div>\n" }]
+            args: [{ selector: 'gn-ui-record-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, UiInputsModule], template: "<div class=\"flex flex-col gap-6\">\n  <gn-ui-form-field\n    *ngFor=\"let field of editorService.fields$ | async; trackBy: fieldTracker\"\n    [config]=\"field.config\"\n    [value]=\"field.value\"\n    (valueChange)=\"handleFieldValueChange(field.config.model, $event)\"\n  ></gn-ui-form-field>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: EditorService }]; } });
 
 const ROUTER_STATE_KEY = 'router';
@@ -31706,5 +32293,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, 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, EditableLabelDirective, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalViewerButtonComponent, FACET_ITEM_FIXTURE, FEATURE_MAP_OPTIONS, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FORMATS, FacetBlockComponent, FacetBlockStubComponent, FacetItemComponent, FacetItemStubComponent, FacetListComponent, FacetsContainerComponent, FacetsModule, FavoriteStarComponent, FavoritesService, FeatureAuthModule, FeatureCatalogModule, FeatureDatavizModule, FeatureDetailComponent, FeatureEditorModule, FeatureInfoService, FeatureMapModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileTranslateLoader, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldFileComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentComponent, FuzzySearchComponent, GN_UI_VERSION, GeoTableViewComponent, GeocodingComponent, Gn4MetadataMapper, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, ImageOverlayPreviewComponent, InteractiveTableColumnComponent, InteractiveTableComponent, 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, MapViewComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataInfoComponent, MetadataLinkType, MetadataQualityComponent, MetadataQualityItemComponent, MyOrgService, NavigationButtonComponent, ORGANIZATIONS_STRATEGY, ORGANIZATION_URL_TOKEN, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationsFromGroupsService, OrganizationsFromMetadataService, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PatchResultsAggregations, PopupAlertComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_URL_TOKEN, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESULTS_LAYOUT_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_SEARCH, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordsMetricsComponent, RecordsService, RelatedRecordCardComponent, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SET_CONFIG_AGGREGATIONS, SET_CONFIG_FILTERS, SET_CONFIG_REQUEST_FIELDS, SET_ERROR, SET_FAVORITES_ONLY, SET_FILTERS, SET_INCLUDE_ON_AGGREGATION, SET_PAGE_SIZE, SET_RESULTS_AGGREGATIONS, SET_RESULTS_HITS, SET_RESULTS_LAYOUT, SET_SEARCH, SET_SORT_BY, SET_SPATIAL_FILTER_ENABLED, SearchEffects, SearchFacade, SearchInputComponent, SearchResultsErrorComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SiteTitleComponent, SortByComponent, SourceLabelComponent, SourcesService, SpinningLoaderComponent, StarToggleComponent, StepBarComponent, StickyHeaderComponent, SupportedTypes, TABLE_ITEM_FIXTURE, TABLE_ITEM_FIXTURE_HAB, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableComponent, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UiCatalogModule, UiDatavizModule, UiElementsModule, FacetsModule$1 as UiFacetsModule, UiInputsModule, UiLayoutModule, UiMapModule, UiSearchModule, UiWidgetsModule, UpdateConfigAggregations, UpdateFilters, UserPreviewComponent, UtilI18nModule, UtilSharedModule, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, WFS_MAX_FEATURES, WizardComponent, WizardFieldComponent, WizardFieldType, WizardService, WizardSummarizeComponent, _reset, addLayer, changeLayerOrder, checkFileFormat, clearLayerError, createFuzzyFilter, currentPage, defaultMapOptions, dragPanCondition, dropEmptyTranslations, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryFromGeoJSON, getGlobalConfig, getJsonDataItemsProxy, getLangFromBrowser, getLinkLabel, getLinkPriority, getMapLayers, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSpatialFilterEnabled, 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