geonetwork-ui 2.10.0-dev.574947486 → 2.10.0-dev.5f1c6f718

package/fesm2022/geonetwork-ui.mjs

@@ -7,7 +7,7 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import { format } from 'date-fns/format';
 import { Namespace, Literal, lit, parse as parse$2, sym, BlankNode, graph } from 'rdflib';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, NgModule, Injector, APP_INITIALIZER, makeEnvironmentProviders, ElementRef, HostListener, Input, Directive, Renderer2, DestroyRef, EventEmitter, Output, ViewChild, ChangeDetectionStrategy, Component, ViewEncapsulation, ChangeDetectorRef, HostBinding, ViewContainerRef, TemplateRef, ViewChildren, ContentChild, ContentChildren, NgZone, ComponentFactoryResolver } from '@angular/core';
+import { InjectionToken, inject, Injectable, NgModule, Injector, APP_INITIALIZER, makeEnvironmentProviders, ElementRef, HostListener, Input, Directive, Renderer2, DestroyRef, EventEmitter, Output, ViewChild, ChangeDetectionStrategy, Component, ViewEncapsulation, ChangeDetectorRef, HostBinding, ViewContainerRef, TemplateRef, ViewChildren, ContentChild, ContentChildren, NgZone, ComponentFactoryResolver, afterNextRender } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams, HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi, HttpEventType } from '@angular/common/http';
 import * as i4 from '@ngx-translate/core';
 import { TranslateLoader, TranslateCompiler, TranslateDefaultParser, TranslateParser, TranslateService, provideTranslateService, TranslateDirective, TranslatePipe, TranslateModule } from '@ngx-translate/core';
@@ -18,7 +18,7 @@ import { of, map as map$2, lastValueFrom, fromEvent, startWith, shareReplay, fil
 import { lt, valid, coerce, satisfies, ltr } from 'semver';
 import chroma from 'chroma-js';
 import * as i1$1 from '@angular/common';
-import { Location, CommonModule, NgClass, NgTemplateOutlet, DatePipe } from '@angular/common';
+import { Location, CommonModule, NgClass, NgTemplateOutlet, DatePipe, AsyncPipe } from '@angular/common';
 import { formatDistance } from 'date-fns/formatDistance';
 import { Scroll, NavigationEnd, Router, RouteReuseStrategy } from '@angular/router';
 import { WmtsEndpoint, WmsEndpoint, WfsEndpoint, OgcApiEndpoint, sharedFetch, useCache, StacEndpoint, TmsEndpoint } from '@camptocamp/ogc-client';
@@ -31,7 +31,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FeaturesClickEventType, FeaturesHoverEventType, MapClickEventType, MapExtentChangeEventType, SourceLoadErrorType, computeMapContextDiff, createViewFromLayer } from '@geospatial-sdk/core';
 import { createMapFromContext, applyContextDiffToMap, listen } from '@geospatial-sdk/openlayers';
 import { NgIconComponent, provideIcons, provideNgIconsConfig, NgIcon } from '@ng-icons/core';
-import { matSwipeOutline, matErrorOutlineOutline, matComputerOutline, matLocationSearchingOutline, matLocationOnOutline, matCallOutline, matMailOutline as matMailOutline$1, matInfoOutline, matCloseOutline, matWarningAmberOutline, matSendOutline, matHomeWorkOutline, matCloudDownloadOutline, matMapOutline, matAddCircleOutlineOutline, matLayersOutline, matDeleteOutline, matMoreHorizOutline } from '@ng-icons/material-icons/outline';
+import { matSwipeOutline, matErrorOutlineOutline, matComputerOutline, matLocationSearchingOutline, matLocationOnOutline, matCallOutline, matInfoOutline, matMailOutline as matMailOutline$1, matCloseOutline, matWarningAmberOutline, matSendOutline, matHomeWorkOutline, matCloudDownloadOutline, matMapOutline, matAddCircleOutlineOutline, matLayersOutline, matDeleteOutline, matMoreHorizOutline } from '@ng-icons/material-icons/outline';
 import { transformExtent } from 'ol/proj.js';
 import { createLegendFromLayer } from '@geospatial-sdk/legend';
 import { mouseOnly, noModifierKeys, primaryAction, platformModifierKeyOnly } from 'ol/events/condition.js';
@@ -19107,6 +19107,7 @@ var de = {
 	"record.metadata.quality.updateFrequency.failed": "Aktualisierungsfrequenz nicht angegeben",
 	"record.metadata.quality.updateFrequency.success": "Aktualisierungsfrequenz angegeben",
 	"record.metadata.related": "Entdecken Sie den Katalog",
+	"record.metadata.resource.contacts": "Kontakte zur Ressource",
 	"record.metadata.resourceCreated": "Erstellt",
 	"record.metadata.resourcePublished": "Veröffentlicht",
 	"record.metadata.resourceUpdated": "Zuletzt aktualisiert",
@@ -19781,6 +19782,7 @@ var en = {
 	"record.metadata.quality.updateFrequency.failed": "Update frequency is not specified",
 	"record.metadata.quality.updateFrequency.success": "Update frequency is specified",
 	"record.metadata.related": "Explore the catalog",
+	"record.metadata.resource.contacts": "Contacts for the resource",
 	"record.metadata.resourceCreated": "Created",
 	"record.metadata.resourcePublished": "Published",
 	"record.metadata.resourceUpdated": "Last updated",
@@ -20455,6 +20457,7 @@ var es = {
 	"record.metadata.quality.updateFrequency.failed": "",
 	"record.metadata.quality.updateFrequency.success": "",
 	"record.metadata.related": "",
+	"record.metadata.resource.contacts": "",
 	"record.metadata.resourceCreated": "",
 	"record.metadata.resourcePublished": "",
 	"record.metadata.resourceUpdated": "",
@@ -21129,6 +21132,7 @@ var fr = {
 	"record.metadata.quality.updateFrequency.failed": "La fréquence de mise à jour n'est pas renseignée",
 	"record.metadata.quality.updateFrequency.success": "La fréquence de mise à jour est renseignée",
 	"record.metadata.related": "Explorez le catalogue",
+	"record.metadata.resource.contacts": "Contacts liés à la donnée",
 	"record.metadata.resourceCreated": "Créé",
 	"record.metadata.resourcePublished": "Publié",
 	"record.metadata.resourceUpdated": "Mis à jour",
@@ -21803,6 +21807,7 @@ 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.resource.contacts": "Contatti per la risorsa",
 	"record.metadata.resourceCreated": "Creato",
 	"record.metadata.resourcePublished": "Pubblicato",
 	"record.metadata.resourceUpdated": "Ultimo aggiornamento",
@@ -22477,6 +22482,7 @@ var nl = {
 	"record.metadata.quality.updateFrequency.failed": "",
 	"record.metadata.quality.updateFrequency.success": "",
 	"record.metadata.related": "",
+	"record.metadata.resource.contacts": "",
 	"record.metadata.resourceCreated": "",
 	"record.metadata.resourcePublished": "",
 	"record.metadata.resourceUpdated": "",
@@ -23151,6 +23157,7 @@ var pt = {
 	"record.metadata.quality.updateFrequency.failed": "",
 	"record.metadata.quality.updateFrequency.success": "",
 	"record.metadata.related": "",
+	"record.metadata.resource.contacts": "",
 	"record.metadata.resourceCreated": "",
 	"record.metadata.resourcePublished": "",
 	"record.metadata.resourceUpdated": "",
@@ -23825,6 +23832,7 @@ var sk = {
 	"record.metadata.quality.updateFrequency.failed": "Frekvencia aktualizácie nie je určená",
 	"record.metadata.quality.updateFrequency.success": "Frekvencia aktualizácie je určená",
 	"record.metadata.related": "Súvisiace záznamy",
+	"record.metadata.resource.contacts": "Kontakty k zdroju",
 	"record.metadata.resourceCreated": "",
 	"record.metadata.resourcePublished": "",
 	"record.metadata.resourceUpdated": "",
@@ -25100,6 +25108,27 @@ function removeSearchParams(url, searchParams) {
     return urlObj.toString();
 }
 
+function getIndividualDisplayName(individual) {
+    const nameParts = [individual.firstName, individual.lastName]
+        .filter(Boolean)
+        .join(' ');
+    const orgPart = individual.organization?.name
+        ? ` (${individual.organization.name})`
+        : '';
+    if (nameParts)
+        return `${nameParts}${orgPart}`;
+    return individual.organization?.name ?? individual.email ?? '';
+}
+function toIndividual(user) {
+    return {
+        firstName: user.name,
+        lastName: user.surname,
+        email: user.email,
+        role: 'unspecified',
+        organization: user.organisation ? { name: user.organisation } : undefined,
+    };
+}
+
 marker('downloads.wfs.featuretype.not.found');
 const FORMATS = {
     csv: {
@@ -25526,7 +25555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
             }] } });
 
 var name = "geonetwork-ui";
-var version = "2.10.0-dev.574947486";
+var version = "2.10.0-dev.5f1c6f718";
 var engines = {
 	node: ">=20"
 };
@@ -25566,7 +25595,7 @@ var peerDependencies = {
 };
 var dependencies = {
 	"@biesbjerg/ngx-translate-extract-marker": "~1.0.0",
-	"@camptocamp/ogc-client": "1.3.1-dev.12086e8",
+	"@camptocamp/ogc-client": "1.3.1-dev.afd9c26",
 	"@geospatial-sdk/core": "0.0.5-dev.61",
 	"@geospatial-sdk/geocoding": "0.0.5-dev.61",
 	"@geospatial-sdk/legend": "0.0.5-dev.61",
@@ -25626,17 +25655,26 @@ const GEONETWORK_UI_TAG_NAME = GEONETWORK_UI_VERSION.split('-')[1]?.startsWith('
     : `v${packageJson.version}`;
 
 const ValidatorMapper = {
-    title: (record) => !!record?.title,
-    abstract: (record) => !!record?.abstract,
-    keywords: (record) => (record?.keywords?.length ?? 0) > 0,
-    legalConstraints: (record) => !!(record?.legalConstraints?.length &&
-        record.legalConstraints.some((c) => c?.text?.trim().length > 0)),
-    contacts: (record) => !!record?.contacts?.[0]?.email &&
-        record.contacts[0].email !== 'missing@missing.com',
-    updateFrequency: (record) => !!record?.updateFrequency && record.updateFrequency !== 'unknown',
-    topics: (record) => (record?.topics?.length ?? 0) > 0,
-    organisation: (record) => !!record?.contacts?.[0]?.organization?.name,
-    source: (record) => !!record?.extras?.sourcesIdentifiers,
+    title: { validator: (record) => !!record?.title },
+    abstract: { validator: (record) => !!record?.abstract },
+    keywords: { validator: (record) => (record?.keywords?.length ?? 0) > 0 },
+    legalConstraints: {
+        validator: (record) => !!(record?.legalConstraints?.length &&
+            record.legalConstraints.some((c) => c?.text?.trim().length > 0)),
+    },
+    contacts: {
+        validator: (record) => !!record?.contacts?.[0]?.email &&
+            record.contacts[0].email !== 'missing@missing.com',
+    },
+    updateFrequency: {
+        validator: (record) => !!record?.updateFrequency && record.updateFrequency !== 'unknown',
+    },
+    topics: { validator: (record) => (record?.topics?.length ?? 0) > 0 },
+    organisation: {
+        validator: (record) => !!record?.contacts?.[0]?.organization?.name,
+        alias: 'contacts',
+    },
+    source: { validator: (record) => !!record?.extras?.sourcesIdentifiers },
 };
 function getAllKeysValidator() {
     return Object.keys(ValidatorMapper);
@@ -25667,7 +25705,8 @@ function getQualityValidators(record, propsToValidate) {
     const filteredProps = propsToValidate.filter((prop) => getMappersFromKind(record.kind).includes(prop));
     return filteredProps.map((name) => ({
         name,
-        validator: () => ValidatorMapper[name](record),
+        validator: () => ValidatorMapper[name].validator(record),
+        alias: ValidatorMapper[name].alias,
     }));
 }
 
@@ -26329,6 +26368,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 
 const minPublicationApiVersion = '4.2.5';
 const TEMPORARY_ID_PREFIX = 'TEMP-ID-';
+const DISABLE_DRAFT = new InjectionToken('gnDisableDraft', {
+    factory: () => false,
+});
 class Gn4Repository {
     constructor() {
         this.httpClient = inject(HttpClient);
@@ -26339,6 +26381,7 @@ class Gn4Repository {
         this.platformService = inject(PlatformServiceInterface);
         this.gn4LanguagesApi = inject(LanguagesApiService);
         this.settingsService = inject(Gn4SettingsService);
+        this.disableDraft = inject(DISABLE_DRAFT, { optional: true }) ?? false;
         this._draftsChanged = new Subject();
         this.draftsChanged$ = this._draftsChanged.asObservable();
     }
@@ -26478,7 +26521,9 @@ class Gn4Repository {
         return this.settingsService.allowEditHarvested$.pipe(map$1((allowEditHarvested) => this.canEdit(record, allowEditHarvested)));
     }
     openRecordForEdition(uniqueIdentifier) {
-        const draft$ = of(this.getRecordFromLocalStorage(uniqueIdentifier));
+        const draft$ = this.disableDraft
+            ? of(null)
+            : of(this.getRecordFromLocalStorage(uniqueIdentifier));
         const recordAsXml$ = this.getRecordAsXml(uniqueIdentifier);
         return combineLatest([draft$, recordAsXml$]).pipe(switchMap(([draft, recordAsXml]) => {
             const xml = draft ?? recordAsXml;
@@ -26532,20 +26577,28 @@ class Gn4Repository {
         return `${TEMPORARY_ID_PREFIX}${Date.now()}`;
     }
     saveRecordAsDraft(record, referenceRecordSource) {
+        if (this.disableDraft)
+            return of('');
         return this.serializeRecordToXml(record, referenceRecordSource).pipe(tap$1((recordXml) => {
             this.saveRecordToLocalStorage(recordXml, record.uniqueIdentifier);
             this._draftsChanged.next();
         }));
     }
     clearRecordDraft(uniqueIdentifier) {
+        if (this.disableDraft)
+            return;
         this.removeRecordFromLocalStorage(uniqueIdentifier);
         this._draftsChanged.next();
     }
     recordHasDraft(uniqueIdentifier) {
+        if (this.disableDraft)
+            return false;
         return this.getRecordFromLocalStorage(uniqueIdentifier) !== null;
     }
     // generated by copilot
     getAllDrafts() {
+        if (this.disableDraft)
+            return of([]);
         const items = { ...window.localStorage };
         const drafts = Object.keys(items)
             .filter((key) => key.startsWith('geonetwork-ui-draft-'))
@@ -26556,6 +26609,8 @@ class Gn4Repository {
         })));
     }
     getDraftsCount() {
+        if (this.disableDraft)
+            return of(0);
         const items = { ...window.localStorage };
         const draftCount = Object.keys(items)
             .filter((key) => key.startsWith('geonetwork-ui-draft-'))
@@ -27477,6 +27532,10 @@ function provideGn4(provideOptions) {
             provide: DISABLE_AUTH,
             useValue: provideOptions?.disableAuth,
         },
+        {
+            provide: DISABLE_DRAFT,
+            useValue: provideOptions?.disableDraft,
+        },
         {
             provide: PlatformServiceInterface,
             useClass: Gn4PlatformService,
@@ -27721,8 +27780,9 @@ class MapContainerComponent {
     }
     async ngOnChanges(changes) {
         if ('context' in changes && !changes['context'].isFirstChange()) {
+            const olMap = await this.openlayersMap;
             const diff = computeMapContextDiff(this.processContext(changes['context'].currentValue), this.processContext(changes['context'].previousValue));
-            await applyContextDiffToMap(this.olMap, diff);
+            await applyContextDiffToMap(olMap, diff);
             if (this._resolvedExtentChange && diff.viewChanges) {
                 this._resolvedExtentChange.emit(this.calculateCurrentMapExtent());
             }
@@ -27928,10 +27988,11 @@ function mouseWheelZoomCondition(event) {
 
 class SpatialExtentComponent {
     constructor() {
+        this._cdr = inject(ChangeDetectorRef);
         this.spatialExtents$ = new BehaviorSubject([]);
-        this.mapContext$ = this.spatialExtents$.pipe(switchMap$1(async (extents) => {
+        this.mapContext$ = this.spatialExtents$.pipe(switchMap$1((extents) => {
             if (extents.length === 0) {
-                return null; // null extent means default view
+                return of(null);
             }
             const featureCollection = {
                 type: 'FeatureCollection',
@@ -27963,11 +28024,7 @@ class SpatialExtentComponent {
                     'fill-color': 'rgba(153, 153, 153, 0.3)',
                 },
             };
-            const view = await createViewFromLayer(layer);
-            return {
-                view,
-                layers: [layer],
-            };
+            return from(createViewFromLayer(layer)).pipe(map$1((view) => ({ view, layers: [layer] })), tap$1(() => this._cdr.markForCheck()));
         }));
         this.error = '';
     }
@@ -29116,6 +29173,9 @@ class ButtonComponent {
             case 'black':
                 this.btnClass = 'gn-ui-btn-black';
                 break;
+            case 'primary-light':
+                this.btnClass = 'gn-ui-btn-primary-light';
+                break;
             case 'default':
             default:
                 this.btnClass = 'gn-ui-btn-default';
@@ -34177,6 +34237,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 }]
         }] });
 
+class ContactPillComponent {
+    get displayName() {
+        return getIndividualDisplayName(this.contact);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ContactPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: ContactPillComponent, isStandalone: true, selector: "gn-ui-contact-pill", inputs: { contact: "contact" }, ngImport: i0, template: "<gn-ui-button\n  type=\"primary-light\"\n  extraClass=\"group w-full min-h-12 gap-3 justify-between py-2 pl-5 pr-4 rounded\"\n  data-test=\"contact-pill\"\n>\n  <span\n    class=\"font-title font-medium text-base leading-tight truncate group-hover:text-white\"\n    [title]=\"displayName\"\n    >{{ displayName }}</span\n  >\n  <div\n    class=\"gn-ui-card-icon items-center justify-center w-10 h-8 group-hover:border-white group-hover:text-white\"\n  >\n    <ng-icon class=\"!w-6 !h-6 !text-[24px]\" name=\"matInfoOutline\"></ng-icon>\n  </div>\n</gn-ui-button>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], viewProviders: [
+            provideIcons({
+                matInfoOutline,
+            }),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ContactPillComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-contact-pill', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIcon, ButtonComponent], viewProviders: [
+                        provideIcons({
+                            matInfoOutline,
+                        }),
+                    ], template: "<gn-ui-button\n  type=\"primary-light\"\n  extraClass=\"group w-full min-h-12 gap-3 justify-between py-2 pl-5 pr-4 rounded\"\n  data-test=\"contact-pill\"\n>\n  <span\n    class=\"font-title font-medium text-base leading-tight truncate group-hover:text-white\"\n    [title]=\"displayName\"\n    >{{ displayName }}</span\n  >\n  <div\n    class=\"gn-ui-card-icon items-center justify-center w-10 h-8 group-hover:border-white group-hover:text-white\"\n  >\n    <ng-icon class=\"!w-6 !h-6 !text-[24px]\" name=\"matInfoOutline\"></ng-icon>\n  </div>\n</gn-ui-button>\n" }]
+        }], propDecorators: { contact: [{
+                type: Input
+            }] } });
+
 class MetadataInfoComponent {
     constructor() {
         this.dateService = inject(DateService);
@@ -34232,20 +34314,32 @@ class MetadataInfoComponent {
         const temporalExtents = this.metadata.kind === 'dataset' ? this.metadata.temporalExtents : [];
         return getTemporalRangeUnion(temporalExtents, this.dateService);
     }
-    get shownOrganization() {
-        return this.metadata.ownerOrganization;
-    }
-    get resourceContact() {
-        return this.metadata.contactsForResource?.[0];
-    }
     fieldReady(propName) {
         return !this.incomplete || propName in this.metadata;
     }
+    get contactGroups() {
+        const groups = [];
+        const indexByRole = new Map();
+        for (const contact of this.metadata.contactsForResource ?? []) {
+            if (indexByRole.has(contact.role)) {
+                groups[indexByRole.get(contact.role)].contacts.push(contact);
+            }
+            else {
+                indexByRole.set(contact.role, groups.length);
+                groups.push({
+                    role: contact.role,
+                    roleLabel: RoleLabels.get(contact.role),
+                    contacts: [contact],
+                });
+            }
+        }
+        return groups;
+    }
     onKeywordClick(keyword) {
         this.keyword.emit(keyword);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MetadataInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MetadataInfoComponent, isStandalone: true, selector: "gn-ui-metadata-info", inputs: { metadata: "metadata", incomplete: "incomplete" }, outputs: { keyword: "keyword" }, ngImport: i0, template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost\n    ghostClass=\"h-[178px]\"\n    [showContent]=\"fieldReady('abstract')\"\n  >\n    @if (metadata.abstract) {\n      <gn-ui-max-lines [maxLines]=\"6\" data-test=\"metadata-info-abstract\">\n        <div class=\"mb-6\">\n          <gn-ui-markdown-parser\n            [textContent]=\"metadata.abstract\"\n          ></gn-ui-markdown-parser>\n        </div>\n      </gn-ui-max-lines>\n    }\n  </gn-ui-content-ghost>\n\n  @if (!fieldReady('keywords') || metadata.keywords?.length) {\n    <p class=\"mt-6 mb-3 font-medium text-black text-sm\" translate>\n      record.metadata.keywords\n    </p>\n  }\n\n  <gn-ui-content-ghost\n    ghostClass=\"h-[31px] w-3/4\"\n    [showContent]=\"fieldReady('keywords')\"\n  >\n    @if (metadata.keywords?.length) {\n      <gn-ui-max-lines [maxLines]=\"7\">\n        <div class=\"metadata-info-keywords sm:pb-4 flex flex-wrap gap-2\">\n          @for (keyword of metadata.keywords; track keyword) {\n            <gn-ui-badge\n              class=\"inline-block lowercase\"\n              (click)=\"onKeywordClick(keyword)\"\n              [clickable]=\"true\"\n              >{{ keyword.label }}</gn-ui-badge\n            >\n          }\n        </div>\n      </gn-ui-max-lines>\n    }\n  </gn-ui-content-ghost>\n</div>\n\n@if (\n  metadata.licenses ||\n  metadata.legalConstraints ||\n  metadata.securityConstraints ||\n  metadata.otherConstraints\n) {\n  <gn-ui-expandable-panel\n    [title]=\"'record.metadata.usage' | translate\"\n    data-test=\"usage-panel\"\n  >\n    <div class=\"flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900\">\n      @for (license of licenses; track license) {\n        @if (license.url) {\n          <div class=\"text-primary\">\n            <a\n              [href]=\"license.url\"\n              target=\"_blank\"\n              class=\"cursor-pointer hover:underline transition-all\"\n            >\n              {{ license.text }}\n              <ng-icon\n                class=\"!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n                name=\"matOpenInNew\"\n              ></ng-icon>\n            </a>\n          </div>\n        } @else {\n          <div class=\"text-primary\" gnUiLinkify>\n            {{ license.text }}\n          </div>\n        }\n      }\n      @if (legalConstraints.length) {\n        <div class=\"mb-6\">\n          @for (constraint of legalConstraints; track constraint) {\n            <gn-ui-markdown-parser [textContent]=\"constraint\">\n            </gn-ui-markdown-parser>\n          }\n        </div>\n      }\n      @if (otherConstraints.length) {\n        @for (constraint of otherConstraints; track constraint) {\n          <div gnUiLinkify>\n            <span\n              translate\n              class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\"\n            >\n              record.metadata.otherConstraints\n            </span>\n            <div class=\"mb-6\">\n              <gn-ui-markdown-parser [textContent]=\"constraint\">\n              </gn-ui-markdown-parser>\n            </div>\n          </div>\n        }\n      }\n      @if (!hasUsage) {\n        <span class=\"noUsage\">\n          {{ 'record.metadata.noUsage' | translate }}\n        </span>\n      }\n    </div>\n  </gn-ui-expandable-panel>\n}\n@if (\n  (metadata.kind === 'dataset' && metadata.lineage) ||\n  resourceContact ||\n  metadata.resourceCreated ||\n  metadata.resourcePublished ||\n  metadata.resourceUpdated ||\n  (metadata.kind === 'dataset' && metadata.updateFrequency) ||\n  metadata.otherLanguages?.length ||\n  (metadata.kind === 'dataset' && temporalExtent)\n) {\n  <gn-ui-expandable-panel\n    [title]=\"'record.metadata.details' | translate\"\n    data-test=\"details-panel\"\n  >\n    @if (metadata.kind === 'dataset' && metadata.lineage) {\n      <div\n        class=\"text-gray-900 flex flex-col mt-4 gap-2\"\n        data-test=\"details-panel-lineage\"\n      >\n        <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n          {{ metadata.lineage }}\n        </p>\n      </div>\n    }\n    @if (resourceContact) {\n      <div\n        class=\"flex flex-row gap-6 mt-5 mb-8 resource-contact\"\n        data-test=\"details-panel-resource-contact\"\n      >\n        @if (resourceContact.organization?.logoUrl?.href) {\n          <div\n            class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n          >\n            <gn-ui-thumbnail\n              class=\"relative h-full w-full\"\n              [thumbnailUrl]=\"resourceContact.organization.logoUrl.href\"\n              fit=\"contain\"\n            ></gn-ui-thumbnail>\n          </div>\n        }\n        <div class=\"flex flex-col gap-1\">\n          <p class=\"text-sm font-medium\" translate>record.metadata.producer</p>\n          <div\n            class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n            data-cy=\"organization-name\"\n          >\n            {{ resourceContact.organization?.name }}\n          </div>\n          @if (resourceContact.organization?.website) {\n            <div>\n              <a\n                [href]=\"resourceContact.organization.website\"\n                target=\"_blank\"\n                class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n                >{{ resourceContact.organization.website }}\n                <ng-icon\n                  class=\"!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n                  name=\"matOpenInNew\"\n                ></ng-icon>\n              </a>\n            </div>\n          }\n          @if (resourceContact.email) {\n            <div class=\"mt-4\">\n              <div class=\"flex\">\n                <ng-icon\n                  class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n                  name=\"matMailOutline\"\n                ></ng-icon>\n                @if (resourceContact.email) {\n                  <a\n                    [href]=\"'mailto:' + resourceContact.email\"\n                    class=\"text-sm hover:underline ml-2\"\n                    target=\"_blank\"\n                    data-cy=\"contact-email\"\n                    >{{ resourceContact?.email }}</a\n                  >\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <div\n      class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n    >\n      @if (metadata.resourceCreated) {\n        <div data-test=\"details-panel-resource-created\">\n          <p class=\"text-sm\" translate>record.metadata.creation</p>\n          <p\n            class=\"text-primary font-medium mt-1 resource-created\"\n            [gnUiHumanizeDate]=\"metadata.resourceCreated\"\n          ></p>\n        </div>\n      }\n      @if (metadata.resourcePublished) {\n        <div data-test=\"details-panel-resource-published\">\n          <p class=\"text-sm\" translate>record.metadata.publication</p>\n          <p\n            class=\"text-primary font-medium mt-1 resource-published\"\n            [gnUiHumanizeDate]=\"metadata.resourcePublished\"\n          ></p>\n        </div>\n      }\n      @if (metadata.resourceUpdated) {\n        <div data-test=\"details-panel-resource-updated\">\n          <p class=\"text-sm\" translate>record.metadata.update</p>\n          <p\n            class=\"text-primary font-medium mt-1 resource-updated\"\n            [gnUiHumanizeDate]=\"metadata.resourceUpdated\"\n          ></p>\n        </div>\n      }\n      @if (metadata.kind === 'dataset' && metadata.updateFrequency) {\n        <div data-test=\"details-panel-update-frequency\">\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      }\n      @if (metadata.otherLanguages?.length) {\n        <div data-test=\"details-panel-other-languages\">\n          <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n          <div class=\"flex flex-row gap-1 flex-wrap\">\n            @for (language of metadata.otherLanguages; track language) {\n              <p class=\"text-primary font-medium other-languages\" translate>\n                language.{{ language }}\n              </p>\n            }\n          </div>\n        </div>\n      }\n      @if (metadata.kind === 'dataset' && temporalExtent) {\n        <div data-test=\"details-panel-temporal-extent\">\n          <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n          <div\n            class=\"flex flex-row gap-1 mb-1 text-primary font-medium temporal-extent\"\n          >\n            @if (temporalExtent.start && temporalExtent.end) {\n              <p\n                translate\n                [translateParams]=\"{\n                  start: temporalExtent.start,\n                  end: temporalExtent.end,\n                }\"\n              >\n                record.metadata.temporalExtent.fromDateToDate\n              </p>\n            }\n            @if (temporalExtent.start && !temporalExtent.end) {\n              <p translate [translateParams]=\"{ start: temporalExtent.start }\">\n                record.metadata.temporalExtent.sinceDate\n              </p>\n            }\n            @if (!temporalExtent.start && temporalExtent.end) {\n              <p translate [translateParams]=\"{ end: temporalExtent.end }\">\n                record.metadata.temporalExtent.untilDate\n              </p>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </gn-ui-expandable-panel>\n}\n@if (\n  metadata.kind !== 'dataset' &&\n  metadata.spatialExtents &&\n  metadata.spatialExtents.length\n) {\n  <gn-ui-expandable-panel\n    [title]=\"'service.metadata.spatialExtent' | translate\"\n    data-test=\"spatial-extent-panel\"\n  >\n    <gn-ui-spatial-extent\n      class=\"flex h-[271px] w-full rounded-lg border border-gray-100 mt-3 mb-6\"\n      [spatialExtents]=\"metadata.spatialExtents\"\n    ></gn-ui-spatial-extent>\n  </gn-ui-expandable-panel>\n}\n@if (metadata.landingPage) {\n  <gn-ui-expandable-panel\n    [title]=\"'service.metadata.other' | translate\"\n    data-test=\"other-panel\"\n  >\n    <div class=\"flex flex-col gap-4 mr-4 py-5 rounded text-gray-700\">\n      @if (metadata.recordUpdated) {\n        <div>\n          <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n          <p\n            class=\"text-primary font-medium\"\n            [gnUiHumanizeDate]=\"metadata.recordUpdated\"\n          ></p>\n        </div>\n      }\n      @if (metadata.landingPage) {\n        <div>\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>{{\n                metadata.landingPage\n              }}</span>\n            </a>\n          </p>\n        </div>\n      }\n      @if (metadata.ownerOrganization) {\n        <div>\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      }\n      @if (metadata.uniqueIdentifier) {\n        <div>\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      }\n      @if (metadata.topics?.length) {\n        <div>\n          <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n          <div class=\"sm:pb-4 sm:pr-16\">\n            @for (topic of metadata.topics; track topic) {\n              <gn-ui-badge\n                [clickable]=\"false\"\n                class=\"inline-block mr-2 mb-2 lowercase\"\n                >{{ topic }}</gn-ui-badge\n              >\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </gn-ui-expandable-panel>\n}\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button ng-icon{transform:scale(.8)}:host{--gn-ui-badge-background-color: var(--color-primary-white);--gn-ui-badge-text-color: var(--color-primary-darkest)}:host .metadata-info-keywords ::ng-deep gn-ui-badge:hover{--gn-ui-badge-text-color: white}\n"], dependencies: [{ kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "iconColor", "collapsed"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: MaxLinesComponent, selector: "gn-ui-max-lines", inputs: ["maxLines"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "directive", type: GnUiHumanizeDateDirective, selector: "[gnUiHumanizeDate]", inputs: ["gnUiHumanizeDate"] }, { kind: "component", type: SpatialExtentComponent, selector: "gn-ui-spatial-extent", inputs: ["spatialExtents"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MetadataInfoComponent, isStandalone: true, selector: "gn-ui-metadata-info", inputs: { metadata: "metadata", incomplete: "incomplete" }, outputs: { keyword: "keyword" }, ngImport: i0, template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost\n    ghostClass=\"h-[178px]\"\n    [showContent]=\"fieldReady('abstract')\"\n  >\n    @if (metadata.abstract) {\n      <gn-ui-max-lines [maxLines]=\"6\" data-test=\"metadata-info-abstract\">\n        <div class=\"mb-6\">\n          <gn-ui-markdown-parser\n            [textContent]=\"metadata.abstract\"\n          ></gn-ui-markdown-parser>\n        </div>\n      </gn-ui-max-lines>\n    }\n  </gn-ui-content-ghost>\n\n  @if (!fieldReady('keywords') || metadata.keywords?.length) {\n    <p class=\"mt-6 mb-3 font-medium text-black text-sm\" translate>\n      record.metadata.keywords\n    </p>\n  }\n\n  <gn-ui-content-ghost\n    ghostClass=\"h-[31px] w-3/4\"\n    [showContent]=\"fieldReady('keywords')\"\n  >\n    @if (metadata.keywords?.length) {\n      <gn-ui-max-lines [maxLines]=\"7\">\n        <div class=\"metadata-info-keywords sm:pb-4 flex flex-wrap gap-2\">\n          @for (keyword of metadata.keywords; track keyword) {\n            <gn-ui-button\n              type=\"primary-light\"\n              class=\"inline-block opacity-70\"\n              extraClass=\"lowercase text-sm py-1 px-2\"\n              (buttonClick)=\"onKeywordClick(keyword)\"\n              >{{ keyword.label }}</gn-ui-button\n            >\n          }\n        </div>\n      </gn-ui-max-lines>\n    }\n  </gn-ui-content-ghost>\n</div>\n\n@if (\n  metadata.licenses ||\n  metadata.legalConstraints ||\n  metadata.securityConstraints ||\n  metadata.otherConstraints\n) {\n  <gn-ui-expandable-panel\n    [title]=\"'record.metadata.usage' | translate\"\n    data-test=\"usage-panel\"\n  >\n    <div class=\"flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900\">\n      @for (license of licenses; track license) {\n        @if (license.url) {\n          <div class=\"text-primary\">\n            <a\n              [href]=\"license.url\"\n              target=\"_blank\"\n              class=\"cursor-pointer hover:underline transition-all\"\n            >\n              {{ license.text }}\n              <ng-icon\n                class=\"!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n                name=\"matOpenInNew\"\n              ></ng-icon>\n            </a>\n          </div>\n        } @else {\n          <div class=\"text-primary\" gnUiLinkify>\n            {{ license.text }}\n          </div>\n        }\n      }\n      @if (legalConstraints.length) {\n        <div class=\"mb-6\">\n          @for (constraint of legalConstraints; track constraint) {\n            <gn-ui-markdown-parser [textContent]=\"constraint\">\n            </gn-ui-markdown-parser>\n          }\n        </div>\n      }\n      @if (otherConstraints.length) {\n        @for (constraint of otherConstraints; track constraint) {\n          <div gnUiLinkify>\n            <span\n              translate\n              class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\"\n            >\n              record.metadata.otherConstraints\n            </span>\n            <div class=\"mb-6\">\n              <gn-ui-markdown-parser [textContent]=\"constraint\">\n              </gn-ui-markdown-parser>\n            </div>\n          </div>\n        }\n      }\n      @if (!hasUsage) {\n        <span class=\"noUsage\">\n          {{ 'record.metadata.noUsage' | translate }}\n        </span>\n      }\n    </div>\n  </gn-ui-expandable-panel>\n}\n@if (metadata.contactsForResource?.length) {\n  <gn-ui-expandable-panel\n    [title]=\"'record.metadata.resource.contacts' | translate\"\n    data-test=\"contacts-panel\"\n  >\n    <div class=\"flex flex-col gap-1 pt-3 pb-4\">\n      @for (group of contactGroups; track group.role) {\n        <div class=\"flex flex-col gap-1 rounded bg-gray-50 py-4 px-2\">\n          <p class=\"text-xs font-normal text-black\">\n            {{ group.roleLabel | translate }}\n          </p>\n          <div class=\"grid gap-0.5 grid-cols-1 md:grid-cols-2\">\n            @for (contact of group.contacts; track contact.email) {\n              <gn-ui-contact-pill [contact]=\"contact\"></gn-ui-contact-pill>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </gn-ui-expandable-panel>\n}\n@if (\n  (metadata.kind === 'dataset' && metadata.lineage) ||\n  metadata.resourceCreated ||\n  metadata.resourcePublished ||\n  metadata.resourceUpdated ||\n  (metadata.kind === 'dataset' && metadata.updateFrequency) ||\n  metadata.otherLanguages?.length ||\n  (metadata.kind === 'dataset' && temporalExtent)\n) {\n  <gn-ui-expandable-panel\n    [title]=\"'record.metadata.details' | translate\"\n    data-test=\"details-panel\"\n  >\n    @if (metadata.kind === 'dataset' && metadata.lineage) {\n      <div\n        class=\"text-gray-900 flex flex-col mt-4 gap-2\"\n        data-test=\"details-panel-lineage\"\n      >\n        <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n          {{ metadata.lineage }}\n        </p>\n      </div>\n    }\n    <div\n      class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n    >\n      @if (metadata.resourceCreated) {\n        <div data-test=\"details-panel-resource-created\">\n          <p class=\"text-sm\" translate>record.metadata.creation</p>\n          <p\n            class=\"text-primary font-medium mt-1 resource-created\"\n            [gnUiHumanizeDate]=\"metadata.resourceCreated\"\n          ></p>\n        </div>\n      }\n      @if (metadata.resourcePublished) {\n        <div data-test=\"details-panel-resource-published\">\n          <p class=\"text-sm\" translate>record.metadata.publication</p>\n          <p\n            class=\"text-primary font-medium mt-1 resource-published\"\n            [gnUiHumanizeDate]=\"metadata.resourcePublished\"\n          ></p>\n        </div>\n      }\n      @if (metadata.resourceUpdated) {\n        <div data-test=\"details-panel-resource-updated\">\n          <p class=\"text-sm\" translate>record.metadata.update</p>\n          <p\n            class=\"text-primary font-medium mt-1 resource-updated\"\n            [gnUiHumanizeDate]=\"metadata.resourceUpdated\"\n          ></p>\n        </div>\n      }\n      @if (metadata.kind === 'dataset' && metadata.updateFrequency) {\n        <div data-test=\"details-panel-update-frequency\">\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      }\n      @if (metadata.otherLanguages?.length) {\n        <div data-test=\"details-panel-other-languages\">\n          <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n          <div class=\"flex flex-row gap-1 flex-wrap\">\n            @for (language of metadata.otherLanguages; track language) {\n              <p class=\"text-primary font-medium other-languages\" translate>\n                language.{{ language }}\n              </p>\n            }\n          </div>\n        </div>\n      }\n      @if (metadata.kind === 'dataset' && temporalExtent) {\n        <div data-test=\"details-panel-temporal-extent\">\n          <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n          <div\n            class=\"flex flex-row gap-1 mb-1 text-primary font-medium temporal-extent\"\n          >\n            @if (temporalExtent.start && temporalExtent.end) {\n              <p\n                translate\n                [translateParams]=\"{\n                  start: temporalExtent.start,\n                  end: temporalExtent.end,\n                }\"\n              >\n                record.metadata.temporalExtent.fromDateToDate\n              </p>\n            }\n            @if (temporalExtent.start && !temporalExtent.end) {\n              <p translate [translateParams]=\"{ start: temporalExtent.start }\">\n                record.metadata.temporalExtent.sinceDate\n              </p>\n            }\n            @if (!temporalExtent.start && temporalExtent.end) {\n              <p translate [translateParams]=\"{ end: temporalExtent.end }\">\n                record.metadata.temporalExtent.untilDate\n              </p>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </gn-ui-expandable-panel>\n}\n@if (\n  metadata.kind !== 'dataset' &&\n  metadata.spatialExtents &&\n  metadata.spatialExtents.length\n) {\n  <gn-ui-expandable-panel\n    [title]=\"'service.metadata.spatialExtent' | translate\"\n    data-test=\"spatial-extent-panel\"\n  >\n    <gn-ui-spatial-extent\n      class=\"flex h-[271px] w-full rounded-lg border border-gray-100 mt-3 mb-6\"\n      [spatialExtents]=\"metadata.spatialExtents\"\n    ></gn-ui-spatial-extent>\n  </gn-ui-expandable-panel>\n}\n@if (metadata.landingPage) {\n  <gn-ui-expandable-panel\n    [title]=\"'service.metadata.other' | translate\"\n    data-test=\"other-panel\"\n  >\n    <div class=\"flex flex-col gap-4 mr-4 py-5 rounded text-gray-700\">\n      @if (metadata.recordUpdated) {\n        <div>\n          <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n          <p\n            class=\"text-primary font-medium\"\n            [gnUiHumanizeDate]=\"metadata.recordUpdated\"\n          ></p>\n        </div>\n      }\n      @if (metadata.landingPage) {\n        <div>\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>{{\n                metadata.landingPage\n              }}</span>\n            </a>\n          </p>\n        </div>\n      }\n      @if (metadata.ownerOrganization) {\n        <div>\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      }\n      @if (metadata.uniqueIdentifier) {\n        <div>\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      }\n      @if (metadata.topics?.length) {\n        <div>\n          <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n          <div class=\"sm:pb-4 sm:pr-16\">\n            @for (topic of metadata.topics; track topic) {\n              <gn-ui-badge\n                [clickable]=\"false\"\n                class=\"inline-block mr-2 mb-2 lowercase\"\n                >{{ topic }}</gn-ui-badge\n              >\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </gn-ui-expandable-panel>\n}\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button ng-icon{transform:scale(.8)}:host{--gn-ui-badge-background-color: var(--color-primary-white);--gn-ui-badge-text-color: var(--color-primary-darkest)}\n"], dependencies: [{ kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "iconColor", "collapsed"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "component", type: MaxLinesComponent, selector: "gn-ui-max-lines", inputs: ["maxLines"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "directive", type: GnUiHumanizeDateDirective, selector: "[gnUiHumanizeDate]", inputs: ["gnUiHumanizeDate"] }, { kind: "component", type: SpatialExtentComponent, selector: "gn-ui-spatial-extent", inputs: ["spatialExtents"] }, { kind: "component", type: ContactPillComponent, selector: "gn-ui-contact-pill", inputs: ["contact"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], viewProviders: [
             provideIcons({
                 matOpenInNew,
                 matMailOutline: matMailOutline$1,
@@ -34259,21 +34353,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         TranslatePipe,
                         MarkdownParserComponent,
                         ExpandablePanelComponent,
+                        ButtonComponent,
                         BadgeComponent,
                         ContentGhostComponent,
-                        ThumbnailComponent,
                         MaxLinesComponent,
                         CopyTextButtonComponent,
                         NgIcon,
                         GnUiLinkifyDirective,
                         GnUiHumanizeDateDirective,
                         SpatialExtentComponent,
+                        ContactPillComponent,
                     ], viewProviders: [
                         provideIcons({
                             matOpenInNew,
                             matMailOutline: matMailOutline$1,
                         }),
-                    ], template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost\n    ghostClass=\"h-[178px]\"\n    [showContent]=\"fieldReady('abstract')\"\n  >\n    @if (metadata.abstract) {\n      <gn-ui-max-lines [maxLines]=\"6\" data-test=\"metadata-info-abstract\">\n        <div class=\"mb-6\">\n          <gn-ui-markdown-parser\n            [textContent]=\"metadata.abstract\"\n          ></gn-ui-markdown-parser>\n        </div>\n      </gn-ui-max-lines>\n    }\n  </gn-ui-content-ghost>\n\n  @if (!fieldReady('keywords') || metadata.keywords?.length) {\n    <p class=\"mt-6 mb-3 font-medium text-black text-sm\" translate>\n      record.metadata.keywords\n    </p>\n  }\n\n  <gn-ui-content-ghost\n    ghostClass=\"h-[31px] w-3/4\"\n    [showContent]=\"fieldReady('keywords')\"\n  >\n    @if (metadata.keywords?.length) {\n      <gn-ui-max-lines [maxLines]=\"7\">\n        <div class=\"metadata-info-keywords sm:pb-4 flex flex-wrap gap-2\">\n          @for (keyword of metadata.keywords; track keyword) {\n            <gn-ui-badge\n              class=\"inline-block lowercase\"\n              (click)=\"onKeywordClick(keyword)\"\n              [clickable]=\"true\"\n              >{{ keyword.label }}</gn-ui-badge\n            >\n          }\n        </div>\n      </gn-ui-max-lines>\n    }\n  </gn-ui-content-ghost>\n</div>\n\n@if (\n  metadata.licenses ||\n  metadata.legalConstraints ||\n  metadata.securityConstraints ||\n  metadata.otherConstraints\n) {\n  <gn-ui-expandable-panel\n    [title]=\"'record.metadata.usage' | translate\"\n    data-test=\"usage-panel\"\n  >\n    <div class=\"flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900\">\n      @for (license of licenses; track license) {\n        @if (license.url) {\n          <div class=\"text-primary\">\n            <a\n              [href]=\"license.url\"\n              target=\"_blank\"\n              class=\"cursor-pointer hover:underline transition-all\"\n            >\n              {{ license.text }}\n              <ng-icon\n                class=\"!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n                name=\"matOpenInNew\"\n              ></ng-icon>\n            </a>\n          </div>\n        } @else {\n          <div class=\"text-primary\" gnUiLinkify>\n            {{ license.text }}\n          </div>\n        }\n      }\n      @if (legalConstraints.length) {\n        <div class=\"mb-6\">\n          @for (constraint of legalConstraints; track constraint) {\n            <gn-ui-markdown-parser [textContent]=\"constraint\">\n            </gn-ui-markdown-parser>\n          }\n        </div>\n      }\n      @if (otherConstraints.length) {\n        @for (constraint of otherConstraints; track constraint) {\n          <div gnUiLinkify>\n            <span\n              translate\n              class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\"\n            >\n              record.metadata.otherConstraints\n            </span>\n            <div class=\"mb-6\">\n              <gn-ui-markdown-parser [textContent]=\"constraint\">\n              </gn-ui-markdown-parser>\n            </div>\n          </div>\n        }\n      }\n      @if (!hasUsage) {\n        <span class=\"noUsage\">\n          {{ 'record.metadata.noUsage' | translate }}\n        </span>\n      }\n    </div>\n  </gn-ui-expandable-panel>\n}\n@if (\n  (metadata.kind === 'dataset' && metadata.lineage) ||\n  resourceContact ||\n  metadata.resourceCreated ||\n  metadata.resourcePublished ||\n  metadata.resourceUpdated ||\n  (metadata.kind === 'dataset' && metadata.updateFrequency) ||\n  metadata.otherLanguages?.length ||\n  (metadata.kind === 'dataset' && temporalExtent)\n) {\n  <gn-ui-expandable-panel\n    [title]=\"'record.metadata.details' | translate\"\n    data-test=\"details-panel\"\n  >\n    @if (metadata.kind === 'dataset' && metadata.lineage) {\n      <div\n        class=\"text-gray-900 flex flex-col mt-4 gap-2\"\n        data-test=\"details-panel-lineage\"\n      >\n        <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n          {{ metadata.lineage }}\n        </p>\n      </div>\n    }\n    @if (resourceContact) {\n      <div\n        class=\"flex flex-row gap-6 mt-5 mb-8 resource-contact\"\n        data-test=\"details-panel-resource-contact\"\n      >\n        @if (resourceContact.organization?.logoUrl?.href) {\n          <div\n            class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n          >\n            <gn-ui-thumbnail\n              class=\"relative h-full w-full\"\n              [thumbnailUrl]=\"resourceContact.organization.logoUrl.href\"\n              fit=\"contain\"\n            ></gn-ui-thumbnail>\n          </div>\n        }\n        <div class=\"flex flex-col gap-1\">\n          <p class=\"text-sm font-medium\" translate>record.metadata.producer</p>\n          <div\n            class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n            data-cy=\"organization-name\"\n          >\n            {{ resourceContact.organization?.name }}\n          </div>\n          @if (resourceContact.organization?.website) {\n            <div>\n              <a\n                [href]=\"resourceContact.organization.website\"\n                target=\"_blank\"\n                class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n                >{{ resourceContact.organization.website }}\n                <ng-icon\n                  class=\"!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n                  name=\"matOpenInNew\"\n                ></ng-icon>\n              </a>\n            </div>\n          }\n          @if (resourceContact.email) {\n            <div class=\"mt-4\">\n              <div class=\"flex\">\n                <ng-icon\n                  class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n                  name=\"matMailOutline\"\n                ></ng-icon>\n                @if (resourceContact.email) {\n                  <a\n                    [href]=\"'mailto:' + resourceContact.email\"\n                    class=\"text-sm hover:underline ml-2\"\n                    target=\"_blank\"\n                    data-cy=\"contact-email\"\n                    >{{ resourceContact?.email }}</a\n                  >\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <div\n      class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n    >\n      @if (metadata.resourceCreated) {\n        <div data-test=\"details-panel-resource-created\">\n          <p class=\"text-sm\" translate>record.metadata.creation</p>\n          <p\n            class=\"text-primary font-medium mt-1 resource-created\"\n            [gnUiHumanizeDate]=\"metadata.resourceCreated\"\n          ></p>\n        </div>\n      }\n      @if (metadata.resourcePublished) {\n        <div data-test=\"details-panel-resource-published\">\n          <p class=\"text-sm\" translate>record.metadata.publication</p>\n          <p\n            class=\"text-primary font-medium mt-1 resource-published\"\n            [gnUiHumanizeDate]=\"metadata.resourcePublished\"\n          ></p>\n        </div>\n      }\n      @if (metadata.resourceUpdated) {\n        <div data-test=\"details-panel-resource-updated\">\n          <p class=\"text-sm\" translate>record.metadata.update</p>\n          <p\n            class=\"text-primary font-medium mt-1 resource-updated\"\n            [gnUiHumanizeDate]=\"metadata.resourceUpdated\"\n          ></p>\n        </div>\n      }\n      @if (metadata.kind === 'dataset' && metadata.updateFrequency) {\n        <div data-test=\"details-panel-update-frequency\">\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      }\n      @if (metadata.otherLanguages?.length) {\n        <div data-test=\"details-panel-other-languages\">\n          <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n          <div class=\"flex flex-row gap-1 flex-wrap\">\n            @for (language of metadata.otherLanguages; track language) {\n              <p class=\"text-primary font-medium other-languages\" translate>\n                language.{{ language }}\n              </p>\n            }\n          </div>\n        </div>\n      }\n      @if (metadata.kind === 'dataset' && temporalExtent) {\n        <div data-test=\"details-panel-temporal-extent\">\n          <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n          <div\n            class=\"flex flex-row gap-1 mb-1 text-primary font-medium temporal-extent\"\n          >\n            @if (temporalExtent.start && temporalExtent.end) {\n              <p\n                translate\n                [translateParams]=\"{\n                  start: temporalExtent.start,\n                  end: temporalExtent.end,\n                }\"\n              >\n                record.metadata.temporalExtent.fromDateToDate\n              </p>\n            }\n            @if (temporalExtent.start && !temporalExtent.end) {\n              <p translate [translateParams]=\"{ start: temporalExtent.start }\">\n                record.metadata.temporalExtent.sinceDate\n              </p>\n            }\n            @if (!temporalExtent.start && temporalExtent.end) {\n              <p translate [translateParams]=\"{ end: temporalExtent.end }\">\n                record.metadata.temporalExtent.untilDate\n              </p>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </gn-ui-expandable-panel>\n}\n@if (\n  metadata.kind !== 'dataset' &&\n  metadata.spatialExtents &&\n  metadata.spatialExtents.length\n) {\n  <gn-ui-expandable-panel\n    [title]=\"'service.metadata.spatialExtent' | translate\"\n    data-test=\"spatial-extent-panel\"\n  >\n    <gn-ui-spatial-extent\n      class=\"flex h-[271px] w-full rounded-lg border border-gray-100 mt-3 mb-6\"\n      [spatialExtents]=\"metadata.spatialExtents\"\n    ></gn-ui-spatial-extent>\n  </gn-ui-expandable-panel>\n}\n@if (metadata.landingPage) {\n  <gn-ui-expandable-panel\n    [title]=\"'service.metadata.other' | translate\"\n    data-test=\"other-panel\"\n  >\n    <div class=\"flex flex-col gap-4 mr-4 py-5 rounded text-gray-700\">\n      @if (metadata.recordUpdated) {\n        <div>\n          <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n          <p\n            class=\"text-primary font-medium\"\n            [gnUiHumanizeDate]=\"metadata.recordUpdated\"\n          ></p>\n        </div>\n      }\n      @if (metadata.landingPage) {\n        <div>\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>{{\n                metadata.landingPage\n              }}</span>\n            </a>\n          </p>\n        </div>\n      }\n      @if (metadata.ownerOrganization) {\n        <div>\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      }\n      @if (metadata.uniqueIdentifier) {\n        <div>\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      }\n      @if (metadata.topics?.length) {\n        <div>\n          <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n          <div class=\"sm:pb-4 sm:pr-16\">\n            @for (topic of metadata.topics; track topic) {\n              <gn-ui-badge\n                [clickable]=\"false\"\n                class=\"inline-block mr-2 mb-2 lowercase\"\n                >{{ topic }}</gn-ui-badge\n              >\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </gn-ui-expandable-panel>\n}\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button ng-icon{transform:scale(.8)}:host{--gn-ui-badge-background-color: var(--color-primary-white);--gn-ui-badge-text-color: var(--color-primary-darkest)}:host .metadata-info-keywords ::ng-deep gn-ui-badge:hover{--gn-ui-badge-text-color: white}\n"] }]
+                    ], template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost\n    ghostClass=\"h-[178px]\"\n    [showContent]=\"fieldReady('abstract')\"\n  >\n    @if (metadata.abstract) {\n      <gn-ui-max-lines [maxLines]=\"6\" data-test=\"metadata-info-abstract\">\n        <div class=\"mb-6\">\n          <gn-ui-markdown-parser\n            [textContent]=\"metadata.abstract\"\n          ></gn-ui-markdown-parser>\n        </div>\n      </gn-ui-max-lines>\n    }\n  </gn-ui-content-ghost>\n\n  @if (!fieldReady('keywords') || metadata.keywords?.length) {\n    <p class=\"mt-6 mb-3 font-medium text-black text-sm\" translate>\n      record.metadata.keywords\n    </p>\n  }\n\n  <gn-ui-content-ghost\n    ghostClass=\"h-[31px] w-3/4\"\n    [showContent]=\"fieldReady('keywords')\"\n  >\n    @if (metadata.keywords?.length) {\n      <gn-ui-max-lines [maxLines]=\"7\">\n        <div class=\"metadata-info-keywords sm:pb-4 flex flex-wrap gap-2\">\n          @for (keyword of metadata.keywords; track keyword) {\n            <gn-ui-button\n              type=\"primary-light\"\n              class=\"inline-block opacity-70\"\n              extraClass=\"lowercase text-sm py-1 px-2\"\n              (buttonClick)=\"onKeywordClick(keyword)\"\n              >{{ keyword.label }}</gn-ui-button\n            >\n          }\n        </div>\n      </gn-ui-max-lines>\n    }\n  </gn-ui-content-ghost>\n</div>\n\n@if (\n  metadata.licenses ||\n  metadata.legalConstraints ||\n  metadata.securityConstraints ||\n  metadata.otherConstraints\n) {\n  <gn-ui-expandable-panel\n    [title]=\"'record.metadata.usage' | translate\"\n    data-test=\"usage-panel\"\n  >\n    <div class=\"flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900\">\n      @for (license of licenses; track license) {\n        @if (license.url) {\n          <div class=\"text-primary\">\n            <a\n              [href]=\"license.url\"\n              target=\"_blank\"\n              class=\"cursor-pointer hover:underline transition-all\"\n            >\n              {{ license.text }}\n              <ng-icon\n                class=\"!w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n                name=\"matOpenInNew\"\n              ></ng-icon>\n            </a>\n          </div>\n        } @else {\n          <div class=\"text-primary\" gnUiLinkify>\n            {{ license.text }}\n          </div>\n        }\n      }\n      @if (legalConstraints.length) {\n        <div class=\"mb-6\">\n          @for (constraint of legalConstraints; track constraint) {\n            <gn-ui-markdown-parser [textContent]=\"constraint\">\n            </gn-ui-markdown-parser>\n          }\n        </div>\n      }\n      @if (otherConstraints.length) {\n        @for (constraint of otherConstraints; track constraint) {\n          <div gnUiLinkify>\n            <span\n              translate\n              class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\"\n            >\n              record.metadata.otherConstraints\n            </span>\n            <div class=\"mb-6\">\n              <gn-ui-markdown-parser [textContent]=\"constraint\">\n              </gn-ui-markdown-parser>\n            </div>\n          </div>\n        }\n      }\n      @if (!hasUsage) {\n        <span class=\"noUsage\">\n          {{ 'record.metadata.noUsage' | translate }}\n        </span>\n      }\n    </div>\n  </gn-ui-expandable-panel>\n}\n@if (metadata.contactsForResource?.length) {\n  <gn-ui-expandable-panel\n    [title]=\"'record.metadata.resource.contacts' | translate\"\n    data-test=\"contacts-panel\"\n  >\n    <div class=\"flex flex-col gap-1 pt-3 pb-4\">\n      @for (group of contactGroups; track group.role) {\n        <div class=\"flex flex-col gap-1 rounded bg-gray-50 py-4 px-2\">\n          <p class=\"text-xs font-normal text-black\">\n            {{ group.roleLabel | translate }}\n          </p>\n          <div class=\"grid gap-0.5 grid-cols-1 md:grid-cols-2\">\n            @for (contact of group.contacts; track contact.email) {\n              <gn-ui-contact-pill [contact]=\"contact\"></gn-ui-contact-pill>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </gn-ui-expandable-panel>\n}\n@if (\n  (metadata.kind === 'dataset' && metadata.lineage) ||\n  metadata.resourceCreated ||\n  metadata.resourcePublished ||\n  metadata.resourceUpdated ||\n  (metadata.kind === 'dataset' && metadata.updateFrequency) ||\n  metadata.otherLanguages?.length ||\n  (metadata.kind === 'dataset' && temporalExtent)\n) {\n  <gn-ui-expandable-panel\n    [title]=\"'record.metadata.details' | translate\"\n    data-test=\"details-panel\"\n  >\n    @if (metadata.kind === 'dataset' && metadata.lineage) {\n      <div\n        class=\"text-gray-900 flex flex-col mt-4 gap-2\"\n        data-test=\"details-panel-lineage\"\n      >\n        <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n          {{ metadata.lineage }}\n        </p>\n      </div>\n    }\n    <div\n      class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n    >\n      @if (metadata.resourceCreated) {\n        <div data-test=\"details-panel-resource-created\">\n          <p class=\"text-sm\" translate>record.metadata.creation</p>\n          <p\n            class=\"text-primary font-medium mt-1 resource-created\"\n            [gnUiHumanizeDate]=\"metadata.resourceCreated\"\n          ></p>\n        </div>\n      }\n      @if (metadata.resourcePublished) {\n        <div data-test=\"details-panel-resource-published\">\n          <p class=\"text-sm\" translate>record.metadata.publication</p>\n          <p\n            class=\"text-primary font-medium mt-1 resource-published\"\n            [gnUiHumanizeDate]=\"metadata.resourcePublished\"\n          ></p>\n        </div>\n      }\n      @if (metadata.resourceUpdated) {\n        <div data-test=\"details-panel-resource-updated\">\n          <p class=\"text-sm\" translate>record.metadata.update</p>\n          <p\n            class=\"text-primary font-medium mt-1 resource-updated\"\n            [gnUiHumanizeDate]=\"metadata.resourceUpdated\"\n          ></p>\n        </div>\n      }\n      @if (metadata.kind === 'dataset' && metadata.updateFrequency) {\n        <div data-test=\"details-panel-update-frequency\">\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      }\n      @if (metadata.otherLanguages?.length) {\n        <div data-test=\"details-panel-other-languages\">\n          <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n          <div class=\"flex flex-row gap-1 flex-wrap\">\n            @for (language of metadata.otherLanguages; track language) {\n              <p class=\"text-primary font-medium other-languages\" translate>\n                language.{{ language }}\n              </p>\n            }\n          </div>\n        </div>\n      }\n      @if (metadata.kind === 'dataset' && temporalExtent) {\n        <div data-test=\"details-panel-temporal-extent\">\n          <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n          <div\n            class=\"flex flex-row gap-1 mb-1 text-primary font-medium temporal-extent\"\n          >\n            @if (temporalExtent.start && temporalExtent.end) {\n              <p\n                translate\n                [translateParams]=\"{\n                  start: temporalExtent.start,\n                  end: temporalExtent.end,\n                }\"\n              >\n                record.metadata.temporalExtent.fromDateToDate\n              </p>\n            }\n            @if (temporalExtent.start && !temporalExtent.end) {\n              <p translate [translateParams]=\"{ start: temporalExtent.start }\">\n                record.metadata.temporalExtent.sinceDate\n              </p>\n            }\n            @if (!temporalExtent.start && temporalExtent.end) {\n              <p translate [translateParams]=\"{ end: temporalExtent.end }\">\n                record.metadata.temporalExtent.untilDate\n              </p>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </gn-ui-expandable-panel>\n}\n@if (\n  metadata.kind !== 'dataset' &&\n  metadata.spatialExtents &&\n  metadata.spatialExtents.length\n) {\n  <gn-ui-expandable-panel\n    [title]=\"'service.metadata.spatialExtent' | translate\"\n    data-test=\"spatial-extent-panel\"\n  >\n    <gn-ui-spatial-extent\n      class=\"flex h-[271px] w-full rounded-lg border border-gray-100 mt-3 mb-6\"\n      [spatialExtents]=\"metadata.spatialExtents\"\n    ></gn-ui-spatial-extent>\n  </gn-ui-expandable-panel>\n}\n@if (metadata.landingPage) {\n  <gn-ui-expandable-panel\n    [title]=\"'service.metadata.other' | translate\"\n    data-test=\"other-panel\"\n  >\n    <div class=\"flex flex-col gap-4 mr-4 py-5 rounded text-gray-700\">\n      @if (metadata.recordUpdated) {\n        <div>\n          <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n          <p\n            class=\"text-primary font-medium\"\n            [gnUiHumanizeDate]=\"metadata.recordUpdated\"\n          ></p>\n        </div>\n      }\n      @if (metadata.landingPage) {\n        <div>\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>{{\n                metadata.landingPage\n              }}</span>\n            </a>\n          </p>\n        </div>\n      }\n      @if (metadata.ownerOrganization) {\n        <div>\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      }\n      @if (metadata.uniqueIdentifier) {\n        <div>\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      }\n      @if (metadata.topics?.length) {\n        <div>\n          <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n          <div class=\"sm:pb-4 sm:pr-16\">\n            @for (topic of metadata.topics; track topic) {\n              <gn-ui-badge\n                [clickable]=\"false\"\n                class=\"inline-block mr-2 mb-2 lowercase\"\n                >{{ topic }}</gn-ui-badge\n              >\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </gn-ui-expandable-panel>\n}\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button ng-icon{transform:scale(.8)}:host{--gn-ui-badge-background-color: var(--color-primary-white);--gn-ui-badge-text-color: var(--color-primary-darkest)}\n"] }]
         }], propDecorators: { metadata: [{
                 type: Input
             }], incomplete: [{
@@ -34743,7 +34838,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 class InternalLinkCardComponent {
     constructor() {
         this.elementRef = inject(ElementRef);
-        this.linkTarget = '_blank';
         this.linkHref = null;
         this.mdSelect = new EventEmitter();
         this.subscription = new Subscription();
@@ -34771,7 +34865,7 @@ class InternalLinkCardComponent {
             cardWidth <= 490);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InternalLinkCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: InternalLinkCardComponent, isStandalone: true, selector: "gn-ui-internal-link-card", inputs: { record: "record", linkTarget: "linkTarget", linkHref: "linkHref", metadataQualityDisplay: "metadataQualityDisplay", favoriteTemplate: "favoriteTemplate", size: "size" }, outputs: { mdSelect: "mdSelect" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: InternalLinkCardComponent, isStandalone: true, selector: "gn-ui-internal-link-card", inputs: { record: "record", linkHref: "linkHref", metadataQualityDisplay: "metadataQualityDisplay", favoriteTemplate: "favoriteTemplate", size: "size" }, outputs: { mdSelect: "mdSelect" }, providers: [
             provideIcons({
                 iconoirBank,
                 matLocationSearchingOutline,
@@ -34779,7 +34873,7 @@ class InternalLinkCardComponent {
             provideNgIconsConfig({
                 size: '1.2em',
             }),
-        ], ngImport: i0, template: "<a\n  [attr.href]=\"linkHref\"\n  [target]=\"linkTarget\"\n  class=\"record-card\"\n  [ngClass]=\"cardClass\"\n>\n  @if (shouldShowThumbnail) {\n    <div class=\"record-card__thumbnail\">\n      <gn-ui-thumbnail\n        class=\"w-full h-full object-cover\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url?.toString() || ''\"\n        [fit]=\"'cover'\"\n      ></gn-ui-thumbnail>\n    </div>\n  }\n  <div class=\"grow pt-1\" [ngClass]=\"shouldShowThumbnail ? 'sm:w-0' : ''\">\n    <div class=\"flex flex-col gap-2\" [class.h-full]=\"size !== 'M'\">\n      <h4\n        class=\"record-card__title\"\n        data-cy=\"recordTitle\"\n        [title]=\"record.title\"\n      >\n        {{ record.title }}\n      </h4>\n      <!-- force max width here as long a-href urls within the markdown parser can cause layout issues -->\n      <div class=\"grow max-w-[248px] sm:max-w-full\">\n        <gn-ui-markdown-parser\n          data-cy=\"recordAbstract\"\n          [textContent]=\"abstract\"\n          [whitoutStyles]=\"true\"\n          class=\"record-card__abstract\"\n          [title]=\"abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n      @if (size !== 'M') {\n        <ng-container [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n      }\n    </div>\n  </div>\n  @if (size === 'M') {\n    <ng-container [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n  }\n</a>\n\n<ng-template #footerTpl>\n  <div class=\"record-card__footer\">\n    @if (record.ownerOrganization?.name) {\n      <div\n        data-cy=\"recordOrg\"\n        class=\"grow flex flex-row gap-1 items-center text-primary-lighter\"\n        [ngClass]=\"displayContactIconOnly ? 'justify-center' : ''\"\n      >\n        <ng-icon\n          name=\"iconoirBank\"\n          class=\"text-primary -translate-y-[0.5px] shrink-0\"\n          [title]=\"record.ownerOrganization.name\"\n        ></ng-icon>\n        @if (!displayContactIconOnly) {\n          <span\n            data-cy=\"recordOrgName\"\n            class=\"line-clamp-1\"\n            [title]=\"record.ownerOrganization.name\"\n            >{{ record.ownerOrganization.name }}</span\n          >\n        }\n      </div>\n    }\n    <div class=\"record-card__footer__other\">\n      <div class=\"xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0\">\n        <gn-ui-kind-badge\n          [extraClass]=\"'text-[1.2em]'\"\n          [styling]=\"'gray'\"\n          [kind]=\"record?.kind\"\n          [contentTemplate]=\"customTemplate\"\n          class=\"pt-1\"\n        >\n          <ng-template #customTemplate></ng-template\n        ></gn-ui-kind-badge>\n        @if (metadataQualityDisplay) {\n          <gn-ui-metadata-quality\n            class=\"flex items-center min-w-[113px]\"\n            [smaller]=\"true\"\n            [metadata]=\"record\"\n            [metadataQualityDisplay]=\"metadataQualityDisplay\"\n            [popoverDisplay]=\"true\"\n          ></gn-ui-metadata-quality>\n        }\n      </div>\n      <div\n        class=\"flex justify-center\"\n        data-cy=\"recordFav\"\n        [ngClass]=\"displayContactIconOnly ? 'px-1' : 'px-4'\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"favoriteTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: record }\"\n        ></ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".record-card{@apply rounded-md bg-white hover:cursor-pointer hover:bg-slate-50 overflow-hidden items-stretch flex flex-row md:gap-0 justify-between py-3 pl-3 pr-5;}.record-card.size-L{@apply w-full md:h-[208px] gap-5;}.record-card.size-M{@apply max-w-[940px] gap-4 flex-wrap;}.record-card.size-S{@apply max-w-[572px] md:h-[315px] gap-4;}.record-card.size-XS{@apply max-w-[280px] md:h-[315px] gap-4;}.record-card:hover .record-card__title{@apply text-primary;}.record-card__thumbnail{@apply border rounded-lg overflow-hidden shrink-0;}.size-L .record-card__thumbnail{@apply w-[184px] h-[184px];}.size-M .record-card__thumbnail{@apply w-[138px] h-[138px];}.record-card__title{@apply text-xl font-medium text-title leading-6;}.size-L .record-card__title,.size-M .record-card__title{@apply line-clamp-2;}.size-S .record-card__title,.size-XS .record-card__title{@apply line-clamp-3 ml-2;}.record-card__abstract{@apply text-gray-900 overflow-hidden;}.size-L .record-card__abstract,.size-M .record-card__abstract{@apply line-clamp-3;}.size-S .record-card__abstract,.size-XS .record-card__abstract{@apply line-clamp-4 ml-2;}.record-card__footer{@apply flex sm:flex-row flex-col flex-nowrap gap-3 justify-end items-center w-full border-t pt-1 overflow-hidden;}@media (max-width: 450px){.size-S .record-card__footer{@apply flex-col items-stretch;}}.size-XS .record-card__footer{@apply flex-col items-stretch gap-2;}.record-card__footer__other{@apply flex flex-col xs:flex-row flex-nowrap gap-3 xs:border-l first:border-l-0;}.record-card__footer__other>div{@apply py-1;}@media (max-width: 450px){.size-S .record-card__footer__other,.size-S .record-card__footer__other>div{@apply border-0 px-0 py-0;}}.size-XS .record-card__footer__other,.size-XS .record-card__footer__other>div{@apply border-0;}.size-XS .record-card__footer__other>div{@apply px-0 py-0;}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: MetadataQualityComponent, selector: "gn-ui-metadata-quality", inputs: ["metadata", "smaller", "metadataQualityDisplay", "popoverDisplay", "propsToValidate", "forceComputeScore"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KindBadgeComponent, selector: "gn-ui-kind-badge", inputs: ["styling", "contentTemplate", "kind", "extraClass"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }] }); }
+        ], ngImport: i0, template: "<a\n  [attr.href]=\"linkHref\"\n  target=\"_self\"\n  class=\"record-card\"\n  [ngClass]=\"cardClass\"\n>\n  @if (shouldShowThumbnail) {\n    <div class=\"record-card__thumbnail\">\n      <gn-ui-thumbnail\n        class=\"w-full h-full object-cover\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url?.toString() || ''\"\n        [fit]=\"'cover'\"\n      ></gn-ui-thumbnail>\n    </div>\n  }\n  <div class=\"grow pt-1\" [ngClass]=\"shouldShowThumbnail ? 'sm:w-0' : ''\">\n    <div class=\"flex flex-col gap-2\" [class.h-full]=\"size !== 'M'\">\n      <h4\n        class=\"record-card__title\"\n        data-cy=\"recordTitle\"\n        [title]=\"record.title\"\n      >\n        {{ record.title }}\n      </h4>\n      <!-- force max width here as long a-href urls within the markdown parser can cause layout issues -->\n      <div class=\"grow max-w-[248px] sm:max-w-full\">\n        <gn-ui-markdown-parser\n          data-cy=\"recordAbstract\"\n          [textContent]=\"abstract\"\n          [whitoutStyles]=\"true\"\n          class=\"record-card__abstract\"\n          [title]=\"abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n      @if (size !== 'M') {\n        <ng-container [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n      }\n    </div>\n  </div>\n  @if (size === 'M') {\n    <ng-container [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n  }\n</a>\n\n<ng-template #footerTpl>\n  <div class=\"record-card__footer\">\n    @if (record.ownerOrganization?.name) {\n      <div\n        data-cy=\"recordOrg\"\n        class=\"grow flex flex-row gap-1 items-center text-primary-lighter\"\n        [ngClass]=\"displayContactIconOnly ? 'justify-center' : ''\"\n      >\n        <ng-icon\n          name=\"iconoirBank\"\n          class=\"text-primary -translate-y-[0.5px] shrink-0\"\n          [title]=\"record.ownerOrganization.name\"\n        ></ng-icon>\n        @if (!displayContactIconOnly) {\n          <span\n            data-cy=\"recordOrgName\"\n            class=\"line-clamp-1\"\n            [title]=\"record.ownerOrganization.name\"\n            >{{ record.ownerOrganization.name }}</span\n          >\n        }\n      </div>\n    }\n    <div class=\"record-card__footer__other\">\n      <div class=\"xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0\">\n        <gn-ui-kind-badge\n          [extraClass]=\"'text-[1.2em]'\"\n          [styling]=\"'gray'\"\n          [kind]=\"record?.kind\"\n          [contentTemplate]=\"customTemplate\"\n          class=\"pt-1\"\n        >\n          <ng-template #customTemplate></ng-template\n        ></gn-ui-kind-badge>\n        @if (metadataQualityDisplay) {\n          <gn-ui-metadata-quality\n            class=\"flex items-center min-w-[113px]\"\n            [smaller]=\"true\"\n            [metadata]=\"record\"\n            [metadataQualityDisplay]=\"metadataQualityDisplay\"\n            [popoverDisplay]=\"true\"\n          ></gn-ui-metadata-quality>\n        }\n      </div>\n      <div\n        class=\"flex justify-center\"\n        data-cy=\"recordFav\"\n        [ngClass]=\"displayContactIconOnly ? 'px-1' : 'px-4'\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"favoriteTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: record }\"\n        ></ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".record-card{@apply rounded-md bg-white hover:cursor-pointer hover:bg-slate-50 overflow-hidden items-stretch flex flex-row md:gap-0 justify-between py-3 pl-3 pr-5;}.record-card.size-L{@apply w-full md:h-[208px] gap-5;}.record-card.size-M{@apply max-w-[940px] gap-4 flex-wrap;}.record-card.size-S{@apply max-w-[572px] md:h-[315px] gap-4;}.record-card.size-XS{@apply max-w-[280px] md:h-[315px] gap-4;}.record-card:hover .record-card__title{@apply text-primary;}.record-card__thumbnail{@apply border rounded-lg overflow-hidden shrink-0;}.size-L .record-card__thumbnail{@apply w-[184px] h-[184px];}.size-M .record-card__thumbnail{@apply w-[138px] h-[138px];}.record-card__title{@apply text-xl font-medium text-title leading-6;}.size-L .record-card__title,.size-M .record-card__title{@apply line-clamp-2;}.size-S .record-card__title,.size-XS .record-card__title{@apply line-clamp-3 ml-2;}.record-card__abstract{@apply text-gray-900 overflow-hidden;}.size-L .record-card__abstract,.size-M .record-card__abstract{@apply line-clamp-3;}.size-S .record-card__abstract,.size-XS .record-card__abstract{@apply line-clamp-4 ml-2;}.record-card__footer{@apply flex sm:flex-row flex-col flex-nowrap gap-3 justify-end items-center w-full border-t pt-1 overflow-hidden;}@media (max-width: 450px){.size-S .record-card__footer{@apply flex-col items-stretch;}}.size-XS .record-card__footer{@apply flex-col items-stretch gap-2;}.record-card__footer__other{@apply flex flex-col xs:flex-row flex-nowrap gap-3 xs:border-l first:border-l-0;}.record-card__footer__other>div{@apply py-1;}@media (max-width: 450px){.size-S .record-card__footer__other,.size-S .record-card__footer__other>div{@apply border-0 px-0 py-0;}}.size-XS .record-card__footer__other,.size-XS .record-card__footer__other>div{@apply border-0;}.size-XS .record-card__footer__other>div{@apply px-0 py-0;}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: MetadataQualityComponent, selector: "gn-ui-metadata-quality", inputs: ["metadata", "smaller", "metadataQualityDisplay", "popoverDisplay", "propsToValidate", "forceComputeScore"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KindBadgeComponent, selector: "gn-ui-kind-badge", inputs: ["styling", "contentTemplate", "kind", "extraClass"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InternalLinkCardComponent, decorators: [{
             type: Component,
@@ -34799,11 +34893,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         provideNgIconsConfig({
                             size: '1.2em',
                         }),
-                    ], template: "<a\n  [attr.href]=\"linkHref\"\n  [target]=\"linkTarget\"\n  class=\"record-card\"\n  [ngClass]=\"cardClass\"\n>\n  @if (shouldShowThumbnail) {\n    <div class=\"record-card__thumbnail\">\n      <gn-ui-thumbnail\n        class=\"w-full h-full object-cover\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url?.toString() || ''\"\n        [fit]=\"'cover'\"\n      ></gn-ui-thumbnail>\n    </div>\n  }\n  <div class=\"grow pt-1\" [ngClass]=\"shouldShowThumbnail ? 'sm:w-0' : ''\">\n    <div class=\"flex flex-col gap-2\" [class.h-full]=\"size !== 'M'\">\n      <h4\n        class=\"record-card__title\"\n        data-cy=\"recordTitle\"\n        [title]=\"record.title\"\n      >\n        {{ record.title }}\n      </h4>\n      <!-- force max width here as long a-href urls within the markdown parser can cause layout issues -->\n      <div class=\"grow max-w-[248px] sm:max-w-full\">\n        <gn-ui-markdown-parser\n          data-cy=\"recordAbstract\"\n          [textContent]=\"abstract\"\n          [whitoutStyles]=\"true\"\n          class=\"record-card__abstract\"\n          [title]=\"abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n      @if (size !== 'M') {\n        <ng-container [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n      }\n    </div>\n  </div>\n  @if (size === 'M') {\n    <ng-container [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n  }\n</a>\n\n<ng-template #footerTpl>\n  <div class=\"record-card__footer\">\n    @if (record.ownerOrganization?.name) {\n      <div\n        data-cy=\"recordOrg\"\n        class=\"grow flex flex-row gap-1 items-center text-primary-lighter\"\n        [ngClass]=\"displayContactIconOnly ? 'justify-center' : ''\"\n      >\n        <ng-icon\n          name=\"iconoirBank\"\n          class=\"text-primary -translate-y-[0.5px] shrink-0\"\n          [title]=\"record.ownerOrganization.name\"\n        ></ng-icon>\n        @if (!displayContactIconOnly) {\n          <span\n            data-cy=\"recordOrgName\"\n            class=\"line-clamp-1\"\n            [title]=\"record.ownerOrganization.name\"\n            >{{ record.ownerOrganization.name }}</span\n          >\n        }\n      </div>\n    }\n    <div class=\"record-card__footer__other\">\n      <div class=\"xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0\">\n        <gn-ui-kind-badge\n          [extraClass]=\"'text-[1.2em]'\"\n          [styling]=\"'gray'\"\n          [kind]=\"record?.kind\"\n          [contentTemplate]=\"customTemplate\"\n          class=\"pt-1\"\n        >\n          <ng-template #customTemplate></ng-template\n        ></gn-ui-kind-badge>\n        @if (metadataQualityDisplay) {\n          <gn-ui-metadata-quality\n            class=\"flex items-center min-w-[113px]\"\n            [smaller]=\"true\"\n            [metadata]=\"record\"\n            [metadataQualityDisplay]=\"metadataQualityDisplay\"\n            [popoverDisplay]=\"true\"\n          ></gn-ui-metadata-quality>\n        }\n      </div>\n      <div\n        class=\"flex justify-center\"\n        data-cy=\"recordFav\"\n        [ngClass]=\"displayContactIconOnly ? 'px-1' : 'px-4'\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"favoriteTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: record }\"\n        ></ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".record-card{@apply rounded-md bg-white hover:cursor-pointer hover:bg-slate-50 overflow-hidden items-stretch flex flex-row md:gap-0 justify-between py-3 pl-3 pr-5;}.record-card.size-L{@apply w-full md:h-[208px] gap-5;}.record-card.size-M{@apply max-w-[940px] gap-4 flex-wrap;}.record-card.size-S{@apply max-w-[572px] md:h-[315px] gap-4;}.record-card.size-XS{@apply max-w-[280px] md:h-[315px] gap-4;}.record-card:hover .record-card__title{@apply text-primary;}.record-card__thumbnail{@apply border rounded-lg overflow-hidden shrink-0;}.size-L .record-card__thumbnail{@apply w-[184px] h-[184px];}.size-M .record-card__thumbnail{@apply w-[138px] h-[138px];}.record-card__title{@apply text-xl font-medium text-title leading-6;}.size-L .record-card__title,.size-M .record-card__title{@apply line-clamp-2;}.size-S .record-card__title,.size-XS .record-card__title{@apply line-clamp-3 ml-2;}.record-card__abstract{@apply text-gray-900 overflow-hidden;}.size-L .record-card__abstract,.size-M .record-card__abstract{@apply line-clamp-3;}.size-S .record-card__abstract,.size-XS .record-card__abstract{@apply line-clamp-4 ml-2;}.record-card__footer{@apply flex sm:flex-row flex-col flex-nowrap gap-3 justify-end items-center w-full border-t pt-1 overflow-hidden;}@media (max-width: 450px){.size-S .record-card__footer{@apply flex-col items-stretch;}}.size-XS .record-card__footer{@apply flex-col items-stretch gap-2;}.record-card__footer__other{@apply flex flex-col xs:flex-row flex-nowrap gap-3 xs:border-l first:border-l-0;}.record-card__footer__other>div{@apply py-1;}@media (max-width: 450px){.size-S .record-card__footer__other,.size-S .record-card__footer__other>div{@apply border-0 px-0 py-0;}}.size-XS .record-card__footer__other,.size-XS .record-card__footer__other>div{@apply border-0;}.size-XS .record-card__footer__other>div{@apply px-0 py-0;}\n"] }]
+                    ], template: "<a\n  [attr.href]=\"linkHref\"\n  target=\"_self\"\n  class=\"record-card\"\n  [ngClass]=\"cardClass\"\n>\n  @if (shouldShowThumbnail) {\n    <div class=\"record-card__thumbnail\">\n      <gn-ui-thumbnail\n        class=\"w-full h-full object-cover\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url?.toString() || ''\"\n        [fit]=\"'cover'\"\n      ></gn-ui-thumbnail>\n    </div>\n  }\n  <div class=\"grow pt-1\" [ngClass]=\"shouldShowThumbnail ? 'sm:w-0' : ''\">\n    <div class=\"flex flex-col gap-2\" [class.h-full]=\"size !== 'M'\">\n      <h4\n        class=\"record-card__title\"\n        data-cy=\"recordTitle\"\n        [title]=\"record.title\"\n      >\n        {{ record.title }}\n      </h4>\n      <!-- force max width here as long a-href urls within the markdown parser can cause layout issues -->\n      <div class=\"grow max-w-[248px] sm:max-w-full\">\n        <gn-ui-markdown-parser\n          data-cy=\"recordAbstract\"\n          [textContent]=\"abstract\"\n          [whitoutStyles]=\"true\"\n          class=\"record-card__abstract\"\n          [title]=\"abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n      @if (size !== 'M') {\n        <ng-container [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n      }\n    </div>\n  </div>\n  @if (size === 'M') {\n    <ng-container [ngTemplateOutlet]=\"footerTpl\"></ng-container>\n  }\n</a>\n\n<ng-template #footerTpl>\n  <div class=\"record-card__footer\">\n    @if (record.ownerOrganization?.name) {\n      <div\n        data-cy=\"recordOrg\"\n        class=\"grow flex flex-row gap-1 items-center text-primary-lighter\"\n        [ngClass]=\"displayContactIconOnly ? 'justify-center' : ''\"\n      >\n        <ng-icon\n          name=\"iconoirBank\"\n          class=\"text-primary -translate-y-[0.5px] shrink-0\"\n          [title]=\"record.ownerOrganization.name\"\n        ></ng-icon>\n        @if (!displayContactIconOnly) {\n          <span\n            data-cy=\"recordOrgName\"\n            class=\"line-clamp-1\"\n            [title]=\"record.ownerOrganization.name\"\n            >{{ record.ownerOrganization.name }}</span\n          >\n        }\n      </div>\n    }\n    <div class=\"record-card__footer__other\">\n      <div class=\"xs:border-r last:border-r-0 flex grow gap-4 px-4 last:pr-0\">\n        <gn-ui-kind-badge\n          [extraClass]=\"'text-[1.2em]'\"\n          [styling]=\"'gray'\"\n          [kind]=\"record?.kind\"\n          [contentTemplate]=\"customTemplate\"\n          class=\"pt-1\"\n        >\n          <ng-template #customTemplate></ng-template\n        ></gn-ui-kind-badge>\n        @if (metadataQualityDisplay) {\n          <gn-ui-metadata-quality\n            class=\"flex items-center min-w-[113px]\"\n            [smaller]=\"true\"\n            [metadata]=\"record\"\n            [metadataQualityDisplay]=\"metadataQualityDisplay\"\n            [popoverDisplay]=\"true\"\n          ></gn-ui-metadata-quality>\n        }\n      </div>\n      <div\n        class=\"flex justify-center\"\n        data-cy=\"recordFav\"\n        [ngClass]=\"displayContactIconOnly ? 'px-1' : 'px-4'\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"favoriteTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: record }\"\n        ></ng-container>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".record-card{@apply rounded-md bg-white hover:cursor-pointer hover:bg-slate-50 overflow-hidden items-stretch flex flex-row md:gap-0 justify-between py-3 pl-3 pr-5;}.record-card.size-L{@apply w-full md:h-[208px] gap-5;}.record-card.size-M{@apply max-w-[940px] gap-4 flex-wrap;}.record-card.size-S{@apply max-w-[572px] md:h-[315px] gap-4;}.record-card.size-XS{@apply max-w-[280px] md:h-[315px] gap-4;}.record-card:hover .record-card__title{@apply text-primary;}.record-card__thumbnail{@apply border rounded-lg overflow-hidden shrink-0;}.size-L .record-card__thumbnail{@apply w-[184px] h-[184px];}.size-M .record-card__thumbnail{@apply w-[138px] h-[138px];}.record-card__title{@apply text-xl font-medium text-title leading-6;}.size-L .record-card__title,.size-M .record-card__title{@apply line-clamp-2;}.size-S .record-card__title,.size-XS .record-card__title{@apply line-clamp-3 ml-2;}.record-card__abstract{@apply text-gray-900 overflow-hidden;}.size-L .record-card__abstract,.size-M .record-card__abstract{@apply line-clamp-3;}.size-S .record-card__abstract,.size-XS .record-card__abstract{@apply line-clamp-4 ml-2;}.record-card__footer{@apply flex sm:flex-row flex-col flex-nowrap gap-3 justify-end items-center w-full border-t pt-1 overflow-hidden;}@media (max-width: 450px){.size-S .record-card__footer{@apply flex-col items-stretch;}}.size-XS .record-card__footer{@apply flex-col items-stretch gap-2;}.record-card__footer__other{@apply flex flex-col xs:flex-row flex-nowrap gap-3 xs:border-l first:border-l-0;}.record-card__footer__other>div{@apply py-1;}@media (max-width: 450px){.size-S .record-card__footer__other,.size-S .record-card__footer__other>div{@apply border-0 px-0 py-0;}}.size-XS .record-card__footer__other,.size-XS .record-card__footer__other>div{@apply border-0;}.size-XS .record-card__footer__other>div{@apply px-0 py-0;}\n"] }]
         }], propDecorators: { record: [{
                 type: Input
-            }], linkTarget: [{
-                type: Input
             }], linkHref: [{
                 type: Input
             }], metadataQualityDisplay: [{
@@ -35407,11 +35499,11 @@ class RecordPreviewRowComponent extends RecordPreviewComponent {
             this.size = 'L';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RecordPreviewRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: RecordPreviewRowComponent, isStandalone: true, selector: "gn-ui-record-preview-row", host: { listeners: { "window:resize": "onResize()" } }, usesInheritance: true, ngImport: i0, template: "<gn-ui-internal-link-card\n  [linkHref]=\"linkHref\"\n  [linkTarget]=\"linkTarget\"\n  [record]=\"record\"\n  [favoriteTemplate]=\"favoriteTemplate\"\n  [metadataQualityDisplay]=\"metadataQualityDisplay\"\n  (mdSelect)=\"mdSelect.emit($event)\"\n  [size]=\"size\"\n>\n</gn-ui-internal-link-card>\n", styles: [".limit-organisation-with-quality{max-width:calc(100% - 170px)}\n"], dependencies: [{ kind: "component", type: InternalLinkCardComponent, selector: "gn-ui-internal-link-card", inputs: ["record", "linkTarget", "linkHref", "metadataQualityDisplay", "favoriteTemplate", "size"], outputs: ["mdSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: RecordPreviewRowComponent, isStandalone: true, selector: "gn-ui-record-preview-row", host: { listeners: { "window:resize": "onResize()" } }, usesInheritance: true, ngImport: i0, template: "<gn-ui-internal-link-card\n  [linkHref]=\"linkHref\"\n  [record]=\"record\"\n  [favoriteTemplate]=\"favoriteTemplate\"\n  [metadataQualityDisplay]=\"metadataQualityDisplay\"\n  (mdSelect)=\"mdSelect.emit($event)\"\n  [size]=\"size\"\n>\n</gn-ui-internal-link-card>\n", styles: [".limit-organisation-with-quality{max-width:calc(100% - 170px)}\n"], dependencies: [{ kind: "component", type: InternalLinkCardComponent, selector: "gn-ui-internal-link-card", inputs: ["record", "linkHref", "metadataQualityDisplay", "favoriteTemplate", "size"], outputs: ["mdSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RecordPreviewRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-record-preview-row', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [InternalLinkCardComponent], template: "<gn-ui-internal-link-card\n  [linkHref]=\"linkHref\"\n  [linkTarget]=\"linkTarget\"\n  [record]=\"record\"\n  [favoriteTemplate]=\"favoriteTemplate\"\n  [metadataQualityDisplay]=\"metadataQualityDisplay\"\n  (mdSelect)=\"mdSelect.emit($event)\"\n  [size]=\"size\"\n>\n</gn-ui-internal-link-card>\n", styles: [".limit-organisation-with-quality{max-width:calc(100% - 170px)}\n"] }]
+            args: [{ selector: 'gn-ui-record-preview-row', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [InternalLinkCardComponent], template: "<gn-ui-internal-link-card\n  [linkHref]=\"linkHref\"\n  [record]=\"record\"\n  [favoriteTemplate]=\"favoriteTemplate\"\n  [metadataQualityDisplay]=\"metadataQualityDisplay\"\n  (mdSelect)=\"mdSelect.emit($event)\"\n  [size]=\"size\"\n>\n</gn-ui-internal-link-card>\n", styles: [".limit-organisation-with-quality{max-width:calc(100% - 170px)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -41210,6 +41302,7 @@ const hasRecordChangedSinceDraft = createAction('[Editor] Has Record Changed Sin
 const hasRecordChangedSinceDraftSuccess = createAction('[Editor] Has Record Changed Since Draft Success', props());
 const isPublished = createAction('[Editor] Record Saved But Not Published', props());
 const canEditRecord = createAction('[Editor] User can edit record', props());
+const setFocusedField = createAction('[Editor] Set focused field', props());
 
 /**
  * This file contains the configuration of the fields that will be displayed in the editor.
@@ -41711,6 +41804,7 @@ class EditorFacade {
         this.hasRecordChanged$ = this.store.pipe(select(selectHasRecordChanged));
         this.isPublished$ = this.store.pipe(select(selectIsPublished));
         this.canEditRecord$ = this.store.pipe(select(selectCanEditRecord));
+        this.focusedField$ = this.actions$.pipe(ofType(setFocusedField), map$2(({ model }) => model));
     }
     openRecord(record, recordSource) {
         this.store.dispatch(openRecord({
@@ -41737,6 +41831,9 @@ class EditorFacade {
     setCurrentPage(page) {
         this.store.dispatch(setCurrentPage({ page }));
     }
+    setFocusedField(model) {
+        this.store.dispatch(setFocusedField({ model }));
+    }
     setFieldVisibility(field, visible) {
         this.store.dispatch(setFieldVisibility({ field, visible }));
     }
@@ -41858,37 +41955,34 @@ marker('editor.record.form.field.contacts');
 marker('editor.record.form.field.organisation');
 class MetadataQualityPanelComponent {
     constructor() {
+        this.facade = inject(EditorFacade);
         this.propsToValidate = getAllKeysValidator();
-        this.propertiesByPage = [];
-    }
-    ngOnChanges() {
-        if (this.editorConfig && this.record) {
-            const fieldsByPage = this.editorConfig.pages.map((page) => page.sections.flatMap((section) => section.fields
-                .filter((field) => this.propsToValidate.includes(field.model))
-                .map((field) => field.model)));
-            // FIXME: temporarily add topics and organisation to the first and third page
-            // as long as they are not handled by the editor
-            if (fieldsByPage.length > 0) {
-                fieldsByPage[0].includes('topics') || fieldsByPage[0].push('topics');
-                fieldsByPage[2].includes('organisation') ||
-                    fieldsByPage[2].push('organisation');
-            }
-            this.propertiesByPage = fieldsByPage
-                .map((fields) => getQualityValidators(this.record, fields).map(({ name, validator }) => ({
-                label: `editor.record.form.field.${name}`, // use same translations as in fields.config.ts
+        this.propertiesByPage$ = combineLatest([
+            this.facade.editorConfig$,
+            this.facade.record$,
+        ]).pipe(map$2(([editorConfig, record]) => {
+            if (!editorConfig || !record)
+                return [];
+            const validators = getQualityValidators(record, this.propsToValidate);
+            return editorConfig.pages
+                .map((page) => page.sections
+                .flatMap((section) => section.fields)
+                .flatMap(({ model }) => validators.filter((v) => (v.alias ?? v.name) === model))
+                .map(({ name, validator, alias }) => ({
+                label: `editor.record.form.field.${name}`,
                 value: validator(),
+                model: (alias ?? name),
             })))
                 .filter((arr) => arr.length > 0);
-        }
+        }));
     }
-    getExtraClass(checked) {
-        const baseClasses = 'flex flex-row justify-between rounded mb-1 h-[34px] w-full focus:ring-0 hover:border-none border-none hover:text-black text-black cursor-default';
-        return checked
-            ? `${baseClasses} bg-neutral-100 hover:bg-neutral-100`
-            : `${baseClasses} bg-transparent hover:bg-transparent`;
+    onCriterionClick(property) {
+        if (!property.value) {
+            this.facade.setFocusedField(property.model);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MetadataQualityPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MetadataQualityPanelComponent, isStandalone: true, selector: "gn-ui-metadata-quality-panel", inputs: { editorConfig: "editorConfig", record: "record" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: MetadataQualityPanelComponent, isStandalone: true, selector: "gn-ui-metadata-quality-panel", providers: [
             provideIcons({
                 iconoirSystemShut,
                 iconoirBadgeCheck,
@@ -41896,7 +41990,7 @@ class MetadataQualityPanelComponent {
             provideNgIconsConfig({
                 size: '1.25em',
             }),
-        ], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-3 overflow-auto\"\n  style=\"background-color: #fafaf9\"\n>\n  <div class=\"flex flex-row px-2 justify-between\">\n    <span class=\"text-3xl font-title text-black/80\" translate\n      >editor.record.form.metadataQuality.title</span\n    >\n  </div>\n  @for (properties of propertiesByPage; track properties; let i = $index) {\n    <div class=\"flex flex-col gap-2\">\n      @for (property of properties; track property) {\n        <gn-ui-button\n          [extraClass]=\"getExtraClass(property.value)\"\n          type=\"outline\"\n          attr.data-cy=\"md-quality-btn-{{ property.label }}\"\n        >\n          <span>{{ property.label | translate }}</span>\n          <div class=\"flex flex-row gap-2 items-center\">\n            @if (property.value) {\n              <ng-icon class=\"text-primary\" name=\"iconoirBadgeCheck\"></ng-icon>\n            } @else {\n              <ng-icon\n                class=\"text-neutral-300\"\n                name=\"iconoirSystemShut\"\n              ></ng-icon>\n            }\n          </div>\n        </gn-ui-button>\n      }\n      @if (i !== propertiesByPage.length - 1) {\n        <hr class=\"border-gray-300 w-11/12 mx-auto\" />\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: 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: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+        ], ngImport: i0, template: "<div\n  class=\"flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-3 overflow-auto\"\n  style=\"background-color: #fafaf9\"\n>\n  <div class=\"flex flex-row px-2 justify-between\">\n    <span class=\"text-3xl font-title text-black/80\" translate\n      >editor.record.form.metadataQuality.title</span\n    >\n  </div>\n  @for (\n    properties of (propertiesByPage$ | async) ?? [];\n    track properties;\n    let isLast = $last\n  ) {\n    <div class=\"flex flex-col gap-2\">\n      @for (property of properties; track property) {\n        <gn-ui-button\n          style=\"\n            --gn-ui-button-justify: space-between;\n            --gn-ui-button-height: 34px;\n            --gn-ui-button-width: 100%;\n            --gn-ui-button-border-width: 0;\n            --gn-ui-button-color: black;\n            --gn-ui-button-background: transparent;\n            --gn-ui-button-bg-hover: #f3f4f6;\n            --gn-ui-button-disabled-opacity: 1;\n          \"\n          [disabled]=\"property.value\"\n          (buttonClick)=\"onCriterionClick(property)\"\n          type=\"outline\"\n          attr.data-cy=\"md-quality-btn-{{ property.label }}\"\n        >\n          <span>{{ property.label | translate }}</span>\n          <div class=\"flex flex-row gap-2 items-center\">\n            @if (property.value) {\n              <ng-icon class=\"text-primary\" name=\"iconoirBadgeCheck\"></ng-icon>\n            } @else {\n              <ng-icon\n                class=\"text-neutral-300\"\n                name=\"iconoirSystemShut\"\n              ></ng-icon>\n            }\n          </div>\n        </gn-ui-button>\n      }\n      @if (!isLast) {\n        <hr class=\"border-gray-300 w-11/12 mx-auto\" />\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: 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: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MetadataQualityPanelComponent, decorators: [{
             type: Component,
@@ -41905,6 +41999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         TranslatePipe,
                         ButtonComponent,
                         NgIconComponent,
+                        AsyncPipe,
                     ], providers: [
                         provideIcons({
                             iconoirSystemShut,
@@ -41913,12 +42008,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         provideNgIconsConfig({
                             size: '1.25em',
                         }),
-                    ], template: "<div\n  class=\"flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-3 overflow-auto\"\n  style=\"background-color: #fafaf9\"\n>\n  <div class=\"flex flex-row px-2 justify-between\">\n    <span class=\"text-3xl font-title text-black/80\" translate\n      >editor.record.form.metadataQuality.title</span\n    >\n  </div>\n  @for (properties of propertiesByPage; track properties; let i = $index) {\n    <div class=\"flex flex-col gap-2\">\n      @for (property of properties; track property) {\n        <gn-ui-button\n          [extraClass]=\"getExtraClass(property.value)\"\n          type=\"outline\"\n          attr.data-cy=\"md-quality-btn-{{ property.label }}\"\n        >\n          <span>{{ property.label | translate }}</span>\n          <div class=\"flex flex-row gap-2 items-center\">\n            @if (property.value) {\n              <ng-icon class=\"text-primary\" name=\"iconoirBadgeCheck\"></ng-icon>\n            } @else {\n              <ng-icon\n                class=\"text-neutral-300\"\n                name=\"iconoirSystemShut\"\n              ></ng-icon>\n            }\n          </div>\n        </gn-ui-button>\n      }\n      @if (i !== propertiesByPage.length - 1) {\n        <hr class=\"border-gray-300 w-11/12 mx-auto\" />\n      }\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { editorConfig: [{
-                type: Input
-            }], record: [{
-                type: Input
-            }] } });
+                    ], template: "<div\n  class=\"flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-3 overflow-auto\"\n  style=\"background-color: #fafaf9\"\n>\n  <div class=\"flex flex-row px-2 justify-between\">\n    <span class=\"text-3xl font-title text-black/80\" translate\n      >editor.record.form.metadataQuality.title</span\n    >\n  </div>\n  @for (\n    properties of (propertiesByPage$ | async) ?? [];\n    track properties;\n    let isLast = $last\n  ) {\n    <div class=\"flex flex-col gap-2\">\n      @for (property of properties; track property) {\n        <gn-ui-button\n          style=\"\n            --gn-ui-button-justify: space-between;\n            --gn-ui-button-height: 34px;\n            --gn-ui-button-width: 100%;\n            --gn-ui-button-border-width: 0;\n            --gn-ui-button-color: black;\n            --gn-ui-button-background: transparent;\n            --gn-ui-button-bg-hover: #f3f4f6;\n            --gn-ui-button-disabled-opacity: 1;\n          \"\n          [disabled]=\"property.value\"\n          (buttonClick)=\"onCriterionClick(property)\"\n          type=\"outline\"\n          attr.data-cy=\"md-quality-btn-{{ property.label }}\"\n        >\n          <span>{{ property.label | translate }}</span>\n          <div class=\"flex flex-row gap-2 items-center\">\n            @if (property.value) {\n              <ng-icon class=\"text-primary\" name=\"iconoirBadgeCheck\"></ng-icon>\n            } @else {\n              <ng-icon\n                class=\"text-neutral-300\"\n                name=\"iconoirSystemShut\"\n              ></ng-icon>\n            }\n          </div>\n        </gn-ui-button>\n      }\n      @if (!isLast) {\n        <hr class=\"border-gray-300 w-11/12 mx-auto\" />\n      }\n    </div>\n  }\n</div>\n" }]
+        }] });
 
 const extraFlagMap = {
     ar: 'arab',
@@ -42660,9 +42751,7 @@ class FormFieldContactsForResourceComponent {
         /**
          * gn-ui-autocomplete
          */
-        this.displayWithFn = (user) => user.name
-            ? `${user.name} ${user.surname} ${user.organisation ? `(${user.organisation})` : ''}`
-            : ``;
+        this.displayWithFn = (user) => getIndividualDisplayName(toIndividual(user));
         /**
          * gn-ui-autocomplete
          */
@@ -42754,7 +42843,7 @@ class FormFieldContactsForResourceComponent {
             provideNgIconsConfig({
                 size: '1.5rem',
             }),
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <div class=\"flex flex-row flex-wrap gap-2\" data-test=\"rolesToPick\">\n    @for (role of rolesToPick; track role) {\n      <gn-ui-button type=\"gray\" (buttonClick)=\"addRoleToDisplay(role)\">\n        <ng-icon name=\"iconoirPlus\" class=\"text-primary\"></ng-icon>\n        &nbsp;\n        <span translate>{{ roleToLabel(role) }}</span>\n      </gn-ui-button>\n    }\n  </div>\n  @if (roleSectionsToDisplay && roleSectionsToDisplay.length > 0) {\n    <div class=\"mt-8\" data-test=\"displayedRoles\">\n      @for (\n        role of roleSectionsToDisplay;\n        track role;\n        let index = $index;\n        let isLast = $last\n      ) {\n        <div class=\"flex flex-col gap-4\">\n          <div class=\"flex flex-row justify-between\">\n            <span class=\"font-bold text-base\" translate>{{\n              roleToLabel(role)\n            }}</span>\n          </div>\n          @if (role !== 'unspecified' && role !== 'other') {\n            <gn-ui-autocomplete\n              [placeholder]=\"\n                'editor.record.form.field.contactsForResource.placeholder'\n                  | translate\n              \"\n              [action]=\"autoCompleteAction\"\n              (itemSelected)=\"addContact($event, role)\"\n              [displayWithFn]=\"displayWithFn\"\n              [minCharacterCount]=\"1\"\n              [clearOnSelection]=\"true\"\n              [allowSubmit]=\"false\"\n            >\n            </gn-ui-autocomplete>\n          }\n          @if (contactsForRessourceByRole.get(role); as contacts) {\n            <gn-ui-sortable-list\n              [items]=\"contacts\"\n              (itemsOrderChange)=\"handleContactsChanged($event, role)\"\n              [elementTemplate]=\"contactTemplate\"\n            ></gn-ui-sortable-list>\n            <ng-template #contactTemplate let-contact>\n              <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n            </ng-template>\n          }\n          @if (!isLast) {\n            <hr class=\"border-t-[#D6D3D1] mt-4 mb-6\" />\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div\n      class=\"p-4 border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contactsForResource.noContact\n    </div>\n  }\n</div>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "component", type: ContactCardComponent, selector: "gn-ui-contact-card", inputs: ["contact"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <div class=\"flex flex-row flex-wrap gap-2\" data-test=\"rolesToPick\">\n    @for (role of rolesToPick; track role) {\n      <gn-ui-button type=\"gray\" (buttonClick)=\"addRoleToDisplay(role)\">\n        <ng-icon name=\"iconoirPlus\" class=\"text-primary\"></ng-icon>\n        &nbsp;\n        <span translate>{{ roleToLabel(role) }}</span>\n      </gn-ui-button>\n    }\n  </div>\n  @if (value.length === 0) {\n    <div\n      class=\"p-4 border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contactsForResource.noContact\n    </div>\n  }\n  @if (roleSectionsToDisplay && roleSectionsToDisplay.length > 0) {\n    <div class=\"mt-8\" data-test=\"displayedRoles\">\n      @for (\n        role of roleSectionsToDisplay;\n        track role;\n        let index = $index;\n        let isLast = $last\n      ) {\n        <div class=\"flex flex-col gap-4\">\n          <div class=\"flex flex-row justify-between\">\n            <span class=\"font-bold text-base\" translate>{{\n              roleToLabel(role)\n            }}</span>\n          </div>\n          @if (role !== 'unspecified' && role !== 'other') {\n            <gn-ui-autocomplete\n              [placeholder]=\"\n                'editor.record.form.field.contactsForResource.placeholder'\n                  | translate\n              \"\n              [action]=\"autoCompleteAction\"\n              (itemSelected)=\"addContact($event, role)\"\n              [displayWithFn]=\"displayWithFn\"\n              [minCharacterCount]=\"1\"\n              [clearOnSelection]=\"true\"\n              [allowSubmit]=\"false\"\n            >\n            </gn-ui-autocomplete>\n          }\n          @if (contactsForRessourceByRole.get(role); as contacts) {\n            <gn-ui-sortable-list\n              [items]=\"contacts\"\n              (itemsOrderChange)=\"handleContactsChanged($event, role)\"\n              [elementTemplate]=\"contactTemplate\"\n            ></gn-ui-sortable-list>\n            <ng-template #contactTemplate let-contact>\n              <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n            </ng-template>\n          }\n          @if (!isLast) {\n            <hr class=\"border-t-[#D6D3D1] mt-4 mb-6\" />\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "component", type: ContactCardComponent, selector: "gn-ui-contact-card", inputs: ["contact"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldContactsForResourceComponent, decorators: [{
             type: Component,
@@ -42771,7 +42860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         provideNgIconsConfig({
                             size: '1.5rem',
                         }),
-                    ], template: "<div class=\"flex flex-col gap-3\">\n  <div class=\"flex flex-row flex-wrap gap-2\" data-test=\"rolesToPick\">\n    @for (role of rolesToPick; track role) {\n      <gn-ui-button type=\"gray\" (buttonClick)=\"addRoleToDisplay(role)\">\n        <ng-icon name=\"iconoirPlus\" class=\"text-primary\"></ng-icon>\n        &nbsp;\n        <span translate>{{ roleToLabel(role) }}</span>\n      </gn-ui-button>\n    }\n  </div>\n  @if (roleSectionsToDisplay && roleSectionsToDisplay.length > 0) {\n    <div class=\"mt-8\" data-test=\"displayedRoles\">\n      @for (\n        role of roleSectionsToDisplay;\n        track role;\n        let index = $index;\n        let isLast = $last\n      ) {\n        <div class=\"flex flex-col gap-4\">\n          <div class=\"flex flex-row justify-between\">\n            <span class=\"font-bold text-base\" translate>{{\n              roleToLabel(role)\n            }}</span>\n          </div>\n          @if (role !== 'unspecified' && role !== 'other') {\n            <gn-ui-autocomplete\n              [placeholder]=\"\n                'editor.record.form.field.contactsForResource.placeholder'\n                  | translate\n              \"\n              [action]=\"autoCompleteAction\"\n              (itemSelected)=\"addContact($event, role)\"\n              [displayWithFn]=\"displayWithFn\"\n              [minCharacterCount]=\"1\"\n              [clearOnSelection]=\"true\"\n              [allowSubmit]=\"false\"\n            >\n            </gn-ui-autocomplete>\n          }\n          @if (contactsForRessourceByRole.get(role); as contacts) {\n            <gn-ui-sortable-list\n              [items]=\"contacts\"\n              (itemsOrderChange)=\"handleContactsChanged($event, role)\"\n              [elementTemplate]=\"contactTemplate\"\n            ></gn-ui-sortable-list>\n            <ng-template #contactTemplate let-contact>\n              <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n            </ng-template>\n          }\n          @if (!isLast) {\n            <hr class=\"border-t-[#D6D3D1] mt-4 mb-6\" />\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div\n      class=\"p-4 border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contactsForResource.noContact\n    </div>\n  }\n</div>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"] }]
+                    ], template: "<div class=\"flex flex-col gap-3\">\n  <div class=\"flex flex-row flex-wrap gap-2\" data-test=\"rolesToPick\">\n    @for (role of rolesToPick; track role) {\n      <gn-ui-button type=\"gray\" (buttonClick)=\"addRoleToDisplay(role)\">\n        <ng-icon name=\"iconoirPlus\" class=\"text-primary\"></ng-icon>\n        &nbsp;\n        <span translate>{{ roleToLabel(role) }}</span>\n      </gn-ui-button>\n    }\n  </div>\n  @if (value.length === 0) {\n    <div\n      class=\"p-4 border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contactsForResource.noContact\n    </div>\n  }\n  @if (roleSectionsToDisplay && roleSectionsToDisplay.length > 0) {\n    <div class=\"mt-8\" data-test=\"displayedRoles\">\n      @for (\n        role of roleSectionsToDisplay;\n        track role;\n        let index = $index;\n        let isLast = $last\n      ) {\n        <div class=\"flex flex-col gap-4\">\n          <div class=\"flex flex-row justify-between\">\n            <span class=\"font-bold text-base\" translate>{{\n              roleToLabel(role)\n            }}</span>\n          </div>\n          @if (role !== 'unspecified' && role !== 'other') {\n            <gn-ui-autocomplete\n              [placeholder]=\"\n                'editor.record.form.field.contactsForResource.placeholder'\n                  | translate\n              \"\n              [action]=\"autoCompleteAction\"\n              (itemSelected)=\"addContact($event, role)\"\n              [displayWithFn]=\"displayWithFn\"\n              [minCharacterCount]=\"1\"\n              [clearOnSelection]=\"true\"\n              [allowSubmit]=\"false\"\n            >\n            </gn-ui-autocomplete>\n          }\n          @if (contactsForRessourceByRole.get(role); as contacts) {\n            <gn-ui-sortable-list\n              [items]=\"contacts\"\n              (itemsOrderChange)=\"handleContactsChanged($event, role)\"\n              [elementTemplate]=\"contactTemplate\"\n            ></gn-ui-sortable-list>\n            <ng-template #contactTemplate let-contact>\n              <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n            </ng-template>\n          }\n          @if (!isLast) {\n            <hr class=\"border-t-[#D6D3D1] mt-4 mb-6\" />\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
@@ -42790,7 +42879,7 @@ class FormFieldContactsComponent {
         /**
          * gn-ui-autocomplete
          */
-        this.displayWithFn = (user) => `${user.name} ${user.surname} ${user.organisation ? `(${user.organisation})` : ''}`;
+        this.displayWithFn = (user) => getIndividualDisplayName(toIndividual(user));
         /**
          * gn-ui-autocomplete
          */
@@ -42850,7 +42939,7 @@ class FormFieldContactsComponent {
         this.subscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldContactsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FormFieldContactsComponent, isStandalone: true, selector: "gn-ui-form-field-contacts", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <gn-ui-autocomplete\n    [placeholder]=\"'editor.record.form.field.contacts.placeholder' | translate\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"addContact($event)\"\n    [displayWithFn]=\"displayWithFn\"\n    [minCharacterCount]=\"1\"\n    [clearOnSelection]=\"true\"\n  >\n  </gn-ui-autocomplete>\n\n  @if (contacts.length > 0) {\n    @if (contacts.length === 1) {\n      @for (contact of contacts; track contact; let index = $index) {\n        <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n      }\n    }\n    @if (contacts.length > 1) {\n      <gn-ui-sortable-list\n        [items]=\"contacts\"\n        (itemsOrderChange)=\"handleContactsChanged($event)\"\n        [elementTemplate]=\"contactTemplate\"\n      ></gn-ui-sortable-list>\n      <ng-template #contactTemplate let-contact>\n        <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n      </ng-template>\n    }\n  } @else {\n    <div\n      class=\"p-4 text-sm border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contacts.noContact\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ContactCardComponent, selector: "gn-ui-contact-card", inputs: ["contact"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FormFieldContactsComponent, isStandalone: true, selector: "gn-ui-form-field-contacts", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <gn-ui-autocomplete\n    [placeholder]=\"'editor.record.form.field.contacts.placeholder' | translate\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"addContact($event)\"\n    [displayWithFn]=\"displayWithFn\"\n    [minCharacterCount]=\"1\"\n    [clearOnSelection]=\"true\"\n  >\n  </gn-ui-autocomplete>\n\n  @if (contacts.length > 0) {\n    <gn-ui-sortable-list\n      [items]=\"contacts\"\n      (itemsOrderChange)=\"handleContactsChanged($event)\"\n      [elementTemplate]=\"contactTemplate\"\n    ></gn-ui-sortable-list>\n    <ng-template #contactTemplate let-contact>\n      <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n    </ng-template>\n  } @else {\n    <div\n      class=\"p-4 text-sm border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contacts.noContact\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ContactCardComponent, selector: "gn-ui-contact-card", inputs: ["contact"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldContactsComponent, decorators: [{
             type: Component,
@@ -42860,7 +42949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         TranslatePipe,
                         ContactCardComponent,
                         SortableListComponent,
-                    ], template: "<div class=\"flex flex-col gap-3\">\n  <gn-ui-autocomplete\n    [placeholder]=\"'editor.record.form.field.contacts.placeholder' | translate\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"addContact($event)\"\n    [displayWithFn]=\"displayWithFn\"\n    [minCharacterCount]=\"1\"\n    [clearOnSelection]=\"true\"\n  >\n  </gn-ui-autocomplete>\n\n  @if (contacts.length > 0) {\n    @if (contacts.length === 1) {\n      @for (contact of contacts; track contact; let index = $index) {\n        <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n      }\n    }\n    @if (contacts.length > 1) {\n      <gn-ui-sortable-list\n        [items]=\"contacts\"\n        (itemsOrderChange)=\"handleContactsChanged($event)\"\n        [elementTemplate]=\"contactTemplate\"\n      ></gn-ui-sortable-list>\n      <ng-template #contactTemplate let-contact>\n        <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n      </ng-template>\n    }\n  } @else {\n    <div\n      class=\"p-4 text-sm border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contacts.noContact\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div class=\"flex flex-col gap-3\">\n  <gn-ui-autocomplete\n    [placeholder]=\"'editor.record.form.field.contacts.placeholder' | translate\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"addContact($event)\"\n    [displayWithFn]=\"displayWithFn\"\n    [minCharacterCount]=\"1\"\n    [clearOnSelection]=\"true\"\n  >\n  </gn-ui-autocomplete>\n\n  @if (contacts.length > 0) {\n    <gn-ui-sortable-list\n      [items]=\"contacts\"\n      (itemsOrderChange)=\"handleContactsChanged($event)\"\n      [elementTemplate]=\"contactTemplate\"\n    ></gn-ui-sortable-list>\n    <ng-template #contactTemplate let-contact>\n      <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n    </ng-template>\n  } @else {\n    <div\n      class=\"p-4 text-sm border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contacts.noContact\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{
@@ -43642,30 +43731,30 @@ class FormFieldConstraintsShortcutsComponent {
             'otherConstraints',
         ];
         this.onDestroy$ = new Subject();
-    }
-    ngOnInit() {
-        // hide all constraints if any toggle is activated
-        this.anyToggleActivated$
-            .pipe(takeUntil(this.onDestroy$), distinctUntilChanged$1())
-            .subscribe((anyToggleActivated) => {
-            if (anyToggleActivated) {
-                this.hideAllConstraintSections();
-            }
-        });
-        // also hide constraints which are empty arrays
-        const hideEmptyConstraints = (constraints$, model) => {
-            const isConstraintNotEmpty$ = constraints$.pipe(takeUntil(this.onDestroy$), map$2((c) => c.length > 0), distinctUntilChanged$1());
-            combineLatest([
-                isConstraintNotEmpty$,
-                this.anyToggleActivated$,
-            ]).subscribe(([isNotEmpty, anyToggleActivated]) => {
-                const visible = isNotEmpty && !anyToggleActivated;
-                this.editorFacade.setFieldVisibility({ model }, visible);
+        // Deferred to afterNextRender to avoid dispatching store actions
+        // synchronously during Angular's change detection cycle (NG0100)
+        afterNextRender(() => {
+            this.anyToggleActivated$
+                .pipe(takeUntil(this.onDestroy$), distinctUntilChanged$1())
+                .subscribe((anyToggleActivated) => {
+                if (anyToggleActivated) {
+                    this.hideAllConstraintSections();
+                }
             });
-        };
-        hideEmptyConstraints(this.legalConstraints$, 'legalConstraints');
-        hideEmptyConstraints(this.securityConstraints$, 'securityConstraints');
-        hideEmptyConstraints(this.otherConstraints$, 'otherConstraints');
+            const hideEmptyConstraints = (constraints$, model) => {
+                const isConstraintNotEmpty$ = constraints$.pipe(takeUntil(this.onDestroy$), map$2((c) => c.length > 0), distinctUntilChanged$1());
+                combineLatest([
+                    isConstraintNotEmpty$,
+                    this.anyToggleActivated$,
+                ]).subscribe(([isNotEmpty, anyToggleActivated]) => {
+                    const visible = isNotEmpty && !anyToggleActivated;
+                    this.editorFacade.setFieldVisibility({ model }, visible);
+                });
+            };
+            hideEmptyConstraints(this.legalConstraints$, 'legalConstraints');
+            hideEmptyConstraints(this.securityConstraints$, 'securityConstraints');
+            hideEmptyConstraints(this.otherConstraints$, 'otherConstraints');
+        });
     }
     ngOnDestroy() {
         this.onDestroy$.next();
@@ -43730,7 +43819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                             size: '1.5rem',
                         }),
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-2 mb-2\" data-cy=\"constraints-shortcut-toggles\">\n  <gn-ui-check-toggle\n    [label]=\"'editor.record.form.constraint.not.applicable' | translate\"\n    [value]=\"noApplicableConstraint$ | async\"\n    (toggled)=\"onToggleChange('noApplicableConstraint', $event)\"\n  >\n  </gn-ui-check-toggle>\n  <gn-ui-check-toggle\n    [label]=\"'editor.record.form.constraint.not.known' | translate\"\n    [value]=\"noKnownConstraint$ | async\"\n    (toggled)=\"onToggleChange('noKnownConstraint', $event)\"\n  >\n  </gn-ui-check-toggle>\n</div>\n\n@if ((anyToggleActivated$ | async) === false) {\n  <div\n    class=\"flex flex-row flex-wrap gap-2\"\n    data-cy=\"constraints-shortcut-btns\"\n  >\n    @for (constraint of constraintButtonChoices; track constraint) {\n      <gn-ui-button\n        type=\"gray\"\n        (buttonClick)=\"addConstraintSectionToDisplay(constraint)\"\n        [disabled]=\"isConstraintButtonDisabled$(constraint) | async\"\n      >\n        <ng-icon name=\"iconoirPlus\" class=\"text-primary\"></ng-icon>\n        &nbsp;\n        <span>{{\n          'editor.record.form.constraint.' + constraint | translate\n        }}</span>\n      </gn-ui-button>\n    }\n  </div>\n}\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class ConstraintCardComponent {
     constructor() {
@@ -44041,9 +44130,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 
 class RecordFormComponent {
     constructor() {
+        this.anchorIdPrefix = 'gn-ui--field-';
         this.facade = inject(EditorFacade);
+        this.el = inject(ElementRef);
+        this.subscription = new Subscription();
         this.recordUniqueIdentifier$ = this.facade.record$.pipe(map$2((record) => record.uniqueIdentifier));
     }
+    ngOnInit() {
+        this.subscription.add(this.facade.focusedField$
+            .pipe(filter((field) => !!field), switchMap(async (field) => ({
+            field: field,
+            pageIndex: await this.getPageIndexForField(field),
+        })))
+            .subscribe(async ({ field, pageIndex }) => {
+            const currentPage = await firstValueFrom(this.facade.currentPage$);
+            if (pageIndex !== null && pageIndex !== currentPage) {
+                this.facade.setCurrentPage(pageIndex);
+                this.el.nativeElement.scrollIntoView({
+                    behavior: 'instant',
+                    block: 'start',
+                });
+            }
+            setTimeout(() => document
+                .getElementById(this.anchorIdPrefix + field)
+                ?.scrollIntoView({ behavior: 'instant', block: 'start' }));
+        }));
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
     handleFieldValueChange(model, newValue) {
         if (!model) {
             return;
@@ -44056,12 +44171,17 @@ class RecordFormComponent {
     sectionTracker(index, section) {
         return section.labelKey;
     }
+    async getPageIndexForField(model) {
+        const config = await firstValueFrom(this.facade.editorConfig$);
+        const pageIndex = config.pages.findIndex((page) => page.sections.some((section) => section.fields.some((field) => field.model === model)));
+        return pageIndex >= 0 ? pageIndex : null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RecordFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: RecordFormComponent, isStandalone: true, selector: "gn-ui-record-form", ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  @for (\n    section of facade.currentSections$ | async;\n    track sectionTracker($index, section)\n  ) {\n    @if (!section.hidden) {\n      <div class=\"flex flex-col gap-6 border p-8 rounded-[8px] shadow\">\n        <div class=\"flex flex-col gap-2\">\n          @if (section.labelKey) {\n            <div class=\"text-2xl font-title text-black\" translate>\n              {{ section.labelKey }}\n            </div>\n          }\n          @if (section.descriptionKey) {\n            <div class=\"text-gray-800 text-sm\" translate>\n              {{ section.descriptionKey }}\n            </div>\n          }\n        </div>\n        <div class=\"grid auto-rows-auto grid-cols-2 gap-[32px]\">\n          @for (\n            field of section.fieldsWithValues;\n            track fieldTracker($index, field)\n          ) {\n            @if (!field.config.hidden) {\n              <gn-ui-form-field\n                [ngClass]=\"\n                  field.config.gridColumnSpan === 1\n                    ? 'col-span-1'\n                    : 'col-span-2'\n                \"\n                [uniqueIdentifier]=\"recordUniqueIdentifier$ | async\"\n                [model]=\"field.config.model!\"\n                [modelSpecifier]=\"field.config.modelSpecifier!\"\n                [config]=\"field.config.formFieldConfig\"\n                [value]=\"field.value\"\n                [componentName]=\"field.config.componentName\"\n                (valueChange)=\"\n                  handleFieldValueChange(field.config.model!, $event)\n                \"\n              ></gn-ui-form-field>\n            }\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormFieldComponent, selector: "gn-ui-form-field", inputs: ["uniqueIdentifier", "model", "modelSpecifier", "componentName", "config", "value"], outputs: ["valueChange"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: RecordFormComponent, isStandalone: true, selector: "gn-ui-record-form", ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n  @for (\n    section of facade.currentSections$ | async;\n    track sectionTracker($index, section)\n  ) {\n    @if (!section.hidden) {\n      <div class=\"flex flex-col gap-6 border p-8 rounded-[8px] shadow\">\n        <div class=\"flex flex-col gap-2\">\n          @if (section.labelKey) {\n            <div class=\"text-2xl font-title text-black\" translate>\n              {{ section.labelKey }}\n            </div>\n          }\n          @if (section.descriptionKey) {\n            <div class=\"text-gray-800 text-sm\" translate>\n              {{ section.descriptionKey }}\n            </div>\n          }\n        </div>\n        <div class=\"grid auto-rows-auto grid-cols-2 gap-[32px]\">\n          @for (\n            field of section.fieldsWithValues;\n            track fieldTracker($index, field)\n          ) {\n            @if (!field.config.hidden) {\n              <gn-ui-form-field\n                [id]=\"anchorIdPrefix + field.config.model\"\n                [ngClass]=\"\n                  field.config.gridColumnSpan === 1\n                    ? 'col-span-1'\n                    : 'col-span-2'\n                \"\n                [uniqueIdentifier]=\"recordUniqueIdentifier$ | async\"\n                [model]=\"field.config.model!\"\n                [modelSpecifier]=\"field.config.modelSpecifier!\"\n                [config]=\"field.config.formFieldConfig\"\n                [value]=\"field.value\"\n                [componentName]=\"field.config.componentName\"\n                (valueChange)=\"\n                  handleFieldValueChange(field.config.model!, $event)\n                \"\n              ></gn-ui-form-field>\n            }\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: ["gn-ui-form-field{scroll-margin-top:90px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormFieldComponent, selector: "gn-ui-form-field", inputs: ["uniqueIdentifier", "model", "modelSpecifier", "componentName", "config", "value"], outputs: ["valueChange"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RecordFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-record-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, FormFieldComponent, TranslateDirective], template: "<div class=\"flex flex-col gap-6\">\n  @for (\n    section of facade.currentSections$ | async;\n    track sectionTracker($index, section)\n  ) {\n    @if (!section.hidden) {\n      <div class=\"flex flex-col gap-6 border p-8 rounded-[8px] shadow\">\n        <div class=\"flex flex-col gap-2\">\n          @if (section.labelKey) {\n            <div class=\"text-2xl font-title text-black\" translate>\n              {{ section.labelKey }}\n            </div>\n          }\n          @if (section.descriptionKey) {\n            <div class=\"text-gray-800 text-sm\" translate>\n              {{ section.descriptionKey }}\n            </div>\n          }\n        </div>\n        <div class=\"grid auto-rows-auto grid-cols-2 gap-[32px]\">\n          @for (\n            field of section.fieldsWithValues;\n            track fieldTracker($index, field)\n          ) {\n            @if (!field.config.hidden) {\n              <gn-ui-form-field\n                [ngClass]=\"\n                  field.config.gridColumnSpan === 1\n                    ? 'col-span-1'\n                    : 'col-span-2'\n                \"\n                [uniqueIdentifier]=\"recordUniqueIdentifier$ | async\"\n                [model]=\"field.config.model!\"\n                [modelSpecifier]=\"field.config.modelSpecifier!\"\n                [config]=\"field.config.formFieldConfig\"\n                [value]=\"field.value\"\n                [componentName]=\"field.config.componentName\"\n                (valueChange)=\"\n                  handleFieldValueChange(field.config.model!, $event)\n                \"\n              ></gn-ui-form-field>\n            }\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'gn-ui-record-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, FormFieldComponent, TranslateDirective], template: "<div class=\"flex flex-col gap-6\">\n  @for (\n    section of facade.currentSections$ | async;\n    track sectionTracker($index, section)\n  ) {\n    @if (!section.hidden) {\n      <div class=\"flex flex-col gap-6 border p-8 rounded-[8px] shadow\">\n        <div class=\"flex flex-col gap-2\">\n          @if (section.labelKey) {\n            <div class=\"text-2xl font-title text-black\" translate>\n              {{ section.labelKey }}\n            </div>\n          }\n          @if (section.descriptionKey) {\n            <div class=\"text-gray-800 text-sm\" translate>\n              {{ section.descriptionKey }}\n            </div>\n          }\n        </div>\n        <div class=\"grid auto-rows-auto grid-cols-2 gap-[32px]\">\n          @for (\n            field of section.fieldsWithValues;\n            track fieldTracker($index, field)\n          ) {\n            @if (!field.config.hidden) {\n              <gn-ui-form-field\n                [id]=\"anchorIdPrefix + field.config.model\"\n                [ngClass]=\"\n                  field.config.gridColumnSpan === 1\n                    ? 'col-span-1'\n                    : 'col-span-2'\n                \"\n                [uniqueIdentifier]=\"recordUniqueIdentifier$ | async\"\n                [model]=\"field.config.model!\"\n                [modelSpecifier]=\"field.config.modelSpecifier!\"\n                [config]=\"field.config.formFieldConfig\"\n                [value]=\"field.value\"\n                [componentName]=\"field.config.componentName\"\n                (valueChange)=\"\n                  handleFieldValueChange(field.config.model!, $event)\n                \"\n              ></gn-ui-form-field>\n            }\n          }\n        </div>\n      </div>\n    }\n  }\n</div>\n", styles: ["gn-ui-form-field{scroll-margin-top:90px}\n"] }]
         }] });
 
 function evaluate(expression) {
@@ -44682,5 +44802,5 @@ const CHART_TYPE_VALUES = [
  * Generated bundle index. Do not edit.
  */
 
-export { ABOUT_SECTION, ADD_RESULTS, ADD_SEARCH, ANNEXES_SECTION, ASSOCIATED_RESOURCES_SECTION, AVAILABLE_LICENSES, AbstractAction, AbstractSearchField, ActionMenuComponent, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, ApplicationBannerComponent, AuthService, AutocompleteComponent, AvailableServicesField, AvatarComponent, AvatarServiceInterface, BASEMAP_LAYERS, BadgeComponent, BaseConverter, BaseFileReader, BaseReader, BlockListComponent, ButtonComponent, CHART_TYPE_VALUES, CLASSIFICATION_SECTION, CLEAR_ERROR, CLEAR_RESULTS, CONSTRAINTS_SHORTCUTS, CONTACTS, CONTACTS_FOR_RESOURCE_FIELD, CarouselComponent, CatalogTitleComponent, CellPopinComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ClearError, ClearResults, ColorScaleComponent, ConfirmationDialogComponent, ContentGhostComponent, CopyTextButtonComponent, DATA_MANAGERS_SECTION, DEFAULT_CONFIGURATION, DEFAULT_GN4_LOGIN_URL, DEFAULT_GN4_LOGOUT_URL, DEFAULT_GN4_SETTINGS_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DISABLE_AUTH, DO_NOT_USE_DEFAULT_BASEMAP, DataService, DataTableComponent, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DatePickerComponent, DateRangeDropdownComponent, DateRangeInputsComponent, DateRangePickerComponent, DateRangeSearchField, DateService, DcatApConverter, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EDITOR_FEATURE_KEY, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EXTERNAL_VIEWER_OPEN_NEW_TAB, EXTERNAL_VIEWER_URL_TEMPLATE, EditableLabelDirective, EditorFacade, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorComponent, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalLinkCardComponent, ExternalViewerButtonComponent, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FILTER_SUMMARY_IGNORE_LIST, FORMATS, FacetBlockComponent, FacetItemComponent, FacetListComponent, FacetsContainerComponent, FavoriteStarComponent, FavoritesService, FeatureCatalogListComponent, FeatureDetailComponent, FeatureEditorModule, FeatureMapModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileInputComponent, FileTranslateLoader, FilesDropDirective, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldDateComponent, FormFieldFileComponent, FormFieldKeywordsComponent, FormFieldLicenseComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentsComponent, FormFieldTopicsComponent, FormFieldWrapperComponent, FullTextSearchField, FuzzySearchComponent, GEOGRAPHICAL_COVERAGE_SECTION, GEONETWORK_UI_TAG_NAME, GEONETWORK_UI_VERSION, GeoDataBadgeComponent, GeoTableViewComponent, GeocodingComponent, GeojsonReader, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GnUiHumanizeDateDirective, GpfApiDlComponent, GravatarService, HttpLoaderFactory, I18nInterceptor, INSPIRE_TOPICS, ImageFallbackDirective, ImageInputComponent, ImageOverlayPreviewComponent, ImportRecordComponent, InlineFilterComponent, InteractiveTableColumnComponent, InteractiveTableComponent, InternalLinkCardComponent, IsSpatialSearchField, Iso191153Converter, Iso19139Converter, KindBadgeComponent, LANGUAGES_LIST, LANGUAGE_NAMES, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LEGAL_CONSTRAINTS_FIELD, LOGIN_URL, LOGOUT_URL, LONLAT_CRS_CODES, LanguageSwitcherComponent, LayersPanelComponent, LicenseSearchField, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_FEATURE_KEY, MAP_VIEW_CONSTRAINTS, MAX_UPLOAD_SIZE_MB, METADATA_LANGUAGE, METADATA_POINT_OF_CONTACT_SECTION, MapContainerComponent, MapFacade, MapLegendComponent, MapStateContainerComponent, MapStyleService, MapUtilsService, MapViewComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataDoiComponent, MetadataInfoComponent, MetadataLinkType, MetadataMapperContext, MetadataQualityComponent, MetadataQualityItemComponent, MetadataQualityPanelComponent, ModalDialogComponent, MultilingualPanelComponent, MultilingualSearchField, MyOrgService, NAMESPACES, NOT_APPLICABLE_CONSTRAINT, NOT_KNOWN_CONSTRAINT, NotificationComponent, NotificationsContainerComponent, NotificationsService, OPEN_DATA_LICENSE, ORGANIZATIONS_STRATEGY, ORGANIZATION_PAGE_URL_TOKEN, ORGANIZATION_URL_TOKEN, OTHER_CONSTRAINTS_FIELD, OnlineResourceCardComponent, OnlineServiceResourceInputComponent, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationSearchField, OrganizationsFromGroupsService, OrganizationsFromMetadataService, OrganizationsServiceInterface, OwnerSearchField, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PaginationDotsComponent, PatchResultsAggregations, PlatformServiceInterface, PopoverComponent, PopupAlertComponent, PossibleResourceTypes, PossibleResourceTypesDefinition, PreviousNextButtonsComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_ABSTRACT_FIELD, RECORD_DATASET_URL_TOKEN, RECORD_GRAPHICAL_OVERVIEW_FIELD, RECORD_KEYWORDS_FIELD, RECORD_LICENSE_FIELD, RECORD_ONLINE_LINK_RESOURCES, RECORD_ONLINE_RESOURCES, RECORD_RESOURCE_CREATED_FIELD, RECORD_RESOURCE_UPDATED_FIELD, RECORD_REUSE_URL_TOKEN, RECORD_SERVICE_URL_TOKEN, RECORD_SPATIAL_EXTENTS_FIELD, RECORD_SPATIAL_TOGGLE_FIELD, RECORD_TEMPORAL_EXTENTS_FIELD, RECORD_TITLE_FIELD, RECORD_TOPICS_FIELD, RECORD_UNIQUE_IDENTIFIER_FIELD, RECORD_UPDATED_FIELD, RECORD_UPDATE_FREQUENCY_FIELD, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESOURCE_IDENTIFIER_FIELD, RESULTS_LAYOUT_CONFIG, ROUTER_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_ORGANIZATION, ROUTER_ROUTE_REUSE, ROUTER_ROUTE_SEARCH, ROUTER_ROUTE_SERVICE, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordKindField, RecordMetaComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordStatusValues, RecordsMetricsComponent, RecordsRepositoryInterface, RecordsService, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResourceTypeLegacyField, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsHitsSearchKindComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, ResultsTableContainerComponent, ReusePresentationForms, RoleLabels, RoleValues, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SECURITY_CONSTRAINTS_FIELD, SETTINGS_URL, SET_CONFIG_AGGREGATIONS, SET_CONFIG_FILTERS, SET_CONFIG_REQUEST_FIELDS, SET_ERROR, SET_FAVORITES_ONLY, SET_FILTERS, SET_INCLUDE_ON_AGGREGATION, SET_PAGE_SIZE, SET_RESULTS_AGGREGATIONS, SET_RESULTS_HITS, SET_RESULTS_LAYOUT, SET_SEARCH, SET_SORT_BY, SET_SPATIAL_FILTER_ENABLED, SPATIAL_SCOPES, SearchEffects, SearchFacade, SearchFeatureCatalogComponent, SearchFiltersSummaryComponent, SearchFiltersSummaryItemComponent, SearchInputComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, ServiceCapabilitiesComponent, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SimpleSearchField, SiteTitleComponent, SortByComponent, SortByEnum, SortableListComponent, SourceLabelComponent, SourcesService, SpatialExtentComponent, SpinningLoaderComponent, StacItemsResultGridComponent, StacViewComponent, StarToggleComponent, StickyHeaderComponent, SupportedTypes, SwitchToggleComponent, THUMBNAIL_PLACEHOLDER, TITLE_SECTION, TOPICS_SECTION, TRANSLATE_DEBUG_CONFIG, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, TranslatedSearchField, TruncatedTextComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, USE_AND_ACCESS_CONDITIONS_SECTION, UpdateConfigAggregations, UpdateFilters, UrlInputComponent, UserFeedbackItemComponent, UserPreviewComponent, UserSearchField, VECTOR_STYLE_DEFAULT, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, XmlParseError, _reset, allChildrenElement, appConfigWithTranslationFixture, appendChildTree, appendChildren, assertValidXml, blockModelFixture, bytesToMegabytes, canEditRecord, checkFileFormat, clearSelectedFeatures, createChild, createDocument, createElement, createFuzzyFilter, createNestedChild, createNestedElement, currentPage, defaultMapStyleFixture, defaultMapStyleHlFixture, downgradeImage, downsizeImage, draftSaveSuccess, dragPanCondition, dropEmptyTranslations, editorReducer, emptyBlockModelFixture, findChildElement, findChildOrCreate, findChildrenElement, findConverterForDocument, findNestedChildOrCreate, findNestedElement, findNestedElements, findParent, firstChildElement, formatDate, formatUserInfo, getAllKeysValidator, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryBoundingBox, getGeometryFromGeoJSON, getGlobalConfig, getIsMobile, getJsonDataItemsProxy, getLayers, getLinkId, getLinkLabel, getLinkPriority, getMapContext, getMapContextLayerFromConfig, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getNamespace, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getQualityValidators, getResourceType, getReusePresentationForm, getReuseType, getRootElement, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSelectedFeatures, getSpatialFilterEnabled, getTemporalRangeUnion, getThemeConfig, handleScrollOnNavigation, hasRecordChangedSinceDraft, hasRecordChangedSinceDraftSuccess, initSearch, initialEditorState, initialMapState, initialState, isConfigLoaded, isDateRange, isFormatInQueryParam, isPublished, itemModelFixture, kindToCodeListValue, loadAppConfig, malformedConfigFixture, mapConfigFixture, mapContact, mapKeywords, mapLogo, mapOrganization, mapReducer, markRecordAsChanged, matchesNoApplicableConstraint, matchesNoKnownConstraint, megabytesToBytes, mimeTypeToFormat, minimalAppConfigFixture, missingMandatoryConfigFixture, mouseWheelZoomCondition, noDuplicateFileName, okAppConfigFixture, openDataset, openRecord, organizationsServiceFactory, parse, parseXmlString, placeholder, prioritizePageScroll, propagateToDocumentOnly, provideGn4, provideI18n, provideRepositoryUrl, readAttribute, readDataset, readDatasetHeaders, readText, reducer$2 as reducer, reducerSearch, removeAllChildren, removeChildren, removeChildrenByName, removeSearchParams, removeWhitespace, renameElements, saveRecord, saveRecordFailure, saveRecordSuccess, selectCanEditRecord, selectCurrentPage, selectEditorConfig, selectEditorState, selectFallback, selectFallbackFields, selectField, selectHasRecordChanged, selectIsPublished, selectRecord, selectRecordChangedSinceSave, selectRecordSaveError, selectRecordSaving, selectRecordSections, selectRecordSource, selectTranslatedField, selectTranslatedValue, setContext, setCurrentPage, setEditorConfiguration, setFieldVisibility, setSelectedFeatures, setTextContent, someHabTableItemFixture, sortByFromString, sortByToString, sortByToStrings, stripHtml, stripNamespace, tableItemsFixture, toDate, toLang2, toLang3, totalPages, undoRecordDraft, unrecognizedKeysConfigFixture, updateFrequencyCodeValues, updateLanguages, updateRecordField, updateRecordLanguages, wmsLayerFlatten, writeAttribute, wrongLanguageCodeConfigFixture, xmlToString };
+export { ABOUT_SECTION, ADD_RESULTS, ADD_SEARCH, ANNEXES_SECTION, ASSOCIATED_RESOURCES_SECTION, AVAILABLE_LICENSES, AbstractAction, AbstractSearchField, ActionMenuComponent, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, ApplicationBannerComponent, AuthService, AutocompleteComponent, AvailableServicesField, AvatarComponent, AvatarServiceInterface, BASEMAP_LAYERS, BadgeComponent, BaseConverter, BaseFileReader, BaseReader, BlockListComponent, ButtonComponent, CHART_TYPE_VALUES, CLASSIFICATION_SECTION, CLEAR_ERROR, CLEAR_RESULTS, CONSTRAINTS_SHORTCUTS, CONTACTS, CONTACTS_FOR_RESOURCE_FIELD, CarouselComponent, CatalogTitleComponent, CellPopinComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ClearError, ClearResults, ColorScaleComponent, ConfirmationDialogComponent, ContactPillComponent, ContentGhostComponent, CopyTextButtonComponent, DATA_MANAGERS_SECTION, DEFAULT_CONFIGURATION, DEFAULT_GN4_LOGIN_URL, DEFAULT_GN4_LOGOUT_URL, DEFAULT_GN4_SETTINGS_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DISABLE_AUTH, DISABLE_DRAFT, DO_NOT_USE_DEFAULT_BASEMAP, DataService, DataTableComponent, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DatePickerComponent, DateRangeDropdownComponent, DateRangeInputsComponent, DateRangePickerComponent, DateRangeSearchField, DateService, DcatApConverter, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EDITOR_FEATURE_KEY, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EXTERNAL_VIEWER_OPEN_NEW_TAB, EXTERNAL_VIEWER_URL_TEMPLATE, EditableLabelDirective, EditorFacade, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorComponent, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalLinkCardComponent, ExternalViewerButtonComponent, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FILTER_SUMMARY_IGNORE_LIST, FORMATS, FacetBlockComponent, FacetItemComponent, FacetListComponent, FacetsContainerComponent, FavoriteStarComponent, FavoritesService, FeatureCatalogListComponent, FeatureDetailComponent, FeatureEditorModule, FeatureMapModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileInputComponent, FileTranslateLoader, FilesDropDirective, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldDateComponent, FormFieldFileComponent, FormFieldKeywordsComponent, FormFieldLicenseComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentsComponent, FormFieldTopicsComponent, FormFieldWrapperComponent, FullTextSearchField, FuzzySearchComponent, GEOGRAPHICAL_COVERAGE_SECTION, GEONETWORK_UI_TAG_NAME, GEONETWORK_UI_VERSION, GeoDataBadgeComponent, GeoTableViewComponent, GeocodingComponent, GeojsonReader, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GnUiHumanizeDateDirective, GpfApiDlComponent, GravatarService, HttpLoaderFactory, I18nInterceptor, INSPIRE_TOPICS, ImageFallbackDirective, ImageInputComponent, ImageOverlayPreviewComponent, ImportRecordComponent, InlineFilterComponent, InteractiveTableColumnComponent, InteractiveTableComponent, InternalLinkCardComponent, IsSpatialSearchField, Iso191153Converter, Iso19139Converter, KindBadgeComponent, LANGUAGES_LIST, LANGUAGE_NAMES, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LEGAL_CONSTRAINTS_FIELD, LOGIN_URL, LOGOUT_URL, LONLAT_CRS_CODES, LanguageSwitcherComponent, LayersPanelComponent, LicenseSearchField, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_FEATURE_KEY, MAP_VIEW_CONSTRAINTS, MAX_UPLOAD_SIZE_MB, METADATA_LANGUAGE, METADATA_POINT_OF_CONTACT_SECTION, MapContainerComponent, MapFacade, MapLegendComponent, MapStateContainerComponent, MapStyleService, MapUtilsService, MapViewComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataDoiComponent, MetadataInfoComponent, MetadataLinkType, MetadataMapperContext, MetadataQualityComponent, MetadataQualityItemComponent, MetadataQualityPanelComponent, ModalDialogComponent, MultilingualPanelComponent, MultilingualSearchField, MyOrgService, NAMESPACES, NOT_APPLICABLE_CONSTRAINT, NOT_KNOWN_CONSTRAINT, NotificationComponent, NotificationsContainerComponent, NotificationsService, OPEN_DATA_LICENSE, ORGANIZATIONS_STRATEGY, ORGANIZATION_PAGE_URL_TOKEN, ORGANIZATION_URL_TOKEN, OTHER_CONSTRAINTS_FIELD, OnlineResourceCardComponent, OnlineServiceResourceInputComponent, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationSearchField, OrganizationsFromGroupsService, OrganizationsFromMetadataService, OrganizationsServiceInterface, OwnerSearchField, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PaginationDotsComponent, PatchResultsAggregations, PlatformServiceInterface, PopoverComponent, PopupAlertComponent, PossibleResourceTypes, PossibleResourceTypesDefinition, PreviousNextButtonsComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_ABSTRACT_FIELD, RECORD_DATASET_URL_TOKEN, RECORD_GRAPHICAL_OVERVIEW_FIELD, RECORD_KEYWORDS_FIELD, RECORD_LICENSE_FIELD, RECORD_ONLINE_LINK_RESOURCES, RECORD_ONLINE_RESOURCES, RECORD_RESOURCE_CREATED_FIELD, RECORD_RESOURCE_UPDATED_FIELD, RECORD_REUSE_URL_TOKEN, RECORD_SERVICE_URL_TOKEN, RECORD_SPATIAL_EXTENTS_FIELD, RECORD_SPATIAL_TOGGLE_FIELD, RECORD_TEMPORAL_EXTENTS_FIELD, RECORD_TITLE_FIELD, RECORD_TOPICS_FIELD, RECORD_UNIQUE_IDENTIFIER_FIELD, RECORD_UPDATED_FIELD, RECORD_UPDATE_FREQUENCY_FIELD, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESOURCE_IDENTIFIER_FIELD, RESULTS_LAYOUT_CONFIG, ROUTER_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_ORGANIZATION, ROUTER_ROUTE_REUSE, ROUTER_ROUTE_SEARCH, ROUTER_ROUTE_SERVICE, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordKindField, RecordMetaComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordStatusValues, RecordsMetricsComponent, RecordsRepositoryInterface, RecordsService, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResourceTypeLegacyField, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsHitsSearchKindComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, ResultsTableContainerComponent, ReusePresentationForms, RoleLabels, RoleValues, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SECURITY_CONSTRAINTS_FIELD, SETTINGS_URL, SET_CONFIG_AGGREGATIONS, SET_CONFIG_FILTERS, SET_CONFIG_REQUEST_FIELDS, SET_ERROR, SET_FAVORITES_ONLY, SET_FILTERS, SET_INCLUDE_ON_AGGREGATION, SET_PAGE_SIZE, SET_RESULTS_AGGREGATIONS, SET_RESULTS_HITS, SET_RESULTS_LAYOUT, SET_SEARCH, SET_SORT_BY, SET_SPATIAL_FILTER_ENABLED, SPATIAL_SCOPES, SearchEffects, SearchFacade, SearchFeatureCatalogComponent, SearchFiltersSummaryComponent, SearchFiltersSummaryItemComponent, SearchInputComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, ServiceCapabilitiesComponent, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SimpleSearchField, SiteTitleComponent, SortByComponent, SortByEnum, SortableListComponent, SourceLabelComponent, SourcesService, SpatialExtentComponent, SpinningLoaderComponent, StacItemsResultGridComponent, StacViewComponent, StarToggleComponent, StickyHeaderComponent, SupportedTypes, SwitchToggleComponent, THUMBNAIL_PLACEHOLDER, TITLE_SECTION, TOPICS_SECTION, TRANSLATE_DEBUG_CONFIG, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, TranslatedSearchField, TruncatedTextComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, USE_AND_ACCESS_CONDITIONS_SECTION, UpdateConfigAggregations, UpdateFilters, UrlInputComponent, UserFeedbackItemComponent, UserPreviewComponent, UserSearchField, VECTOR_STYLE_DEFAULT, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, XmlParseError, _reset, allChildrenElement, appConfigWithTranslationFixture, appendChildTree, appendChildren, assertValidXml, blockModelFixture, bytesToMegabytes, canEditRecord, checkFileFormat, clearSelectedFeatures, createChild, createDocument, createElement, createFuzzyFilter, createNestedChild, createNestedElement, currentPage, defaultMapStyleFixture, defaultMapStyleHlFixture, downgradeImage, downsizeImage, draftSaveSuccess, dragPanCondition, dropEmptyTranslations, editorReducer, emptyBlockModelFixture, findChildElement, findChildOrCreate, findChildrenElement, findConverterForDocument, findNestedChildOrCreate, findNestedElement, findNestedElements, findParent, firstChildElement, formatDate, formatUserInfo, getAllKeysValidator, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryBoundingBox, getGeometryFromGeoJSON, getGlobalConfig, getIndividualDisplayName, getIsMobile, getJsonDataItemsProxy, getLayers, getLinkId, getLinkLabel, getLinkPriority, getMapContext, getMapContextLayerFromConfig, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getNamespace, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getQualityValidators, getResourceType, getReusePresentationForm, getReuseType, getRootElement, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSelectedFeatures, getSpatialFilterEnabled, getTemporalRangeUnion, getThemeConfig, handleScrollOnNavigation, hasRecordChangedSinceDraft, hasRecordChangedSinceDraftSuccess, initSearch, initialEditorState, initialMapState, initialState, isConfigLoaded, isDateRange, isFormatInQueryParam, isPublished, itemModelFixture, kindToCodeListValue, loadAppConfig, malformedConfigFixture, mapConfigFixture, mapContact, mapKeywords, mapLogo, mapOrganization, mapReducer, markRecordAsChanged, matchesNoApplicableConstraint, matchesNoKnownConstraint, megabytesToBytes, mimeTypeToFormat, minimalAppConfigFixture, missingMandatoryConfigFixture, mouseWheelZoomCondition, noDuplicateFileName, okAppConfigFixture, openDataset, openRecord, organizationsServiceFactory, parse, parseXmlString, placeholder, prioritizePageScroll, propagateToDocumentOnly, provideGn4, provideI18n, provideRepositoryUrl, readAttribute, readDataset, readDatasetHeaders, readText, reducer$2 as reducer, reducerSearch, removeAllChildren, removeChildren, removeChildrenByName, removeSearchParams, removeWhitespace, renameElements, saveRecord, saveRecordFailure, saveRecordSuccess, selectCanEditRecord, selectCurrentPage, selectEditorConfig, selectEditorState, selectFallback, selectFallbackFields, selectField, selectHasRecordChanged, selectIsPublished, selectRecord, selectRecordChangedSinceSave, selectRecordSaveError, selectRecordSaving, selectRecordSections, selectRecordSource, selectTranslatedField, selectTranslatedValue, setContext, setCurrentPage, setEditorConfiguration, setFieldVisibility, setFocusedField, setSelectedFeatures, setTextContent, someHabTableItemFixture, sortByFromString, sortByToString, sortByToStrings, stripHtml, stripNamespace, tableItemsFixture, toDate, toIndividual, toLang2, toLang3, totalPages, undoRecordDraft, unrecognizedKeysConfigFixture, updateFrequencyCodeValues, updateLanguages, updateRecordField, updateRecordLanguages, wmsLayerFlatten, writeAttribute, wrongLanguageCodeConfigFixture, xmlToString };
 //# sourceMappingURL=geonetwork-ui.mjs.map