geonetwork-ui 2.8.0-dev.1f70ea679 → 2.8.0-dev.27e1de86f

package/fesm2022/geonetwork-ui.mjs

@@ -7,11 +7,11 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import { format } from 'date-fns/format';
 import { Namespace, Literal, lit, parse as parse$2, sym, BlankNode, graph } from 'rdflib';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, APP_INITIALIZER, makeEnvironmentProviders, Directive, Input, HostListener, EventEmitter, Component, ChangeDetectionStrategy, Output, ViewChild, ViewEncapsulation, HostBinding, TemplateRef, ElementRef, ViewChildren, ContentChild, ContentChildren, Host, Pipe, ViewContainerRef, inject } from '@angular/core';
+import { InjectionToken, Optional, Inject, Injectable, SkipSelf, NgModule, APP_INITIALIZER, makeEnvironmentProviders, HostListener, Input, Directive, EventEmitter, inject, DestroyRef, Output, ViewChild, ChangeDetectionStrategy, Component, ViewEncapsulation, HostBinding, TemplateRef, ElementRef, ViewChildren, ContentChild, ContentChildren, Host, ViewContainerRef } from '@angular/core';
 import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpParams, HttpClient, provideHttpClient, withInterceptorsFromDi, HTTP_INTERCEPTORS, HttpEventType } from '@angular/common/http';
+import { HttpHeaders, HttpParams, HttpClient, provideHttpClient, HTTP_INTERCEPTORS, withInterceptorsFromDi, HttpEventType } from '@angular/common/http';
 import * as i1$1 from '@ngx-translate/core';
-import { TranslateCompiler, TranslateLoader, TranslateDefaultParser, TranslateParser, TranslateService, provideTranslateService, TranslateDirective, TranslatePipe, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoader, TranslateCompiler, TranslateDefaultParser, TranslateParser, TranslateService, provideTranslateService, TranslateDirective, TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { map as map$1, shareReplay as shareReplay$1, catchError, tap as tap$1, filter as filter$1, startWith as startWith$1, withLatestFrom, switchMap as switchMap$1, take, mergeMap, delay, distinctUntilChanged, debounceTime, finalize, throttleTime, first as first$1, pairwise as pairwise$1, share, defaultIfEmpty, toArray } from 'rxjs/operators';
@@ -20,45 +20,48 @@ import { lt, valid, coerce, satisfies, ltr } from 'semver';
 import chroma from 'chroma-js';
 import * as i1$2 from '@angular/common';
 import { CommonModule, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgClass, NgTemplateOutlet, DatePipe } from '@angular/common';
+import { formatDistance } from 'date-fns/formatDistance';
 import * as i1$d from '@angular/router';
 import { Scroll, NavigationEnd, RouteReuseStrategy } from '@angular/router';
-import { WmtsEndpoint, WmsEndpoint, WfsEndpoint, OgcApiEndpoint, sharedFetch, useCache, TmsEndpoint } from '@camptocamp/ogc-client';
+import { WmtsEndpoint, WmsEndpoint, WfsEndpoint, OgcApiEndpoint, sharedFetch, useCache, StacEndpoint, TmsEndpoint } from '@camptocamp/ogc-client';
 import { getLength } from 'ol/sphere';
 import { LineString, Polygon } from 'ol/geom';
 import * as i1$3 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, select, StoreModule, Store } from '@ngrx/store';
 import { queryDataGouvFr, queryGeonames, queryGeoadmin } from '@geospatial-sdk/geocoding';
-import { FeaturesClickEventType, FeaturesHoverEventType, MapClickEventType, SourceLoadErrorType, computeMapContextDiff, createViewFromLayer } from '@geospatial-sdk/core';
-import { listen, createMapFromContext, applyContextDiffToMap } from '@geospatial-sdk/openlayers';
-import { provideIcons, provideNgIconsConfig, NgIconComponent, NgIcon } from '@ng-icons/core';
-import { matSwipeOutline, matErrorOutlineOutline, matComputerOutline, matLocationSearchingOutline, matCallOutline, matLocationOnOutline, matMailOutline as matMailOutline$1, matInfoOutline, matWarningAmberOutline, matCloseOutline, matSendOutline, matMapOutline, matCloudDownloadOutline, matHomeWorkOutline, matLayersOutline, matAddCircleOutlineOutline, matMoreHorizOutline } from '@ng-icons/material-icons/outline';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FeaturesClickEventType, FeaturesHoverEventType, MapClickEventType, MapExtentChangeEventType, SourceLoadErrorType, computeMapContextDiff, createViewFromLayer } from '@geospatial-sdk/core';
+import { createMapFromContext, applyContextDiffToMap, listen } from '@geospatial-sdk/openlayers';
+import { NgIconComponent, provideIcons, provideNgIconsConfig, NgIcon } from '@ng-icons/core';
+import { matSwipeOutline, matErrorOutlineOutline, matComputerOutline, matLocationSearchingOutline, matLocationOnOutline, matCallOutline, matMailOutline as matMailOutline$1, matInfoOutline, matCloseOutline, matWarningAmberOutline, matSendOutline, matHomeWorkOutline, matCloudDownloadOutline, matMapOutline, matAddCircleOutlineOutline, matLayersOutline, matDeleteOutline, matMoreHorizOutline } from '@ng-icons/material-icons/outline';
+import { transformExtent } from 'ol/proj';
 import { createLegendFromLayer } from '@geospatial-sdk/legend';
 import { defaults, DragPan, MouseWheelZoom } from 'ol/interaction';
 import { mouseOnly, noModifierKeys, primaryAction, platformModifierKeyOnly } from 'ol/events/condition';
 import { extend } from 'ol/extent';
 import * as TOML from '@ltd/j-toml';
-import { Style, Fill, Stroke, Circle } from 'ol/style';
+import { Style, Stroke, Fill, Circle } from 'ol/style';
 import CircleStyle from 'ol/style/Circle';
 import EmblaCarousel from 'embla-carousel';
-import { iconoirNavArrowRight, iconoirNavArrowLeft, iconoirSearch, iconoirLongArrowDownLeft, iconoirCalendar, iconoirLink, iconoirArrowUp, iconoirCloudUpload, iconoirFramePlusIn, iconoirReduce, iconoirNavArrowDown, iconoirNavArrowUp, iconoirExpand, iconoirSettings, iconoirDownload, iconoirMediaImage, iconoirMediaImageXmark, iconoirBin, iconoirPlus, iconoirAppleWallet, iconoirDatabase, iconoirCode, iconoirAppWindow, iconoirBank, iconoirList, iconoirUser, iconoirLock, iconoirTranslate, iconoirImport, iconoirLightBulbOn, iconoirArrowLeft, iconoirAttachment, iconoirRefresh, iconoirCheckCircle, iconoirCircle, iconoirSystemShut, iconoirBadgeCheck } from '@ng-icons/iconoir';
+import { iconoirNavArrowLeft, iconoirNavArrowRight, iconoirLongArrowDownLeft, iconoirSearch, iconoirCalendar, iconoirArrowUp, iconoirLink, iconoirFramePlusIn, iconoirCloudUpload, iconoirReduce, iconoirNavArrowUp, iconoirNavArrowDown, iconoirExpand, iconoirSettings, iconoirDownload, iconoirPlus, iconoirBin, iconoirMediaImageXmark, iconoirMediaImage, iconoirAppWindow, iconoirCode, iconoirDatabase, iconoirAppleWallet, iconoirBank, iconoirList, iconoirTranslate, iconoirLock, iconoirUser, iconoirArrowLeft, iconoirLightBulbOn, iconoirImport, iconoirAttachment, iconoirRefresh, iconoirCircle, iconoirCheckCircle, iconoirBadgeCheck, iconoirSystemShut } from '@ng-icons/iconoir';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1$8 from '@angular/cdk/overlay';
-import { CdkConnectedOverlay, OverlayModule, CdkOverlayOrigin } from '@angular/cdk/overlay';
-import * as i2$1 from '@angular/forms';
+import { OverlayModule, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import * as i2 from '@angular/forms';
 import { UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$5 from '@angular/material/autocomplete';
-import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatAutocompleteModule, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import tippy from 'tippy.js';
 import * as i1$4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { matClose, matContentCopy, matExpandMore, matExpandLess, matSearch, matStar, matStarBorder, matAdd, matRemove, matChevronLeft, matChevronRight, matArrowBackIos, matArrowForwardIos, matFace, matQuestionMark, matMoodBad, matZoomOutMap, matOpenInNew, matMailOutline, matPersonOutline, matCheck, matWarningAmber, matCheckCircleOutline, matWarning, matMoreVert } from '@ng-icons/material-icons/baseline';
-import * as i2 from '@angular/material/core';
-import { MatNativeDateModule } from '@angular/material/core';
-import * as i1$6 from '@angular/material/checkbox';
+import { matClose, matContentCopy, matExpandLess, matExpandMore, matSearch, matStarBorder, matStar, matRemove, matAdd, matChevronRight, matChevronLeft, matArrowForwardIos, matArrowBackIos, matMoodBad, matQuestionMark, matFace, matZoomOutMap, matOpenInNew, matPersonOutline, matMailOutline, matWarningAmber, matCheck, matCheckCircleOutline, matWarning, matMoreVert } from '@ng-icons/material-icons/baseline';
+import * as i1$6 from '@angular/material/core';
+import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
+import * as i1$7 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2$2 from '@angular/material/tooltip';
+import * as i2$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$7 from '@angular/material/datepicker';
+import * as i2$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$9 from 'ngx-dropzone';
 import { NgxDropzoneModule } from 'ngx-dropzone';
@@ -74,12 +77,10 @@ import { createEffect, ofType, EffectsModule, Actions } from '@ngrx/effects';
 import { valid as valid$1 } from 'geojson-validation';
 import * as basicLightbox from 'basiclightbox';
 import { marked } from 'marked';
-import { formatDistance } from 'date-fns/formatDistance';
-import { enUS, sk as sk$1, pt as pt$1, nl as nl$1, it as it$1, es as es$1, de as de$1, fr as fr$1 } from 'date-fns/locale';
 import * as i2$3 from '@angular/cdk/scrolling';
-import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
 import Duration from 'duration-relativetimeformat';
-import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { trigger, transition, animate, keyframes, style } from '@angular/animations';
 import * as Papa from 'papaparse';
@@ -88,11 +89,11 @@ import { parseISO } from 'date-fns/parseISO';
 import { WFS, GeoJSON as GeoJSON$1 } from 'ol/format';
 import { Chart, BarController, BarElement, CategoryScale, LinearScale, LineController, LineElement, PointElement, PieController, ArcElement, ScatterController, Tooltip, Colors, Legend } from 'chart.js';
 import * as i3 from '@angular/material/sort';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatSortModule, MatSort } from '@angular/material/sort';
 import * as i2$5 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i4 from '@angular/material/paginator';
-import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatPaginatorIntl, MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
 import { LetDirective } from '@ngrx/component';
 import axios from 'axios';
 import * as i1$e from '@angular/platform-browser';
@@ -103,7 +104,7 @@ import { MatIconModule } from '@angular/material/icon';
 import * as i3$1 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
 import * as i3$2 from '@ngrx/router-store';
-import { getRouterSelectors, routerReducer, StoreRouterConnectingModule, FullRouterStateSerializer } from '@ngrx/router-store';
+import { getRouterSelectors, StoreRouterConnectingModule, routerReducer, FullRouterStateSerializer } from '@ngrx/router-store';
 import { navigation } from '@ngrx/router-store/data-persistence';
 
 class MetadataMapperContext {
@@ -1580,7 +1581,8 @@ function readDefaultLanguage$2(rootEl) {
     return pipe(findChildElement('gmd:language', false), findChildElement('lan:LanguageCode'), readAttribute('codeListValue'), map((lang) => (lang ? toLang2(lang.toLowerCase()) : null)))(rootEl);
 }
 function readResourceIdentifier(rootEl) {
-    return pipe(findIdentification(), findNestedElement('gmd:citation', 'gmd:CI_Citation', 'gmd:identifier', 'gmd:MD_Identifier', 'gmd:code'), extractCharacterString())(rootEl);
+    const code = pipe(findIdentification(), findNestedElement('gmd:citation', 'gmd:CI_Citation', 'gmd:identifier', 'gmd:MD_Identifier', 'gmd:code'), extractCharacterString())(rootEl);
+    return code ? [{ code }] : [];
 }
 
 function writeLocalizedElement(writeFn, text, translations, defaultLanguage) {
@@ -2086,8 +2088,9 @@ function writeDefaultLanguage$1(record, rootEl) {
     return pipe(findNestedChildOrCreate('gmd:language', 'gmd:LanguageCode'), writeAttribute('codeList', 'http://www.loc.gov/standards/iso639-2/'), writeAttribute('codeListValue', lang3))(rootEl);
 }
 function writeResourceIdentifier(record, rootEl) {
-    pipe(findOrCreateIdentification(), findNestedChildOrCreate('gmd:citation', 'gmd:CI_Citation'), removeChildrenByName('gmd:identifier'), record.resourceIdentifier
-        ? pipe(createNestedChild('gmd:identifier', 'gmd:MD_Identifier', 'gmd:code'), writeCharacterString(record.resourceIdentifier))
+    const firstIdentifier = record.resourceIdentifiers?.[0]?.code;
+    pipe(findOrCreateIdentification(), findNestedChildOrCreate('gmd:citation', 'gmd:CI_Citation'), removeChildrenByName('gmd:identifier'), firstIdentifier
+        ? pipe(createNestedChild('gmd:identifier', 'gmd:MD_Identifier', 'gmd:code'), writeCharacterString(firstIdentifier))
         : noop)(rootEl);
 }
 
@@ -2101,7 +2104,7 @@ class Iso19139Converter extends BaseConverter {
             recordUpdated: readRecordUpdated$2,
             recordCreated: () => undefined, // not supported in ISO19139
             recordPublished: () => undefined, // not supported in ISO19139
-            resourceIdentifier: readResourceIdentifier,
+            resourceIdentifiers: readResourceIdentifier,
             resourceUpdated: readResourceUpdated$1,
             resourceCreated: readResourceCreated$1,
             resourcePublished: readResourcePublished,
@@ -2138,7 +2141,7 @@ class Iso19139Converter extends BaseConverter {
             recordUpdated: writeRecordUpdated$1,
             recordCreated: () => undefined, // not supported in ISO19139
             recordPublished: () => undefined, // not supported in ISO19139
-            resourceIdentifier: writeResourceIdentifier,
+            resourceIdentifiers: writeResourceIdentifier,
             resourceUpdated: writeResourceUpdated$1,
             resourceCreated: writeResourceCreated$1,
             resourcePublished: writeResourcePublished$1,
@@ -2239,11 +2242,11 @@ class Iso19139Converter extends BaseConverter {
         const onlineResources = this.readers['onlineResources'](rootEl, tr);
         const otherLanguages = this.readers['otherLanguages'](rootEl, tr);
         const defaultLanguage = this.readers['defaultLanguage'](rootEl, tr);
-        const resourceIdentifier = this.readers['resourceIdentifier'](rootEl, tr);
+        const resourceIdentifiers = this.readers['resourceIdentifiers'](rootEl, tr);
         const spatialExtents = this.readers['spatialExtents'](rootEl, tr);
         return {
             uniqueIdentifier,
-            ...(resourceIdentifier && { resourceIdentifier }),
+            ...(resourceIdentifiers?.length > 0 && { resourceIdentifiers }),
             kind,
             otherLanguages,
             defaultLanguage,
@@ -2371,8 +2374,8 @@ class Iso19139Converter extends BaseConverter {
             this.writers['otherConstraints'](record, rootEl);
         fieldChanged('onlineResources') &&
             this.writers['onlineResources'](record, rootEl);
-        fieldChanged('resourceIdentifier') &&
-            this.writers['resourceIdentifier'](record, rootEl);
+        fieldChanged('resourceIdentifiers') &&
+            this.writers['resourceIdentifiers'](record, rootEl);
         if (record.kind === 'dataset') {
             fieldChanged('status') && this.writers['status'](record, rootEl);
             fieldChanged('updateFrequency') &&
@@ -3319,7 +3322,7 @@ class DcatApConverter extends BaseConverter {
             spatialExtents: readSpatialExtents,
             keywords: readKeywords,
             topics: readTopics,
-            resourceIdentifier: () => undefined,
+            resourceIdentifiers: () => undefined,
             recordUpdated: readRecordUpdated,
             recordCreated: readRecordCreated,
             resourceUpdated: readResourceUpdated,
@@ -3355,7 +3358,7 @@ class DcatApConverter extends BaseConverter {
             recordUpdated: () => undefined,
             recordCreated: () => undefined,
             recordPublished: () => undefined,
-            resourceIdentifier: () => undefined,
+            resourceIdentifiers: () => undefined,
             resourceUpdated: () => undefined,
             resourceCreated: () => undefined,
             resourcePublished: () => undefined,
@@ -18809,6 +18812,9 @@ var de = {
 	"dataset.error.restrictedAccess": "",
 	"dataset.error.unknown": "Die Daten können nicht angezeigt werden: \"{ info }\"",
 	"dataset.error.unsupportedType": "Der folgende Inhaltstyp wird nicht unterstützt: \"{ info }\"",
+	"daterange.filter.from": "",
+	"daterange.filter.period": "",
+	"daterange.filter.to": "",
 	"domain.contact.role.author": "",
 	"domain.contact.role.collaborator": "",
 	"domain.contact.role.contributor": "",
@@ -19144,6 +19150,7 @@ var de = {
 	"pagination.nextPage": "Nächste Seite",
 	"pagination.page": "Seite",
 	"pagination.pageOf": "von",
+	"pagination.previousPage": "Vorherige Seite",
 	"record.action.delete": "Löschen",
 	"record.action.download": "Herunterladen",
 	"record.action.duplicate": "",
@@ -19208,6 +19215,8 @@ var de = {
 	"record.metadata.contact": "Kontakt",
 	"record.metadata.creation": "Erstellungsdatum",
 	"record.metadata.details": "Über die Daten",
+	"record.metadata.doi.copy": "",
+	"record.metadata.doi.open": "",
 	"record.metadata.download": "Downloads",
 	"record.metadata.feature.catalog": "",
 	"record.metadata.formats": "Formate",
@@ -19256,9 +19265,9 @@ var de = {
 	"record.metadata.quality.updateFrequency.failed": "Aktualisierungsfrequenz nicht angegeben",
 	"record.metadata.quality.updateFrequency.success": "Aktualisierungsfrequenz angegeben",
 	"record.metadata.related": "Entdecken Sie den Katalog",
-	"record.metadata.resourceCreated": "Erstellt am {date}",
-	"record.metadata.resourcePublished": "Veröffentlicht am {date}",
-	"record.metadata.resourceUpdated": "Zuletzt aktualisiert am {date}",
+	"record.metadata.resourceCreated": "Erstellt",
+	"record.metadata.resourcePublished": "Veröffentlicht",
+	"record.metadata.resourceUpdated": "Zuletzt aktualisiert",
 	"record.metadata.ressources.and.links": "Ressourcen und Links",
 	"record.metadata.sheet": "Weitere Informationen verfügbar unter:",
 	"record.metadata.status": "Status",
@@ -19271,8 +19280,9 @@ var de = {
 	"record.metadata.title": "Titel",
 	"record.metadata.topics": "Kategorien",
 	"record.metadata.uniqueId": "Eindeutige Kennung",
+	"record.metadata.update": "Aktualisierungsdatum",
 	"record.metadata.updateFrequency": "Aktualisierungsfrequenz der Daten",
-	"record.metadata.updatedOn": "Geändert am",
+	"record.metadata.updatedOn": "Informationen geändert",
 	"record.metadata.usage": "Nutzung und Einschränkungen",
 	"record.metadata.userFeedbacks": "",
 	"record.metadata.userFeedbacks.anonymousUser": "",
@@ -19379,6 +19389,9 @@ var de = {
 	"service.metadata.spatialExtent": "",
 	"share.tab.permalink": "Teilen",
 	"share.tab.webComponent": "Integrieren",
+	"stac.filter.enable": "",
+	"stac.filter.reset": "",
+	"stac.results.noResults": "Ihre Suchfilter lieferten keine Ergebnisse",
 	"table.loading.data": "Daten werden geladen...",
 	"table.object.count": "Objekte in diesem Datensatz",
 	"table.paginator.firstPage": "Erste Seite",
@@ -19467,6 +19480,9 @@ var en = {
 	"dataset.error.restrictedAccess": "Access to this resource is restricted",
 	"dataset.error.unknown": "The data cannot be displayed: \"{ info }\"",
 	"dataset.error.unsupportedType": "The following content type is unsupported: \"{ info }\"",
+	"daterange.filter.from": "From",
+	"daterange.filter.period": "Period",
+	"daterange.filter.to": "To",
 	"domain.contact.role.author": "Author",
 	"domain.contact.role.collaborator": "Collaborator",
 	"domain.contact.role.contributor": "Contributor",
@@ -19802,6 +19818,7 @@ var en = {
 	"pagination.nextPage": "Next page",
 	"pagination.page": "Page",
 	"pagination.pageOf": "of",
+	"pagination.previousPage": "Previous page",
 	"record.action.delete": "Delete",
 	"record.action.download": "Download",
 	"record.action.duplicate": "Duplicate",
@@ -19866,6 +19883,8 @@ var en = {
 	"record.metadata.contact": "Contact",
 	"record.metadata.creation": "Date of creation",
 	"record.metadata.details": "About the data",
+	"record.metadata.doi.copy": "Copy DOI",
+	"record.metadata.doi.open": "Open DOI link",
 	"record.metadata.download": "Downloads",
 	"record.metadata.feature.catalog": "Feature catalog",
 	"record.metadata.formats": "Formats",
@@ -19914,9 +19933,9 @@ var en = {
 	"record.metadata.quality.updateFrequency.failed": "Update frequency is not specified",
 	"record.metadata.quality.updateFrequency.success": "Update frequency is specified",
 	"record.metadata.related": "Explore the catalog",
-	"record.metadata.resourceCreated": "Created on {date}",
-	"record.metadata.resourcePublished": "Published on {date}",
-	"record.metadata.resourceUpdated": "Last updated on {date}",
+	"record.metadata.resourceCreated": "Created",
+	"record.metadata.resourcePublished": "Published",
+	"record.metadata.resourceUpdated": "Last updated",
 	"record.metadata.ressources.and.links": "Resources and links",
 	"record.metadata.sheet": "Original metadata",
 	"record.metadata.status": "Status",
@@ -19929,8 +19948,9 @@ var en = {
 	"record.metadata.title": "Title",
 	"record.metadata.topics": "Categories",
 	"record.metadata.uniqueId": "Unique Identifier",
+	"record.metadata.update": "Date of update",
 	"record.metadata.updateFrequency": "Data Update Frequency",
-	"record.metadata.updatedOn": "Updated on",
+	"record.metadata.updatedOn": "Metadata modified",
 	"record.metadata.usage": "License and Conditions",
 	"record.metadata.userFeedbacks": "Questions / Answers",
 	"record.metadata.userFeedbacks.anonymousUser": "In order to leave a comment, please log in.",
@@ -20037,6 +20057,9 @@ var en = {
 	"service.metadata.spatialExtent": "Spatial extent",
 	"share.tab.permalink": "Share",
 	"share.tab.webComponent": "Integrate",
+	"stac.filter.enable": "Enable dynamic filter on spatial extent",
+	"stac.filter.reset": "Reset filters",
+	"stac.results.noResults": "Your search filters did not match any items",
 	"table.loading.data": "Loading data...",
 	"table.object.count": "Objects in this dataset",
 	"table.paginator.firstPage": "First page",
@@ -20125,6 +20148,9 @@ var es = {
 	"dataset.error.restrictedAccess": "",
 	"dataset.error.unknown": "",
 	"dataset.error.unsupportedType": "",
+	"daterange.filter.from": "",
+	"daterange.filter.period": "",
+	"daterange.filter.to": "",
 	"domain.contact.role.author": "",
 	"domain.contact.role.collaborator": "",
 	"domain.contact.role.contributor": "",
@@ -20460,6 +20486,7 @@ var es = {
 	"pagination.nextPage": "",
 	"pagination.page": "",
 	"pagination.pageOf": "",
+	"pagination.previousPage": "",
 	"record.action.delete": "",
 	"record.action.download": "",
 	"record.action.duplicate": "",
@@ -20524,6 +20551,8 @@ var es = {
 	"record.metadata.contact": "",
 	"record.metadata.creation": "",
 	"record.metadata.details": "",
+	"record.metadata.doi.copy": "",
+	"record.metadata.doi.open": "",
 	"record.metadata.download": "",
 	"record.metadata.feature.catalog": "",
 	"record.metadata.formats": "",
@@ -20587,6 +20616,7 @@ var es = {
 	"record.metadata.title": "",
 	"record.metadata.topics": "",
 	"record.metadata.uniqueId": "",
+	"record.metadata.update": "",
 	"record.metadata.updateFrequency": "",
 	"record.metadata.updatedOn": "",
 	"record.metadata.usage": "",
@@ -20695,6 +20725,9 @@ var es = {
 	"service.metadata.spatialExtent": "",
 	"share.tab.permalink": "",
 	"share.tab.webComponent": "",
+	"stac.filter.enable": "",
+	"stac.filter.reset": "",
+	"stac.results.noResults": "",
 	"table.loading.data": "",
 	"table.object.count": "",
 	"table.paginator.firstPage": "Primera página",
@@ -20783,6 +20816,9 @@ var fr = {
 	"dataset.error.restrictedAccess": "L’accès à cette ressource est restreint",
 	"dataset.error.unknown": "Les données ne peuvent être affichées: \"{ info }\"",
 	"dataset.error.unsupportedType": "Le type de contenu suivant n'est pas pris en charge: \"{ info }\"",
+	"daterange.filter.from": "Du",
+	"daterange.filter.period": "Choix de la période",
+	"daterange.filter.to": "Au",
 	"domain.contact.role.author": "Auteur",
 	"domain.contact.role.collaborator": "Collaborateur",
 	"domain.contact.role.contributor": "Contributeur",
@@ -21118,6 +21154,7 @@ var fr = {
 	"pagination.nextPage": "Page suivante",
 	"pagination.page": "Page",
 	"pagination.pageOf": "sur",
+	"pagination.previousPage": "Page précédente",
 	"record.action.delete": "Supprimer",
 	"record.action.download": "Télécharger",
 	"record.action.duplicate": "Dupliquer",
@@ -21182,6 +21219,8 @@ var fr = {
 	"record.metadata.contact": "Contact",
 	"record.metadata.creation": "Date de création",
 	"record.metadata.details": "À propos de la donnée",
+	"record.metadata.doi.copy": "Copier le DOI",
+	"record.metadata.doi.open": "Ouvrir le lien DOI",
 	"record.metadata.download": "Téléchargements",
 	"record.metadata.feature.catalog": "Catalogue d'attributs",
 	"record.metadata.formats": "Formats",
@@ -21230,9 +21269,9 @@ var fr = {
 	"record.metadata.quality.updateFrequency.failed": "La fréquence de mise à jour n'est pas renseignée",
 	"record.metadata.quality.updateFrequency.success": "La fréquence de mise à jour est renseignée",
 	"record.metadata.related": "Explorez le catalogue",
-	"record.metadata.resourceCreated": "Créé le {date}",
-	"record.metadata.resourcePublished": "Publié le {date}",
-	"record.metadata.resourceUpdated": "Mis à jour le {date}",
+	"record.metadata.resourceCreated": "Créé",
+	"record.metadata.resourcePublished": "Publié",
+	"record.metadata.resourceUpdated": "Mis à jour",
 	"record.metadata.ressources.and.links": "Ressources et liens",
 	"record.metadata.sheet": "Fiche de métadonnées d'origine",
 	"record.metadata.status": "Statut",
@@ -21245,8 +21284,9 @@ var fr = {
 	"record.metadata.title": "Intitulé",
 	"record.metadata.topics": "Catégories",
 	"record.metadata.uniqueId": "Identificateur de ressource unique",
+	"record.metadata.update": "Date de mise à jour",
 	"record.metadata.updateFrequency": "Fréquence de mise à jour des données",
-	"record.metadata.updatedOn": "Modifié le",
+	"record.metadata.updatedOn": "Fiche de métadonnées modifiée",
 	"record.metadata.usage": "Licences et conditions d'utilisation",
 	"record.metadata.userFeedbacks": "Questions / Réponses",
 	"record.metadata.userFeedbacks.anonymousUser": "Pour rédiger un commentaire, veuillez vous identifier.",
@@ -21353,6 +21393,9 @@ var fr = {
 	"service.metadata.spatialExtent": "Etendue spatiale",
 	"share.tab.permalink": "Partager",
 	"share.tab.webComponent": "Intégrer",
+	"stac.filter.enable": "Activer le filtre dynamique sur l’emprise spatiale",
+	"stac.filter.reset": "Réinitialiser les filtres",
+	"stac.results.noResults": "Vos filtres ne permettent pas d’afficher de résultats",
 	"table.loading.data": "Chargement des données...",
 	"table.object.count": "enregistrements dans ce jeu de données",
 	"table.paginator.firstPage": "Première page",
@@ -21441,6 +21484,9 @@ var it = {
 	"dataset.error.restrictedAccess": "L'accesso a questa risorsa è limitato",
 	"dataset.error.unknown": "Impossibile visualizzare i dati: \"{info}\"",
 	"dataset.error.unsupportedType": "Il seguente tipo di contenuto non è supportato: \"{info}\"",
+	"daterange.filter.from": "",
+	"daterange.filter.period": "",
+	"daterange.filter.to": "",
 	"domain.contact.role.author": "Autore",
 	"domain.contact.role.collaborator": "Collaboratore",
 	"domain.contact.role.contributor": "Collaboratore",
@@ -21776,6 +21822,7 @@ var it = {
 	"pagination.nextPage": "Pagina successiva",
 	"pagination.page": "pagina",
 	"pagination.pageOf": "di",
+	"pagination.previousPage": "",
 	"record.action.delete": "Elimina",
 	"record.action.download": "Scarica",
 	"record.action.duplicate": "Duplicato",
@@ -21840,6 +21887,8 @@ var it = {
 	"record.metadata.contact": "Contatto",
 	"record.metadata.creation": "Data di creazione",
 	"record.metadata.details": "A proposito del dati",
+	"record.metadata.doi.copy": "",
+	"record.metadata.doi.open": "",
 	"record.metadata.download": "Download",
 	"record.metadata.feature.catalog": "Catalogo dei oggetti",
 	"record.metadata.formats": "Formati",
@@ -21888,11 +21937,11 @@ var it = {
 	"record.metadata.quality.updateFrequency.failed": "La frequenza di aggiornamento non è specificata",
 	"record.metadata.quality.updateFrequency.success": "La frequenza di aggiornamento è specificata",
 	"record.metadata.related": "Vedi anche",
-	"record.metadata.resourceCreated": "Creato il {date}",
-	"record.metadata.resourcePublished": "Pubblicato il {date}",
-	"record.metadata.resourceUpdated": "Ultimo aggiornamento il {date}",
+	"record.metadata.resourceCreated": "Creato",
+	"record.metadata.resourcePublished": "Pubblicato",
+	"record.metadata.resourceUpdated": "Ultimo aggiornamento",
 	"record.metadata.ressources.and.links": "Risorse e collegamenti",
-	"record.metadata.sheet": "Origine del metadata",
+	"record.metadata.sheet": "Origine dei metadati",
 	"record.metadata.status": "Stato",
 	"record.metadata.status.notPublished": "Non pubblicato",
 	"record.metadata.status.published": "Pubblicato",
@@ -21903,8 +21952,9 @@ var it = {
 	"record.metadata.title": "Titolo",
 	"record.metadata.topics": "Categorie",
 	"record.metadata.uniqueId": "Identificatore unico di risorsa",
+	"record.metadata.update": "Data di aggiornamento",
 	"record.metadata.updateFrequency": "Frequenza di aggiornamento dei dati",
-	"record.metadata.updatedOn": "Modificato il",
+	"record.metadata.updatedOn": "Metadati modificati",
 	"record.metadata.usage": "Licenze e limiti di utilizzo",
 	"record.metadata.userFeedbacks": "Domande / Risposte",
 	"record.metadata.userFeedbacks.anonymousUser": "Per pubblicare un commento, effettua il login.",
@@ -22011,6 +22061,9 @@ var it = {
 	"service.metadata.spatialExtent": "Estensione spaziale",
 	"share.tab.permalink": "Condividere",
 	"share.tab.webComponent": "Incorporare",
+	"stac.filter.enable": "",
+	"stac.filter.reset": "",
+	"stac.results.noResults": "",
 	"table.loading.data": "Caricamento dei dati...",
 	"table.object.count": "record in questi dati",
 	"table.paginator.firstPage": "Prima pagina",
@@ -22099,6 +22152,9 @@ var nl = {
 	"dataset.error.restrictedAccess": "",
 	"dataset.error.unknown": "",
 	"dataset.error.unsupportedType": "",
+	"daterange.filter.from": "",
+	"daterange.filter.period": "",
+	"daterange.filter.to": "",
 	"domain.contact.role.author": "",
 	"domain.contact.role.collaborator": "",
 	"domain.contact.role.contributor": "",
@@ -22434,6 +22490,7 @@ var nl = {
 	"pagination.nextPage": "",
 	"pagination.page": "",
 	"pagination.pageOf": "",
+	"pagination.previousPage": "",
 	"record.action.delete": "",
 	"record.action.download": "",
 	"record.action.duplicate": "",
@@ -22498,6 +22555,8 @@ var nl = {
 	"record.metadata.contact": "",
 	"record.metadata.creation": "",
 	"record.metadata.details": "",
+	"record.metadata.doi.copy": "",
+	"record.metadata.doi.open": "",
 	"record.metadata.download": "",
 	"record.metadata.feature.catalog": "",
 	"record.metadata.formats": "",
@@ -22561,6 +22620,7 @@ var nl = {
 	"record.metadata.title": "",
 	"record.metadata.topics": "",
 	"record.metadata.uniqueId": "",
+	"record.metadata.update": "",
 	"record.metadata.updateFrequency": "",
 	"record.metadata.updatedOn": "",
 	"record.metadata.usage": "",
@@ -22669,6 +22729,9 @@ var nl = {
 	"service.metadata.spatialExtent": "",
 	"share.tab.permalink": "",
 	"share.tab.webComponent": "",
+	"stac.filter.enable": "",
+	"stac.filter.reset": "",
+	"stac.results.noResults": "",
 	"table.loading.data": "",
 	"table.object.count": "",
 	"table.paginator.firstPage": "",
@@ -22757,6 +22820,9 @@ var pt = {
 	"dataset.error.restrictedAccess": "",
 	"dataset.error.unknown": "",
 	"dataset.error.unsupportedType": "",
+	"daterange.filter.from": "",
+	"daterange.filter.period": "",
+	"daterange.filter.to": "",
 	"domain.contact.role.author": "",
 	"domain.contact.role.collaborator": "",
 	"domain.contact.role.contributor": "",
@@ -23092,6 +23158,7 @@ var pt = {
 	"pagination.nextPage": "",
 	"pagination.page": "",
 	"pagination.pageOf": "",
+	"pagination.previousPage": "",
 	"record.action.delete": "",
 	"record.action.download": "",
 	"record.action.duplicate": "",
@@ -23156,6 +23223,8 @@ var pt = {
 	"record.metadata.contact": "",
 	"record.metadata.creation": "",
 	"record.metadata.details": "",
+	"record.metadata.doi.copy": "",
+	"record.metadata.doi.open": "",
 	"record.metadata.download": "",
 	"record.metadata.feature.catalog": "",
 	"record.metadata.formats": "",
@@ -23219,6 +23288,7 @@ var pt = {
 	"record.metadata.title": "",
 	"record.metadata.topics": "",
 	"record.metadata.uniqueId": "",
+	"record.metadata.update": "",
 	"record.metadata.updateFrequency": "",
 	"record.metadata.updatedOn": "",
 	"record.metadata.usage": "",
@@ -23327,6 +23397,9 @@ var pt = {
 	"service.metadata.spatialExtent": "",
 	"share.tab.permalink": "",
 	"share.tab.webComponent": "",
+	"stac.filter.enable": "",
+	"stac.filter.reset": "",
+	"stac.results.noResults": "",
 	"table.loading.data": "",
 	"table.object.count": "",
 	"table.paginator.firstPage": "",
@@ -23415,6 +23488,9 @@ var sk = {
 	"dataset.error.restrictedAccess": "",
 	"dataset.error.unknown": "Dáta nie je možné zobraziť: \"{ info }\"",
 	"dataset.error.unsupportedType": "Nepodporovaný typ obsahu: \"{ info }\"",
+	"daterange.filter.from": "",
+	"daterange.filter.period": "",
+	"daterange.filter.to": "",
 	"domain.contact.role.author": "",
 	"domain.contact.role.collaborator": "",
 	"domain.contact.role.contributor": "",
@@ -23750,6 +23826,7 @@ var sk = {
 	"pagination.nextPage": "Ďalšia stránka",
 	"pagination.page": "strana",
 	"pagination.pageOf": "z",
+	"pagination.previousPage": "",
 	"record.action.delete": "",
 	"record.action.download": "Stiahnuť",
 	"record.action.duplicate": "",
@@ -23814,6 +23891,8 @@ var sk = {
 	"record.metadata.contact": "Kontakt",
 	"record.metadata.creation": "",
 	"record.metadata.details": "Detaily",
+	"record.metadata.doi.copy": "",
+	"record.metadata.doi.open": "",
 	"record.metadata.download": "Sťahovania",
 	"record.metadata.feature.catalog": "",
 	"record.metadata.formats": "Formáty",
@@ -23877,8 +23956,9 @@ var sk = {
 	"record.metadata.title": "Názov",
 	"record.metadata.topics": "",
 	"record.metadata.uniqueId": "Jedinečný identifikátor",
+	"record.metadata.update": "Dátum aktualizácie",
 	"record.metadata.updateFrequency": "Frekvencia aktualizácie metadát",
-	"record.metadata.updatedOn": "Posledná aktualizácia metadát",
+	"record.metadata.updatedOn": "Metadáta zmenené",
 	"record.metadata.usage": "Použitie a obmedzenia",
 	"record.metadata.userFeedbacks": "",
 	"record.metadata.userFeedbacks.anonymousUser": "",
@@ -23985,6 +24065,9 @@ var sk = {
 	"service.metadata.spatialExtent": "",
 	"share.tab.permalink": "Zdieľať",
 	"share.tab.webComponent": "Integrovať",
+	"stac.filter.enable": "",
+	"stac.filter.reset": "",
+	"stac.results.noResults": "",
 	"table.loading.data": "Načítanie údajov...",
 	"table.object.count": "objekty v tomto súbore údajov",
 	"table.paginator.firstPage": "",
@@ -24282,6 +24365,29 @@ class Gn4FieldMapper {
                     }),
                 };
             },
+            resourceIdentifier: (output, source) => {
+                const identifiers = getAsArray(selectField(source, 'resourceIdentifier'));
+                if (!identifiers.length)
+                    return output;
+                const mappedIdentifiers = identifiers
+                    .map((id) => {
+                    const code = selectField(id, 'code');
+                    const codeSpace = selectField(id, 'codeSpace');
+                    const link = selectField(id, 'link');
+                    return {
+                        code,
+                        ...(codeSpace && { codeSpace }),
+                        ...(link && { url: link }),
+                    };
+                })
+                    .filter((id) => id !== null);
+                if (!mappedIdentifiers.length)
+                    return output;
+                return {
+                    ...output,
+                    resourceIdentifiers: mappedIdentifiers,
+                };
+            },
         };
         this.genericField = (output) => output;
         this.constraintField = (type, output, constraintArray) => {
@@ -24514,7 +24620,6 @@ const ES_SOURCE_SUMMARY = [
     'resourceAbstractObject',
     'overview',
     'logo',
-    'codelist_status_text',
     'link',
     'linkProtocol',
     'contactForResource*.organisation*',
@@ -24699,9 +24804,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.Location }] });
 
+const DEFAULT_LANGUAGE = 'en';
 class DateService {
     constructor(translateService) {
         this.translateService = translateService;
+        this.dateLocales = import('./geonetwork-ui-date-locales-DhlIiWpT.mjs').then((obj) => obj.default);
     }
     getDateObject(date) {
         if (typeof date === 'string') {
@@ -24714,10 +24821,15 @@ class DateService {
         return date;
     }
     getLocaleAndDate(date) {
-        const locale = this.translateService.currentLang || 'en-US';
+        const locale = this.translateService.currentLang || DEFAULT_LANGUAGE;
         const dateObj = this.getDateObject(date);
         return { locale, dateObj };
     }
+    async getDateLocale() {
+        const lang = this.translateService.currentLang || DEFAULT_LANGUAGE;
+        const locales = await this.dateLocales;
+        return locales[lang];
+    }
     formatDate(date, options) {
         const { locale, dateObj } = this.getLocaleAndDate(date);
         return dateObj.toLocaleDateString(locale, options);
@@ -24726,6 +24838,15 @@ class DateService {
         const { locale, dateObj } = this.getLocaleAndDate(date);
         return dateObj.toLocaleString(locale, options);
     }
+    async formatRelativeDateTime(date) {
+        const dateObj = this.getDateObject(date);
+        const now = new Date();
+        const locale = await this.getDateLocale();
+        return formatDistance(dateObj, now, {
+            addSuffix: true,
+            locale: locale,
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateService, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateService, providedIn: 'root' }); }
 }
@@ -25516,13 +25637,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 var name = "geonetwork-ui";
-var version = "2.8.0-dev.1f70ea679";
+var version = "2.8.0-dev.27e1de86f";
 var engines = {
 	node: ">=20"
 };
 var main = "./index.ts";
 var type = "module";
-var exports = {
+var exports$1 = {
 	"./tailwind.base.config.js": "./tailwind.base.config.js",
 	"./style.css": "./style.css"
 };
@@ -25557,10 +25678,10 @@ var peerDependencies = {
 var dependencies = {
 	"@biesbjerg/ngx-translate-extract-marker": "~1.0.0",
 	"@camptocamp/ogc-client": "1.3.1-dev.edb3244",
-	"@geospatial-sdk/core": "0.0.5-dev.37",
-	"@geospatial-sdk/geocoding": "0.0.5-dev.37",
-	"@geospatial-sdk/legend": "0.0.5-dev.37",
-	"@geospatial-sdk/openlayers": "0.0.5-dev.37",
+	"@geospatial-sdk/core": "0.0.5-dev.40",
+	"@geospatial-sdk/geocoding": "0.0.5-dev.40",
+	"@geospatial-sdk/legend": "0.0.5-dev.40",
+	"@geospatial-sdk/openlayers": "0.0.5-dev.40",
 	"@ltd/j-toml": "~1.35.2",
 	"@messageformat/core": "^3.0.1",
 	"@ng-icons/core": "29.10.0",
@@ -25605,7 +25726,7 @@ var packageJson = {
 	engines: engines,
 	main: main,
 	type: type,
-	exports: exports,
+	exports: exports$1,
 	repository: repository,
 	peerDependencies: peerDependencies,
 	dependencies: dependencies
@@ -25718,6 +25839,35 @@ function updateLanguages(record, defaultLanguage, otherLanguages) {
     return updatedRecord;
 }
 
+class GnUiHumanizeDateDirective {
+    constructor(dateService, el, renderer) {
+        this.dateService = dateService;
+        this.el = el;
+        this.renderer = renderer;
+    }
+    async ngOnInit() {
+        await this.updateElement();
+    }
+    async updateElement() {
+        const dateValue = this.gnUiHumanizeDate;
+        const fullDateTime = this.dateService.formatDateTime(dateValue);
+        const relativeDate = await this.dateService.formatRelativeDateTime(dateValue);
+        this.renderer.setAttribute(this.el.nativeElement, 'title', fullDateTime);
+        this.renderer.setProperty(this.el.nativeElement, 'textContent', relativeDate);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GnUiHumanizeDateDirective, deps: [{ token: DateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GnUiHumanizeDateDirective, isStandalone: true, selector: "[gnUiHumanizeDate]", inputs: { gnUiHumanizeDate: "gnUiHumanizeDate" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GnUiHumanizeDateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gnUiHumanizeDate]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: DateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { gnUiHumanizeDate: [{
+                type: Input
+            }] } });
+
 class ElasticsearchService {
     // we're using getters in case the defined languages change over time
     get metadataLang() {
@@ -27608,8 +27758,8 @@ const DEFAULT_VIEW = {
 class MapContainerComponent {
     get featuresClick() {
         if (!this._featuresClick) {
-            this.openlayersMap.then((olMap) => {
-                listen(olMap, FeaturesClickEventType, ({ features }) => this._featuresClick.emit(features));
+            this.setupEventListener(FeaturesClickEventType, (event) => {
+                this._featuresClick.emit(event.features);
             });
             this._featuresClick = new EventEmitter();
         }
@@ -27617,8 +27767,8 @@ class MapContainerComponent {
     }
     get featuresHover() {
         if (!this._featuresHover) {
-            this.openlayersMap.then((olMap) => {
-                listen(olMap, FeaturesHoverEventType, ({ features }) => this._featuresHover.emit(features));
+            this.setupEventListener(FeaturesHoverEventType, (event) => {
+                this._featuresHover.emit(event.features);
             });
             this._featuresHover = new EventEmitter();
         }
@@ -27626,22 +27776,37 @@ class MapContainerComponent {
     }
     get mapClick() {
         if (!this._mapClick) {
-            this.openlayersMap.then((olMap) => {
-                listen(olMap, MapClickEventType, ({ coordinate }) => this._mapClick.emit(coordinate));
+            this.setupEventListener(MapClickEventType, (event) => {
+                this._mapClick.emit(event.coordinate);
             });
             this._mapClick = new EventEmitter();
         }
         return this._mapClick;
     }
+    get extentChange() {
+        if (!this._extentChange) {
+            this.setupEventListener(MapExtentChangeEventType, (event) => {
+                this._extentChange.emit(event.extent);
+            });
+            this._extentChange = new EventEmitter();
+        }
+        return this._extentChange;
+    }
     get sourceLoadError() {
         if (!this._sourceLoadError) {
-            this.openlayersMap.then((olMap) => {
-                listen(olMap, SourceLoadErrorType, (error) => this._sourceLoadError.emit(error));
+            this.setupEventListener(SourceLoadErrorType, (event) => {
+                this._sourceLoadError.emit(event);
             });
             this._sourceLoadError = new EventEmitter();
         }
         return this._sourceLoadError;
     }
+    get resolvedExtentChange() {
+        if (!this._resolvedExtentChange) {
+            this._resolvedExtentChange = new EventEmitter();
+        }
+        return this._resolvedExtentChange;
+    }
     constructor(doNotUseDefaultBasemap, basemapLayers, mapViewConstraints) {
         this.doNotUseDefaultBasemap = doNotUseDefaultBasemap;
         this.basemapLayers = basemapLayers;
@@ -27649,31 +27814,59 @@ class MapContainerComponent {
         this.openlayersMap = new Promise((resolve) => {
             this.olMapResolver = resolve;
         });
+        // These events only get registered on the map if they are used
+        this._featuresClick = null;
+        this._featuresHover = null;
+        this._mapClick = null;
+        this._extentChange = null;
+        this._sourceLoadError = null;
+        this._resolvedExtentChange = null;
+        this.destroyRef = inject(DestroyRef);
+    }
+    calculateCurrentMapExtent() {
+        const extent = this.olMap.getView().calculateExtent(this.olMap.getSize());
+        const reprojectedExtent = transformExtent(extent, this.olMap.getView().getProjection(), 'EPSG:4326');
+        return reprojectedExtent;
     }
     async ngAfterViewInit() {
         this.olMap = await createMapFromContext(this.processContext(this.context), this.container.nativeElement);
-        this.displayMessage$ = merge(fromEvent(this.olMap, 'mapmuted').pipe(map$1(() => true)), fromEvent(this.olMap, 'movestart').pipe(map$1(() => false)), fromEvent(this.olMap, 'singleclick').pipe(map$1(() => false))).pipe(switchMap$1((muted) => muted
-            ? timer(2000).pipe(map$1(() => false), startWith$1(true), delay(400))
-            : of(false)));
+        if (this._resolvedExtentChange) {
+            this._resolvedExtentChange.emit(this.calculateCurrentMapExtent());
+        }
+        this.setupDisplayMessageObservable();
         this.olMapResolver(this.olMap);
     }
     async ngOnChanges(changes) {
         if ('context' in changes && !changes['context'].isFirstChange()) {
             const diff = computeMapContextDiff(this.processContext(changes['context'].currentValue), this.processContext(changes['context'].previousValue));
             await applyContextDiffToMap(this.olMap, diff);
+            if (this._resolvedExtentChange && diff.viewChanges) {
+                this._resolvedExtentChange.emit(this.calculateCurrentMapExtent());
+            }
         }
     }
-    // This will apply basemap layers & view constraints
+    setupEventListener(eventType, handler) {
+        this.openlayersMap.then((olMap) => {
+            listen(olMap, eventType, handler);
+        });
+    }
+    setupDisplayMessageObservable() {
+        this.displayMessage$ = merge(fromEvent(this.olMap, 'mapmuted').pipe(map$1(() => true)), fromEvent(this.olMap, 'movestart').pipe(map$1(() => false)), fromEvent(this.olMap, 'singleclick').pipe(map$1(() => false))).pipe(switchMap$1((muted) => muted
+            ? timer(2000).pipe(map$1(() => false), startWith$1(true), delay(400))
+            : of(false)), takeUntilDestroyed(this.destroyRef));
+    }
     processContext(context) {
         const processed = context
             ? { ...context, view: context.view ?? DEFAULT_VIEW }
             : { layers: [], view: DEFAULT_VIEW };
+        // Prepend with default basemap and basemap layers
         if (this.basemapLayers.length) {
             processed.layers = [...this.basemapLayers, ...processed.layers];
         }
         if (!this.doNotUseDefaultBasemap) {
             processed.layers = [DEFAULT_BASEMAP_LAYER, ...processed.layers];
         }
+        // Apply view constraints
         if (this.mapViewConstraints.maxZoom) {
             processed.view = {
                 maxZoom: this.mapViewConstraints.maxZoom,
@@ -27687,27 +27880,32 @@ class MapContainerComponent {
             };
         }
         if (processed.view &&
-            !('zoom' in processed.view) &&
-            !('center' in processed.view)) {
-            if (this.mapViewConstraints.maxExtent) {
-                processed.view = {
-                    extent: this.mapViewConstraints.maxExtent,
-                    ...processed.view,
-                };
-            }
-            else {
-                processed.view = { ...DEFAULT_VIEW, ...processed.view };
-            }
+            'zoom' in processed.view &&
+            'center' in processed.view) {
+            return processed;
+        }
+        if (processed.view && 'extent' in processed.view) {
+            return processed;
+        }
+        // Ensure valid view
+        if (this.mapViewConstraints.maxExtent) {
+            processed.view = {
+                extent: this.mapViewConstraints.maxExtent,
+                ...processed.view,
+            };
+        }
+        else {
+            processed.view = { ...DEFAULT_VIEW, ...processed.view };
         }
         return processed;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapContainerComponent, deps: [{ token: DO_NOT_USE_DEFAULT_BASEMAP }, { token: BASEMAP_LAYERS }, { token: MAP_VIEW_CONSTRAINTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapContainerComponent, isStandalone: true, selector: "gn-ui-map-container", inputs: { context: "context" }, outputs: { featuresClick: "featuresClick", featuresHover: "featuresHover", mapClick: "mapClick", sourceLoadError: "sourceLoadError" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapContainerComponent, isStandalone: true, selector: "gn-ui-map-container", inputs: { context: "context" }, outputs: { featuresClick: "featuresClick", featuresHover: "featuresHover", mapClick: "mapClick", extentChange: "extentChange", sourceLoadError: "sourceLoadError", resolvedExtentChange: "resolvedExtentChange" }, providers: [
             provideIcons({ matSwipeOutline }),
             provideNgIconsConfig({
                 size: '1.5em',
             }),
-        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["map"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"h-full w-full\" #map></div>\n<div\n  class=\"absolute inset-0 p-2 rounded z-40 transition-all flex flex-col justify-center items-center text-primary font-sans pointer-events-none\"\n  [ngClass]=\"\n    (displayMessage$ | async) ? 'visible opacity-100' : 'invisible opacity-0'\n  \"\n>\n  <div\n    class=\"absolute z-[-1] inset-0 bg-gradient-to-b from-white to-primary-lightest opacity-60\"\n  ></div>\n  <ng-icon\n    class=\"!w-16 !h-16 text-[64px] mb-4\"\n    name=\"matSwipeOutline\"\n  ></ng-icon>\n  <p translate>map.navigation.message</p>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { 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 }); }
+        ], viewQueries: [{ propertyName: "container", first: true, predicate: ["map"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative h-full w-full\" #map>\n  <ng-content></ng-content>\n  <div\n    class=\"absolute inset-0 p-2 rounded z-40 transition-all flex flex-col justify-center items-center text-primary font-sans pointer-events-none\"\n    [ngClass]=\"\n      (displayMessage$ | async) ? 'visible opacity-100' : 'invisible opacity-0'\n    \"\n  >\n    <div\n      class=\"absolute z-[-1] inset-0 bg-gradient-to-b from-white to-primary-lightest opacity-60\"\n    ></div>\n    <ng-icon\n      class=\"!w-16 !h-16 text-[64px] mb-4\"\n      name=\"matSwipeOutline\"\n    ></ng-icon>\n    <p translate>map.navigation.message</p>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { 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: "18.2.13", ngImport: i0, type: MapContainerComponent, decorators: [{
             type: Component,
@@ -27716,7 +27914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         provideNgIconsConfig({
                             size: '1.5em',
                         }),
-                    ], template: "<div class=\"h-full w-full\" #map></div>\n<div\n  class=\"absolute inset-0 p-2 rounded z-40 transition-all flex flex-col justify-center items-center text-primary font-sans pointer-events-none\"\n  [ngClass]=\"\n    (displayMessage$ | async) ? 'visible opacity-100' : 'invisible opacity-0'\n  \"\n>\n  <div\n    class=\"absolute z-[-1] inset-0 bg-gradient-to-b from-white to-primary-lightest opacity-60\"\n  ></div>\n  <ng-icon\n    class=\"!w-16 !h-16 text-[64px] mb-4\"\n    name=\"matSwipeOutline\"\n  ></ng-icon>\n  <p translate>map.navigation.message</p>\n</div>\n" }]
+                    ], template: "<div class=\"relative h-full w-full\" #map>\n  <ng-content></ng-content>\n  <div\n    class=\"absolute inset-0 p-2 rounded z-40 transition-all flex flex-col justify-center items-center text-primary font-sans pointer-events-none\"\n    [ngClass]=\"\n      (displayMessage$ | async) ? 'visible opacity-100' : 'invisible opacity-0'\n    \"\n  >\n    <div\n      class=\"absolute z-[-1] inset-0 bg-gradient-to-b from-white to-primary-lightest opacity-60\"\n    ></div>\n    <ng-icon\n      class=\"!w-16 !h-16 text-[64px] mb-4\"\n      name=\"matSwipeOutline\"\n    ></ng-icon>\n    <p translate>map.navigation.message</p>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DO_NOT_USE_DEFAULT_BASEMAP]
@@ -27728,17 +27926,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     args: [MAP_VIEW_CONSTRAINTS]
                 }] }], propDecorators: { context: [{
                 type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['map']
             }], featuresClick: [{
                 type: Output
             }], featuresHover: [{
                 type: Output
             }], mapClick: [{
                 type: Output
+            }], extentChange: [{
+                type: Output
             }], sourceLoadError: [{
                 type: Output
-            }], container: [{
-                type: ViewChild,
-                args: ['map']
+            }], resolvedExtentChange: [{
+                type: Output
             }] } });
 
 const geometryKeys = ['geometry', 'the_geom'];
@@ -27911,7 +28113,7 @@ class SpatialExtentComponent {
         return new GeoJSON().writeGeometryObject(geometry);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpatialExtentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpatialExtentComponent, isStandalone: true, selector: "gn-ui-spatial-extent", inputs: { spatialExtents: "spatialExtents" }, ngImport: i0, template: "<gn-ui-map-container\n  class=\"h-full w-full\"\n  [context]=\"mapContext$ | async\"\n></gn-ui-map-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: MapContainerComponent, selector: "gn-ui-map-container", inputs: ["context"], outputs: ["featuresClick", "featuresHover", "mapClick", "sourceLoadError"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpatialExtentComponent, isStandalone: true, selector: "gn-ui-spatial-extent", inputs: { spatialExtents: "spatialExtents" }, ngImport: i0, template: "<gn-ui-map-container\n  class=\"h-full w-full\"\n  [context]=\"mapContext$ | async\"\n></gn-ui-map-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: MapContainerComponent, selector: "gn-ui-map-container", inputs: ["context"], outputs: ["featuresClick", "featuresHover", "mapClick", "extentChange", "sourceLoadError", "resolvedExtentChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpatialExtentComponent, decorators: [{
             type: Component,
@@ -27933,7 +28135,7 @@ class MapStateContainerComponent {
         this.mapFacade.selectFeatures(features);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapStateContainerComponent, deps: [{ token: MapFacade }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapStateContainerComponent, isStandalone: true, selector: "gn-ui-map-state-container", ngImport: i0, template: "<gn-ui-map-container\n  [context]=\"context$ | async\"\n  (featuresClick)=\"handleFeaturesClicked($event)\"\n></gn-ui-map-container>\n", styles: [""], dependencies: [{ kind: "component", type: MapContainerComponent, selector: "gn-ui-map-container", inputs: ["context"], outputs: ["featuresClick", "featuresHover", "mapClick", "sourceLoadError"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapStateContainerComponent, isStandalone: true, selector: "gn-ui-map-state-container", ngImport: i0, template: "<gn-ui-map-container\n  [context]=\"context$ | async\"\n  (featuresClick)=\"handleFeaturesClicked($event)\"\n></gn-ui-map-container>\n", styles: [""], dependencies: [{ kind: "component", type: MapContainerComponent, selector: "gn-ui-map-container", inputs: ["context"], outputs: ["featuresClick", "featuresHover", "mapClick", "extentChange", "sourceLoadError", "resolvedExtentChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapStateContainerComponent, decorators: [{
             type: Component,
@@ -28923,11 +29125,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class LoadingMaskComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoadingMaskComponent, isStandalone: true, selector: "gn-ui-loading-mask", inputs: { message: "message" }, ngImport: i0, template: "<div class=\"h-full flex flex-col justify-center items-center relative backdrop\">\n  <div class=\"absolute background bg-white inset-0\"></div>\n  <mat-spinner [diameter]=\"28\" class=\"relative\"></mat-spinner>\n  <span class=\"text-sm text-gray-700 mt-3 relative\">{{ message }}</span>\n</div>\n", styles: ["::ng-deep .mat-spinner circle{stroke:var(--color-gray-700);opacity:.5}.backdrop{background-color:#fff6}@supports (-webkit-backdrop-filter: blur()) or (backdrop-filter: blur()){.backdrop{background-color:transparent;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.background{opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoadingMaskComponent, isStandalone: true, selector: "gn-ui-loading-mask", inputs: { message: "message" }, ngImport: i0, template: "<div class=\"h-full flex flex-col justify-center items-center relative backdrop\">\n  <div class=\"absolute background bg-white inset-0\"></div>\n  <mat-spinner [diameter]=\"28\" class=\"relative\"></mat-spinner>\n  <span class=\"text-sm text-gray-700 mt-3 relative\">{{ message }}</span>\n</div>\n", styles: ["::ng-deep .mat-spinner circle{stroke:var(--color-gray-700);opacity:.5}.backdrop{background-color:#fff6}@supports (-webkit-backdrop-filter: blur()) or (backdrop-filter: blur()){.backdrop{background-color:transparent;backdrop-filter:blur(4px)}}.background{opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingMaskComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-loading-mask', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatProgressSpinnerModule], standalone: true, template: "<div class=\"h-full flex flex-col justify-center items-center relative backdrop\">\n  <div class=\"absolute background bg-white inset-0\"></div>\n  <mat-spinner [diameter]=\"28\" class=\"relative\"></mat-spinner>\n  <span class=\"text-sm text-gray-700 mt-3 relative\">{{ message }}</span>\n</div>\n", styles: ["::ng-deep .mat-spinner circle{stroke:var(--color-gray-700);opacity:.5}.backdrop{background-color:#fff6}@supports (-webkit-backdrop-filter: blur()) or (backdrop-filter: blur()){.backdrop{background-color:transparent;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.background{opacity:.7}\n"] }]
+            args: [{ selector: 'gn-ui-loading-mask', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatProgressSpinnerModule], standalone: true, template: "<div class=\"h-full flex flex-col justify-center items-center relative backdrop\">\n  <div class=\"absolute background bg-white inset-0\"></div>\n  <mat-spinner [diameter]=\"28\" class=\"relative\"></mat-spinner>\n  <span class=\"text-sm text-gray-700 mt-3 relative\">{{ message }}</span>\n</div>\n", styles: ["::ng-deep .mat-spinner circle{stroke:var(--color-gray-700);opacity:.5}.backdrop{background-color:#fff6}@supports (-webkit-backdrop-filter: blur()) or (backdrop-filter: blur()){.backdrop{background-color:transparent;backdrop-filter:blur(4px)}}.background{opacity:.7}\n"] }]
         }], propDecorators: { message: [{
                 type: Input
             }] } });
@@ -29270,7 +29472,7 @@ class AutocompleteComponent {
             provideNgIconsConfig({
                 size: '1.75rem',
             }),
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <div\n    class=\"absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none\"\n    *ngIf=\"!allowSubmit\"\n  >\n    <ng-icon name=\"iconoirSearch\" class=\"text-primary search\"></ng-icon>\n  </div>\n  <div class=\"flex flex-row\">\n    <input\n      #searchInput\n      type=\"text\"\n      class=\"gn-ui-text-input\"\n      (input)=\"handleInput($event)\"\n      [placeholder]=\"placeholder\"\n      [formControl]=\"control\"\n      [matAutocomplete]=\"auto\"\n      (keyup.enter)=\"handleSearch()\"\n      [ngClass]=\"{\n        'text-primary': searchActive && enterButton,\n        'text-gray-900': !searchActive,\n        'px-[--icon-width]': !allowSubmit,\n      }\"\n    />\n    <gn-ui-button\n      type=\"gray\"\n      *ngIf=\"searchInput.value && displayEnterBtn\"\n      extraClass=\"w-32 h-8 !opacity-100\"\n      [ngStyle]=\"{ left: enterBtnPosition + 'px' }\"\n      class=\"absolute\"\n      disabled=\"true\"\n    >\n      <ng-icon\n        name=\"iconoirLongArrowDownLeft\"\n        class=\"!w-4 text-gray-900 font-bold\"\n      ></ng-icon>\n      <span translate class=\"text-bold text-gray-900 font-bold\">\n        Enter to search\n      </span>\n    </gn-ui-button>\n  </div>\n  <gn-ui-button\n    type=\"primary\"\n    [extraClass]=\"getExtraClass()\"\n    data-test=\"clear-btn\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (buttonClick)=\"clear()\"\n  >\n    <ng-icon class=\"text-white\" name=\"matClose\"></ng-icon>\n  </gn-ui-button>\n  <gn-ui-button\n    type=\"light\"\n    extraClass=\"border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]\"\n    aria-label=\"Trigger search\"\n    *ngIf=\"allowSubmit\"\n    data-test=\"autocomplete-submit-btn\"\n    (buttonClick)=\"handleSearch()\"\n  >\n    <ng-icon name=\"iconoirSearch\"></ng-icon>\n  </gn-ui-button>\n\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"matErrorOutlineOutline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</span>\n\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFnInternal\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion text-start\"\n  >\n    {{ displayWithFnInternal(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: ["span{--icon-padding: var(--gn-ui-text-input-border-size, 2px);--icon-width: calc(var(--gn-ui-text-input-padding, .6em) * 2 + 1.25em)}span>*:not(gn-ui-popup-alert){font-size:var(--gn-ui-text-input-font-size, 1em)}input:placeholder-shown{text-overflow:ellipsis}gn-ui-button{--gn-ui-button-rounded: 0;--gn-ui-button-width: var(--icon-width);--gn-ui-button-padding: 0;font-size:1em}ng-icon.search{margin-top:.6rem;margin-left:.6rem}gn-ui-button:last-of-type{--gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, .25em) var(--gn-ui-text-input-rounded, .25em) 0}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: 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 }); }
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <div\n    class=\"absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none\"\n    *ngIf=\"!allowSubmit\"\n  >\n    <ng-icon name=\"iconoirSearch\" class=\"text-primary search\"></ng-icon>\n  </div>\n  <div class=\"flex flex-row\">\n    <input\n      #searchInput\n      type=\"text\"\n      class=\"gn-ui-text-input\"\n      (input)=\"handleInput($event)\"\n      [placeholder]=\"placeholder\"\n      [formControl]=\"control\"\n      [matAutocomplete]=\"auto\"\n      (keyup.enter)=\"handleSearch()\"\n      [ngClass]=\"{\n        'text-primary': searchActive && enterButton,\n        'text-gray-900': !searchActive,\n        'px-[--icon-width]': !allowSubmit,\n      }\"\n    />\n    <gn-ui-button\n      type=\"gray\"\n      *ngIf=\"searchInput.value && displayEnterBtn\"\n      extraClass=\"w-32 h-8 !opacity-100\"\n      [ngStyle]=\"{ left: enterBtnPosition + 'px' }\"\n      class=\"absolute\"\n      disabled=\"true\"\n    >\n      <ng-icon\n        name=\"iconoirLongArrowDownLeft\"\n        class=\"!w-4 text-gray-900 font-bold\"\n      ></ng-icon>\n      <span translate class=\"text-bold text-gray-900 font-bold\">\n        Enter to search\n      </span>\n    </gn-ui-button>\n  </div>\n  <gn-ui-button\n    type=\"primary\"\n    [extraClass]=\"getExtraClass()\"\n    data-test=\"clear-btn\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (buttonClick)=\"clear()\"\n  >\n    <ng-icon class=\"text-white\" name=\"matClose\"></ng-icon>\n  </gn-ui-button>\n  <gn-ui-button\n    type=\"light\"\n    extraClass=\"border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]\"\n    aria-label=\"Trigger search\"\n    *ngIf=\"allowSubmit\"\n    data-test=\"autocomplete-submit-btn\"\n    (buttonClick)=\"handleSearch()\"\n  >\n    <ng-icon name=\"iconoirSearch\"></ng-icon>\n  </gn-ui-button>\n\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"matErrorOutlineOutline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</span>\n\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFnInternal\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion text-start\"\n  >\n    {{ displayWithFnInternal(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: ["span{--icon-padding: var(--gn-ui-text-input-border-size, 2px);--icon-width: calc(var(--gn-ui-text-input-padding, .6em) * 2 + 1.25em)}span>*:not(gn-ui-popup-alert){font-size:var(--gn-ui-text-input-font-size, 1em)}input:placeholder-shown{text-overflow:ellipsis}gn-ui-button{--gn-ui-button-rounded: 0;--gn-ui-button-width: var(--icon-width);--gn-ui-button-padding: 0;font-size:1em}ng-icon.search{margin-top:.6rem;margin-left:.6rem}gn-ui-button:last-of-type{--gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, .25em) var(--gn-ui-text-input-rounded, .25em) 0}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i1$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -29379,11 +29581,11 @@ class CheckToggleComponent {
         this.toggled.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckToggleComponent, isStandalone: true, selector: "gn-ui-check-toggle", inputs: { title: "title", label: "label", value: "value", color: "color" }, outputs: { toggled: "toggled" }, ngImport: i0, template: "<label\n  class=\"inline-flex relative items-start cursor-pointer\"\n  [title]=\"title || label\"\n>\n  <span class=\"shrink-0\">\n    <input\n      type=\"checkbox\"\n      class=\"sr-only peer\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"toggle($event)\"\n    />\n    <div\n      class=\"w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all\"\n      [class]=\"\n        color === 'secondary'\n          ? 'peer-focus:ring-secondary-lighter peer-checked:bg-secondary'\n          : 'peer-focus:ring-primary-lighter peer-checked:bg-primary'\n      \"\n    ></div>\n  </span>\n  <span class=\"ml-3 mt-[2px] text-sm font-medium\">{{ label }}</span>\n</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckToggleComponent, isStandalone: true, selector: "gn-ui-check-toggle", inputs: { title: "title", label: "label", value: "value", color: "color" }, outputs: { toggled: "toggled" }, ngImport: i0, template: "<label\n  class=\"flex relative items-center cursor-pointer w-full\"\n  [title]=\"title || label\"\n>\n  <span class=\"shrink-0 relative\">\n    <input\n      type=\"checkbox\"\n      class=\"sr-only peer\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"toggle($event)\"\n    />\n    <div\n      class=\"w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all\"\n      [class]=\"\n        color === 'secondary'\n          ? 'peer-focus:ring-secondary-lighter peer-checked:bg-secondary'\n          : 'peer-focus:ring-primary-lighter peer-checked:bg-primary'\n      \"\n    ></div>\n  </span>\n  <span class=\"ml-3 mt-[2px] text-sm font-medium flex-1\">{{ label }}</span>\n</label>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "18.2.13", ngImport: i0, type: CheckToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-check-toggle', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FormsModule], template: "<label\n  class=\"inline-flex relative items-start cursor-pointer\"\n  [title]=\"title || label\"\n>\n  <span class=\"shrink-0\">\n    <input\n      type=\"checkbox\"\n      class=\"sr-only peer\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"toggle($event)\"\n    />\n    <div\n      class=\"w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all\"\n      [class]=\"\n        color === 'secondary'\n          ? 'peer-focus:ring-secondary-lighter peer-checked:bg-secondary'\n          : 'peer-focus:ring-primary-lighter peer-checked:bg-primary'\n      \"\n    ></div>\n  </span>\n  <span class=\"ml-3 mt-[2px] text-sm font-medium\">{{ label }}</span>\n</label>\n" }]
+            args: [{ selector: 'gn-ui-check-toggle', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FormsModule], template: "<label\n  class=\"flex relative items-center cursor-pointer w-full\"\n  [title]=\"title || label\"\n>\n  <span class=\"shrink-0 relative\">\n    <input\n      type=\"checkbox\"\n      class=\"sr-only peer\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"toggle($event)\"\n    />\n    <div\n      class=\"w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all\"\n      [class]=\"\n        color === 'secondary'\n          ? 'peer-focus:ring-secondary-lighter peer-checked:bg-secondary'\n          : 'peer-focus:ring-primary-lighter peer-checked:bg-primary'\n      \"\n    ></div>\n  </span>\n  <span class=\"ml-3 mt-[2px] text-sm font-medium flex-1\">{{ label }}</span>\n</label>\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], label: [{
@@ -29412,7 +29614,7 @@ class CheckboxComponent {
         this.changed.emit(this.checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxComponent, isStandalone: true, selector: "gn-ui-checkbox", inputs: { type: "type", checked: "checked", indeterminate: "indeterminate" }, outputs: { changed: "changed" }, ngImport: i0, template: "<mat-checkbox\n  class=\"cursor-pointer\"\n  [class]=\"classList\"\n  [checked]=\"checked\"\n  [indeterminate]=\"indeterminate\"\n  (click)=\"handleClick($event)\"\n></mat-checkbox>\n", styles: [".default{--gn-ui-checkbox-color: var(--color-main)}.secondary{--gn-ui-checkbox-color: var(--color-secondary)}.primary{--gn-ui-checkbox-color: var(--color-primary)}mat-checkbox{--mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-state-layer-color: var( --gn-ui-checkbox-color )}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$6.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxComponent, isStandalone: true, selector: "gn-ui-checkbox", inputs: { type: "type", checked: "checked", indeterminate: "indeterminate" }, outputs: { changed: "changed" }, ngImport: i0, template: "<mat-checkbox\n  class=\"cursor-pointer\"\n  [class]=\"classList\"\n  [checked]=\"checked\"\n  [indeterminate]=\"indeterminate\"\n  (click)=\"handleClick($event)\"\n></mat-checkbox>\n", styles: [".default{--gn-ui-checkbox-color: var(--color-main)}.secondary{--gn-ui-checkbox-color: var(--color-secondary)}.primary{--gn-ui-checkbox-color: var(--color-primary)}mat-checkbox{--mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-state-layer-color: var( --gn-ui-checkbox-color )}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -29437,7 +29639,7 @@ class CopyTextButtonComponent {
         event.target.blur();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CopyTextButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CopyTextButtonComponent, isStandalone: true, selector: "gn-ui-copy-text-button", inputs: { text: "text", tooltipText: "tooltipText", displayText: "displayText", rows: "rows" }, ngImport: i0, template: "<div class=\"flex\">\n  <input\n    *ngIf=\"displayText && rows <= 1\"\n    type=\"text\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate\"\n    value=\"{{ text }}\"\n    readonly\n  />\n  <textarea\n    *ngIf=\"displayText && rows > 1\"\n    [rows]=\"rows\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max\"\n    readonly\n    >{{ text }}</textarea\n  >\n  <button\n    type=\"button\"\n    (click)=\"copyText($event)\"\n    [ngClass]=\"{\n      'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n        displayText,\n    }\"\n    [matTooltip]=\"tooltipText\"\n    matTooltipPosition=\"above\"\n  >\n    <ng-icon\n      name=\"matContentCopy\"\n      class=\"pointer-events-none align-middle card-icon\"\n    ></ng-icon>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [provideIcons({ matContentCopy })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CopyTextButtonComponent, isStandalone: true, selector: "gn-ui-copy-text-button", inputs: { text: "text", tooltipText: "tooltipText", displayText: "displayText", rows: "rows" }, ngImport: i0, template: "<div class=\"flex\">\n  <input\n    *ngIf=\"displayText && rows <= 1\"\n    type=\"text\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate\"\n    value=\"{{ text }}\"\n    readonly\n  />\n  <textarea\n    *ngIf=\"displayText && rows > 1\"\n    [rows]=\"rows\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max\"\n    readonly\n    >{{ text }}</textarea\n  >\n  <button\n    type=\"button\"\n    (click)=\"copyText($event)\"\n    [ngClass]=\"{\n      'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n        displayText,\n    }\"\n    [matTooltip]=\"tooltipText\"\n    matTooltipPosition=\"above\"\n  >\n    <ng-icon\n      name=\"matContentCopy\"\n      class=\"pointer-events-none align-middle card-icon\"\n    ></ng-icon>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [provideIcons({ matContentCopy })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CopyTextButtonComponent, decorators: [{
             type: Component,
@@ -29453,16 +29655,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class DatePickerComponent {
-    constructor() {
+    constructor(dateAdapter, translate) {
+        this.dateAdapter = dateAdapter;
+        this.translate = translate;
         this.dateChange = new EventEmitter();
+        this.dateAdapter.setLocale(this.translate.currentLang);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1$6.DateAdapter }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatePickerComponent, isStandalone: true, selector: "gn-ui-date-picker", inputs: { date: "date" }, outputs: { dateChange: "dateChange" }, providers: [
             provideIcons({ iconoirCalendar }),
             provideNgIconsConfig({
                 size: '1.5rem',
             }),
-        ], ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <input\n    class=\"gn-ui-text-input pr-[var(--text-padding)]\"\n    [matDatepicker]=\"picker\"\n    [value]=\"date\"\n    (dateChange)=\"dateChange.emit($event.value)\"\n  />\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    data-cy=\"date-picker-button\"\n    extraClass=\"h-full\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-datepicker #picker></mat-datepicker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"], dependencies: [{ kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { 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 }); }
+            {
+                provide: MAT_DATE_LOCALE,
+                useFactory: (locale) => locale,
+            },
+        ], ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <input\n    class=\"gn-ui-text-input pr-[var(--text-padding)]\"\n    [matDatepicker]=\"picker\"\n    [value]=\"date\"\n    (dateChange)=\"dateChange.emit($event.value)\"\n  />\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    data-cy=\"date-picker-button\"\n    extraClass=\"h-full\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-datepicker #picker></mat-datepicker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"], dependencies: [{ kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { 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: "18.2.13", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -29476,8 +29685,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         provideNgIconsConfig({
                             size: '1.5rem',
                         }),
+                        {
+                            provide: MAT_DATE_LOCALE,
+                            useFactory: (locale) => locale,
+                        },
                     ], template: "<span class=\"w-full inline-block relative\">\n  <input\n    class=\"gn-ui-text-input pr-[var(--text-padding)]\"\n    [matDatepicker]=\"picker\"\n    [value]=\"date\"\n    (dateChange)=\"dateChange.emit($event.value)\"\n  />\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    data-cy=\"date-picker-button\"\n    extraClass=\"h-full\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-datepicker #picker></mat-datepicker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"] }]
-        }], propDecorators: { date: [{
+        }], ctorParameters: () => [{ type: i1$6.DateAdapter }, { type: i1$1.TranslateService }], propDecorators: { date: [{
                 type: Input
             }], dateChange: [{
                 type: Output
@@ -29506,7 +29719,7 @@ class DateRangeDropdownComponent {
                 matExpandMore,
                 matExpandLess,
             }),
-        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  (buttonClick)=\"picker.open()\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n  </div>\n  <ng-icon\n    [name]=\"isPickerDisplayed ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n<!--date range input is just present for output events and hidden from the DOM-->\n<mat-date-range-input [rangePicker]=\"picker\">\n  <input\n    matStartDate\n    [value]=\"startDate\"\n    (dateInput)=\"startDateChange.emit($event.value)\"\n  />\n  <input\n    matEndDate\n    [value]=\"endDate\"\n    (dateInput)=\"endDateChange.emit($event.value)\"\n  />\n</mat-date-range-input>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host .mat-date-range-input-container{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$7.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$7.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }] }); }
+        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  (buttonClick)=\"picker.open()\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n  </div>\n  <ng-icon\n    [name]=\"isPickerDisplayed ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n<!--date range input is just present for output events and hidden from the DOM-->\n<mat-date-range-input [rangePicker]=\"picker\">\n  <input\n    matStartDate\n    [value]=\"startDate\"\n    (dateInput)=\"startDateChange.emit($event.value)\"\n  />\n  <input\n    matEndDate\n    [value]=\"endDate\"\n    (dateInput)=\"endDateChange.emit($event.value)\"\n  />\n</mat-date-range-input>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host{.mat-date-range-input-container{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeDropdownComponent, decorators: [{
             type: Component,
@@ -29521,7 +29734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             matExpandMore,
                             matExpandLess,
                         }),
-                    ], template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  (buttonClick)=\"picker.open()\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n  </div>\n  <ng-icon\n    [name]=\"isPickerDisplayed ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n<!--date range input is just present for output events and hidden from the DOM-->\n<mat-date-range-input [rangePicker]=\"picker\">\n  <input\n    matStartDate\n    [value]=\"startDate\"\n    (dateInput)=\"startDateChange.emit($event.value)\"\n  />\n  <input\n    matEndDate\n    [value]=\"endDate\"\n    (dateInput)=\"endDateChange.emit($event.value)\"\n  />\n</mat-date-range-input>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host .mat-date-range-input-container{display:none}\n"] }]
+                    ], template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  (buttonClick)=\"picker.open()\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n  </div>\n  <ng-icon\n    [name]=\"isPickerDisplayed ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n<!--date range input is just present for output events and hidden from the DOM-->\n<mat-date-range-input [rangePicker]=\"picker\">\n  <input\n    matStartDate\n    [value]=\"startDate\"\n    (dateInput)=\"startDateChange.emit($event.value)\"\n  />\n  <input\n    matEndDate\n    [value]=\"endDate\"\n    (dateInput)=\"endDateChange.emit($event.value)\"\n  />\n</mat-date-range-input>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host{.mat-date-range-input-container{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: i1$8.OverlayContainer }, { type: i0.ChangeDetectorRef }], propDecorators: { title: [{
                 type: Input
             }], startDate: [{
@@ -29548,7 +29761,7 @@ class DateRangePickerComponent {
             provideNgIconsConfig({
                 size: '1.5rem',
             }),
-        ], ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <mat-date-range-input [rangePicker]=\"picker\" class=\"gn-ui-text-input\">\n    <input\n      matStartDate\n      placeholder=\"Start date\"\n      [value]=\"startDate\"\n      (dateInput)=\"startDateChange.emit($event.value)\"\n    />\n    <input\n      matEndDate\n      placeholder=\"End date\"\n      [value]=\"endDate\"\n      (dateInput)=\"endDateChange.emit($event.value)\"\n    />\n  </mat-date-range-input>\n\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    extraClass=\"h-full\"\n    data-cy=\"date-picker-button\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"], dependencies: [{ kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$7.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$7.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { 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: "<span class=\"w-full inline-block relative\">\n  <mat-date-range-input [rangePicker]=\"picker\" class=\"gn-ui-text-input\">\n    <input\n      matStartDate\n      placeholder=\"Start date\"\n      [value]=\"startDate\"\n      (dateInput)=\"startDateChange.emit($event.value)\"\n    />\n    <input\n      matEndDate\n      placeholder=\"End date\"\n      [value]=\"endDate\"\n      (dateInput)=\"endDateChange.emit($event.value)\"\n    />\n  </mat-date-range-input>\n\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    extraClass=\"h-full\"\n    data-cy=\"date-picker-button\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"], dependencies: [{ kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { 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: "18.2.13", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -29755,7 +29968,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    <div\n      *ngIf=\"hasSelectedChoices\"\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  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    <ng-icon\n      class=\"shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n      *ngIf=\"hasSelectedChoices && !overlayOpen\"\n      (click)=\"clearSelection($event)\"\n      name=\"matClose\"\n    ></ng-icon>\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      <button\n        type=\"button\"\n        *ngFor=\"let selected of selectedChoices\"\n        [title]=\"selected.label\"\n        class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n        (click)=\"select(selected, false)\"\n      >\n        <div class=\"text-sm truncate leading-[26px] px-2\">\n          {{ selected.label }}\n        </div>\n        <div\n          class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n        >\n          <ng-icon\n            name=\"matClose\"\n            class=\"!h-[12px] !w-[11px] text-[12px]\"\n          ></ng-icon>\n        </div>\n      </button>\n\n      <div *ngIf=\"allowSearch\" class=\"w-[50%] relative grow shrink\">\n        <input\n          #searchFieldInput\n          class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n          [(ngModel)]=\"searchInputValue\"\n          [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n        />\n        <button\n          *ngIf=\"!!searchInputValue\"\n          class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n          (click)=\"clearSearchInputValue($event)\"\n        >\n          <ng-icon class=\"!h-[10px] !w-[12px] text-[12px]\" name=\"matClose\">\n          </ng-icon>\n        </button>\n      </div>\n    </div>\n\n    <label\n      *ngFor=\"let choice of filteredChoicesByText\"\n      [title]=\"choice.label\"\n      class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n    >\n      <input\n        class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n        type=\"checkbox\"\n        #checkBox\n        [checked]=\"isSelected(choice)\"\n        (change)=\"select(choice, checkBox.checked)\"\n      />\n      <span class=\"ml-[8px] text-[14px] truncate\">\n        {{ choice.label }}\n      </span>\n    </label>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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    <div\n      *ngIf=\"hasSelectedChoices\"\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  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    <ng-icon\n      class=\"shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n      *ngIf=\"hasSelectedChoices && !overlayOpen\"\n      (click)=\"clearSelection($event)\"\n      name=\"matClose\"\n    ></ng-icon>\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      <button\n        type=\"button\"\n        *ngFor=\"let selected of selectedChoices\"\n        [title]=\"selected.label\"\n        class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n        (click)=\"select(selected, false)\"\n      >\n        <div class=\"text-sm truncate leading-[26px] px-2\">\n          {{ selected.label }}\n        </div>\n        <div\n          class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n        >\n          <ng-icon\n            name=\"matClose\"\n            class=\"!h-[12px] !w-[11px] text-[12px]\"\n          ></ng-icon>\n        </div>\n      </button>\n\n      <div *ngIf=\"allowSearch\" class=\"w-[50%] relative grow shrink\">\n        <input\n          #searchFieldInput\n          class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n          [(ngModel)]=\"searchInputValue\"\n          [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n        />\n        <button\n          *ngIf=\"!!searchInputValue\"\n          class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n          (click)=\"clearSearchInputValue($event)\"\n        >\n          <ng-icon class=\"!h-[10px] !w-[12px] text-[12px]\" name=\"matClose\">\n          </ng-icon>\n        </button>\n      </div>\n    </div>\n\n    <label\n      *ngFor=\"let choice of filteredChoicesByText\"\n      [title]=\"choice.label\"\n      class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n    >\n      <input\n        class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n        type=\"checkbox\"\n        #checkBox\n        [checked]=\"isSelected(choice)\"\n        (change)=\"select(choice, checkBox.checked)\"\n      />\n      <span class=\"ml-[8px] text-[14px] truncate\">\n        {{ choice.label }}\n      </span>\n    </label>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "18.2.13", ngImport: i0, type: DropdownMultiselectComponent, decorators: [{
             type: Component,
@@ -30597,7 +30810,7 @@ class SearchFeatureCatalogComponent {
         return (this.filteredFeatureCatalog?.featureTypes?.reduce((total, featureType) => total + (featureType.attributes?.length || 0), 0) || 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchFeatureCatalogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchFeatureCatalogComponent, isStandalone: true, selector: "gn-ui-search-feature-catalog", inputs: { featureCatalog: "featureCatalog" }, outputs: { filteredFeatureCatalogChange: "filteredFeatureCatalogChange" }, ngImport: i0, template: "<div\n  class=\"flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300\"\n  *ngIf=\"\n    (isMobile$ | async) === false || featureCatalog?.featureTypes?.length > 1\n  \"\n>\n  <div\n    class=\"relative shrink-0\"\n    *ngIf=\"featureCatalog?.featureTypes?.length > 1\"\n  >\n    <input\n      type=\"text\"\n      [placeholder]=\"'search.filter.into.feature.catalog' | translate\"\n      class=\"w-[220px] h-8 pl-3 pr-10 py-2 border rounded-md\"\n      [(ngModel)]=\"searchTerm\"\n      (ngModelChange)=\"filterAction(searchTerm)\"\n    />\n    <ng-icon\n      class=\"absolute right-2.5 top-1 w-6 h-6 text-black\"\n      name=\"iconoirSearch\"\n    ></ng-icon>\n  </div>\n  <div\n    *ngIf=\"(isMobile$ | async) === false\"\n    class=\"text-sm px-1 ml-auto inline\"\n  >\n    <ng-container *ngIf=\"featureCatalog?.featureTypes?.length > 1\">\n      <span\n        class=\"text-sm font-medium text-gray-900\"\n        data-cy=\"total-objects-label\"\n        translate\n        >record.feature.catalog.number.total.object</span\n      ><span\n        class=\"text-sm font-bold px-1 text-gray-900\"\n        data-cy=\"total-objects\"\n        >{{ totalObjects }}</span\n      >\n      <span class=\"px-1.5\">|</span>\n    </ng-container>\n    <span\n      class=\"text-sm font-medium px-1 text-gray-900\"\n      data-cy=\"total-attributes-label\"\n      translate\n      >record.feature.catalog.number.total.attribute</span\n    ><span class=\"text-sm font-bold text-gray-900\" data-cy=\"total-attributes\">{{\n      totalAttributes\n    }}</span>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: NgIcon, 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" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchFeatureCatalogComponent, isStandalone: true, selector: "gn-ui-search-feature-catalog", inputs: { featureCatalog: "featureCatalog" }, outputs: { filteredFeatureCatalogChange: "filteredFeatureCatalogChange" }, ngImport: i0, template: "<div\n  class=\"flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300\"\n  *ngIf=\"\n    (isMobile$ | async) === false || featureCatalog?.featureTypes?.length > 1\n  \"\n>\n  <div\n    class=\"relative shrink-0\"\n    *ngIf=\"featureCatalog?.featureTypes?.length > 1\"\n  >\n    <input\n      type=\"text\"\n      [placeholder]=\"'search.filter.into.feature.catalog' | translate\"\n      class=\"w-[220px] h-8 pl-3 pr-10 py-2 border rounded-md\"\n      [(ngModel)]=\"searchTerm\"\n      (ngModelChange)=\"filterAction(searchTerm)\"\n    />\n    <ng-icon\n      class=\"absolute right-2.5 top-1 w-6 h-6 text-black\"\n      name=\"iconoirSearch\"\n    ></ng-icon>\n  </div>\n  <div\n    *ngIf=\"(isMobile$ | async) === false\"\n    class=\"text-sm px-1 ml-auto inline\"\n  >\n    <ng-container *ngIf=\"featureCatalog?.featureTypes?.length > 1\">\n      <span\n        class=\"text-sm font-medium text-gray-900\"\n        data-cy=\"total-objects-label\"\n        translate\n        >record.feature.catalog.number.total.object</span\n      ><span\n        class=\"text-sm font-bold px-1 text-gray-900\"\n        data-cy=\"total-objects\"\n        >{{ totalObjects }}</span\n      >\n      <span class=\"px-1.5\">|</span>\n    </ng-container>\n    <span\n      class=\"text-sm font-medium px-1 text-gray-900\"\n      data-cy=\"total-attributes-label\"\n      translate\n      >record.feature.catalog.number.total.attribute</span\n    ><span class=\"text-sm font-bold text-gray-900\" data-cy=\"total-attributes\">{{\n      totalAttributes\n    }}</span>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: NgIcon, 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" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [
             provideIcons({ iconoirSearch }),
             provideNgIconsConfig({
                 size: '1.5rem',
@@ -30624,6 +30837,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
+class DateRangeInputsComponent {
+    constructor() {
+        this.temporalExtentChange = new EventEmitter();
+    }
+    onStartDateChange(date) {
+        this.temporalExtent = {
+            ...this.temporalExtent,
+            start: date,
+        };
+        this.temporalExtentChange.emit(this.temporalExtent);
+    }
+    onEndDateChange(date) {
+        this.temporalExtent = {
+            ...this.temporalExtent,
+            end: date,
+        };
+        this.temporalExtentChange.emit(this.temporalExtent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeInputsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateRangeInputsComponent, isStandalone: true, selector: "gn-ui-date-range-inputs", inputs: { temporalExtent: "temporalExtent" }, outputs: { temporalExtentChange: "temporalExtentChange" }, ngImport: i0, template: "<div class=\"m-8\">\n  <p class=\"mb-4\" translate>daterange.filter.period</p>\n  <p translate>daterange.filter.from</p>\n  <gn-ui-date-picker\n    id=\"start-date-picker\"\n    [date]=\"temporalExtent?.start\"\n    (dateChange)=\"onStartDateChange($event)\"\n  ></gn-ui-date-picker>\n  <p class=\"mt-4\" translate>daterange.filter.to</p>\n  <gn-ui-date-picker\n    id=\"end-date-picker\"\n    [date]=\"temporalExtent?.end\"\n    (dateChange)=\"onEndDateChange($event)\"\n  ></gn-ui-date-picker>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DatePickerComponent, selector: "gn-ui-date-picker", inputs: ["date"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeInputsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-date-range-inputs', standalone: true, imports: [CommonModule, TranslateDirective, DatePickerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"m-8\">\n  <p class=\"mb-4\" translate>daterange.filter.period</p>\n  <p translate>daterange.filter.from</p>\n  <gn-ui-date-picker\n    id=\"start-date-picker\"\n    [date]=\"temporalExtent?.start\"\n    (dateChange)=\"onStartDateChange($event)\"\n  ></gn-ui-date-picker>\n  <p class=\"mt-4\" translate>daterange.filter.to</p>\n  <gn-ui-date-picker\n    id=\"end-date-picker\"\n    [date]=\"temporalExtent?.end\"\n    (dateChange)=\"onEndDateChange($event)\"\n  ></gn-ui-date-picker>\n</div>\n" }]
+        }], propDecorators: { temporalExtent: [{
+                type: Input
+            }], temporalExtentChange: [{
+                type: Output
+            }] } });
+
 class CellPopinComponent {
     set activePopin(active) {
         this._activePopin = !!active;
@@ -30793,7 +31036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class FormFieldWrapperComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: "18.2.13", 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: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldWrapperComponent, decorators: [{
             type: Component,
@@ -31224,7 +31467,7 @@ class PaginationComponent {
         this.listComponent.goToPage(this.applyPageBounds(newPage));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaginationComponent, isStandalone: true, selector: "gn-ui-pagination", inputs: { listComponent: "listComponent", hideButton: "hideButton" }, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"sm:absolute sm:inset-0\" *ngIf=\"!hideButton\">\n    <gn-ui-button\n      (buttonClick)=\"listComponent.goToNextPage()\"\n      type=\"secondary\"\n      [disabled]=\"listComponent.isLastPage\"\n      extraClass=\"lg:m-auto !p-[22px]\"\n    >\n      <span class=\"uppercase font-medium tracking-widest\" translate\n        >pagination.nextPage</span\n      >\n    </gn-ui-button>\n  </div>\n  <div\n    class=\"relative pointer-events-none flex flex-row justify-start sm:justify-end\"\n  >\n    <div class=\"pointer-events-auto flex flex-row items-center py-[13px]\">\n      <span class=\"mr-3 capitalize text-sm text-gray-900\" translate\n        >pagination.page</span\n      >\n      <input\n        type=\"number\"\n        [ngModel]=\"listComponent.currentPage\"\n        [min]=\"1\"\n        [max]=\"listComponent.pagesCount\"\n        (ngModelChange)=\"setPage($event)\"\n        class=\"border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center\"\n      />\n      <span class=\"mr-3 text-sm text-gray-900\"\n        ><span translate>pagination.pageOf</span>\n        {{ listComponent.pagesCount }}</span\n      >\n      <gn-ui-button\n        (buttonClick)=\"listComponent.goToPrevPage()\"\n        class=\"mr-2\"\n        [disabled]=\"listComponent.isFirstPage\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"prev-page\"\n      >\n        <ng-icon name=\"matChevronLeft\"></ng-icon>\n      </gn-ui-button>\n      <gn-ui-button\n        (buttonClick)=\"listComponent.goToNextPage()\"\n        [disabled]=\"listComponent.isLastPage\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"next-page\"\n      >\n        <ng-icon name=\"matChevronRight\"></ng-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PaginationComponent, isStandalone: true, selector: "gn-ui-pagination", inputs: { listComponent: "listComponent", hideButton: "hideButton" }, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"sm:absolute sm:inset-0\" *ngIf=\"!hideButton\">\n    <gn-ui-button\n      (buttonClick)=\"listComponent.goToNextPage()\"\n      type=\"secondary\"\n      [disabled]=\"listComponent.isLastPage\"\n      extraClass=\"lg:m-auto !p-[22px]\"\n    >\n      <span class=\"uppercase font-medium tracking-widest\" translate\n        >pagination.nextPage</span\n      >\n    </gn-ui-button>\n  </div>\n  <div\n    class=\"relative pointer-events-none flex flex-row justify-start sm:justify-end\"\n  >\n    <div class=\"pointer-events-auto flex flex-row items-center py-[13px]\">\n      <span class=\"mr-3 capitalize text-sm text-gray-900\" translate\n        >pagination.page</span\n      >\n      <input\n        type=\"number\"\n        [ngModel]=\"listComponent.currentPage\"\n        [min]=\"1\"\n        [max]=\"listComponent.pagesCount\"\n        (ngModelChange)=\"setPage($event)\"\n        class=\"border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center\"\n      />\n      <span class=\"mr-3 text-sm text-gray-900\"\n        ><span translate>pagination.pageOf</span>\n        {{ listComponent.pagesCount }}</span\n      >\n      <gn-ui-button\n        (buttonClick)=\"listComponent.goToPrevPage()\"\n        class=\"mr-2\"\n        [disabled]=\"listComponent.isFirstPage\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"prev-page\"\n      >\n        <ng-icon name=\"matChevronLeft\"></ng-icon>\n      </gn-ui-button>\n      <gn-ui-button\n        (buttonClick)=\"listComponent.goToNextPage()\"\n        [disabled]=\"listComponent.isLastPage\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"next-page\"\n      >\n        <ng-icon name=\"matChevronRight\"></ng-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], viewProviders: [
             provideIcons({
                 matChevronLeft,
                 matChevronRight,
@@ -31297,24 +31540,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class PreviousNextButtonsComponent {
+    constructor() {
+        this.displayLabels = false;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PreviousNextButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PreviousNextButtonsComponent, isStandalone: true, selector: "gn-ui-previous-next-buttons", inputs: { listComponent: "listComponent" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PreviousNextButtonsComponent, isStandalone: true, selector: "gn-ui-previous-next-buttons", inputs: { listComponent: "listComponent", displayLabels: "displayLabels" }, providers: [
             provideIcons({ matArrowBackIos, matArrowForwardIos }),
             provideNgIconsConfig({
                 size: '0.875em',
             }),
-        ], ngImport: i0, template: "<div class=\"flex flex-row gap-x-1 items-center\">\n  <gn-ui-button\n    data-test=\"previousButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isFirstPage\n        ? 'border border-gray-300'\n        : 'border border-gray-100')\n    \"\n    [disabled]=\"listComponent.isFirstPage\"\n    (buttonClick)=\"listComponent.goToPrevPage()\"\n  >\n    <ng-icon name=\"matArrowBackIos\"></ng-icon>\n  </gn-ui-button>\n  <gn-ui-button\n    data-test=\"nextButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isLastPage\n        ? 'border border-gray-300'\n        : 'border border-gray-100')\n    \"\n    [disabled]=\"listComponent.isLastPage\"\n    (buttonClick)=\"listComponent.goToNextPage()\"\n  >\n    <ng-icon name=\"matArrowForwardIos\"></ng-icon>\n  </gn-ui-button>\n</div>\n", styles: [":host{--gn-ui-button-rounded: 100%;--gn-ui-button-width: 8px;--gn-ui-button-height: 8px;--gn-ui-button-padding: 12px}\n"], dependencies: [{ 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"] }] }); }
+        ], ngImport: i0, template: "<div class=\"flex flex-row gap-x-1 items-center\">\n  <gn-ui-button\n    data-test=\"previousButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isFirstPage\n        ? 'border border-gray-300 text-main'\n        : 'border border-gray-100 text-gray-300')\n    \"\n    [disabled]=\"listComponent.isFirstPage\"\n    (buttonClick)=\"listComponent.goToPrevPage()\"\n  >\n    <ng-icon name=\"matArrowBackIos\"></ng-icon>\n    <span *ngIf=\"displayLabels\" class=\"ml-2\" translate\n      >pagination.previousPage</span\n    >\n  </gn-ui-button>\n  <gn-ui-button\n    data-test=\"nextButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isLastPage\n        ? 'border border-gray-300 text-main'\n        : 'border border-gray-100 text-gray-300')\n    \"\n    [disabled]=\"listComponent.isLastPage\"\n    (buttonClick)=\"listComponent.goToNextPage()\"\n  >\n    <span *ngIf=\"displayLabels\" class=\"mr-2\" translate\n      >pagination.nextPage</span\n    >\n    <ng-icon name=\"matArrowForwardIos\"></ng-icon>\n  </gn-ui-button>\n</div>\n", styles: [":host{--gn-ui-button-rounded: 100%;--gn-ui-button-width: 8px;--gn-ui-button-height: 8px;--gn-ui-button-padding: 12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PreviousNextButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-previous-next-buttons', standalone: true, imports: [ButtonComponent, NgIconComponent], providers: [
+            args: [{ selector: 'gn-ui-previous-next-buttons', standalone: true, imports: [CommonModule, ButtonComponent, NgIconComponent, TranslateDirective], providers: [
                         provideIcons({ matArrowBackIos, matArrowForwardIos }),
                         provideNgIconsConfig({
                             size: '0.875em',
                         }),
-                    ], template: "<div class=\"flex flex-row gap-x-1 items-center\">\n  <gn-ui-button\n    data-test=\"previousButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isFirstPage\n        ? 'border border-gray-300'\n        : 'border border-gray-100')\n    \"\n    [disabled]=\"listComponent.isFirstPage\"\n    (buttonClick)=\"listComponent.goToPrevPage()\"\n  >\n    <ng-icon name=\"matArrowBackIos\"></ng-icon>\n  </gn-ui-button>\n  <gn-ui-button\n    data-test=\"nextButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isLastPage\n        ? 'border border-gray-300'\n        : 'border border-gray-100')\n    \"\n    [disabled]=\"listComponent.isLastPage\"\n    (buttonClick)=\"listComponent.goToNextPage()\"\n  >\n    <ng-icon name=\"matArrowForwardIos\"></ng-icon>\n  </gn-ui-button>\n</div>\n", styles: [":host{--gn-ui-button-rounded: 100%;--gn-ui-button-width: 8px;--gn-ui-button-height: 8px;--gn-ui-button-padding: 12px}\n"] }]
+                    ], template: "<div class=\"flex flex-row gap-x-1 items-center\">\n  <gn-ui-button\n    data-test=\"previousButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isFirstPage\n        ? 'border border-gray-300 text-main'\n        : 'border border-gray-100 text-gray-300')\n    \"\n    [disabled]=\"listComponent.isFirstPage\"\n    (buttonClick)=\"listComponent.goToPrevPage()\"\n  >\n    <ng-icon name=\"matArrowBackIos\"></ng-icon>\n    <span *ngIf=\"displayLabels\" class=\"ml-2\" translate\n      >pagination.previousPage</span\n    >\n  </gn-ui-button>\n  <gn-ui-button\n    data-test=\"nextButton\"\n    type=\"light\"\n    [extraClass]=\"\n      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +\n      (!listComponent.isLastPage\n        ? 'border border-gray-300 text-main'\n        : 'border border-gray-100 text-gray-300')\n    \"\n    [disabled]=\"listComponent.isLastPage\"\n    (buttonClick)=\"listComponent.goToNextPage()\"\n  >\n    <span *ngIf=\"displayLabels\" class=\"mr-2\" translate\n      >pagination.nextPage</span\n    >\n    <ng-icon name=\"matArrowForwardIos\"></ng-icon>\n  </gn-ui-button>\n</div>\n", styles: [":host{--gn-ui-button-rounded: 100%;--gn-ui-button-width: 8px;--gn-ui-button-height: 8px;--gn-ui-button-padding: 12px}\n"] }]
         }], propDecorators: { listComponent: [{
                 type: Input
+            }], displayLabels: [{
+                type: Input
             }] } });
 
 class TruncatedTextComponent {
@@ -31842,7 +32090,6 @@ const FIELDS_SUMMARY = [
     'resourceAbstractObject',
     'overview',
     'logo',
-    'codelist_status_text',
     'link',
     'linkProtocol',
     'contactForResource*.organisation*',
@@ -33040,7 +33287,7 @@ class ApiCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ApiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ApiCardComponent, isStandalone: true, selector: "gn-ui-api-card", inputs: { link: "link", currentLink: "currentLink", size: "size" }, outputs: { openRecordApiForm: "openRecordApiForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"group flex justify-between rounded filter overflow-hidden card-shadow\"\n  [ngClass]=\"cardClass\"\n>\n  <ng-container *ngIf=\"size !== 'S'\">\n    <div class=\"flex-1 min-w-0\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <div class=\"flex items-center min-w-[32px]\">\n      <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"size === 'S'\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #buttons>\n  <div class=\"flex flex-row gap-2\">\n    <gn-ui-copy-text-button\n      [text]=\"link.url\"\n      [tooltipText]=\"'tooltip.url.copy' | translate\"\n      [displayText]=\"false\"\n      class=\"border border-gray-300 rounded-lg pt-1 px-2 h-[34px]\"\n    ></gn-ui-copy-text-button>\n    <button\n      *ngIf=\"displayApiFormButton\"\n      type=\"button\"\n      class=\"gn-ui-card-icon\"\n      [ngClass]=\"{\n        'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n          displayText,\n      }\"\n      [matTooltip]=\"\n        !currentlyActive\n          ? ('record.metadata.api.form.openForm' | translate)\n          : ('record.metadata.api.form.closeForm' | translate)\n      \"\n      matTooltipPosition=\"above\"\n      (click)=\"openRecordApiFormPanel()\"\n    >\n      <ng-icon\n        class=\"pointer-events-none align-middle card-icon\"\n        name=\"iconoirSettings\"\n        [ngClass]=\"{\n          'text-secondary opacity-100': currentlyActive,\n        }\"\n      ></ng-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #content>\n  <div class=\"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      {{ link.name }}\n    </div>\n  </div>\n  <div class=\"flex flex-row justify-between\">\n    <div class=\"flex flex-row gap-2.5 items-center pt-1\">\n      <span\n        *ngIf=\"link.accessServiceProtocol !== 'GPFDL'\"\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive,\n        }\"\n        translate\n        >record.metadata.api.accessServiceProtocol.{{\n          link.accessServiceProtocol\n        }}</span\n      >\n      <span\n        *ngIf=\"link.accessServiceProtocol === 'GPFDL'\"\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive,\n        }\"\n        translate\n      >\n        record.metadata.api.gpfdl</span\n      >\n    </div>\n    <div *ngIf=\"size === 'S'\">\n      <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ApiCardComponent, isStandalone: true, selector: "gn-ui-api-card", inputs: { link: "link", currentLink: "currentLink", size: "size" }, outputs: { openRecordApiForm: "openRecordApiForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"group flex justify-between rounded filter overflow-hidden card-shadow\"\n  [ngClass]=\"cardClass\"\n>\n  <ng-container *ngIf=\"size !== 'S'\">\n    <div class=\"flex-1 min-w-0\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <div class=\"flex items-center min-w-[32px]\">\n      <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"size === 'S'\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #buttons>\n  <div class=\"flex flex-row gap-2\">\n    <gn-ui-copy-text-button\n      [text]=\"link.url\"\n      [tooltipText]=\"'tooltip.url.copy' | translate\"\n      [displayText]=\"false\"\n      class=\"border border-gray-300 rounded-lg pt-1 px-2 h-[34px]\"\n    ></gn-ui-copy-text-button>\n    <button\n      *ngIf=\"displayApiFormButton\"\n      type=\"button\"\n      class=\"gn-ui-card-icon\"\n      [ngClass]=\"{\n        'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n          displayText,\n      }\"\n      [matTooltip]=\"\n        !currentlyActive\n          ? ('record.metadata.api.form.openForm' | translate)\n          : ('record.metadata.api.form.closeForm' | translate)\n      \"\n      matTooltipPosition=\"above\"\n      (click)=\"openRecordApiFormPanel()\"\n    >\n      <ng-icon\n        class=\"pointer-events-none align-middle card-icon\"\n        name=\"iconoirSettings\"\n        [ngClass]=\"{\n          'text-secondary opacity-100': currentlyActive,\n        }\"\n      ></ng-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #content>\n  <div class=\"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      {{ link.name }}\n    </div>\n  </div>\n  <div class=\"flex flex-row justify-between\">\n    <div class=\"flex flex-row gap-2.5 items-center pt-1\">\n      <span\n        *ngIf=\"link.accessServiceProtocol !== 'GPFDL'\"\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive,\n        }\"\n        translate\n        >record.metadata.api.accessServiceProtocol.{{\n          link.accessServiceProtocol\n        }}</span\n      >\n      <span\n        *ngIf=\"link.accessServiceProtocol === 'GPFDL'\"\n        class=\"bg-primary-opacity-50 uppercase inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded text-primary-lightest group-hover:bg-primary transition-colors\"\n        [ngClass]=\"{\n          '!bg-primary': currentlyActive,\n        }\"\n        translate\n      >\n        record.metadata.api.gpfdl</span\n      >\n    </div>\n    <div *ngIf=\"size === 'S'\">\n      <ng-container *ngTemplateOutlet=\"buttons\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [
             provideIcons({
                 iconoirSettings,
             }),
@@ -33282,7 +33529,7 @@ class DownloadsListComponent {
                 link.accessServiceProtocol === 'ogcFeatures'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DownloadsListComponent, deps: [{ token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DownloadsListComponent, isStandalone: true, selector: "gn-ui-downloads-list", inputs: { links: "links" }, ngImport: i0, template: "<div\n  class=\"flex flex-wrap justify-between items-center pb-4\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <div class=\"flex flex-row items-center gap-x-4\">\n    <div>\n      <h3\n        class=\"inline-block font-title text-xl text-title font-medium mr-4\"\n        translate\n      >\n        record.metadata.download\n      </h3>\n      <span class=\"px-3\">({{ linksCount }})</span>\n    </div>\n    <gn-ui-previous-next-buttons\n      *ngIf=\"(isMobile$ | async) === false && _list?.pagesCount > 1\"\n      [listComponent]=\"_list\"\n    ></gn-ui-previous-next-buttons>\n  </div>\n\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-60')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n\n<ng-container>\n  <gn-ui-block-list\n    *ngIf=\"(isMobile$ | async) === false\"\n    #blockList\n    (listChanges)=\"updateList($event)\"\n    containerClass=\"gap-4 pt-5 pb-7\"\n  >\n    <gn-ui-download-item\n      #block\n      *ngFor=\"let link of filteredLinks\"\n      [link]=\"link\"\n      [color]=\"getLinkColor(link)\"\n      [format]=\"getLinkFormat(link)\"\n      [isFromApi]=\"isFromApi(link)\"\n      [size]=\"blockList.subComponentSize\"\n    ></gn-ui-download-item>\n  </gn-ui-block-list>\n</ng-container>\n\n<div class=\"mb-5\" *ngFor=\"let link of filteredLinks\">\n  <ng-container *ngIf=\"(isMobile$ | async) === true\">\n    <gn-ui-download-item\n      size=\"M\"\n      [link]=\"link\"\n      [color]=\"getLinkColor(link)\"\n      [format]=\"getLinkFormat(link)\"\n      [isFromApi]=\"isFromApi(link)\"\n    ></gn-ui-download-item>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: BlockListComponent, selector: "gn-ui-block-list", inputs: ["containerClass", "paginationContainerClass"], outputs: ["listChanges"] }, { kind: "component", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: ["link", "color", "format", "isFromApi", "size"], outputs: ["exportUrl"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: PreviousNextButtonsComponent, selector: "gn-ui-previous-next-buttons", inputs: ["listComponent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DownloadsListComponent, isStandalone: true, selector: "gn-ui-downloads-list", inputs: { links: "links" }, ngImport: i0, template: "<div\n  class=\"flex flex-wrap justify-between items-center pb-4\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <div class=\"flex flex-row items-center gap-x-4\">\n    <div>\n      <h3\n        class=\"inline-block font-title text-xl text-title font-medium mr-4\"\n        translate\n      >\n        record.metadata.download\n      </h3>\n      <span class=\"px-3\">({{ linksCount }})</span>\n    </div>\n    <gn-ui-previous-next-buttons\n      *ngIf=\"(isMobile$ | async) === false && _list?.pagesCount > 1\"\n      [listComponent]=\"_list\"\n    ></gn-ui-previous-next-buttons>\n  </div>\n\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-60')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n\n<ng-container>\n  <gn-ui-block-list\n    *ngIf=\"(isMobile$ | async) === false\"\n    #blockList\n    (listChanges)=\"updateList($event)\"\n    containerClass=\"gap-4 pt-5 pb-7\"\n  >\n    <gn-ui-download-item\n      #block\n      *ngFor=\"let link of filteredLinks\"\n      [link]=\"link\"\n      [color]=\"getLinkColor(link)\"\n      [format]=\"getLinkFormat(link)\"\n      [isFromApi]=\"isFromApi(link)\"\n      [size]=\"blockList.subComponentSize\"\n    ></gn-ui-download-item>\n  </gn-ui-block-list>\n</ng-container>\n\n<div class=\"mb-5\" *ngFor=\"let link of filteredLinks\">\n  <ng-container *ngIf=\"(isMobile$ | async) === true\">\n    <gn-ui-download-item\n      size=\"M\"\n      [link]=\"link\"\n      [color]=\"getLinkColor(link)\"\n      [format]=\"getLinkFormat(link)\"\n      [isFromApi]=\"isFromApi(link)\"\n    ></gn-ui-download-item>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: BlockListComponent, selector: "gn-ui-block-list", inputs: ["containerClass", "paginationContainerClass"], outputs: ["listChanges"] }, { kind: "component", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: ["link", "color", "format", "isFromApi", "size"], outputs: ["exportUrl"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: PreviousNextButtonsComponent, selector: "gn-ui-previous-next-buttons", inputs: ["listComponent", "displayLabels"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DownloadsListComponent, decorators: [{
             type: Component,
@@ -33967,6 +34214,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
+class MetadataDoiComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataDoiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MetadataDoiComponent, isStandalone: true, selector: "gn-ui-metadata-doi", inputs: { code: "code", link: "link" }, ngImport: i0, template: "<div\n  class=\"border border-gray-300 rounded-lg py-4 px-5 text-black flex justify-between items-center gap-4\"\n>\n  <div class=\"overflow-hidden flex-1\">\n    <p class=\"text-base font-medium mb-3\">DOI</p>\n    <p\n      class=\"text-base font-medium overflow-hidden text-ellipsis whitespace-nowrap\"\n      [title]=\"code\"\n    >\n      {{ code }}\n    </p>\n  </div>\n  <div class=\"flex gap-2 items-start\">\n    <gn-ui-copy-text-button\n      [text]=\"code\"\n      [displayText]=\"false\"\n      [tooltipText]=\"'record.metadata.doi.copy' | translate\"\n      class=\"[&>div]:flex [&>div]:items-center [&>div]:justify-center [&_button]:w-[40px] [&_button]:h-[32px] [&_button]:flex [&_button]:items-center [&_button]:justify-center [&_button]:hover:bg-gray-100 [&_button]:rounded-lg [&_button]:transition-colors [&_button]:border [&_button]:border-gray-300 [&_button]:px-2 [&_button]:py-1 [&_ng-icon]:w-5 [&_ng-icon]:h-5\"\n    ></gn-ui-copy-text-button>\n    <a\n      *ngIf=\"link\"\n      [href]=\"link\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      class=\"w-[40px] h-[32px] flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors border border-gray-300 px-2 py-1\"\n      [matTooltip]=\"'record.metadata.doi.open' | translate\"\n    >\n      <ng-icon name=\"matOpenInNew\" size=\"20\"></ng-icon>\n    </a>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }], viewProviders: [
+            provideIcons({
+                matOpenInNew,
+            }),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataDoiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-metadata-doi', standalone: true, imports: [
+                        CommonModule,
+                        MatTooltipModule,
+                        NgIcon,
+                        TranslatePipe,
+                        CopyTextButtonComponent,
+                    ], viewProviders: [
+                        provideIcons({
+                            matOpenInNew,
+                        }),
+                    ], template: "<div\n  class=\"border border-gray-300 rounded-lg py-4 px-5 text-black flex justify-between items-center gap-4\"\n>\n  <div class=\"overflow-hidden flex-1\">\n    <p class=\"text-base font-medium mb-3\">DOI</p>\n    <p\n      class=\"text-base font-medium overflow-hidden text-ellipsis whitespace-nowrap\"\n      [title]=\"code\"\n    >\n      {{ code }}\n    </p>\n  </div>\n  <div class=\"flex gap-2 items-start\">\n    <gn-ui-copy-text-button\n      [text]=\"code\"\n      [displayText]=\"false\"\n      [tooltipText]=\"'record.metadata.doi.copy' | translate\"\n      class=\"[&>div]:flex [&>div]:items-center [&>div]:justify-center [&_button]:w-[40px] [&_button]:h-[32px] [&_button]:flex [&_button]:items-center [&_button]:justify-center [&_button]:hover:bg-gray-100 [&_button]:rounded-lg [&_button]:transition-colors [&_button]:border [&_button]:border-gray-300 [&_button]:px-2 [&_button]:py-1 [&_ng-icon]:w-5 [&_ng-icon]:h-5\"\n    ></gn-ui-copy-text-button>\n    <a\n      *ngIf=\"link\"\n      [href]=\"link\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      class=\"w-[40px] h-[32px] flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors border border-gray-300 px-2 py-1\"\n      [matTooltip]=\"'record.metadata.doi.open' | translate\"\n    >\n      <ng-icon name=\"matOpenInNew\" size=\"20\"></ng-icon>\n    </a>\n  </div>\n</div>\n" }]
+        }], propDecorators: { code: [{
+                type: Input
+            }], link: [{
+                type: Input
+            }] } });
+
 /* eslint-disable @angular-eslint/directive-selector */
 class GnUiLinkifyDirective {
     constructor(el, renderer) {
@@ -34110,14 +34384,8 @@ class MetadataInfoComponent {
     onKeywordClick(keyword) {
         this.keyword.emit(keyword);
     }
-    formatDate(date) {
-        return this.dateService.formatDate(date);
-    }
-    formatDateTime(date) {
-        return this.dateService.formatDateTime(date);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataInfoComponent, deps: [{ token: DateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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    <gn-ui-max-lines [maxLines]=\"6\" *ngIf=\"metadata.abstract\">\n      <div class=\"mb-6\">\n        <gn-ui-markdown-parser\n          [textContent]=\"metadata.abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n\n  <p\n    class=\"mt-6 mb-3 font-medium text-black text-sm\"\n    translate\n    *ngIf=\"!fieldReady('keywords') || metadata.keywords?.length\"\n  >\n    record.metadata.keywords\n  </p>\n\n  <gn-ui-content-ghost\n    ghostClass=\"h-[31px] w-3/4\"\n    [showContent]=\"fieldReady('keywords')\"\n  >\n    <gn-ui-max-lines [maxLines]=\"7\" *ngIf=\"metadata.keywords?.length\">\n      <div class=\"metadata-info-keywords sm:pb-4 flex flex-wrap gap-2\">\n        <gn-ui-badge\n          class=\"inline-block lowercase\"\n          (click)=\"onKeywordClick(keyword)\"\n          [clickable]=\"true\"\n          *ngFor=\"let keyword of metadata.keywords\"\n          >{{ keyword.label }}</gn-ui-badge\n        >\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.licenses ||\n    metadata.legalConstraints ||\n    metadata.securityConstraints ||\n    metadata.otherConstraints\n  \"\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    <ng-container *ngFor=\"let license of licenses\">\n      <div *ngIf=\"license.url; else noUrl\" class=\"text-primary\">\n        <a\n          [href]=\"license.url\"\n          target=\"_blank\"\n          class=\"cursor-pointer hover:underline transition-all\"\n        >\n          {{ license.text }}\n          <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      <ng-template #noUrl>\n        <div class=\"text-primary\" gnUiLinkify>\n          {{ license.text }}\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"legalConstraints.length\">\n      <div class=\"mb-6\">\n        <gn-ui-markdown-parser\n          *ngFor=\"let constraint of legalConstraints\"\n          [textContent]=\"constraint\"\n        >\n        </gn-ui-markdown-parser>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <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    </ng-container>\n\n    <span class=\"noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    (metadata.kind === 'dataset' && metadata.lineage) ||\n    metadata.resourceUpdated ||\n    metadata.updateFrequency ||\n    (metadata.kind === 'dataset' && metadata.status)\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n  data-test=\"details-panel\"\n>\n  <div *ngIf=\"metadata.lineage\" class=\"text-gray-900 flex flex-col mt-4 gap-2\">\n    <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n      {{ metadata.lineage }}\n    </p>\n  </div>\n  <div class=\"flex flex-row gap-6 mt-5 mb-8\" *ngIf=\"resourceContact\">\n    <div\n      *ngIf=\"resourceContact.organization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"resourceContact.organization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\" translate>record.metadata.producer</p>\n      <div\n        class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n        data-cy=\"organization-name\"\n      >\n        {{ resourceContact.organization?.name }}\n      </div>\n      <div *ngIf=\"resourceContact.organization?.website\">\n        <a\n          [href]=\"resourceContact.organization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ resourceContact.organization.website }}\n          <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      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matMailOutline\"\n          ></ng-icon>\n          <a\n            *ngIf=\"resourceContact.email\"\n            [href]=\"'mailto:' + resourceContact.email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ resourceContact?.email }}</a\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n  >\n    <div *ngIf=\"metadata.resourceCreated\">\n      <p class=\"text-sm\" translate>record.metadata.creation</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ formatDate(metadata.resourceCreated) }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.resourcePublished\">\n      <p class=\"text-sm\" translate>record.metadata.publication</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ formatDate(metadata.resourcePublished) }}\n      </p>\n    </div>\n    <div *ngIf=\"updateFrequency\">\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.otherLanguages?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n      <div class=\"flex flex-row gap-1 flex-wrap\">\n        <p\n          class=\"text-primary font-medium\"\n          translate\n          *ngFor=\"let language of metadata.otherLanguages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"temporalExtent\">\n      <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n      <div class=\"flex flex-row gap-1 mb-1 text-primary font-medium\">\n        <p\n          *ngIf=\"temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{\n            start: temporalExtent.start,\n            end: temporalExtent.end,\n          }\"\n        >\n          record.metadata.temporalExtent.fromDateToDate\n        </p>\n        <p\n          *ngIf=\"temporalExtent.start && !temporalExtent.end\"\n          translate\n          [translateParams]=\"{ start: temporalExtent.start }\"\n        >\n          record.metadata.temporalExtent.sinceDate\n        </p>\n        <p\n          *ngIf=\"!temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{ end: temporalExtent.end }\"\n        >\n          record.metadata.temporalExtent.untilDate\n        </p>\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.kind !== 'dataset' &&\n    metadata.spatialExtents &&\n    metadata.spatialExtents.length\n  \"\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<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\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    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.recordUpdated && formatDateTime(metadata.recordUpdated) }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.landingPage\">\n      <p class=\"text-sm\" translate>record.metadata.sheet</p>\n      <p class=\"text-primary font-medium\" translate>\n        <a [href]=\"metadata.landingPage\" target=\"_blank\">\n          <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n        </a>\n      </p>\n    </div>\n    <div *ngIf=\"metadata.ownerOrganization\">\n      <p class=\"text-sm\" translate>record.metadata.owner</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.ownerOrganization.name }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.uniqueIdentifier\">\n      <p class=\"text-sm\" translate>record.metadata.uniqueId</p>\n      <div class=\"flex flex-row content-align items-end gap-1\">\n        <gn-ui-copy-text-button\n          [text]=\"metadata.uniqueIdentifier\"\n          [tooltipText]=\"'tooltip.id.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <p class=\"text-primary font-medium\">\n          {{ metadata.uniqueIdentifier }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"metadata.topics?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          [clickable]=\"false\"\n          class=\"inline-block mr-2 mb-2 lowercase\"\n          *ngFor=\"let topic of metadata.topics\"\n          >{{ topic }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button ng-icon{transform:scale(.8)}:host{--gn-ui-badge-background-color: var(--color-primary-white);--gn-ui-badge-text-color: var(--color-primary-darkest)}:host .metadata-info-keywords ::ng-deep gn-ui-badge:hover{--gn-ui-badge-text-color: white}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "iconColor", "collapsed"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: MaxLinesComponent, selector: "gn-ui-max-lines", inputs: ["maxLines"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "component", type: SpatialExtentComponent, selector: "gn-ui-spatial-extent", inputs: ["spatialExtents"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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    <gn-ui-max-lines\n      [maxLines]=\"6\"\n      *ngIf=\"metadata.abstract\"\n      data-test=\"metadata-info-abstract\"\n    >\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  </gn-ui-content-ghost>\n\n  <p\n    class=\"mt-6 mb-3 font-medium text-black text-sm\"\n    translate\n    *ngIf=\"!fieldReady('keywords') || metadata.keywords?.length\"\n  >\n    record.metadata.keywords\n  </p>\n\n  <gn-ui-content-ghost\n    ghostClass=\"h-[31px] w-3/4\"\n    [showContent]=\"fieldReady('keywords')\"\n  >\n    <gn-ui-max-lines [maxLines]=\"7\" *ngIf=\"metadata.keywords?.length\">\n      <div class=\"metadata-info-keywords sm:pb-4 flex flex-wrap gap-2\">\n        <gn-ui-badge\n          class=\"inline-block lowercase\"\n          (click)=\"onKeywordClick(keyword)\"\n          [clickable]=\"true\"\n          *ngFor=\"let keyword of metadata.keywords\"\n          >{{ keyword.label }}</gn-ui-badge\n        >\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.licenses ||\n    metadata.legalConstraints ||\n    metadata.securityConstraints ||\n    metadata.otherConstraints\n  \"\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    <ng-container *ngFor=\"let license of licenses\">\n      <div *ngIf=\"license.url; else noUrl\" class=\"text-primary\">\n        <a\n          [href]=\"license.url\"\n          target=\"_blank\"\n          class=\"cursor-pointer hover:underline transition-all\"\n        >\n          {{ license.text }}\n          <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      <ng-template #noUrl>\n        <div class=\"text-primary\" gnUiLinkify>\n          {{ license.text }}\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"legalConstraints.length\">\n      <div class=\"mb-6\">\n        <gn-ui-markdown-parser\n          *ngFor=\"let constraint of legalConstraints\"\n          [textContent]=\"constraint\"\n        >\n        </gn-ui-markdown-parser>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <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    </ng-container>\n\n    <span class=\"noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    (metadata.kind === 'dataset' && metadata.lineage) ||\n    resourceContact ||\n    metadata.resourceCreated ||\n    metadata.resourcePublished ||\n    metadata.resourceUpdated ||\n    (metadata.kind === 'dataset' && metadata.updateFrequency) ||\n    metadata.otherLanguages?.length ||\n    (metadata.kind === 'dataset' && temporalExtent)\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n  data-test=\"details-panel\"\n>\n  <div\n    *ngIf=\"metadata.kind === 'dataset' && metadata.lineage\"\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  <div\n    class=\"flex flex-row gap-6 mt-5 mb-8 resource-contact\"\n    *ngIf=\"resourceContact\"\n    data-test=\"details-panel-resource-contact\"\n  >\n    <div\n      *ngIf=\"resourceContact.organization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"resourceContact.organization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\" translate>record.metadata.producer</p>\n      <div\n        class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n        data-cy=\"organization-name\"\n      >\n        {{ resourceContact.organization?.name }}\n      </div>\n      <div *ngIf=\"resourceContact.organization?.website\">\n        <a\n          [href]=\"resourceContact.organization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ resourceContact.organization.website }}\n          <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      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matMailOutline\"\n          ></ng-icon>\n          <a\n            *ngIf=\"resourceContact.email\"\n            [href]=\"'mailto:' + resourceContact.email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ resourceContact?.email }}</a\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n  >\n    <div\n      *ngIf=\"metadata.resourceCreated\"\n      data-test=\"details-panel-resource-created\"\n    >\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    <div\n      *ngIf=\"metadata.resourcePublished\"\n      data-test=\"details-panel-resource-published\"\n    >\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    <div\n      *ngIf=\"metadata.resourceUpdated\"\n      data-test=\"details-panel-resource-updated\"\n    >\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    <div\n      *ngIf=\"metadata.kind === 'dataset' && metadata.updateFrequency\"\n      data-test=\"details-panel-update-frequency\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div\n      *ngIf=\"metadata.otherLanguages?.length\"\n      data-test=\"details-panel-other-languages\"\n    >\n      <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n      <div class=\"flex flex-row gap-1 flex-wrap\">\n        <p\n          class=\"text-primary font-medium other-languages\"\n          translate\n          *ngFor=\"let language of metadata.otherLanguages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div\n      *ngIf=\"metadata.kind === 'dataset' && temporalExtent\"\n      data-test=\"details-panel-temporal-extent\"\n    >\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        <p\n          *ngIf=\"temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{\n            start: temporalExtent.start,\n            end: temporalExtent.end,\n          }\"\n        >\n          record.metadata.temporalExtent.fromDateToDate\n        </p>\n        <p\n          *ngIf=\"temporalExtent.start && !temporalExtent.end\"\n          translate\n          [translateParams]=\"{ start: temporalExtent.start }\"\n        >\n          record.metadata.temporalExtent.sinceDate\n        </p>\n        <p\n          *ngIf=\"!temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{ end: temporalExtent.end }\"\n        >\n          record.metadata.temporalExtent.untilDate\n        </p>\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.kind !== 'dataset' &&\n    metadata.spatialExtents &&\n    metadata.spatialExtents.length\n  \"\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<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\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    <div *ngIf=\"metadata.recordUpdated\">\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    <div *ngIf=\"metadata.landingPage\">\n      <p class=\"text-sm\" translate>record.metadata.sheet</p>\n      <p class=\"text-primary font-medium\" translate>\n        <a [href]=\"metadata.landingPage\" target=\"_blank\">\n          <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n        </a>\n      </p>\n    </div>\n    <div *ngIf=\"metadata.ownerOrganization\">\n      <p class=\"text-sm\" translate>record.metadata.owner</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.ownerOrganization.name }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.uniqueIdentifier\">\n      <p class=\"text-sm\" translate>record.metadata.uniqueId</p>\n      <div class=\"flex flex-row content-align items-end gap-1\">\n        <gn-ui-copy-text-button\n          [text]=\"metadata.uniqueIdentifier\"\n          [tooltipText]=\"'tooltip.id.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <p class=\"text-primary font-medium\">\n          {{ metadata.uniqueIdentifier }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"metadata.topics?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          [clickable]=\"false\"\n          class=\"inline-block mr-2 mb-2 lowercase\"\n          *ngFor=\"let topic of metadata.topics\"\n          >{{ topic }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button ng-icon{transform:scale(.8)}:host{--gn-ui-badge-background-color: var(--color-primary-white);--gn-ui-badge-text-color: var(--color-primary-darkest)}:host .metadata-info-keywords ::ng-deep gn-ui-badge:hover{--gn-ui-badge-text-color: white}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "iconColor", "collapsed"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: MaxLinesComponent, selector: "gn-ui-max-lines", inputs: ["maxLines"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "directive", type: GnUiHumanizeDateDirective, selector: "[gnUiHumanizeDate]", inputs: ["gnUiHumanizeDate"] }, { kind: "component", type: SpatialExtentComponent, selector: "gn-ui-spatial-extent", inputs: ["spatialExtents"] }], viewProviders: [
             provideIcons({
                 matOpenInNew,
                 matMailOutline: matMailOutline$1,
@@ -34139,13 +34407,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         CopyTextButtonComponent,
                         NgIcon,
                         GnUiLinkifyDirective,
+                        GnUiHumanizeDateDirective,
                         SpatialExtentComponent,
                     ], 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    <gn-ui-max-lines [maxLines]=\"6\" *ngIf=\"metadata.abstract\">\n      <div class=\"mb-6\">\n        <gn-ui-markdown-parser\n          [textContent]=\"metadata.abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n\n  <p\n    class=\"mt-6 mb-3 font-medium text-black text-sm\"\n    translate\n    *ngIf=\"!fieldReady('keywords') || metadata.keywords?.length\"\n  >\n    record.metadata.keywords\n  </p>\n\n  <gn-ui-content-ghost\n    ghostClass=\"h-[31px] w-3/4\"\n    [showContent]=\"fieldReady('keywords')\"\n  >\n    <gn-ui-max-lines [maxLines]=\"7\" *ngIf=\"metadata.keywords?.length\">\n      <div class=\"metadata-info-keywords sm:pb-4 flex flex-wrap gap-2\">\n        <gn-ui-badge\n          class=\"inline-block lowercase\"\n          (click)=\"onKeywordClick(keyword)\"\n          [clickable]=\"true\"\n          *ngFor=\"let keyword of metadata.keywords\"\n          >{{ keyword.label }}</gn-ui-badge\n        >\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.licenses ||\n    metadata.legalConstraints ||\n    metadata.securityConstraints ||\n    metadata.otherConstraints\n  \"\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    <ng-container *ngFor=\"let license of licenses\">\n      <div *ngIf=\"license.url; else noUrl\" class=\"text-primary\">\n        <a\n          [href]=\"license.url\"\n          target=\"_blank\"\n          class=\"cursor-pointer hover:underline transition-all\"\n        >\n          {{ license.text }}\n          <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      <ng-template #noUrl>\n        <div class=\"text-primary\" gnUiLinkify>\n          {{ license.text }}\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"legalConstraints.length\">\n      <div class=\"mb-6\">\n        <gn-ui-markdown-parser\n          *ngFor=\"let constraint of legalConstraints\"\n          [textContent]=\"constraint\"\n        >\n        </gn-ui-markdown-parser>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <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    </ng-container>\n\n    <span class=\"noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    (metadata.kind === 'dataset' && metadata.lineage) ||\n    metadata.resourceUpdated ||\n    metadata.updateFrequency ||\n    (metadata.kind === 'dataset' && metadata.status)\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n  data-test=\"details-panel\"\n>\n  <div *ngIf=\"metadata.lineage\" class=\"text-gray-900 flex flex-col mt-4 gap-2\">\n    <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n      {{ metadata.lineage }}\n    </p>\n  </div>\n  <div class=\"flex flex-row gap-6 mt-5 mb-8\" *ngIf=\"resourceContact\">\n    <div\n      *ngIf=\"resourceContact.organization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"resourceContact.organization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\" translate>record.metadata.producer</p>\n      <div\n        class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n        data-cy=\"organization-name\"\n      >\n        {{ resourceContact.organization?.name }}\n      </div>\n      <div *ngIf=\"resourceContact.organization?.website\">\n        <a\n          [href]=\"resourceContact.organization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ resourceContact.organization.website }}\n          <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      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matMailOutline\"\n          ></ng-icon>\n          <a\n            *ngIf=\"resourceContact.email\"\n            [href]=\"'mailto:' + resourceContact.email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ resourceContact?.email }}</a\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n  >\n    <div *ngIf=\"metadata.resourceCreated\">\n      <p class=\"text-sm\" translate>record.metadata.creation</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ formatDate(metadata.resourceCreated) }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.resourcePublished\">\n      <p class=\"text-sm\" translate>record.metadata.publication</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ formatDate(metadata.resourcePublished) }}\n      </p>\n    </div>\n    <div *ngIf=\"updateFrequency\">\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.otherLanguages?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n      <div class=\"flex flex-row gap-1 flex-wrap\">\n        <p\n          class=\"text-primary font-medium\"\n          translate\n          *ngFor=\"let language of metadata.otherLanguages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"temporalExtent\">\n      <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n      <div class=\"flex flex-row gap-1 mb-1 text-primary font-medium\">\n        <p\n          *ngIf=\"temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{\n            start: temporalExtent.start,\n            end: temporalExtent.end,\n          }\"\n        >\n          record.metadata.temporalExtent.fromDateToDate\n        </p>\n        <p\n          *ngIf=\"temporalExtent.start && !temporalExtent.end\"\n          translate\n          [translateParams]=\"{ start: temporalExtent.start }\"\n        >\n          record.metadata.temporalExtent.sinceDate\n        </p>\n        <p\n          *ngIf=\"!temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{ end: temporalExtent.end }\"\n        >\n          record.metadata.temporalExtent.untilDate\n        </p>\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.kind !== 'dataset' &&\n    metadata.spatialExtents &&\n    metadata.spatialExtents.length\n  \"\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<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\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    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.recordUpdated && formatDateTime(metadata.recordUpdated) }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.landingPage\">\n      <p class=\"text-sm\" translate>record.metadata.sheet</p>\n      <p class=\"text-primary font-medium\" translate>\n        <a [href]=\"metadata.landingPage\" target=\"_blank\">\n          <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n        </a>\n      </p>\n    </div>\n    <div *ngIf=\"metadata.ownerOrganization\">\n      <p class=\"text-sm\" translate>record.metadata.owner</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.ownerOrganization.name }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.uniqueIdentifier\">\n      <p class=\"text-sm\" translate>record.metadata.uniqueId</p>\n      <div class=\"flex flex-row content-align items-end gap-1\">\n        <gn-ui-copy-text-button\n          [text]=\"metadata.uniqueIdentifier\"\n          [tooltipText]=\"'tooltip.id.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <p class=\"text-primary font-medium\">\n          {{ metadata.uniqueIdentifier }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"metadata.topics?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          [clickable]=\"false\"\n          class=\"inline-block mr-2 mb-2 lowercase\"\n          *ngFor=\"let topic of metadata.topics\"\n          >{{ topic }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button ng-icon{transform:scale(.8)}:host{--gn-ui-badge-background-color: var(--color-primary-white);--gn-ui-badge-text-color: var(--color-primary-darkest)}:host .metadata-info-keywords ::ng-deep gn-ui-badge:hover{--gn-ui-badge-text-color: white}\n"] }]
+                    ], template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost\n    ghostClass=\"h-[178px]\"\n    [showContent]=\"fieldReady('abstract')\"\n  >\n    <gn-ui-max-lines\n      [maxLines]=\"6\"\n      *ngIf=\"metadata.abstract\"\n      data-test=\"metadata-info-abstract\"\n    >\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  </gn-ui-content-ghost>\n\n  <p\n    class=\"mt-6 mb-3 font-medium text-black text-sm\"\n    translate\n    *ngIf=\"!fieldReady('keywords') || metadata.keywords?.length\"\n  >\n    record.metadata.keywords\n  </p>\n\n  <gn-ui-content-ghost\n    ghostClass=\"h-[31px] w-3/4\"\n    [showContent]=\"fieldReady('keywords')\"\n  >\n    <gn-ui-max-lines [maxLines]=\"7\" *ngIf=\"metadata.keywords?.length\">\n      <div class=\"metadata-info-keywords sm:pb-4 flex flex-wrap gap-2\">\n        <gn-ui-badge\n          class=\"inline-block lowercase\"\n          (click)=\"onKeywordClick(keyword)\"\n          [clickable]=\"true\"\n          *ngFor=\"let keyword of metadata.keywords\"\n          >{{ keyword.label }}</gn-ui-badge\n        >\n      </div>\n    </gn-ui-max-lines>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.licenses ||\n    metadata.legalConstraints ||\n    metadata.securityConstraints ||\n    metadata.otherConstraints\n  \"\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    <ng-container *ngFor=\"let license of licenses\">\n      <div *ngIf=\"license.url; else noUrl\" class=\"text-primary\">\n        <a\n          [href]=\"license.url\"\n          target=\"_blank\"\n          class=\"cursor-pointer hover:underline transition-all\"\n        >\n          {{ license.text }}\n          <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      <ng-template #noUrl>\n        <div class=\"text-primary\" gnUiLinkify>\n          {{ license.text }}\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"legalConstraints.length\">\n      <div class=\"mb-6\">\n        <gn-ui-markdown-parser\n          *ngFor=\"let constraint of legalConstraints\"\n          [textContent]=\"constraint\"\n        >\n        </gn-ui-markdown-parser>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <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    </ng-container>\n\n    <span class=\"noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    (metadata.kind === 'dataset' && metadata.lineage) ||\n    resourceContact ||\n    metadata.resourceCreated ||\n    metadata.resourcePublished ||\n    metadata.resourceUpdated ||\n    (metadata.kind === 'dataset' && metadata.updateFrequency) ||\n    metadata.otherLanguages?.length ||\n    (metadata.kind === 'dataset' && temporalExtent)\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n  data-test=\"details-panel\"\n>\n  <div\n    *ngIf=\"metadata.kind === 'dataset' && metadata.lineage\"\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  <div\n    class=\"flex flex-row gap-6 mt-5 mb-8 resource-contact\"\n    *ngIf=\"resourceContact\"\n    data-test=\"details-panel-resource-contact\"\n  >\n    <div\n      *ngIf=\"resourceContact.organization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"resourceContact.organization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\" translate>record.metadata.producer</p>\n      <div\n        class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n        data-cy=\"organization-name\"\n      >\n        {{ resourceContact.organization?.name }}\n      </div>\n      <div *ngIf=\"resourceContact.organization?.website\">\n        <a\n          [href]=\"resourceContact.organization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ resourceContact.organization.website }}\n          <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      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matMailOutline\"\n          ></ng-icon>\n          <a\n            *ngIf=\"resourceContact.email\"\n            [href]=\"'mailto:' + resourceContact.email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ resourceContact?.email }}</a\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n  >\n    <div\n      *ngIf=\"metadata.resourceCreated\"\n      data-test=\"details-panel-resource-created\"\n    >\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    <div\n      *ngIf=\"metadata.resourcePublished\"\n      data-test=\"details-panel-resource-published\"\n    >\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    <div\n      *ngIf=\"metadata.resourceUpdated\"\n      data-test=\"details-panel-resource-updated\"\n    >\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    <div\n      *ngIf=\"metadata.kind === 'dataset' && metadata.updateFrequency\"\n      data-test=\"details-panel-update-frequency\"\n    >\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div\n      *ngIf=\"metadata.otherLanguages?.length\"\n      data-test=\"details-panel-other-languages\"\n    >\n      <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n      <div class=\"flex flex-row gap-1 flex-wrap\">\n        <p\n          class=\"text-primary font-medium other-languages\"\n          translate\n          *ngFor=\"let language of metadata.otherLanguages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div\n      *ngIf=\"metadata.kind === 'dataset' && temporalExtent\"\n      data-test=\"details-panel-temporal-extent\"\n    >\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        <p\n          *ngIf=\"temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{\n            start: temporalExtent.start,\n            end: temporalExtent.end,\n          }\"\n        >\n          record.metadata.temporalExtent.fromDateToDate\n        </p>\n        <p\n          *ngIf=\"temporalExtent.start && !temporalExtent.end\"\n          translate\n          [translateParams]=\"{ start: temporalExtent.start }\"\n        >\n          record.metadata.temporalExtent.sinceDate\n        </p>\n        <p\n          *ngIf=\"!temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{ end: temporalExtent.end }\"\n        >\n          record.metadata.temporalExtent.untilDate\n        </p>\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.kind !== 'dataset' &&\n    metadata.spatialExtents &&\n    metadata.spatialExtents.length\n  \"\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<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\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    <div *ngIf=\"metadata.recordUpdated\">\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    <div *ngIf=\"metadata.landingPage\">\n      <p class=\"text-sm\" translate>record.metadata.sheet</p>\n      <p class=\"text-primary font-medium\" translate>\n        <a [href]=\"metadata.landingPage\" target=\"_blank\">\n          <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n        </a>\n      </p>\n    </div>\n    <div *ngIf=\"metadata.ownerOrganization\">\n      <p class=\"text-sm\" translate>record.metadata.owner</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.ownerOrganization.name }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.uniqueIdentifier\">\n      <p class=\"text-sm\" translate>record.metadata.uniqueId</p>\n      <div class=\"flex flex-row content-align items-end gap-1\">\n        <gn-ui-copy-text-button\n          [text]=\"metadata.uniqueIdentifier\"\n          [tooltipText]=\"'tooltip.id.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <p class=\"text-primary font-medium\">\n          {{ metadata.uniqueIdentifier }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"metadata.topics?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          [clickable]=\"false\"\n          class=\"inline-block mr-2 mb-2 lowercase\"\n          *ngFor=\"let topic of metadata.topics\"\n          >{{ topic }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button ng-icon{transform:scale(.8)}:host{--gn-ui-badge-background-color: var(--color-primary-white);--gn-ui-badge-text-color: var(--color-primary-darkest)}:host .metadata-info-keywords ::ng-deep gn-ui-badge:hover{--gn-ui-badge-text-color: white}\n"] }]
         }], ctorParameters: () => [{ type: DateService }], propDecorators: { metadata: [{
                 type: Input
             }], incomplete: [{
@@ -34443,7 +34712,7 @@ class RecordApiFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RecordApiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            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          <div\n            *ngIf=\"!supportOffset\"\n            class=\"flex items-center gap-2 text-orange-500 z-10 ml-3\"\n          >\n            <span\n              class=\"material-symbols-outlined\"\n              matTooltip=\"Not supported on this service\"\n            >\n              warning\n            </span>\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"outputFormats\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button 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: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { 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: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            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          <div\n            *ngIf=\"!supportOffset\"\n            class=\"flex items-center gap-2 text-orange-500 z-10 ml-3\"\n          >\n            <span\n              class=\"material-symbols-outlined\"\n              matTooltip=\"Not supported on this service\"\n            >\n              warning\n            </span>\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"outputFormats\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button 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: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { 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: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RecordApiFormComponent, decorators: [{
             type: Component,
@@ -34459,59 +34728,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-class TimeSincePipe {
-    constructor(translate) {
-        this.translate = translate;
-    }
-    transform(value) {
-        if (isNaN(value.getTime())) {
-            throw new Error('Invalid Date');
-        }
-        const maintenant = new Date();
-        let locale;
-        switch (this.translate.currentLang) {
-            case 'fr':
-                locale = fr$1;
-                break;
-            case 'de':
-                locale = de$1;
-                break;
-            case 'es':
-                locale = es$1;
-                break;
-            case 'it':
-                locale = it$1;
-                break;
-            case 'nl':
-                locale = nl$1;
-                break;
-            case 'pt':
-                locale = pt$1;
-                break;
-            case 'sk':
-                locale = sk$1;
-                break;
-            case 'en':
-            default:
-                locale = enUS;
-                break;
-        }
-        return formatDistance(value, maintenant, {
-            addSuffix: true,
-            locale: locale,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeSincePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TimeSincePipe, isStandalone: true, name: "timeSince" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimeSincePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'timeSince',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
-
 class UserFeedbackItemComponent {
     constructor() {
         this.newUserFeedbackAnswer = new EventEmitter();
@@ -34544,7 +34760,7 @@ class UserFeedbackItemComponent {
         this.onNewAnswerValueChange();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserFeedbackItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserFeedbackItemComponent, isStandalone: true, selector: "gn-ui-user-feedback-item", inputs: { userFeedbackParent: "userFeedbackParent", userFeedBacksAnswers: "userFeedBacksAnswers", activeUser: "activeUser", isLastComment: "isLastComment", isAddUserFeedbackLoading: "isAddUserFeedbackLoading" }, outputs: { newUserFeedbackAnswer: "newUserFeedbackAnswer" }, ngImport: i0, template: "<div\n  *ngIf=\"userFeedbackParent.published\"\n  class=\"flex flex-col bg-white rounded w-full\"\n  [ngClass]=\"[isAnAnswer ? 'ps-4 ' : 'p-4']\"\n>\n  <div class=\"flex flex-row\">\n    <div class=\"avatar\">\n      <img\n        class=\"rounded-full\"\n        [src]=\"userFeedbackParent.avatarUrl\"\n        alt=\"avatar\"\n      />\n    </div>\n    <div class=\"p-4 flex flex-col\">\n      <span>{{ userFeedbackParent.authorName }}</span>\n      <span> {{ userFeedbackParent.date | timeSince }}</span>\n    </div>\n  </div>\n  <div data-cy=\"commentText\" class=\"mt-4 whitespace-pre-line\">\n    {{ userFeedbackParent.comment }}\n  </div>\n  <div\n    class=\"w-full\"\n    *ngFor=\"let userFeedBacksAnswer of userFeedBacksAnswers; let last = last\"\n  >\n    <hr class=\"-mx-4 my-6\" />\n    <gn-ui-user-feedback-item\n      [userFeedbackParent]=\"userFeedBacksAnswer\"\n      [isLastComment]=\"last\"\n    ></gn-ui-user-feedback-item>\n  </div>\n\n  <div *ngIf=\"activeUser\" class=\"mt-2 flex flex-col\">\n    <hr class=\"-mx-4 my-4\" />\n    <div\n      id=\"new-comment-buttons\"\n      class=\"flex flex-row gap-2 items-center justify-end\"\n    >\n      <gn-ui-text-area\n        [disabled]=\"isAddUserFeedbackLoading\"\n        [(value)]=\"newAnswer\"\n        (valueChange)=\"onNewAnswerValueChange()\"\n        (keyup.control.enter)=\"publishNewAnswer()\"\n        [placeholder]=\"\n          'record.metadata.userFeedbacks.newAnswer.placeholder' | translate\n        \"\n        class=\"grow\"\n        extraClass=\"bg-transparent border-0 placeholder-primary-darker text-primary-darker h-9\"\n      ></gn-ui-text-area>\n      <div *ngIf=\"!isAnswerEmpty\" class=\"flex flex-row justify-end\">\n        <gn-ui-button\n          [disabled]=\"isAddUserFeedbackLoading\"\n          [type]=\"'outline'\"\n          (buttonClick)=\"publishNewAnswer()\"\n          [title]=\"\n            'record.metadata.userFeedbacks.newAnswer.buttonTitle' | translate\n          \"\n          extraClass=\"!p-[0.5em] text-primary-darker border-primary-darker h-9\"\n        >\n          <ng-icon *ngIf=\"!isAddUserFeedbackLoading\" name=\"matSendOutline\">\n          </ng-icon>\n          <ng-container *ngIf=\"isAddUserFeedbackLoading\">\n            <div class=\"flex justify-center w-full\">\n              <gn-ui-spinning-loader></gn-ui-spinning-loader>\n            </div>\n          </ng-container>\n        </gn-ui-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: UserFeedbackItemComponent, selector: "gn-ui-user-feedback-item", inputs: ["userFeedbackParent", "userFeedBacksAnswers", "activeUser", "isLastComment", "isAddUserFeedbackLoading"], outputs: ["newUserFeedbackAnswer"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TimeSincePipe, name: "timeSince" }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserFeedbackItemComponent, isStandalone: true, selector: "gn-ui-user-feedback-item", inputs: { userFeedbackParent: "userFeedbackParent", userFeedBacksAnswers: "userFeedBacksAnswers", activeUser: "activeUser", isLastComment: "isLastComment", isAddUserFeedbackLoading: "isAddUserFeedbackLoading" }, outputs: { newUserFeedbackAnswer: "newUserFeedbackAnswer" }, ngImport: i0, template: "<div\n  *ngIf=\"userFeedbackParent.published\"\n  class=\"flex flex-col bg-white rounded w-full\"\n  [ngClass]=\"[isAnAnswer ? 'ps-4 ' : 'p-4']\"\n>\n  <div class=\"flex flex-row\">\n    <div class=\"avatar\">\n      <img\n        class=\"rounded-full\"\n        [src]=\"userFeedbackParent.avatarUrl\"\n        alt=\"avatar\"\n      />\n    </div>\n    <div class=\"p-4 flex flex-col\">\n      <span>{{ userFeedbackParent.authorName }}</span>\n      <span [gnUiHumanizeDate]=\"userFeedbackParent.date\"></span>\n    </div>\n  </div>\n  <div data-cy=\"commentText\" class=\"mt-4 whitespace-pre-line\">\n    {{ userFeedbackParent.comment }}\n  </div>\n  <div\n    class=\"w-full\"\n    *ngFor=\"let userFeedBacksAnswer of userFeedBacksAnswers; let last = last\"\n  >\n    <hr class=\"-mx-4 my-6\" />\n    <gn-ui-user-feedback-item\n      [userFeedbackParent]=\"userFeedBacksAnswer\"\n      [isLastComment]=\"last\"\n    ></gn-ui-user-feedback-item>\n  </div>\n\n  <div *ngIf=\"activeUser\" class=\"mt-2 flex flex-col\">\n    <hr class=\"-mx-4 my-4\" />\n    <div\n      id=\"new-comment-buttons\"\n      class=\"flex flex-row gap-2 items-center justify-end\"\n    >\n      <gn-ui-text-area\n        [disabled]=\"isAddUserFeedbackLoading\"\n        [(value)]=\"newAnswer\"\n        (valueChange)=\"onNewAnswerValueChange()\"\n        (keyup.control.enter)=\"publishNewAnswer()\"\n        [placeholder]=\"\n          'record.metadata.userFeedbacks.newAnswer.placeholder' | translate\n        \"\n        class=\"grow\"\n        extraClass=\"bg-transparent border-0 placeholder-primary-darker text-primary-darker h-9\"\n      ></gn-ui-text-area>\n      <div *ngIf=\"!isAnswerEmpty\" class=\"flex flex-row justify-end\">\n        <gn-ui-button\n          [disabled]=\"isAddUserFeedbackLoading\"\n          [type]=\"'outline'\"\n          (buttonClick)=\"publishNewAnswer()\"\n          [title]=\"\n            'record.metadata.userFeedbacks.newAnswer.buttonTitle' | translate\n          \"\n          extraClass=\"!p-[0.5em] text-primary-darker border-primary-darker h-9\"\n        >\n          <ng-icon *ngIf=\"!isAddUserFeedbackLoading\" name=\"matSendOutline\">\n          </ng-icon>\n          <ng-container *ngIf=\"isAddUserFeedbackLoading\">\n            <div class=\"flex justify-center w-full\">\n              <gn-ui-spinning-loader></gn-ui-spinning-loader>\n            </div>\n          </ng-container>\n        </gn-ui-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: UserFeedbackItemComponent, selector: "gn-ui-user-feedback-item", inputs: ["userFeedbackParent", "userFeedBacksAnswers", "activeUser", "isLastComment", "isAddUserFeedbackLoading"], outputs: ["newUserFeedbackAnswer"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "directive", type: GnUiHumanizeDateDirective, selector: "[gnUiHumanizeDate]", inputs: ["gnUiHumanizeDate"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [
             provideIcons({
                 matSendOutline,
             }),
@@ -34554,17 +34770,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Component,
             args: [{ selector: 'gn-ui-user-feedback-item', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
-                        TimeSincePipe,
                         TextAreaComponent,
                         TranslatePipe,
                         ButtonComponent,
                         SpinningLoaderComponent,
+                        GnUiHumanizeDateDirective,
                         NgIcon,
                     ], viewProviders: [
                         provideIcons({
                             matSendOutline,
                         }),
-                    ], template: "<div\n  *ngIf=\"userFeedbackParent.published\"\n  class=\"flex flex-col bg-white rounded w-full\"\n  [ngClass]=\"[isAnAnswer ? 'ps-4 ' : 'p-4']\"\n>\n  <div class=\"flex flex-row\">\n    <div class=\"avatar\">\n      <img\n        class=\"rounded-full\"\n        [src]=\"userFeedbackParent.avatarUrl\"\n        alt=\"avatar\"\n      />\n    </div>\n    <div class=\"p-4 flex flex-col\">\n      <span>{{ userFeedbackParent.authorName }}</span>\n      <span> {{ userFeedbackParent.date | timeSince }}</span>\n    </div>\n  </div>\n  <div data-cy=\"commentText\" class=\"mt-4 whitespace-pre-line\">\n    {{ userFeedbackParent.comment }}\n  </div>\n  <div\n    class=\"w-full\"\n    *ngFor=\"let userFeedBacksAnswer of userFeedBacksAnswers; let last = last\"\n  >\n    <hr class=\"-mx-4 my-6\" />\n    <gn-ui-user-feedback-item\n      [userFeedbackParent]=\"userFeedBacksAnswer\"\n      [isLastComment]=\"last\"\n    ></gn-ui-user-feedback-item>\n  </div>\n\n  <div *ngIf=\"activeUser\" class=\"mt-2 flex flex-col\">\n    <hr class=\"-mx-4 my-4\" />\n    <div\n      id=\"new-comment-buttons\"\n      class=\"flex flex-row gap-2 items-center justify-end\"\n    >\n      <gn-ui-text-area\n        [disabled]=\"isAddUserFeedbackLoading\"\n        [(value)]=\"newAnswer\"\n        (valueChange)=\"onNewAnswerValueChange()\"\n        (keyup.control.enter)=\"publishNewAnswer()\"\n        [placeholder]=\"\n          'record.metadata.userFeedbacks.newAnswer.placeholder' | translate\n        \"\n        class=\"grow\"\n        extraClass=\"bg-transparent border-0 placeholder-primary-darker text-primary-darker h-9\"\n      ></gn-ui-text-area>\n      <div *ngIf=\"!isAnswerEmpty\" class=\"flex flex-row justify-end\">\n        <gn-ui-button\n          [disabled]=\"isAddUserFeedbackLoading\"\n          [type]=\"'outline'\"\n          (buttonClick)=\"publishNewAnswer()\"\n          [title]=\"\n            'record.metadata.userFeedbacks.newAnswer.buttonTitle' | translate\n          \"\n          extraClass=\"!p-[0.5em] text-primary-darker border-primary-darker h-9\"\n        >\n          <ng-icon *ngIf=\"!isAddUserFeedbackLoading\" name=\"matSendOutline\">\n          </ng-icon>\n          <ng-container *ngIf=\"isAddUserFeedbackLoading\">\n            <div class=\"flex justify-center w-full\">\n              <gn-ui-spinning-loader></gn-ui-spinning-loader>\n            </div>\n          </ng-container>\n        </gn-ui-button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  *ngIf=\"userFeedbackParent.published\"\n  class=\"flex flex-col bg-white rounded w-full\"\n  [ngClass]=\"[isAnAnswer ? 'ps-4 ' : 'p-4']\"\n>\n  <div class=\"flex flex-row\">\n    <div class=\"avatar\">\n      <img\n        class=\"rounded-full\"\n        [src]=\"userFeedbackParent.avatarUrl\"\n        alt=\"avatar\"\n      />\n    </div>\n    <div class=\"p-4 flex flex-col\">\n      <span>{{ userFeedbackParent.authorName }}</span>\n      <span [gnUiHumanizeDate]=\"userFeedbackParent.date\"></span>\n    </div>\n  </div>\n  <div data-cy=\"commentText\" class=\"mt-4 whitespace-pre-line\">\n    {{ userFeedbackParent.comment }}\n  </div>\n  <div\n    class=\"w-full\"\n    *ngFor=\"let userFeedBacksAnswer of userFeedBacksAnswers; let last = last\"\n  >\n    <hr class=\"-mx-4 my-6\" />\n    <gn-ui-user-feedback-item\n      [userFeedbackParent]=\"userFeedBacksAnswer\"\n      [isLastComment]=\"last\"\n    ></gn-ui-user-feedback-item>\n  </div>\n\n  <div *ngIf=\"activeUser\" class=\"mt-2 flex flex-col\">\n    <hr class=\"-mx-4 my-4\" />\n    <div\n      id=\"new-comment-buttons\"\n      class=\"flex flex-row gap-2 items-center justify-end\"\n    >\n      <gn-ui-text-area\n        [disabled]=\"isAddUserFeedbackLoading\"\n        [(value)]=\"newAnswer\"\n        (valueChange)=\"onNewAnswerValueChange()\"\n        (keyup.control.enter)=\"publishNewAnswer()\"\n        [placeholder]=\"\n          'record.metadata.userFeedbacks.newAnswer.placeholder' | translate\n        \"\n        class=\"grow\"\n        extraClass=\"bg-transparent border-0 placeholder-primary-darker text-primary-darker h-9\"\n      ></gn-ui-text-area>\n      <div *ngIf=\"!isAnswerEmpty\" class=\"flex flex-row justify-end\">\n        <gn-ui-button\n          [disabled]=\"isAddUserFeedbackLoading\"\n          [type]=\"'outline'\"\n          (buttonClick)=\"publishNewAnswer()\"\n          [title]=\"\n            'record.metadata.userFeedbacks.newAnswer.buttonTitle' | translate\n          \"\n          extraClass=\"!p-[0.5em] text-primary-darker border-primary-darker h-9\"\n        >\n          <ng-icon *ngIf=\"!isAddUserFeedbackLoading\" name=\"matSendOutline\">\n          </ng-icon>\n          <ng-container *ngIf=\"isAddUserFeedbackLoading\">\n            <div class=\"flex justify-center w-full\">\n              <gn-ui-spinning-loader></gn-ui-spinning-loader>\n            </div>\n          </ng-container>\n        </gn-ui-button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { userFeedbackParent: [{
                 type: Input
             }], userFeedBacksAnswers: [{
@@ -34584,7 +34800,7 @@ class UserPreviewComponent {
         return (this.user.name + ' ' + this.user.surname).trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserPreviewComponent, isStandalone: true, selector: "gn-ui-user-preview", inputs: { user: "user", avatarPlaceholder: "avatarPlaceholder" }, ngImport: i0, template: "<figure class=\"text-center\">\n  <div class=\"w-10 h-10 rounded-full capitalize\" [matTooltip]=\"userFullName\">\n    <gn-ui-avatar\n      [avatarUrl]=\"user.profileIcon\"\n      [avatarPlaceholder]=\"avatarPlaceholder\"\n    ></gn-ui-avatar>\n  </div>\n</figure>\n", dependencies: [{ kind: "component", type: AvatarComponent, selector: "gn-ui-avatar", inputs: ["avatarUrl", "avatarPlaceholder"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserPreviewComponent, isStandalone: true, selector: "gn-ui-user-preview", inputs: { user: "user", avatarPlaceholder: "avatarPlaceholder" }, ngImport: i0, template: "<figure class=\"text-center\">\n  <div class=\"w-10 h-10 rounded-full capitalize\" [matTooltip]=\"userFullName\">\n    <gn-ui-avatar\n      [avatarUrl]=\"user.profileIcon\"\n      [avatarPlaceholder]=\"avatarPlaceholder\"\n    ></gn-ui-avatar>\n  </div>\n</figure>\n", dependencies: [{ kind: "component", type: AvatarComponent, selector: "gn-ui-avatar", inputs: ["avatarUrl", "avatarPlaceholder"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserPreviewComponent, decorators: [{
             type: Component,
@@ -34952,6 +35168,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['expanel', { read: ExpandablePanelComponent, static: true }]
             }] } });
 
+class StacItemsResultGridComponent {
+    constructor() {
+        this.items = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StacItemsResultGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StacItemsResultGridComponent, isStandalone: true, selector: "gn-ui-stac-items-result-grid", inputs: { items: "items" }, ngImport: i0, template: "<div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[10px]\">\n  <div *ngFor=\"let item of items\">\n    <div\n      data-cy=\"stac-item-card\"\n      class=\"h-[173px] flex flex-col justify-between gap-4 bg-white rounded-lg border border-gray-300 px-5 py-3 mx-auto\"\n    >\n      <h2 class=\"text-xl text-black line-clamp-4 break-words\">\n        {{ item.id }}\n      </h2>\n      <p class=\"truncate\">{{ item.properties.datetime }}</p>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StacItemsResultGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-stac-items-result-grid', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[10px]\">\n  <div *ngFor=\"let item of items\">\n    <div\n      data-cy=\"stac-item-card\"\n      class=\"h-[173px] flex flex-col justify-between gap-4 bg-white rounded-lg border border-gray-300 px-5 py-3 mx-auto\"\n    >\n      <h2 class=\"text-xl text-black line-clamp-4 break-words\">\n        {{ item.id }}\n      </h2>\n      <p class=\"truncate\">{{ item.properties.datetime }}</p>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { items: [{
+                type: Input
+            }] } });
+
 const blockModelFixture = () => ({
     key: 'tag',
     items: [
@@ -35018,7 +35248,7 @@ class FacetItemComponent {
         this.onInvertedChange(this.inverted);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FacetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FacetItemComponent, isStandalone: true, selector: "gn-ui-facet-item", inputs: { label: "label", count: "count", selected: "selected", inverted: "inverted" }, outputs: { selectedChange: "selectedChange", invertedChange: "invertedChange" }, ngImport: i0, template: "<div\n  class=\"flex flex-row items-center group px-1 my-1 hover:bg-gray-100 rounded-sm\"\n>\n  <label class=\"grow shrink truncate cursor-pointer group-hover:text-black\">\n    <input\n      type=\"checkbox\"\n      class=\"cursor-pointer\"\n      [ngModel]=\"selected\"\n      (ngModelChange)=\"onSelectedChange($event)\"\n    />\n    {{ label | translate }}\n    <span class=\"group-hover:text-black\">({{ count }})</span>\n  </label>\n  <div\n    *ngIf=\"!inverted\"\n    class=\"shrink-0 cursor-pointer invisible group-hover:visible icon-exclude\"\n    style=\"min-width: 20px\"\n    (click)=\"toggleInverted()\"\n  >\n    <!-- minus svg -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\"\n        clip-rule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    *ngIf=\"inverted\"\n    class=\"shrink-0 cursor-pointer invisible group-hover:visible icon-include\"\n    style=\"min-width: 20px\"\n    (click)=\"toggleInverted()\"\n  >\n    <!-- check svg -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n        clip-rule=\"evenodd\"\n      />\n    </svg>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FacetItemComponent, isStandalone: true, selector: "gn-ui-facet-item", inputs: { label: "label", count: "count", selected: "selected", inverted: "inverted" }, outputs: { selectedChange: "selectedChange", invertedChange: "invertedChange" }, ngImport: i0, template: "<div\n  class=\"flex flex-row items-center group px-1 my-1 hover:bg-gray-100 rounded-sm\"\n>\n  <label class=\"grow shrink truncate cursor-pointer group-hover:text-black\">\n    <input\n      type=\"checkbox\"\n      class=\"cursor-pointer\"\n      [ngModel]=\"selected\"\n      (ngModelChange)=\"onSelectedChange($event)\"\n    />\n    {{ label | translate }}\n    <span class=\"group-hover:text-black\">({{ count }})</span>\n  </label>\n  <div\n    *ngIf=\"!inverted\"\n    class=\"shrink-0 cursor-pointer invisible group-hover:visible icon-exclude\"\n    style=\"min-width: 20px\"\n    (click)=\"toggleInverted()\"\n  >\n    <!-- minus svg -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\"\n        clip-rule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    *ngIf=\"inverted\"\n    class=\"shrink-0 cursor-pointer invisible group-hover:visible icon-include\"\n    style=\"min-width: 20px\"\n    (click)=\"toggleInverted()\"\n  >\n    <!-- check svg -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n        clip-rule=\"evenodd\"\n      />\n    </svg>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FacetItemComponent, decorators: [{
             type: Component,
@@ -38252,13 +38482,24 @@ class DataService {
             if (!featureType) {
                 throw new Error('wfs.featuretype.notfound');
             }
+            const wfsVersion = endpoint.getVersion();
+            const addSrsName = wfsVersion === '1.1.0' || wfsVersion === '2.0.0';
+            const defaultCrs = featureType.defaultCrs;
+            const shouldAddOutputCrs = addSrsName && defaultCrs;
             return {
-                all: featureType.outputFormats.reduce((prev, curr) => ({
-                    ...prev,
-                    [curr]: endpoint.getFeatureUrl(featureType.name, {
-                        outputFormat: curr,
-                    }),
-                }), {}),
+                all: featureType.outputFormats.reduce((prev, curr) => {
+                    const isJsonFormat = curr.toLowerCase().includes('json');
+                    return {
+                        ...prev,
+                        [curr]: endpoint.getFeatureUrl(featureType.name, {
+                            outputFormat: curr,
+                            ...(shouldAddOutputCrs &&
+                                !isJsonFormat && {
+                                outputCrs: defaultCrs,
+                            }),
+                        }),
+                    };
+                }, {}),
                 geojson: endpoint.supportsJson(featureType.name)
                     ? endpoint.getFeatureUrl(featureType.name, {
                         asJson: true,
@@ -38343,6 +38584,13 @@ class DataService {
             throw new Error(`ogc.unreachable.unknown`);
         });
     }
+    async getItemsFromStacApi(url, options) {
+        return await StacEndpoint.getItemsFromUrl(url, options)
+            .then((response) => response)
+            .catch(() => {
+            throw new Error(`ogc.unreachable.unknown`);
+        });
+    }
     async getGeodataLinksFromTms(tmsLink, keepOriginalLink = false) {
         const endpoint = new TmsEndpoint(tmsLink.url.toString().replace(/\/?$/, `/${tmsLink.name}`));
         const tileMaps = await endpoint.allTileMaps.catch(() => {
@@ -39269,7 +39517,7 @@ class GeoTableViewComponent {
         this.subscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeoTableViewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GeoTableViewComponent, isStandalone: true, selector: "gn-ui-geo-table-view", inputs: { dataset: "dataset" }, viewQueries: [{ propertyName: "uiTable", first: true, predicate: ["table"], descendants: true }, { propertyName: "mapContainer", first: true, predicate: ["mapContainer"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-row h-full overflow-auto\">\n  <gn-ui-data-table\n    #table\n    class=\"w-1/2 overflow-auto\"\n    [dataset]=\"dataset\"\n    [activeId]=\"selectionId\"\n    (selected)=\"onTableSelect($event)\"\n  ></gn-ui-data-table>\n  <gn-ui-map-container\n    #mapContainer\n    class=\"w-1/2 h-full\"\n    [context]=\"mapContext\"\n    (featuresClick)=\"onMapFeatureSelect($event)\"\n  ></gn-ui-map-container>\n  <gn-ui-feature-detail\n    style=\"width: 300px\"\n    class=\"p-3 shrink-0 overflow-auto\"\n    [feature]=\"selection\"\n  ></gn-ui-feature-detail>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MapContainerComponent, selector: "gn-ui-map-container", inputs: ["context"], outputs: ["featuresClick", "featuresHover", "mapClick", "sourceLoadError"] }, { kind: "component", type: FeatureDetailComponent, selector: "gn-ui-feature-detail", inputs: ["feature", "featureCatalog"] }, { kind: "component", type: DataTableComponent, selector: "gn-ui-data-table", inputs: ["featureAttributes", "dataset", "activeId"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GeoTableViewComponent, isStandalone: true, selector: "gn-ui-geo-table-view", inputs: { dataset: "dataset" }, viewQueries: [{ propertyName: "uiTable", first: true, predicate: ["table"], descendants: true }, { propertyName: "mapContainer", first: true, predicate: ["mapContainer"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-row h-full overflow-auto\">\n  <gn-ui-data-table\n    #table\n    class=\"w-1/2 overflow-auto\"\n    [dataset]=\"dataset\"\n    [activeId]=\"selectionId\"\n    (selected)=\"onTableSelect($event)\"\n  ></gn-ui-data-table>\n  <gn-ui-map-container\n    #mapContainer\n    class=\"w-1/2 h-full\"\n    [context]=\"mapContext\"\n    (featuresClick)=\"onMapFeatureSelect($event)\"\n  ></gn-ui-map-container>\n  <gn-ui-feature-detail\n    style=\"width: 300px\"\n    class=\"p-3 shrink-0 overflow-auto\"\n    [feature]=\"selection\"\n  ></gn-ui-feature-detail>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MapContainerComponent, selector: "gn-ui-map-container", inputs: ["context"], outputs: ["featuresClick", "featuresHover", "mapClick", "extentChange", "sourceLoadError", "resolvedExtentChange"] }, { kind: "component", type: FeatureDetailComponent, selector: "gn-ui-feature-detail", inputs: ["feature", "featureCatalog"] }, { kind: "component", type: DataTableComponent, selector: "gn-ui-data-table", inputs: ["featureAttributes", "dataset", "activeId"], outputs: ["selected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeoTableViewComponent, decorators: [{
             type: Component,
@@ -39372,23 +39620,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-class StacViewComponent {
-    constructor() {
-        this.subscription = new Subscription();
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StacViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StacViewComponent, isStandalone: true, selector: "gn-ui-stac-view", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\">\n  <div\n    class=\"relative h-full mt-6 bg-white border border-gray-300 rounded-lg overflow-hidden\"\n  ></div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StacViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-stac-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, TranslatePipe], template: "<div class=\"w-full h-full flex flex-col\">\n  <div\n    class=\"relative h-full mt-6 bg-white border border-gray-300 rounded-lg overflow-hidden\"\n  ></div>\n</div>\n" }]
-        }], propDecorators: { link: [{
-                type: Input
-            }] } });
-
 /**
  * The Metadata View Facade is used to render complete metadata records.
  * Supply it with an incomplete record (at least containing the uuid) and the
@@ -39419,6 +39650,18 @@ class MdViewFacade {
         this.sourceOf$ = this.store.pipe(select(getSourceOf));
         this.chartConfig$ = this.store.pipe(select(getChartConfig));
         this.allLinks$ = this.metadata$.pipe(map$1((record) => 'onlineResources' in record ? record.onlineResources : []), shareReplay$1(1));
+        this.resourceDoi$ = this.metadata$.pipe(map$1((record) => {
+            if (!record?.resourceIdentifiers?.length)
+                return null;
+            const doiIdentifier = record.resourceIdentifiers.find((id) => id.codeSpace?.toLowerCase().includes('doi.org') ||
+                id.code.startsWith('10.'));
+            if (!doiIdentifier)
+                return null;
+            return {
+                code: doiIdentifier.code,
+                url: doiIdentifier.url ? doiIdentifier.url : null,
+            };
+        }), shareReplay$1(1));
         this.apiLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))), shareReplay$1(1));
         this.mapApiLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.MAP_API))), shareReplay$1(1));
         this.stacLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => link.type === 'service' && link.accessServiceProtocol === 'stac')), shareReplay$1(1));
@@ -39522,7 +39765,7 @@ class MdViewEffects {
         */
         this.loadRelatedRecords$ = createEffect(() => this.actions$.pipe(ofType(loadFullMetadataSuccess), switchMap$1(({ full }) => this.recordsRepository.getSimilarRecords(full)), map$1((related) => {
             return setRelated({ related });
-        }), catchError((error) => of(setRelated({ related: null })))));
+        }), catchError(() => of(setRelated({ related: null })))));
         this.loadSources$ = createEffect(() => this.actions$.pipe(ofType(loadFullMetadataSuccess), switchMap$1(({ full }) => this.recordsRepository.getSources(full)), map$1((sources) => {
             return setSources({ sources });
         }), catchError(() => of(setSources({ sources: null })))));
@@ -39579,8 +39822,9 @@ class DataViewPermalinkComponent {
     set viewType(value) {
         this.viewType$.next(value);
     }
-    constructor(config, wcEmbedderBaseUrl, facade) {
+    constructor(config, proxyPath, wcEmbedderBaseUrl, facade) {
         this.config = config;
+        this.proxyPath = proxyPath;
         this.wcEmbedderBaseUrl = wcEmbedderBaseUrl;
         this.facade = facade;
         this.viewType$ = new BehaviorSubject('map');
@@ -39613,6 +39857,9 @@ class DataViewPermalinkComponent {
                 url.searchParams.append('e', `gn-dataset-view-map`);
             }
             url.searchParams.append('a', `api-url=${this.config.basePath}`);
+            if (this.proxyPath) {
+                url.searchParams.append('a', `proxy-path=${this.proxyPath}`);
+            }
             url.searchParams.append('a', `dataset-id=${metadata.uniqueIdentifier}`);
             url.searchParams.append('a', `primary-color=#0f4395`);
             url.searchParams.append('a', `secondary-color=#8bc832`);
@@ -39621,7 +39868,7 @@ class DataViewPermalinkComponent {
             return url.toString();
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataViewPermalinkComponent, deps: [{ token: Configuration }, { token: WEB_COMPONENT_EMBEDDER_URL, optional: true }, { token: MdViewFacade }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataViewPermalinkComponent, deps: [{ token: Configuration }, { token: PROXY_PATH, optional: true }, { token: WEB_COMPONENT_EMBEDDER_URL, optional: true }, { token: MdViewFacade }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataViewPermalinkComponent, isStandalone: true, selector: "gn-ui-data-view-permalink", inputs: { viewType: "viewType" }, ngImport: i0, template: "<gn-ui-copy-text-button\n  *ngIf=\"wcEmbedderBaseUrl\"\n  [text]=\"permalinkUrl$ | async\"\n  [tooltipText]=\"'tooltip.url.copy' | translate\"\n></gn-ui-copy-text-button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataViewPermalinkComponent, decorators: [{
@@ -39632,6 +39879,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     args: [Configuration]
                 }] }, { type: undefined, decorators: [{
                     type: Optional
+                }, {
+                    type: Inject,
+                    args: [PROXY_PATH]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
                 }, {
                     type: Inject,
                     args: [WEB_COMPONENT_EMBEDDER_URL]
@@ -39740,8 +39992,9 @@ class DataViewWebComponentComponent {
     set viewType(value) {
         this.viewType$.next(value);
     }
-    constructor(config, facade) {
+    constructor(config, proxyPath, facade) {
         this.config = config;
+        this.proxyPath = proxyPath;
         this.facade = facade;
         this.viewType$ = new BehaviorSubject('map');
         this.webComponentHtml$ = combineLatest(this.viewType$, this.facade.chartConfig$, this.facade.metadata$).pipe(map$2(([viewType, config, metadata]) => {
@@ -39750,7 +40003,10 @@ class DataViewWebComponentComponent {
                     const { aggregation, xProperty, yProperty, chartType } = config;
                     return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${GEONETWORK_UI_TAG_NAME}/gn-wc.js"></script>
   <gn-dataset-view-chart
-          api-url="${new URL(this.config.basePath, window.location.origin).toString()}"
+          api-url="${new URL(this.config.basePath, window.location.origin).toString()}"${this.proxyPath
+                        ? `
+          proxy-path="${this.proxyPath}"`
+                        : ''}
           dataset-id="${metadata.uniqueIdentifier}"
           aggregation="${aggregation}"
           x-property="${xProperty}"
@@ -39769,7 +40025,10 @@ class DataViewWebComponentComponent {
             else if (viewType === 'table') {
                 return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${GEONETWORK_UI_TAG_NAME}/gn-wc.js"></script>
   <gn-dataset-view-table
-          api-url="${new URL(this.config.basePath, window.location.origin).toString()}"
+          api-url="${new URL(this.config.basePath, window.location.origin).toString()}"${this.proxyPath
+                    ? `
+          proxy-path="${this.proxyPath}"`
+                    : ''}
           dataset-id="${metadata.uniqueIdentifier}"
           primary-color="#0f4395"
           secondary-color="#8bc832"
@@ -39782,7 +40041,10 @@ class DataViewWebComponentComponent {
             else {
                 return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${GEONETWORK_UI_TAG_NAME}/gn-wc.js"></script>
 <gn-dataset-view-map
-        api-url="${new URL(this.config.basePath, window.location.origin).toString()}"
+        api-url="${new URL(this.config.basePath, window.location.origin).toString()}"${this.proxyPath
+                    ? `
+        proxy-path="${this.proxyPath}"`
+                    : ''}
         dataset-id="${metadata.uniqueIdentifier}"
         primary-color="#0f4395"
         secondary-color="#8bc832"
@@ -39794,7 +40056,7 @@ class DataViewWebComponentComponent {
             }
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataViewWebComponentComponent, deps: [{ token: Configuration }, { token: MdViewFacade }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataViewWebComponentComponent, deps: [{ token: Configuration }, { token: PROXY_PATH, optional: true }, { token: MdViewFacade }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataViewWebComponentComponent, isStandalone: true, selector: "gn-ui-data-view-web-component", inputs: { viewType: "viewType" }, ngImport: i0, template: "<gn-ui-copy-text-button\n  [text]=\"webComponentHtml$ | async\"\n  [rows]=\"3\"\n  [tooltipText]=\"'tooltip.html.copy' | translate\"\n></gn-ui-copy-text-button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataViewWebComponentComponent, decorators: [{
@@ -39803,6 +40065,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: Configuration, decorators: [{
                     type: Inject,
                     args: [Configuration]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [PROXY_PATH]
                 }] }, { type: MdViewFacade }], propDecorators: { viewType: [{
                 type: Input
             }] } });
@@ -40078,21 +40345,21 @@ class GpfApiDlComponent {
         this.choices = await this.getCapabilities();
         const tempZone = this.choices.zone.map((bucket) => ({
             value: bucket.term,
-            label: bucket.label,
+            label: String(bucket.label),
         }));
         tempZone.sort((a, b) => (a.label > b.label ? 1 : -1));
         tempZone.unshift({ value: 'null', label: 'ZONE' });
         this.bucketPromisesZone = tempZone;
         const tempFormat = this.choices.format.map((bucket) => ({
             value: bucket.term,
-            label: bucket.label,
+            label: String(bucket.label),
         }));
         tempFormat.sort((a, b) => (a.label > b.label ? 1 : -1));
         tempFormat.unshift({ value: 'null', label: 'FORMAT' });
         this.bucketPromisesFormat = tempFormat;
         const tempCrs = this.choices.category.map((bucket) => ({
             value: bucket.term,
-            label: bucket.label,
+            label: String(bucket.label),
         }));
         tempCrs.sort((a, b) => (a.label > b.label ? 1 : -1));
         tempCrs.unshift({ value: 'null', label: 'CRS' });
@@ -40395,7 +40662,7 @@ class MapViewComponent {
         this.changeRef.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapViewComponent, deps: [{ token: MdViewFacade }, { token: MapUtilsService }, { token: DataService }, { token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapViewComponent, isStandalone: true, selector: "gn-ui-map-view", inputs: { exceedsLimit: "exceedsLimit", selectedView: "selectedView", datavizConfig: "datavizConfig", displaySource: "displaySource" }, outputs: { linkSelected: "linkSelected", styleSelected: "styleSelected" }, viewQueries: [{ propertyName: "mapContainer", first: true, predicate: ["mapContainer"], descendants: true }], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col gap-[13px]\">\n  <div\n    class=\"flex flex-col md:flex-row gap-4 py-4 px-5 bg-white border border-color-border rounded-lg mt-6\"\n  >\n    <gn-ui-dropdown-selector\n      *ngIf=\"displaySource\"\n      class=\"w-full md:flex-1 md:min-w-0\"\n      extraBtnClass=\"font-sans font-bold\"\n      [title]=\"'map.select.layer' | translate\"\n      [choices]=\"dropdownChoices$ | async\"\n      [selected]=\"_selectedChoice\"\n      (selectValue)=\"selectLinkToDisplay($event)\"\n    ></gn-ui-dropdown-selector>\n\n    <ng-container *ngIf=\"(styleLinks$ | async)?.length > 0; else styleDisabled\">\n      <gn-ui-dropdown-selector\n        class=\"w-full md:flex-1 md:min-w-0\"\n        extraBtnClass=\"font-sans font-bold\"\n        [title]=\"'map.select.style' | translate\"\n        [choices]=\"styleDropdownChoices$ | async\"\n        [selected]=\"_styleFromConfig\"\n        (selectValue)=\"selectStyleToDisplay($event)\"\n      ></gn-ui-dropdown-selector>\n    </ng-container>\n    <ng-template #styleDisabled>\n      <gn-ui-dropdown-selector\n        class=\"w-full md:flex-1 md:min-w-0 text-gray-400\"\n        extraBtnClass=\"font-sans font-bold text-gray-400\"\n        [title]=\"'map.select.style' | translate\"\n        [choices]=\"styleDropdownChoices$ | async\"\n        [disabled]=\"true\"\n      ></gn-ui-dropdown-selector>\n    </ng-template>\n\n    <div class=\"self-end md:ml-2\">\n      <gn-ui-external-viewer-button\n        extraClass=\"w-[44px] h-[44px]\"\n        [link]=\"selectedLink$ | async\"\n      >\n      </gn-ui-external-viewer-button>\n    </div>\n  </div>\n  <ng-container *ngIf=\"hidePreview; else mapView\">\n    <gn-ui-popup-alert\n      type=\"warning\"\n      icon=\"matErrorOutlineOutline\"\n      class=\"block h-12 p-1\"\n    >\n      <span translate>record.feature.limit</span>\n    </gn-ui-popup-alert>\n  </ng-container>\n  <ng-template #mapView>\n    <div\n      class=\"relative w-full h-full bg-white border border-gray-300 rounded-lg overflow-hidden\"\n    >\n      <gn-ui-map-container\n        #mapContainer\n        [context]=\"mapContext$ | async\"\n        (featuresClick)=\"onMapFeatureSelect($event)\"\n        (sourceLoadError)=\"onSourceLoadError($event)\"\n      ></gn-ui-map-container>\n      <div\n        class=\"top-[1em] right-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56\"\n        [class.hidden]=\"!selection\"\n      >\n        <gn-ui-button\n          type=\"light\"\n          (buttonClick)=\"resetSelection()\"\n          style=\"\n            --gn-ui-button-padding: 0px;\n            --gn-ui-button-width: 24px;\n            --gn-ui-button-height: 24px;\n          \"\n          extraClass=\"absolute right-[0.5em] ml-[8px] mr-[10px]\"\n        >\n          <ng-icon name=\"matClose\" class=\"align-middle text-sm\"></ng-icon>\n        </gn-ui-button>\n        <gn-ui-feature-detail\n          [featureCatalog]=\"mdViewFacade.featureCatalog$ | async\"\n          [feature]=\"selection\"\n        ></gn-ui-feature-detail>\n      </div>\n\n      <div\n        class=\"top-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56\"\n        [ngClass]=\"{ 'right-[1em]': !selection, 'right-[16em]': selection }\"\n        [hidden]=\"!showLegend || !legendExists\"\n      >\n        <div class=\"flex justify-between items-center mb-2\">\n          <div class=\"text-primary font-bold\" translate>map.legend.title</div>\n          <gn-ui-button\n            type=\"light\"\n            (buttonClick)=\"toggleLegend()\"\n            style=\"\n              --gn-ui-button-padding: 0px;\n              --gn-ui-button-width: 24px;\n              --gn-ui-button-height: 24px;\n            \"\n            extraClass=\"ml-[8px] mr-[10px]\"\n          >\n            <ng-icon name=\"matClose\" class=\"align-middle text-sm\"></ng-icon>\n          </gn-ui-button>\n        </div>\n        <gn-ui-map-legend\n          [context]=\"mapContext$ | async\"\n          (legendStatusChange)=\"onLegendStatusChange($event)\"\n        ></gn-ui-map-legend>\n      </div>\n\n      <gn-ui-button\n        *ngIf=\"!showLegend && legendExists && !selection\"\n        type=\"outline\"\n        (buttonClick)=\"toggleLegend()\"\n        extraClass=\"absolute top-[1em] right-[1em] rounded p-1 text-xs bg-white\"\n        translate\n      >\n        map.legend.title\n      </gn-ui-button>\n\n      <gn-ui-loading-mask\n        *ngIf=\"loading\"\n        class=\"absolute inset-0\"\n        [message]=\"'map.loading.data' | translate\"\n      ></gn-ui-loading-mask>\n      <gn-ui-popup-alert\n        *ngIf=\"error\"\n        type=\"warning\"\n        icon=\"matErrorOutlineOutline\"\n        class=\"absolute m-2 inset-0\"\n      >\n        <span translate>{{ error }}</span>\n      </gn-ui-popup-alert>\n    </div>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: MapContainerComponent, selector: "gn-ui-map-container", inputs: ["context"], outputs: ["featuresClick", "featuresHover", "mapClick", "sourceLoadError"] }, { kind: "component", type: FeatureDetailComponent, selector: "gn-ui-feature-detail", inputs: ["feature", "featureCatalog"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ExternalViewerButtonComponent, selector: "gn-ui-external-viewer-button", inputs: ["link", "extraClass"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: MapLegendComponent, selector: "gn-ui-map-legend", inputs: ["context"], outputs: ["legendStatusChange"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MapViewComponent, isStandalone: true, selector: "gn-ui-map-view", inputs: { exceedsLimit: "exceedsLimit", selectedView: "selectedView", datavizConfig: "datavizConfig", displaySource: "displaySource" }, outputs: { linkSelected: "linkSelected", styleSelected: "styleSelected" }, viewQueries: [{ propertyName: "mapContainer", first: true, predicate: ["mapContainer"], descendants: true }], ngImport: i0, template: "<div class=\"w-full h-full flex flex-col gap-[13px]\">\n  <div\n    class=\"flex flex-col md:flex-row gap-4 py-4 px-5 bg-white border border-color-border rounded-lg mt-6\"\n  >\n    <gn-ui-dropdown-selector\n      *ngIf=\"displaySource\"\n      class=\"w-full md:flex-1 md:min-w-0\"\n      extraBtnClass=\"font-sans font-bold\"\n      [title]=\"'map.select.layer' | translate\"\n      [choices]=\"dropdownChoices$ | async\"\n      [selected]=\"_selectedChoice\"\n      (selectValue)=\"selectLinkToDisplay($event)\"\n    ></gn-ui-dropdown-selector>\n\n    <ng-container *ngIf=\"(styleLinks$ | async)?.length > 0; else styleDisabled\">\n      <gn-ui-dropdown-selector\n        class=\"w-full md:flex-1 md:min-w-0\"\n        extraBtnClass=\"font-sans font-bold\"\n        [title]=\"'map.select.style' | translate\"\n        [choices]=\"styleDropdownChoices$ | async\"\n        [selected]=\"_styleFromConfig\"\n        (selectValue)=\"selectStyleToDisplay($event)\"\n      ></gn-ui-dropdown-selector>\n    </ng-container>\n    <ng-template #styleDisabled>\n      <gn-ui-dropdown-selector\n        class=\"w-full md:flex-1 md:min-w-0 text-gray-400\"\n        extraBtnClass=\"font-sans font-bold text-gray-400\"\n        [title]=\"'map.select.style' | translate\"\n        [choices]=\"styleDropdownChoices$ | async\"\n        [disabled]=\"true\"\n      ></gn-ui-dropdown-selector>\n    </ng-template>\n\n    <div class=\"self-end md:ml-2\">\n      <gn-ui-external-viewer-button\n        extraClass=\"w-[44px] h-[44px]\"\n        [link]=\"selectedLink$ | async\"\n      >\n      </gn-ui-external-viewer-button>\n    </div>\n  </div>\n  <ng-container *ngIf=\"hidePreview; else mapView\">\n    <gn-ui-popup-alert\n      type=\"warning\"\n      icon=\"matErrorOutlineOutline\"\n      class=\"block h-12 p-1\"\n    >\n      <span translate>record.feature.limit</span>\n    </gn-ui-popup-alert>\n  </ng-container>\n  <ng-template #mapView>\n    <div\n      class=\"relative w-full h-full bg-white border border-gray-300 rounded-lg overflow-hidden\"\n    >\n      <gn-ui-map-container\n        #mapContainer\n        [context]=\"mapContext$ | async\"\n        (featuresClick)=\"onMapFeatureSelect($event)\"\n        (sourceLoadError)=\"onSourceLoadError($event)\"\n      ></gn-ui-map-container>\n      <div\n        class=\"top-[1em] right-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56\"\n        [class.hidden]=\"!selection\"\n      >\n        <gn-ui-button\n          type=\"light\"\n          (buttonClick)=\"resetSelection()\"\n          style=\"\n            --gn-ui-button-padding: 0px;\n            --gn-ui-button-width: 24px;\n            --gn-ui-button-height: 24px;\n          \"\n          extraClass=\"absolute right-[0.5em] ml-[8px] mr-[10px]\"\n        >\n          <ng-icon name=\"matClose\" class=\"align-middle text-sm\"></ng-icon>\n        </gn-ui-button>\n        <gn-ui-feature-detail\n          [featureCatalog]=\"mdViewFacade.featureCatalog$ | async\"\n          [feature]=\"selection\"\n        ></gn-ui-feature-detail>\n      </div>\n\n      <div\n        class=\"top-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56\"\n        [ngClass]=\"{ 'right-[1em]': !selection, 'right-[16em]': selection }\"\n        [hidden]=\"!showLegend || !legendExists\"\n      >\n        <div class=\"flex justify-between items-center mb-2\">\n          <div class=\"text-primary font-bold\" translate>map.legend.title</div>\n          <gn-ui-button\n            type=\"light\"\n            (buttonClick)=\"toggleLegend()\"\n            style=\"\n              --gn-ui-button-padding: 0px;\n              --gn-ui-button-width: 24px;\n              --gn-ui-button-height: 24px;\n            \"\n            extraClass=\"ml-[8px] mr-[10px]\"\n          >\n            <ng-icon name=\"matClose\" class=\"align-middle text-sm\"></ng-icon>\n          </gn-ui-button>\n        </div>\n        <gn-ui-map-legend\n          [context]=\"mapContext$ | async\"\n          (legendStatusChange)=\"onLegendStatusChange($event)\"\n        ></gn-ui-map-legend>\n      </div>\n\n      <gn-ui-button\n        *ngIf=\"!showLegend && legendExists && !selection\"\n        type=\"outline\"\n        (buttonClick)=\"toggleLegend()\"\n        extraClass=\"absolute top-[1em] right-[1em] rounded p-1 text-xs bg-white\"\n        translate\n      >\n        map.legend.title\n      </gn-ui-button>\n\n      <gn-ui-loading-mask\n        *ngIf=\"loading\"\n        class=\"absolute inset-0\"\n        [message]=\"'map.loading.data' | translate\"\n      ></gn-ui-loading-mask>\n      <gn-ui-popup-alert\n        *ngIf=\"error\"\n        type=\"warning\"\n        icon=\"matErrorOutlineOutline\"\n        class=\"absolute m-2 inset-0\"\n      >\n        <span translate>{{ error }}</span>\n      </gn-ui-popup-alert>\n    </div>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: MapContainerComponent, selector: "gn-ui-map-container", inputs: ["context"], outputs: ["featuresClick", "featuresHover", "mapClick", "extentChange", "sourceLoadError", "resolvedExtentChange"] }, { kind: "component", type: FeatureDetailComponent, selector: "gn-ui-feature-detail", inputs: ["feature", "featureCatalog"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ExternalViewerButtonComponent, selector: "gn-ui-external-viewer-button", inputs: ["link", "extraClass"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: MapLegendComponent, selector: "gn-ui-map-legend", inputs: ["context"], outputs: ["legendStatusChange"] }], viewProviders: [
             provideIcons({ matClose }),
             provideNgIconsConfig({
                 size: '1.5em',
@@ -40482,6 +40749,240 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+function areTemporalExtentsEqual(previous, current) {
+    const previousStartTime = previous?.start?.getTime() ?? null;
+    const previousEndTime = previous?.end?.getTime() ?? null;
+    const currentStartTime = current?.start?.getTime() ?? null;
+    const currentEndTime = current?.end?.getTime() ?? null;
+    return (previousStartTime === currentStartTime && previousEndTime === currentEndTime);
+}
+function areSpatialExtentsEqual(previous, current) {
+    return (previous?.[0] === current?.[0] &&
+        previous?.[1] === current?.[1] &&
+        previous?.[2] === current?.[2] &&
+        previous?.[3] === current?.[3]);
+}
+function areFilterStatesEqual(previous, current) {
+    const sameTemporalExtents = areTemporalExtentsEqual(previous.temporalExtent, current.temporalExtent);
+    const sameSpatialExtents = !current.isSpatialExtentFilterEnabled ||
+        areSpatialExtentsEqual(previous.spatialExtent, current.spatialExtent);
+    const sameIsSpatialExtentFilterEnabled = previous.isSpatialExtentFilterEnabled ===
+        current.isSpatialExtentFilterEnabled;
+    const samePageUrl = previous.pageUrl === current.pageUrl;
+    return (sameTemporalExtents &&
+        sameSpatialExtents &&
+        sameIsSpatialExtentFilterEnabled &&
+        samePageUrl);
+}
+
+const STAC_ITEMS_PER_PAGE = 12;
+const DEBOUNCE_TIME_MS = 500;
+class StacViewComponent {
+    constructor(dataService, metadataViewFacade, mapUtils, translateService) {
+        this.dataService = dataService;
+        this.metadataViewFacade = metadataViewFacade;
+        this.mapUtils = mapUtils;
+        this.translateService = translateService;
+        this.initialTemporalExtent = null;
+        this.initialSpatialExtent = null;
+        this.resolvedInitialSpatialExtent = null;
+        this.error$ = new BehaviorSubject(null);
+        this.mapContext$ = new BehaviorSubject({
+            layers: [],
+            view: null,
+        });
+        this.filterState$ = new BehaviorSubject({
+            temporalExtent: null,
+            spatialExtent: null,
+            isSpatialExtentFilterEnabled: true,
+            pageUrl: null,
+        });
+        this.isFilterModified$ = this.filterState$.pipe(map$2((filterState) => {
+            const isTemporalModified = !areTemporalExtentsEqual(filterState.temporalExtent, this.initialTemporalExtent);
+            const isSpatialModified = this.resolvedInitialSpatialExtent &&
+                filterState.spatialExtent !== null &&
+                filterState.isSpatialExtentFilterEnabled &&
+                !areSpatialExtentsEqual(filterState.spatialExtent, this.resolvedInitialSpatialExtent);
+            return isTemporalModified || isSpatialModified;
+        }), shareReplay({ bufferSize: 1, refCount: false }));
+        this.items$ = this.filterState$.pipe(debounceTime$1(DEBOUNCE_TIME_MS), distinctUntilChanged$1((prev, curr) => areFilterStatesEqual(prev, curr)), switchMap((filterState) => {
+            if (filterState.pageUrl === null) {
+                return of([]);
+            }
+            this.error$.next(null);
+            return from(this.dataService.getItemsFromStacApi(filterState.pageUrl, this.buildRequestOptions(filterState))).pipe(tap$2((stacDocument) => {
+                this.previousPageUrl =
+                    stacDocument.links.find((link) => link.rel === 'previous')?.href ||
+                        null;
+                this.nextPageUrl =
+                    stacDocument.links.find((link) => link.rel === 'next')?.href || null;
+            }), map$2((stacDocument) => stacDocument.features), catchError$1((err) => {
+                this.handleError(err);
+                return of([]);
+            }));
+        }), shareReplay({ bufferSize: 1, refCount: false }));
+    }
+    ngOnInit() {
+        this.metadataViewFacade.metadata$
+            .pipe(take$1(1), map$2((metadata) => {
+            const temporalExtents = metadata?.kind === 'dataset'
+                ? metadata.temporalExtents
+                : [];
+            const temporalExtent = temporalExtents.length > 0
+                ? temporalExtents[0]
+                : {
+                    start: null,
+                    end: null,
+                };
+            const spatialExtent = this.mapUtils.getRecordExtent(metadata);
+            return { temporalExtent, spatialExtent };
+        }))
+            .subscribe(({ temporalExtent, spatialExtent }) => {
+            this.initialTemporalExtent = temporalExtent;
+            this.initialSpatialExtent = spatialExtent;
+            this.filterState$.next({
+                ...this.filterState$.value,
+                temporalExtent: this.initialTemporalExtent,
+            });
+            this.mapContext$.next({
+                ...this.mapContext$.value,
+                view: {
+                    extent: spatialExtent,
+                },
+            });
+        });
+        this.metadataViewFacade.stacLinks$
+            .pipe(take$1(1), map$2((links) => (links && links.length > 0 ? links[0] : null)))
+            .subscribe((link) => {
+            if (link) {
+                this.initialPageUrl = link.url.href;
+                this.filterState$.next({
+                    ...this.filterState$.value,
+                    pageUrl: link.url.href,
+                });
+            }
+        });
+    }
+    async ngAfterViewInit() {
+        const map = await this.mapContainer.openlayersMap;
+        prioritizePageScroll(map.getInteractions());
+    }
+    onTemporalExtentChange(extent) {
+        this.filterState$.next({
+            ...this.filterState$.value,
+            temporalExtent: extent,
+            pageUrl: this.initialPageUrl,
+        });
+    }
+    onSpatialExtentChange(extent) {
+        this.filterState$.next({
+            ...this.filterState$.value,
+            spatialExtent: extent,
+            pageUrl: this.initialPageUrl,
+        });
+    }
+    onResolvedMapExtentChange(extent) {
+        this.resolvedInitialSpatialExtent = extent;
+    }
+    onSpatialFilterToggle(enabled) {
+        this.filterState$.next({
+            ...this.filterState$.value,
+            isSpatialExtentFilterEnabled: enabled,
+            pageUrl: this.initialPageUrl,
+        });
+    }
+    onResetFilters() {
+        this.mapContext$.next({
+            ...this.mapContext$.value,
+            view: {
+                extent: this.initialSpatialExtent,
+            },
+        });
+        this.filterState$.next({
+            temporalExtent: this.initialTemporalExtent,
+            spatialExtent: this.resolvedInitialSpatialExtent,
+            isSpatialExtentFilterEnabled: true,
+            pageUrl: this.initialPageUrl,
+        });
+    }
+    buildRequestOptions(filterState) {
+        const options = {
+            limit: STAC_ITEMS_PER_PAGE,
+        };
+        if (filterState.temporalExtent &&
+            (filterState.temporalExtent.start || filterState.temporalExtent.end)) {
+            options.datetime = {
+                ...(filterState.temporalExtent.start && {
+                    start: filterState.temporalExtent.start,
+                }),
+                ...(filterState.temporalExtent.end && {
+                    end: filterState.temporalExtent.end,
+                }),
+            };
+        }
+        if (filterState.isSpatialExtentFilterEnabled && filterState.spatialExtent) {
+            options.bbox = filterState.spatialExtent;
+        }
+        return options;
+    }
+    handleError(error) {
+        if (error instanceof FetchError) {
+            this.error$.next(this.translateService.instant(`dataset.error.${error.type}`, {
+                info: error.info,
+            }));
+            console.warn(error.message);
+        }
+        else if (error instanceof Error) {
+            this.error$.next(this.translateService.instant(error.message));
+            console.warn(error.stack || error);
+        }
+        else {
+            this.error$.next(this.translateService.instant(error));
+            console.warn(error);
+        }
+    }
+    // Paginable API
+    get isFirstPage() {
+        return this.previousPageUrl == null;
+    }
+    get isLastPage() {
+        return this.nextPageUrl == null;
+    }
+    goToNextPage() {
+        this.filterState$.next({
+            ...this.filterState$.value,
+            pageUrl: this.nextPageUrl,
+        });
+    }
+    goToPrevPage() {
+        this.filterState$.next({
+            ...this.filterState$.value,
+            pageUrl: this.previousPageUrl,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StacViewComponent, deps: [{ token: DataService }, { token: MdViewFacade }, { token: MapUtilsService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StacViewComponent, isStandalone: true, selector: "gn-ui-stac-view", viewQueries: [{ propertyName: "mapContainer", first: true, predicate: ["mapContainer"], descendants: true }], ngImport: i0, template: "<div class=\"mt-6 bg-white border border-gray-300 overflow-hidden rounded-lg\">\n  <div\n    class=\"w-full h-[700px] md:h-[366px] flex md:flex-row flex-col border-b border-gray-300\"\n  >\n    @let filterState = filterState$ | async;\n\n    <div class=\"w-full md:w-5/12 h-[366px] flex flex-col\">\n      <gn-ui-date-range-inputs\n        [temporalExtent]=\"filterState.temporalExtent\"\n        (temporalExtentChange)=\"onTemporalExtentChange($event)\"\n      ></gn-ui-date-range-inputs>\n\n      <div class=\"mt-auto mb-8 mx-8\" *ngIf=\"isFilterModified$ | async\">\n        <gn-ui-button\n          id=\"reset-filters-button\"\n          type=\"light\"\n          (buttonClick)=\"onResetFilters()\"\n        >\n          <span translate>stac.filter.reset</span>\n          <ng-icon name=\"matDeleteOutline\" class=\"ml-2\"></ng-icon>\n        </gn-ui-button>\n      </div>\n    </div>\n\n    <div class=\"w-full md:w-7/12 h-[334px] md:h-[366px] flex flex-col\">\n      <gn-ui-map-container\n        #mapContainer\n        [context]=\"mapContext$ | async\"\n        (extentChange)=\"onSpatialExtentChange($event)\"\n        (resolvedExtentChange)=\"onResolvedMapExtentChange($event)\"\n        class=\"w-full h-full\"\n      >\n        <div\n          class=\"bg-white rounded-xl shadow-xl absolute left-1/2 transform -translate-x-1/2 bottom-0 mb-2.5 px-4 py-2 z-10 max-w-[90%] w-max\"\n        >\n          <gn-ui-check-toggle\n            [value]=\"filterState.isSpatialExtentFilterEnabled\"\n            (toggled)=\"onSpatialFilterToggle($event)\"\n            [label]=\"'stac.filter.enable' | translate\"\n            [color]=\"'primary'\"\n          ></gn-ui-check-toggle>\n        </div>\n      </gn-ui-map-container>\n    </div>\n  </div>\n  <div\n    class=\"relative mx-5 my-[30px] min-h-[274px] flex items-center justify-center flex-col\"\n  >\n    <!-- Keep grid outside ngIf to keep items$ observable alive -->\n    <gn-ui-stac-items-result-grid\n      [items]=\"items$ | async\"\n    ></gn-ui-stac-items-result-grid>\n    <div\n      *ngIf=\"(items$ | async)?.length > 0; else noResultsOrError\"\n      class=\"mt-[20px] mx-auto flex justify-center\"\n    >\n      <gn-ui-previous-next-buttons\n        [listComponent]=\"this\"\n        [displayLabels]=\"true\"\n      ></gn-ui-previous-next-buttons>\n    </div>\n    <ng-template #noResultsOrError>\n      <gn-ui-popup-alert\n        *ngIf=\"error$ | async as error\"\n        type=\"warning\"\n        icon=\"matErrorOutlineOutline\"\n        class=\"absolute left-0 top-0 w-full block\"\n      >\n        <span translate>{{ error }}</span>\n      </gn-ui-popup-alert>\n      <div\n        *ngIf=\"(error$ | async) === null\"\n        class=\"flex items-center justify-center flex-col h-full gap-[10px]\"\n      >\n        <h2 class=\"text-center text-xl\" translate>stac.results.noResults</h2>\n        <gn-ui-button\n          id=\"no-results-button\"\n          type=\"secondary\"\n          (buttonClick)=\"onResetFilters()\"\n        >\n          <span translate>stac.filter.reset</span>\n          <ng-icon name=\"matDeleteOutline\" class=\"ml-2\"></ng-icon>\n        </gn-ui-button>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [":host{--gn-ui-button-padding: 7px 8px}::ng-deep .ol-overlaycontainer-stopevent{z-index:11!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { 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" }, { kind: "component", type: StacItemsResultGridComponent, selector: "gn-ui-stac-items-result-grid", inputs: ["items"] }, { kind: "component", type: DateRangeInputsComponent, selector: "gn-ui-date-range-inputs", inputs: ["temporalExtent"], outputs: ["temporalExtentChange"] }, { kind: "component", type: MapContainerComponent, selector: "gn-ui-map-container", inputs: ["context"], outputs: ["featuresClick", "featuresHover", "mapClick", "extentChange", "sourceLoadError", "resolvedExtentChange"] }, { kind: "component", type: CheckToggleComponent, selector: "gn-ui-check-toggle", inputs: ["title", "label", "value", "color"], outputs: ["toggled"] }, { kind: "component", type: PreviousNextButtonsComponent, selector: "gn-ui-previous-next-buttons", inputs: ["listComponent", "displayLabels"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], viewProviders: [provideIcons({ matDeleteOutline })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StacViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-stac-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        NgIconComponent,
+                        TranslateDirective,
+                        TranslatePipe,
+                        StacItemsResultGridComponent,
+                        DateRangeInputsComponent,
+                        MapContainerComponent,
+                        CheckToggleComponent,
+                        PreviousNextButtonsComponent,
+                        PopupAlertComponent,
+                        ButtonComponent,
+                    ], viewProviders: [provideIcons({ matDeleteOutline })], template: "<div class=\"mt-6 bg-white border border-gray-300 overflow-hidden rounded-lg\">\n  <div\n    class=\"w-full h-[700px] md:h-[366px] flex md:flex-row flex-col border-b border-gray-300\"\n  >\n    @let filterState = filterState$ | async;\n\n    <div class=\"w-full md:w-5/12 h-[366px] flex flex-col\">\n      <gn-ui-date-range-inputs\n        [temporalExtent]=\"filterState.temporalExtent\"\n        (temporalExtentChange)=\"onTemporalExtentChange($event)\"\n      ></gn-ui-date-range-inputs>\n\n      <div class=\"mt-auto mb-8 mx-8\" *ngIf=\"isFilterModified$ | async\">\n        <gn-ui-button\n          id=\"reset-filters-button\"\n          type=\"light\"\n          (buttonClick)=\"onResetFilters()\"\n        >\n          <span translate>stac.filter.reset</span>\n          <ng-icon name=\"matDeleteOutline\" class=\"ml-2\"></ng-icon>\n        </gn-ui-button>\n      </div>\n    </div>\n\n    <div class=\"w-full md:w-7/12 h-[334px] md:h-[366px] flex flex-col\">\n      <gn-ui-map-container\n        #mapContainer\n        [context]=\"mapContext$ | async\"\n        (extentChange)=\"onSpatialExtentChange($event)\"\n        (resolvedExtentChange)=\"onResolvedMapExtentChange($event)\"\n        class=\"w-full h-full\"\n      >\n        <div\n          class=\"bg-white rounded-xl shadow-xl absolute left-1/2 transform -translate-x-1/2 bottom-0 mb-2.5 px-4 py-2 z-10 max-w-[90%] w-max\"\n        >\n          <gn-ui-check-toggle\n            [value]=\"filterState.isSpatialExtentFilterEnabled\"\n            (toggled)=\"onSpatialFilterToggle($event)\"\n            [label]=\"'stac.filter.enable' | translate\"\n            [color]=\"'primary'\"\n          ></gn-ui-check-toggle>\n        </div>\n      </gn-ui-map-container>\n    </div>\n  </div>\n  <div\n    class=\"relative mx-5 my-[30px] min-h-[274px] flex items-center justify-center flex-col\"\n  >\n    <!-- Keep grid outside ngIf to keep items$ observable alive -->\n    <gn-ui-stac-items-result-grid\n      [items]=\"items$ | async\"\n    ></gn-ui-stac-items-result-grid>\n    <div\n      *ngIf=\"(items$ | async)?.length > 0; else noResultsOrError\"\n      class=\"mt-[20px] mx-auto flex justify-center\"\n    >\n      <gn-ui-previous-next-buttons\n        [listComponent]=\"this\"\n        [displayLabels]=\"true\"\n      ></gn-ui-previous-next-buttons>\n    </div>\n    <ng-template #noResultsOrError>\n      <gn-ui-popup-alert\n        *ngIf=\"error$ | async as error\"\n        type=\"warning\"\n        icon=\"matErrorOutlineOutline\"\n        class=\"absolute left-0 top-0 w-full block\"\n      >\n        <span translate>{{ error }}</span>\n      </gn-ui-popup-alert>\n      <div\n        *ngIf=\"(error$ | async) === null\"\n        class=\"flex items-center justify-center flex-col h-full gap-[10px]\"\n      >\n        <h2 class=\"text-center text-xl\" translate>stac.results.noResults</h2>\n        <gn-ui-button\n          id=\"no-results-button\"\n          type=\"secondary\"\n          (buttonClick)=\"onResetFilters()\"\n        >\n          <span translate>stac.filter.reset</span>\n          <ng-icon name=\"matDeleteOutline\" class=\"ml-2\"></ng-icon>\n        </gn-ui-button>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [":host{--gn-ui-button-padding: 7px 8px}::ng-deep .ol-overlaycontainer-stopevent{z-index:11!important}\n"] }]
+        }], ctorParameters: () => [{ type: DataService }, { type: MdViewFacade }, { type: MapUtilsService }, { type: i1$1.TranslateService }], propDecorators: { mapContainer: [{
+                type: ViewChild,
+                args: ['mapContainer']
+            }] } });
+
 // expects the replacement key ${name}
 const ORGANIZATION_PAGE_URL_TOKEN = new InjectionToken('organization-page-url-token');
 // expects the replacement key ${name}
@@ -40923,7 +41424,7 @@ const RECORD_RESOURCE_CREATED_FIELD = {
     gridColumnSpan: 1,
 };
 const RESOURCE_IDENTIFIER_FIELD = {
-    model: 'resourceIdentifier',
+    model: 'resourceIdentifiers',
     formFieldConfig: {
         labelKey: marker('editor.record.form.field.resourceIdentifier'),
     },
@@ -41902,7 +42403,7 @@ class FormFieldSimpleComponent {
         this.valueChange = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldSimpleComponent, isStandalone: true, selector: "gn-ui-form-field-simple", inputs: { type: "type", readonly: "readonly", invalid: "invalid", placeholder: "placeholder", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<input\n  [type]=\"type\"\n  [readonly]=\"readonly\"\n  [placeholder]=\"placeholder\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"valueChange.emit($event)\"\n  class=\"gn-ui-text-input\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldSimpleComponent, isStandalone: true, selector: "gn-ui-form-field-simple", inputs: { type: "type", readonly: "readonly", invalid: "invalid", placeholder: "placeholder", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<input\n  [type]=\"type\"\n  [readonly]=\"readonly\"\n  [placeholder]=\"placeholder\"\n  [ngModel]=\"value\"\n  (ngModelChange)=\"valueChange.emit($event)\"\n  class=\"gn-ui-text-input\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "18.2.13", ngImport: i0, type: FormFieldSimpleComponent, decorators: [{
             type: Component,
@@ -41928,7 +42429,7 @@ class FormFieldFileComponent {
         this.placeholder = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldFileComponent, isStandalone: true, selector: "gn-ui-form-field-file", inputs: { control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder" }, ngImport: i0, template: "<input\n  type=\"file\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly,\n  }\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldFileComponent, isStandalone: true, selector: "gn-ui-form-field-file", inputs: { control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder" }, ngImport: i0, template: "<input\n  type=\"file\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly,\n  }\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldFileComponent, decorators: [{
             type: Component,
@@ -42659,7 +43160,7 @@ class OnlineServiceResourceInputComponent {
             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  <span\n    *ngIf=\"protocolHint\"\n    class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n    [matTooltip]=\"protocolHint\"\n    matTooltipPosition=\"above\"\n  >\n    help\n  </span>\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    <mat-radio-button\n      *ngFor=\"let protocolOption of protocolOptions\"\n      [value]=\"protocolOption.value\"\n    >\n      {{ protocolOption.label | translate }}\n    </mat-radio-button>\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    <ng-content *ngIf=\"activeLayerSuggestion\">\n      <ng-icon name=\"iconoirRefresh\"></ng-icon>\n    </ng-content>\n  </gn-ui-url-input>\n\n  <p class=\"text-sm text-red-500 pl-4\" *ngIf=\"errorMessage\" translate>\n    editor.record.form.field.onlineResource.edit.identifier.error\n  </p>\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    *ngIf=\"\n      !activeLayerSuggestion ||\n      (_service.url && errorMessage) ||\n      (modifyMode && (layers$ | async).length === 0)\n    \"\n  ></gn-ui-text-input>\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    *ngIf=\"activeLayerSuggestion && (layers$ | async)?.length > 0\"\n  >\n  </gn-ui-autocomplete>\n  <gn-ui-button\n    (buttonClick)=\"submit()\"\n    [disabled]=\"disabled || !_service.identifierInService\"\n    type=\"primary\"\n    *ngIf=\"\n      !modifyMode &&\n      ((activeLayerSuggestion && (layers$ | async)) ||\n        !activeLayerSuggestion ||\n        (_service.url && errorMessage))\n    \"\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</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: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$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: 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" }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }], 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  <span\n    *ngIf=\"protocolHint\"\n    class=\"material-symbols-outlined m-2 gn-ui-icon-small\"\n    [matTooltip]=\"protocolHint\"\n    matTooltipPosition=\"above\"\n  >\n    help\n  </span>\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    <mat-radio-button\n      *ngFor=\"let protocolOption of protocolOptions\"\n      [value]=\"protocolOption.value\"\n    >\n      {{ protocolOption.label | translate }}\n    </mat-radio-button>\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    <ng-content *ngIf=\"activeLayerSuggestion\">\n      <ng-icon name=\"iconoirRefresh\"></ng-icon>\n    </ng-content>\n  </gn-ui-url-input>\n\n  <p class=\"text-sm text-red-500 pl-4\" *ngIf=\"errorMessage\" translate>\n    editor.record.form.field.onlineResource.edit.identifier.error\n  </p>\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    *ngIf=\"\n      !activeLayerSuggestion ||\n      (_service.url && errorMessage) ||\n      (modifyMode && (layers$ | async).length === 0)\n    \"\n  ></gn-ui-text-input>\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    *ngIf=\"activeLayerSuggestion && (layers$ | async)?.length > 0\"\n  >\n  </gn-ui-autocomplete>\n  <gn-ui-button\n    (buttonClick)=\"submit()\"\n    [disabled]=\"disabled || !_service.identifierInService\"\n    type=\"primary\"\n    *ngIf=\"\n      !modifyMode &&\n      ((activeLayerSuggestion && (layers$ | async)) ||\n        !activeLayerSuggestion ||\n        (_service.url && errorMessage))\n    \"\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</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: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i4$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$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: 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" }, { 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: "18.2.13", ngImport: i0, type: OnlineServiceResourceInputComponent, decorators: [{
             type: Component,
@@ -43437,8 +43938,28 @@ class FormFieldComponent {
     get valueAsOnlineResources() {
         return this.value;
     }
+    get valueAsResourceIdentifierCode() {
+        const identifiers = this.value;
+        return identifiers?.[0]?.code || '';
+    }
+    handleResourceIdentifierChange(code) {
+        const identifiers = this.value;
+        if (!code) {
+            this.valueChange.emit(identifiers?.slice(1) || []);
+            return;
+        }
+        if (identifiers?.[0]) {
+            this.valueChange.emit([
+                { ...identifiers[0], code },
+                ...identifiers.slice(1),
+            ]);
+        }
+        else {
+            this.valueChange.emit([{ code }]);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }], 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          (change)=\"valueChange.emit($event.target.value)\"\n          [placeholder]=\"\n            'editor.record.form.field.title.placeholder' | translate\n          \"\n          >{{ valueAsString }}</textarea\n        >\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=\"'resourceIdentifier'\">\n      <gn-ui-form-field-simple\n        [type]=\"'text'\"\n        [value]=\"valueAsString\"\n        (valueChange)=\"valueChange.emit($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        (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: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.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"], 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: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 }], 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          (change)=\"valueChange.emit($event.target.value)\"\n          [placeholder]=\"\n            'editor.record.form.field.title.placeholder' | translate\n          \"\n          >{{ valueAsString }}</textarea\n        >\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        (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: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.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"], 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: i3$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -43465,7 +43986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FormFieldSpatialToggleComponent,
                         FormFieldTopicsComponent,
                         TextFieldModule,
-                    ], 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          (change)=\"valueChange.emit($event.target.value)\"\n          [placeholder]=\"\n            'editor.record.form.field.title.placeholder' | translate\n          \"\n          >{{ valueAsString }}</textarea\n        >\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=\"'resourceIdentifier'\">\n      <gn-ui-form-field-simple\n        [type]=\"'text'\"\n        [value]=\"valueAsString\"\n        (valueChange)=\"valueChange.emit($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        (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" }]
+                    ], 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          (change)=\"valueChange.emit($event.target.value)\"\n          [placeholder]=\"\n            'editor.record.form.field.title.placeholder' | translate\n          \"\n          >{{ valueAsString }}</textarea\n        >\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        (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" }]
         }], propDecorators: { uniqueIdentifier: [{
                 type: Input
             }], model: [{
@@ -43733,7 +44254,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    <button\n      [title]=\"'editor.record.form.multilingual.open' | translate\"\n      (click)=\"toggleLanguageSelection()\"\n      *ngIf=\"isMultilingual\"\n      data-test=\"activateSelection\"\n    >\n      <ng-icon class=\"mt-1\" name=\"iconoirSettings\"></ng-icon>\n    </button>\n  </div>\n  <div class=\"flex flex-col gap-2\" *ngIf=\"editTranslations || !isMultilingual\">\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    <div *ngIf=\"isMultilingual\" class=\"flex flex-col gap-2\">\n      <div class=\"flex flex-row justify-between border-t border-gray-300 p-3\">\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      <ng-container *ngIf=\"supportedLanguages$ | async as languages\">\n        <div\n          class=\"flex flex-col gap-2 w-full px-2\"\n          data-test=\"langAvailable\"\n          *ngFor=\"let lang of languages\"\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      </ng-container>\n    </div>\n  </div>\n  <div *ngIf=\"!editTranslations && isMultilingual\" class=\"flex flex-col gap-2\">\n    <gn-ui-button\n      *ngFor=\"let recordLang of sortLanguages(recordLanguages); let i = index\"\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        <ng-icon\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-primary mt-1\"\n          name=\"iconoirCheckCircle\"\n        ></ng-icon>\n        <ng-icon\n          *ngIf=\"recordLang !== formLanguage\"\n          class=\"text-gray-800 mt-1\"\n          name=\"iconoirCircle\"\n        ></ng-icon>\n        <span\n          *ngIf=\"recordLang.length === 2\"\n          [class]=\"getIconClass(recordLang) + 'mt-1'\"\n        ></span>\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        <span\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-xs text-base\"\n          translate\n          >editor.record.form.multilingual.default</span\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  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { 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: "pipe", type: TranslatePipe, name: "translate" }, { 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"] }] }); }
+        ], 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    <button\n      [title]=\"'editor.record.form.multilingual.open' | translate\"\n      (click)=\"toggleLanguageSelection()\"\n      *ngIf=\"isMultilingual\"\n      data-test=\"activateSelection\"\n    >\n      <ng-icon class=\"mt-1\" name=\"iconoirSettings\"></ng-icon>\n    </button>\n  </div>\n  <div class=\"flex flex-col gap-2\" *ngIf=\"editTranslations || !isMultilingual\">\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    <div *ngIf=\"isMultilingual\" class=\"flex flex-col gap-2\">\n      <div class=\"flex flex-row justify-between border-t border-gray-300 p-3\">\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      <ng-container *ngIf=\"supportedLanguages$ | async as languages\">\n        <div\n          class=\"flex flex-col gap-2 w-full px-2\"\n          data-test=\"langAvailable\"\n          [attr.data-test-lang]=\"lang\"\n          *ngFor=\"let lang of languages\"\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      </ng-container>\n    </div>\n  </div>\n  <div *ngIf=\"!editTranslations && isMultilingual\" class=\"flex flex-col gap-2\">\n    <gn-ui-button\n      *ngFor=\"let recordLang of sortLanguages(recordLanguages); let i = index\"\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        <ng-icon\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-primary mt-1\"\n          name=\"iconoirCheckCircle\"\n        ></ng-icon>\n        <ng-icon\n          *ngIf=\"recordLang !== formLanguage\"\n          class=\"text-gray-800 mt-1\"\n          name=\"iconoirCircle\"\n        ></ng-icon>\n        <span\n          *ngIf=\"recordLang.length === 2\"\n          [class]=\"getIconClass(recordLang) + 'mt-1'\"\n        ></span>\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        <span\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-xs text-base\"\n          translate\n          >editor.record.form.multilingual.default</span\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  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { 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: "pipe", type: TranslatePipe, name: "translate" }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultilingualPanelComponent, decorators: [{
             type: Component,
@@ -43755,7 +44276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         provideNgIconsConfig({
                             size: '1.25em',
                         }),
-                    ], template: "<div\n  class=\"flex flex-col h-full w-[302px] border-l border-gray-300 py-8 px-3 gap-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    <button\n      [title]=\"'editor.record.form.multilingual.open' | translate\"\n      (click)=\"toggleLanguageSelection()\"\n      *ngIf=\"isMultilingual\"\n      data-test=\"activateSelection\"\n    >\n      <ng-icon class=\"mt-1\" name=\"iconoirSettings\"></ng-icon>\n    </button>\n  </div>\n  <div class=\"flex flex-col gap-2\" *ngIf=\"editTranslations || !isMultilingual\">\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    <div *ngIf=\"isMultilingual\" class=\"flex flex-col gap-2\">\n      <div class=\"flex flex-row justify-between border-t border-gray-300 p-3\">\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      <ng-container *ngIf=\"supportedLanguages$ | async as languages\">\n        <div\n          class=\"flex flex-col gap-2 w-full px-2\"\n          data-test=\"langAvailable\"\n          *ngFor=\"let lang of languages\"\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      </ng-container>\n    </div>\n  </div>\n  <div *ngIf=\"!editTranslations && isMultilingual\" class=\"flex flex-col gap-2\">\n    <gn-ui-button\n      *ngFor=\"let recordLang of sortLanguages(recordLanguages); let i = index\"\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        <ng-icon\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-primary mt-1\"\n          name=\"iconoirCheckCircle\"\n        ></ng-icon>\n        <ng-icon\n          *ngIf=\"recordLang !== formLanguage\"\n          class=\"text-gray-800 mt-1\"\n          name=\"iconoirCircle\"\n        ></ng-icon>\n        <span\n          *ngIf=\"recordLang.length === 2\"\n          [class]=\"getIconClass(recordLang) + 'mt-1'\"\n        ></span>\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        <span\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-xs text-base\"\n          translate\n          >editor.record.form.multilingual.default</span\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  </div>\n</div>\n" }]
+                    ], 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    <button\n      [title]=\"'editor.record.form.multilingual.open' | translate\"\n      (click)=\"toggleLanguageSelection()\"\n      *ngIf=\"isMultilingual\"\n      data-test=\"activateSelection\"\n    >\n      <ng-icon class=\"mt-1\" name=\"iconoirSettings\"></ng-icon>\n    </button>\n  </div>\n  <div class=\"flex flex-col gap-2\" *ngIf=\"editTranslations || !isMultilingual\">\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    <div *ngIf=\"isMultilingual\" class=\"flex flex-col gap-2\">\n      <div class=\"flex flex-row justify-between border-t border-gray-300 p-3\">\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      <ng-container *ngIf=\"supportedLanguages$ | async as languages\">\n        <div\n          class=\"flex flex-col gap-2 w-full px-2\"\n          data-test=\"langAvailable\"\n          [attr.data-test-lang]=\"lang\"\n          *ngFor=\"let lang of languages\"\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      </ng-container>\n    </div>\n  </div>\n  <div *ngIf=\"!editTranslations && isMultilingual\" class=\"flex flex-col gap-2\">\n    <gn-ui-button\n      *ngFor=\"let recordLang of sortLanguages(recordLanguages); let i = index\"\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        <ng-icon\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-primary mt-1\"\n          name=\"iconoirCheckCircle\"\n        ></ng-icon>\n        <ng-icon\n          *ngIf=\"recordLang !== formLanguage\"\n          class=\"text-gray-800 mt-1\"\n          name=\"iconoirCircle\"\n        ></ng-icon>\n        <span\n          *ngIf=\"recordLang.length === 2\"\n          [class]=\"getIconClass(recordLang) + 'mt-1'\"\n        ></span>\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        <span\n          *ngIf=\"recordLang === formLanguage\"\n          class=\"text-xs text-base\"\n          translate\n          >editor.record.form.multilingual.default</span\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  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: EditorFacade }, { type: i1$b.MatDialog }, { type: i1$1.TranslateService }, { type: RecordsRepositoryInterface }, { type: i1$8.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { record: [{
                 type: Input
             }], actionMenuButtons: [{
@@ -44282,5 +44803,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AbstractSearchField, ActionMenuComponent, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, ApplicationBannerComponent, AuthService, AutocompleteComponent, AvailableServicesField, AvatarComponent, AvatarServiceInterface, BASEMAP_LAYERS, BadgeComponent, BaseConverter, BaseFileReader, BaseReader, BlockListComponent, ButtonComponent, CLEAR_ERROR, CLEAR_RESULTS, CarouselComponent, CatalogTitleComponent, CellPopinComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ClearError, ClearResults, ColorScaleComponent, ConfirmationDialogComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_GN4_LOGIN_URL, DEFAULT_GN4_LOGOUT_URL, DEFAULT_GN4_SETTINGS_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DISABLE_AUTH, DO_NOT_USE_DEFAULT_BASEMAP, DataService, DataTableComponent, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DatePickerComponent, DateRangeDropdownComponent, DateRangePickerComponent, DateRangeSearchField, DateService, DcatApConverter, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EDITOR_FEATURE_KEY, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EXTERNAL_VIEWER_OPEN_NEW_TAB, EXTERNAL_VIEWER_URL_TEMPLATE, EditableLabelDirective, EditorFacade, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorComponent, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalLinkCardComponent, ExternalViewerButtonComponent, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FILTER_SUMMARY_IGNORE_LIST, FORMATS, FacetBlockComponent, FacetItemComponent, FacetListComponent, FacetsContainerComponent, FavoriteStarComponent, FavoritesService, FeatureCatalogListComponent, FeatureDetailComponent, FeatureEditorModule, FeatureMapModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileInputComponent, FileTranslateLoader, FilesDropDirective, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldDateComponent, FormFieldFileComponent, FormFieldKeywordsComponent, FormFieldLicenseComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentsComponent, FormFieldTopicsComponent, FormFieldWrapperComponent, FullTextSearchField, FuzzySearchComponent, GEONETWORK_UI_TAG_NAME, GEONETWORK_UI_VERSION, GeoDataBadgeComponent, GeoTableViewComponent, GeocodingComponent, GeojsonReader, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GpfApiDlComponent, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, ImageInputComponent, ImageOverlayPreviewComponent, ImportRecordComponent, InlineFilterComponent, InteractiveTableColumnComponent, InteractiveTableComponent, InternalLinkCardComponent, IsSpatialSearchField, Iso191153Converter, Iso19139Converter, 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, METADATA_LANGUAGE, MapContainerComponent, MapFacade, MapLegendComponent, MapStateContainerComponent, MapStyleService, MapUtilsService, MapViewComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataInfoComponent, MetadataLinkType, MetadataMapperContext, MetadataQualityComponent, MetadataQualityItemComponent, MetadataQualityPanelComponent, ModalDialogComponent, MultilingualPanelComponent, MultilingualSearchField, MyOrgService, NAMESPACES, NOT_APPLICABLE_CONSTRAINT, NOT_KNOWN_CONSTRAINT, NotificationComponent, NotificationsContainerComponent, NotificationsService, ORGANIZATIONS_STRATEGY, ORGANIZATION_PAGE_URL_TOKEN, ORGANIZATION_URL_TOKEN, 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, 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, RecordsMetricsComponent, RecordsService, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResourceTypeLegacyField, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsHitsSearchKindComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, ResultsTableContainerComponent, 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, 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, SortableListComponent, SourceLabelComponent, SourcesService, SpatialExtentComponent, SpinningLoaderComponent, 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, blockModelFixture, bytesToMegabytes, canEditRecord, checkFileFormat, clearSelectedFeatures, createChild, createDocument, createElement, createFuzzyFilter, createNestedChild, createNestedElement, currentPage, defaultMapStyleFixture, defaultMapStyleHlFixture, downgradeImage, downsizeImage, draftSaveSuccess, dragPanCondition, dropEmptyTranslations, editorReducer, emptyBlockModelFixture, findChildElement, findChildOrCreate, findChildrenElement, findConverterForDocument, findNestedChildOrCreate, findNestedElement, findNestedElements, findParent, firstChildElement, formatDate, formatUserInfo, getAllKeysValidator, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryBoundingBox, getGeometryFromGeoJSON, getGlobalConfig, getIsMobile, getJsonDataItemsProxy, getLayers, getLinkId, getLinkLabel, getLinkPriority, getMapContext, getMapContextLayerFromConfig, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getNamespace, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getQualityValidators, getResourceType, 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, setFieldVisibility, setSelectedFeatures, setTextContent, someHabTableItemFixture, sortByFromString, sortByToString, sortByToStrings, stripHtml, stripNamespace, tableItemsFixture, toDate, toLang2, toLang3, totalPages, undoRecordDraft, unrecognizedKeysConfigFixture, updateLanguages, updateRecordField, updateRecordLanguages, wmsLayerFlatten, writeAttribute, wrongLanguageCodeConfigFixture, xmlToString };
+export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AbstractSearchField, ActionMenuComponent, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, ApplicationBannerComponent, AuthService, AutocompleteComponent, AvailableServicesField, AvatarComponent, AvatarServiceInterface, BASEMAP_LAYERS, BadgeComponent, BaseConverter, BaseFileReader, BaseReader, BlockListComponent, ButtonComponent, CLEAR_ERROR, CLEAR_RESULTS, CarouselComponent, CatalogTitleComponent, CellPopinComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ClearError, ClearResults, ColorScaleComponent, ConfirmationDialogComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_GN4_LOGIN_URL, DEFAULT_GN4_LOGOUT_URL, DEFAULT_GN4_SETTINGS_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DISABLE_AUTH, DO_NOT_USE_DEFAULT_BASEMAP, DataService, DataTableComponent, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DatePickerComponent, DateRangeDropdownComponent, DateRangeInputsComponent, DateRangePickerComponent, DateRangeSearchField, DateService, DcatApConverter, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EDITOR_FEATURE_KEY, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EXTERNAL_VIEWER_OPEN_NEW_TAB, EXTERNAL_VIEWER_URL_TEMPLATE, EditableLabelDirective, EditorFacade, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorComponent, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalLinkCardComponent, ExternalViewerButtonComponent, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FILTER_SUMMARY_IGNORE_LIST, FORMATS, FacetBlockComponent, FacetItemComponent, FacetListComponent, FacetsContainerComponent, FavoriteStarComponent, FavoritesService, FeatureCatalogListComponent, FeatureDetailComponent, FeatureEditorModule, FeatureMapModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileInputComponent, FileTranslateLoader, FilesDropDirective, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldDateComponent, FormFieldFileComponent, FormFieldKeywordsComponent, FormFieldLicenseComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentsComponent, FormFieldTopicsComponent, FormFieldWrapperComponent, FullTextSearchField, FuzzySearchComponent, GEONETWORK_UI_TAG_NAME, GEONETWORK_UI_VERSION, GeoDataBadgeComponent, GeoTableViewComponent, GeocodingComponent, GeojsonReader, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GnUiHumanizeDateDirective, GpfApiDlComponent, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, ImageInputComponent, ImageOverlayPreviewComponent, ImportRecordComponent, InlineFilterComponent, InteractiveTableColumnComponent, InteractiveTableComponent, InternalLinkCardComponent, IsSpatialSearchField, Iso191153Converter, Iso19139Converter, 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, 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, ORGANIZATIONS_STRATEGY, ORGANIZATION_PAGE_URL_TOKEN, ORGANIZATION_URL_TOKEN, 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, 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, RecordsMetricsComponent, RecordsService, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResourceTypeLegacyField, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsHitsSearchKindComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, ResultsTableContainerComponent, 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, 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, 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, blockModelFixture, bytesToMegabytes, canEditRecord, checkFileFormat, clearSelectedFeatures, createChild, createDocument, createElement, createFuzzyFilter, createNestedChild, createNestedElement, currentPage, defaultMapStyleFixture, defaultMapStyleHlFixture, downgradeImage, downsizeImage, draftSaveSuccess, dragPanCondition, dropEmptyTranslations, editorReducer, emptyBlockModelFixture, findChildElement, findChildOrCreate, findChildrenElement, findConverterForDocument, findNestedChildOrCreate, findNestedElement, findNestedElements, findParent, firstChildElement, formatDate, formatUserInfo, getAllKeysValidator, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryBoundingBox, getGeometryFromGeoJSON, getGlobalConfig, getIsMobile, getJsonDataItemsProxy, getLayers, getLinkId, getLinkLabel, getLinkPriority, getMapContext, getMapContextLayerFromConfig, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getNamespace, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getQualityValidators, getResourceType, 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, setFieldVisibility, setSelectedFeatures, setTextContent, someHabTableItemFixture, sortByFromString, sortByToString, sortByToStrings, stripHtml, stripNamespace, tableItemsFixture, toDate, toLang2, toLang3, totalPages, undoRecordDraft, unrecognizedKeysConfigFixture, updateLanguages, updateRecordField, updateRecordLanguages, wmsLayerFlatten, writeAttribute, wrongLanguageCodeConfigFixture, xmlToString };
 //# sourceMappingURL=geonetwork-ui.mjs.map