geonetwork-ui 2.10.0-dev.fb2893f44 → 2.10.0

package/fesm2022/geonetwork-ui.mjs

@@ -8,7 +8,7 @@ import { format } from 'date-fns/format';
 import { Namespace, Literal, lit, parse as parse$2, sym, BlankNode, graph } from 'rdflib';
 import { lastValueFrom, fromEvent, startWith, map as map$2, shareReplay, filter, pairwise, of, switchMap, Subject, combineLatest, from, exhaustMap, throwError, forkJoin, takeLast, firstValueFrom, merge, BehaviorSubject, timer, ReplaySubject, Subscription, first, distinctUntilChanged as distinctUntilChanged$1, animationFrameScheduler, debounceTime as debounceTime$1, Observable, buffer, tap as tap$2, combineLatestWith, take as take$1, catchError as catchError$1, takeUntil, EMPTY, mergeMap as mergeMap$1, withLatestFrom as withLatestFrom$1 } from 'rxjs';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, NgModule, Injector, provideAppInitializer, makeEnvironmentProviders, ElementRef, HostListener, Input, Directive, Renderer2, DestroyRef, EventEmitter, Output, ViewChild, ChangeDetectionStrategy, Component, ViewEncapsulation, ChangeDetectorRef, HostBinding, ViewContainerRef, TemplateRef, ViewChildren, ContentChild, ContentChildren, NgZone, input, output, viewChild, ComponentFactoryResolver, afterNextRender, viewChildren } from '@angular/core';
+import { InjectionToken, inject, Injectable, NgModule, Injector, provideAppInitializer, makeEnvironmentProviders, ElementRef, HostListener, Input, Directive, Renderer2, DestroyRef, EventEmitter, Output, ViewChild, ChangeDetectionStrategy, Component, ViewEncapsulation, ChangeDetectorRef, HostBinding, ViewContainerRef, TemplateRef, ViewChildren, ContentChild, input, output, signal, viewChild, computed, ContentChildren, NgZone, ComponentFactoryResolver, afterNextRender, viewChildren } 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';
@@ -27,11 +27,11 @@ import { LineString } from 'ol/geom.js';
 import * as i1 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, Store, select, StoreModule } from '@ngrx/store';
 import { queryDataGouvFr, queryGeonames, queryGeoadmin } from '@geospatial-sdk/geocoding';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } 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, matInfoOutline, matMailOutline as matMailOutline$1, matCloseOutline, matWarningAmberOutline, matSendOutline, matHomeWorkOutline, matCloudDownloadOutline, matMapOutline, matAddCircleOutlineOutline, matLayersOutline, matDeleteOutline, matMoreHorizOutline } from '@ng-icons/material-icons/outline';
+import { matSwipeOutline, matErrorOutlineOutline, matHelpOutline, matCloseOutline, matDragHandleOutline, matComputerOutline, matLocationSearchingOutline, matWarningAmberOutline, matLocationOnOutline, matCallOutline, matInfoOutline, matMailOutline as matMailOutline$1, matWarningOutline, matSendOutline, matHomeWorkOutline, matCloudDownloadOutline, matMapOutline, matAddCircleOutlineOutline, matLayersOutline, matDeleteOutline, matMoreHorizOutline, matVisibilityOffOutline, matVisibilityOutline, matEditOutline } 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';
@@ -1484,6 +1484,19 @@ function extractSourceRecords(liLineageEl) {
 function readSourceRecords$1(rootEl) {
     return extractSourceRecords(pipe(findNestedElement('gmd:dataQualityInfo', 'gmd:DQ_DataQuality', 'gmd:lineage', 'gmd:LI_Lineage'))(rootEl));
 }
+function extractAssociatedRecords(containerName, aggregateName, readUuid) {
+    return pipe(findChildrenElement(containerName, false), mapArray((el) => {
+        const aggregateEl = findChildElement(aggregateName, false)(el);
+        const uuid = readUuid(aggregateEl);
+        const associationType = pipe(findNestedElement('gmd:associationType', 'gmd:DS_AssociationTypeCode'), readAttribute('codeListValue'))(aggregateEl);
+        if (!uuid || !associationType)
+            return null;
+        return { uuid, associationType };
+    }), filterArray((r) => r !== null));
+}
+function readAssociatedRecords$1(rootEl) {
+    return pipe(findIdentification(), extractAssociatedRecords('gmd:aggregationInfo', 'gmd:MD_AggregateInformation', pipe(findNestedElement('gmd:aggregateDataSetIdentifier', 'gmd:MD_Identifier', 'gmd:code'), extractCharacterString())))(rootEl);
+}
 function readUpdateFrequency(rootEl) {
     return pipe(findIdentification(), findNestedElement('gmd:resourceMaintenance', 'gmd:MD_MaintenanceInformation'), extractUpdateFrequency(), map((updateFrequency) => updateFrequency || 'unknown'))(rootEl);
 }
@@ -2024,6 +2037,11 @@ function appendSourceRecords(sources) {
 function writeSourceRecords$1(record, rootEl) {
     pipe(findNestedChildOrCreate('gmd:dataQualityInfo', 'gmd:DQ_DataQuality', 'gmd:lineage', 'gmd:LI_Lineage'), appendSourceRecords(record.sourceRecords))(rootEl);
 }
+function writeAssociatedRecords$1(record, rootEl) {
+    pipe(findOrCreateIdentification(), removeChildrenByName('gmd:aggregationInfo'), appendChildren(...record.associatedRecords
+        .filter((assoc) => assoc.uuid && assoc.associationType)
+        .map((assoc) => pipe(createNestedElement('gmd:aggregationInfo', 'gmd:MD_AggregateInformation'), appendChildren(pipe(createNestedElement('gmd:aggregateDataSetIdentifier', 'gmd:MD_Identifier', 'gmd:code'), writeCharacterString(assoc.uuid)), pipe(createNestedElement('gmd:associationType', 'gmd:DS_AssociationTypeCode'), writeAttribute('codeList', 'http://standards.iso.org/iso/19139/resources/gmxCodelists.xml#DS_AssociationTypeCode'), writeAttribute('codeListValue', assoc.associationType)))))))(rootEl);
+}
 function getServiceEndpointProtocol(endpoint) {
     switch (endpoint.accessServiceProtocol.toLowerCase()) {
         case 'wfs':
@@ -2151,6 +2169,7 @@ class Iso19139Converter extends BaseConverter {
             overviews: readOverviews,
             lineage: readLineage$1,
             sourceRecords: readSourceRecords$1,
+            associatedRecords: readAssociatedRecords$1,
             onlineResources: readOnlineResources$2,
             temporalExtents: readTemporalExtents,
             spatialExtents: readSpatialExtents$1,
@@ -2189,6 +2208,7 @@ class Iso19139Converter extends BaseConverter {
             overviews: writeGraphicOverviews,
             lineage: writeLineage$1,
             sourceRecords: writeSourceRecords$1,
+            associatedRecords: writeAssociatedRecords$1,
             onlineResources: writeOnlineResources$1,
             temporalExtents: writeTemporalExtents,
             spatialExtents: writeSpatialExtents,
@@ -2236,7 +2256,7 @@ class Iso19139Converter extends BaseConverter {
         record.contacts.map((c) => fixLanguages(c.organization));
         record.contactsForResource.map((c) => fixLanguages(c.organization));
         fixLanguages(record.ownerOrganization);
-        if (record.kind === 'dataset') {
+        if (record.kind === 'dataset' || record.kind === 'reuse') {
             record.spatialExtents.map(fixLanguages);
         }
         // remove default language from otherLanguages list
@@ -2313,6 +2333,7 @@ class Iso19139Converter extends BaseConverter {
             const temporalExtents = this.readers['temporalExtents'](rootEl, tr);
             const lineage = this.readers['lineage'](rootEl, tr);
             const sourceRecords = this.readers['sourceRecords'](rootEl, tr);
+            const associatedRecords = this.readers['associatedRecords'](rootEl, tr);
             const updateFrequency = this.readers['updateFrequency'](rootEl, tr);
             return this.afterRecordRead({
                 ...this.readBaseRecord(rootEl, tr),
@@ -2320,6 +2341,7 @@ class Iso19139Converter extends BaseConverter {
                 status,
                 lineage,
                 ...(sourceRecords && { sourceRecords }),
+                associatedRecords,
                 ...(spatialRepresentation && { spatialRepresentation }),
                 temporalExtents,
                 updateFrequency,
@@ -2329,6 +2351,7 @@ class Iso19139Converter extends BaseConverter {
         else if (kind === 'reuse') {
             const lineage = this.readers['lineage'](rootEl, tr);
             const sourceRecords = this.readers['sourceRecords'](rootEl, tr);
+            const associatedRecords = this.readers['associatedRecords'](rootEl, tr);
             const temporalExtents = this.readers['temporalExtents'](rootEl, tr);
             const reuseType = this.readers['reuseType'](rootEl, tr);
             return this.afterRecordRead({
@@ -2336,6 +2359,7 @@ class Iso19139Converter extends BaseConverter {
                 kind,
                 lineage,
                 ...(sourceRecords && { sourceRecords }),
+                associatedRecords,
                 temporalExtents,
                 reuseType,
             });
@@ -2410,6 +2434,8 @@ class Iso19139Converter extends BaseConverter {
             this.writers['resourceIdentifiers'](record, rootEl);
         if (record.kind === 'dataset') {
             fieldChanged('status') && this.writers['status'](record, rootEl);
+        }
+        if (record.kind === 'dataset' || record.kind === 'reuse') {
             fieldChanged('updateFrequency') &&
                 this.writers['updateFrequency'](record, rootEl);
             fieldChanged('spatialRepresentation') &&
@@ -2423,6 +2449,8 @@ class Iso19139Converter extends BaseConverter {
                 this.writers['lineage'](record, rootEl);
             fieldChanged('sourceRecords') &&
                 this.writers['sourceRecords'](record, rootEl);
+            fieldChanged('associatedRecords') &&
+                this.writers['associatedRecords'](record, rootEl);
         }
         fieldChanged('otherLanguages') &&
             this.writers['otherLanguages'](record, rootEl);
@@ -2532,6 +2560,9 @@ function readLineage(rootEl, translations) {
 function readSourceRecords(rootEl) {
     return extractSourceRecords(pipe(findNestedElement('mdb:resourceLineage', 'mrl:LI_Lineage'))(rootEl));
 }
+function readAssociatedRecords(rootEl) {
+    return pipe(findIdentification(), extractAssociatedRecords('mri:associatedResource', 'mri:MD_AssociatedResource', pipe(findNestedElement('mri:metadataReference'), readAttribute('uuidref'))))(rootEl);
+}
 function extractDateInfo(type) {
     return pipe(findChildrenElement('mdb:dateInfo', false), filterArray((el) => pipe(findChildElement('cit:CI_DateTypeCode'), readAttribute('codeListValue'))(el) === type), getAtIndex(0), findChildElement('cit:date'), extractDateTime());
 }
@@ -2719,6 +2750,11 @@ function writeOtherLanguages(record, rootEl) {
 function writeSourceRecords(record, rootEl) {
     pipe(findNestedChildOrCreate('mdb:resourceLineage', 'mrl:LI_Lineage'), appendSourceRecords(record.sourceRecords))(rootEl);
 }
+function writeAssociatedRecords(record, rootEl) {
+    pipe(findOrCreateIdentification(), removeChildrenByName('mri:associatedResource'), appendChildren(...record.associatedRecords
+        .filter((assoc) => assoc.uuid && assoc.associationType)
+        .map((assoc) => pipe(createNestedElement('mri:associatedResource', 'mri:MD_AssociatedResource'), appendChildren(pipe(createNestedElement('mri:associationType', 'mri:DS_AssociationTypeCode'), writeAttribute('codeList', 'http://standards.iso.org/iso/19115/resources/Codelists/cat/codelists.xml#DS_AssociationTypeCode'), writeAttribute('codeListValue', assoc.associationType)), pipe(createElement('mri:metadataReference'), writeAttribute('uuidref', assoc.uuid)))))))(rootEl);
+}
 
 class Iso191153Converter extends Iso19139Converter {
     constructor() {
@@ -2734,6 +2770,7 @@ class Iso191153Converter extends Iso19139Converter {
         this.readers['landingPage'] = readLandingPage$1;
         this.readers['lineage'] = readLineage;
         this.readers['sourceRecords'] = readSourceRecords;
+        this.readers['associatedRecords'] = readAssociatedRecords;
         this.readers['onlineResources'] = readOnlineResources$1;
         this.readers['defaultLanguage'] = readDefaultLanguage$1;
         this.readers['otherLanguages'] = readOtherLanguages;
@@ -2753,6 +2790,7 @@ class Iso191153Converter extends Iso19139Converter {
         this.writers['landingPage'] = writeLandingPage;
         this.writers['lineage'] = writeLineage;
         this.writers['sourceRecords'] = writeSourceRecords;
+        this.writers['associatedRecords'] = writeAssociatedRecords;
         this.writers['onlineResources'] = writeOnlineResources;
         this.writers['status'] = writeStatus;
         this.writers['spatialRepresentation'] = writeSpatialRepresentation;
@@ -3388,6 +3426,7 @@ class DcatApConverter extends BaseConverter {
             overviews: () => [],
             lineage: () => '',
             sourceRecords: () => [],
+            associatedRecords: () => [],
             temporalExtents: () => [],
             spatialRepresentation: () => undefined,
             extras: () => undefined,
@@ -3422,6 +3461,7 @@ class DcatApConverter extends BaseConverter {
             overviews: () => undefined,
             lineage: () => undefined,
             sourceRecords: () => [],
+            associatedRecords: () => [],
             onlineResources: () => undefined,
             temporalExtents: () => undefined,
             spatialExtents: () => undefined,
@@ -3468,6 +3508,7 @@ class DcatApConverter extends BaseConverter {
             const temporalExtents = this.readers['temporalExtents'](dataStore, catalogRecord, tr, defaultLanguage);
             const lineage = this.readers['lineage'](dataStore, catalogRecord, tr, defaultLanguage);
             const sourceRecords = this.readers['sourceRecords'](dataStore, catalogRecord, tr, defaultLanguage);
+            const associatedRecords = this.readers['associatedRecords'](dataStore, catalogRecord, tr, defaultLanguage);
             const onlineResources = this.readers['onlineResources'](dataStore, catalogRecord, tr, defaultLanguage);
             const updateFrequency = this.readers['updateFrequency'](dataStore, catalogRecord, tr, defaultLanguage);
             return {
@@ -3495,6 +3536,7 @@ class DcatApConverter extends BaseConverter {
                 otherConstraints,
                 lineage,
                 sourceRecords,
+                associatedRecords,
                 ...(spatialRepresentation && { spatialRepresentation }),
                 overviews,
                 spatialExtents,
@@ -3604,6 +3646,8 @@ class DcatApConverter extends BaseConverter {
         if (record.kind === 'dataset') {
             fieldChanged('status') &&
                 this.writers['status'](record, dataStore, recordNode);
+        }
+        if (record.kind === 'dataset' || record.kind === 'reuse') {
             fieldChanged('updateFrequency') &&
                 this.writers['updateFrequency'](record, dataStore, recordNode);
             fieldChanged('spatialRepresentation') &&
@@ -3694,27 +3738,51 @@ const mapContact = (sourceContact, lang3) => {
         ...(phone && { phone }),
     };
 };
-const mapKeywords = (thesauri, language) => {
+/**
+ * Resolves a keyword's ancestor path within its thesaurus tree, or null for a
+ * root-level keyword (no ancestors to show). Tree entries are `^`-joined label
+ * paths (default language); they aren't index-aligned with the keywords, so we
+ * match on the last segment (not by position/URI), shortest path on poly-hierarchy.
+ */
+const getKeywordHierarchyPath = (keywordDefaultLabel, tree) => {
+    if (!keywordDefaultLabel || !tree?.default)
+        return null;
+    const shortest = tree.default
+        .map((entry) => entry.split('^'))
+        .filter((path) => path[path.length - 1] === keywordDefaultLabel)
+        .reduce((shortest, path) => !shortest || path.length < shortest.length ? path : shortest, null);
+    return shortest?.length > 1 ? shortest : null;
+};
+const mapKeywords = (thesauri, language, source) => {
     const keywords = [];
     for (const thesaurusId in thesauri) {
         const rawThesaurus = thesauri[thesaurusId];
+        // thesauri have an `id` (registered) or a `multilingualTitle` (cited);
+        // free-keyword groups only have a machine-key `title` like "otherKeywords-theme"
+        const { id, multilingualTitle, link = null } = rawThesaurus;
         let thesaurus = null;
-        if (rawThesaurus.id) {
-            const thesaurusSource = { ...rawThesaurus };
-            const url = getAsUrl(selectField(thesaurusSource, 'link'));
-            const name = selectField(thesaurusSource, 'title');
+        if (id || multilingualTitle) {
+            const url = getAsUrl(link);
+            const name = multilingualTitle
+                ? selectTranslatedValue(multilingualTitle, language)
+                : rawThesaurus.title;
             thesaurus = {
-                id: rawThesaurus.id,
+                ...(id && { id }),
                 ...(name && { name }),
                 ...(url && { url }),
             };
         }
+        const tree = source && selectField(source, `${thesaurusId}_tree`);
+        // free-keyword groups have no `theme` field; their type is in the group key
+        const typeCode = rawThesaurus.theme || thesaurusId.match(/otherKeywords-(\w+)$/)?.[1];
         for (const keyword of rawThesaurus.keywords) {
+            const hierarchyPath = getKeywordHierarchyPath(keyword.default, tree);
             keywords.push({
                 label: selectTranslatedValue(keyword, language),
-                type: getKeywordTypeFromKeywordTypeCode(rawThesaurus.theme),
+                type: getKeywordTypeFromKeywordTypeCode(typeCode),
                 ...(keyword.link && { key: keyword.link }),
                 ...(thesaurus && { thesaurus }),
+                ...(hierarchyPath && { hierarchyPath }),
             });
         }
     }
@@ -18667,7 +18735,7 @@ class Gn4FieldMapper {
             }),
             resourceAbstractObject: (output, source) => ({
                 ...output,
-                abstract: selectFallback(selectTranslatedField(source, 'resourceAbstractObject', this.getLocalizedIndexKey), 'no title'),
+                abstract: selectFallback(selectTranslatedField(source, 'resourceAbstractObject', this.getLocalizedIndexKey), this.translateService.instant('record.metadata.abstract.empty')),
             }),
             overview: (output, source) => {
                 const firstOverview = getFirstValue(selectField(source, 'overview'));
@@ -18780,7 +18848,7 @@ class Gn4FieldMapper {
             },
             allKeywords: (output, source) => ({
                 ...output,
-                keywords: mapKeywords(selectField(source, 'allKeywords'), this.getLocalizedIndexKey),
+                keywords: mapKeywords(selectField(source, 'allKeywords'), this.getLocalizedIndexKey, source),
             }),
             inspireTheme: (output, source) => ({
                 ...output,
@@ -19065,6 +19133,7 @@ class Gn4Converter extends BaseConverter {
             status: null,
             lineage: null,
             sourceRecords: [],
+            associatedRecords: [],
             recordUpdated: null,
             recordPublished: null,
             ownerOrganization: null,
@@ -19980,6 +20049,27 @@ const FORMATS = {
         mimeTypes: [],
     },
 };
+marker('downloads.format.csv');
+marker('downloads.format.excel');
+marker('downloads.format.geojson');
+marker('downloads.format.json');
+marker('downloads.format.shp');
+marker('downloads.format.gml');
+marker('downloads.format.kml');
+marker('downloads.format.gpkg');
+marker('downloads.format.zip');
+marker('downloads.format.pdf');
+marker('downloads.format.jpg');
+marker('downloads.format.png');
+marker('downloads.format.tiff');
+marker('downloads.format.svg');
+marker('downloads.format.dxf');
+marker('downloads.format.html');
+marker('downloads.format.xml');
+marker('downloads.format.fgb');
+marker('downloads.format.jsonfg');
+marker('downloads.format.webp');
+marker('downloads.format.postgis');
 function getFormatPriority(linkFormat) {
     for (const format in FORMATS) {
         for (const ext of FORMATS[format].extensions) {
@@ -20248,7 +20338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
             }] } });
 
 var name = "geonetwork-ui";
-var version = "2.10.0-dev.fb2893f44";
+var version = "2.10.0";
 var engines = {
 	node: ">=24"
 };
@@ -21188,15 +21278,17 @@ class Gn4Repository {
     }
     canDelete(record) {
         return this.settingsService.allowEditHarvested$.pipe(map$1((allowEditHarvested) => {
-            return (record.extras['edit'] &&
-                (!record.extras['isHarvested'] || allowEditHarvested));
+            return ((this.platformService.supportsAuthentication() &&
+                record.extras?.['edit'] &&
+                (!record.extras?.['isHarvested'] || allowEditHarvested)) ??
+                false);
         }));
     }
     canEdit(record, allowEditHarvested) {
-        return (this.platformService.supportsAuthentication() &&
-            record.kind === 'dataset' &&
-            record.extras['edit'] &&
-            (!record.extras['isHarvested'] || allowEditHarvested));
+        return ((this.platformService.supportsAuthentication() &&
+            record.extras?.['edit'] &&
+            (!record.extras?.['isHarvested'] || allowEditHarvested)) ??
+            false);
     }
     canEditRecord(uniqueIdentifier) {
         return combineLatest([
@@ -21207,7 +21299,8 @@ class Gn4Repository {
     canEditIndexedRecord(record) {
         return this.settingsService.allowEditHarvested$.pipe(map$1((allowEditHarvested) => this.canEdit(record, allowEditHarvested)));
     }
-    openRecordForEdition(uniqueIdentifier) {
+    openRecordForEdition(uniqueIdentifier, disableDraft) {
+        this.disableDraft = disableDraft ?? this.disableDraft;
         const draft$ = this.disableDraft
             ? of(null)
             : of(this.getRecordFromLocalStorage(uniqueIdentifier));
@@ -22065,26 +22158,14 @@ class Gn4PlatformService {
             const editorIds = meResponse.groupsWithEditor ?? [];
             const memberIds = meResponse.groupsWithRegisteredUser ?? [];
             const adminIds = meResponse.groupsWithUserAdmin ?? [];
-            const groupsById = new Map(groups.map((g) => [g.id, g]));
-            return [
-                ...new Set([
-                    ...reviewerIds,
-                    ...editorIds,
-                    ...groups.map((g) => g.id),
-                ]),
-            ]
-                .filter((id) => groupsById.has(id))
-                .map((id) => {
-                const group = groupsById.get(id);
-                return {
-                    groupId: group.id,
-                    groupName: group.name,
-                    isMember: memberIds.includes(id),
-                    canEdit: editorIds.includes(id),
-                    canApprove: reviewerIds.includes(id),
-                    canAdministrate: adminIds.includes(id),
-                };
-            });
+            return groups.map((group) => ({
+                groupId: group.id,
+                groupName: group.name,
+                isMember: memberIds.includes(group.id),
+                canEdit: editorIds.includes(group.id),
+                canApprove: reviewerIds.includes(group.id),
+                canAdministrate: adminIds.includes(group.id),
+            }));
         }));
     }
     translateKey(key) {
@@ -23947,11 +24028,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 
 class SpinningLoaderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SpinningLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: SpinningLoaderComponent, isStandalone: true, selector: "gn-ui-spinning-loader", ngImport: i0, template: "<span>\n  <svg\n    class=\"animate-spin h-8 w-8 text-primary\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n  >\n    <circle\n      class=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"4\"\n    ></circle>\n    <path\n      class=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    ></path>\n  </svg>\n</span>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: SpinningLoaderComponent, isStandalone: true, selector: "gn-ui-spinning-loader", ngImport: i0, template: "<span>\n  <svg\n    class=\"animate-spin\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n  >\n    <circle\n      class=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"4\"\n    ></circle>\n    <path\n      class=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    ></path>\n  </svg>\n</span>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SpinningLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-spinning-loader', standalone: true, template: "<span>\n  <svg\n    class=\"animate-spin h-8 w-8 text-primary\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n  >\n    <circle\n      class=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"4\"\n    ></circle>\n    <path\n      class=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    ></path>\n  </svg>\n</span>\n" }]
+            args: [{ selector: 'gn-ui-spinning-loader', standalone: true, template: "<span>\n  <svg\n    class=\"animate-spin\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n  >\n    <circle\n      class=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"4\"\n    ></circle>\n    <path\n      class=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    ></path>\n  </svg>\n</span>\n" }]
         }] });
 
 class ButtonComponent {
@@ -24294,19 +24375,26 @@ class BadgeComponent {
         this.clickable = false;
         this.removable = false;
         this.badgeRemoveClicked = new EventEmitter();
+        this.badgeClicked = new EventEmitter();
     }
     removeBadge() {
         this.badgeRemoveClicked.emit();
     }
+    handleClick(event) {
+        this.badgeClicked.emit();
+        event.preventDefault();
+        event.currentTarget.blur();
+        propagateToDocumentOnly(event);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: BadgeComponent, isStandalone: true, selector: "gn-ui-badge", inputs: { clickable: "clickable", removable: "removable" }, outputs: { badgeRemoveClicked: "badgeRemoveClicked" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: BadgeComponent, isStandalone: true, selector: "gn-ui-badge", inputs: { clickable: "clickable", removable: "removable" }, outputs: { badgeRemoveClicked: "badgeRemoveClicked", badgeClicked: "badgeClicked" }, providers: [
             provideIcons({
                 matClose,
             }),
             provideNgIconsConfig({
                 size: '1.2em',
             }),
-        ], ngImport: i0, template: "<div\n  class=\"gn-ui-badge flex items-center gap-1.5\"\n  [ngClass]=\"\n    clickable\n      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'\n      : ''\n  \"\n>\n  <span><ng-content></ng-content></span>\n  @if (removable) {\n    <gn-ui-button\n      type=\"light\"\n      (buttonClick)=\"removeBadge()\"\n      extraClass=\"text-xs border-0 px-0 py-0\"\n      style=\"\n        --gn-ui-button-padding: 0;\n        --gn-ui-button-font-size: 0.8em;\n        --gn-ui-button-width: 1.4em;\n        --gn-ui-button-height: 1.4em;\n        --gn-ui-button-rounded: 1.4em;\n        --gn-ui-button-background: var(--gn-ui-badge-background-color, white);\n      \"\n    >\n      <ng-icon name=\"matClose\"></ng-icon>\n    </gn-ui-button>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<ng-template #badgeContent>\n  <span><ng-content></ng-content></span>\n</ng-template>\n\n@if (clickable) {\n  <button\n    type=\"button\"\n    class=\"gn-ui-badge-clickable\"\n    (click)=\"handleClick($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"badgeContent\"></ng-container>\n  </button>\n} @else {\n  <span class=\"gn-ui-badge gap-1.5\">\n    <ng-container [ngTemplateOutlet]=\"badgeContent\"></ng-container>\n    @if (removable) {\n      <gn-ui-button\n        type=\"light\"\n        (buttonClick)=\"removeBadge()\"\n        extraClass=\"text-xs border-0 px-0 py-0\"\n        style=\"\n          --gn-ui-button-padding: 0;\n          --gn-ui-button-font-size: 0.8em;\n          --gn-ui-button-width: 1.4em;\n          --gn-ui-button-height: 1.4em;\n          --gn-ui-button-rounded: 1.4em;\n          --gn-ui-button-background: var(--gn-ui-badge-background-color, white);\n        \"\n      >\n        <ng-icon name=\"matClose\"></ng-icon>\n      </gn-ui-button>\n    }\n  </span>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
@@ -24317,13 +24405,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         provideNgIconsConfig({
                             size: '1.2em',
                         }),
-                    ], template: "<div\n  class=\"gn-ui-badge flex items-center gap-1.5\"\n  [ngClass]=\"\n    clickable\n      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'\n      : ''\n  \"\n>\n  <span><ng-content></ng-content></span>\n  @if (removable) {\n    <gn-ui-button\n      type=\"light\"\n      (buttonClick)=\"removeBadge()\"\n      extraClass=\"text-xs border-0 px-0 py-0\"\n      style=\"\n        --gn-ui-button-padding: 0;\n        --gn-ui-button-font-size: 0.8em;\n        --gn-ui-button-width: 1.4em;\n        --gn-ui-button-height: 1.4em;\n        --gn-ui-button-rounded: 1.4em;\n        --gn-ui-button-background: var(--gn-ui-badge-background-color, white);\n      \"\n    >\n      <ng-icon name=\"matClose\"></ng-icon>\n    </gn-ui-button>\n  }\n</div>\n" }]
+                    ], template: "<ng-template #badgeContent>\n  <span><ng-content></ng-content></span>\n</ng-template>\n\n@if (clickable) {\n  <button\n    type=\"button\"\n    class=\"gn-ui-badge-clickable\"\n    (click)=\"handleClick($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"badgeContent\"></ng-container>\n  </button>\n} @else {\n  <span class=\"gn-ui-badge gap-1.5\">\n    <ng-container [ngTemplateOutlet]=\"badgeContent\"></ng-container>\n    @if (removable) {\n      <gn-ui-button\n        type=\"light\"\n        (buttonClick)=\"removeBadge()\"\n        extraClass=\"text-xs border-0 px-0 py-0\"\n        style=\"\n          --gn-ui-button-padding: 0;\n          --gn-ui-button-font-size: 0.8em;\n          --gn-ui-button-width: 1.4em;\n          --gn-ui-button-height: 1.4em;\n          --gn-ui-button-rounded: 1.4em;\n          --gn-ui-button-background: var(--gn-ui-badge-background-color, white);\n        \"\n      >\n        <ng-icon name=\"matClose\"></ng-icon>\n      </gn-ui-button>\n    }\n  </span>\n}\n" }]
         }], propDecorators: { clickable: [{
                 type: Input
             }], removable: [{
                 type: Input
             }], badgeRemoveClicked: [{
                 type: Output
+            }], badgeClicked: [{
+                type: Output
             }] } });
 
 class CheckToggleComponent {
@@ -24597,7 +24687,7 @@ class DropdownMultiselectComponent {
         ];
         this.scrollStrategy = this.scrollStrategies.reposition();
         this.overlayOpen = false;
-        this.overlayWidth = 'auto';
+        this.overlayMinWidth = 'none';
         this.overlayMaxHeight = 'none';
         this.id = `dropdown-multiselect-${Math.floor(Math.random() * 10000)}`;
     }
@@ -24622,7 +24712,7 @@ class DropdownMultiselectComponent {
         }, 0);
     }
     openOverlay() {
-        this.overlayWidth =
+        this.overlayMinWidth =
             this.overlayOrigin.elementRef.nativeElement.getBoundingClientRect()
                 .width + 'px';
         this.overlayMaxHeight = this.maxRows
@@ -24724,7 +24814,7 @@ class DropdownMultiselectComponent {
                 matExpandMore,
                 matExpandLess,
             }),
-        ], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, read: ElementRef }, { propertyName: "searchFieldInput", first: true, predicate: ["searchFieldInput"], descendants: true }, { propertyName: "checkboxes", predicate: ["checkBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    @if (hasSelectedChoices) {\n      <div\n        class=\"gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n      >\n        {{ selected.length }}\n      </div>\n    }\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    @if (hasSelectedChoices && !overlayOpen) {\n      <ng-icon\n        class=\"shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n        (click)=\"clearSelection($event)\"\n        name=\"matClose\"\n      ></ng-icon>\n    }\n  </button>\n  <ng-icon\n    [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      @for (selected of selectedChoices; track selected) {\n        <button\n          type=\"button\"\n          [title]=\"selected.label\"\n          class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n          (click)=\"select(selected, false)\"\n        >\n          <div class=\"text-sm truncate leading-[26px] px-2\">\n            {{ selected.label }}\n          </div>\n          <div\n            class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n          >\n            <ng-icon\n              name=\"matClose\"\n              class=\"!h-[12px] !w-[11px] text-[12px]\"\n            ></ng-icon>\n          </div>\n        </button>\n      }\n\n      @if (allowSearch) {\n        <div class=\"w-[50%] relative grow shrink\">\n          <input\n            #searchFieldInput\n            class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n            [(ngModel)]=\"searchInputValue\"\n            [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n          />\n          @if (!!searchInputValue) {\n            <button\n              class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n              (click)=\"clearSearchInputValue($event)\"\n            >\n              <ng-icon class=\"!h-[10px] !w-[12px] text-[12px]\" name=\"matClose\">\n              </ng-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    @for (choice of filteredChoicesByText; track choice) {\n      <label\n        [title]=\"choice.label\"\n        class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n      >\n        <input\n          class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n          type=\"checkbox\"\n          #checkBox\n          [checked]=\"isSelected(choice)\"\n          (change)=\"select(choice, checkBox.checked)\"\n        />\n        <span class=\"ml-[8px] text-[14px] truncate\">\n          {{ choice.label }}\n        </span>\n      </label>\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$8.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$8.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, read: ElementRef }, { propertyName: "searchFieldInput", first: true, predicate: ["searchFieldInput"], descendants: true }, { propertyName: "checkboxes", predicate: ["checkBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    @if (hasSelectedChoices) {\n      <div\n        class=\"gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n      >\n        {{ selected.length }}\n      </div>\n    }\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    @if (hasSelectedChoices && !overlayOpen) {\n      <ng-icon\n        class=\"shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n        (click)=\"clearSelection($event)\"\n        name=\"matClose\"\n      ></ng-icon>\n    }\n  </button>\n  <ng-icon\n    [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.min-width]=\"overlayMinWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      @for (selected of selectedChoices; track selected) {\n        <button\n          type=\"button\"\n          [title]=\"selected.label\"\n          class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n          (click)=\"select(selected, false)\"\n        >\n          <div class=\"text-sm truncate leading-[26px] px-2\">\n            {{ selected.label }}\n          </div>\n          <div\n            class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n          >\n            <ng-icon\n              name=\"matClose\"\n              class=\"!h-[12px] !w-[11px] text-[12px]\"\n            ></ng-icon>\n          </div>\n        </button>\n      }\n\n      @if (allowSearch) {\n        <div class=\"w-[50%] relative grow shrink\">\n          <input\n            #searchFieldInput\n            class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n            [(ngModel)]=\"searchInputValue\"\n            [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n          />\n          @if (!!searchInputValue) {\n            <button\n              class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n              (click)=\"clearSearchInputValue($event)\"\n            >\n              <ng-icon class=\"!h-[10px] !w-[12px] text-[12px]\" name=\"matClose\">\n              </ng-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    @for (choice of filteredChoicesByText; track choice) {\n      <label\n        [title]=\"choice.label\"\n        class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n      >\n        <input\n          class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n          type=\"checkbox\"\n          #checkBox\n          [checked]=\"isSelected(choice)\"\n          (change)=\"select(choice, checkBox.checked)\"\n        />\n        <span class=\"ml-[8px] text-[14px] truncate\">\n          {{ choice.label }}\n        </span>\n      </label>\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$8.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$8.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DropdownMultiselectComponent, decorators: [{
             type: Component,
@@ -24734,7 +24824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                             matExpandMore,
                             matExpandLess,
                         }),
-                    ], standalone: true, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    @if (hasSelectedChoices) {\n      <div\n        class=\"gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n      >\n        {{ selected.length }}\n      </div>\n    }\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    @if (hasSelectedChoices && !overlayOpen) {\n      <ng-icon\n        class=\"shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n        (click)=\"clearSelection($event)\"\n        name=\"matClose\"\n      ></ng-icon>\n    }\n  </button>\n  <ng-icon\n    [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      @for (selected of selectedChoices; track selected) {\n        <button\n          type=\"button\"\n          [title]=\"selected.label\"\n          class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n          (click)=\"select(selected, false)\"\n        >\n          <div class=\"text-sm truncate leading-[26px] px-2\">\n            {{ selected.label }}\n          </div>\n          <div\n            class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n          >\n            <ng-icon\n              name=\"matClose\"\n              class=\"!h-[12px] !w-[11px] text-[12px]\"\n            ></ng-icon>\n          </div>\n        </button>\n      }\n\n      @if (allowSearch) {\n        <div class=\"w-[50%] relative grow shrink\">\n          <input\n            #searchFieldInput\n            class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n            [(ngModel)]=\"searchInputValue\"\n            [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n          />\n          @if (!!searchInputValue) {\n            <button\n              class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n              (click)=\"clearSearchInputValue($event)\"\n            >\n              <ng-icon class=\"!h-[10px] !w-[12px] text-[12px]\" name=\"matClose\">\n              </ng-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    @for (choice of filteredChoicesByText; track choice) {\n      <label\n        [title]=\"choice.label\"\n        class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n      >\n        <input\n          class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n          type=\"checkbox\"\n          #checkBox\n          [checked]=\"isSelected(choice)\"\n          (change)=\"select(choice, checkBox.checked)\"\n        />\n        <span class=\"ml-[8px] text-[14px] truncate\">\n          {{ choice.label }}\n        </span>\n      </label>\n    }\n  </div>\n</ng-template>\n" }]
+                    ], standalone: true, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    @if (hasSelectedChoices) {\n      <div\n        class=\"gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n      >\n        {{ selected.length }}\n      </div>\n    }\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    @if (hasSelectedChoices && !overlayOpen) {\n      <ng-icon\n        class=\"shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n        (click)=\"clearSelection($event)\"\n        name=\"matClose\"\n      ></ng-icon>\n    }\n  </button>\n  <ng-icon\n    [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.min-width]=\"overlayMinWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      @for (selected of selectedChoices; track selected) {\n        <button\n          type=\"button\"\n          [title]=\"selected.label\"\n          class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n          (click)=\"select(selected, false)\"\n        >\n          <div class=\"text-sm truncate leading-[26px] px-2\">\n            {{ selected.label }}\n          </div>\n          <div\n            class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n          >\n            <ng-icon\n              name=\"matClose\"\n              class=\"!h-[12px] !w-[11px] text-[12px]\"\n            ></ng-icon>\n          </div>\n        </button>\n      }\n\n      @if (allowSearch) {\n        <div class=\"w-[50%] relative grow shrink\">\n          <input\n            #searchFieldInput\n            class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n            [(ngModel)]=\"searchInputValue\"\n            [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n          />\n          @if (!!searchInputValue) {\n            <button\n              class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n              (click)=\"clearSearchInputValue($event)\"\n            >\n              <ng-icon class=\"!h-[10px] !w-[12px] text-[12px]\" name=\"matClose\">\n              </ng-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    @for (choice of filteredChoicesByText; track choice) {\n      <label\n        [title]=\"choice.label\"\n        class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n      >\n        <input\n          class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n          type=\"checkbox\"\n          #checkBox\n          [checked]=\"isSelected(choice)\"\n          (change)=\"select(choice, checkBox.checked)\"\n        />\n        <span class=\"ml-[8px] text-[14px] truncate\">\n          {{ choice.label }}\n        </span>\n      </label>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], choices: [{
@@ -25444,45 +25534,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 
 class TextInputComponent {
     constructor() {
-        this.value = '';
-        this.extraClass = '';
-        this.required = false;
-        this.rawChange = new Subject();
-        this.valueChange = this.rawChange.pipe(distinctUntilChanged());
-    }
-    ngAfterViewInit() {
-        this.checkRequired(this.input.nativeElement.value);
-    }
-    checkRequired(value) {
-        this.input.nativeElement.classList.toggle('invalid', this.required && value === '');
+        this.value = input('', ...(ngDevMode ? [{ debugName: "value", transform: (v) => {
+                    this.inputModel.set(v);
+                    // make sure the native element value is up to date
+                    // TODO: use form() signal when migrated to angular 22 for cleaner implementation
+                    if (this.inputRef()) {
+                        this.inputRef().nativeElement.value = v;
+                    }
+                    return v;
+                } }] : [{
+                transform: (v) => {
+                    this.inputModel.set(v);
+                    // make sure the native element value is up to date
+                    // TODO: use form() signal when migrated to angular 22 for cleaner implementation
+                    if (this.inputRef()) {
+                        this.inputRef().nativeElement.value = v;
+                    }
+                    return v;
+                },
+            }]));
+        this.extraClass = input('', ...(ngDevMode ? [{ debugName: "extraClass" }] : []));
+        this.placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+        this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
+        this.type = input('text', ...(ngDevMode ? [{ debugName: "type", transform: (type) => {
+                    // make sure the native element type is up to date
+                    // TODO: use form() signal when migrated to angular 22 for cleaner implementation
+                    if (this.inputRef()) {
+                        this.inputRef().nativeElement.type = type;
+                    }
+                    return type;
+                } }] : [{
+                transform: (type) => {
+                    // make sure the native element type is up to date
+                    // TODO: use form() signal when migrated to angular 22 for cleaner implementation
+                    if (this.inputRef()) {
+                        this.inputRef().nativeElement.type = type;
+                    }
+                    return type;
+                },
+            }]));
+        this.valueChange = output();
+        this.inputModel = signal('', ...(ngDevMode ? [{ debugName: "inputModel" }] : []));
+        this.inputRef = viewChild('input', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+        this.isValid = computed(() => {
+            const isValid = this.inputRef().nativeElement.checkValidity();
+            const isEmpty = this.inputModel().trim() === '';
+            const isRequired = this.required();
+            return isValid && !(isEmpty && isRequired);
+        }, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
+        this.lastEmittedValue = undefined;
     }
     handleChange($event) {
-        const value = $event.target.value;
-        this.checkRequired(value);
-        this.rawChange.next(value);
+        const input = $event.target;
+        const value = input.value;
+        if (value === this.lastEmittedValue)
+            return;
+        this.inputModel.set(value);
+        this.lastEmittedValue = value;
+        this.valueChange.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: TextInputComponent, isStandalone: true, selector: "gn-ui-text-input", inputs: { value: "value", extraClass: "extraClass", placeholder: "placeholder", required: "required", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input\n  #input\n  class=\"gn-ui-text-input\"\n  [ngClass]=\"extraClass\"\n  type=\"text\"\n  [value]=\"value\"\n  (change)=\"handleChange($event)\"\n  (input)=\"handleChange($event)\"\n  [placeholder]=\"placeholder\"\n  [attr.aria-label]=\"placeholder\"\n  [attr.required]=\"required || null\"\n  [disabled]=\"disabled\"\n/>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.19", type: TextInputComponent, isStandalone: true, selector: "gn-ui-text-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #input\n  class=\"gn-ui-text-input\"\n  [class]=\"extraClass()\"\n  [ngClass]=\"{\n    'border-red-400 focus:border-red-800 hover:border-red-800 text-red-800':\n      !isValid(),\n  }\"\n  [type]=\"type()\"\n  [(ngModel)]=\"inputModel\"\n  (change)=\"handleChange($event)\"\n  (input)=\"handleChange($event)\"\n  [placeholder]=\"placeholder()\"\n  [attr.aria-label]=\"placeholder()\"\n  [attr.required]=\"required() || null\"\n  [disabled]=\"disabled()\"\n/>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-text-input', standalone: true, imports: [CommonModule], template: "<input\n  #input\n  class=\"gn-ui-text-input\"\n  [ngClass]=\"extraClass\"\n  type=\"text\"\n  [value]=\"value\"\n  (change)=\"handleChange($event)\"\n  (input)=\"handleChange($event)\"\n  [placeholder]=\"placeholder\"\n  [attr.aria-label]=\"placeholder\"\n  [attr.required]=\"required || null\"\n  [disabled]=\"disabled\"\n/>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], extraClass: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], input: [{
-                type: ViewChild,
-                args: ['input']
-            }] } });
+            args: [{ selector: 'gn-ui-text-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, FormsModule], template: "<input\n  #input\n  class=\"gn-ui-text-input\"\n  [class]=\"extraClass()\"\n  [ngClass]=\"{\n    'border-red-400 focus:border-red-800 hover:border-red-800 text-red-800':\n      !isValid(),\n  }\"\n  [type]=\"type()\"\n  [(ngModel)]=\"inputModel\"\n  (change)=\"handleChange($event)\"\n  (input)=\"handleChange($event)\"\n  [placeholder]=\"placeholder()\"\n  [attr.aria-label]=\"placeholder()\"\n  [attr.required]=\"required() || null\"\n  [disabled]=\"disabled()\"\n/>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], extraClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraClass", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
 
 class ViewportIntersectorComponent {
     constructor() {
@@ -25781,11 +25899,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 
 class FormFieldWrapperComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldWrapperComponent, isStandalone: true, selector: "gn-ui-form-field-wrapper", inputs: { label: "label", hint: "hint" }, ngImport: i0, template: "<div class=\"h-full flex flex-col\" *ngIf=\"label; else onlyContent\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\" translate=\"\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\n        *ngIf=\"hint\"\n        class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n        [matTooltip]=\"hint\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </div>\n  <div class=\"flex-1 mt-2\">\n    <ng-container *ngTemplateOutlet=\"onlyContent\"> </ng-container>\n  </div>\n</div>\n\n<ng-template #onlyContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldWrapperComponent, isStandalone: true, selector: "gn-ui-form-field-wrapper", inputs: { label: "label", hint: "hint" }, providers: [provideIcons({ matHelpOutline })], ngImport: i0, template: "<div class=\"h-full flex flex-col\" *ngIf=\"label; else onlyContent\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\" translate=\"\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <ng-icon\n        *ngIf=\"hint\"\n        name=\"matHelpOutline\"\n        size=\"16\"\n        class=\"m-2\"\n        [matTooltip]=\"hint\"\n        matTooltipPosition=\"above\"\n      ></ng-icon>\n    </div>\n  </div>\n  <div class=\"flex-1 mt-2\">\n    <ng-container *ngTemplateOutlet=\"onlyContent\"> </ng-container>\n  </div>\n</div>\n\n<ng-template #onlyContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-form-field-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatTooltipModule, CommonModule, TranslateDirective], template: "<div class=\"h-full flex flex-col\" *ngIf=\"label; else onlyContent\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\" translate=\"\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\n        *ngIf=\"hint\"\n        class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n        [matTooltip]=\"hint\"\n        matTooltipPosition=\"above\"\n      >\n        help\n      </span>\n    </div>\n  </div>\n  <div class=\"flex-1 mt-2\">\n    <ng-container *ngTemplateOutlet=\"onlyContent\"> </ng-container>\n  </div>\n</div>\n\n<ng-template #onlyContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+            args: [{ selector: 'gn-ui-form-field-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatTooltipModule,
+                        CommonModule,
+                        TranslateDirective,
+                        NgIconComponent,
+                    ], providers: [provideIcons({ matHelpOutline })], template: "<div class=\"h-full flex flex-col\" *ngIf=\"label; else onlyContent\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\" translate=\"\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <ng-icon\n        *ngIf=\"hint\"\n        name=\"matHelpOutline\"\n        size=\"16\"\n        class=\"m-2\"\n        [matTooltip]=\"hint\"\n        matTooltipPosition=\"above\"\n      ></ng-icon>\n    </div>\n  </div>\n  <div class=\"flex-1 mt-2\">\n    <ng-container *ngTemplateOutlet=\"onlyContent\"> </ng-container>\n  </div>\n</div>\n\n<ng-template #onlyContent>\n  <ng-content></ng-content>\n</ng-template>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -25892,9 +26015,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Output
             }] } });
 
-marker('editor.record.lock.resourceType');
-marker('editor.record.lock.harvested');
-marker('editor.record.lock.owner');
 class InteractiveTableComponent {
     constructor() {
         this.items = [];
@@ -25915,14 +26035,11 @@ class InteractiveTableComponent {
     }
     getItemTitle(item) {
         if (!this.isDraftPage) {
-            if (item.kind !== 'dataset') {
-                return 'editor.record.lock.resourceType';
-            }
-            else if (item.extras?.isHarvested) {
-                return 'editor.record.lock.harvested';
+            if (item.extras?.isHarvested) {
+                return marker('editor.record.lock.harvested');
             }
             else if (!item.extras?.edit) {
-                return 'editor.record.lock.owner';
+                return marker('editor.record.lock.owner');
             }
         }
         return '';
@@ -25931,11 +26048,11 @@ class InteractiveTableComponent {
         this.itemClick.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InteractiveTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: InteractiveTableComponent, isStandalone: true, selector: "gn-ui-interactive-table", inputs: { items: "items", canEditItem: "canEditItem", isDraftPage: "isDraftPage" }, outputs: { itemClick: "itemClick" }, providers: [provideIcons({ iconoirNavArrowDown, iconoirNavArrowUp })], queries: [{ propertyName: "columns", predicate: InteractiveTableColumnComponent }], ngImport: i0, template: "<div class=\"grid w-full\" [ngStyle]=\"gridStyle\">\n  <div class=\"contents w-full\">\n    @for (column of columns; track column) {\n      @if (column.sortable) {\n        <button\n          type=\"button\"\n          class=\"table-header-cell gap-1\"\n          (click)=\"column.sortable && column.handleSortChange()\"\n        >\n          <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n          @if (column.sortable) {\n            <div class=\"sort-button flex flex-col\">\n              <ng-icon\n                class=\"text-gray-600 -mb-2\"\n                [ngClass]=\"{ 'text-main': column.activeSort === 'asc' }\"\n                name=\"iconoirNavArrowUp\"\n              ></ng-icon>\n              <ng-icon\n                class=\"text-gray-600\"\n                [ngClass]=\"{ 'text-main': column.activeSort === 'desc' }\"\n                name=\"iconoirNavArrowDown\"\n              ></ng-icon>\n            </div>\n          }\n        </button>\n      }\n      @if (!column.sortable) {\n        <div class=\"table-header-cell\">\n          <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n        </div>\n      }\n    }\n  </div>\n  @for (item of items; track item) {\n    <div\n      class=\"contents text-gray-900 cursor-pointer group\"\n      (click)=\"handleRowClick(item)\"\n      data-cy=\"table-row\"\n      [attr.data-cy-title]=\"item.title\"\n      [title]=\"getItemTitle(item) | translate\"\n    >\n      <div\n        class=\"relative h-0\"\n        [ngStyle]=\"{ 'grid-column': 'span ' + this.columns.length }\"\n      >\n        <!-- this element is only used in keyboard navigation -->\n        <button\n          type=\"button\"\n          class=\"absolute inset-x-0 h-[50px] bg-transparent pointer-events-none\"\n        ></button>\n      </div>\n      @for (column of columns; track column) {\n        <div\n          class=\"table-row-cell px-3 py-1.5 flex items-center bg-white transition-colors duration-75 truncate border-b border-gray-200\"\n          [ngClass]=\"{\n            'text-purple-light cursor-default':\n              (canEditItem(item) | async) === false,\n            'group-hover:text-main group-hover:bg-gray-50':\n              canEditItem(item) | async,\n          }\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"column.cell; context: { $implicit: item }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".table-header-cell{@apply text-gray-700 px-3 py-3 flex items-center truncate bg-white;}button.table-header-cell{@apply transition-colors duration-75 hover:text-main hover:bg-gray-50 focus:text-main focus:bg-gray-50;}ng-icon{@apply w-4 h-4;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: InteractiveTableComponent, isStandalone: true, selector: "gn-ui-interactive-table", inputs: { items: "items", canEditItem: "canEditItem", isDraftPage: "isDraftPage" }, outputs: { itemClick: "itemClick" }, providers: [provideIcons({ iconoirNavArrowDown, iconoirNavArrowUp })], queries: [{ propertyName: "columns", predicate: InteractiveTableColumnComponent }], ngImport: i0, template: "<div class=\"grid w-full\" [ngStyle]=\"gridStyle\">\n  <div class=\"contents w-full\">\n    @for (column of columns; track column) {\n      @if (column.sortable) {\n        <button\n          type=\"button\"\n          class=\"table-header-cell gap-1\"\n          (click)=\"column.sortable && column.handleSortChange()\"\n        >\n          <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n          @if (column.sortable) {\n            <div class=\"sort-button flex flex-col\">\n              <ng-icon\n                class=\"text-gray-600 -mb-2\"\n                [ngClass]=\"{ 'text-main': column.activeSort === 'asc' }\"\n                name=\"iconoirNavArrowUp\"\n              ></ng-icon>\n              <ng-icon\n                class=\"text-gray-600\"\n                [ngClass]=\"{ 'text-main': column.activeSort === 'desc' }\"\n                name=\"iconoirNavArrowDown\"\n              ></ng-icon>\n            </div>\n          }\n        </button>\n      }\n      @if (!column.sortable) {\n        <div class=\"table-header-cell\">\n          <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n        </div>\n      }\n    }\n  </div>\n  @for (item of items; track item) {\n    <div\n      class=\"contents text-gray-900 cursor-pointer group\"\n      (click)=\"handleRowClick(item)\"\n      data-cy=\"table-row\"\n      [attr.data-cy-title]=\"item.title\"\n      [title]=\"getItemTitle(item) | translate: { recordKind: item['kind'] }\"\n    >\n      <div\n        class=\"relative h-0\"\n        [ngStyle]=\"{ 'grid-column': 'span ' + this.columns.length }\"\n      >\n        <!-- this element is only used in keyboard navigation -->\n        <button\n          type=\"button\"\n          class=\"absolute inset-x-0 h-[50px] bg-transparent pointer-events-none\"\n        ></button>\n      </div>\n      @for (column of columns; track column) {\n        <div\n          class=\"table-row-cell px-3 py-1.5 flex items-center bg-white transition-colors duration-75 truncate border-b border-gray-200\"\n          [ngClass]=\"{\n            'text-purple-light cursor-default':\n              (canEditItem(item) | async) === false,\n            'group-hover:text-main group-hover:bg-gray-50':\n              canEditItem(item) | async,\n          }\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"column.cell; context: { $implicit: item }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".table-header-cell{@apply text-gray-700 px-3 py-3 flex items-center truncate bg-white;}button.table-header-cell{@apply transition-colors duration-75 hover:text-main hover:bg-gray-50 focus:text-main focus:bg-gray-50;}ng-icon{@apply w-4 h-4;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: InteractiveTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-interactive-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, NgIconComponent, TranslatePipe], providers: [provideIcons({ iconoirNavArrowDown, iconoirNavArrowUp })], template: "<div class=\"grid w-full\" [ngStyle]=\"gridStyle\">\n  <div class=\"contents w-full\">\n    @for (column of columns; track column) {\n      @if (column.sortable) {\n        <button\n          type=\"button\"\n          class=\"table-header-cell gap-1\"\n          (click)=\"column.sortable && column.handleSortChange()\"\n        >\n          <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n          @if (column.sortable) {\n            <div class=\"sort-button flex flex-col\">\n              <ng-icon\n                class=\"text-gray-600 -mb-2\"\n                [ngClass]=\"{ 'text-main': column.activeSort === 'asc' }\"\n                name=\"iconoirNavArrowUp\"\n              ></ng-icon>\n              <ng-icon\n                class=\"text-gray-600\"\n                [ngClass]=\"{ 'text-main': column.activeSort === 'desc' }\"\n                name=\"iconoirNavArrowDown\"\n              ></ng-icon>\n            </div>\n          }\n        </button>\n      }\n      @if (!column.sortable) {\n        <div class=\"table-header-cell\">\n          <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n        </div>\n      }\n    }\n  </div>\n  @for (item of items; track item) {\n    <div\n      class=\"contents text-gray-900 cursor-pointer group\"\n      (click)=\"handleRowClick(item)\"\n      data-cy=\"table-row\"\n      [attr.data-cy-title]=\"item.title\"\n      [title]=\"getItemTitle(item) | translate\"\n    >\n      <div\n        class=\"relative h-0\"\n        [ngStyle]=\"{ 'grid-column': 'span ' + this.columns.length }\"\n      >\n        <!-- this element is only used in keyboard navigation -->\n        <button\n          type=\"button\"\n          class=\"absolute inset-x-0 h-[50px] bg-transparent pointer-events-none\"\n        ></button>\n      </div>\n      @for (column of columns; track column) {\n        <div\n          class=\"table-row-cell px-3 py-1.5 flex items-center bg-white transition-colors duration-75 truncate border-b border-gray-200\"\n          [ngClass]=\"{\n            'text-purple-light cursor-default':\n              (canEditItem(item) | async) === false,\n            'group-hover:text-main group-hover:bg-gray-50':\n              canEditItem(item) | async,\n          }\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"column.cell; context: { $implicit: item }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".table-header-cell{@apply text-gray-700 px-3 py-3 flex items-center truncate bg-white;}button.table-header-cell{@apply transition-colors duration-75 hover:text-main hover:bg-gray-50 focus:text-main focus:bg-gray-50;}ng-icon{@apply w-4 h-4;}\n"] }]
+            args: [{ selector: 'gn-ui-interactive-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, NgIconComponent, TranslatePipe], providers: [provideIcons({ iconoirNavArrowDown, iconoirNavArrowUp })], template: "<div class=\"grid w-full\" [ngStyle]=\"gridStyle\">\n  <div class=\"contents w-full\">\n    @for (column of columns; track column) {\n      @if (column.sortable) {\n        <button\n          type=\"button\"\n          class=\"table-header-cell gap-1\"\n          (click)=\"column.sortable && column.handleSortChange()\"\n        >\n          <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n          @if (column.sortable) {\n            <div class=\"sort-button flex flex-col\">\n              <ng-icon\n                class=\"text-gray-600 -mb-2\"\n                [ngClass]=\"{ 'text-main': column.activeSort === 'asc' }\"\n                name=\"iconoirNavArrowUp\"\n              ></ng-icon>\n              <ng-icon\n                class=\"text-gray-600\"\n                [ngClass]=\"{ 'text-main': column.activeSort === 'desc' }\"\n                name=\"iconoirNavArrowDown\"\n              ></ng-icon>\n            </div>\n          }\n        </button>\n      }\n      @if (!column.sortable) {\n        <div class=\"table-header-cell\">\n          <ng-container *ngTemplateOutlet=\"column.header\"></ng-container>\n        </div>\n      }\n    }\n  </div>\n  @for (item of items; track item) {\n    <div\n      class=\"contents text-gray-900 cursor-pointer group\"\n      (click)=\"handleRowClick(item)\"\n      data-cy=\"table-row\"\n      [attr.data-cy-title]=\"item.title\"\n      [title]=\"getItemTitle(item) | translate: { recordKind: item['kind'] }\"\n    >\n      <div\n        class=\"relative h-0\"\n        [ngStyle]=\"{ 'grid-column': 'span ' + this.columns.length }\"\n      >\n        <!-- this element is only used in keyboard navigation -->\n        <button\n          type=\"button\"\n          class=\"absolute inset-x-0 h-[50px] bg-transparent pointer-events-none\"\n        ></button>\n      </div>\n      @for (column of columns; track column) {\n        <div\n          class=\"table-row-cell px-3 py-1.5 flex items-center bg-white transition-colors duration-75 truncate border-b border-gray-200\"\n          [ngClass]=\"{\n            'text-purple-light cursor-default':\n              (canEditItem(item) | async) === false,\n            'group-hover:text-main group-hover:bg-gray-50':\n              canEditItem(item) | async,\n          }\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"column.cell; context: { $implicit: item }\"\n          ></ng-container>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".table-header-cell{@apply text-gray-700 px-3 py-3 flex items-center truncate bg-white;}button.table-header-cell{@apply transition-colors duration-75 hover:text-main hover:bg-gray-50 focus:text-main focus:bg-gray-50;}ng-icon{@apply w-4 h-4;}\n"] }]
         }], propDecorators: { columns: [{
                 type: ContentChildren,
                 args: [InteractiveTableColumnComponent]
@@ -26161,11 +26278,18 @@ class SortableListComponent {
         return index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SortableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SortableListComponent, isStandalone: true, selector: "gn-ui-sortable-list", inputs: { elementTemplate: "elementTemplate", items: "items" }, outputs: { itemsOrderChange: "itemsOrderChange" }, ngImport: i0, template: "<div\n  cdkDropList\n  class=\"sortable-list flex flex-col gap-3 p-2\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  @for (item of items; track trackByFn(index); let index = $index) {\n    <div class=\"sortable-box bg-white flex items-center\" cdkDrag>\n      <span\n        cdkDragHandle\n        class=\"material-symbols-outlined mx-[10px] cursor-grab gn-ui-icon-medium flex-none\"\n      >\n        drag_handle\n      </span>\n      <div class=\"flex-1\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            elementTemplate;\n            context: { $implicit: item, index }\n          \"\n        ></ng-container>\n      </div>\n      <gn-ui-button\n        type=\"light\"\n        style=\"\n          --gn-ui-button-padding: 0px;\n          --gn-ui-button-width: 24px;\n          --gn-ui-button-height: 24px;\n        \"\n        class=\"ml-[8px] mr-[10px]\"\n        (buttonClick)=\"removeItem(index)\"\n        data-test=\"remove-item\"\n        ><span class=\"material-symbols-outlined gn-ui-icon-medium\">close</span>\n      </gn-ui-button>\n    </div>\n  }\n</div>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.sortable-list.cdk-drop-list-dragging .sortable-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SortableListComponent, isStandalone: true, selector: "gn-ui-sortable-list", inputs: { elementTemplate: "elementTemplate", items: "items" }, outputs: { itemsOrderChange: "itemsOrderChange" }, providers: [provideIcons({ matDragHandleOutline, matCloseOutline })], ngImport: i0, template: "<div\n  cdkDropList\n  class=\"sortable-list flex flex-col gap-3 p-2\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  @for (item of items; track trackByFn(index); let index = $index) {\n    <div class=\"sortable-box bg-white flex items-center\" cdkDrag>\n      <ng-icon\n        cdkDragHandle\n        name=\"matDragHandleOutline\"\n        size=\"20\"\n        class=\"mx-[10px] cursor-grab flex-none\"\n      ></ng-icon>\n      <div class=\"flex-1\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            elementTemplate;\n            context: { $implicit: item, index }\n          \"\n        ></ng-container>\n      </div>\n      <gn-ui-button\n        type=\"light\"\n        style=\"\n          --gn-ui-button-padding: 0px;\n          --gn-ui-button-width: 24px;\n          --gn-ui-button-height: 24px;\n        \"\n        class=\"ml-[8px] mr-[10px]\"\n        (buttonClick)=\"removeItem(index)\"\n        data-test=\"remove-item\"\n        ><ng-icon name=\"matCloseOutline\" size=\"20\"></ng-icon\n      ></gn-ui-button>\n    </div>\n  }\n</div>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.sortable-list.cdk-drop-list-dragging .sortable-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SortableListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-sortable-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, CdkDropList, CdkDrag, CdkDragHandle, ButtonComponent], template: "<div\n  cdkDropList\n  class=\"sortable-list flex flex-col gap-3 p-2\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  @for (item of items; track trackByFn(index); let index = $index) {\n    <div class=\"sortable-box bg-white flex items-center\" cdkDrag>\n      <span\n        cdkDragHandle\n        class=\"material-symbols-outlined mx-[10px] cursor-grab gn-ui-icon-medium flex-none\"\n      >\n        drag_handle\n      </span>\n      <div class=\"flex-1\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            elementTemplate;\n            context: { $implicit: item, index }\n          \"\n        ></ng-container>\n      </div>\n      <gn-ui-button\n        type=\"light\"\n        style=\"\n          --gn-ui-button-padding: 0px;\n          --gn-ui-button-width: 24px;\n          --gn-ui-button-height: 24px;\n        \"\n        class=\"ml-[8px] mr-[10px]\"\n        (buttonClick)=\"removeItem(index)\"\n        data-test=\"remove-item\"\n        ><span class=\"material-symbols-outlined gn-ui-icon-medium\">close</span>\n      </gn-ui-button>\n    </div>\n  }\n</div>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.sortable-list.cdk-drop-list-dragging .sortable-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'gn-ui-sortable-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        CdkDropList,
+                        CdkDrag,
+                        CdkDragHandle,
+                        ButtonComponent,
+                        NgIconComponent,
+                    ], providers: [provideIcons({ matDragHandleOutline, matCloseOutline })], template: "<div\n  cdkDropList\n  class=\"sortable-list flex flex-col gap-3 p-2\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  @for (item of items; track trackByFn(index); let index = $index) {\n    <div class=\"sortable-box bg-white flex items-center\" cdkDrag>\n      <ng-icon\n        cdkDragHandle\n        name=\"matDragHandleOutline\"\n        size=\"20\"\n        class=\"mx-[10px] cursor-grab flex-none\"\n      ></ng-icon>\n      <div class=\"flex-1\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            elementTemplate;\n            context: { $implicit: item, index }\n          \"\n        ></ng-container>\n      </div>\n      <gn-ui-button\n        type=\"light\"\n        style=\"\n          --gn-ui-button-padding: 0px;\n          --gn-ui-button-width: 24px;\n          --gn-ui-button-height: 24px;\n        \"\n        class=\"ml-[8px] mr-[10px]\"\n        (buttonClick)=\"removeItem(index)\"\n        data-test=\"remove-item\"\n        ><ng-icon name=\"matCloseOutline\" size=\"20\"></ng-icon\n      ></gn-ui-button>\n    </div>\n  }\n</div>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.sortable-list.cdk-drop-list-dragging .sortable-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], propDecorators: { elementTemplate: [{
                 type: Input
             }], items: [{
@@ -26463,7 +26587,7 @@ class AddLayerFromOgcApiComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLayerFromOgcApiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AddLayerFromOgcApiComponent, isStandalone: true, selector: "gn-ui-add-layer-from-ogc-api", inputs: { ogcUrl: "ogcUrl" }, outputs: { layerAdded: "layerAdded" }, ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"ogcUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [placeholder]=\"'map.ogc.urlInput.hint' | translate\"\n    class=\"w-96\"\n  ></gn-ui-text-input>\n</div>\n\n@if (errorMessage) {\n  <div class=\"text-red-500 mt-2\">\n    {{ errorMessage }}\n  </div>\n}\n\n@if (loading) {\n  <div>\n    <p class=\"loading-message\" translate>map.loading.service</p>\n  </div>\n}\n\n@for (layer of layers; track layer) {\n  @if (shouldDisplayLayer(layer)) {\n    <div class=\"flex items-center justify-between my-2 layer-item-tree\">\n      <div class=\"flex flex-col items-start w-full\">\n        <p\n          class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\"\n          [title]=\"layer.name\"\n        >\n          {{ layer.name }}\n        </p>\n        <div class=\"flex justify-between items-center w-full\">\n          <gn-ui-dropdown-selector\n            [title]=\"'Add Layer As' | translate\"\n            [choices]=\"getLayerChoices(layer)\"\n            (selectValue)=\"onLayerTypeSelect(layer.name, $event)\"\n            [selected]=\"selectedLayerTypes[layer.name]\"\n            extraBtnClass=\"w-6 h-5 !text-sm !px-2 !py-1\"\n          ></gn-ui-dropdown-selector>\n          <gn-ui-button\n            class=\"layer-add-btn\"\n            type=\"primary\"\n            (buttonClick)=\"addLayer(layer.name, selectedLayerTypes[layer.name])\"\n            extraClass=\"text-sm !px-2 !py-1\"\n            translate\n          >\n            <span translate>map.layer.add</span>\n          </gn-ui-button>\n        </div>\n      </div>\n    </div>\n  }\n}\n", styles: [".dropdown-content{display:none}.relative:hover .dropdown-content{display:block}\n"], dependencies: [{ kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AddLayerFromOgcApiComponent, isStandalone: true, selector: "gn-ui-add-layer-from-ogc-api", inputs: { ogcUrl: "ogcUrl" }, outputs: { layerAdded: "layerAdded" }, ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"ogcUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [placeholder]=\"'map.ogc.urlInput.hint' | translate\"\n    class=\"w-96\"\n  ></gn-ui-text-input>\n</div>\n\n@if (errorMessage) {\n  <div class=\"text-red-500 mt-2\">\n    {{ errorMessage }}\n  </div>\n}\n\n@if (loading) {\n  <div>\n    <p class=\"loading-message\" translate>map.loading.service</p>\n  </div>\n}\n\n@for (layer of layers; track layer) {\n  @if (shouldDisplayLayer(layer)) {\n    <div class=\"flex items-center justify-between my-2 layer-item-tree\">\n      <div class=\"flex flex-col items-start w-full\">\n        <p\n          class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\"\n          [title]=\"layer.name\"\n        >\n          {{ layer.name }}\n        </p>\n        <div class=\"flex justify-between items-center w-full\">\n          <gn-ui-dropdown-selector\n            [title]=\"'Add Layer As' | translate\"\n            [choices]=\"getLayerChoices(layer)\"\n            (selectValue)=\"onLayerTypeSelect(layer.name, $event)\"\n            [selected]=\"selectedLayerTypes[layer.name]\"\n            extraBtnClass=\"w-6 h-5 !text-sm !px-2 !py-1\"\n          ></gn-ui-dropdown-selector>\n          <gn-ui-button\n            class=\"layer-add-btn\"\n            type=\"primary\"\n            (buttonClick)=\"addLayer(layer.name, selectedLayerTypes[layer.name])\"\n            extraClass=\"text-sm !px-2 !py-1\"\n            translate\n          >\n            <span translate>map.layer.add</span>\n          </gn-ui-button>\n        </div>\n      </div>\n    </div>\n  }\n}\n", styles: [".dropdown-content{display:none}.relative:hover .dropdown-content{display:block}\n"], dependencies: [{ kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled", "type"], outputs: ["valueChange"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLayerFromOgcApiComponent, decorators: [{
             type: Component,
@@ -26529,7 +26653,7 @@ class AddLayerFromWfsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLayerFromWfsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AddLayerFromWfsComponent, isStandalone: true, selector: "gn-ui-add-layer-from-wfs", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wfsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [placeholder]=\"'map.wfs.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n@if (errorMessage) {\n  <div class=\"text-red-500 mt-2\">\n    {{ errorMessage }}\n  </div>\n}\n\n@if (loading) {\n  <div>\n    <p class=\"loading-message\" translate>map.loading.service</p>\n  </div>\n}\n\n@if (!loading && layers.length > 0) {\n  <div>\n    <h2 class=\"font-bold\" translate>map.layers.available</h2>\n    @for (layer of layers; track layer) {\n      <div class=\"flex items-center justify-between my-2 layer-item-tree\">\n        <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n          {{ layer.title }}\n        </p>\n        @if (layer.name) {\n          <gn-ui-button\n            class=\"layer-add-btn\"\n            type=\"primary\"\n            (buttonClick)=\"addLayer(layer)\"\n            extraClass=\"text-sm !px-2 !py-1\"\n            translate\n            ><span translate> map.layer.add </span></gn-ui-button\n          >\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AddLayerFromWfsComponent, isStandalone: true, selector: "gn-ui-add-layer-from-wfs", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wfsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [placeholder]=\"'map.wfs.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n@if (errorMessage) {\n  <div class=\"text-red-500 mt-2\">\n    {{ errorMessage }}\n  </div>\n}\n\n@if (loading) {\n  <div>\n    <p class=\"loading-message\" translate>map.loading.service</p>\n  </div>\n}\n\n@if (!loading && layers.length > 0) {\n  <div>\n    <h2 class=\"font-bold\" translate>map.layers.available</h2>\n    @for (layer of layers; track layer) {\n      <div class=\"flex items-center justify-between my-2 layer-item-tree\">\n        <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n          {{ layer.title }}\n        </p>\n        @if (layer.name) {\n          <gn-ui-button\n            class=\"layer-add-btn\"\n            type=\"primary\"\n            (buttonClick)=\"addLayer(layer)\"\n            extraClass=\"text-sm !px-2 !py-1\"\n            translate\n            ><span translate> map.layer.add </span></gn-ui-button\n          >\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled", "type"], outputs: ["valueChange"] }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLayerFromWfsComponent, decorators: [{
             type: Component,
@@ -26590,7 +26714,7 @@ class AddLayerFromWmsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLayerFromWmsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AddLayerFromWmsComponent, isStandalone: true, selector: "gn-ui-add-layer-from-wms", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wmsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [placeholder]=\"'map.wms.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n@if (errorMessage) {\n  <div class=\"text-red-500 mt-2\">\n    {{ errorMessage }}\n  </div>\n}\n\n@if (loading) {\n  <div>\n    <p class=\"loading-message\" translate>map.loading.service</p>\n  </div>\n}\n\n@if (!loading && layers.length > 0) {\n  <div>\n    <h2 class=\"font-bold\" translate>map.layers.available</h2>\n    @for (layer of layers; track layer) {\n      <ng-container\n        [ngTemplateOutlet]=\"layerTreeItem\"\n        [ngTemplateOutletContext]=\"{\n          layer: layer,\n        }\"\n      ></ng-container>\n    }\n  </div>\n}\n\n<ng-template #layerTreeItem let-layer=\"layer\">\n  <div class=\"flex items-center justify-between layer-tree-item my-2\">\n    <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n      {{ layer.title }}\n    </p>\n    @if (layer.name) {\n      <gn-ui-button\n        class=\"layer-add-btn\"\n        type=\"primary\"\n        (buttonClick)=\"addLayer(layer)\"\n        extraClass=\"text-sm !px-2 !py-1\"\n        translate\n        ><span translate> map.layer.add </span></gn-ui-button\n      >\n    }\n  </div>\n  @if (layer.children?.length > 0) {\n    <div class=\"ml-4\">\n      @for (child of layer.children; track child) {\n        <ng-container\n          [ngTemplateOutlet]=\"layerTreeItem\"\n          [ngTemplateOutletContext]=\"{\n            layer: child,\n          }\"\n        >\n        </ng-container>\n      }\n    </div>\n  }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AddLayerFromWmsComponent, isStandalone: true, selector: "gn-ui-add-layer-from-wms", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wmsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [placeholder]=\"'map.wms.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n@if (errorMessage) {\n  <div class=\"text-red-500 mt-2\">\n    {{ errorMessage }}\n  </div>\n}\n\n@if (loading) {\n  <div>\n    <p class=\"loading-message\" translate>map.loading.service</p>\n  </div>\n}\n\n@if (!loading && layers.length > 0) {\n  <div>\n    <h2 class=\"font-bold\" translate>map.layers.available</h2>\n    @for (layer of layers; track layer) {\n      <ng-container\n        [ngTemplateOutlet]=\"layerTreeItem\"\n        [ngTemplateOutletContext]=\"{\n          layer: layer,\n        }\"\n      ></ng-container>\n    }\n  </div>\n}\n\n<ng-template #layerTreeItem let-layer=\"layer\">\n  <div class=\"flex items-center justify-between layer-tree-item my-2\">\n    <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n      {{ layer.title }}\n    </p>\n    @if (layer.name) {\n      <gn-ui-button\n        class=\"layer-add-btn\"\n        type=\"primary\"\n        (buttonClick)=\"addLayer(layer)\"\n        extraClass=\"text-sm !px-2 !py-1\"\n        translate\n        ><span translate> map.layer.add </span></gn-ui-button\n      >\n    }\n  </div>\n  @if (layer.children?.length > 0) {\n    <div class=\"ml-4\">\n      @for (child of layer.children; track child) {\n        <ng-container\n          [ngTemplateOutlet]=\"layerTreeItem\"\n          [ngTemplateOutletContext]=\"{\n            layer: child,\n          }\"\n        >\n        </ng-container>\n      }\n    </div>\n  }\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled", "type"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLayerFromWmsComponent, decorators: [{
             type: Component,
@@ -28682,7 +28806,7 @@ class ImageInputComponent {
             provideNgIconsConfig({
                 size: '1.5rem',
             }),
-        ], ngImport: i0, template: "@if (previewUrl) {\n  <div class=\"w-[314px] h-full flex flex-col gap-2\">\n    <gn-ui-image-overlay-preview\n      class=\"w-[314px] h-[314px]\"\n      [imageUrl]=\"previewUrl\"\n    >\n    </gn-ui-image-overlay-preview>\n    @if (showAltTextInput) {\n      <gn-ui-text-input\n        [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n        [value]=\"altText ?? ''\"\n        (valueChange)=\"handleAltTextChange($event)\"\n        extraClass=\"gn-ui-editor-textarea\"\n      ></gn-ui-text-input>\n    }\n    <div class=\"flex flex-row gap-2 mt-2\">\n      <gn-ui-button\n        type=\"gray\"\n        (buttonClick)=\"handleDelete()\"\n        data-cy=\"delete-image\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirBin\"></ng-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      @if (!showAltTextInput) {\n        <gn-ui-button type=\"gray\" (buttonClick)=\"toggleAltTextInput()\">\n          <ng-icon name=\"iconoirPlus\" class=\"me-1 text-primary\"></ng-icon>\n          {{ 'input.image.displayAltTextInput' | translate }}\n        </gn-ui-button>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100\"\n      [ngClass]=\"{\n        'border-primary-lighter bg-primary-white': dragFilesOver,\n        'border-gray-300': !dragFilesOver,\n        'cursor-pointer hover:border-gray-500': !getIsActionBlocked(),\n        'cursor-not-allowed': disabled,\n      }\"\n      [attr.tabindex]=\"getIsActionBlocked() ? null : 0\"\n      (keydown.enter)=\"fileInput.click()\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      @if (!isUploadInProgress && !imageFileError) {\n        <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\">\n          @if (!dragFilesOver) {\n            <ng-icon\n              class=\"place-self-center text-primary\"\n              name=\"iconoirMediaImage\"\n            ></ng-icon>\n          }\n          @if (dragFilesOver) {\n            <ng-icon\n              class=\"place-self-center text-primary\"\n              name=\"iconoirFramePlusIn\"\n            ></ng-icon>\n          }\n        </div>\n      }\n      @if (isUploadInProgress && !imageFileError) {\n        <div class=\"w-14 h-14 grid items-center justify-center relative\">\n          <div class=\"text-gray-100 absolute\">\n            <mat-progress-spinner\n              class=\"place-self-center\"\n              [diameter]=\"56\"\n              mode=\"determinate\"\n              [value]=\"100\"\n            ></mat-progress-spinner>\n          </div>\n          <div class=\"text-primary absolute\">\n            <mat-progress-spinner\n              class=\"place-self-center\"\n              [diameter]=\"56\"\n              mode=\"determinate\"\n              [value]=\"uploadProgress\"\n            ></mat-progress-spinner>\n          </div>\n          <span class=\"text-sm text-main font-bold\">{{ uploadProgress }}%</span>\n        </div>\n      }\n      @if (imageFileError) {\n        <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\">\n          <ng-icon\n            name=\"iconoirMediaImageXmark\"\n            class=\"place-self-center text-rose-500\"\n            data-cy=\"imgErrorIcon\"\n          ></ng-icon>\n        </div>\n      }\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\" data-cy=\"imgInputMsgPrimary\">\n          {{ getPrimaryText() | translate }}\n        </p>\n        <p\n          class=\"text-sm\"\n          data-cy=\"imgInputMsgSecondary\"\n          [class]=\"\n            isUploadInProgress\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick($event)\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        #fileInput\n        accept=\"image/*\"\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      />\n    </label>\n    @if (!showUrlInput) {\n      <div class=\"flex-none mt-2\">\n        <gn-ui-button\n          data-cy=\"imgUrlBtn\"\n          (buttonClick)=\"displayUrlInput()\"\n          type=\"gray\"\n          [disabled]=\"disabled\"\n          [extraClass]=\"disabled && 'cursor-not-allowed'\"\n        >\n          <ng-icon class=\"me-1 text-primary\" name=\"iconoirLink\"></ng-icon>\n          {{ 'input.image.displayUrlInput' | translate }}\n        </gn-ui-button>\n      </div>\n    }\n    @if (showUrlInput) {\n      <gn-ui-url-input\n        class=\"mt-3.5\"\n        data-cy=\"imgUrlInput\"\n        (uploadClick)=\"downloadUrl($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      >\n      </gn-ui-url-input>\n    }\n  </div>\n}\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "directive", type: FilesDropDirective, selector: "[gnUiFilesDrop]", outputs: ["dragFilesOver", "dropFiles"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ImageOverlayPreviewComponent, selector: "gn-ui-image-overlay-preview", inputs: ["imageUrl"], outputs: ["isPlaceholderShown"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@if (previewUrl) {\n  <div class=\"w-[314px] h-full flex flex-col gap-2\">\n    <gn-ui-image-overlay-preview\n      class=\"w-[314px] h-[314px]\"\n      [imageUrl]=\"previewUrl\"\n    >\n    </gn-ui-image-overlay-preview>\n    @if (showAltTextInput) {\n      <gn-ui-text-input\n        [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n        [value]=\"altText ?? ''\"\n        (valueChange)=\"handleAltTextChange($event)\"\n        extraClass=\"gn-ui-editor-textarea\"\n      ></gn-ui-text-input>\n    }\n    <div class=\"flex flex-row gap-2 mt-2\">\n      <gn-ui-button\n        type=\"gray\"\n        (buttonClick)=\"handleDelete()\"\n        data-cy=\"delete-image\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirBin\"></ng-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      @if (!showAltTextInput) {\n        <gn-ui-button type=\"gray\" (buttonClick)=\"toggleAltTextInput()\">\n          <ng-icon name=\"iconoirPlus\" class=\"me-1 text-primary\"></ng-icon>\n          {{ 'input.image.displayAltTextInput' | translate }}\n        </gn-ui-button>\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100\"\n      [ngClass]=\"{\n        'border-primary-lighter bg-primary-white': dragFilesOver,\n        'border-gray-300': !dragFilesOver,\n        'cursor-pointer hover:border-gray-500': !getIsActionBlocked(),\n        'cursor-not-allowed': disabled,\n      }\"\n      [attr.tabindex]=\"getIsActionBlocked() ? null : 0\"\n      (keydown.enter)=\"fileInput.click()\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      @if (!isUploadInProgress && !imageFileError) {\n        <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\">\n          @if (!dragFilesOver) {\n            <ng-icon\n              class=\"place-self-center text-primary\"\n              name=\"iconoirMediaImage\"\n            ></ng-icon>\n          }\n          @if (dragFilesOver) {\n            <ng-icon\n              class=\"place-self-center text-primary\"\n              name=\"iconoirFramePlusIn\"\n            ></ng-icon>\n          }\n        </div>\n      }\n      @if (isUploadInProgress && !imageFileError) {\n        <div class=\"w-14 h-14 grid items-center justify-center relative\">\n          <div class=\"text-gray-100 absolute\">\n            <mat-progress-spinner\n              class=\"place-self-center\"\n              [diameter]=\"56\"\n              mode=\"determinate\"\n              [value]=\"100\"\n            ></mat-progress-spinner>\n          </div>\n          <div class=\"text-primary absolute\">\n            <mat-progress-spinner\n              class=\"place-self-center\"\n              [diameter]=\"56\"\n              mode=\"determinate\"\n              [value]=\"uploadProgress\"\n            ></mat-progress-spinner>\n          </div>\n          <span class=\"text-sm text-main font-bold\">{{ uploadProgress }}%</span>\n        </div>\n      }\n      @if (imageFileError) {\n        <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\">\n          <ng-icon\n            name=\"iconoirMediaImageXmark\"\n            class=\"place-self-center text-rose-500\"\n            data-cy=\"imgErrorIcon\"\n          ></ng-icon>\n        </div>\n      }\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\" data-cy=\"imgInputMsgPrimary\">\n          {{ getPrimaryText() | translate }}\n        </p>\n        <p\n          class=\"text-sm\"\n          data-cy=\"imgInputMsgSecondary\"\n          [class]=\"\n            isUploadInProgress\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick($event)\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        #fileInput\n        accept=\"image/*\"\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      />\n    </label>\n    @if (!showUrlInput) {\n      <div class=\"flex-none mt-2\">\n        <gn-ui-button\n          data-cy=\"imgUrlBtn\"\n          (buttonClick)=\"displayUrlInput()\"\n          type=\"gray\"\n          [disabled]=\"disabled\"\n          [extraClass]=\"disabled && 'cursor-not-allowed'\"\n        >\n          <ng-icon class=\"me-1 text-primary\" name=\"iconoirLink\"></ng-icon>\n          {{ 'input.image.displayUrlInput' | translate }}\n        </gn-ui-button>\n      </div>\n    }\n    @if (showUrlInput) {\n      <gn-ui-url-input\n        class=\"mt-3.5\"\n        data-cy=\"imgUrlInput\"\n        (uploadClick)=\"downloadUrl($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      >\n      </gn-ui-url-input>\n    }\n  </div>\n}\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "directive", type: FilesDropDirective, selector: "[gnUiFilesDrop]", outputs: ["dragFilesOver", "dropFiles"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled", "type"], outputs: ["valueChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ImageOverlayPreviewComponent, selector: "gn-ui-image-overlay-preview", inputs: ["imageUrl"], outputs: ["isPlaceholderShown"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ImageInputComponent, decorators: [{
             type: Component,
@@ -28841,17 +28965,17 @@ class ExternalLinkCardComponent {
                 iconoirDatabase,
             }),
             provideNgIconsConfig({ size: '1.5em' }),
-        ], ngImport: i0, template: "@if (isDatabase) {\n  <div [ngClass]=\"cardClass\" [title]=\"title\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    <div\n      class=\"flex min-w-[32px]\"\n      [ngClass]=\"size === 'S' ? 'items-end' : 'items-center'\"\n    >\n      <div\n        class=\"gn-ui-card-icon\"\n        [title]=\"'record.metadata.link.postgis.tooltip' | translate\"\n      >\n        <ng-icon\n          class=\"inline-block card-icon align-middle\"\n          name=\"iconoirDatabase\"\n        ></ng-icon>\n      </div>\n    </div>\n  </div>\n} @else {\n  <a [href]=\"link.url\" target=\"_blank\" [ngClass]=\"cardClass\" [title]=\"title\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    <div\n      class=\"flex min-w-[32px]\"\n      [ngClass]=\"size === 'S' ? 'items-end' : 'items-center'\"\n    >\n      <div class=\"gn-ui-card-icon\">\n        <ng-icon\n          class=\"inline-block card-icon align-middle\"\n          name=\"matOpenInNew\"\n        ></ng-icon>\n      </div>\n    </div>\n  </a>\n}\n\n<ng-template #cardContent>\n  <div class=\"flex flex-col justify-between flex-1 min-w-0\">\n    <div class=\"gn-ui-card-title\">\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"gn-ui-card-detail\">\n      @if (isDatabase) {\n        {{ 'record.metadata.link.postgis.table' | translate }}\n      }\n      {{ link.name }}\n    </div>\n    @if (!link.name && !link.description) {\n      <p class=\"gn-ui-card-title\">\n        {{ link.url }}\n      </p>\n    }\n    <div class=\"pt-1\">\n      <span\n        class=\"inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100\"\n        [style.background-color]=\"getLinkColor(link)\"\n        data-cy=\"download-format\"\n      >\n        {{ getLinkFormat(link) || ('downloads.format.unknown' | translate) }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "@if (isDatabase) {\n  <div [ngClass]=\"cardClass\" [title]=\"title\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    <div\n      class=\"flex min-w-[32px]\"\n      [ngClass]=\"size === 'S' ? 'items-end' : 'items-center'\"\n    >\n      <div\n        class=\"gn-ui-card-icon\"\n        [title]=\"'record.metadata.link.postgis.tooltip' | translate\"\n      >\n        <ng-icon\n          class=\"inline-block card-icon align-middle\"\n          name=\"iconoirDatabase\"\n        ></ng-icon>\n      </div>\n    </div>\n  </div>\n} @else {\n  <a [href]=\"link.url\" target=\"_blank\" [ngClass]=\"cardClass\" [title]=\"title\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    <div\n      class=\"flex min-w-[32px]\"\n      [ngClass]=\"size === 'S' ? 'items-end' : 'items-center'\"\n    >\n      <div class=\"gn-ui-card-icon\">\n        <ng-icon\n          class=\"inline-block card-icon align-middle\"\n          name=\"matOpenInNew\"\n        ></ng-icon>\n      </div>\n    </div>\n  </a>\n}\n\n<ng-template #cardContent>\n  <div class=\"flex flex-col justify-between flex-1 min-w-0\">\n    <div class=\"gn-ui-card-title\">\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"gn-ui-card-detail\">\n      @if (isDatabase) {\n        {{ 'record.metadata.link.postgis.table' | translate }}\n      }\n      {{ link.name }}\n    </div>\n    @if (!link.name && !link.description) {\n      <p class=\"gn-ui-card-title\">\n        {{ link.url }}\n      </p>\n    }\n    <div class=\"pt-1\">\n      <span\n        class=\"inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100\"\n        [style.background-color]=\"getLinkColor(link)\"\n        data-cy=\"download-format\"\n        translate\n      >\n        downloads.format.{{ getLinkFormat(link) || 'unknown' }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ExternalLinkCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-external-link-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, NgIconComponent, TranslatePipe], providers: [
+            args: [{ selector: 'gn-ui-external-link-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, NgIconComponent, TranslateDirective, TranslatePipe], providers: [
                         provideIcons({
                             matOpenInNew,
                             iconoirDatabase,
                         }),
                         provideNgIconsConfig({ size: '1.5em' }),
-                    ], template: "@if (isDatabase) {\n  <div [ngClass]=\"cardClass\" [title]=\"title\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    <div\n      class=\"flex min-w-[32px]\"\n      [ngClass]=\"size === 'S' ? 'items-end' : 'items-center'\"\n    >\n      <div\n        class=\"gn-ui-card-icon\"\n        [title]=\"'record.metadata.link.postgis.tooltip' | translate\"\n      >\n        <ng-icon\n          class=\"inline-block card-icon align-middle\"\n          name=\"iconoirDatabase\"\n        ></ng-icon>\n      </div>\n    </div>\n  </div>\n} @else {\n  <a [href]=\"link.url\" target=\"_blank\" [ngClass]=\"cardClass\" [title]=\"title\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    <div\n      class=\"flex min-w-[32px]\"\n      [ngClass]=\"size === 'S' ? 'items-end' : 'items-center'\"\n    >\n      <div class=\"gn-ui-card-icon\">\n        <ng-icon\n          class=\"inline-block card-icon align-middle\"\n          name=\"matOpenInNew\"\n        ></ng-icon>\n      </div>\n    </div>\n  </a>\n}\n\n<ng-template #cardContent>\n  <div class=\"flex flex-col justify-between flex-1 min-w-0\">\n    <div class=\"gn-ui-card-title\">\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"gn-ui-card-detail\">\n      @if (isDatabase) {\n        {{ 'record.metadata.link.postgis.table' | translate }}\n      }\n      {{ link.name }}\n    </div>\n    @if (!link.name && !link.description) {\n      <p class=\"gn-ui-card-title\">\n        {{ link.url }}\n      </p>\n    }\n    <div class=\"pt-1\">\n      <span\n        class=\"inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100\"\n        [style.background-color]=\"getLinkColor(link)\"\n        data-cy=\"download-format\"\n      >\n        {{ getLinkFormat(link) || ('downloads.format.unknown' | translate) }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n" }]
+                    ], template: "@if (isDatabase) {\n  <div [ngClass]=\"cardClass\" [title]=\"title\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    <div\n      class=\"flex min-w-[32px]\"\n      [ngClass]=\"size === 'S' ? 'items-end' : 'items-center'\"\n    >\n      <div\n        class=\"gn-ui-card-icon\"\n        [title]=\"'record.metadata.link.postgis.tooltip' | translate\"\n      >\n        <ng-icon\n          class=\"inline-block card-icon align-middle\"\n          name=\"iconoirDatabase\"\n        ></ng-icon>\n      </div>\n    </div>\n  </div>\n} @else {\n  <a [href]=\"link.url\" target=\"_blank\" [ngClass]=\"cardClass\" [title]=\"title\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n    <div\n      class=\"flex min-w-[32px]\"\n      [ngClass]=\"size === 'S' ? 'items-end' : 'items-center'\"\n    >\n      <div class=\"gn-ui-card-icon\">\n        <ng-icon\n          class=\"inline-block card-icon align-middle\"\n          name=\"matOpenInNew\"\n        ></ng-icon>\n      </div>\n    </div>\n  </a>\n}\n\n<ng-template #cardContent>\n  <div class=\"flex flex-col justify-between flex-1 min-w-0\">\n    <div class=\"gn-ui-card-title\">\n      {{ link.description || link.name }}\n    </div>\n    <div class=\"gn-ui-card-detail\">\n      @if (isDatabase) {\n        {{ 'record.metadata.link.postgis.table' | translate }}\n      }\n      {{ link.name }}\n    </div>\n    @if (!link.name && !link.description) {\n      <p class=\"gn-ui-card-title\">\n        {{ link.url }}\n      </p>\n    }\n    <div class=\"pt-1\">\n      <span\n        class=\"inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded transition-opacity opacity-70 group-hover:opacity-100\"\n        [style.background-color]=\"getLinkColor(link)\"\n        data-cy=\"download-format\"\n        translate\n      >\n        downloads.format.{{ getLinkFormat(link) || 'unknown' }}\n      </span>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { link: [{
                 type: Input
             }], size: [{
@@ -28907,6 +29031,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Output
             }] } });
 
+marker('domain.record.keywordType.theme');
+marker('domain.record.keywordType.place');
+marker('domain.record.keywordType.temporal');
+marker('domain.record.keywordType.other');
+class KeywordBadgeComponent {
+    constructor() {
+        this.translateService = inject(TranslateService);
+        this.editable = false; // if false, keyword is only clickable
+        this.keywordClick = new EventEmitter();
+        this.keywordRemove = new EventEmitter();
+    }
+    get segments() {
+        if (this.keyword.hierarchyPath?.length) {
+            return this.keyword.hierarchyPath;
+        }
+        if (this.keyword.thesaurus?.name) {
+            return [this.keyword.thesaurus.name, this.keyword.label];
+        }
+        return [
+            this.translateService.instant(`domain.record.keywordType.${this.keyword.type}`),
+            this.keyword.label,
+        ];
+    }
+    get isPlaceWithoutExtent() {
+        return this.keyword.type === 'place' && !this.keyword.bbox;
+    }
+    ngAfterViewInit() {
+        const content = this.segments
+            .map((segment, i, arr) => `<span ${i === arr.length - 1 ? 'class="font-bold"' : ''}>${segment}</span>`)
+            .join(' &gt; ');
+        tippy(this.badgeComponent.nativeElement, {
+            appendTo: () => document.body,
+            content,
+            allowHTML: true,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: KeywordBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: KeywordBadgeComponent, isStandalone: true, selector: "gn-ui-keyword-badge", inputs: { keyword: "keyword", editable: "editable" }, outputs: { keywordClick: "keywordClick", keywordRemove: "keywordRemove" }, providers: [
+            provideIcons({
+                matWarningAmberOutline,
+            }),
+            provideNgIconsConfig({
+                size: '1.5em',
+            }),
+        ], viewQueries: [{ propertyName: "badgeComponent", first: true, predicate: BadgeComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-badge\n  [clickable]=\"!editable\"\n  [removable]=\"editable\"\n  (badgeClicked)=\"keywordClick.emit(keyword)\"\n  (badgeRemoveClicked)=\"keywordRemove.emit(keyword)\"\n  ><ng-container>{{ keyword.label }}</ng-container>\n  @if (editable && isPlaceWithoutExtent) {\n    <ng-icon\n      [title]=\"'editor.record.form.keywords.place.withoutExtent' | translate\"\n      class=\"!text-[1.4em] ml-1\"\n      name=\"matWarningAmberOutline\"\n    ></ng-icon>\n  }\n</gn-ui-badge>\n", dependencies: [{ kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked", "badgeClicked"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: KeywordBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-keyword-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [BadgeComponent, NgIconComponent, TranslatePipe], providers: [
+                        provideIcons({
+                            matWarningAmberOutline,
+                        }),
+                        provideNgIconsConfig({
+                            size: '1.5em',
+                        }),
+                    ], template: "<gn-ui-badge\n  [clickable]=\"!editable\"\n  [removable]=\"editable\"\n  (badgeClicked)=\"keywordClick.emit(keyword)\"\n  (badgeRemoveClicked)=\"keywordRemove.emit(keyword)\"\n  ><ng-container>{{ keyword.label }}</ng-container>\n  @if (editable && isPlaceWithoutExtent) {\n    <ng-icon\n      [title]=\"'editor.record.form.keywords.place.withoutExtent' | translate\"\n      class=\"!text-[1.4em] ml-1\"\n      name=\"matWarningAmberOutline\"\n    ></ng-icon>\n  }\n</gn-ui-badge>\n" }]
+        }], propDecorators: { keyword: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], keywordClick: [{
+                type: Output
+            }], keywordRemove: [{
+                type: Output
+            }], badgeComponent: [{
+                type: ViewChild,
+                args: [BadgeComponent, { read: ElementRef }]
+            }] } });
+
 class MetadataCatalogComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MetadataCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: MetadataCatalogComponent, isStandalone: true, selector: "gn-ui-metadata-catalog", inputs: { sourceLabel: "sourceLabel" }, ngImport: i0, template: "<div class=\"text-black\">\n  <p class=\"text-base mb-3\" translate>record.metadata.catalog</p>\n  <p class=\"font-title text-21 mb-1\">\n    {{ sourceLabel }}\n  </p>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -29075,7 +29268,7 @@ class ContactDetailsComponent {
         return getAddressLines(this.contact?.address);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ContactDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ContactDetailsComponent, isStandalone: true, selector: "gn-ui-contact-details", inputs: { contact: "contact" }, ngImport: i0, template: "<div\n  class=\"bg-gray-50 text-black rounded border border-gray-200 shadow-md p-4 flex flex-col gap-3 w-full\"\n  data-test=\"contact-details\"\n>\n  @if (displayName) {\n    <div class=\"flex items-center gap-3\">\n      @if (organization?.logoUrl?.href) {\n        <div\n          class=\"flex items-center justify-center rounded-md bg-white w-14 h-14 shrink-0 overflow-hidden\"\n        >\n          <gn-ui-thumbnail\n            class=\"relative h-full w-full\"\n            [thumbnailUrl]=\"organization.logoUrl.href\"\n            fit=\"contain\"\n          ></gn-ui-thumbnail>\n        </div>\n      }\n      <span\n        class=\"font-title text-xl leading-tight\"\n        data-test=\"contact-details-name\"\n        >{{ displayName }}</span\n      >\n    </div>\n  }\n\n  <!-- Email + phone: always shown; icon dimmed when field is absent -->\n  <div class=\"grid grid-cols-2 gap-1 rounded-md overflow-hidden\">\n    <div class=\"bg-gray-100 flex items-center gap-2 px-3 py-2\">\n      <ng-icon\n        class=\"!w-5 !h-5 !text-[20px] shrink-0\"\n        [class.opacity-30]=\"!contact.email\"\n        [class.opacity-75]=\"!!contact.email\"\n        name=\"matMailOutline\"\n      ></ng-icon>\n      @if (contact.email) {\n        <a\n          [href]=\"'mailto:' + contact.email\"\n          class=\"text-sm break-all hover:underline\"\n          data-test=\"contact-details-email\"\n          >{{ contact.email }}</a\n        >\n      }\n    </div>\n    <div class=\"bg-gray-100 flex items-center gap-2 px-3 py-2\">\n      <ng-icon\n        class=\"!w-5 !h-5 !text-[20px] shrink-0\"\n        [class.opacity-30]=\"!contact.phone\"\n        [class.opacity-75]=\"!!contact.phone\"\n        name=\"matCallOutline\"\n      ></ng-icon>\n      @if (contact.phone) {\n        <span class=\"text-sm\" data-test=\"contact-details-phone\">{{\n          contact.phone\n        }}</span>\n      }\n    </div>\n  </div>\n\n  <!-- Address: always shown; icon dimmed when absent -->\n  <div class=\"bg-gray-100 rounded-md flex items-start gap-2 px-3 py-2\">\n    <ng-icon\n      class=\"!w-5 !h-5 !text-[20px] shrink-0 mt-0.5\"\n      [class.opacity-30]=\"!addressLines.length\"\n      [class.opacity-75]=\"!!addressLines.length\"\n      name=\"matLocationOnOutline\"\n    ></ng-icon>\n    @if (addressLines.length) {\n      <div class=\"flex flex-col\" data-test=\"contact-details-address\">\n        @for (line of addressLines; track line) {\n          <p class=\"text-sm m-0\">{{ line }}</p>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Website: only shown when org exists; icon dimmed when absent -->\n  @if (organization) {\n    <div class=\"bg-gray-100 rounded-md flex items-center gap-2 px-3 py-2\">\n      <ng-icon\n        class=\"!w-5 !h-5 !text-[20px] shrink-0\"\n        [class.opacity-30]=\"!organization.website\"\n        [class.opacity-75]=\"!!organization.website\"\n        name=\"matOpenInNew\"\n      ></ng-icon>\n      @if (organization.website) {\n        <a\n          [href]=\"organization.website.href\"\n          target=\"_blank\"\n          class=\"text-sm break-all hover:underline\"\n          data-test=\"contact-details-website\"\n          >{{ organization.website.href }}</a\n        >\n      }\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "ngmodule", type: TranslateModule }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ContactDetailsComponent, isStandalone: true, selector: "gn-ui-contact-details", inputs: { contact: "contact" }, ngImport: i0, template: "<div\n  class=\"bg-gray-50 text-black rounded border border-gray-200 shadow-md p-4 flex flex-col gap-2 w-full\"\n  data-test=\"contact-details\"\n>\n  @if (displayName) {\n    <div class=\"flex items-center gap-2.5\">\n      @if (organization?.logoUrl?.href) {\n        <div\n          class=\"flex items-center justify-center rounded-lg bg-white w-14 h-14 shrink-0 overflow-hidden\"\n        >\n          <gn-ui-thumbnail\n            class=\"relative h-full w-full\"\n            [thumbnailUrl]=\"organization.logoUrl.href\"\n            fit=\"contain\"\n          ></gn-ui-thumbnail>\n        </div>\n      }\n      <span\n        class=\"font-title text-xl leading-tight\"\n        data-test=\"contact-details-name\"\n        >{{ displayName }}</span\n      >\n    </div>\n  }\n\n  @if (contact.email || contact.phone) {\n    <div\n      class=\"grid gap-1 items-start\"\n      [class.grid-cols-2]=\"contact.email && contact.phone\"\n    >\n      @if (contact.email) {\n        <div class=\"bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] shrink-0 opacity-30\"\n            name=\"matMailOutline\"\n          ></ng-icon>\n          <a\n            [href]=\"'mailto:' + contact.email\"\n            class=\"text-sm break-all hover:underline\"\n            data-test=\"contact-details-email\"\n            >{{ contact.email }}</a\n          >\n        </div>\n      }\n      @if (contact.phone) {\n        <div class=\"bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] shrink-0 opacity-30\"\n            name=\"matCallOutline\"\n          ></ng-icon>\n          <span class=\"text-sm\" data-test=\"contact-details-phone\">{{\n            contact.phone\n          }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  @if (addressLines.length) {\n    <div class=\"bg-gray-100 rounded-lg flex items-start gap-2 px-3 py-2\">\n      <ng-icon\n        class=\"!w-5 !h-5 !text-[20px] shrink-0 mt-0.5 opacity-30\"\n        name=\"matLocationOnOutline\"\n      ></ng-icon>\n      <div class=\"flex flex-col\" data-test=\"contact-details-address\">\n        @for (line of addressLines; track line) {\n          <p class=\"text-sm m-0\">{{ line }}</p>\n        }\n      </div>\n    </div>\n  }\n\n  @if (organization?.website) {\n    <div class=\"bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2\">\n      <ng-icon\n        class=\"!w-5 !h-5 !text-[20px] shrink-0 opacity-30\"\n        name=\"matOpenInNew\"\n      ></ng-icon>\n      <a\n        [href]=\"organization.website.href\"\n        target=\"_blank\"\n        class=\"text-sm break-all hover:underline\"\n        data-test=\"contact-details-website\"\n        >{{ organization.website.href }}</a\n      >\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "ngmodule", type: TranslateModule }], viewProviders: [
             provideIcons({
                 matCallOutline,
                 matLocationOnOutline,
@@ -29093,7 +29286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                             matMailOutline,
                             matOpenInNew,
                         }),
-                    ], template: "<div\n  class=\"bg-gray-50 text-black rounded border border-gray-200 shadow-md p-4 flex flex-col gap-3 w-full\"\n  data-test=\"contact-details\"\n>\n  @if (displayName) {\n    <div class=\"flex items-center gap-3\">\n      @if (organization?.logoUrl?.href) {\n        <div\n          class=\"flex items-center justify-center rounded-md bg-white w-14 h-14 shrink-0 overflow-hidden\"\n        >\n          <gn-ui-thumbnail\n            class=\"relative h-full w-full\"\n            [thumbnailUrl]=\"organization.logoUrl.href\"\n            fit=\"contain\"\n          ></gn-ui-thumbnail>\n        </div>\n      }\n      <span\n        class=\"font-title text-xl leading-tight\"\n        data-test=\"contact-details-name\"\n        >{{ displayName }}</span\n      >\n    </div>\n  }\n\n  <!-- Email + phone: always shown; icon dimmed when field is absent -->\n  <div class=\"grid grid-cols-2 gap-1 rounded-md overflow-hidden\">\n    <div class=\"bg-gray-100 flex items-center gap-2 px-3 py-2\">\n      <ng-icon\n        class=\"!w-5 !h-5 !text-[20px] shrink-0\"\n        [class.opacity-30]=\"!contact.email\"\n        [class.opacity-75]=\"!!contact.email\"\n        name=\"matMailOutline\"\n      ></ng-icon>\n      @if (contact.email) {\n        <a\n          [href]=\"'mailto:' + contact.email\"\n          class=\"text-sm break-all hover:underline\"\n          data-test=\"contact-details-email\"\n          >{{ contact.email }}</a\n        >\n      }\n    </div>\n    <div class=\"bg-gray-100 flex items-center gap-2 px-3 py-2\">\n      <ng-icon\n        class=\"!w-5 !h-5 !text-[20px] shrink-0\"\n        [class.opacity-30]=\"!contact.phone\"\n        [class.opacity-75]=\"!!contact.phone\"\n        name=\"matCallOutline\"\n      ></ng-icon>\n      @if (contact.phone) {\n        <span class=\"text-sm\" data-test=\"contact-details-phone\">{{\n          contact.phone\n        }}</span>\n      }\n    </div>\n  </div>\n\n  <!-- Address: always shown; icon dimmed when absent -->\n  <div class=\"bg-gray-100 rounded-md flex items-start gap-2 px-3 py-2\">\n    <ng-icon\n      class=\"!w-5 !h-5 !text-[20px] shrink-0 mt-0.5\"\n      [class.opacity-30]=\"!addressLines.length\"\n      [class.opacity-75]=\"!!addressLines.length\"\n      name=\"matLocationOnOutline\"\n    ></ng-icon>\n    @if (addressLines.length) {\n      <div class=\"flex flex-col\" data-test=\"contact-details-address\">\n        @for (line of addressLines; track line) {\n          <p class=\"text-sm m-0\">{{ line }}</p>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Website: only shown when org exists; icon dimmed when absent -->\n  @if (organization) {\n    <div class=\"bg-gray-100 rounded-md flex items-center gap-2 px-3 py-2\">\n      <ng-icon\n        class=\"!w-5 !h-5 !text-[20px] shrink-0\"\n        [class.opacity-30]=\"!organization.website\"\n        [class.opacity-75]=\"!!organization.website\"\n        name=\"matOpenInNew\"\n      ></ng-icon>\n      @if (organization.website) {\n        <a\n          [href]=\"organization.website.href\"\n          target=\"_blank\"\n          class=\"text-sm break-all hover:underline\"\n          data-test=\"contact-details-website\"\n          >{{ organization.website.href }}</a\n        >\n      }\n    </div>\n  }\n</div>\n" }]
+                    ], template: "<div\n  class=\"bg-gray-50 text-black rounded border border-gray-200 shadow-md p-4 flex flex-col gap-2 w-full\"\n  data-test=\"contact-details\"\n>\n  @if (displayName) {\n    <div class=\"flex items-center gap-2.5\">\n      @if (organization?.logoUrl?.href) {\n        <div\n          class=\"flex items-center justify-center rounded-lg bg-white w-14 h-14 shrink-0 overflow-hidden\"\n        >\n          <gn-ui-thumbnail\n            class=\"relative h-full w-full\"\n            [thumbnailUrl]=\"organization.logoUrl.href\"\n            fit=\"contain\"\n          ></gn-ui-thumbnail>\n        </div>\n      }\n      <span\n        class=\"font-title text-xl leading-tight\"\n        data-test=\"contact-details-name\"\n        >{{ displayName }}</span\n      >\n    </div>\n  }\n\n  @if (contact.email || contact.phone) {\n    <div\n      class=\"grid gap-1 items-start\"\n      [class.grid-cols-2]=\"contact.email && contact.phone\"\n    >\n      @if (contact.email) {\n        <div class=\"bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] shrink-0 opacity-30\"\n            name=\"matMailOutline\"\n          ></ng-icon>\n          <a\n            [href]=\"'mailto:' + contact.email\"\n            class=\"text-sm break-all hover:underline\"\n            data-test=\"contact-details-email\"\n            >{{ contact.email }}</a\n          >\n        </div>\n      }\n      @if (contact.phone) {\n        <div class=\"bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] shrink-0 opacity-30\"\n            name=\"matCallOutline\"\n          ></ng-icon>\n          <span class=\"text-sm\" data-test=\"contact-details-phone\">{{\n            contact.phone\n          }}</span>\n        </div>\n      }\n    </div>\n  }\n\n  @if (addressLines.length) {\n    <div class=\"bg-gray-100 rounded-lg flex items-start gap-2 px-3 py-2\">\n      <ng-icon\n        class=\"!w-5 !h-5 !text-[20px] shrink-0 mt-0.5 opacity-30\"\n        name=\"matLocationOnOutline\"\n      ></ng-icon>\n      <div class=\"flex flex-col\" data-test=\"contact-details-address\">\n        @for (line of addressLines; track line) {\n          <p class=\"text-sm m-0\">{{ line }}</p>\n        }\n      </div>\n    </div>\n  }\n\n  @if (organization?.website) {\n    <div class=\"bg-gray-100 rounded-lg flex items-center gap-2 px-3 py-2\">\n      <ng-icon\n        class=\"!w-5 !h-5 !text-[20px] shrink-0 opacity-30\"\n        name=\"matOpenInNew\"\n      ></ng-icon>\n      <a\n        [href]=\"organization.website.href\"\n        target=\"_blank\"\n        class=\"text-sm break-all hover:underline\"\n        data-test=\"contact-details-website\"\n        >{{ organization.website.href }}</a\n      >\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { contact: [{
                 type: Input
             }] } });
@@ -29227,7 +29420,7 @@ class MetadataInfoComponent {
         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-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 $index) {\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 py-4 px-2\">\n          <p class=\"text-xs font-normal text-black\">\n            {{ group.roleLabel | translate }}\n          </p>\n          <div class=\"grid gap-1 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: [
+    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-keyword-badge\n              [keyword]=\"keyword\"\n              (keywordClick)=\"onKeywordClick($event)\"\n            ></gn-ui-keyword-badge>\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 $index) {\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 py-4 px-2\">\n          <p class=\"text-xs font-normal text-black\">\n            {{ group.roleLabel | translate }}\n          </p>\n          <div class=\"grid gap-1 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)}.metadata-info-keywords{--gn-ui-badge-padding: .25rem .5rem;text-transform:lowercase}\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", "badgeClicked"] }, { 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: "component", type: KeywordBadgeComponent, selector: "gn-ui-keyword-badge", inputs: ["keyword", "editable"], outputs: ["keywordClick", "keywordRemove"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], viewProviders: [
             provideIcons({
                 matOpenInNew,
                 matMailOutline: matMailOutline$1,
@@ -29241,7 +29434,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         TranslatePipe,
                         MarkdownParserComponent,
                         ExpandablePanelComponent,
-                        ButtonComponent,
                         BadgeComponent,
                         ContentGhostComponent,
                         MaxLinesComponent,
@@ -29251,12 +29443,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         GnUiHumanizeDateDirective,
                         SpatialExtentComponent,
                         ContactPillComponent,
+                        KeywordBadgeComponent,
                     ], 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-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 $index) {\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 py-4 px-2\">\n          <p class=\"text-xs font-normal text-black\">\n            {{ group.roleLabel | translate }}\n          </p>\n          <div class=\"grid gap-1 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"] }]
+                    ], 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-keyword-badge\n              [keyword]=\"keyword\"\n              (keywordClick)=\"onKeywordClick($event)\"\n            ></gn-ui-keyword-badge>\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 $index) {\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 py-4 px-2\">\n          <p class=\"text-xs font-normal text-black\">\n            {{ group.roleLabel | translate }}\n          </p>\n          <div class=\"grid gap-1 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)}.metadata-info-keywords{--gn-ui-badge-padding: .25rem .5rem;text-transform:lowercase}\n"] }]
         }], propDecorators: { metadata: [{
                 type: Input
             }], incomplete: [{
@@ -29554,7 +29747,7 @@ class RecordApiFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RecordApiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: RecordApiFormComponent, isStandalone: true, selector: "gn-ui-record-api-form", inputs: { apiLink: "apiLink" }, ngImport: i0, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary/50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            placeholder=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3 relative\">\n        <p class=\"text-sm\" [class.text-gray-600]=\"!supportOffset\" translate>\n          record.metadata.api.form.offset\n        </p>\n        <div class=\"flex items-center\">\n          <gn-ui-text-input\n            class=\"w-20\"\n            [value]=\"offset$ | async\"\n            [disabled]=\"!supportOffset\"\n            (valueChange)=\"supportOffset ? setOffset($event) : null\"\n            placeholder=\"\"\n          >\n          </gn-ui-text-input>\n          @if (!supportOffset) {\n            <div class=\"flex items-center gap-2 text-orange-500 z-10 ml-3\">\n              <span\n                class=\"material-symbols-outlined\"\n                matTooltip=\"Not supported on this service\"\n              >\n                warning\n              </span>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"outputFormats\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button ng-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover ng-icon{color:#d3d3d3!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: RecordApiFormComponent, isStandalone: true, selector: "gn-ui-record-api-form", inputs: { apiLink: "apiLink" }, providers: [provideIcons({ matWarningOutline })], ngImport: i0, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary/50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            placeholder=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3 relative\">\n        <p class=\"text-sm\" [class.text-gray-600]=\"!supportOffset\" translate>\n          record.metadata.api.form.offset\n        </p>\n        <div class=\"flex items-center\">\n          <gn-ui-text-input\n            class=\"w-20\"\n            [value]=\"offset$ | async\"\n            [disabled]=\"!supportOffset\"\n            (valueChange)=\"supportOffset ? setOffset($event) : null\"\n            placeholder=\"\"\n          >\n          </gn-ui-text-input>\n          @if (!supportOffset) {\n            <div class=\"flex items-center gap-2 text-orange-500 z-10 ml-3\">\n              <ng-icon\n                name=\"matWarningOutline\"\n                size=\"24\"\n                matTooltip=\"Not supported on this service\"\n              ></ng-icon>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"outputFormats\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button ng-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover ng-icon{color:#d3d3d3!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled", "type"], outputs: ["valueChange"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { 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: RecordApiFormComponent, decorators: [{
             type: Component,
@@ -29565,7 +29758,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         CopyTextButtonComponent,
                         TranslateDirective,
                         MatTooltipModule,
-                    ], template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary/50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            placeholder=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3 relative\">\n        <p class=\"text-sm\" [class.text-gray-600]=\"!supportOffset\" translate>\n          record.metadata.api.form.offset\n        </p>\n        <div class=\"flex items-center\">\n          <gn-ui-text-input\n            class=\"w-20\"\n            [value]=\"offset$ | async\"\n            [disabled]=\"!supportOffset\"\n            (valueChange)=\"supportOffset ? setOffset($event) : null\"\n            placeholder=\"\"\n          >\n          </gn-ui-text-input>\n          @if (!supportOffset) {\n            <div class=\"flex items-center gap-2 text-orange-500 z-10 ml-3\">\n              <span\n                class=\"material-symbols-outlined\"\n                matTooltip=\"Not supported on this service\"\n              >\n                warning\n              </span>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"outputFormats\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button ng-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover ng-icon{color:#d3d3d3!important}\n"] }]
+                        NgIconComponent,
+                    ], providers: [provideIcons({ matWarningOutline })], template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary/50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            placeholder=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3 relative\">\n        <p class=\"text-sm\" [class.text-gray-600]=\"!supportOffset\" translate>\n          record.metadata.api.form.offset\n        </p>\n        <div class=\"flex items-center\">\n          <gn-ui-text-input\n            class=\"w-20\"\n            [value]=\"offset$ | async\"\n            [disabled]=\"!supportOffset\"\n            (valueChange)=\"supportOffset ? setOffset($event) : null\"\n            placeholder=\"\"\n          >\n          </gn-ui-text-input>\n          @if (!supportOffset) {\n            <div class=\"flex items-center gap-2 text-orange-500 z-10 ml-3\">\n              <ng-icon\n                name=\"matWarningOutline\"\n                size=\"24\"\n                matTooltip=\"Not supported on this service\"\n              ></ng-icon>\n            </div>\n          }\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"outputFormats\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button ng-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover ng-icon{color:#d3d3d3!important}\n"] }]
         }], propDecorators: { apiLink: [{
                 type: Input
             }] } });
@@ -29917,7 +30111,7 @@ class ServiceCapabilitiesComponent {
             : `h-8 rounded-lg`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ServiceCapabilitiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ServiceCapabilitiesComponent, isStandalone: true, selector: "gn-ui-service-capabilities", inputs: { apiLinks: "apiLinks" }, ngImport: i0, template: "@if (apiLinks.length > 0) {\n  <div style=\"height: 652px\" id=\"preview\">\n    <div class=\"bg-primary/10 overflow-visible\" style=\"height: 420px\">\n      <div class=\"container-lg px-4 lg:mx-auto\">\n        <div>\n          <div class=\"gn-ui-section-title mb-6\" translate>\n            service.metadata.capabilities\n          </div>\n          @if (loading) {\n            <div class=\"flex justify-center w-full h-[200px] items-center\">\n              <gn-ui-spinning-loader></gn-ui-spinning-loader>\n            </div>\n          }\n          @if (!loading) {\n            <div>\n              <div class=\"flex flex-row gap-5\">\n                <div class=\"h-14 md:w-2/5 w-full mb-4 flex flex-row relative\">\n                  <gn-ui-text-input\n                    class=\"w-full\"\n                    [(value)]=\"searchQuery\"\n                    [extraClass]=\"getExtraInputClass()\"\n                    [placeholder]=\"'service.metadata.search' | translate\"\n                    (input)=\"onSearchChange($event)\"\n                    (keydown.enter)=\"onSearchEnter($event)\"\n                  >\n                  </gn-ui-text-input>\n                  <div\n                    class=\"absolute right-14 h-14 w-14 flex items-center justify-center\"\n                  >\n                    @if (searchQuery) {\n                      <button\n                        #inputBtn\n                        [aria-label]=\"\n                          'service.metadata.search.clear' | translate\n                        \"\n                        (click)=\"clearSearch()\"\n                        class=\"h-12 w-12 border-0 flex items-center justify-center\"\n                      >\n                        <ng-icon name=\"matClose\"></ng-icon>\n                      </button>\n                    }\n                  </div>\n                  <div\n                    class=\"border-l absolute border-gray-200 right-0 h-14 w-14\"\n                  >\n                    <gn-ui-button\n                      #inputBtn\n                      type=\"outline\"\n                      extraClass=\"h-12 w-12 border-0 absolute right-1 top-1 bg-white\"\n                      (buttonClick)=\"searchLayers()\"\n                    >\n                      <ng-icon name=\"iconoirSearch\"></ng-icon>\n                    </gn-ui-button>\n                  </div>\n                </div>\n                <gn-ui-popover\n                  [content]=\"popoverItems\"\n                  theme=\"light\"\n                  class=\"w-14 h-14 border border-gray-300 rounded-lg flex justify-center items-center\"\n                >\n                  <ng-icon\n                    name=\"matInfoOutline\"\n                    class=\"w-6 h-6 pt-0.5\"\n                  ></ng-icon>\n                </gn-ui-popover>\n              </div>\n              <div\n                style=\"height: 500px\"\n                class=\"bg-white shadow-xl rounded p-0 flex md:flex-row flex-col\"\n              >\n                <div\n                  class=\"flex flex-col gap-2 bg-gray-100 md:w-1/2 md:h-full w-full h-1/2 rounded-l overflow-y-auto py-5 pr-1 pl-3\"\n                  data-test=\"layer-list\"\n                >\n                  @for (layerItem of filteredLayers; track layerItem) {\n                    <gn-ui-button\n                      type=\"outline\"\n                      [extraClass]=\"getExtraClass(layerItem)\"\n                      (buttonClick)=\"selectLayer(layerItem)\"\n                    >\n                      {{ layerItem.title || layerItem.name }}\n                    </gn-ui-button>\n                  }\n                  @if (filteredLayers.length === 0) {\n                    <span class=\"text-gray-800\">\n                      {{ 'service.metadata.filter.noLayers' | translate }}\n                    </span>\n                  }\n                </div>\n                <div\n                  data-test=\"layer-information\"\n                  class=\"flex flex-col gap-4 md:h-full md:w-1/2 w-full h-1/2 py-5 px-10 overflow-y-auto\"\n                >\n                  @for (item of layerInformation; track item) {\n                    <div class=\"flex flex-row gap-4 border-b border-gray-200\">\n                      <span class=\"font-semibold w-24\">{{\n                        item.displayName\n                      }}</span>\n                      @if (isList(item.value)) {\n                        <div>\n                          @for (subItem of item.value; track subItem) {\n                            <div class=\"flex flex-row break-words max-w-72\">\n                              {{ subItem }}\n                            </div>\n                          }\n                        </div>\n                      }\n                      @if (!isList(item.value)) {\n                        <div class=\"break-words max-w-72\">\n                          {{ item.value }}\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n<ng-template #popoverItems>\n  <div class=\"p-2 py-4\">\n    <div translate>service.metadata.filter</div>\n  </div>\n</ng-template>\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: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: PopoverComponent, selector: "gn-ui-popover", inputs: ["content", "theme"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ServiceCapabilitiesComponent, isStandalone: true, selector: "gn-ui-service-capabilities", inputs: { apiLinks: "apiLinks" }, ngImport: i0, template: "@if (apiLinks.length > 0) {\n  <div style=\"height: 652px\" id=\"preview\">\n    <div class=\"bg-primary/10 overflow-visible\" style=\"height: 420px\">\n      <div class=\"container-lg px-4 lg:mx-auto\">\n        <div>\n          <div class=\"gn-ui-section-title mb-6\" translate>\n            service.metadata.capabilities\n          </div>\n          @if (loading) {\n            <div class=\"flex justify-center w-full h-[200px] items-center\">\n              <gn-ui-spinning-loader></gn-ui-spinning-loader>\n            </div>\n          }\n          @if (!loading) {\n            <div>\n              <div class=\"flex flex-row gap-5\">\n                <div class=\"h-14 md:w-2/5 w-full mb-4 flex flex-row relative\">\n                  <gn-ui-text-input\n                    class=\"w-full\"\n                    [(value)]=\"searchQuery\"\n                    [extraClass]=\"getExtraInputClass()\"\n                    [placeholder]=\"'service.metadata.search' | translate\"\n                    (input)=\"onSearchChange($event)\"\n                    (keydown.enter)=\"onSearchEnter($event)\"\n                  >\n                  </gn-ui-text-input>\n                  <div\n                    class=\"absolute right-14 h-14 w-14 flex items-center justify-center\"\n                  >\n                    @if (searchQuery) {\n                      <button\n                        #inputBtn\n                        [aria-label]=\"\n                          'service.metadata.search.clear' | translate\n                        \"\n                        (click)=\"clearSearch()\"\n                        class=\"h-12 w-12 border-0 flex items-center justify-center\"\n                      >\n                        <ng-icon name=\"matClose\"></ng-icon>\n                      </button>\n                    }\n                  </div>\n                  <div\n                    class=\"border-l absolute border-gray-200 right-0 h-14 w-14\"\n                  >\n                    <gn-ui-button\n                      #inputBtn\n                      type=\"outline\"\n                      extraClass=\"h-12 w-12 border-0 absolute right-1 top-1 bg-white\"\n                      (buttonClick)=\"searchLayers()\"\n                    >\n                      <ng-icon name=\"iconoirSearch\"></ng-icon>\n                    </gn-ui-button>\n                  </div>\n                </div>\n                <gn-ui-popover\n                  [content]=\"popoverItems\"\n                  theme=\"light\"\n                  class=\"w-14 h-14 border border-gray-300 rounded-lg flex justify-center items-center\"\n                >\n                  <ng-icon\n                    name=\"matInfoOutline\"\n                    class=\"w-6 h-6 pt-0.5\"\n                  ></ng-icon>\n                </gn-ui-popover>\n              </div>\n              <div\n                style=\"height: 500px\"\n                class=\"bg-white shadow-xl rounded p-0 flex md:flex-row flex-col\"\n              >\n                <div\n                  class=\"flex flex-col gap-2 bg-gray-100 md:w-1/2 md:h-full w-full h-1/2 rounded-l overflow-y-auto py-5 pr-1 pl-3\"\n                  data-test=\"layer-list\"\n                >\n                  @for (layerItem of filteredLayers; track layerItem) {\n                    <gn-ui-button\n                      type=\"outline\"\n                      [extraClass]=\"getExtraClass(layerItem)\"\n                      (buttonClick)=\"selectLayer(layerItem)\"\n                    >\n                      {{ layerItem.title || layerItem.name }}\n                    </gn-ui-button>\n                  }\n                  @if (filteredLayers.length === 0) {\n                    <span class=\"text-gray-800\">\n                      {{ 'service.metadata.filter.noLayers' | translate }}\n                    </span>\n                  }\n                </div>\n                <div\n                  data-test=\"layer-information\"\n                  class=\"flex flex-col gap-4 md:h-full md:w-1/2 w-full h-1/2 py-5 px-10 overflow-y-auto\"\n                >\n                  @for (item of layerInformation; track item) {\n                    <div class=\"flex flex-row gap-4 border-b border-gray-200\">\n                      <span class=\"font-semibold w-24\">{{\n                        item.displayName\n                      }}</span>\n                      @if (isList(item.value)) {\n                        <div>\n                          @for (subItem of item.value; track subItem) {\n                            <div class=\"flex flex-row break-words max-w-72\">\n                              {{ subItem }}\n                            </div>\n                          }\n                        </div>\n                      }\n                      @if (!isList(item.value)) {\n                        <div class=\"break-words max-w-72\">\n                          {{ item.value }}\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n<ng-template #popoverItems>\n  <div class=\"p-2 py-4\">\n    <div translate>service.metadata.filter</div>\n  </div>\n</ng-template>\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: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled", "type"], outputs: ["valueChange"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: PopoverComponent, selector: "gn-ui-popover", inputs: ["content", "theme"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], viewProviders: [
             provideIcons({
                 iconoirSearch,
                 matInfoOutline,
@@ -30633,7 +30827,7 @@ class ActionMenuComponent {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ActionMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ActionMenuComponent, isStandalone: true, selector: "gn-ui-action-menu", inputs: { canDuplicate: "canDuplicate", isDuplicating: "isDuplicating", canDelete: "canDelete", page: "page" }, outputs: { duplicate: "duplicate", delete: "delete", closeActionMenu: "closeActionMenu", rollback: "rollback", switch: "switch" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "@switch (sectionDisplayed) {\n  @case ('mainMenu') {\n    <div\n      data-test=\"mainMenuSection\"\n      class=\"mt-2 border border-gray-100 p-2 flex items-center bg-white shadow-2xl rounded-2xl\"\n    >\n      <ul class=\"flex flex-col gap-2 w-full\">\n        @if (page === 'main') {\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n            (buttonClick)=\"duplicate.emit()\"\n            [disabled]=\"!canDuplicate\"\n            data-test=\"record-menu-duplicate-button\"\n          >\n            @if (isDuplicating) {\n              <span translate>record.action.duplicating</span>\n            } @else {\n              <span translate>record.action.duplicate</span>\n            }\n          </gn-ui-button>\n        }\n        @if (page === 'record') {\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n            (buttonClick)=\"switch.emit()\"\n            data-test=\"record-menu-switch-button\"\n            ><span translate>record.action.switchLang</span></gn-ui-button\n          >\n        }\n        <gn-ui-button\n          type=\"light\"\n          extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n          (buttonClick)=\"displayDeleteMenu()\"\n          [disabled]=\"!canDelete\"\n          data-test=\"record-menu-delete-button\"\n        >\n          @if (page !== 'draft') {\n            <span translate>record.action.delete</span>\n          }\n          @if (page === 'draft') {\n            <span translate>record.action.rollback</span>\n          }\n        </gn-ui-button>\n      </ul>\n    </div>\n  }\n  @case ('deleteMenu') {\n    <div\n      data-test=\"deleteMenuSection\"\n      class=\"w-72 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <span class=\"text-lg font-bold text-center\">{{\n        'editor.record.delete.confirmation.title' | translate\n      }}</span>\n      <span class=\"text-center\">{{\n        'editor.record.delete.confirmation.message' | translate\n      }}</span>\n      <div class=\"flex flex-row gap-8 justify-center\">\n        <gn-ui-button\n          (buttonClick)=\"delete.emit()\"\n          cdkFocusInitial\n          type=\"primary\"\n          data-cy=\"confirm-button\"\n          [style.--gn-ui-button-width]=\"'100px'\"\n          >{{\n            'editor.record.delete.confirmation.confirmText' | translate\n          }}</gn-ui-button\n        >\n        <gn-ui-button\n          [style.--gn-ui-button-width]=\"'100px'\"\n          (buttonClick)=\"closeActionMenu.emit()\"\n          >{{\n            'editor.record.delete.confirmation.cancelText' | translate\n          }}</gn-ui-button\n        >\n      </div>\n    </div>\n  }\n  @case ('rollbackMenu') {\n    <div\n      data-test=\"rollbackMenuSection\"\n      class=\"w-80 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <span class=\"text-lg font-bold text-center\">{{\n        'editor.record.undo.confirmation.title' | translate\n      }}</span>\n      <span class=\"text-center\">{{\n        'editor.record.undo.confirmation.message' | translate\n      }}</span>\n      <div class=\"flex flex-row gap-8 justify-center\">\n        <gn-ui-button\n          (buttonClick)=\"rollback.emit()\"\n          cdkFocusInitial\n          type=\"primary\"\n          data-cy=\"confirm-button\"\n          [style.--gn-ui-button-width]=\"'120px'\"\n          >{{\n            'editor.record.undo.confirmation.confirmText' | translate\n          }}</gn-ui-button\n        >\n        <gn-ui-button\n          [style.--gn-ui-button-width]=\"'120px'\"\n          (buttonClick)=\"closeActionMenu.emit()\"\n          >{{\n            'editor.record.undo.confirmation.cancelText' | translate\n          }}</gn-ui-button\n        >\n      </div>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ActionMenuComponent, isStandalone: true, selector: "gn-ui-action-menu", inputs: { canDuplicate: "canDuplicate", isDuplicating: "isDuplicating", canDelete: "canDelete", page: "page", recordKind: "recordKind" }, outputs: { duplicate: "duplicate", delete: "delete", closeActionMenu: "closeActionMenu", rollback: "rollback", switch: "switch" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "@switch (sectionDisplayed) {\n  @case ('mainMenu') {\n    <div\n      data-test=\"mainMenuSection\"\n      class=\"mt-2 border border-gray-100 p-2 flex items-center bg-white shadow-2xl rounded-2xl\"\n    >\n      <ul class=\"flex flex-col gap-2 w-full\">\n        @if (page === 'main') {\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n            (buttonClick)=\"duplicate.emit()\"\n            [disabled]=\"!canDuplicate\"\n            data-test=\"record-menu-duplicate-button\"\n          >\n            @if (isDuplicating) {\n              <span translate>record.action.duplicating</span>\n            } @else {\n              <span translate>record.action.duplicate</span>\n            }\n          </gn-ui-button>\n        }\n        @if (page === 'record') {\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n            (buttonClick)=\"switch.emit()\"\n            data-test=\"record-menu-switch-button\"\n            ><span translate>record.action.switchLang</span></gn-ui-button\n          >\n        }\n        <gn-ui-button\n          type=\"light\"\n          extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n          (buttonClick)=\"displayDeleteMenu()\"\n          [disabled]=\"!canDelete\"\n          data-test=\"record-menu-delete-button\"\n        >\n          @if (page !== 'draft') {\n            <span translate>record.action.delete</span>\n          }\n          @if (page === 'draft') {\n            <span translate>record.action.rollback</span>\n          }\n        </gn-ui-button>\n      </ul>\n    </div>\n  }\n  @case ('deleteMenu') {\n    <div\n      data-test=\"deleteMenuSection\"\n      class=\"w-72 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <span class=\"text-lg font-bold text-center\">{{\n        'editor.record.delete.confirmation.title' | translate: { recordKind }\n      }}</span>\n      <span class=\"text-center\">{{\n        'editor.record.delete.confirmation.message' | translate: { recordKind }\n      }}</span>\n      <div class=\"flex flex-row gap-8 justify-center\">\n        <gn-ui-button\n          (buttonClick)=\"delete.emit()\"\n          cdkFocusInitial\n          type=\"primary\"\n          data-cy=\"confirm-button\"\n          [style.--gn-ui-button-width]=\"'100px'\"\n          >{{\n            'editor.record.delete.confirmation.confirmText'\n              | translate: { recordKind }\n          }}</gn-ui-button\n        >\n        <gn-ui-button\n          [style.--gn-ui-button-width]=\"'100px'\"\n          (buttonClick)=\"closeActionMenu.emit()\"\n          >{{\n            'editor.record.delete.confirmation.cancelText'\n              | translate: { recordKind }\n          }}</gn-ui-button\n        >\n      </div>\n    </div>\n  }\n  @case ('rollbackMenu') {\n    <div\n      data-test=\"rollbackMenuSection\"\n      class=\"w-80 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <span class=\"text-lg font-bold text-center\">{{\n        'editor.record.undo.confirmation.title' | translate: { recordKind }\n      }}</span>\n      <span class=\"text-center\">{{\n        'editor.record.undo.confirmation.message' | translate: { recordKind }\n      }}</span>\n      <div class=\"flex flex-row gap-8 justify-center\">\n        <gn-ui-button\n          (buttonClick)=\"rollback.emit()\"\n          cdkFocusInitial\n          type=\"primary\"\n          data-cy=\"confirm-button\"\n          [style.--gn-ui-button-width]=\"'120px'\"\n          >{{\n            'editor.record.undo.confirmation.confirmText'\n              | translate: { recordKind }\n          }}</gn-ui-button\n        >\n        <gn-ui-button\n          [style.--gn-ui-button-width]=\"'120px'\"\n          (buttonClick)=\"closeActionMenu.emit()\"\n          >{{\n            'editor.record.undo.confirmation.cancelText'\n              | translate: { recordKind }\n          }}</gn-ui-button\n        >\n      </div>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ActionMenuComponent, decorators: [{
             type: Component,
@@ -30643,7 +30837,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         MatDialogModule,
                         TranslateDirective,
                         TranslatePipe,
-                    ], template: "@switch (sectionDisplayed) {\n  @case ('mainMenu') {\n    <div\n      data-test=\"mainMenuSection\"\n      class=\"mt-2 border border-gray-100 p-2 flex items-center bg-white shadow-2xl rounded-2xl\"\n    >\n      <ul class=\"flex flex-col gap-2 w-full\">\n        @if (page === 'main') {\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n            (buttonClick)=\"duplicate.emit()\"\n            [disabled]=\"!canDuplicate\"\n            data-test=\"record-menu-duplicate-button\"\n          >\n            @if (isDuplicating) {\n              <span translate>record.action.duplicating</span>\n            } @else {\n              <span translate>record.action.duplicate</span>\n            }\n          </gn-ui-button>\n        }\n        @if (page === 'record') {\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n            (buttonClick)=\"switch.emit()\"\n            data-test=\"record-menu-switch-button\"\n            ><span translate>record.action.switchLang</span></gn-ui-button\n          >\n        }\n        <gn-ui-button\n          type=\"light\"\n          extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n          (buttonClick)=\"displayDeleteMenu()\"\n          [disabled]=\"!canDelete\"\n          data-test=\"record-menu-delete-button\"\n        >\n          @if (page !== 'draft') {\n            <span translate>record.action.delete</span>\n          }\n          @if (page === 'draft') {\n            <span translate>record.action.rollback</span>\n          }\n        </gn-ui-button>\n      </ul>\n    </div>\n  }\n  @case ('deleteMenu') {\n    <div\n      data-test=\"deleteMenuSection\"\n      class=\"w-72 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <span class=\"text-lg font-bold text-center\">{{\n        'editor.record.delete.confirmation.title' | translate\n      }}</span>\n      <span class=\"text-center\">{{\n        'editor.record.delete.confirmation.message' | translate\n      }}</span>\n      <div class=\"flex flex-row gap-8 justify-center\">\n        <gn-ui-button\n          (buttonClick)=\"delete.emit()\"\n          cdkFocusInitial\n          type=\"primary\"\n          data-cy=\"confirm-button\"\n          [style.--gn-ui-button-width]=\"'100px'\"\n          >{{\n            'editor.record.delete.confirmation.confirmText' | translate\n          }}</gn-ui-button\n        >\n        <gn-ui-button\n          [style.--gn-ui-button-width]=\"'100px'\"\n          (buttonClick)=\"closeActionMenu.emit()\"\n          >{{\n            'editor.record.delete.confirmation.cancelText' | translate\n          }}</gn-ui-button\n        >\n      </div>\n    </div>\n  }\n  @case ('rollbackMenu') {\n    <div\n      data-test=\"rollbackMenuSection\"\n      class=\"w-80 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <span class=\"text-lg font-bold text-center\">{{\n        'editor.record.undo.confirmation.title' | translate\n      }}</span>\n      <span class=\"text-center\">{{\n        'editor.record.undo.confirmation.message' | translate\n      }}</span>\n      <div class=\"flex flex-row gap-8 justify-center\">\n        <gn-ui-button\n          (buttonClick)=\"rollback.emit()\"\n          cdkFocusInitial\n          type=\"primary\"\n          data-cy=\"confirm-button\"\n          [style.--gn-ui-button-width]=\"'120px'\"\n          >{{\n            'editor.record.undo.confirmation.confirmText' | translate\n          }}</gn-ui-button\n        >\n        <gn-ui-button\n          [style.--gn-ui-button-width]=\"'120px'\"\n          (buttonClick)=\"closeActionMenu.emit()\"\n          >{{\n            'editor.record.undo.confirmation.cancelText' | translate\n          }}</gn-ui-button\n        >\n      </div>\n    </div>\n  }\n}\n" }]
+                    ], template: "@switch (sectionDisplayed) {\n  @case ('mainMenu') {\n    <div\n      data-test=\"mainMenuSection\"\n      class=\"mt-2 border border-gray-100 p-2 flex items-center bg-white shadow-2xl rounded-2xl\"\n    >\n      <ul class=\"flex flex-col gap-2 w-full\">\n        @if (page === 'main') {\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n            (buttonClick)=\"duplicate.emit()\"\n            [disabled]=\"!canDuplicate\"\n            data-test=\"record-menu-duplicate-button\"\n          >\n            @if (isDuplicating) {\n              <span translate>record.action.duplicating</span>\n            } @else {\n              <span translate>record.action.duplicate</span>\n            }\n          </gn-ui-button>\n        }\n        @if (page === 'record') {\n          <gn-ui-button\n            type=\"light\"\n            extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n            (buttonClick)=\"switch.emit()\"\n            data-test=\"record-menu-switch-button\"\n            ><span translate>record.action.switchLang</span></gn-ui-button\n          >\n        }\n        <gn-ui-button\n          type=\"light\"\n          extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n          (buttonClick)=\"displayDeleteMenu()\"\n          [disabled]=\"!canDelete\"\n          data-test=\"record-menu-delete-button\"\n        >\n          @if (page !== 'draft') {\n            <span translate>record.action.delete</span>\n          }\n          @if (page === 'draft') {\n            <span translate>record.action.rollback</span>\n          }\n        </gn-ui-button>\n      </ul>\n    </div>\n  }\n  @case ('deleteMenu') {\n    <div\n      data-test=\"deleteMenuSection\"\n      class=\"w-72 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <span class=\"text-lg font-bold text-center\">{{\n        'editor.record.delete.confirmation.title' | translate: { recordKind }\n      }}</span>\n      <span class=\"text-center\">{{\n        'editor.record.delete.confirmation.message' | translate: { recordKind }\n      }}</span>\n      <div class=\"flex flex-row gap-8 justify-center\">\n        <gn-ui-button\n          (buttonClick)=\"delete.emit()\"\n          cdkFocusInitial\n          type=\"primary\"\n          data-cy=\"confirm-button\"\n          [style.--gn-ui-button-width]=\"'100px'\"\n          >{{\n            'editor.record.delete.confirmation.confirmText'\n              | translate: { recordKind }\n          }}</gn-ui-button\n        >\n        <gn-ui-button\n          [style.--gn-ui-button-width]=\"'100px'\"\n          (buttonClick)=\"closeActionMenu.emit()\"\n          >{{\n            'editor.record.delete.confirmation.cancelText'\n              | translate: { recordKind }\n          }}</gn-ui-button\n        >\n      </div>\n    </div>\n  }\n  @case ('rollbackMenu') {\n    <div\n      data-test=\"rollbackMenuSection\"\n      class=\"w-80 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <span class=\"text-lg font-bold text-center\">{{\n        'editor.record.undo.confirmation.title' | translate: { recordKind }\n      }}</span>\n      <span class=\"text-center\">{{\n        'editor.record.undo.confirmation.message' | translate: { recordKind }\n      }}</span>\n      <div class=\"flex flex-row gap-8 justify-center\">\n        <gn-ui-button\n          (buttonClick)=\"rollback.emit()\"\n          cdkFocusInitial\n          type=\"primary\"\n          data-cy=\"confirm-button\"\n          [style.--gn-ui-button-width]=\"'120px'\"\n          >{{\n            'editor.record.undo.confirmation.confirmText'\n              | translate: { recordKind }\n          }}</gn-ui-button\n        >\n        <gn-ui-button\n          [style.--gn-ui-button-width]=\"'120px'\"\n          (buttonClick)=\"closeActionMenu.emit()\"\n          >{{\n            'editor.record.undo.confirmation.cancelText'\n              | translate: { recordKind }\n          }}</gn-ui-button\n        >\n      </div>\n    </div>\n  }\n}\n" }]
         }], propDecorators: { canDuplicate: [{
                 type: Input
             }], isDuplicating: [{
@@ -30652,6 +30846,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Input
             }], page: [{
                 type: Input
+            }], recordKind: [{
+                type: Input
             }], duplicate: [{
                 type: Output
             }], delete: [{
@@ -30814,7 +31010,7 @@ class ResultsTableComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ResultsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: ResultsTableComponent, isStandalone: true, selector: "gn-ui-results-table", inputs: { records: "records", selectedRecordsIdentifiers: "selectedRecordsIdentifiers", sortOrder: "sortOrder", hasDraft: "hasDraft", canDuplicate: "canDuplicate", canDelete: "canDelete", canEdit: "canEdit", isDraftPage: "isDraftPage", isDuplicating: "isDuplicating" }, outputs: { sortByChange: "sortByChange", recordClick: "recordClick", duplicateRecord: "duplicateRecord", deleteRecord: "deleteRecord", rollbackDraft: "rollbackDraft", recordsSelectedChange: "recordsSelectedChange" }, providers: [
             provideIcons({ iconoirUser, iconoirLock, iconoirTranslate, matMoreVert }),
-        ], viewQueries: [{ propertyName: "actionMenuButtons", predicate: ["actionMenuButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-interactive-table\n  [items]=\"records\"\n  [canEditItem]=\"canEdit\"\n  [isDraftPage]=\"isDraftPage\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'3rem'\">\n    <ng-template #cell let-item let-i=\"index\">\n      <ng-icon\n        name=\"iconoirLock\"\n        class=\"text-purple\"\n        *ngIf=\"(canEdit(item) | async) === false; else selectCheckbox\"\n      ></ng-icon>\n      <ng-template #selectCheckbox>\n        <gn-ui-checkbox\n          [checked]=\"isChecked(item)\"\n          (changed)=\"handleRecordSelectedChange($event, item)\"\n          class=\"-m-2\"\n          type=\"default\"\n        ></gn-ui-checkbox>\n      </ng-template>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [grow]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword')\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex flex-row items-center gap-2 max-w-full font-semibold\">\n        <span data-cy=\"resultItemTitle\" class=\"overflow-hidden text-ellipsis\">{{\n          item.title\n        }}</span>\n        <gn-ui-badge\n          *ngIf=\"hasDraft(item)\"\n          [style.--gn-ui-badge-padding]=\"'0.2em 0.6em'\"\n          [style.--gn-ui-badge-text-size]=\"'12px'\"\n          [style.--gn-ui-badge-text-color]=\"'#3d2006'\"\n          [style.--gn-ui-badge-background-color]=\"'#ffbc7b'\"\n          [style.--gn-ui-badge-rounded]=\"'4px'\"\n        >\n          <span translate>dashboard.records.hasDraft</span>\n        </gn-ui-badge>\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'9rem'\">\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2 font-medium\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"shrink-0 text-xs\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [width]=\"'12rem'\"\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner')\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>search.filters.user</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <ng-icon name=\"iconoirUser\" size=\"16px\"></ng-icon>\n      <span data-cy=\"ownerInfo\" class=\"text-xs\">{{\n        formatUserInfo(item.extras?.ownerInfo)\n      }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'6rem'\">\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <span class=\"text-xs\">\n        {{\n          (item.extras?.['isPublishedToAll']\n            ? 'record.metadata.status.published'\n            : 'record.metadata.status.notPublished'\n          ) | translate\n        }}</span\n      >\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [width]=\"'8rem'\"\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate')\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>search.filters.changeDate</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex text-left w-full text-xs\">\n        {{\n          item.extras?.['isPublishedToAll']\n            ? dateToString(item.recordUpdated)\n            : '-'\n        }}\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- ACTION MENU COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header> </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex justify-end items-center gap-4 w-full\">\n        <ng-icon\n          *ngIf=\"isMultilingual(item)\"\n          data-cy=\"multilingual-indicator\"\n          name=\"iconoirTranslate\"\n          [attr.title]=\"getTxtHoverMultilingual(item)\"\n        ></ng-icon>\n        <gn-ui-button\n          cdkOverlayOrigin\n          #actionMenuButton\n          (buttonClick)=\"openActionMenu(item, template)\"\n          type=\"light\"\n          data-test=\"record-menu-button\"\n        >\n          <ng-icon name=\"matMoreVert\"></ng-icon>\n        </gn-ui-button>\n      </div>\n      <ng-template #template>\n        <gn-ui-action-menu\n          [canDuplicate]=\"canDuplicate(item)\"\n          [isDuplicating]=\"isDuplicating\"\n          [canDelete]=\"canDelete(item) | async\"\n          [page]=\"isDraftPage ? 'draft' : 'main'\"\n          (duplicate)=\"handleDuplicate(item)\"\n          (delete)=\"handleDelete(item)\"\n          (closeActionMenu)=\"closeActionMenu()\"\n          (rollback)=\"handleRollback(item)\"\n        >\n        </gn-ui-action-menu>\n      </ng-template>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n", styles: [":host{--gn-ui-button-height: 40px;--gn-ui-button-width: 40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InteractiveTableComponent, selector: "gn-ui-interactive-table", inputs: ["items", "canEditItem", "isDraftPage"], outputs: ["itemClick"] }, { kind: "component", type: InteractiveTableColumnComponent, selector: "gn-ui-interactive-table-column", inputs: ["grow", "width", "sortable", "activeSort"], outputs: ["sortChange"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "component", type: ActionMenuComponent, selector: "gn-ui-action-menu", inputs: ["canDuplicate", "isDuplicating", "canDelete", "page"], outputs: ["duplicate", "delete", "closeActionMenu", "rollback", "switch"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CheckboxComponent, selector: "gn-ui-checkbox", inputs: ["type", "checked", "indeterminate"], outputs: ["changed"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "actionMenuButtons", predicate: ["actionMenuButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-interactive-table\n  [items]=\"records\"\n  [canEditItem]=\"canEdit\"\n  [isDraftPage]=\"isDraftPage\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'3rem'\">\n    <ng-template #cell let-item let-i=\"index\">\n      <ng-icon\n        name=\"iconoirLock\"\n        class=\"text-purple\"\n        *ngIf=\"(canEdit(item) | async) === false; else selectCheckbox\"\n      ></ng-icon>\n      <ng-template #selectCheckbox>\n        <gn-ui-checkbox\n          [checked]=\"isChecked(item)\"\n          (changed)=\"handleRecordSelectedChange($event, item)\"\n          class=\"-m-2\"\n          type=\"default\"\n        ></gn-ui-checkbox>\n      </ng-template>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [grow]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword')\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex flex-row items-center gap-2 max-w-full font-semibold\">\n        <span data-cy=\"resultItemTitle\" class=\"overflow-hidden text-ellipsis\">{{\n          item.title\n        }}</span>\n        <gn-ui-badge\n          *ngIf=\"hasDraft(item)\"\n          [style.--gn-ui-badge-padding]=\"'0.2em 0.6em'\"\n          [style.--gn-ui-badge-text-size]=\"'12px'\"\n          [style.--gn-ui-badge-text-color]=\"'#3d2006'\"\n          [style.--gn-ui-badge-background-color]=\"'#ffbc7b'\"\n          [style.--gn-ui-badge-rounded]=\"'4px'\"\n        >\n          <span translate>dashboard.records.hasDraft</span>\n        </gn-ui-badge>\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'9rem'\">\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2 font-medium\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"shrink-0 text-xs\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [width]=\"'12rem'\"\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner')\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>search.filters.user</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <ng-icon name=\"iconoirUser\" size=\"16px\"></ng-icon>\n      <span data-cy=\"ownerInfo\" class=\"text-xs\">{{\n        formatUserInfo(item.extras?.ownerInfo)\n      }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'6rem'\">\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <span class=\"text-xs\">\n        {{\n          (item.extras?.['isPublishedToAll']\n            ? 'record.metadata.status.published'\n            : 'record.metadata.status.notPublished'\n          ) | translate\n        }}</span\n      >\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [width]=\"'8rem'\"\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate')\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>search.filters.changeDate</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex text-left w-full text-xs\">\n        {{\n          item.extras?.['isPublishedToAll']\n            ? dateToString(item.recordUpdated)\n            : '-'\n        }}\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- ACTION MENU COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header> </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex justify-end items-center gap-4 w-full\">\n        <ng-icon\n          *ngIf=\"isMultilingual(item)\"\n          data-cy=\"multilingual-indicator\"\n          name=\"iconoirTranslate\"\n          [attr.title]=\"getTxtHoverMultilingual(item)\"\n        ></ng-icon>\n        <gn-ui-button\n          cdkOverlayOrigin\n          #actionMenuButton\n          (buttonClick)=\"openActionMenu(item, template)\"\n          type=\"light\"\n          data-test=\"record-menu-button\"\n        >\n          <ng-icon name=\"matMoreVert\"></ng-icon>\n        </gn-ui-button>\n      </div>\n      <ng-template #template>\n        <gn-ui-action-menu\n          [canDuplicate]=\"canDuplicate(item)\"\n          [isDuplicating]=\"isDuplicating\"\n          [canDelete]=\"canDelete(item) | async\"\n          [page]=\"isDraftPage ? 'draft' : 'main'\"\n          (duplicate)=\"handleDuplicate(item)\"\n          (delete)=\"handleDelete(item)\"\n          (closeActionMenu)=\"closeActionMenu()\"\n          (rollback)=\"handleRollback(item)\"\n          [recordKind]=\"item.kind\"\n        >\n        </gn-ui-action-menu>\n      </ng-template>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n", styles: [":host{--gn-ui-button-height: 40px;--gn-ui-button-width: 40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InteractiveTableComponent, selector: "gn-ui-interactive-table", inputs: ["items", "canEditItem", "isDraftPage"], outputs: ["itemClick"] }, { kind: "component", type: InteractiveTableColumnComponent, selector: "gn-ui-interactive-table-column", inputs: ["grow", "width", "sortable", "activeSort"], outputs: ["sortChange"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked", "badgeClicked"] }, { kind: "component", type: ActionMenuComponent, selector: "gn-ui-action-menu", inputs: ["canDuplicate", "isDuplicating", "canDelete", "page", "recordKind"], outputs: ["duplicate", "delete", "closeActionMenu", "rollback", "switch"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CheckboxComponent, selector: "gn-ui-checkbox", inputs: ["type", "checked", "indeterminate"], outputs: ["changed"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ResultsTableComponent, decorators: [{
             type: Component,
@@ -30832,7 +31028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         ButtonComponent,
                     ], providers: [
                         provideIcons({ iconoirUser, iconoirLock, iconoirTranslate, matMoreVert }),
-                    ], template: "<gn-ui-interactive-table\n  [items]=\"records\"\n  [canEditItem]=\"canEdit\"\n  [isDraftPage]=\"isDraftPage\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'3rem'\">\n    <ng-template #cell let-item let-i=\"index\">\n      <ng-icon\n        name=\"iconoirLock\"\n        class=\"text-purple\"\n        *ngIf=\"(canEdit(item) | async) === false; else selectCheckbox\"\n      ></ng-icon>\n      <ng-template #selectCheckbox>\n        <gn-ui-checkbox\n          [checked]=\"isChecked(item)\"\n          (changed)=\"handleRecordSelectedChange($event, item)\"\n          class=\"-m-2\"\n          type=\"default\"\n        ></gn-ui-checkbox>\n      </ng-template>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [grow]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword')\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex flex-row items-center gap-2 max-w-full font-semibold\">\n        <span data-cy=\"resultItemTitle\" class=\"overflow-hidden text-ellipsis\">{{\n          item.title\n        }}</span>\n        <gn-ui-badge\n          *ngIf=\"hasDraft(item)\"\n          [style.--gn-ui-badge-padding]=\"'0.2em 0.6em'\"\n          [style.--gn-ui-badge-text-size]=\"'12px'\"\n          [style.--gn-ui-badge-text-color]=\"'#3d2006'\"\n          [style.--gn-ui-badge-background-color]=\"'#ffbc7b'\"\n          [style.--gn-ui-badge-rounded]=\"'4px'\"\n        >\n          <span translate>dashboard.records.hasDraft</span>\n        </gn-ui-badge>\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'9rem'\">\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2 font-medium\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"shrink-0 text-xs\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [width]=\"'12rem'\"\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner')\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>search.filters.user</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <ng-icon name=\"iconoirUser\" size=\"16px\"></ng-icon>\n      <span data-cy=\"ownerInfo\" class=\"text-xs\">{{\n        formatUserInfo(item.extras?.ownerInfo)\n      }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'6rem'\">\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <span class=\"text-xs\">\n        {{\n          (item.extras?.['isPublishedToAll']\n            ? 'record.metadata.status.published'\n            : 'record.metadata.status.notPublished'\n          ) | translate\n        }}</span\n      >\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [width]=\"'8rem'\"\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate')\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>search.filters.changeDate</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex text-left w-full text-xs\">\n        {{\n          item.extras?.['isPublishedToAll']\n            ? dateToString(item.recordUpdated)\n            : '-'\n        }}\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- ACTION MENU COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header> </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex justify-end items-center gap-4 w-full\">\n        <ng-icon\n          *ngIf=\"isMultilingual(item)\"\n          data-cy=\"multilingual-indicator\"\n          name=\"iconoirTranslate\"\n          [attr.title]=\"getTxtHoverMultilingual(item)\"\n        ></ng-icon>\n        <gn-ui-button\n          cdkOverlayOrigin\n          #actionMenuButton\n          (buttonClick)=\"openActionMenu(item, template)\"\n          type=\"light\"\n          data-test=\"record-menu-button\"\n        >\n          <ng-icon name=\"matMoreVert\"></ng-icon>\n        </gn-ui-button>\n      </div>\n      <ng-template #template>\n        <gn-ui-action-menu\n          [canDuplicate]=\"canDuplicate(item)\"\n          [isDuplicating]=\"isDuplicating\"\n          [canDelete]=\"canDelete(item) | async\"\n          [page]=\"isDraftPage ? 'draft' : 'main'\"\n          (duplicate)=\"handleDuplicate(item)\"\n          (delete)=\"handleDelete(item)\"\n          (closeActionMenu)=\"closeActionMenu()\"\n          (rollback)=\"handleRollback(item)\"\n        >\n        </gn-ui-action-menu>\n      </ng-template>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n", styles: [":host{--gn-ui-button-height: 40px;--gn-ui-button-width: 40px}\n"] }]
+                    ], template: "<gn-ui-interactive-table\n  [items]=\"records\"\n  [canEditItem]=\"canEdit\"\n  [isDraftPage]=\"isDraftPage\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'3rem'\">\n    <ng-template #cell let-item let-i=\"index\">\n      <ng-icon\n        name=\"iconoirLock\"\n        class=\"text-purple\"\n        *ngIf=\"(canEdit(item) | async) === false; else selectCheckbox\"\n      ></ng-icon>\n      <ng-template #selectCheckbox>\n        <gn-ui-checkbox\n          [checked]=\"isChecked(item)\"\n          (changed)=\"handleRecordSelectedChange($event, item)\"\n          class=\"-m-2\"\n          type=\"default\"\n        ></gn-ui-checkbox>\n      </ng-template>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [grow]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword')\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex flex-row items-center gap-2 max-w-full font-semibold\">\n        <span data-cy=\"resultItemTitle\" class=\"overflow-hidden text-ellipsis\">{{\n          item.title\n        }}</span>\n        <gn-ui-badge\n          *ngIf=\"hasDraft(item)\"\n          [style.--gn-ui-badge-padding]=\"'0.2em 0.6em'\"\n          [style.--gn-ui-badge-text-size]=\"'12px'\"\n          [style.--gn-ui-badge-text-color]=\"'#3d2006'\"\n          [style.--gn-ui-badge-background-color]=\"'#ffbc7b'\"\n          [style.--gn-ui-badge-rounded]=\"'4px'\"\n        >\n          <span translate>dashboard.records.hasDraft</span>\n        </gn-ui-badge>\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'9rem'\">\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2 font-medium\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"shrink-0 text-xs\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [width]=\"'12rem'\"\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner')\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>search.filters.user</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <ng-icon name=\"iconoirUser\" size=\"16px\"></ng-icon>\n      <span data-cy=\"ownerInfo\" class=\"text-xs\">{{\n        formatUserInfo(item.extras?.ownerInfo)\n      }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'6rem'\">\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <span class=\"text-xs\">\n        {{\n          (item.extras?.['isPublishedToAll']\n            ? 'record.metadata.status.published'\n            : 'record.metadata.status.notPublished'\n          ) | translate\n        }}</span\n      >\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [width]=\"'8rem'\"\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate')\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>search.filters.changeDate</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex text-left w-full text-xs\">\n        {{\n          item.extras?.['isPublishedToAll']\n            ? dateToString(item.recordUpdated)\n            : '-'\n        }}\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- ACTION MENU COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header> </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex justify-end items-center gap-4 w-full\">\n        <ng-icon\n          *ngIf=\"isMultilingual(item)\"\n          data-cy=\"multilingual-indicator\"\n          name=\"iconoirTranslate\"\n          [attr.title]=\"getTxtHoverMultilingual(item)\"\n        ></ng-icon>\n        <gn-ui-button\n          cdkOverlayOrigin\n          #actionMenuButton\n          (buttonClick)=\"openActionMenu(item, template)\"\n          type=\"light\"\n          data-test=\"record-menu-button\"\n        >\n          <ng-icon name=\"matMoreVert\"></ng-icon>\n        </gn-ui-button>\n      </div>\n      <ng-template #template>\n        <gn-ui-action-menu\n          [canDuplicate]=\"canDuplicate(item)\"\n          [isDuplicating]=\"isDuplicating\"\n          [canDelete]=\"canDelete(item) | async\"\n          [page]=\"isDraftPage ? 'draft' : 'main'\"\n          (duplicate)=\"handleDuplicate(item)\"\n          (delete)=\"handleDelete(item)\"\n          (closeActionMenu)=\"closeActionMenu()\"\n          (rollback)=\"handleRollback(item)\"\n          [recordKind]=\"item.kind\"\n        >\n        </gn-ui-action-menu>\n      </ng-template>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n", styles: [":host{--gn-ui-button-height: 40px;--gn-ui-button-width: 40px}\n"] }]
         }], propDecorators: { records: [{
                 type: Input
             }], selectedRecordsIdentifiers: [{
@@ -31746,21 +31942,22 @@ class ResultsTableContainerComponent {
     }
     async handleDeleteRecord(item) {
         const uniqueIdentifier = item.uniqueIdentifier;
+        const recordKind = item.kind;
         this.subscription.add(this.recordsRepository.deleteRecord(uniqueIdentifier).subscribe({
             next: () => {
                 this.recordsRepository.clearRecordDraft(uniqueIdentifier);
                 this.searchFacade.requestNewResults();
                 this.notificationsService.showNotification({
                     type: 'success',
-                    title: this.translateService.instant('editor.record.deleteSuccess.title'),
-                    text: `${this.translateService.instant('editor.record.deleteSuccess.body')}`,
+                    title: this.translateService.instant('editor.record.deleteSuccess.title', { recordKind }),
+                    text: `${this.translateService.instant('editor.record.deleteSuccess.body', { recordKind })}`,
                 }, 2500);
             },
             error: (error) => {
                 this.notificationsService.showNotification({
                     type: 'error',
-                    title: this.translateService.instant('editor.record.deleteError.title'),
-                    text: `${this.translateService.instant('editor.record.deleteError.body')} ${error}`,
+                    title: this.translateService.instant('editor.record.deleteError.title', { recordKind }),
+                    text: `${this.translateService.instant('editor.record.deleteError.body', { recordKind })} ${error}`,
                     closeMessage: this.translateService.instant('editor.record.deleteError.closeMessage'),
                 }, undefined, error);
             },
@@ -31853,7 +32050,7 @@ class SearchFiltersSummaryItemComponent {
             .subscribe((filters) => this.searchService.updateFilters(filters));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SearchFiltersSummaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SearchFiltersSummaryItemComponent, isStandalone: true, selector: "gn-ui-search-filters-summary-item", inputs: { fieldName: "fieldName" }, providers: [DatePipe], ngImport: i0, template: "@if ((fieldValues$ | async)?.length > 0) {\n  <div class=\"flex flex-row items-center gap-2\">\n    <span class=\"text-gray-800\" data-cy=\"filterSummaryLabel\">{{\n      translatedLabel\n    }}</span>\n    @for (fieldValue of fieldValues$ | async; track fieldValue) {\n      <gn-ui-badge\n        class=\"gn-ui-badge\"\n        [style.--gn-ui-badge-rounded]=\"'8px'\"\n        [style.--gn-ui-badge-padding]=\"'3px 4px'\"\n        [style.--gn-ui-badge-text-color]=\"'black'\"\n        [style.--gn-ui-badge-background-color]=\"'#F2F2F2'\"\n        [style.--gn-ui-badge-font-weight]=\"'700'\"\n        [removable]=\"true\"\n        (badgeRemoveClicked)=\"removeFilterValue(fieldValue.value)\"\n        >{{ fieldValue.label }}</gn-ui-badge\n      >\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SearchFiltersSummaryItemComponent, isStandalone: true, selector: "gn-ui-search-filters-summary-item", inputs: { fieldName: "fieldName" }, providers: [DatePipe], ngImport: i0, template: "@if ((fieldValues$ | async)?.length > 0) {\n  <div class=\"flex flex-row items-center gap-2\">\n    <span class=\"text-gray-800\" data-cy=\"filterSummaryLabel\">{{\n      translatedLabel\n    }}</span>\n    @for (fieldValue of fieldValues$ | async; track fieldValue) {\n      <gn-ui-badge\n        class=\"gn-ui-badge\"\n        [style.--gn-ui-badge-rounded]=\"'8px'\"\n        [style.--gn-ui-badge-padding]=\"'3px 4px'\"\n        [style.--gn-ui-badge-text-color]=\"'black'\"\n        [style.--gn-ui-badge-background-color]=\"'#F2F2F2'\"\n        [style.--gn-ui-badge-font-weight]=\"'700'\"\n        [removable]=\"true\"\n        (badgeRemoveClicked)=\"removeFilterValue(fieldValue.value)\"\n        >{{ fieldValue.label }}</gn-ui-badge\n      >\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked", "badgeClicked"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SearchFiltersSummaryItemComponent, decorators: [{
             type: Component,
@@ -36104,7 +36301,7 @@ const openRecord = createAction('[Editor] Open record', props());
 const updateRecordField = createAction('[Editor] Update record field', props());
 const updateRecordLanguages = createAction('[Editor] Update record languages', props());
 const markRecordAsChanged = createAction('[Editor] Mark record as changed');
-const saveRecord = createAction('[Editor] Save record');
+const saveRecord = createAction('[Editor] Save record', props());
 const saveRecordSuccess = createAction('[Editor] Save record success');
 const saveRecordFailure = createAction('[Editor] Save record failure', props());
 const draftSaveSuccess = createAction('[Editor] Draft save success');
@@ -36119,267 +36316,282 @@ 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.
- * To add a new field, you need to create a new EditorField object in the fields part of this file.
- * Then add it to the corresponding section in the sections part of this file.
- * Finally, add the section to the corresponding page in the pages part of this file.
- */
-/************************************************************
- ***************           FIELDS           *****************
- ************************************************************
+ * This file contains the configuration of the fields
+ * that will be displayed in the editor
+ * and the reuse light editor.
  */
-const RECORD_UNIQUE_IDENTIFIER_FIELD = {
-    model: 'uniqueIdentifier',
-    formFieldConfig: {
-        labelKey: marker('editor.record.form.field.uniqueIdentifier'),
-    },
-    hidden: true,
-};
-const CONSTRAINTS_SHORTCUTS = {
-    componentName: 'form-field-constraints-shortcuts',
-    formFieldConfig: {
-        labelKey: marker('editor.record.form.field.constraintsShortcuts'),
-    },
-};
-const LEGAL_CONSTRAINTS_FIELD = {
-    model: 'legalConstraints',
-    formFieldConfig: {
-        labelKey: marker('editor.record.form.field.legalConstraints'),
-    },
-};
-const SECURITY_CONSTRAINTS_FIELD = {
-    model: 'securityConstraints',
-    formFieldConfig: {
-        labelKey: marker('editor.record.form.field.securityConstraints'),
-    },
-};
-const OTHER_CONSTRAINTS_FIELD = {
-    model: 'otherConstraints',
-    formFieldConfig: {
-        labelKey: marker('editor.record.form.field.otherConstraints'),
-    },
-};
-const RECORD_LICENSE_FIELD = {
-    model: 'licenses',
-    formFieldConfig: {
-        labelKey: marker('editor.record.form.field.license'),
-    },
-};
-const RECORD_KEYWORDS_FIELD = {
-    model: 'keywords',
-    formFieldConfig: {},
-};
-const RECORD_TOPICS_FIELD = {
-    model: 'topics',
-    formFieldConfig: {},
-};
-const RECORD_RESOURCE_CREATED_FIELD = {
-    model: 'resourceCreated',
-    formFieldConfig: {
-        labelKey: marker('editor.record.form.field.resourceCreated'),
-    },
-    gridColumnSpan: 1,
-};
-const RESOURCE_IDENTIFIER_FIELD = {
-    model: 'resourceIdentifiers',
-    formFieldConfig: {
-        labelKey: marker('editor.record.form.field.resourceIdentifier'),
-    },
-};
-const RECORD_RESOURCE_UPDATED_FIELD = {
-    model: 'resourceUpdated',
-    formFieldConfig: {
-        labelKey: marker('editor.record.form.field.resourceUpdated'),
-    },
-    gridColumnSpan: 1,
-};
-const RECORD_UPDATED_FIELD = {
-    model: 'recordUpdated',
-    formFieldConfig: {
-        labelKey: marker('editor.record.form.field.recordUpdated'),
-    },
-    onSaveProcess: '${dateNow()}',
-    gridColumnSpan: 1,
-    hidden: true,
-};
-const RECORD_UPDATE_FREQUENCY_FIELD = {
-    model: 'updateFrequency',
-    formFieldConfig: {},
-};
-// keeping track of the label to not lose existing translation
+// keeping track of labels to not lose existing translations
 marker('editor.record.form.field.updateFrequency');
-const RECORD_TEMPORAL_EXTENTS_FIELD = {
-    model: 'temporalExtents',
-    formFieldConfig: {
-        labelKey: marker('editor.record.form.field.temporalExtents'),
-    },
-};
-const RECORD_TITLE_FIELD = {
-    model: 'title',
-    formFieldConfig: {
-        labelKey: marker('editor.record.form.field.title'),
-    },
-};
-const RECORD_ABSTRACT_FIELD = {
-    model: 'abstract',
-    formFieldConfig: {
-        labelKey: marker('editor.record.form.field.abstract'),
-    },
-};
-const CONTACTS_FOR_RESOURCE_FIELD = {
-    model: 'contactsForResource',
-    formFieldConfig: {
-        labelKey: '',
-    },
-};
-const CONTACTS = {
-    model: 'contacts',
-    formFieldConfig: {
-        labelKey: '',
-    },
-};
-const RECORD_GRAPHICAL_OVERVIEW_FIELD = {
-    model: 'overviews',
-    formFieldConfig: {
-        labelKey: marker('editor.record.form.field.overviews'),
-    },
-};
-const RECORD_SPATIAL_TOGGLE_FIELD = {
-    componentName: 'form-field-spatial-toggle',
-    formFieldConfig: {},
-    hidden: true,
-};
-const RECORD_SPATIAL_EXTENTS_FIELD = {
-    model: 'spatialExtents',
-    formFieldConfig: {},
-};
-// keeping track of the label to not lose existing translation
 marker('editor.record.form.field.spatialExtents');
-const RECORD_ONLINE_RESOURCES = {
-    model: 'onlineResources',
-    modelSpecifier: 'onlineResourceType:!link',
-    formFieldConfig: {},
-};
-// keeping track of the label to not lose existing translation
 marker('editor.record.form.field.onlineResources');
-const RECORD_ONLINE_LINK_RESOURCES = {
-    model: 'onlineResources',
-    modelSpecifier: 'onlineResourceType:link',
-    formFieldConfig: {},
-};
-// keeping track of the label to not lose existing translation
 marker('editor.record.form.field.onlineLinkResources');
-/************************************************************
- ***************          SECTIONS          *****************
- ************************************************************
- */
-const TITLE_SECTION = {
-    hidden: false,
-    fields: [
-        RECORD_TITLE_FIELD,
-        RECORD_ABSTRACT_FIELD,
-        RECORD_GRAPHICAL_OVERVIEW_FIELD,
-    ],
-};
-const ABOUT_SECTION = {
-    labelKey: marker('editor.record.form.section.about.label'),
-    descriptionKey: marker('editor.record.form.section.about.description'),
-    hidden: false,
-    fields: [
-        RECORD_UNIQUE_IDENTIFIER_FIELD,
-        RESOURCE_IDENTIFIER_FIELD,
-        RECORD_RESOURCE_CREATED_FIELD,
-        RECORD_RESOURCE_UPDATED_FIELD,
-        RECORD_UPDATED_FIELD,
-        RECORD_UPDATE_FREQUENCY_FIELD,
-        RECORD_TEMPORAL_EXTENTS_FIELD,
-    ],
-};
-const GEOGRAPHICAL_COVERAGE_SECTION = {
-    labelKey: marker('editor.record.form.section.geographicalCoverage.label'),
-    hidden: false,
-    fields: [RECORD_SPATIAL_TOGGLE_FIELD, RECORD_SPATIAL_EXTENTS_FIELD],
-};
-const ASSOCIATED_RESOURCES_SECTION = {
-    labelKey: marker('editor.record.form.section.associatedResources.label'),
-    descriptionKey: marker('editor.record.form.section.associatedResources.description'),
-    hidden: false,
-    fields: [RECORD_ONLINE_RESOURCES],
-};
-const ANNEXES_SECTION = {
-    labelKey: marker('editor.record.form.section.annexes.label'),
-    descriptionKey: marker('editor.record.form.section.annexes.description'),
-    hidden: false,
-    fields: [RECORD_ONLINE_LINK_RESOURCES],
-};
-const CLASSIFICATION_SECTION = {
-    labelKey: marker('editor.record.form.section.classification.label'),
-    descriptionKey: marker('editor.record.form.section.classification.description'),
-    hidden: false,
-    fields: [RECORD_KEYWORDS_FIELD],
-};
-const TOPICS_SECTION = {
-    labelKey: marker('editor.record.form.section.topics.label'),
-    descriptionKey: marker('editor.record.form.section.topics.description'),
-    hidden: false,
-    fields: [RECORD_TOPICS_FIELD],
-};
-const USE_AND_ACCESS_CONDITIONS_SECTION = {
-    labelKey: marker('editor.record.form.section.useAndAccessConditions.label'),
-    hidden: false,
-    fields: [
-        RECORD_LICENSE_FIELD,
-        CONSTRAINTS_SHORTCUTS,
-        LEGAL_CONSTRAINTS_FIELD,
-        SECURITY_CONSTRAINTS_FIELD,
-        OTHER_CONSTRAINTS_FIELD,
-    ],
-};
-const DATA_MANAGERS_SECTION = {
-    labelKey: marker('editor.record.form.section.dataManagers.label'),
-    descriptionKey: marker('editor.record.form.section.dataManagers.description'),
-    hidden: false,
-    fields: [CONTACTS_FOR_RESOURCE_FIELD],
-};
-const METADATA_POINT_OF_CONTACT_SECTION = {
-    labelKey: marker('editor.record.form.section.metadataPointOfContact.label'),
-    descriptionKey: marker('editor.record.form.section.metadataPointOfContact.description'),
-    hidden: false,
-    fields: [CONTACTS],
-};
-/************************************************************
- ***************           PAGES            *****************
- ************************************************************
- */
 const DEFAULT_CONFIGURATION = {
     pages: [
+        /**
+         * Page 1: DESCRIPTION
+         */
         {
             labelKey: marker('editor.record.form.page.description'),
             sections: [
-                TITLE_SECTION,
-                CLASSIFICATION_SECTION,
-                TOPICS_SECTION,
-                ABOUT_SECTION,
-                GEOGRAPHICAL_COVERAGE_SECTION,
+                // Section: Title, abstract and overview
+                {
+                    fields: [
+                        {
+                            model: 'title',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.title'),
+                            },
+                        },
+                        {
+                            model: 'abstract',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.abstract'),
+                            },
+                        },
+                        {
+                            model: 'overviews',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.overviews'),
+                            },
+                        },
+                    ],
+                },
+                // Section: Classification
+                {
+                    labelKey: marker('editor.record.form.section.classification.label'),
+                    descriptionKey: marker('editor.record.form.section.classification.description'),
+                    fields: [
+                        {
+                            model: 'keywords',
+                            formFieldConfig: {},
+                        },
+                    ],
+                },
+                // Section: Topics
+                {
+                    labelKey: marker('editor.record.form.section.topics.label'),
+                    descriptionKey: marker('editor.record.form.section.topics.description'),
+                    fields: [
+                        {
+                            model: 'topics',
+                            formFieldConfig: {},
+                        },
+                    ],
+                },
+                // Section: About (identifiers, dates, update frequency, temporal extents)
+                {
+                    labelKey: marker('editor.record.form.section.about.label'),
+                    descriptionKey: marker('editor.record.form.section.about.description'),
+                    fields: [
+                        {
+                            model: 'uniqueIdentifier',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.uniqueIdentifier'),
+                            },
+                            hidden: true,
+                        },
+                        {
+                            model: 'resourceIdentifiers',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.resourceIdentifier'),
+                            },
+                        },
+                        {
+                            model: 'resourceCreated',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.resourceCreated'),
+                            },
+                            gridColumnSpan: 1,
+                        },
+                        {
+                            model: 'resourceUpdated',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.resourceUpdated'),
+                            },
+                            gridColumnSpan: 1,
+                        },
+                        {
+                            model: 'recordUpdated',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.recordUpdated'),
+                            },
+                            onSaveProcess: '${dateNow()}',
+                            gridColumnSpan: 1,
+                            hidden: true,
+                        },
+                        {
+                            model: 'updateFrequency',
+                            formFieldConfig: {},
+                        },
+                        {
+                            model: 'temporalExtents',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.temporalExtents'),
+                            },
+                            hidden: '${record.kind == "service"}',
+                        },
+                    ],
+                },
+                // Section: Geographical coverage
+                {
+                    labelKey: marker('editor.record.form.section.geographicalCoverage.label'),
+                    fields: [
+                        {
+                            componentName: 'form-field-spatial-toggle',
+                            formFieldConfig: {},
+                            hidden: true,
+                        },
+                        {
+                            model: 'spatialExtents',
+                            formFieldConfig: {},
+                        },
+                    ],
+                },
             ],
         },
+        /**
+         * Page 2: RESOURCES
+         */
         {
             labelKey: marker('editor.record.form.page.resources'),
-            sections: [ASSOCIATED_RESOURCES_SECTION, ANNEXES_SECTION],
+            sections: [
+                // Section: Associated resources (distributions, services, …)
+                {
+                    hidden: '${record.kind != "dataset"}',
+                    labelKey: marker('editor.record.form.section.associatedResources.label'),
+                    descriptionKey: marker('editor.record.form.section.associatedResources.description'),
+                    fields: [
+                        {
+                            model: 'onlineResources',
+                            modelSpecifier: 'onlineResourceType:!link',
+                            formFieldConfig: {},
+                        },
+                    ],
+                },
+                // Section: Annexes (links)
+                {
+                    labelKey: marker('editor.record.form.section.annexes.label'),
+                    descriptionKey: marker('editor.record.form.section.annexes.description'),
+                    fields: [
+                        {
+                            model: 'onlineResources',
+                            modelSpecifier: 'onlineResourceType:link',
+                            formFieldConfig: {},
+                        },
+                    ],
+                },
+            ],
         },
+        /**
+         * Page 3: ACCESS & CONTACT
+         */
         {
             labelKey: marker('editor.record.form.page.accessAndContact'),
             sections: [
-                USE_AND_ACCESS_CONDITIONS_SECTION,
-                DATA_MANAGERS_SECTION,
-                METADATA_POINT_OF_CONTACT_SECTION,
+                // Section: Use and access conditions (license, constraints)
+                {
+                    labelKey: marker('editor.record.form.section.useAndAccessConditions.label'),
+                    fields: [
+                        {
+                            model: 'licenses',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.license'),
+                            },
+                        },
+                        {
+                            componentName: 'form-field-constraints-shortcuts',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.constraintsShortcuts'),
+                            },
+                        },
+                        {
+                            model: 'legalConstraints',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.legalConstraints'),
+                            },
+                        },
+                        {
+                            model: 'securityConstraints',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.securityConstraints'),
+                            },
+                        },
+                        {
+                            model: 'otherConstraints',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.otherConstraints'),
+                            },
+                        },
+                    ],
+                },
+                // Section: Data managers (contacts for resource)
+                {
+                    labelKey: marker('editor.record.form.section.dataManagers.label'),
+                    descriptionKey: marker('editor.record.form.section.dataManagers.description'),
+                    fields: [
+                        {
+                            model: 'contactsForResource',
+                            formFieldConfig: { labelKey: '' },
+                        },
+                    ],
+                },
+                // Section: Metadata point of contact
+                {
+                    labelKey: marker('editor.record.form.section.metadataPointOfContact.label'),
+                    descriptionKey: marker('editor.record.form.section.metadataPointOfContact.description'),
+                    fields: [
+                        {
+                            model: 'contacts',
+                            formFieldConfig: { labelKey: '' },
+                        },
+                    ],
+                },
+            ],
+        },
+    ],
+};
+// reduced configuration used by the light edition page for reuse records;
+// the point of contact is edited outside the record form on that page
+const REUSE_LIGHT_CONFIGURATION = {
+    pages: [
+        {
+            sections: [
+                {
+                    hidden: false,
+                    fields: [
+                        {
+                            model: 'title',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.title'),
+                            },
+                        },
+                        {
+                            model: 'abstract',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.abstract'),
+                            },
+                        },
+                        {
+                            model: 'onlineResources',
+                            modelSpecifier: 'onlineResourceType:singleLink',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.reuseUrl'),
+                            },
+                        },
+                        {
+                            model: 'overviews',
+                            formFieldConfig: {
+                                labelKey: marker('editor.record.form.field.overviews'),
+                            },
+                        },
+                    ],
+                },
             ],
         },
     ],
 };
-/************************************************************
- ***************           LICENSES            **************
- ************************************************************
+/**
+ * OTHER SETTINGS
  */
 const AVAILABLE_LICENSES = [
     'cc-by',
@@ -36403,10 +36615,6 @@ marker('editor.record.form.license.odc-by');
 marker('editor.record.form.license.pddl');
 marker('editor.record.form.license.unknown');
 const MAX_UPLOAD_SIZE_MB = 10;
-/************************************************************
- ***************        SPATIAL SCOPE            ************
- ************************************************************
- */
 const SPATIAL_SCOPES = [
     {
         key: 'http://inspire.ec.europa.eu/metadata-codelist/SpatialScope/national',
@@ -36421,10 +36629,6 @@ const SPATIAL_SCOPES = [
         type: 'theme',
     },
 ];
-/************************************************************
- ***************             ISO TOPICS             **************
- ************************************************************
- */
 // label keys mirror the ISO MD_TopicCategoryCode value for consistency
 // TODO: correctly handle code lists; for instance, this code list is specific to ISO 19139
 const ISO_TOPICS = [
@@ -36638,7 +36842,10 @@ class EditorFacade {
         this.setCurrentPage(0);
     }
     saveRecord() {
-        this.store.dispatch(saveRecord());
+        this.store.dispatch(saveRecord({ publish: false }));
+    }
+    saveAndPublishRecord() {
+        this.store.dispatch(saveRecord({ publish: true }));
     }
     undoRecordDraft() {
         this.store.dispatch(undoRecordDraft());
@@ -36677,6 +36884,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
             type: Injectable
         }] });
 
+class ContactDetailsFormComponent {
+    constructor() {
+        this.contactChange = new EventEmitter();
+    }
+    // emit a fresh contact on each change; never mutate the @Input
+    handleChange(change) {
+        this.contactChange.emit({ ...this.contact, ...change });
+    }
+    handleOrganizationChange(change) {
+        this.contactChange.emit({
+            ...this.contact,
+            organization: {
+                ...(this.contact.organization ?? {}),
+                ...change,
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ContactDetailsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: ContactDetailsFormComponent, isStandalone: true, selector: "gn-ui-contact-details-form", inputs: { contact: "contact" }, outputs: { contactChange: "contactChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-7\">\n  <div class=\"grid grid-cols-2 gap-4\">\n    <div class=\"min-w-0\">\n      <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n        editor.record.form.field.contactDetails.lastName\n      </h3>\n      <gn-ui-text-input\n        class=\"block w-full\"\n        extraClass=\"w-full\"\n        [value]=\"contact.lastName ?? ''\"\n        (valueChange)=\"handleChange({ lastName: $event })\"\n        [placeholder]=\"\n          'editor.record.form.field.contactDetails.lastName.placeholder'\n            | translate\n        \"\n        data-test=\"contactDetailsLastName\"\n      ></gn-ui-text-input>\n    </div>\n    <div class=\"min-w-0\">\n      <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n        editor.record.form.field.contactDetails.firstName\n      </h3>\n      <gn-ui-text-input\n        class=\"block w-full\"\n        extraClass=\"w-full\"\n        [value]=\"contact.firstName ?? ''\"\n        (valueChange)=\"handleChange({ firstName: $event })\"\n        [placeholder]=\"\n          'editor.record.form.field.contactDetails.firstName.placeholder'\n            | translate\n        \"\n        data-test=\"contactDetailsFirstName\"\n      ></gn-ui-text-input>\n    </div>\n  </div>\n  <div>\n    <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n      editor.record.form.field.contactDetails.email\n    </h3>\n    <gn-ui-text-input\n      class=\"block w-full\"\n      extraClass=\"w-full\"\n      [type]=\"'email'\"\n      [value]=\"contact.email ?? ''\"\n      (valueChange)=\"handleChange({ email: $event })\"\n      [placeholder]=\"\n        'editor.record.form.field.contactDetails.email.placeholder' | translate\n      \"\n      data-test=\"contactDetailsEmail\"\n    ></gn-ui-text-input>\n  </div>\n  <div>\n    <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n      editor.record.form.field.contactDetails.organization\n    </h3>\n    <gn-ui-text-input\n      class=\"block w-full\"\n      extraClass=\"w-full\"\n      [value]=\"contact.organization?.name ?? ''\"\n      (valueChange)=\"handleOrganizationChange({ name: $event })\"\n      [placeholder]=\"\n        'editor.record.form.field.contactDetails.organization.placeholder'\n          | translate\n      \"\n      data-test=\"contactDetailsOrganization\"\n    ></gn-ui-text-input>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled", "type"], outputs: ["valueChange"] }, { 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: ContactDetailsFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-contact-details-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [TextInputComponent, TranslateDirective, TranslatePipe], template: "<div class=\"flex flex-col gap-7\">\n  <div class=\"grid grid-cols-2 gap-4\">\n    <div class=\"min-w-0\">\n      <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n        editor.record.form.field.contactDetails.lastName\n      </h3>\n      <gn-ui-text-input\n        class=\"block w-full\"\n        extraClass=\"w-full\"\n        [value]=\"contact.lastName ?? ''\"\n        (valueChange)=\"handleChange({ lastName: $event })\"\n        [placeholder]=\"\n          'editor.record.form.field.contactDetails.lastName.placeholder'\n            | translate\n        \"\n        data-test=\"contactDetailsLastName\"\n      ></gn-ui-text-input>\n    </div>\n    <div class=\"min-w-0\">\n      <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n        editor.record.form.field.contactDetails.firstName\n      </h3>\n      <gn-ui-text-input\n        class=\"block w-full\"\n        extraClass=\"w-full\"\n        [value]=\"contact.firstName ?? ''\"\n        (valueChange)=\"handleChange({ firstName: $event })\"\n        [placeholder]=\"\n          'editor.record.form.field.contactDetails.firstName.placeholder'\n            | translate\n        \"\n        data-test=\"contactDetailsFirstName\"\n      ></gn-ui-text-input>\n    </div>\n  </div>\n  <div>\n    <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n      editor.record.form.field.contactDetails.email\n    </h3>\n    <gn-ui-text-input\n      class=\"block w-full\"\n      extraClass=\"w-full\"\n      [type]=\"'email'\"\n      [value]=\"contact.email ?? ''\"\n      (valueChange)=\"handleChange({ email: $event })\"\n      [placeholder]=\"\n        'editor.record.form.field.contactDetails.email.placeholder' | translate\n      \"\n      data-test=\"contactDetailsEmail\"\n    ></gn-ui-text-input>\n  </div>\n  <div>\n    <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n      editor.record.form.field.contactDetails.organization\n    </h3>\n    <gn-ui-text-input\n      class=\"block w-full\"\n      extraClass=\"w-full\"\n      [value]=\"contact.organization?.name ?? ''\"\n      (valueChange)=\"handleOrganizationChange({ name: $event })\"\n      [placeholder]=\"\n        'editor.record.form.field.contactDetails.organization.placeholder'\n          | translate\n      \"\n      data-test=\"contactDetailsOrganization\"\n    ></gn-ui-text-input>\n  </div>\n</div>\n" }]
+        }], propDecorators: { contact: [{
+                type: Input
+            }], contactChange: [{
+                type: Output
+            }] } });
+
 class ImportRecordComponent {
     constructor() {
         this.router = inject(Router);
@@ -37058,7 +37294,7 @@ class MultilingualPanelComponent {
             provideNgIconsConfig({
                 size: '1.25em',
             }),
-        ], viewQueries: [{ propertyName: "actionMenuButtons", predicate: ["actionMenuButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-6 overflow-auto\"\n  style=\"background-color: #fafaf9\"\n>\n  <div class=\"flex flex-row px-2 justify-between\">\n    <span class=\"text-3xl font-title text-black/80\" translate\n      >editor.record.form.multilingual.title</span\n    >\n    @if (isMultilingual) {\n      <button\n        [title]=\"'editor.record.form.multilingual.open' | translate\"\n        (click)=\"toggleLanguageSelection()\"\n        data-test=\"activateSelection\"\n      >\n        <ng-icon class=\"mt-1\" name=\"iconoirSettings\"></ng-icon>\n      </button>\n    }\n  </div>\n  @if (editTranslations || !isMultilingual) {\n    <div class=\"flex flex-col gap-2\">\n      <gn-ui-check-toggle\n        class=\"p-2\"\n        [label]=\"'editor.record.form.multilingual.enable' | translate\"\n        [color]=\"'primary'\"\n        [(value)]=\"isMultilingual\"\n        (toggled)=\"switchMultilingual($event)\"\n      ></gn-ui-check-toggle>\n      @if (isMultilingual) {\n        <div class=\"flex flex-col gap-2\">\n          <div\n            class=\"flex flex-row justify-between border-t border-gray-300 p-3\"\n          >\n            <span class=\"mt-2 text-sm text-gray-600\" translate\n              >editor.record.form.multilingual.activate</span\n            >\n            <gn-ui-button\n              extraClass=\"w-16 h-8 font-bold\"\n              type=\"gray\"\n              (buttonClick)=\"validateTranslations()\"\n              data-test=\"validateSelection\"\n              >{{ 'editor.record.form.multilingual.validate' | translate }}\n            </gn-ui-button>\n          </div>\n          @if (supportedLanguages$ | async; as languages) {\n            @for (lang of languages; track lang) {\n              <div\n                class=\"flex flex-col gap-2 w-full px-2\"\n                data-test=\"langAvailable\"\n                [attr.data-test-lang]=\"lang\"\n              >\n                <gn-ui-button\n                  [extraClass]=\"getExtraClass(lang)\"\n                  type=\"gray\"\n                  (buttonClick)=\"toggleLanguage(lang)\"\n                  [disabled]=\"lang === _record.defaultLanguage\"\n                  [title]=\"getToggleTitle(lang)\"\n                >\n                  <span [class]=\"getIconClass(lang)\"></span>\n                  <span class=\"ml-2\">{{ 'language.' + lang | translate }}</span>\n                </gn-ui-button>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n  @if (!editTranslations && isMultilingual) {\n    <div class=\"flex flex-col gap-2\">\n      @for (\n        recordLang of sortLanguages(recordLanguages);\n        track recordLang;\n        let i = $index\n      ) {\n        <gn-ui-button\n          extraClass=\"flex flex-row justify-between bg-white border border-white rounded mb-1 h-[34px] w-full\"\n          [ngClass]=\"{\n            'mt-8': isFirstUnsupported(i),\n            '': true,\n          }\"\n          (buttonClick)=\"switchFormLang(recordLang)\"\n          type=\"outline\"\n          data-test=\"langSwitch\"\n        >\n          <div class=\"flex flex-row gap-2 items-center\">\n            @if (recordLang === formLanguage) {\n              <ng-icon\n                class=\"text-primary mt-1\"\n                name=\"iconoirCheckCircle\"\n              ></ng-icon>\n            }\n            @if (recordLang !== formLanguage) {\n              <ng-icon\n                class=\"text-gray-800 mt-1\"\n                name=\"iconoirCircle\"\n              ></ng-icon>\n            }\n            @if (recordLang.length === 2) {\n              <span [class]=\"getIconClass(recordLang) + 'mt-1'\"></span>\n            }\n            <span [ngClass]=\"recordLang === formLanguage ? 'text-black' : ''\">{{\n              isLangSupported(recordLang)\n                ? ('language.' + recordLang | translate)\n                : recordLang.toUpperCase()\n            }}</span>\n          </div>\n          <div class=\"flex flex-row gap-2 items-center\">\n            @if (recordLang === formLanguage) {\n              <span class=\"text-xs text-base\" translate\n                >editor.record.form.multilingual.default</span\n              >\n            }\n            <button\n              (click)=\"\n                openActionMenu(recordLang, template); $event.stopPropagation()\n              \"\n              cdkOverlayOrigin\n              #actionMenuButton\n            >\n              <ng-icon class=\"pb-5\" name=\"matMoreHorizOutline\"></ng-icon>\n            </button>\n            <ng-template #template>\n              <gn-ui-action-menu\n                [canDelete]=\"recordLang !== _record.defaultLanguage\"\n                page=\"record\"\n                (delete)=\"confirmDeleteAction(recordLang)\"\n                (closeActionMenu)=\"closeActionMenu()\"\n                (switch)=\"switchDefaultLang(recordLang)\"\n              >\n              </gn-ui-action-menu>\n            </ng-template>\n          </div>\n        </gn-ui-button>\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CheckToggleComponent, selector: "gn-ui-check-toggle", inputs: ["title", "label", "value", "color"], outputs: ["toggled"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ActionMenuComponent, selector: "gn-ui-action-menu", inputs: ["canDuplicate", "isDuplicating", "canDelete", "page"], outputs: ["duplicate", "delete", "closeActionMenu", "rollback", "switch"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "actionMenuButtons", predicate: ["actionMenuButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-6 overflow-auto\"\n  style=\"background-color: #fafaf9\"\n>\n  <div class=\"flex flex-row px-2 justify-between\">\n    <span class=\"text-3xl font-title text-black/80\" translate\n      >editor.record.form.multilingual.title</span\n    >\n    @if (isMultilingual) {\n      <button\n        [title]=\"'editor.record.form.multilingual.open' | translate\"\n        (click)=\"toggleLanguageSelection()\"\n        data-test=\"activateSelection\"\n      >\n        <ng-icon class=\"mt-1\" name=\"iconoirSettings\"></ng-icon>\n      </button>\n    }\n  </div>\n  @if (editTranslations || !isMultilingual) {\n    <div class=\"flex flex-col gap-2\">\n      <gn-ui-check-toggle\n        class=\"p-2\"\n        [label]=\"'editor.record.form.multilingual.enable' | translate\"\n        [color]=\"'primary'\"\n        [(value)]=\"isMultilingual\"\n        (toggled)=\"switchMultilingual($event)\"\n      ></gn-ui-check-toggle>\n      @if (isMultilingual) {\n        <div class=\"flex flex-col gap-2\">\n          <div\n            class=\"flex flex-row justify-between border-t border-gray-300 p-3\"\n          >\n            <span class=\"mt-2 text-sm text-gray-600\" translate\n              >editor.record.form.multilingual.activate</span\n            >\n            <gn-ui-button\n              extraClass=\"w-16 h-8 font-bold\"\n              type=\"gray\"\n              (buttonClick)=\"validateTranslations()\"\n              data-test=\"validateSelection\"\n              >{{ 'editor.record.form.multilingual.validate' | translate }}\n            </gn-ui-button>\n          </div>\n          @if (supportedLanguages$ | async; as languages) {\n            @for (lang of languages; track lang) {\n              <div\n                class=\"flex flex-col gap-2 w-full px-2\"\n                data-test=\"langAvailable\"\n                [attr.data-test-lang]=\"lang\"\n              >\n                <gn-ui-button\n                  [extraClass]=\"getExtraClass(lang)\"\n                  type=\"gray\"\n                  (buttonClick)=\"toggleLanguage(lang)\"\n                  [disabled]=\"lang === _record.defaultLanguage\"\n                  [title]=\"getToggleTitle(lang)\"\n                >\n                  <span [class]=\"getIconClass(lang)\"></span>\n                  <span class=\"ml-2\">{{ 'language.' + lang | translate }}</span>\n                </gn-ui-button>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n  @if (!editTranslations && isMultilingual) {\n    <div class=\"flex flex-col gap-2\">\n      @for (\n        recordLang of sortLanguages(recordLanguages);\n        track recordLang;\n        let i = $index\n      ) {\n        <gn-ui-button\n          extraClass=\"flex flex-row justify-between bg-white border border-white rounded mb-1 h-[34px] w-full\"\n          [ngClass]=\"{\n            'mt-8': isFirstUnsupported(i),\n            '': true,\n          }\"\n          (buttonClick)=\"switchFormLang(recordLang)\"\n          type=\"outline\"\n          data-test=\"langSwitch\"\n        >\n          <div class=\"flex flex-row gap-2 items-center\">\n            @if (recordLang === formLanguage) {\n              <ng-icon\n                class=\"text-primary mt-1\"\n                name=\"iconoirCheckCircle\"\n              ></ng-icon>\n            }\n            @if (recordLang !== formLanguage) {\n              <ng-icon\n                class=\"text-gray-800 mt-1\"\n                name=\"iconoirCircle\"\n              ></ng-icon>\n            }\n            @if (recordLang.length === 2) {\n              <span [class]=\"getIconClass(recordLang) + 'mt-1'\"></span>\n            }\n            <span [ngClass]=\"recordLang === formLanguage ? 'text-black' : ''\">{{\n              isLangSupported(recordLang)\n                ? ('language.' + recordLang | translate)\n                : recordLang.toUpperCase()\n            }}</span>\n          </div>\n          <div class=\"flex flex-row gap-2 items-center\">\n            @if (recordLang === formLanguage) {\n              <span class=\"text-xs text-base\" translate\n                >editor.record.form.multilingual.default</span\n              >\n            }\n            <button\n              (click)=\"\n                openActionMenu(recordLang, template); $event.stopPropagation()\n              \"\n              cdkOverlayOrigin\n              #actionMenuButton\n            >\n              <ng-icon class=\"pb-5\" name=\"matMoreHorizOutline\"></ng-icon>\n            </button>\n            <ng-template #template>\n              <gn-ui-action-menu\n                [canDelete]=\"recordLang !== _record.defaultLanguage\"\n                page=\"record\"\n                (delete)=\"confirmDeleteAction(recordLang)\"\n                (closeActionMenu)=\"closeActionMenu()\"\n                (switch)=\"switchDefaultLang(recordLang)\"\n              >\n              </gn-ui-action-menu>\n            </ng-template>\n          </div>\n        </gn-ui-button>\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CheckToggleComponent, selector: "gn-ui-check-toggle", inputs: ["title", "label", "value", "color"], outputs: ["toggled"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ActionMenuComponent, selector: "gn-ui-action-menu", inputs: ["canDuplicate", "isDuplicating", "canDelete", "page", "recordKind"], outputs: ["duplicate", "delete", "closeActionMenu", "rollback", "switch"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: MultilingualPanelComponent, decorators: [{
             type: Component,
@@ -37155,36 +37391,12 @@ class GenericKeywordsComponent {
         this.changedKeywords.emit(this.keywords);
         this.deletedKeyword.emit(keyword);
     }
-    isPlaceWithoutExtent(keyword) {
-        if (keyword.type !== 'place')
-            return false;
-        return !keyword.bbox;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GenericKeywordsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: GenericKeywordsComponent, isStandalone: true, selector: "gn-ui-generic-keywords", inputs: { keywords: "keywords", keywordTypes: "keywordTypes", placeholder: "placeholder", allowSubmit: "allowSubmit" }, outputs: { changedKeywords: "changedKeywords", addedKeyword: "addedKeyword", deletedKeyword: "deletedKeyword" }, providers: [
-            provideIcons({
-                matWarningAmberOutline,
-            }),
-            provideNgIconsConfig({
-                size: '1.5em',
-            }),
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <gn-ui-autocomplete\n    [placeholder]=\"placeholder\"\n    [displayWithFn]=\"displayWithFn\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"handleItemSelection($event)\"\n    [preventCompleteOnSelection]=\"false\"\n    [minCharacterCount]=\"1\"\n    [allowSubmit]=\"false\"\n    [clearOnSelection]=\"true\"\n  ></gn-ui-autocomplete>\n  <div class=\"flex gap-2 flex-wrap\">\n    @for (keyword of keywords; track keyword) {\n      <gn-ui-badge\n        [removable]=\"true\"\n        (badgeRemoveClicked)=\"removeKeyword(keyword)\"\n        >{{ keyword.label }}\n        @if (isPlaceWithoutExtent(keyword)) {\n          <ng-icon\n            [title]=\"\n              'editor.record.form.keywords.place.withoutExtent' | translate\n            \"\n            class=\"badge-warning\"\n            name=\"matWarningAmberOutline\"\n          ></ng-icon>\n        }\n      </gn-ui-badge>\n    }\n  </div>\n</div>\n", styles: [".badge-warning{font-size:1.4em}\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: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: GenericKeywordsComponent, isStandalone: true, selector: "gn-ui-generic-keywords", inputs: { keywords: "keywords", keywordTypes: "keywordTypes", placeholder: "placeholder", allowSubmit: "allowSubmit" }, outputs: { changedKeywords: "changedKeywords", addedKeyword: "addedKeyword", deletedKeyword: "deletedKeyword" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <gn-ui-autocomplete\n    [placeholder]=\"placeholder\"\n    [displayWithFn]=\"displayWithFn\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"handleItemSelection($event)\"\n    [preventCompleteOnSelection]=\"false\"\n    [minCharacterCount]=\"1\"\n    [allowSubmit]=\"false\"\n    [clearOnSelection]=\"true\"\n  ></gn-ui-autocomplete>\n  <div class=\"flex gap-2 flex-wrap\">\n    @for (keyword of keywords; track keyword) {\n      <gn-ui-keyword-badge\n        [keyword]=\"keyword\"\n        [editable]=\"true\"\n        (keywordRemove)=\"removeKeyword($event)\"\n      ></gn-ui-keyword-badge>\n    }\n  </div>\n</div>\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: KeywordBadgeComponent, selector: "gn-ui-keyword-badge", inputs: ["keyword", "editable"], outputs: ["keywordClick", "keywordRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GenericKeywordsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-generic-keywords', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        AutocompleteComponent,
-                        NgIconComponent,
-                        BadgeComponent,
-                        TranslatePipe,
-                    ], providers: [
-                        provideIcons({
-                            matWarningAmberOutline,
-                        }),
-                        provideNgIconsConfig({
-                            size: '1.5em',
-                        }),
-                    ], template: "<div class=\"flex flex-col gap-4\">\n  <gn-ui-autocomplete\n    [placeholder]=\"placeholder\"\n    [displayWithFn]=\"displayWithFn\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"handleItemSelection($event)\"\n    [preventCompleteOnSelection]=\"false\"\n    [minCharacterCount]=\"1\"\n    [allowSubmit]=\"false\"\n    [clearOnSelection]=\"true\"\n  ></gn-ui-autocomplete>\n  <div class=\"flex gap-2 flex-wrap\">\n    @for (keyword of keywords; track keyword) {\n      <gn-ui-badge\n        [removable]=\"true\"\n        (badgeRemoveClicked)=\"removeKeyword(keyword)\"\n        >{{ keyword.label }}\n        @if (isPlaceWithoutExtent(keyword)) {\n          <ng-icon\n            [title]=\"\n              'editor.record.form.keywords.place.withoutExtent' | translate\n            \"\n            class=\"badge-warning\"\n            name=\"matWarningAmberOutline\"\n          ></ng-icon>\n        }\n      </gn-ui-badge>\n    }\n  </div>\n</div>\n", styles: [".badge-warning{font-size:1.4em}\n"] }]
+            args: [{ selector: 'gn-ui-generic-keywords', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [AutocompleteComponent, KeywordBadgeComponent], template: "<div class=\"flex flex-col gap-4\">\n  <gn-ui-autocomplete\n    [placeholder]=\"placeholder\"\n    [displayWithFn]=\"displayWithFn\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"handleItemSelection($event)\"\n    [preventCompleteOnSelection]=\"false\"\n    [minCharacterCount]=\"1\"\n    [allowSubmit]=\"false\"\n    [clearOnSelection]=\"true\"\n  ></gn-ui-autocomplete>\n  <div class=\"flex gap-2 flex-wrap\">\n    @for (keyword of keywords; track keyword) {\n      <gn-ui-keyword-badge\n        [keyword]=\"keyword\"\n        [editable]=\"true\"\n        (keywordRemove)=\"removeKeyword($event)\"\n      ></gn-ui-keyword-badge>\n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { keywords: [{
                 type: Input
             }], keywordTypes: [{
@@ -37438,7 +37650,7 @@ class FormFieldRichComponent {
         this.preview = !this.preview;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldRichComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldRichComponent, isStandalone: true, selector: "gn-ui-form-field-rich", inputs: { label: "label", hint: "hint", placeholder: "placeholder", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<gn-ui-form-field-wrapper [label]=\"label\" [hint]=\"hint\">\n  <gn-ui-button\n    form-field-interaction\n    [type]=\"preview ? 'black' : 'gray'\"\n    style=\"\n      --gn-ui-button-padding: 3px 8px;\n      --gn-ui-button-font-size: 12px;\n      --gn-ui-button-rounded: 20px;\n    \"\n    (buttonClick)=\"togglePreview()\"\n  >\n    <span\n      class=\"material-symbols-outlined gn-ui-icon-small\"\n      [ngClass]=\"{ 'text-primary': !preview }\"\n      >{{ preview ? 'visibility_off' : 'visibility' }}</span\n    >\n    &nbsp;\n    {{ preview ? 'Edit' : 'Preview' }}\n  </gn-ui-button>\n  <gn-ui-markdown-editor\n    [preview]=\"preview\"\n    [placeholder]=\"placeholder\"\n    [textContent]=\"value\"\n    (textContentChanged)=\"valueChange.emit($event)\"\n    textAreaExtraClass=\"min-h-[100px]\"\n  ></gn-ui-markdown-editor>\n</gn-ui-form-field-wrapper>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MarkdownEditorComponent, selector: "gn-ui-markdown-editor", inputs: ["preview", "placeholder", "textContent", "textAreaExtraClass"], outputs: ["textContentChanged"] }, { kind: "component", type: FormFieldWrapperComponent, selector: "gn-ui-form-field-wrapper", inputs: ["label", "hint"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldRichComponent, isStandalone: true, selector: "gn-ui-form-field-rich", inputs: { label: "label", hint: "hint", placeholder: "placeholder", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [provideIcons({ matVisibilityOutline, matVisibilityOffOutline })], ngImport: i0, template: "<gn-ui-form-field-wrapper [label]=\"label\" [hint]=\"hint\">\n  <gn-ui-button\n    form-field-interaction\n    [type]=\"preview ? 'black' : 'gray'\"\n    style=\"\n      --gn-ui-button-padding: 3px 8px;\n      --gn-ui-button-font-size: 12px;\n      --gn-ui-button-rounded: 20px;\n    \"\n    (buttonClick)=\"togglePreview()\"\n  >\n    <ng-icon\n      [name]=\"preview ? 'matVisibilityOffOutline' : 'matVisibilityOutline'\"\n      size=\"16\"\n      [ngClass]=\"{ 'text-primary': !preview }\"\n    ></ng-icon>\n    &nbsp;\n    {{ preview ? 'Edit' : 'Preview' }}\n  </gn-ui-button>\n  <gn-ui-markdown-editor\n    [preview]=\"preview\"\n    [placeholder]=\"placeholder\"\n    [textContent]=\"value\"\n    (textContentChanged)=\"valueChange.emit($event)\"\n    textAreaExtraClass=\"min-h-[100px]\"\n  ></gn-ui-markdown-editor>\n</gn-ui-form-field-wrapper>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MarkdownEditorComponent, selector: "gn-ui-markdown-editor", inputs: ["preview", "placeholder", "textContent", "textAreaExtraClass"], outputs: ["textContentChanged"] }, { kind: "component", type: FormFieldWrapperComponent, selector: "gn-ui-form-field-wrapper", inputs: ["label", "hint"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldRichComponent, decorators: [{
             type: Component,
@@ -37448,7 +37660,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         MarkdownEditorComponent,
                         FormFieldWrapperComponent,
                         ButtonComponent,
-                    ], template: "<gn-ui-form-field-wrapper [label]=\"label\" [hint]=\"hint\">\n  <gn-ui-button\n    form-field-interaction\n    [type]=\"preview ? 'black' : 'gray'\"\n    style=\"\n      --gn-ui-button-padding: 3px 8px;\n      --gn-ui-button-font-size: 12px;\n      --gn-ui-button-rounded: 20px;\n    \"\n    (buttonClick)=\"togglePreview()\"\n  >\n    <span\n      class=\"material-symbols-outlined gn-ui-icon-small\"\n      [ngClass]=\"{ 'text-primary': !preview }\"\n      >{{ preview ? 'visibility_off' : 'visibility' }}</span\n    >\n    &nbsp;\n    {{ preview ? 'Edit' : 'Preview' }}\n  </gn-ui-button>\n  <gn-ui-markdown-editor\n    [preview]=\"preview\"\n    [placeholder]=\"placeholder\"\n    [textContent]=\"value\"\n    (textContentChanged)=\"valueChange.emit($event)\"\n    textAreaExtraClass=\"min-h-[100px]\"\n  ></gn-ui-markdown-editor>\n</gn-ui-form-field-wrapper>\n" }]
+                        NgIconComponent,
+                    ], providers: [provideIcons({ matVisibilityOutline, matVisibilityOffOutline })], template: "<gn-ui-form-field-wrapper [label]=\"label\" [hint]=\"hint\">\n  <gn-ui-button\n    form-field-interaction\n    [type]=\"preview ? 'black' : 'gray'\"\n    style=\"\n      --gn-ui-button-padding: 3px 8px;\n      --gn-ui-button-font-size: 12px;\n      --gn-ui-button-rounded: 20px;\n    \"\n    (buttonClick)=\"togglePreview()\"\n  >\n    <ng-icon\n      [name]=\"preview ? 'matVisibilityOffOutline' : 'matVisibilityOutline'\"\n      size=\"16\"\n      [ngClass]=\"{ 'text-primary': !preview }\"\n    ></ng-icon>\n    &nbsp;\n    {{ preview ? 'Edit' : 'Preview' }}\n  </gn-ui-button>\n  <gn-ui-markdown-editor\n    [preview]=\"preview\"\n    [placeholder]=\"placeholder\"\n    [textContent]=\"value\"\n    (textContentChanged)=\"valueChange.emit($event)\"\n    textAreaExtraClass=\"min-h-[100px]\"\n  ></gn-ui-markdown-editor>\n</gn-ui-form-field-wrapper>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], hint: [{
@@ -37727,32 +37940,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Output
             }] } });
 
-class ContactDetailsFormComponent {
-    constructor() {
-        this.contactChange = new EventEmitter();
-    }
-    emitContactChange() {
-        this.contactChange.emit(this.contact);
-    }
-    handleOrganizationChange(change) {
-        this.contact.organization = {
-            ...(this.contact.organization ?? {}),
-            ...change,
-        };
-        this.emitContactChange();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ContactDetailsFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: ContactDetailsFormComponent, isStandalone: true, selector: "gn-ui-contact-details-form", inputs: { contact: "contact" }, outputs: { contactChange: "contactChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-7\">\n  <div class=\"grid grid-cols-2 gap-4\">\n    <div class=\"min-w-0\">\n      <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n        editor.record.form.field.contactDetails.lastName\n      </h3>\n      <gn-ui-text-input\n        class=\"block w-full\"\n        extraClass=\"w-full\"\n        [(value)]=\"contact.lastName\"\n        (valueChange)=\"emitContactChange()\"\n        [placeholder]=\"\n          'editor.record.form.field.contactDetails.lastName.placeholder'\n            | translate\n        \"\n        data-test=\"contactDetailsLastName\"\n      ></gn-ui-text-input>\n    </div>\n    <div class=\"min-w-0\">\n      <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n        editor.record.form.field.contactDetails.firstName\n      </h3>\n      <gn-ui-text-input\n        class=\"block w-full\"\n        extraClass=\"w-full\"\n        [(value)]=\"contact.firstName\"\n        (valueChange)=\"emitContactChange()\"\n        [placeholder]=\"\n          'editor.record.form.field.contactDetails.firstName.placeholder'\n            | translate\n        \"\n        data-test=\"contactDetailsFirstName\"\n      ></gn-ui-text-input>\n    </div>\n  </div>\n  <div>\n    <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n      editor.record.form.field.contactDetails.email\n    </h3>\n    <gn-ui-text-input\n      class=\"block w-full\"\n      extraClass=\"w-full\"\n      [value]=\"contact.organization?.email ?? ''\"\n      (valueChange)=\"handleOrganizationChange({ email: $event })\"\n      [placeholder]=\"\n        'editor.record.form.field.contactDetails.email.placeholder' | translate\n      \"\n      data-test=\"contactDetailsEmail\"\n    ></gn-ui-text-input>\n  </div>\n  <div>\n    <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n      editor.record.form.field.contactDetails.organization\n    </h3>\n    <gn-ui-text-input\n      class=\"block w-full\"\n      extraClass=\"w-full\"\n      [value]=\"contact.organization?.name ?? ''\"\n      (valueChange)=\"handleOrganizationChange({ name: $event })\"\n      [placeholder]=\"\n        'editor.record.form.field.contactDetails.organization.placeholder'\n          | translate\n      \"\n      data-test=\"contactDetailsOrganization\"\n    ></gn-ui-text-input>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ContactDetailsFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-contact-details-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [TextInputComponent, TranslateDirective, TranslatePipe], template: "<div class=\"flex flex-col gap-7\">\n  <div class=\"grid grid-cols-2 gap-4\">\n    <div class=\"min-w-0\">\n      <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n        editor.record.form.field.contactDetails.lastName\n      </h3>\n      <gn-ui-text-input\n        class=\"block w-full\"\n        extraClass=\"w-full\"\n        [(value)]=\"contact.lastName\"\n        (valueChange)=\"emitContactChange()\"\n        [placeholder]=\"\n          'editor.record.form.field.contactDetails.lastName.placeholder'\n            | translate\n        \"\n        data-test=\"contactDetailsLastName\"\n      ></gn-ui-text-input>\n    </div>\n    <div class=\"min-w-0\">\n      <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n        editor.record.form.field.contactDetails.firstName\n      </h3>\n      <gn-ui-text-input\n        class=\"block w-full\"\n        extraClass=\"w-full\"\n        [(value)]=\"contact.firstName\"\n        (valueChange)=\"emitContactChange()\"\n        [placeholder]=\"\n          'editor.record.form.field.contactDetails.firstName.placeholder'\n            | translate\n        \"\n        data-test=\"contactDetailsFirstName\"\n      ></gn-ui-text-input>\n    </div>\n  </div>\n  <div>\n    <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n      editor.record.form.field.contactDetails.email\n    </h3>\n    <gn-ui-text-input\n      class=\"block w-full\"\n      extraClass=\"w-full\"\n      [value]=\"contact.organization?.email ?? ''\"\n      (valueChange)=\"handleOrganizationChange({ email: $event })\"\n      [placeholder]=\"\n        'editor.record.form.field.contactDetails.email.placeholder' | translate\n      \"\n      data-test=\"contactDetailsEmail\"\n    ></gn-ui-text-input>\n  </div>\n  <div>\n    <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n      editor.record.form.field.contactDetails.organization\n    </h3>\n    <gn-ui-text-input\n      class=\"block w-full\"\n      extraClass=\"w-full\"\n      [value]=\"contact.organization?.name ?? ''\"\n      (valueChange)=\"handleOrganizationChange({ name: $event })\"\n      [placeholder]=\"\n        'editor.record.form.field.contactDetails.organization.placeholder'\n          | translate\n      \"\n      data-test=\"contactDetailsOrganization\"\n    ></gn-ui-text-input>\n  </div>\n</div>\n" }]
-        }], propDecorators: { contact: [{
-                type: Input
-            }], contactChange: [{
-                type: Output
-            }] } });
-
 class FormFieldContactsComponent {
     constructor() {
         this.platformServiceInterface = inject(PlatformServiceInterface);
@@ -38027,7 +38214,7 @@ class FormFieldOnlineLinkResourcesComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldOnlineLinkResourcesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldOnlineLinkResourcesComponent, isStandalone: true, selector: "gn-ui-form-field-online-link-resources", inputs: { metadataUuid: "metadataUuid", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col\">\n  <gn-ui-file-input\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    (fileChange)=\"handleFileChange($event)\"\n    (uploadCancel)=\"handleUploadCancel()\"\n    [uploadProgress]=\"uploadProgress\"\n    (urlChange)=\"handleUrlChange($event)\"\n  ></gn-ui-file-input>\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-sortable-list\n    [items]=\"linkResources\"\n    (itemsOrderChange)=\"handleResourcesChange($event)\"\n    [elementTemplate]=\"template\"\n  >\n  </gn-ui-sortable-list>\n  <ng-template #template let-onlineResource let-index=\"index\">\n    <gn-ui-online-resource-card\n      [onlineResource]=\"onlineResource\"\n      (modifyClick)=\"handleResourceModify(onlineResource, index)\"\n    ></gn-ui-online-resource-card>\n  </ng-template>\n\n  <ng-template #dialogTemplate let-onlineResource>\n    <div class=\"flex flex-col gap-[16px]\">\n      <div>\n        <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n          editor.record.form.field.onlineResource.edit.title\n        </h3>\n        <gn-ui-text-input [(value)]=\"onlineResource.name\"></gn-ui-text-input>\n      </div>\n      <div>\n        <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n          editor.record.form.field.onlineResource.edit.description\n        </h3>\n        <gn-ui-text-area\n          [(value)]=\"onlineResource.description\"\n        ></gn-ui-text-area>\n      </div>\n      <span class=\"w-full border-b border-gray-300\"></span>\n      <gn-ui-url-input\n        class=\"w-full\"\n        [disabled]=\"true\"\n        [value]=\"onlineResource.url\"\n        [showValidateButton]=\"false\"\n      ></gn-ui-url-input>\n    </div>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: FileInputComponent, selector: "gn-ui-file-input", inputs: ["maxSizeMB", "uploadProgress", "disabled"], outputs: ["fileChange", "urlChange", "uploadCancel"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: OnlineResourceCardComponent, selector: "gn-ui-online-resource-card", inputs: ["onlineResource"], outputs: ["modifyClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldOnlineLinkResourcesComponent, isStandalone: true, selector: "gn-ui-form-field-online-link-resources", inputs: { metadataUuid: "metadataUuid", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col\">\n  <gn-ui-file-input\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    (fileChange)=\"handleFileChange($event)\"\n    (uploadCancel)=\"handleUploadCancel()\"\n    [uploadProgress]=\"uploadProgress\"\n    (urlChange)=\"handleUrlChange($event)\"\n  ></gn-ui-file-input>\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-sortable-list\n    [items]=\"linkResources\"\n    (itemsOrderChange)=\"handleResourcesChange($event)\"\n    [elementTemplate]=\"template\"\n  >\n  </gn-ui-sortable-list>\n  <ng-template #template let-onlineResource let-index=\"index\">\n    <gn-ui-online-resource-card\n      [onlineResource]=\"onlineResource\"\n      (modifyClick)=\"handleResourceModify(onlineResource, index)\"\n    ></gn-ui-online-resource-card>\n  </ng-template>\n\n  <ng-template #dialogTemplate let-onlineResource>\n    <div class=\"flex flex-col gap-[16px]\">\n      <div>\n        <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n          editor.record.form.field.onlineResource.edit.title\n        </h3>\n        <gn-ui-text-input [(value)]=\"onlineResource.name\"></gn-ui-text-input>\n      </div>\n      <div>\n        <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n          editor.record.form.field.onlineResource.edit.description\n        </h3>\n        <gn-ui-text-area\n          [(value)]=\"onlineResource.description\"\n        ></gn-ui-text-area>\n      </div>\n      <span class=\"w-full border-b border-gray-300\"></span>\n      <gn-ui-url-input\n        class=\"w-full\"\n        [disabled]=\"true\"\n        [value]=\"onlineResource.url\"\n        [showValidateButton]=\"false\"\n      ></gn-ui-url-input>\n    </div>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: FileInputComponent, selector: "gn-ui-file-input", inputs: ["maxSizeMB", "uploadProgress", "disabled"], outputs: ["fileChange", "urlChange", "uploadCancel"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: OnlineResourceCardComponent, selector: "gn-ui-online-resource-card", inputs: ["onlineResource"], outputs: ["modifyClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled", "type"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldOnlineLinkResourcesComponent, decorators: [{
             type: Component,
@@ -38178,11 +38365,11 @@ class OnlineServiceResourceInputComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OnlineServiceResourceInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: OnlineServiceResourceInputComponent, isStandalone: true, selector: "gn-ui-online-service-resource-input", inputs: { service: "service", protocolHint: "protocolHint", disabled: "disabled", modifyMode: "modifyMode", protocolOptions: "protocolOptions" }, outputs: { serviceChange: "serviceChange" }, providers: [
-            provideIcons({ iconoirRefresh }),
+            provideIcons({ iconoirRefresh, matHelpOutline }),
             provideNgIconsConfig({
                 size: '1.5em',
             }),
-        ], ngImport: i0, template: "<div class=\"flex flex-row justify-between\">\n  <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n    editor.record.form.field.onlineResource.edit.protocol\n  </h3>\n  @if (protocolHint) {\n    <span\n      class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n      [matTooltip]=\"protocolHint\"\n      matTooltipPosition=\"above\"\n    >\n      help\n    </span>\n  }\n</div>\n<div class=\"flex flex-row items-center gap-4 h-[48px]\">\n  <mat-radio-group\n    aria-labelledby=\"example-radio-group-label\"\n    class=\"flex flex-row gap-[8px]\"\n    [(ngModel)]=\"_service.accessServiceProtocol\"\n    [disabled]=\"disabled\"\n    (change)=\"resetAllFormFields()\"\n  >\n    @for (protocolOption of availableProtocolOptions; track protocolOption) {\n      <mat-radio-button [value]=\"protocolOption.value\">\n        {{ protocolOption.label | translate }}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n  <gn-ui-url-input\n    class=\"w-full\"\n    (uploadClick)=\"handleUploadClick($event)\"\n    (valueChange)=\"handleUrlValueChange($event)\"\n    [disabled]=\"disabled\"\n    [value]=\"_service.url?.toString()\"\n    [showValidateButton]=\"activeLayerSuggestion\"\n    [resetUrlOnChange]=\"resetUrlOnChange\"\n  >\n    @if (activeLayerSuggestion) {\n      <ng-content>\n        <ng-icon name=\"iconoirRefresh\"></ng-icon>\n      </ng-content>\n    }\n  </gn-ui-url-input>\n\n  @if (loading) {\n    <div class=\"flex justify-center w-full py-4\">\n      <gn-ui-spinning-loader></gn-ui-spinning-loader>\n    </div>\n  }\n  @if (errorMessage) {\n    <p class=\"text-sm text-red-500 pl-4\" translate>\n      editor.record.form.field.onlineResource.edit.identifier.error\n    </p>\n  }\n\n  @if (\n    !activeLayerSuggestion ||\n    (_service.url && errorMessage) ||\n    (modifyMode && (layers$ | async).length === 0)\n  ) {\n    <gn-ui-text-input\n      class=\"grow border-b border-gray-300 pb-4\"\n      [(value)]=\"_service.identifierInService\"\n      [placeholder]=\"getIdentifierPlaceholder() | translate\"\n      data-cy=\"identifier-in-service\"\n      [disabled]=\"disabled\"\n    ></gn-ui-text-input>\n  }\n  @if (activeLayerSuggestion && (layers$ | async)?.length > 0) {\n    <gn-ui-autocomplete\n      class=\"border-b border-gray-300 pb-4\"\n      [placeholder]=\"\n        'editor.record.form.field.onlineResource.edit.identifier.select.label'\n          | translate\n      \"\n      [action]=\"autoCompleteAction\"\n      (itemSelected)=\"handleSelectValue($event)\"\n      [displayWithFn]=\"displayWithFn\"\n      [minCharacterCount]=\"0\"\n      [clearOnSelection]=\"false\"\n    >\n    </gn-ui-autocomplete>\n  }\n  @if (\n    !modifyMode &&\n    ((activeLayerSuggestion && (layers$ | async)) ||\n      !activeLayerSuggestion ||\n      (_service.url && errorMessage))\n  ) {\n    <gn-ui-button\n      (buttonClick)=\"submit()\"\n      [disabled]=\"disabled || !_service.identifierInService\"\n      type=\"primary\"\n    >\n      <span class=\"text-white font-bold\" translate>\n        editor.record.form.field.onlineResource.edit.identifier.submit</span\n      >\n    </gn-ui-button>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"flex flex-row justify-between\">\n  <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n    editor.record.form.field.onlineResource.edit.protocol\n  </h3>\n  @if (protocolHint) {\n    <ng-icon\n      name=\"matHelpOutline\"\n      size=\"16\"\n      class=\"m-2\"\n      [matTooltip]=\"protocolHint\"\n      matTooltipPosition=\"above\"\n    ></ng-icon>\n  }\n</div>\n<div class=\"flex flex-row items-center gap-4 h-[48px]\">\n  <mat-radio-group\n    aria-labelledby=\"example-radio-group-label\"\n    class=\"flex flex-row gap-[8px]\"\n    [(ngModel)]=\"_service.accessServiceProtocol\"\n    [disabled]=\"disabled\"\n    (change)=\"resetAllFormFields()\"\n  >\n    @for (protocolOption of availableProtocolOptions; track protocolOption) {\n      <mat-radio-button [value]=\"protocolOption.value\">\n        {{ protocolOption.label | translate }}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n  <gn-ui-url-input\n    class=\"w-full\"\n    (uploadClick)=\"handleUploadClick($event)\"\n    (valueChange)=\"handleUrlValueChange($event)\"\n    [disabled]=\"disabled\"\n    [value]=\"_service.url?.toString()\"\n    [showValidateButton]=\"activeLayerSuggestion\"\n    [resetUrlOnChange]=\"resetUrlOnChange\"\n  >\n    @if (activeLayerSuggestion) {\n      <ng-content>\n        <ng-icon name=\"iconoirRefresh\"></ng-icon>\n      </ng-content>\n    }\n  </gn-ui-url-input>\n\n  @if (loading) {\n    <div class=\"flex justify-center w-full py-4\">\n      <gn-ui-spinning-loader></gn-ui-spinning-loader>\n    </div>\n  }\n  @if (errorMessage) {\n    <p class=\"text-sm text-red-500 pl-4\" translate>\n      editor.record.form.field.onlineResource.edit.identifier.error\n    </p>\n  }\n\n  @if (\n    !activeLayerSuggestion ||\n    (_service.url && errorMessage) ||\n    (modifyMode && (layers$ | async).length === 0)\n  ) {\n    <gn-ui-text-input\n      class=\"grow border-b border-gray-300 pb-4\"\n      [(value)]=\"_service.identifierInService\"\n      [placeholder]=\"getIdentifierPlaceholder() | translate\"\n      data-cy=\"identifier-in-service\"\n      [disabled]=\"disabled\"\n    ></gn-ui-text-input>\n  }\n  @if (activeLayerSuggestion && (layers$ | async)?.length > 0) {\n    <gn-ui-autocomplete\n      class=\"border-b border-gray-300 pb-4\"\n      [placeholder]=\"\n        'editor.record.form.field.onlineResource.edit.identifier.select.label'\n          | translate\n      \"\n      [action]=\"autoCompleteAction\"\n      (itemSelected)=\"handleSelectValue($event)\"\n      [displayWithFn]=\"displayWithFn\"\n      [minCharacterCount]=\"0\"\n      [clearOnSelection]=\"false\"\n    >\n    </gn-ui-autocomplete>\n  }\n  @if (\n    !modifyMode &&\n    ((activeLayerSuggestion && (layers$ | async)) ||\n      !activeLayerSuggestion ||\n      (_service.url && errorMessage))\n  ) {\n    <gn-ui-button\n      (buttonClick)=\"submit()\"\n      [disabled]=\"disabled || !_service.identifierInService\"\n      type=\"primary\"\n    >\n      <span class=\"text-white font-bold\" translate>\n        editor.record.form.field.onlineResource.edit.identifier.submit</span\n      >\n    </gn-ui-button>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled", "type"], outputs: ["valueChange"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OnlineServiceResourceInputComponent, decorators: [{
             type: Component,
@@ -38200,11 +38387,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         TranslatePipe,
                         UrlInputComponent,
                     ], providers: [
-                        provideIcons({ iconoirRefresh }),
+                        provideIcons({ iconoirRefresh, matHelpOutline }),
                         provideNgIconsConfig({
                             size: '1.5em',
                         }),
-                    ], template: "<div class=\"flex flex-row justify-between\">\n  <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n    editor.record.form.field.onlineResource.edit.protocol\n  </h3>\n  @if (protocolHint) {\n    <span\n      class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n      [matTooltip]=\"protocolHint\"\n      matTooltipPosition=\"above\"\n    >\n      help\n    </span>\n  }\n</div>\n<div class=\"flex flex-row items-center gap-4 h-[48px]\">\n  <mat-radio-group\n    aria-labelledby=\"example-radio-group-label\"\n    class=\"flex flex-row gap-[8px]\"\n    [(ngModel)]=\"_service.accessServiceProtocol\"\n    [disabled]=\"disabled\"\n    (change)=\"resetAllFormFields()\"\n  >\n    @for (protocolOption of availableProtocolOptions; track protocolOption) {\n      <mat-radio-button [value]=\"protocolOption.value\">\n        {{ protocolOption.label | translate }}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n  <gn-ui-url-input\n    class=\"w-full\"\n    (uploadClick)=\"handleUploadClick($event)\"\n    (valueChange)=\"handleUrlValueChange($event)\"\n    [disabled]=\"disabled\"\n    [value]=\"_service.url?.toString()\"\n    [showValidateButton]=\"activeLayerSuggestion\"\n    [resetUrlOnChange]=\"resetUrlOnChange\"\n  >\n    @if (activeLayerSuggestion) {\n      <ng-content>\n        <ng-icon name=\"iconoirRefresh\"></ng-icon>\n      </ng-content>\n    }\n  </gn-ui-url-input>\n\n  @if (loading) {\n    <div class=\"flex justify-center w-full py-4\">\n      <gn-ui-spinning-loader></gn-ui-spinning-loader>\n    </div>\n  }\n  @if (errorMessage) {\n    <p class=\"text-sm text-red-500 pl-4\" translate>\n      editor.record.form.field.onlineResource.edit.identifier.error\n    </p>\n  }\n\n  @if (\n    !activeLayerSuggestion ||\n    (_service.url && errorMessage) ||\n    (modifyMode && (layers$ | async).length === 0)\n  ) {\n    <gn-ui-text-input\n      class=\"grow border-b border-gray-300 pb-4\"\n      [(value)]=\"_service.identifierInService\"\n      [placeholder]=\"getIdentifierPlaceholder() | translate\"\n      data-cy=\"identifier-in-service\"\n      [disabled]=\"disabled\"\n    ></gn-ui-text-input>\n  }\n  @if (activeLayerSuggestion && (layers$ | async)?.length > 0) {\n    <gn-ui-autocomplete\n      class=\"border-b border-gray-300 pb-4\"\n      [placeholder]=\"\n        'editor.record.form.field.onlineResource.edit.identifier.select.label'\n          | translate\n      \"\n      [action]=\"autoCompleteAction\"\n      (itemSelected)=\"handleSelectValue($event)\"\n      [displayWithFn]=\"displayWithFn\"\n      [minCharacterCount]=\"0\"\n      [clearOnSelection]=\"false\"\n    >\n    </gn-ui-autocomplete>\n  }\n  @if (\n    !modifyMode &&\n    ((activeLayerSuggestion && (layers$ | async)) ||\n      !activeLayerSuggestion ||\n      (_service.url && errorMessage))\n  ) {\n    <gn-ui-button\n      (buttonClick)=\"submit()\"\n      [disabled]=\"disabled || !_service.identifierInService\"\n      type=\"primary\"\n    >\n      <span class=\"text-white font-bold\" translate>\n        editor.record.form.field.onlineResource.edit.identifier.submit</span\n      >\n    </gn-ui-button>\n  }\n</div>\n" }]
+                    ], template: "<div class=\"flex flex-row justify-between\">\n  <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n    editor.record.form.field.onlineResource.edit.protocol\n  </h3>\n  @if (protocolHint) {\n    <ng-icon\n      name=\"matHelpOutline\"\n      size=\"16\"\n      class=\"m-2\"\n      [matTooltip]=\"protocolHint\"\n      matTooltipPosition=\"above\"\n    ></ng-icon>\n  }\n</div>\n<div class=\"flex flex-row items-center gap-4 h-[48px]\">\n  <mat-radio-group\n    aria-labelledby=\"example-radio-group-label\"\n    class=\"flex flex-row gap-[8px]\"\n    [(ngModel)]=\"_service.accessServiceProtocol\"\n    [disabled]=\"disabled\"\n    (change)=\"resetAllFormFields()\"\n  >\n    @for (protocolOption of availableProtocolOptions; track protocolOption) {\n      <mat-radio-button [value]=\"protocolOption.value\">\n        {{ protocolOption.label | translate }}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n  <gn-ui-url-input\n    class=\"w-full\"\n    (uploadClick)=\"handleUploadClick($event)\"\n    (valueChange)=\"handleUrlValueChange($event)\"\n    [disabled]=\"disabled\"\n    [value]=\"_service.url?.toString()\"\n    [showValidateButton]=\"activeLayerSuggestion\"\n    [resetUrlOnChange]=\"resetUrlOnChange\"\n  >\n    @if (activeLayerSuggestion) {\n      <ng-content>\n        <ng-icon name=\"iconoirRefresh\"></ng-icon>\n      </ng-content>\n    }\n  </gn-ui-url-input>\n\n  @if (loading) {\n    <div class=\"flex justify-center w-full py-4\">\n      <gn-ui-spinning-loader></gn-ui-spinning-loader>\n    </div>\n  }\n  @if (errorMessage) {\n    <p class=\"text-sm text-red-500 pl-4\" translate>\n      editor.record.form.field.onlineResource.edit.identifier.error\n    </p>\n  }\n\n  @if (\n    !activeLayerSuggestion ||\n    (_service.url && errorMessage) ||\n    (modifyMode && (layers$ | async).length === 0)\n  ) {\n    <gn-ui-text-input\n      class=\"grow border-b border-gray-300 pb-4\"\n      [(value)]=\"_service.identifierInService\"\n      [placeholder]=\"getIdentifierPlaceholder() | translate\"\n      data-cy=\"identifier-in-service\"\n      [disabled]=\"disabled\"\n    ></gn-ui-text-input>\n  }\n  @if (activeLayerSuggestion && (layers$ | async)?.length > 0) {\n    <gn-ui-autocomplete\n      class=\"border-b border-gray-300 pb-4\"\n      [placeholder]=\"\n        'editor.record.form.field.onlineResource.edit.identifier.select.label'\n          | translate\n      \"\n      [action]=\"autoCompleteAction\"\n      (itemSelected)=\"handleSelectValue($event)\"\n      [displayWithFn]=\"displayWithFn\"\n      [minCharacterCount]=\"0\"\n      [clearOnSelection]=\"false\"\n    >\n    </gn-ui-autocomplete>\n  }\n  @if (\n    !modifyMode &&\n    ((activeLayerSuggestion && (layers$ | async)) ||\n      !activeLayerSuggestion ||\n      (_service.url && errorMessage))\n  ) {\n    <gn-ui-button\n      (buttonClick)=\"submit()\"\n      [disabled]=\"disabled || !_service.identifierInService\"\n      type=\"primary\"\n    >\n      <span class=\"text-white font-bold\" translate>\n        editor.record.form.field.onlineResource.edit.identifier.submit</span\n      >\n    </gn-ui-button>\n  }\n</div>\n" }]
         }], propDecorators: { service: [{
                 type: Input
             }], protocolHint: [{
@@ -38355,7 +38542,7 @@ class FormFieldOnlineResourcesComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldOnlineResourcesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FormFieldOnlineResourcesComponent, isStandalone: true, selector: "gn-ui-form-field-online-resources", inputs: { metadataUuid: "metadataUuid", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col\">\n  <gn-ui-switch-toggle\n    [options]=\"typeOptions\"\n    (selectedValue)=\"onSelectedTypeChange($event.value)\"\n    extraClasses=\"grow text-sm\"\n    data-cy=\"online-resources-type\"\n  ></gn-ui-switch-toggle>\n  <div class=\"h-[8px]\"></div>\n  @if (selectedType === 'download') {\n    <gn-ui-file-input\n      [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n      (fileChange)=\"handleFileChange($event)\"\n      (uploadCancel)=\"handleUploadCancel()\"\n      [uploadProgress]=\"uploadProgress\"\n      (urlChange)=\"handleDownloadUrlChange($event)\"\n    ></gn-ui-file-input>\n  }\n  @if (selectedType === 'service') {\n    <div\n      class=\"w-full border-2 border-dashed rounded-lg p-6 flex flex-col gap-[16px]\"\n    >\n      <gn-ui-online-service-resource-input\n        [service]=\"newService\"\n        (serviceChange)=\"handleServiceChange($event)\"\n      ></gn-ui-online-service-resource-input>\n    </div>\n  }\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-sortable-list\n    [items]=\"notLinkResources\"\n    (itemsOrderChange)=\"handleResourcesChange($event)\"\n    [elementTemplate]=\"template\"\n  >\n  </gn-ui-sortable-list>\n  <ng-template #template let-onlineResource let-index=\"index\">\n    <gn-ui-online-resource-card\n      [onlineResource]=\"onlineResource\"\n      (modifyClick)=\"handleResourceModify(onlineResource, index)\"\n    ></gn-ui-online-resource-card>\n  </ng-template>\n\n  <ng-template #dialogTemplate let-onlineResource>\n    <div class=\"flex flex-col gap-[16px]\">\n      @if (onlineResource.type === 'service') {\n        <gn-ui-online-service-resource-input\n          [service]=\"onlineResource\"\n          [modifyMode]=\"true\"\n          [disabled]=\"true\"\n        ></gn-ui-online-service-resource-input>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.description\n          </h3>\n          <gn-ui-text-area\n            [(value)]=\"onlineResource.description\"\n          ></gn-ui-text-area>\n        </div>\n      } @else {\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.title\n          </h3>\n          <gn-ui-text-input [(value)]=\"onlineResource.name\"></gn-ui-text-input>\n        </div>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.description\n          </h3>\n          <gn-ui-text-area\n            [(value)]=\"onlineResource.description\"\n          ></gn-ui-text-area>\n        </div>\n        <span class=\"w-full border-b border-gray-300\"></span>\n        <gn-ui-url-input\n          class=\"w-full\"\n          [disabled]=\"true\"\n          [value]=\"onlineResource.url\"\n          [showValidateButton]=\"false\"\n        ></gn-ui-url-input>\n      }\n      <ng-template #urlInput>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.title\n          </h3>\n          <gn-ui-text-input [(value)]=\"onlineResource.name\"></gn-ui-text-input>\n        </div>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.description\n          </h3>\n          <gn-ui-text-area\n            [(value)]=\"onlineResource.description\"\n          ></gn-ui-text-area>\n        </div>\n        <span class=\"w-full border-b border-gray-300\"></span>\n        <gn-ui-url-input\n          class=\"w-full\"\n          [disabled]=\"true\"\n          [value]=\"onlineResource.url\"\n          [showValidateButton]=\"false\"\n        ></gn-ui-url-input>\n      </ng-template>\n    </div>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SwitchToggleComponent, selector: "gn-ui-switch-toggle", inputs: ["options", "ariaLabel", "extraClasses", "disabled"], outputs: ["selectedValue"] }, { kind: "component", type: FileInputComponent, selector: "gn-ui-file-input", inputs: ["maxSizeMB", "uploadProgress", "disabled"], outputs: ["fileChange", "urlChange", "uploadCancel"] }, { kind: "component", type: OnlineServiceResourceInputComponent, selector: "gn-ui-online-service-resource-input", inputs: ["service", "protocolHint", "disabled", "modifyMode", "protocolOptions"], outputs: ["serviceChange"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: OnlineResourceCardComponent, selector: "gn-ui-online-resource-card", inputs: ["onlineResource"], outputs: ["modifyClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FormFieldOnlineResourcesComponent, isStandalone: true, selector: "gn-ui-form-field-online-resources", inputs: { metadataUuid: "metadataUuid", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col\">\n  <gn-ui-switch-toggle\n    [options]=\"typeOptions\"\n    (selectedValue)=\"onSelectedTypeChange($event.value)\"\n    extraClasses=\"grow text-sm\"\n    data-cy=\"online-resources-type\"\n  ></gn-ui-switch-toggle>\n  <div class=\"h-[8px]\"></div>\n  @if (selectedType === 'download') {\n    <gn-ui-file-input\n      [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n      (fileChange)=\"handleFileChange($event)\"\n      (uploadCancel)=\"handleUploadCancel()\"\n      [uploadProgress]=\"uploadProgress\"\n      (urlChange)=\"handleDownloadUrlChange($event)\"\n    ></gn-ui-file-input>\n  }\n  @if (selectedType === 'service') {\n    <div\n      class=\"w-full border-2 border-dashed rounded-lg p-6 flex flex-col gap-[16px]\"\n    >\n      <gn-ui-online-service-resource-input\n        [service]=\"newService\"\n        (serviceChange)=\"handleServiceChange($event)\"\n      ></gn-ui-online-service-resource-input>\n    </div>\n  }\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-sortable-list\n    [items]=\"notLinkResources\"\n    (itemsOrderChange)=\"handleResourcesChange($event)\"\n    [elementTemplate]=\"template\"\n  >\n  </gn-ui-sortable-list>\n  <ng-template #template let-onlineResource let-index=\"index\">\n    <gn-ui-online-resource-card\n      [onlineResource]=\"onlineResource\"\n      (modifyClick)=\"handleResourceModify(onlineResource, index)\"\n    ></gn-ui-online-resource-card>\n  </ng-template>\n\n  <ng-template #dialogTemplate let-onlineResource>\n    <div class=\"flex flex-col gap-[16px]\">\n      @if (onlineResource.type === 'service') {\n        <gn-ui-online-service-resource-input\n          [service]=\"onlineResource\"\n          [modifyMode]=\"true\"\n          [disabled]=\"true\"\n        ></gn-ui-online-service-resource-input>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.description\n          </h3>\n          <gn-ui-text-area\n            [(value)]=\"onlineResource.description\"\n          ></gn-ui-text-area>\n        </div>\n      } @else {\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.title\n          </h3>\n          <gn-ui-text-input [(value)]=\"onlineResource.name\"></gn-ui-text-input>\n        </div>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.description\n          </h3>\n          <gn-ui-text-area\n            [(value)]=\"onlineResource.description\"\n          ></gn-ui-text-area>\n        </div>\n        <span class=\"w-full border-b border-gray-300\"></span>\n        <gn-ui-url-input\n          class=\"w-full\"\n          [disabled]=\"true\"\n          [value]=\"onlineResource.url\"\n          [showValidateButton]=\"false\"\n        ></gn-ui-url-input>\n      }\n      <ng-template #urlInput>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.title\n          </h3>\n          <gn-ui-text-input [(value)]=\"onlineResource.name\"></gn-ui-text-input>\n        </div>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.description\n          </h3>\n          <gn-ui-text-area\n            [(value)]=\"onlineResource.description\"\n          ></gn-ui-text-area>\n        </div>\n        <span class=\"w-full border-b border-gray-300\"></span>\n        <gn-ui-url-input\n          class=\"w-full\"\n          [disabled]=\"true\"\n          [value]=\"onlineResource.url\"\n          [showValidateButton]=\"false\"\n        ></gn-ui-url-input>\n      </ng-template>\n    </div>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: SwitchToggleComponent, selector: "gn-ui-switch-toggle", inputs: ["options", "ariaLabel", "extraClasses", "disabled"], outputs: ["selectedValue"] }, { kind: "component", type: FileInputComponent, selector: "gn-ui-file-input", inputs: ["maxSizeMB", "uploadProgress", "disabled"], outputs: ["fileChange", "urlChange", "uploadCancel"] }, { kind: "component", type: OnlineServiceResourceInputComponent, selector: "gn-ui-online-service-resource-input", inputs: ["service", "protocolHint", "disabled", "modifyMode", "protocolOptions"], outputs: ["serviceChange"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: OnlineResourceCardComponent, selector: "gn-ui-online-resource-card", inputs: ["onlineResource"], outputs: ["modifyClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled", "type"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldOnlineResourcesComponent, decorators: [{
             type: Component,
@@ -38381,6 +38568,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 args: ['dialogTemplate']
             }] } });
 
+marker('editor.record.form.field.onlineLinkageResource.defaultName');
+class FormFieldOnlineSingleLinkResourceComponent {
+    constructor() {
+        this.notificationsService = inject(NotificationsService);
+        this.translateService = inject(TranslateService);
+        this.valueChange = new EventEmitter();
+        this.allResources = [];
+        this.displayUrl = '';
+    }
+    set value(onlineResources) {
+        this.allResources = onlineResources ?? [];
+        const firstResource = this.allResources[0];
+        this.displayUrl = firstResource?.url?.toString() ?? '';
+    }
+    handleUrlChange(url) {
+        if (!url)
+            return;
+        try {
+            const parsedUrl = new URL(url);
+            if (this.allResources.length === 0) {
+                const defaultName = this.translateService.instant('editor.record.form.field.onlineLinkageResource.defaultName');
+                const newResource = {
+                    type: 'link',
+                    url: parsedUrl,
+                    name: defaultName,
+                };
+                this.valueChange.emit([newResource]);
+            }
+            else {
+                const updatedFirst = {
+                    ...this.allResources[0],
+                    url: parsedUrl,
+                };
+                this.valueChange.emit([updatedFirst, ...this.allResources.slice(1)]);
+            }
+        }
+        catch (error) {
+            this.handleError(error);
+        }
+    }
+    handleError(error) {
+        this.notificationsService.showNotification({
+            type: 'error',
+            title: this.translateService.instant('editor.record.onlineResourceError.title'),
+            text: `${this.translateService.instant('editor.record.onlineResourceError.body')} ${error.message}`,
+            closeMessage: this.translateService.instant('editor.record.onlineResourceError.closeMessage'),
+        }, undefined, error);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldOnlineSingleLinkResourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldOnlineSingleLinkResourceComponent, isStandalone: true, selector: "gn-ui-form-field-online-single-link-resource", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<gn-ui-url-input\n  [value]=\"displayUrl\"\n  [showValidateButton]=\"false\"\n  (valueChange)=\"handleUrlChange($event)\"\n></gn-ui-url-input>\n", styles: [""], dependencies: [{ kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldOnlineSingleLinkResourceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-online-single-link-resource', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [UrlInputComponent], template: "<gn-ui-url-input\n  [value]=\"displayUrl\"\n  [showValidateButton]=\"false\"\n  (valueChange)=\"handleUrlChange($event)\"\n></gn-ui-url-input>\n" }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 class FormFieldOverviewsComponent {
     constructor() {
         this.platformService = inject(PlatformServiceInterface);
@@ -38396,9 +38643,9 @@ class FormFieldOverviewsComponent {
             this.cd.markForCheck();
             this.notificationsService.showNotification({
                 type: 'error',
-                title: this.translateService.instant('editor.record.resourceError.title'),
-                text: `${this.translateService.instant('editor.record.resourceError.body')} ${error.message}`,
-                closeMessage: this.translateService.instant('editor.record.resourceError.closeMessage'),
+                title: this.translateService.instant('editor.record.resourceError.title', { recordKind: this.recordKind }),
+                text: `${this.translateService.instant('editor.record.resourceError.body', { recordKind: this.recordKind })} ${error.message}`,
+                closeMessage: this.translateService.instant('editor.record.resourceError.closeMessage', { recordKind: this.recordKind }),
             }, undefined, error);
         };
     }
@@ -38461,13 +38708,15 @@ class FormFieldOverviewsComponent {
         this.valueChange.emit(overView ? [overView] : []);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldOverviewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldOverviewsComponent, isStandalone: true, selector: "gn-ui-form-field-overviews", inputs: { metadataUuid: "metadataUuid", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <gn-ui-image-input\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    [previewUrl]=\"firstOverview.url\"\n    [altText]=\"firstOverview.description\"\n    (fileChange)=\"handleFileChange($event)\"\n    (urlChange)=\"handleUrlChange($event)\"\n    (altTextChange)=\"handleAltTextChange($event)\"\n    (delete)=\"handleDelete()\"\n    [uploadProgress]=\"uploadProgress\"\n    (uploadCancel)=\"handleUploadCancel()\"\n  ></gn-ui-image-input>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ImageInputComponent, selector: "gn-ui-image-input", inputs: ["previewUrl", "altText", "maxSizeMB", "uploadProgress", "uploadError", "disabled"], outputs: ["fileChange", "urlChange", "uploadCancel", "delete", "altTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldOverviewsComponent, isStandalone: true, selector: "gn-ui-form-field-overviews", inputs: { metadataUuid: "metadataUuid", recordKind: "recordKind", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <gn-ui-image-input\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    [previewUrl]=\"firstOverview.url\"\n    [altText]=\"firstOverview.description\"\n    (fileChange)=\"handleFileChange($event)\"\n    (urlChange)=\"handleUrlChange($event)\"\n    (altTextChange)=\"handleAltTextChange($event)\"\n    (delete)=\"handleDelete()\"\n    [uploadProgress]=\"uploadProgress\"\n    (uploadCancel)=\"handleUploadCancel()\"\n  ></gn-ui-image-input>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ImageInputComponent, selector: "gn-ui-image-input", inputs: ["previewUrl", "altText", "maxSizeMB", "uploadProgress", "uploadError", "disabled"], outputs: ["fileChange", "urlChange", "uploadCancel", "delete", "altTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldOverviewsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gn-ui-form-field-overviews', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ImageInputComponent], template: "<div class=\"flex flex-col gap-2\">\n  <gn-ui-image-input\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    [previewUrl]=\"firstOverview.url\"\n    [altText]=\"firstOverview.description\"\n    (fileChange)=\"handleFileChange($event)\"\n    (urlChange)=\"handleUrlChange($event)\"\n    (altTextChange)=\"handleAltTextChange($event)\"\n    (delete)=\"handleDelete()\"\n    [uploadProgress]=\"uploadProgress\"\n    (uploadCancel)=\"handleUploadCancel()\"\n  ></gn-ui-image-input>\n</div>\n" }]
         }], propDecorators: { metadataUuid: [{
                 type: Input
+            }], recordKind: [{
+                type: Input
             }], value: [{
                 type: Input
             }], valueChange: [{
@@ -38552,13 +38801,15 @@ class FormFieldUpdateFrequencyComponent {
         })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldUpdateFrequencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldUpdateFrequencyComponent, isStandalone: true, selector: "gn-ui-form-field-update-frequency", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <gn-ui-check-toggle\n    [label]=\"'editor.record.form.updateFrequency.planned' | translate\"\n    [value]=\"planned\"\n    (toggled)=\"onPlannedToggled()\"\n  ></gn-ui-check-toggle>\n  <gn-ui-dropdown-selector\n    [title]=\"'editor.record.form.field.updateFrequency' | translate\"\n    [showTitle]=\"false\"\n    [choices]=\"choices\"\n    [selected]=\"selectedFrequency\"\n    (selectValue)=\"onSelectFrequencyValue($event)\"\n    [disabled]=\"!planned\"\n    [extraBtnClass]=\"'input-as-button gn-ui-text-input'\"\n  >\n  </gn-ui-dropdown-selector>\n</div>\n", styles: ["gn-ui-dropdown-selector{max-width:calc(50% - 16px)}\n"], dependencies: [{ kind: "component", type: CheckToggleComponent, selector: "gn-ui-check-toggle", inputs: ["title", "label", "value", "color"], outputs: ["toggled"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldUpdateFrequencyComponent, isStandalone: true, selector: "gn-ui-form-field-update-frequency", inputs: { value: "value", recordKind: "recordKind" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-2\">\n  <gn-ui-check-toggle\n    [label]=\"\n      'editor.record.form.updateFrequency.planned' | translate: { recordKind }\n    \"\n    [value]=\"planned\"\n    (toggled)=\"onPlannedToggled()\"\n  ></gn-ui-check-toggle>\n  <gn-ui-dropdown-selector\n    [title]=\"\n      'editor.record.form.field.updateFrequency' | translate: { recordKind }\n    \"\n    [showTitle]=\"false\"\n    [choices]=\"choices\"\n    [selected]=\"selectedFrequency\"\n    (selectValue)=\"onSelectFrequencyValue($event)\"\n    [disabled]=\"!planned\"\n    [extraBtnClass]=\"'input-as-button gn-ui-text-input'\"\n  >\n  </gn-ui-dropdown-selector>\n</div>\n", styles: ["gn-ui-dropdown-selector{max-width:calc(50% - 16px)}\n"], dependencies: [{ kind: "component", type: CheckToggleComponent, selector: "gn-ui-check-toggle", inputs: ["title", "label", "value", "color"], outputs: ["toggled"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldUpdateFrequencyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-form-field-update-frequency', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CheckToggleComponent, DropdownSelectorComponent, TranslatePipe], template: "<div class=\"flex flex-col gap-2\">\n  <gn-ui-check-toggle\n    [label]=\"'editor.record.form.updateFrequency.planned' | translate\"\n    [value]=\"planned\"\n    (toggled)=\"onPlannedToggled()\"\n  ></gn-ui-check-toggle>\n  <gn-ui-dropdown-selector\n    [title]=\"'editor.record.form.field.updateFrequency' | translate\"\n    [showTitle]=\"false\"\n    [choices]=\"choices\"\n    [selected]=\"selectedFrequency\"\n    (selectValue)=\"onSelectFrequencyValue($event)\"\n    [disabled]=\"!planned\"\n    [extraBtnClass]=\"'input-as-button gn-ui-text-input'\"\n  >\n  </gn-ui-dropdown-selector>\n</div>\n", styles: ["gn-ui-dropdown-selector{max-width:calc(50% - 16px)}\n"] }]
+            args: [{ selector: 'gn-ui-form-field-update-frequency', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CheckToggleComponent, DropdownSelectorComponent, TranslatePipe], template: "<div class=\"flex flex-col gap-2\">\n  <gn-ui-check-toggle\n    [label]=\"\n      'editor.record.form.updateFrequency.planned' | translate: { recordKind }\n    \"\n    [value]=\"planned\"\n    (toggled)=\"onPlannedToggled()\"\n  ></gn-ui-check-toggle>\n  <gn-ui-dropdown-selector\n    [title]=\"\n      'editor.record.form.field.updateFrequency' | translate: { recordKind }\n    \"\n    [showTitle]=\"false\"\n    [choices]=\"choices\"\n    [selected]=\"selectedFrequency\"\n    (selectValue)=\"onSelectFrequencyValue($event)\"\n    [disabled]=\"!planned\"\n    [extraBtnClass]=\"'input-as-button gn-ui-text-input'\"\n  >\n  </gn-ui-dropdown-selector>\n</div>\n", styles: ["gn-ui-dropdown-selector{max-width:calc(50% - 16px)}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
+            }], recordKind: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }] } });
@@ -38643,6 +38894,7 @@ class FormFieldConstraintsShortcutsComponent {
                     this.editorFacade.setFieldVisibility({ model }, visible);
                 });
             };
+            hideEmptyConstraints(this.legalConstraints$, 'legalConstraints');
             hideEmptyConstraints(this.securityConstraints$, 'securityConstraints');
             hideEmptyConstraints(this.otherConstraints$, 'otherConstraints');
         });
@@ -38890,7 +39142,7 @@ class FormFieldTopicsComponent {
         return topicKey ? this.translateService.instant(topicKey) : '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldTopicsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FormFieldTopicsComponent, isStandalone: true, selector: "gn-ui-form-field-topics", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <div class=\"flex flex-col gap-4\">\n    <gn-ui-dropdown-multiselect\n      class=\"w-full\"\n      [title]=\"'editor.record.form.topics.placeholder' | translate\"\n      [maxRows]=\"6\"\n      [selected]=\"topics\"\n      [choices]=\"availableTopics || []\"\n      [allowSearch]=\"true\"\n      (selectValues)=\"handleItemSelection($event)\"\n    >\n    </gn-ui-dropdown-multiselect>\n    <div class=\"flex gap-2 flex-wrap\">\n      @for (topic of topics; track topic) {\n        <gn-ui-badge\n          [removable]=\"true\"\n          (badgeRemoveClicked)=\"removeTopic(topic)\"\n          >{{ getTranslatedTopic(topic) }}\n        </gn-ui-badge>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "component", type: DropdownMultiselectComponent, selector: "gn-ui-dropdown-multiselect", inputs: ["title", "choices", "selected", "allowSearch", "maxRows", "searchInputValue"], outputs: ["selectValues"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FormFieldTopicsComponent, isStandalone: true, selector: "gn-ui-form-field-topics", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <div class=\"flex flex-col gap-4\">\n    <gn-ui-dropdown-multiselect\n      class=\"w-full\"\n      [title]=\"'editor.record.form.topics.placeholder' | translate\"\n      [maxRows]=\"6\"\n      [selected]=\"topics\"\n      [choices]=\"availableTopics || []\"\n      [allowSearch]=\"true\"\n      (selectValues)=\"handleItemSelection($event)\"\n    >\n    </gn-ui-dropdown-multiselect>\n    <div class=\"flex gap-2 flex-wrap\">\n      @for (topic of topics; track topic) {\n        <gn-ui-badge\n          [removable]=\"true\"\n          (badgeRemoveClicked)=\"removeTopic(topic)\"\n          >{{ getTranslatedTopic(topic) }}\n        </gn-ui-badge>\n      }\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked", "badgeClicked"] }, { kind: "component", type: DropdownMultiselectComponent, selector: "gn-ui-dropdown-multiselect", inputs: ["title", "choices", "selected", "allowSearch", "maxRows", "searchInputValue"], outputs: ["selectValues"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldTopicsComponent, decorators: [{
             type: Component,
@@ -38972,7 +39224,7 @@ class FormFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldComponent, isStandalone: true, selector: "gn-ui-form-field", inputs: { uniqueIdentifier: "uniqueIdentifier", model: "model", modelSpecifier: "modelSpecifier", componentName: "componentName", config: "config", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }], hostDirectives: [{ directive: FieldFocusDirective }], ngImport: i0, template: "<!-- TEMPORARY - disabling the open data switch -->\n<!-- <ng-container *ngIf=\"model === 'licenses'\">\n  <gn-ui-form-field-open-data\n    [value]=\"valueAsConstraints\"\n    (valueChange)=\"valueChange.emit($event)\"\n    (openDataChange)=\"toggleIsOpenData($event)\"\n  ></gn-ui-form-field-open-data>\n</ng-container> -->\n<div class=\"flex flex-col h-full\">\n  <ng-container *ngIf=\"withoutWrapper; else withGenericWrapper\">\n    <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n  </ng-container>\n  <ng-template #withGenericWrapper>\n    <gn-ui-form-field-wrapper\n      [label]=\"config.labelKey! | translate\"\n      [hint]=\"config.hintKey! | translate\"\n    >\n      <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n    </gn-ui-form-field-wrapper>\n  </ng-template>\n</div>\n\n<ng-template #fieldContent>\n  <ng-container [ngSwitch]=\"model\">\n    <ng-container *ngSwitchCase=\"'title'\">\n      <div class=\"flex flex-row flex-start items-center gap-3 mb-[12px]\">\n        <textarea\n          #titleInput\n          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          data-test=\"recordTitleInput\"\n          class=\"grow font-title text-3xl font-normal overflow-hidden text-black/80\"\n          [value]=\"valueAsString\"\n          (change)=\"valueChange.emit($event.target.value)\"\n          [placeholder]=\"\n            'editor.record.form.field.title.placeholder' | translate\n          \"\n        ></textarea>\n        <div class=\"flex flex-row justify-between self-start mt-0.5\">\n          <span\n            class=\"material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer\"\n            (click)=\"focusTitleInput()\"\n            >edit</span\n          >\n          <span\n            *ngIf=\"config.hintKey\"\n            class=\"material-symbols-outlined gn-ui-icon-small m-2\"\n            [matTooltip]=\"config.hintKey! | translate\"\n            matTooltipPosition=\"above\"\n          >\n            help\n          </span>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'abstract'\">\n      <gn-ui-form-field-rich\n        [label]=\"config.labelKey! | translate\"\n        [hint]=\"config.hintKey! | translate\"\n        [value]=\"valueAsString\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-rich>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'overviews'\">\n      <gn-ui-form-field-overviews\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOverviews\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-overviews>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceIdentifiers'\">\n      <gn-ui-form-field-simple\n        [type]=\"'text'\"\n        [value]=\"valueAsResourceIdentifierCode\"\n        (valueChange)=\"handleResourceIdentifierChange($event)\"\n      ></gn-ui-form-field-simple>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceCreated'\">\n      <gn-ui-form-field-date\n        [value]=\"valueAsDate\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-date>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceUpdated'\">\n      <gn-ui-form-field-date\n        [value]=\"valueAsDate\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-date>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'updateFrequency'\">\n      <gn-ui-form-field-update-frequency\n        [value]=\"valueAsUpdateFrequency\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-update-frequency>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'temporalExtents'\">\n      <gn-ui-form-field-temporal-extents\n        [value]=\"valueAsTemporalExtents\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-temporal-extents>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'spatialExtents'\">\n      <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'keywords'\">\n      <gn-ui-form-field-keywords\n        [value]=\"valueAsKeywords\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-keywords>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'topics'\">\n      <gn-ui-form-field-topics\n        [value]=\"valueAsTopics\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-topics>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'licenses'\">\n      <gn-ui-form-field-license\n        [label]=\"config.labelKey! | translate\"\n        [recordLicences]=\"valueAsConstraints\"\n        (recordLicencesChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-license>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'legalConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'securityConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'otherConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container\n    ></ng-container>\n    <ng-template #formFieldConstraints>\n      <gn-ui-form-field-constraints\n        [label]=\"config.labelKey\"\n        [value]=\"valueAsConstraints\"\n        [constraintType]=\"model\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-constraints\n    ></ng-template>\n\n    <ng-container *ngSwitchCase=\"'contactsForResource'\">\n      <gn-ui-form-field-contacts-for-resource\n        [value]=\"valueAsIndividuals\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-contacts-for-resource>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'contacts'\">\n      <gn-ui-form-field-contacts\n        [value]=\"valueAsIndividuals\"\n        [modelSpecifier]=\"modelSpecifier\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-contacts>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'onlineResources'\">\n      <gn-ui-form-field-online-resources\n        *ngIf=\"modelSpecifier === 'onlineResourceType:!link'\"\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOnlineResources\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-online-resources>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'onlineResources'\">\n      <gn-ui-form-field-online-link-resources\n        *ngIf=\"modelSpecifier === 'onlineResourceType:link'\"\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOnlineResources\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-online-link-resources>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"!model\">\n    <ng-container [ngSwitch]=\"componentName\">\n      <ng-container *ngSwitchCase=\"'form-field-constraints-shortcuts'\">\n        <gn-ui-form-field-constraints-shortcuts></gn-ui-form-field-constraints-shortcuts>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'form-field-spatial-toggle'\">\n        <gn-ui-form-field-spatial-toggle></gn-ui-form-field-spatial-toggle>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: [":host{scroll-margin-top:90px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormFieldWrapperComponent, selector: "gn-ui-form-field-wrapper", inputs: ["label", "hint"] }, { kind: "component", type: FormFieldLicenseComponent, selector: "gn-ui-form-field-license", inputs: ["label", "recordLicences"], outputs: ["recordLicencesChange"] }, { kind: "component", type: FormFieldDateComponent, selector: "gn-ui-form-field-date", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldUpdateFrequencyComponent, selector: "gn-ui-form-field-update-frequency", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldTemporalExtentsComponent, selector: "gn-ui-form-field-temporal-extents", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: ["type", "readonly", "invalid", "placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["label", "hint", "placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent" }, { kind: "component", type: FormFieldKeywordsComponent, selector: "gn-ui-form-field-keywords", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldOverviewsComponent, selector: "gn-ui-form-field-overviews", inputs: ["metadataUuid", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldContactsForResourceComponent, selector: "gn-ui-form-field-contacts-for-resource", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldOnlineResourcesComponent, selector: "gn-ui-form-field-online-resources", inputs: ["metadataUuid", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldOnlineLinkResourcesComponent, selector: "gn-ui-form-field-online-link-resources", inputs: ["metadataUuid", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldContactsComponent, selector: "gn-ui-form-field-contacts", inputs: ["value", "modelSpecifier"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldConstraintsComponent, selector: "gn-ui-form-field-constraints", inputs: ["label", "value", "constraintType"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldConstraintsShortcutsComponent, selector: "gn-ui-form-field-constraints-shortcuts" }, { kind: "component", type: FormFieldSpatialToggleComponent, selector: "gn-ui-form-field-spatial-toggle" }, { kind: "component", type: FormFieldTopicsComponent, selector: "gn-ui-form-field-topics", inputs: ["value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FormFieldComponent, isStandalone: true, selector: "gn-ui-form-field", inputs: { uniqueIdentifier: "uniqueIdentifier", recordKind: "recordKind", model: "model", modelSpecifier: "modelSpecifier", componentName: "componentName", config: "config", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [provideIcons({ matEditOutline, matHelpOutline })], viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }], hostDirectives: [{ directive: FieldFocusDirective }], ngImport: i0, template: "<!-- TEMPORARY - disabling the open data switch -->\n<!-- <ng-container *ngIf=\"model === 'licenses'\">\n  <gn-ui-form-field-open-data\n    [value]=\"valueAsConstraints\"\n    (valueChange)=\"valueChange.emit($event)\"\n    (openDataChange)=\"toggleIsOpenData($event)\"\n  ></gn-ui-form-field-open-data>\n</ng-container> -->\n<div class=\"flex flex-col h-full\">\n  <ng-container *ngIf=\"withoutWrapper; else withGenericWrapper\">\n    <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n  </ng-container>\n  <ng-template #withGenericWrapper>\n    <gn-ui-form-field-wrapper\n      [label]=\"config.labelKey! | translate: { recordKind }\"\n      [hint]=\"config.hintKey! | translate: { recordKind }\"\n    >\n      <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n    </gn-ui-form-field-wrapper>\n  </ng-template>\n</div>\n\n<ng-template #fieldContent>\n  <ng-container [ngSwitch]=\"model\">\n    <ng-container *ngSwitchCase=\"'title'\">\n      <div class=\"flex flex-row flex-start items-center gap-3 mb-[12px]\">\n        <textarea\n          #titleInput\n          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          data-test=\"recordTitleInput\"\n          class=\"grow font-title text-3xl font-normal overflow-hidden text-black/80\"\n          [value]=\"valueAsString\"\n          (change)=\"valueChange.emit($event.target.value)\"\n          [placeholder]=\"\n            'editor.record.form.field.title.placeholder'\n              | translate: { recordKind }\n          \"\n        ></textarea>\n        <div class=\"flex flex-row justify-between self-start mt-0.5\">\n          <ng-icon\n            name=\"matEditOutline\"\n            size=\"16\"\n            class=\"m-2 cursor-pointer\"\n            (click)=\"focusTitleInput()\"\n          ></ng-icon>\n          <ng-icon\n            *ngIf=\"config.hintKey\"\n            name=\"matHelpOutline\"\n            size=\"16\"\n            class=\"m-2\"\n            [matTooltip]=\"config.hintKey! | translate: { recordKind }\"\n            matTooltipPosition=\"above\"\n          ></ng-icon>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'abstract'\">\n      <gn-ui-form-field-rich\n        [label]=\"config.labelKey! | translate: { recordKind }\"\n        [hint]=\"config.hintKey! | translate: { recordKind }\"\n        [value]=\"valueAsString\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-rich>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'overviews'\">\n      <gn-ui-form-field-overviews\n        [metadataUuid]=\"uniqueIdentifier\"\n        [recordKind]=\"recordKind\"\n        [value]=\"valueAsOverviews\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-overviews>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceIdentifiers'\">\n      <gn-ui-form-field-simple\n        [type]=\"'text'\"\n        [value]=\"valueAsResourceIdentifierCode\"\n        (valueChange)=\"handleResourceIdentifierChange($event)\"\n      ></gn-ui-form-field-simple>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceCreated'\">\n      <gn-ui-form-field-date\n        [value]=\"valueAsDate\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-date>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceUpdated'\">\n      <gn-ui-form-field-date\n        [value]=\"valueAsDate\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-date>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'updateFrequency'\">\n      <gn-ui-form-field-update-frequency\n        [value]=\"valueAsUpdateFrequency\"\n        (valueChange)=\"valueChange.emit($event)\"\n        [recordKind]=\"recordKind\"\n      ></gn-ui-form-field-update-frequency>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'temporalExtents'\">\n      <gn-ui-form-field-temporal-extents\n        [value]=\"valueAsTemporalExtents\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-temporal-extents>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'spatialExtents'\">\n      <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'keywords'\">\n      <gn-ui-form-field-keywords\n        [value]=\"valueAsKeywords\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-keywords>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'topics'\">\n      <gn-ui-form-field-topics\n        [value]=\"valueAsTopics\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-topics>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'licenses'\">\n      <gn-ui-form-field-license\n        [label]=\"config.labelKey! | translate: { recordKind }\"\n        [recordLicences]=\"valueAsConstraints\"\n        (recordLicencesChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-license>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'legalConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'securityConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'otherConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container\n    ></ng-container>\n    <ng-template #formFieldConstraints>\n      <gn-ui-form-field-constraints\n        [label]=\"config.labelKey\"\n        [value]=\"valueAsConstraints\"\n        [constraintType]=\"model\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-constraints\n    ></ng-template>\n\n    <ng-container *ngSwitchCase=\"'contactsForResource'\">\n      <gn-ui-form-field-contacts-for-resource\n        [value]=\"valueAsIndividuals\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-contacts-for-resource>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'contacts'\">\n      <gn-ui-form-field-contacts\n        [value]=\"valueAsIndividuals\"\n        [modelSpecifier]=\"modelSpecifier\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-contacts>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'onlineResources'\">\n      <gn-ui-form-field-online-resources\n        *ngIf=\"modelSpecifier === 'onlineResourceType:!link'\"\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOnlineResources\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-online-resources>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'onlineResources'\">\n      <gn-ui-form-field-online-link-resources\n        *ngIf=\"modelSpecifier === 'onlineResourceType:link'\"\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOnlineResources\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-online-link-resources>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'onlineResources'\">\n      <gn-ui-form-field-online-single-link-resource\n        *ngIf=\"modelSpecifier === 'onlineResourceType:singleLink'\"\n        [value]=\"valueAsOnlineResources\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-online-single-link-resource>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"!model\">\n    <ng-container [ngSwitch]=\"componentName\">\n      <ng-container *ngSwitchCase=\"'form-field-constraints-shortcuts'\">\n        <gn-ui-form-field-constraints-shortcuts></gn-ui-form-field-constraints-shortcuts>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'form-field-spatial-toggle'\">\n        <gn-ui-form-field-spatial-toggle></gn-ui-form-field-spatial-toggle>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: [":host{scroll-margin-top:90px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FormFieldWrapperComponent, selector: "gn-ui-form-field-wrapper", inputs: ["label", "hint"] }, { kind: "component", type: FormFieldLicenseComponent, selector: "gn-ui-form-field-license", inputs: ["label", "recordLicences"], outputs: ["recordLicencesChange"] }, { kind: "component", type: FormFieldDateComponent, selector: "gn-ui-form-field-date", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldUpdateFrequencyComponent, selector: "gn-ui-form-field-update-frequency", inputs: ["value", "recordKind"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldTemporalExtentsComponent, selector: "gn-ui-form-field-temporal-extents", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: ["type", "readonly", "invalid", "placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["label", "hint", "placeholder", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent" }, { kind: "component", type: FormFieldKeywordsComponent, selector: "gn-ui-form-field-keywords", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldOverviewsComponent, selector: "gn-ui-form-field-overviews", inputs: ["metadataUuid", "recordKind", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldContactsForResourceComponent, selector: "gn-ui-form-field-contacts-for-resource", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldOnlineResourcesComponent, selector: "gn-ui-form-field-online-resources", inputs: ["metadataUuid", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldOnlineLinkResourcesComponent, selector: "gn-ui-form-field-online-link-resources", inputs: ["metadataUuid", "value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldOnlineSingleLinkResourceComponent, selector: "gn-ui-form-field-online-single-link-resource", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldContactsComponent, selector: "gn-ui-form-field-contacts", inputs: ["value", "modelSpecifier"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldConstraintsComponent, selector: "gn-ui-form-field-constraints", inputs: ["label", "value", "constraintType"], outputs: ["valueChange"] }, { kind: "component", type: FormFieldConstraintsShortcutsComponent, selector: "gn-ui-form-field-constraints-shortcuts" }, { kind: "component", type: FormFieldSpatialToggleComponent, selector: "gn-ui-form-field-spatial-toggle" }, { kind: "component", type: FormFieldTopicsComponent, selector: "gn-ui-form-field-topics", inputs: ["value"], outputs: ["valueChange"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "directive", type: i4$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -38993,15 +39245,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         FormFieldContactsForResourceComponent,
                         FormFieldOnlineResourcesComponent,
                         FormFieldOnlineLinkResourcesComponent,
+                        FormFieldOnlineSingleLinkResourceComponent,
                         FormFieldContactsComponent,
                         FormFieldConstraintsComponent,
                         FormFieldConstraintsShortcutsComponent,
                         FormFieldSpatialToggleComponent,
                         FormFieldTopicsComponent,
                         TextFieldModule,
-                    ], hostDirectives: [FieldFocusDirective], template: "<!-- TEMPORARY - disabling the open data switch -->\n<!-- <ng-container *ngIf=\"model === 'licenses'\">\n  <gn-ui-form-field-open-data\n    [value]=\"valueAsConstraints\"\n    (valueChange)=\"valueChange.emit($event)\"\n    (openDataChange)=\"toggleIsOpenData($event)\"\n  ></gn-ui-form-field-open-data>\n</ng-container> -->\n<div class=\"flex flex-col h-full\">\n  <ng-container *ngIf=\"withoutWrapper; else withGenericWrapper\">\n    <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n  </ng-container>\n  <ng-template #withGenericWrapper>\n    <gn-ui-form-field-wrapper\n      [label]=\"config.labelKey! | translate\"\n      [hint]=\"config.hintKey! | translate\"\n    >\n      <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n    </gn-ui-form-field-wrapper>\n  </ng-template>\n</div>\n\n<ng-template #fieldContent>\n  <ng-container [ngSwitch]=\"model\">\n    <ng-container *ngSwitchCase=\"'title'\">\n      <div class=\"flex flex-row flex-start items-center gap-3 mb-[12px]\">\n        <textarea\n          #titleInput\n          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          data-test=\"recordTitleInput\"\n          class=\"grow font-title text-3xl font-normal overflow-hidden text-black/80\"\n          [value]=\"valueAsString\"\n          (change)=\"valueChange.emit($event.target.value)\"\n          [placeholder]=\"\n            'editor.record.form.field.title.placeholder' | translate\n          \"\n        ></textarea>\n        <div class=\"flex flex-row justify-between self-start mt-0.5\">\n          <span\n            class=\"material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer\"\n            (click)=\"focusTitleInput()\"\n            >edit</span\n          >\n          <span\n            *ngIf=\"config.hintKey\"\n            class=\"material-symbols-outlined gn-ui-icon-small m-2\"\n            [matTooltip]=\"config.hintKey! | translate\"\n            matTooltipPosition=\"above\"\n          >\n            help\n          </span>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'abstract'\">\n      <gn-ui-form-field-rich\n        [label]=\"config.labelKey! | translate\"\n        [hint]=\"config.hintKey! | translate\"\n        [value]=\"valueAsString\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-rich>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'overviews'\">\n      <gn-ui-form-field-overviews\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOverviews\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-overviews>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceIdentifiers'\">\n      <gn-ui-form-field-simple\n        [type]=\"'text'\"\n        [value]=\"valueAsResourceIdentifierCode\"\n        (valueChange)=\"handleResourceIdentifierChange($event)\"\n      ></gn-ui-form-field-simple>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceCreated'\">\n      <gn-ui-form-field-date\n        [value]=\"valueAsDate\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-date>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceUpdated'\">\n      <gn-ui-form-field-date\n        [value]=\"valueAsDate\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-date>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'updateFrequency'\">\n      <gn-ui-form-field-update-frequency\n        [value]=\"valueAsUpdateFrequency\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-update-frequency>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'temporalExtents'\">\n      <gn-ui-form-field-temporal-extents\n        [value]=\"valueAsTemporalExtents\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-temporal-extents>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'spatialExtents'\">\n      <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'keywords'\">\n      <gn-ui-form-field-keywords\n        [value]=\"valueAsKeywords\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-keywords>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'topics'\">\n      <gn-ui-form-field-topics\n        [value]=\"valueAsTopics\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-topics>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'licenses'\">\n      <gn-ui-form-field-license\n        [label]=\"config.labelKey! | translate\"\n        [recordLicences]=\"valueAsConstraints\"\n        (recordLicencesChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-license>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'legalConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'securityConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'otherConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container\n    ></ng-container>\n    <ng-template #formFieldConstraints>\n      <gn-ui-form-field-constraints\n        [label]=\"config.labelKey\"\n        [value]=\"valueAsConstraints\"\n        [constraintType]=\"model\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-constraints\n    ></ng-template>\n\n    <ng-container *ngSwitchCase=\"'contactsForResource'\">\n      <gn-ui-form-field-contacts-for-resource\n        [value]=\"valueAsIndividuals\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-contacts-for-resource>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'contacts'\">\n      <gn-ui-form-field-contacts\n        [value]=\"valueAsIndividuals\"\n        [modelSpecifier]=\"modelSpecifier\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-contacts>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'onlineResources'\">\n      <gn-ui-form-field-online-resources\n        *ngIf=\"modelSpecifier === 'onlineResourceType:!link'\"\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOnlineResources\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-online-resources>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'onlineResources'\">\n      <gn-ui-form-field-online-link-resources\n        *ngIf=\"modelSpecifier === 'onlineResourceType:link'\"\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOnlineResources\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-online-link-resources>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"!model\">\n    <ng-container [ngSwitch]=\"componentName\">\n      <ng-container *ngSwitchCase=\"'form-field-constraints-shortcuts'\">\n        <gn-ui-form-field-constraints-shortcuts></gn-ui-form-field-constraints-shortcuts>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'form-field-spatial-toggle'\">\n        <gn-ui-form-field-spatial-toggle></gn-ui-form-field-spatial-toggle>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: [":host{scroll-margin-top:90px}\n"] }]
+                        NgIconComponent,
+                    ], providers: [provideIcons({ matEditOutline, matHelpOutline })], hostDirectives: [FieldFocusDirective], template: "<!-- TEMPORARY - disabling the open data switch -->\n<!-- <ng-container *ngIf=\"model === 'licenses'\">\n  <gn-ui-form-field-open-data\n    [value]=\"valueAsConstraints\"\n    (valueChange)=\"valueChange.emit($event)\"\n    (openDataChange)=\"toggleIsOpenData($event)\"\n  ></gn-ui-form-field-open-data>\n</ng-container> -->\n<div class=\"flex flex-col h-full\">\n  <ng-container *ngIf=\"withoutWrapper; else withGenericWrapper\">\n    <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n  </ng-container>\n  <ng-template #withGenericWrapper>\n    <gn-ui-form-field-wrapper\n      [label]=\"config.labelKey! | translate: { recordKind }\"\n      [hint]=\"config.hintKey! | translate: { recordKind }\"\n    >\n      <ng-container *ngTemplateOutlet=\"fieldContent\"></ng-container>\n    </gn-ui-form-field-wrapper>\n  </ng-template>\n</div>\n\n<ng-template #fieldContent>\n  <ng-container [ngSwitch]=\"model\">\n    <ng-container *ngSwitchCase=\"'title'\">\n      <div class=\"flex flex-row flex-start items-center gap-3 mb-[12px]\">\n        <textarea\n          #titleInput\n          cdkTextareaAutosize\n          #autosize=\"cdkTextareaAutosize\"\n          cdkAutosizeMinRows=\"1\"\n          data-test=\"recordTitleInput\"\n          class=\"grow font-title text-3xl font-normal overflow-hidden text-black/80\"\n          [value]=\"valueAsString\"\n          (change)=\"valueChange.emit($event.target.value)\"\n          [placeholder]=\"\n            'editor.record.form.field.title.placeholder'\n              | translate: { recordKind }\n          \"\n        ></textarea>\n        <div class=\"flex flex-row justify-between self-start mt-0.5\">\n          <ng-icon\n            name=\"matEditOutline\"\n            size=\"16\"\n            class=\"m-2 cursor-pointer\"\n            (click)=\"focusTitleInput()\"\n          ></ng-icon>\n          <ng-icon\n            *ngIf=\"config.hintKey\"\n            name=\"matHelpOutline\"\n            size=\"16\"\n            class=\"m-2\"\n            [matTooltip]=\"config.hintKey! | translate: { recordKind }\"\n            matTooltipPosition=\"above\"\n          ></ng-icon>\n        </div>\n      </div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'abstract'\">\n      <gn-ui-form-field-rich\n        [label]=\"config.labelKey! | translate: { recordKind }\"\n        [hint]=\"config.hintKey! | translate: { recordKind }\"\n        [value]=\"valueAsString\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-rich>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'overviews'\">\n      <gn-ui-form-field-overviews\n        [metadataUuid]=\"uniqueIdentifier\"\n        [recordKind]=\"recordKind\"\n        [value]=\"valueAsOverviews\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-overviews>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceIdentifiers'\">\n      <gn-ui-form-field-simple\n        [type]=\"'text'\"\n        [value]=\"valueAsResourceIdentifierCode\"\n        (valueChange)=\"handleResourceIdentifierChange($event)\"\n      ></gn-ui-form-field-simple>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceCreated'\">\n      <gn-ui-form-field-date\n        [value]=\"valueAsDate\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-date>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'resourceUpdated'\">\n      <gn-ui-form-field-date\n        [value]=\"valueAsDate\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-date>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'updateFrequency'\">\n      <gn-ui-form-field-update-frequency\n        [value]=\"valueAsUpdateFrequency\"\n        (valueChange)=\"valueChange.emit($event)\"\n        [recordKind]=\"recordKind\"\n      ></gn-ui-form-field-update-frequency>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'temporalExtents'\">\n      <gn-ui-form-field-temporal-extents\n        [value]=\"valueAsTemporalExtents\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-temporal-extents>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'spatialExtents'\">\n      <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'keywords'\">\n      <gn-ui-form-field-keywords\n        [value]=\"valueAsKeywords\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-keywords>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'topics'\">\n      <gn-ui-form-field-topics\n        [value]=\"valueAsTopics\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-topics>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'licenses'\">\n      <gn-ui-form-field-license\n        [label]=\"config.labelKey! | translate: { recordKind }\"\n        [recordLicences]=\"valueAsConstraints\"\n        (recordLicencesChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-license>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'legalConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'securityConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'otherConstraints'\">\n      <ng-container *ngTemplateOutlet=\"formFieldConstraints\"></ng-container\n    ></ng-container>\n    <ng-template #formFieldConstraints>\n      <gn-ui-form-field-constraints\n        [label]=\"config.labelKey\"\n        [value]=\"valueAsConstraints\"\n        [constraintType]=\"model\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-constraints\n    ></ng-template>\n\n    <ng-container *ngSwitchCase=\"'contactsForResource'\">\n      <gn-ui-form-field-contacts-for-resource\n        [value]=\"valueAsIndividuals\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-contacts-for-resource>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'contacts'\">\n      <gn-ui-form-field-contacts\n        [value]=\"valueAsIndividuals\"\n        [modelSpecifier]=\"modelSpecifier\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-contacts>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'onlineResources'\">\n      <gn-ui-form-field-online-resources\n        *ngIf=\"modelSpecifier === 'onlineResourceType:!link'\"\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOnlineResources\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-online-resources>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'onlineResources'\">\n      <gn-ui-form-field-online-link-resources\n        *ngIf=\"modelSpecifier === 'onlineResourceType:link'\"\n        [metadataUuid]=\"uniqueIdentifier\"\n        [value]=\"valueAsOnlineResources\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-online-link-resources>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'onlineResources'\">\n      <gn-ui-form-field-online-single-link-resource\n        *ngIf=\"modelSpecifier === 'onlineResourceType:singleLink'\"\n        [value]=\"valueAsOnlineResources\"\n        (valueChange)=\"valueChange.emit($event)\"\n      ></gn-ui-form-field-online-single-link-resource>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"!model\">\n    <ng-container [ngSwitch]=\"componentName\">\n      <ng-container *ngSwitchCase=\"'form-field-constraints-shortcuts'\">\n        <gn-ui-form-field-constraints-shortcuts></gn-ui-form-field-constraints-shortcuts>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'form-field-spatial-toggle'\">\n        <gn-ui-form-field-spatial-toggle></gn-ui-form-field-spatial-toggle>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-template>\n", styles: [":host{scroll-margin-top:90px}\n"] }]
         }], propDecorators: { uniqueIdentifier: [{
                 type: Input
+            }], recordKind: [{
+                type: Input
             }], model: [{
                 type: Input
             }], modelSpecifier: [{
@@ -39019,17 +39275,298 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 args: ['titleInput']
             }] } });
 
+const TOKEN_FUNCTION_CALL_START = '(';
+const TOKEN_FUNCTION_CALL_END = ')';
+const TOKEN_PROPERTY_ACCESS = '.';
+const TOKEN_OPERATOR_TERNARY_FIRST = '?';
+const TOKEN_OPERATOR_TERNARY_SECOND = ':';
+const TOKEN_OPERATOR_LOGICAL = ['==', '!='];
+const TOKEN_STRING_LITERAL = ["'", '"'];
+const TOKEN_GROUP_START = '(';
+const TOKEN_GROUP_END = ')';
+// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_precedence
+const OPERATORS_BY_PRECEDENCE = [
+    [TOKEN_OPERATOR_TERNARY_FIRST, TOKEN_OPERATOR_TERNARY_SECOND],
+    TOKEN_OPERATOR_LOGICAL,
+];
+const ALL_OPERATORS = OPERATORS_BY_PRECEDENCE.flat();
+function isExpression(input) {
+    return typeof input === 'string' && /^\${.*}$/.test(input);
+}
+function readNext(input, start, length = 1) {
+    return input.substring(start, start + length);
+}
+/**
+ * Will continue looking until an operator is found at the same depth level
+ */
+function readUntilNextOperator(input, start, currentOperator) {
+    let pos = start;
+    let result = '';
+    let depth = 0;
+    while (pos < input.length) {
+        const isOperator = ALL_OPERATORS.some((token) => readNext(input, pos, token.length) === token);
+        if (isOperator && depth === 0) {
+            const operatorPrecedence = OPERATORS_BY_PRECEDENCE.findIndex((tokens) => tokens.some((token) => readNext(input, pos, token.length) === token));
+            const currentPrecedence = OPERATORS_BY_PRECEDENCE.findIndex((tokens) => tokens.some((token) => currentOperator === token)) ?? -1;
+            // the new operator has a lower precedence than the current one: we stop here
+            if (operatorPrecedence < currentPrecedence) {
+                return result;
+            }
+        }
+        if (input[pos] === TOKEN_GROUP_START) {
+            depth++;
+        }
+        else if (input[pos] === TOKEN_GROUP_END) {
+            depth--;
+        }
+        if (depth < 0) {
+            return result;
+        }
+        result += input[pos];
+        pos++;
+    }
+    return result;
+}
+/**
+ * Will look for a specific character or string situated at the same depth level!
+ * Returns null if nothing found
+ */
+function readUntil(input, start, char) {
+    let pos = start;
+    let result = '';
+    let depth = 0;
+    while (pos < input.length) {
+        if (depth === 0 && readNext(input, pos, char.length) === char) {
+            return result;
+        }
+        if (input[pos] === TOKEN_GROUP_START) {
+            depth++;
+        }
+        else if (input[pos] === TOKEN_GROUP_END) {
+            depth--;
+        }
+        if (depth < 0) {
+            return null;
+        }
+        result += input[pos];
+        pos++;
+    }
+    return null;
+}
+function getFunctionEvaluator(functionName, context) {
+    switch (functionName) {
+        case 'dateNow':
+            return () => new Date();
+        default:
+            context.errors.push(`Unknown function: ${functionName}`);
+            return () => undefined;
+    }
+}
+/**
+ * This evaluates an expression using a very light subset of Javascript.
+ *
+ * Things allowed in expressions are:
+ * - comparing values with == and !=
+ * - ternary comparisons with a ? b : c
+ * - grouping with (...)
+ * - functions: for now only dateNow() is supported and returns a timestamp
+ * - access to globals such as record.type
+ *
+ * Expressions are turned into an evaluator that can be called with a context containing the globals.
+ * Expressions can return any primitive Javascript type
+ * Valid expressions should always be enclosed in ${...}
+ */
+function evaluate(expression) {
+    if (!/^\${.*}$/.test(expression)) {
+        throw new Error('Malformed expression: missing ${} enclosure');
+    }
+    const context = {
+        errors: [],
+    };
+    const trimmedExpression = expression.slice(2, -1);
+    return evaluateInternal(trimmedExpression, context);
+}
+function evaluateInternal(expression, currentContext) {
+    let pos = 0;
+    let currentSymbol = null;
+    let currentEvaluator = () => undefined;
+    while (pos < expression.length) {
+        const isWhitespace = /\s/.test(readNext(expression, pos));
+        if (isWhitespace) {
+            pos++;
+            continue;
+        }
+        // SYMBOL (NAME)
+        const isSymbol = /[a-zA-Z]/.test(readNext(expression, pos));
+        if (isSymbol) {
+            currentSymbol = '';
+            while (pos < expression.length) {
+                if (!/[a-zA-Z]/.test(readNext(expression, pos))) {
+                    break;
+                }
+                currentSymbol += readNext(expression, pos);
+                pos++;
+            }
+            continue;
+        }
+        // FUNCTION CALL
+        const isFunctionCall = currentSymbol && readNext(expression, pos) === TOKEN_FUNCTION_CALL_START;
+        if (isFunctionCall) {
+            pos++;
+            // no support for arguments for now (not needed)
+            if (readNext(expression, pos) !== TOKEN_FUNCTION_CALL_END) {
+                currentContext.errors.push(`Expected token '${TOKEN_FUNCTION_CALL_END}' at position ${pos}, got '${readNext(expression, pos)}' instead`);
+                break;
+            }
+            pos++;
+            currentEvaluator = getFunctionEvaluator(currentSymbol, currentContext);
+            currentSymbol = null;
+            continue;
+        }
+        // PROPERTY ACCESS (single level)
+        const isPropertyAccess = currentSymbol && readNext(expression, pos) === TOKEN_PROPERTY_ACCESS;
+        if (isPropertyAccess) {
+            pos++;
+            if (!/[a-zA-Z]/.test(readNext(expression, pos))) {
+                currentContext.errors.push(`Expected a property name after '${TOKEN_PROPERTY_ACCESS}' at position ${pos}, got '${readNext(expression, pos)}' instead`);
+                break;
+            }
+            let propertyName = '';
+            while (pos < expression.length) {
+                if (!/[a-zA-Z]/.test(readNext(expression, pos))) {
+                    break;
+                }
+                propertyName += readNext(expression, pos);
+                pos++;
+            }
+            const variableName = currentSymbol;
+            currentEvaluator = (context) => {
+                if (!Object.prototype.hasOwnProperty.call(context.globals, variableName)) {
+                    return undefined;
+                }
+                if (!Object.prototype.hasOwnProperty.call(context.globals[variableName], propertyName)) {
+                    return undefined;
+                }
+                return context.globals[variableName][propertyName];
+            };
+            currentSymbol = null;
+            continue;
+        }
+        // we have a symbol but did not do either function call or property access => error
+        if (currentSymbol) {
+            currentContext.errors.push(`Expected a function call or property access after symbol '${currentSymbol}' at position ${pos}, got '${readNext(expression, pos)}' instead`);
+            break;
+        }
+        // GROUP OPERATOR
+        const isGroupStart = readNext(expression, pos) === TOKEN_GROUP_START;
+        if (isGroupStart) {
+            pos++;
+            const groupExpression = readUntil(expression, pos, TOKEN_GROUP_END);
+            if (groupExpression === null) {
+                currentContext.errors.push(`Reached end of expression before finding expected token '${TOKEN_GROUP_END}'`);
+                break;
+            }
+            pos += groupExpression.length + 1;
+            currentEvaluator = evaluateInternal(groupExpression, currentContext).evaluator;
+            continue;
+        }
+        // LOGICAL OPERATORS
+        const isLogicalOperator = TOKEN_OPERATOR_LOGICAL.some((token) => readNext(expression, pos, token.length) === token);
+        if (isLogicalOperator) {
+            const matchingOperator = TOKEN_OPERATOR_LOGICAL.find((token) => readNext(expression, pos, token.length) === token);
+            const isEqual = matchingOperator.startsWith('=');
+            pos += matchingOperator.length;
+            const comparedEvaluator = currentEvaluator;
+            const comparedToExpression = readUntilNextOperator(expression, pos, matchingOperator);
+            pos += comparedToExpression.length;
+            const comparedToEvaluator = evaluateInternal(comparedToExpression, currentContext).evaluator;
+            currentEvaluator = (context) => {
+                return ((comparedEvaluator(context) == comparedToEvaluator(context)) ===
+                    isEqual);
+            };
+            continue;
+        }
+        // TERNARY OPERATOR
+        const isTernary = readNext(expression, pos) === TOKEN_OPERATOR_TERNARY_FIRST;
+        if (isTernary) {
+            if (!currentEvaluator) {
+                currentContext.errors.push(`Expected an expression before '${TOKEN_OPERATOR_TERNARY_FIRST}' at position ${pos} but could not find any`);
+                break;
+            }
+            pos++;
+            const ifTrueExpression = readUntil(expression, pos, TOKEN_OPERATOR_TERNARY_SECOND);
+            if (ifTrueExpression === null) {
+                currentContext.errors.push(`Reached end of expression before finding expected token '${TOKEN_OPERATOR_TERNARY_SECOND}'`);
+                break;
+            }
+            pos += ifTrueExpression.length + 1;
+            const ifFalseExpression = readUntilNextOperator(expression, pos, TOKEN_OPERATOR_TERNARY_FIRST);
+            pos += ifFalseExpression.length;
+            const conditionEvaluator = currentEvaluator;
+            const ifTrueEvaluator = evaluateInternal(ifTrueExpression, currentContext).evaluator;
+            const ifFalseEvaluator = evaluateInternal(ifFalseExpression, currentContext).evaluator;
+            currentEvaluator = (context) => {
+                if (conditionEvaluator(context)) {
+                    return ifTrueEvaluator(context);
+                }
+                return ifFalseEvaluator(context);
+            };
+            continue;
+        }
+        // STRING LITERAL
+        const isStringLiteral = TOKEN_STRING_LITERAL.some((token) => readNext(expression, pos) === token);
+        if (isStringLiteral) {
+            const openingToken = readNext(expression, pos);
+            pos++;
+            const literal = readUntil(expression, pos, openingToken);
+            if (literal === null) {
+                currentContext.errors.push(`Reached end of expression before finding corresponding closing token ${openingToken} for string literal`);
+                break;
+            }
+            pos += literal.length + 1;
+            currentEvaluator = () => literal;
+            continue;
+        }
+        // NUMBER LITERAL
+        const isNumberLiteral = /[0-9]/.test(readNext(expression, pos));
+        if (isNumberLiteral) {
+            let literal = '';
+            while (pos < expression.length) {
+                if (!/[0-9]/.test(readNext(expression, pos))) {
+                    break;
+                }
+                literal += readNext(expression, pos);
+                pos++;
+            }
+            const numberLiteral = parseInt(literal, 10);
+            currentEvaluator = () => numberLiteral;
+            continue;
+        }
+        // could not figure out what that was: leave
+        currentContext.errors.push(`Unexpected character '${readNext(expression, pos)}' at position ${pos}`);
+        break;
+    }
+    return {
+        evaluator: currentEvaluator,
+        errors: currentContext.errors,
+    };
+}
+
 class RecordFormComponent {
     constructor() {
         this.facade = inject(EditorFacade);
+        this.notifications = inject(NotificationsService);
         this.subscription = new Subscription();
         this.recordUniqueIdentifier$ = this.facade.record$.pipe(map$2((record) => record.uniqueIdentifier));
+        this.recordKind$ = this.facade.record$.pipe(map$2((record) => record.kind));
         this.focusFieldWithPage$ = this.facade.focusedField$.pipe(switchMap$1(async (field) => {
             const location = await this.getFieldLocation(field);
             return [field, location?.page ?? null, location?.section ?? -1];
         }));
         this.formFields = viewChildren(FormFieldComponent, ...(ngDevMode ? [{ debugName: "formFields" }] : []));
         this.sectionFocusDirectives = viewChildren('sectionFocus', ...(ngDevMode ? [{ debugName: "sectionFocusDirectives" }] : []));
+        this.recordSignal = toSignal(this.facade.record$, { requireSync: true });
+        this.expressionCache = new Map();
     }
     focusField(model, sectionIndex) {
         const field = this.formFields().find((f) => f.model === model);
@@ -39075,8 +39612,32 @@ class RecordFormComponent {
             .findIndex((s) => s.fields.some((f) => f.model === model));
         return { page, section };
     }
+    // only compiles the expression into an evaluator the first time;
+    // then we store a computed() signal in the cache so that the evaluator is
+    // run again if the record changes
+    evaluateExpression(expressionOrValue) {
+        if (!isExpression(expressionOrValue)) {
+            return signal(expressionOrValue);
+        }
+        const expression = expressionOrValue;
+        if (this.expressionCache.has(expression)) {
+            return this.expressionCache.get(expression);
+        }
+        const { evaluator, errors } = evaluate(expression);
+        if (errors.length) {
+            console.error(`The following errors happened while evaluating the expression '${expression}':
+${errors.map((err) => `> ${err}`).join('\n')}`);
+            this.notifications.showNotification({
+                type: 'warning',
+                title: 'Technical error',
+                text: 'An error happened while evaluating an expression inside the editor configuration; open the developer console for more information',
+            });
+        }
+        this.expressionCache.set(expression, computed(() => evaluator({ globals: { record: this.recordSignal() } })));
+        return this.expressionCache.get(expression);
+    }
     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", viewQueries: [{ propertyName: "formFields", predicate: FormFieldComponent, descendants: true, isSignal: true }, { propertyName: "sectionFocusDirectives", predicate: ["sectionFocus"], descendants: true, isSignal: true }], 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\n        class=\"flex flex-col gap-6 border p-8 rounded-[8px] shadow scroll-mt-[90px]\"\n        gnUiFieldFocus\n        #sectionFocus=\"fieldFocus\"\n      >\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: [".gn-ui-field-focus-glow{position:relative}.gn-ui-field-focus-glow:after{content:\"\";position:absolute;inset:-8px;border-radius:8px;background-color:color-mix(in srgb,var(--color-primary) 12%,transparent);pointer-events:none;animation:gn-ui-field-focus-glow 3s ease-out forwards}.gn-ui-field-focus-glow:before{content:\"\";position:absolute;inset:-16px;border:2px dashed var(--color-primary);border-radius:10px;pointer-events:none;animation:gn-ui-field-focus-glow 3s ease-out forwards}@keyframes gn-ui-field-focus-glow{0%,55%{opacity:1}to{opacity:0}}\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: FieldFocusDirective, selector: "[gnUiFieldFocus]", inputs: ["gnUiFieldFocusGlowClass"], exportAs: ["fieldFocus"] }, { 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", viewQueries: [{ propertyName: "formFields", predicate: FormFieldComponent, descendants: true, isSignal: true }, { propertyName: "sectionFocusDirectives", predicate: ["sectionFocus"], descendants: true, isSignal: true }], 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 (evaluateExpression(section.hidden)() !== true) {\n      <div\n        class=\"flex flex-col gap-6 border p-8 rounded-[8px] shadow scroll-mt-[90px] bg-white\"\n        gnUiFieldFocus\n        #sectionFocus=\"fieldFocus\"\n      >\n        <div class=\"flex flex-col gap-2\">\n          @if (section.labelKey) {\n            <div\n              class=\"text-2xl font-title text-black\"\n              translate\n              [translateParams]=\"{ recordKind: recordKind$ | async }\"\n            >\n              {{ section.labelKey }}\n            </div>\n          }\n          @if (section.descriptionKey) {\n            <div\n              class=\"text-gray-800 text-sm\"\n              translate\n              [translateParams]=\"{ recordKind: recordKind$ | async }\"\n            >\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 (evaluateExpression(field.config.hidden)() !== true) {\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                [recordKind]=\"recordKind$ | 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-field-focus-glow{position:relative}.gn-ui-field-focus-glow:after{content:\"\";position:absolute;inset:-8px;border-radius:8px;background-color:color-mix(in srgb,var(--color-primary) 12%,transparent);pointer-events:none;animation:gn-ui-field-focus-glow 3s ease-out forwards}.gn-ui-field-focus-glow:before{content:\"\";position:absolute;inset:-16px;border:2px dashed var(--color-primary);border-radius:10px;pointer-events:none;animation:gn-ui-field-focus-glow 3s ease-out forwards}@keyframes gn-ui-field-focus-glow{0%,55%{opacity:1}to{opacity:0}}\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", "recordKind", "model", "modelSpecifier", "componentName", "config", "value"], outputs: ["valueChange"] }, { kind: "directive", type: FieldFocusDirective, selector: "[gnUiFieldFocus]", inputs: ["gnUiFieldFocusGlowClass"], exportAs: ["fieldFocus"] }, { 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,
@@ -39085,48 +39646,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         FormFieldComponent,
                         FieldFocusDirective,
                         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\n        class=\"flex flex-col gap-6 border p-8 rounded-[8px] shadow scroll-mt-[90px]\"\n        gnUiFieldFocus\n        #sectionFocus=\"fieldFocus\"\n      >\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: [".gn-ui-field-focus-glow{position:relative}.gn-ui-field-focus-glow:after{content:\"\";position:absolute;inset:-8px;border-radius:8px;background-color:color-mix(in srgb,var(--color-primary) 12%,transparent);pointer-events:none;animation:gn-ui-field-focus-glow 3s ease-out forwards}.gn-ui-field-focus-glow:before{content:\"\";position:absolute;inset:-16px;border:2px dashed var(--color-primary);border-radius:10px;pointer-events:none;animation:gn-ui-field-focus-glow 3s ease-out forwards}@keyframes gn-ui-field-focus-glow{0%,55%{opacity:1}to{opacity:0}}\n"] }]
+                    ], template: "<div class=\"flex flex-col gap-6\">\n  @for (\n    section of facade.currentSections$ | async;\n    track sectionTracker($index, section)\n  ) {\n    @if (evaluateExpression(section.hidden)() !== true) {\n      <div\n        class=\"flex flex-col gap-6 border p-8 rounded-[8px] shadow scroll-mt-[90px] bg-white\"\n        gnUiFieldFocus\n        #sectionFocus=\"fieldFocus\"\n      >\n        <div class=\"flex flex-col gap-2\">\n          @if (section.labelKey) {\n            <div\n              class=\"text-2xl font-title text-black\"\n              translate\n              [translateParams]=\"{ recordKind: recordKind$ | async }\"\n            >\n              {{ section.labelKey }}\n            </div>\n          }\n          @if (section.descriptionKey) {\n            <div\n              class=\"text-gray-800 text-sm\"\n              translate\n              [translateParams]=\"{ recordKind: recordKind$ | async }\"\n            >\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 (evaluateExpression(field.config.hidden)() !== true) {\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                [recordKind]=\"recordKind$ | 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-field-focus-glow{position:relative}.gn-ui-field-focus-glow:after{content:\"\";position:absolute;inset:-8px;border-radius:8px;background-color:color-mix(in srgb,var(--color-primary) 12%,transparent);pointer-events:none;animation:gn-ui-field-focus-glow 3s ease-out forwards}.gn-ui-field-focus-glow:before{content:\"\";position:absolute;inset:-16px;border:2px dashed var(--color-primary);border-radius:10px;pointer-events:none;animation:gn-ui-field-focus-glow 3s ease-out forwards}@keyframes gn-ui-field-focus-glow{0%,55%{opacity:1}to{opacity:0}}\n"] }]
         }], propDecorators: { formFields: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FormFieldComponent), { isSignal: true }] }], sectionFocusDirectives: [{ type: i0.ViewChildren, args: ['sectionFocus', { isSignal: true }] }] } });
 
-function evaluate(expression) {
-    if (expression.match(/^\${.*}$/)) {
-        return evaluate(expression.slice(2, -1));
-    }
-    const operator = expression.split('(')[0];
-    switch (operator) {
-        case 'dateNow':
-            return () => new Date();
-        default:
-            throw new Error(`Unknown operator: ${operator}`);
-    }
-}
-
 class EditorService {
     constructor() {
         this.recordsRepository = inject(RecordsRepositoryInterface);
     }
     // returns the record as it was when saved, alongside its source
-    saveRecord(record, recordSource, fieldsConfig) {
+    saveRecord(record, recordSource, fieldsConfig, publish) {
         const savedRecord = { ...record };
         const fields = fieldsConfig.pages.flatMap((page) => page.sections.flatMap((section) => section.fields));
         // run onSave processes
         for (const field of fields) {
             if (field.onSaveProcess && field.model) {
-                const evaluator = evaluate(field.onSaveProcess);
+                const { evaluator } = evaluate(field.onSaveProcess);
                 savedRecord[field.model] = evaluator({
-                    model: field.model,
-                    value: record[field.model],
+                    globals: {
+                        record,
+                    },
                 });
             }
         }
-        let publishToAll = true;
-        // if the record is new, generate a new unique identifier and pass publishToAll as false
-        if (!record.uniqueIdentifier) {
-            savedRecord.uniqueIdentifier = null;
-            publishToAll = false;
-        }
         return this.recordsRepository
-            .saveRecord(savedRecord, recordSource, publishToAll)
+            .saveRecord(savedRecord, recordSource, publish)
             .pipe(switchMap((uniqueIdentifier) => this.recordsRepository.openRecordForEdition(uniqueIdentifier)), tap$1(() => {
             // if saving was successful, the original draft can be discarded
             this.recordsRepository.clearRecordDraft(record.uniqueIdentifier);
@@ -39164,8 +39707,14 @@ class EditorEffects {
         this.recordsRepository = inject(RecordsRepositoryInterface);
         this.plateformService = inject(PlatformServiceInterface);
         this.store = inject(Store);
-        this.saveRecord$ = createEffect(() => this.actions$.pipe(ofType(saveRecord), withLatestFrom$1(this.store.select(selectRecord), this.store.select(selectRecordSource), this.store.select(selectEditorConfig)), switchMap$1(([, record, recordSource, fieldsConfig]) => this.editorService.saveRecord(record, recordSource, fieldsConfig).pipe(switchMap$1(([savedRecord, savedRecordSource]) => {
+        this.saveRecord$ = createEffect(() => this.actions$.pipe(ofType(saveRecord), withLatestFrom$1(this.store.select(selectRecord), this.store.select(selectRecordSource), this.store.select(selectEditorConfig)), switchMap$1(([{ publish }, record, recordSource, fieldsConfig]) => this.editorService
+            .saveRecord(record, recordSource, fieldsConfig, publish)
+            .pipe(switchMap$1(([savedRecord, savedRecordSource]) => {
             const actions = [saveRecordSuccess()];
+            if (publish) {
+                // saving without publishing doesn't unpublish
+                actions.push(isPublished({ isPublished: true }));
+            }
             if (!record?.uniqueIdentifier) {
                 actions.push(openRecord({
                     record: savedRecord,
@@ -39706,5 +40255,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, ContactDetailsComponent, 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_RECORD_CONVERTER, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DEFAULT_SPATIAL_EXTENT_STYLE, 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, 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, FieldFocusDirective, 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, I18nInterceptor, ISO_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, bboxToPolygon, blockModelFixture, bytesToMegabytes, canEditRecord, checkFileFormat, clearSelectedFeatures, createChild, createDocument, createElement, createFuzzyFilter, createNestedChild, createNestedElement, createSpatialExtentLayer, currentPage, defaultMapStyleFixture, defaultMapStyleHlFixture, downgradeImage, downsizeImage, draftSaveSuccess, dragPanCondition, dropEmptyTranslations, editorReducer, emptyBlockModelFixture, findChildElement, findChildOrCreate, findChildrenElement, findConverterForDocument, findNestedChildOrCreate, findNestedElement, findNestedElements, findParent, firstChildElement, formatDate, formatUserInfo, getAddressLines, 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, getOptionalEditorConfig, 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, sortByFromString, sortByToString, sortByToStrings, spatialExtentToGeometry, spatialExtentsToFeatureCollection, stripHtml, stripNamespace, toDate, toIndividual, toLang2, toLang3, totalPages, undoRecordDraft, unrecognizedKeysConfigFixture, updateFrequencyCodeValues, updateLanguages, updateRecordField, updateRecordLanguages, wmsLayerFlatten, writeAttribute, wrongLanguageCodeConfigFixture, xmlToString };
+export { ADD_RESULTS, ADD_SEARCH, 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, CLEAR_ERROR, CLEAR_RESULTS, CarouselComponent, CatalogTitleComponent, CellPopinComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ClearError, ClearResults, ColorScaleComponent, ConfirmationDialogComponent, ContactDetailsComponent, ContactDetailsFormComponent, ContactPillComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_CONFIGURATION, DEFAULT_GN4_LOGIN_URL, DEFAULT_GN4_LOGOUT_URL, DEFAULT_GN4_SETTINGS_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RECORD_CONVERTER, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DEFAULT_SPATIAL_EXTENT_STYLE, 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, 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, FieldFocusDirective, FieldsService, FigureComponent, FigureContainerComponent, FileInputComponent, FileTranslateLoader, FilesDropDirective, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldDateComponent, FormFieldFileComponent, FormFieldKeywordsComponent, FormFieldLicenseComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentsComponent, FormFieldTopicsComponent, FormFieldWrapperComponent, FullTextSearchField, FuzzySearchComponent, GEONETWORK_UI_TAG_NAME, GEONETWORK_UI_VERSION, GeoDataBadgeComponent, GeoTableViewComponent, GeocodingComponent, GeojsonReader, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GnUiHumanizeDateDirective, GpfApiDlComponent, GravatarService, I18nInterceptor, ISO_TOPICS, ImageFallbackDirective, ImageInputComponent, ImageOverlayPreviewComponent, ImportRecordComponent, InlineFilterComponent, InteractiveTableColumnComponent, InteractiveTableComponent, InternalLinkCardComponent, IsSpatialSearchField, Iso191153Converter, Iso19139Converter, KeywordBadgeComponent, KindBadgeComponent, LANGUAGES_LIST, LANGUAGE_NAMES, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LOGIN_URL, LOGOUT_URL, LONLAT_CRS_CODES, LanguageSwitcherComponent, LayersPanelComponent, LicenseSearchField, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_FEATURE_KEY, MAP_VIEW_CONSTRAINTS, MAX_UPLOAD_SIZE_MB, METADATA_LANGUAGE, MapContainerComponent, MapFacade, MapLegendComponent, MapStateContainerComponent, MapStyleService, MapUtilsService, MapViewComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataDoiComponent, MetadataInfoComponent, MetadataLinkType, MetadataMapperContext, MetadataQualityComponent, MetadataQualityItemComponent, MetadataQualityPanelComponent, ModalDialogComponent, MultilingualPanelComponent, MultilingualSearchField, MyOrgService, NAMESPACES, NOT_APPLICABLE_CONSTRAINT, NOT_KNOWN_CONSTRAINT, NotificationComponent, NotificationsContainerComponent, NotificationsService, OPEN_DATA_LICENSE, ORGANIZATIONS_STRATEGY, ORGANIZATION_PAGE_URL_TOKEN, ORGANIZATION_URL_TOKEN, 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_DATASET_URL_TOKEN, RECORD_REUSE_URL_TOKEN, RECORD_SERVICE_URL_TOKEN, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESULTS_LAYOUT_CONFIG, REUSE_LIGHT_CONFIGURATION, 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, 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, TRANSLATE_DEBUG_CONFIG, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, TranslatedSearchField, TruncatedTextComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UpdateConfigAggregations, UpdateFilters, UrlInputComponent, UserFeedbackItemComponent, UserPreviewComponent, UserSearchField, VECTOR_STYLE_DEFAULT, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, XmlParseError, _reset, allChildrenElement, appConfigWithTranslationFixture, appendChildTree, appendChildren, assertValidXml, bboxToPolygon, blockModelFixture, bytesToMegabytes, canEditRecord, checkFileFormat, clearSelectedFeatures, createChild, createDocument, createElement, createFuzzyFilter, createNestedChild, createNestedElement, createSpatialExtentLayer, currentPage, defaultMapStyleFixture, defaultMapStyleHlFixture, downgradeImage, downsizeImage, draftSaveSuccess, dragPanCondition, dropEmptyTranslations, editorReducer, emptyBlockModelFixture, findChildElement, findChildOrCreate, findChildrenElement, findConverterForDocument, findNestedChildOrCreate, findNestedElement, findNestedElements, findParent, firstChildElement, formatDate, formatUserInfo, getAddressLines, getAllKeysValidator, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryBoundingBox, getGeometryFromGeoJSON, getGlobalConfig, getIndividualDisplayName, getIsMobile, getJsonDataItemsProxy, getKeywordHierarchyPath, getLayers, getLinkId, getLinkLabel, getLinkPriority, getMapContext, getMapContextLayerFromConfig, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getNamespace, getOptionalEditorConfig, 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, sortByFromString, sortByToString, sortByToStrings, spatialExtentToGeometry, spatialExtentsToFeatureCollection, stripHtml, stripNamespace, toDate, toIndividual, toLang2, toLang3, totalPages, undoRecordDraft, unrecognizedKeysConfigFixture, updateFrequencyCodeValues, updateLanguages, updateRecordField, updateRecordLanguages, wmsLayerFlatten, writeAttribute, wrongLanguageCodeConfigFixture, xmlToString };
 //# sourceMappingURL=geonetwork-ui.mjs.map