geonetwork-ui 2.6.0-dev.857b51517 → 2.6.0-dev.97a89c313

package/fesm2022/geonetwork-ui.mjs

@@ -16,50 +16,50 @@ import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-comp
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { map as map$1, catchError, tap as tap$1, shareReplay, filter, startWith, withLatestFrom, switchMap as switchMap$1, take, mergeMap, throttleTime, distinctUntilChanged, debounceTime, finalize, delay, first as first$1, share, pairwise, defaultIfEmpty, toArray } from 'rxjs/operators';
 import * as i1$2 from '@angular/common';
-import { CommonModule, NgSwitch, NgSwitchCase, NgSwitchDefault, NgIf, NgClass, NgTemplateOutlet, NgOptimizedImage, DatePipe } from '@angular/common';
+import { CommonModule, NgSwitch, NgSwitchCase, NgSwitchDefault, NgClass, NgIf, NgTemplateOutlet, NgOptimizedImage, DatePipe } from '@angular/common';
 import { of, map as map$2, lastValueFrom, Subject, switchMap, combineLatest, from, exhaustMap, throwError, forkJoin, takeLast, firstValueFrom, merge, BehaviorSubject, fromEvent, animationFrameScheduler, ReplaySubject, Subscription, first, distinctUntilChanged as distinctUntilChanged$1, timer, filter as filter$1, tap as tap$2, Observable, buffer, debounceTime as debounceTime$1, combineLatestWith, startWith as startWith$1, catchError as catchError$1, takeUntil, EMPTY, mergeMap as mergeMap$1, withLatestFrom as withLatestFrom$1, shareReplay as shareReplay$1, pairwise as pairwise$1 } from 'rxjs';
 import { lt, valid, coerce, satisfies, ltr } from 'semver';
 import chroma from 'chroma-js';
-import { WmtsEndpoint, WmsEndpoint, WfsEndpoint, OgcApiEndpoint, sharedFetch, useCache } from '@camptocamp/ogc-client';
+import { WmtsEndpoint, WmsEndpoint, WfsEndpoint, OgcApiEndpoint, sharedFetch, useCache, TmsEndpoint } from '@camptocamp/ogc-client';
 import * as i1$3 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, select, StoreModule, Store } from '@ngrx/store';
 import EmblaCarousel from 'embla-carousel';
 import * as i2$2 from '@ng-icons/core';
 import { provideIcons, NgIcon, NgIconComponent, provideNgIconsConfig, NgIconsModule } from '@ng-icons/core';
-import { iconoirNavArrowRight, iconoirNavArrowLeft, iconoirNavArrowDown, iconoirNavArrowUp, iconoirSearch, iconoirLongArrowDownLeft, iconoirCalendar, iconoirLink, iconoirArrowUp, iconoirCloudUpload, iconoirFramePlusIn, iconoirExpand, iconoirReduce, iconoirAppleWallet, iconoirAppleShortcuts, iconoirCode, iconoirCreditCard, iconoirSettings, iconoirDownload, iconoirMediaImage, iconoirMediaImageXmark, iconoirBin, iconoirPlus, iconoirDatabase, iconoirMap, iconoirInternet, iconoirUser, iconoirLock, iconoirImport, iconoirLightBulbOn, iconoirArrowLeft, iconoirAttachment, iconoirRefresh } from '@ng-icons/iconoir';
-import { matExpandMore, matExpandLess, matAdd, matRemove, matClose, matContentCopy, matSearch, matStar, matStarBorder, matChevronLeft, matChevronRight, matArrowBackIos, matArrowForwardIos, matCheck, matWarningAmber, matFace, matQuestionMark, matMoodBad, matZoomOutMap, matOpenInNew, matMailOutline, matPersonOutline, matCheckCircleOutline, matWarning, matCode, matMoreVert, matCorporateFare } from '@ng-icons/material-icons/baseline';
-import * as i1$4 from '@angular/material/tooltip';
+import { iconoirNavArrowRight, iconoirNavArrowLeft, iconoirNavArrowDown, iconoirNavArrowUp, iconoirSearch, iconoirLongArrowDownLeft, iconoirCalendar, iconoirLink, iconoirArrowUp, iconoirCloudUpload, iconoirFramePlusIn, iconoirExpand, iconoirReduce, iconoirAppleWallet, iconoirAppleShortcuts, iconoirCode, iconoirCreditCard, iconoirInternet, iconoirSettings, iconoirDownload, iconoirMediaImage, iconoirMediaImageXmark, iconoirBin, iconoirPlus, iconoirUser, iconoirLock, iconoirImport, iconoirLightBulbOn, iconoirArrowLeft, iconoirAttachment, iconoirRefresh } from '@ng-icons/iconoir';
+import { matExpandMore, matExpandLess, matAdd, matRemove, matClose, matContentCopy, matSearch, matStar, matStarBorder, matChevronLeft, matChevronRight, matArrowBackIos, matArrowForwardIos, matCheck, matWarningAmber, matFace, matQuestionMark, matMoodBad, matZoomOutMap, matOpenInNew, matMailOutline, matPersonOutline, matCheckCircleOutline, matWarning, matMoreVert, matCorporateFare } from '@ng-icons/material-icons/baseline';
+import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import * as i2$1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
-import * as i1$6 from '@angular/material/autocomplete';
+import * as i1$5 from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i3 from 'ngx-dropzone';
+import * as i3$1 from 'ngx-dropzone';
 import { NgxDropzoneModule } from 'ngx-dropzone';
 import { TagInputModule } from 'ngx-chips';
-import * as i1$5 from '@angular/material/progress-spinner';
+import * as i1$4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import tippy from 'tippy.js';
-import { matErrorOutlineOutline, matInfoOutline, matComputerOutline, matCallOutline, matLocationOnOutline, matSwipeOutline, matMailOutline as matMailOutline$1, matWarningAmberOutline, matCloseOutline, matLocationSearchingOutline, matEmailOutline, matPhoneOutline, matSendOutline, matMapOutline, matCloudDownloadOutline, matHomeWorkOutline, matLayersOutline, matAddCircleOutlineOutline } from '@ng-icons/material-icons/outline';
+import { matErrorOutlineOutline, matLocationSearchingOutline, matInfoOutline, matEmailOutline, matPhoneOutline, matLocationOnOutline, matComputerOutline, matCallOutline, matSwipeOutline, matMailOutline as matMailOutline$1, matWarningAmberOutline, matCloseOutline, matSendOutline, matMapOutline, matCloudDownloadOutline, matHomeWorkOutline, matLayersOutline, matAddCircleOutlineOutline } from '@ng-icons/material-icons/outline';
 import * as i2 from '@angular/material/core';
 import { MatNativeDateModule, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
-import * as i1$7 from '@angular/material/checkbox';
+import * as i1$6 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i1$8 from '@angular/material/datepicker';
+import * as i1$7 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i1$9 from '@angular/cdk/overlay';
+import * as i1$8 from '@angular/cdk/overlay';
 import { CdkConnectedOverlay, OverlayModule, CdkOverlayOrigin } from '@angular/cdk/overlay';
-import * as i1$a from '@angular/material/button-toggle';
+import * as i1$9 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import * as i1$b from '@angular/material/dialog';
+import * as i1$a from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2$3 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i1$d from '@angular/router';
+import * as i1$c from '@angular/router';
 import { RouterLink, RouterModule, RouteReuseStrategy } from '@angular/router';
 import { marked } from 'marked';
 import Duration from 'duration-relativetimeformat';
@@ -74,7 +74,7 @@ import { formatDistance } from 'date-fns/formatDistance';
 import { enUS, sk, 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 { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
 import { TemplatePortal } from '@angular/cdk/portal';
-import * as i1$c from '@ngrx/effects';
+import * as i1$b from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule, Actions } from '@ngrx/effects';
 import { valid as valid$1 } from 'geojson-validation';
 import { trigger, transition, animate, keyframes, style } from '@angular/animations';
@@ -90,7 +90,7 @@ import { WFS, GeoJSON as GeoJSON$1 } from 'ol/format';
 import { tablerFolderOpen } from '@ng-icons/tabler-icons';
 import { Chart, BarController, BarElement, CategoryScale, LinearScale, LineController, LineElement, PointElement, PieController, ArcElement, ScatterController, Tooltip, Colors, Legend } from 'chart.js';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import * as i3$1 from '@angular/material/sort';
+import * as i3$2 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i2$4 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
@@ -98,14 +98,14 @@ import * as i4 from '@angular/material/paginator';
 import { MatPaginatorIntl, MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { LetDirective } from '@ngrx/component';
 import axios from 'axios';
-import * as i1$e from '@angular/platform-browser';
+import * as i1$d from '@angular/platform-browser';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
 import * as i4$1 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatIconModule } from '@angular/material/icon';
 import * as i4$2 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
-import * as i3$2 from '@ngrx/router-store';
+import * as i3$3 from '@ngrx/router-store';
 import { getRouterSelectors, routerReducer, StoreRouterConnectingModule, FullRouterStateSerializer } from '@ngrx/router-store';
 import { navigation } from '@ngrx/router-store/data-persistence';
 
@@ -642,6 +642,8 @@ function matchProtocol(protocol) {
         return 'wfs';
     if (/wmts/i.test(protocol))
         return 'wmts';
+    if (/tms/i.test(protocol))
+        return 'tms';
     if (/wps/i.test(protocol))
         return 'wps';
     if (/ogc\W*api\W*features/i.test(protocol))
@@ -971,7 +973,7 @@ function kindToCodeListValue(record) {
 }
 
 function extractCharacterString() {
-    return pipe(fallback(findChildElement('gco:CharacterString', false), findChildElement('gmx:Anchor', false)), readText());
+    return pipe(fallback(findChildElement('gco:CharacterString', false), findChildElement('gmx:Anchor', false), findChildElement('gmx:MimeFileType', false)), readText());
 }
 /**
  * Translated values will also be collected in the translations object
@@ -18965,8 +18967,9 @@ var de = {
 	"record.action.view": "Anzeigen",
 	"record.card.metadata.contact": "",
 	"record.externalViewer.open": "In externem Kartenviewer öffnen",
+	"record.feature.catalog.number.total.attribute": "",
+	"record.feature.catalog.number.total.object": "",
 	"record.feature.limit": "Die Vorschau wurde aufgrund zu vieler Elemente deaktiviert",
-	"record.kind.data": "",
 	"record.kind.dataset": "",
 	"record.kind.reuse": "",
 	"record.kind.service": "",
@@ -19009,6 +19012,7 @@ var de = {
 	"record.metadata.creation": "Erstellungsdatum",
 	"record.metadata.details": "Über die Daten",
 	"record.metadata.download": "Downloads",
+	"record.metadata.feature.catalog": "",
 	"record.metadata.formats": "Formate",
 	"record.metadata.keywords": "Stichworte",
 	"record.metadata.languages": "Sprachen",
@@ -19052,7 +19056,7 @@ var de = {
 	"record.metadata.temporalExtent.untilDate": "Bis {end}",
 	"record.metadata.title": "Titel",
 	"record.metadata.topics": "Kategorien",
-	"record.metadata.type": "Geographischer Datensatz",
+	"record.metadata.isGeographical": "Geographischer Datensatz",
 	"record.metadata.uniqueId": "Eindeutige Kennung",
 	"record.metadata.updateFrequency": "Aktualisierungsfrequenz der Daten",
 	"record.metadata.updatedOn": "Geändert am",
@@ -19092,6 +19096,7 @@ var de = {
 	"search.error.recordNotFound": "Der Datensatz mit der Kennung \"{ id }\" konnte nicht gefunden werden.",
 	"search.field.any.placeholder": "Suche im katalog ...",
 	"search.field.sortBy": "Sortieren nach:",
+	"search.filter.into.feature.catalog": "",
 	"search.filters.availableServices.download": "",
 	"search.filters.availableServices.view": "",
 	"search.filters.changeDate": "Letzte Aktualisierung",
@@ -19155,6 +19160,7 @@ var de = {
 	"service.metadata.other": "",
 	"service.metadata.question": "",
 	"service.metadata.search": "",
+	"service.metadata.search.clear": "",
 	"service.metadata.spatialExtent": "",
 	"share.tab.permalink": "Teilen",
 	"share.tab.webComponent": "Integrieren",
@@ -19548,8 +19554,9 @@ var en = {
 	"record.action.view": "View",
 	"record.card.metadata.contact": "Metadata Contact",
 	"record.externalViewer.open": "Open in the external map viewer",
+	"record.feature.catalog.number.total.attribute": "Total amount of objects",
+	"record.feature.catalog.number.total.object": "Total amount of attributes",
 	"record.feature.limit": "Preview disabled due to too many elements",
-	"record.kind.data": "Data",
 	"record.kind.dataset": "Dataset",
 	"record.kind.reuse": "Reuse",
 	"record.kind.service": "Service",
@@ -19592,6 +19599,7 @@ var en = {
 	"record.metadata.creation": "Date of creation",
 	"record.metadata.details": "About the data",
 	"record.metadata.download": "Downloads",
+	"record.metadata.feature.catalog": "Feature catalog",
 	"record.metadata.formats": "Formats",
 	"record.metadata.keywords": "Keywords",
 	"record.metadata.languages": "Languages",
@@ -19622,7 +19630,7 @@ var en = {
 	"record.metadata.quality.topic.success": "Topic is specified",
 	"record.metadata.quality.updateFrequency.failed": "Update frequency is not specified",
 	"record.metadata.quality.updateFrequency.success": "Update frequency is specified",
-	"record.metadata.related": "Related datasets",
+	"record.metadata.related": "Related records",
 	"record.metadata.related.contents": "Related content",
 	"record.metadata.ressources.and.links": "Resources and links",
 	"record.metadata.sheet": "Original metadata",
@@ -19635,7 +19643,7 @@ var en = {
 	"record.metadata.temporalExtent.untilDate": "Until { end }",
 	"record.metadata.title": "Title",
 	"record.metadata.topics": "Categories",
-	"record.metadata.type": "Geographical dataset",
+	"record.metadata.isGeographical": "Geographical dataset",
 	"record.metadata.uniqueId": "Unique Identifier",
 	"record.metadata.updateFrequency": "Data Update Frequency",
 	"record.metadata.updatedOn": "Updated on",
@@ -19675,6 +19683,7 @@ var en = {
 	"search.error.recordNotFound": "The dataset with identifier \"{ id }\" could not be found.",
 	"search.field.any.placeholder": "Search in the catalog ...",
 	"search.field.sortBy": "Sort by:",
+	"search.filter.into.feature.catalog": "Search a term",
 	"search.filters.availableServices.download": "",
 	"search.filters.availableServices.view": "",
 	"search.filters.changeDate": "Updated",
@@ -19738,6 +19747,7 @@ var en = {
 	"service.metadata.other": "Other information",
 	"service.metadata.question": "Ask a question",
 	"service.metadata.search": "Search through the layer list",
+	"service.metadata.search.clear": "Clear the layer search",
 	"service.metadata.spatialExtent": "Spatial extent",
 	"share.tab.permalink": "Share",
 	"share.tab.webComponent": "Integrate",
@@ -19756,8 +19766,6 @@ var en = {
 	"tooltip.url.open": "Open URL",
 	"ui.readLess": "Read less",
 	"ui.readMore": "Read more",
-	"ui.hideFullText": "Hide complete text",
-	"ui.showAllText": "Show all text",
 	"wfs.feature.limit": "Too many features to display the WFS layer!",
 	"wfs.featuretype.notfound": "No matching feature type was found in the service",
 	"wfs.geojsongml.notsupported": "This service does not support the GeoJSON or GML format",
@@ -20133,8 +20141,9 @@ var es = {
 	"record.action.view": "",
 	"record.card.metadata.contact": "",
 	"record.externalViewer.open": "",
+	"record.feature.catalog.number.total.attribute": "",
+	"record.feature.catalog.number.total.object": "",
 	"record.feature.limit": "",
-	"record.kind.data": "",
 	"record.kind.dataset": "",
 	"record.kind.reuse": "",
 	"record.kind.service": "",
@@ -20177,6 +20186,7 @@ var es = {
 	"record.metadata.creation": "",
 	"record.metadata.details": "",
 	"record.metadata.download": "",
+	"record.metadata.feature.catalog": "",
 	"record.metadata.formats": "",
 	"record.metadata.keywords": "",
 	"record.metadata.languages": "",
@@ -20220,7 +20230,7 @@ var es = {
 	"record.metadata.temporalExtent.untilDate": "",
 	"record.metadata.title": "",
 	"record.metadata.topics": "",
-	"record.metadata.type": "",
+	"record.metadata.isGeographical": "",
 	"record.metadata.uniqueId": "",
 	"record.metadata.updateFrequency": "",
 	"record.metadata.updatedOn": "",
@@ -20260,6 +20270,7 @@ var es = {
 	"search.error.recordNotFound": "",
 	"search.field.any.placeholder": "",
 	"search.field.sortBy": "",
+	"search.filter.into.feature.catalog": "",
 	"search.filters.availableServices.download": "",
 	"search.filters.availableServices.view": "",
 	"search.filters.changeDate": "Última actualización",
@@ -20323,6 +20334,7 @@ var es = {
 	"service.metadata.other": "",
 	"service.metadata.question": "",
 	"service.metadata.search": "",
+	"service.metadata.search.clear": "",
 	"service.metadata.spatialExtent": "",
 	"share.tab.permalink": "",
 	"share.tab.webComponent": "",
@@ -20716,8 +20728,9 @@ var fr = {
 	"record.action.view": "Voir",
 	"record.card.metadata.contact": "Contact de la métadonnée ",
 	"record.externalViewer.open": "Ouvrir dans le visualiseur externe",
+	"record.feature.catalog.number.total.attribute": "Nombre total d'attributs",
+	"record.feature.catalog.number.total.object": "Nombre total d'objets",
 	"record.feature.limit": "L’aperçu a été désactivé en raison d’un trop grand nombre d'éléments",
-	"record.kind.data": "Donnée",
 	"record.kind.dataset": "Donnée",
 	"record.kind.reuse": "Réutilisation",
 	"record.kind.service": "Service",
@@ -20760,6 +20773,7 @@ var fr = {
 	"record.metadata.creation": "Date de création",
 	"record.metadata.details": "À propos de la donnée",
 	"record.metadata.download": "Téléchargements",
+	"record.metadata.feature.catalog": "Catalogue d'attributs",
 	"record.metadata.formats": "Formats",
 	"record.metadata.keywords": "Mots-clés",
 	"record.metadata.languages": "Langues",
@@ -20803,7 +20817,7 @@ var fr = {
 	"record.metadata.temporalExtent.untilDate": "Jusqu'au { end }",
 	"record.metadata.title": "Intitulé",
 	"record.metadata.topics": "Catégories",
-	"record.metadata.type": "Donnée géographique",
+	"record.metadata.isGeographical": "Donnée géographique",
 	"record.metadata.uniqueId": "Identificateur de ressource unique",
 	"record.metadata.updateFrequency": "Fréquence de mise à jour des données",
 	"record.metadata.updatedOn": "Modifié le",
@@ -20843,6 +20857,7 @@ var fr = {
 	"search.error.recordNotFound": "Cette donnée n'a pu être trouvée.",
 	"search.field.any.placeholder": "Rechercher dans le catalogue...",
 	"search.field.sortBy": "Trier par :",
+	"search.filter.into.feature.catalog": "Rechercher un terme",
 	"search.filters.availableServices.download": "",
 	"search.filters.availableServices.view": "",
 	"search.filters.changeDate": "Mise à jour",
@@ -20906,6 +20921,7 @@ var fr = {
 	"service.metadata.other": "Autres informations",
 	"service.metadata.question": "Poser une question",
 	"service.metadata.search": "Rechercher dans la liste des couches",
+	"service.metadata.search.clear": "Effacer la recherche des couches",
 	"service.metadata.spatialExtent": "Etendue spatiale",
 	"share.tab.permalink": "Partager",
 	"share.tab.webComponent": "Intégrer",
@@ -20924,8 +20940,6 @@ var fr = {
 	"tooltip.url.open": "Ouvrir l'URL",
 	"ui.readLess": "Réduire",
 	"ui.readMore": "Lire la suite",
-	"ui.hideFullText": "Masquer le texte complet",
-	"ui.showAllText": "Tout afficher",
 	"wfs.feature.limit": "Trop d'objets pour afficher la couche WFS !",
 	"wfs.featuretype.notfound": "La classe d'objets n'a pas été trouvée dans le service",
 	"wfs.geojsongml.notsupported": "Le service ne supporte pas le format GeoJSON ou GML",
@@ -21012,7 +21026,7 @@ var it = {
 	"dataset.error.http": "Il caricamento dei dati non è riuscito a causa di un errore HTTP: \"{info}\"",
 	"dataset.error.network": "Il caricamento dei dati non è riuscito a causa di un errore di rete o di limitazioni CORS: \"{info}\"",
 	"dataset.error.parse": "I dati sono stati caricati ma la decodifica non è riuscita: \"{info}\"",
-	"dataset.error.restrictedAccess": "",
+	"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}\"",
 	"domain.contact.role.author": "Autore",
@@ -21144,9 +21158,9 @@ var it = {
 	"editor.record.form.license.odc-by": "Open Data Commons ODC-By",
 	"editor.record.form.license.pddl": "Open Data Commons PDDL",
 	"editor.record.form.license.unknown": "Sconosciuto o assente",
-	"editor.record.form.multilingual.enable": "",
-	"editor.record.form.multilingual.open": "",
-	"editor.record.form.multilingual.title": "",
+	"editor.record.form.multilingual.enable": "Aprire il pannello multilingue",
+	"editor.record.form.multilingual.open": "Modalità multilingue",
+	"editor.record.form.multilingual.title": "Traduzioni",
 	"editor.record.form.page.accessAndContact": "Informazioni per l'uso",
 	"editor.record.form.page.description": "Descrizione del dataset",
 	"editor.record.form.page.resources": "Risorse",
@@ -21176,7 +21190,7 @@ var it = {
 	"editor.record.loadError.body": "Impossibile caricare il dataset:",
 	"editor.record.loadError.closeMessage": "Capito",
 	"editor.record.loadError.title": "Errore durante il caricamento",
-	"editor.record.lock.format": "",
+	"editor.record.lock.format": "I record con il formato 'servizio' o 'riutilizzo' non sono modificabili",
 	"editor.record.lock.reason": "Non è un editore di uno dei gruppi autorizzati",
 	"editor.record.onlineResource.protocol.other": "Altro",
 	"editor.record.onlineResourceError.body": "Ha successo un'errore durante l'aggiunta della risorsa:",
@@ -21275,7 +21289,7 @@ var it = {
 	"map.wms.urlInput.hint": "Inserisci URL del servizio WMS",
 	"multiselect.filter.placeholder": "Cerca",
 	"nav.back": "Indietro",
-	"navbar.mobile.menuTitle": "",
+	"navbar.mobile.menuTitle": "Accesso rapido",
 	next: next$2,
 	"ogc.unreachable.unknown": "Il servizio non è accessibile",
 	"organisation.filter.placeholder": "Filtra i risultati",
@@ -21299,13 +21313,14 @@ var it = {
 	"record.action.duplicating": "Duplicazione",
 	"record.action.rollback": "Annulla",
 	"record.action.view": "Visualizza",
-	"record.card.metadata.contact": "",
+	"record.card.metadata.contact": "Contatto del metadata",
 	"record.externalViewer.open": "Aprire nel visualizzatore esterno",
+	"record.feature.catalog.number.total.attribute": "Quantità totale di oggetti",
+	"record.feature.catalog.number.total.object": "Quantità totale di attributi",
 	"record.feature.limit": "La visualizzazione è stata disabilitata a causa di troppi elementi ",
-	"record.kind.data": "",
-	"record.kind.dataset": "",
-	"record.kind.reuse": "",
-	"record.kind.service": "",
+	"record.kind.dataset": "Dataset",
+	"record.kind.reuse": "Riutilizzato",
+	"record.kind.service": "Servizio",
 	"record.metadata.about": "Descrizione",
 	"record.metadata.api": "API",
 	"record.metadata.api.form.closeButton": "Chiude",
@@ -21339,12 +21354,13 @@ var it = {
 	"record.metadata.api.form.zoneTitle": "Zona",
 	"record.metadata.api.form.zoneTooltip": "Menu a discesa per selezionare una zona geografica",
 	"record.metadata.api.gpfdl": "Scarica",
-	"record.metadata.capabilities": "",
+	"record.metadata.capabilities": "Capacità del servizio",
 	"record.metadata.catalog": "Catalogo",
 	"record.metadata.contact": "Contatto",
 	"record.metadata.creation": "Data di creazione",
 	"record.metadata.details": "A proposito del dati",
 	"record.metadata.download": "Download",
+	"record.metadata.feature.catalog": "Catalogo dei oggetti",
 	"record.metadata.formats": "Formati",
 	"record.metadata.keywords": "Parole chiave",
 	"record.metadata.languages": "Lingue",
@@ -21376,7 +21392,7 @@ var it = {
 	"record.metadata.quality.updateFrequency.failed": "La frequenza di aggiornamento non è specificata",
 	"record.metadata.quality.updateFrequency.success": "La frequenza di aggiornamento è specificata",
 	"record.metadata.related": "Vedi anche",
-	"record.metadata.related.contents": "",
+	"record.metadata.related.contents": "Contenuti correlati",
 	"record.metadata.ressources.and.links": "Risorse e collegamenti",
 	"record.metadata.sheet": "Origine del metadata",
 	"record.metadata.status": "Stato",
@@ -21388,7 +21404,7 @@ var it = {
 	"record.metadata.temporalExtent.untilDate": "Fino a {end}",
 	"record.metadata.title": "Titolo",
 	"record.metadata.topics": "Categorie",
-	"record.metadata.type": "Dati geografici",
+	"record.metadata.isGeographical": "Dati geografici",
 	"record.metadata.uniqueId": "Identificatore unico di risorsa",
 	"record.metadata.updateFrequency": "Frequenza di aggiornamento dei dati",
 	"record.metadata.updatedOn": "Modificato il",
@@ -21418,7 +21434,7 @@ var it = {
 	"results.sortBy.popularity": "Popolarità",
 	"results.sortBy.qualityScore": "Indicatore di qualità",
 	"results.sortBy.relevancy": "Rilevanza",
-	"reuse.metadata.access": "",
+	"reuse.metadata.access": "Accedere al riutilizzo",
 	"search.autocomplete.error": "Impossibile recuperare le suggerimenti",
 	"search.error.couldNotReachApi": "Problema di connessione all'API",
 	"search.error.organizationHasNoDataset": "Questa organizzazione non ha ancora dati.",
@@ -21428,6 +21444,7 @@ var it = {
 	"search.error.recordNotFound": "Impossibile trovare questi dati.",
 	"search.field.any.placeholder": "Cerca del catalogo...",
 	"search.field.sortBy": "Ordina per:",
+	"search.filter.into.feature.catalog": "Cerca una parola",
 	"search.filters.availableServices.download": "",
 	"search.filters.availableServices.view": "",
 	"search.filters.changeDate": "Aggiornato",
@@ -21473,25 +21490,26 @@ var it = {
 	"search.filters.useSpatialFilterHelp": "Se attivata, le schede relative all'area di interesse del catalogo saranno mostrate per prime; le schede al di fuori di questa area non appariranno nei risultati.",
 	"search.filters.user": "Editore",
 	"service.metadata.capabilities": "Informazioni tecniche",
-	"service.metadata.capabilities.abstract": "",
-	"service.metadata.capabilities.attribution": "",
-	"service.metadata.capabilities.availableCrs": "",
-	"service.metadata.capabilities.defaultCrs": "",
-	"service.metadata.capabilities.geometryName": "",
-	"service.metadata.capabilities.geometryType": "",
-	"service.metadata.capabilities.keywords": "",
-	"service.metadata.capabilities.name": "",
-	"service.metadata.capabilities.objectCount": "",
-	"service.metadata.capabilities.otherCrs": "",
-	"service.metadata.capabilities.outputFormats": "",
-	"service.metadata.capabilities.resourceLinks": "",
-	"service.metadata.capabilities.title": "",
-	"service.metadata.filter": "",
-	"service.metadata.filter.noLayers": "",
-	"service.metadata.other": "",
-	"service.metadata.question": "",
-	"service.metadata.search": "",
-	"service.metadata.spatialExtent": "",
+	"service.metadata.capabilities.abstract": "Riassunto",
+	"service.metadata.capabilities.attribution": "Attribuzione",
+	"service.metadata.capabilities.availableCrs": "CRS disponibile",
+	"service.metadata.capabilities.defaultCrs": "CRS predefinito",
+	"service.metadata.capabilities.geometryName": "Nome della geometria",
+	"service.metadata.capabilities.geometryType": "Tipo della geometria",
+	"service.metadata.capabilities.keywords": "Parole chiave",
+	"service.metadata.capabilities.name": "Nome",
+	"service.metadata.capabilities.objectCount": "Oggetti conto",
+	"service.metadata.capabilities.otherCrs": "Altri CRS",
+	"service.metadata.capabilities.outputFormats": "Formato di output",
+	"service.metadata.capabilities.resourceLinks": "Risorsa links",
+	"service.metadata.capabilities.title": "Titolo",
+	"service.metadata.filter": "I layers verranno filtrati per titolo e riassunto",
+	"service.metadata.filter.noLayers": "Nessun layer abbina la ricerca",
+	"service.metadata.other": "Altri informazioni",
+	"service.metadata.question": "Fare una domanda",
+	"service.metadata.search": "Cerca nella lista del layers",
+	"service.metadata.search.clear": "Cancella la ricerca del layers",
+	"service.metadata.spatialExtent": "Estensione spaziale",
 	"share.tab.permalink": "Condividere",
 	"share.tab.webComponent": "Incorporare",
 	"table.loading.data": "Caricamento dei dati...",
@@ -21884,8 +21902,9 @@ var nl = {
 	"record.action.view": "",
 	"record.card.metadata.contact": "",
 	"record.externalViewer.open": "",
+	"record.feature.catalog.number.total.attribute": "",
+	"record.feature.catalog.number.total.object": "",
 	"record.feature.limit": "",
-	"record.kind.data": "",
 	"record.kind.dataset": "",
 	"record.kind.reuse": "",
 	"record.kind.service": "",
@@ -21928,6 +21947,7 @@ var nl = {
 	"record.metadata.creation": "",
 	"record.metadata.details": "",
 	"record.metadata.download": "",
+	"record.metadata.feature.catalog": "",
 	"record.metadata.formats": "",
 	"record.metadata.keywords": "",
 	"record.metadata.languages": "",
@@ -21971,7 +21991,7 @@ var nl = {
 	"record.metadata.temporalExtent.untilDate": "",
 	"record.metadata.title": "",
 	"record.metadata.topics": "",
-	"record.metadata.type": "",
+	"record.metadata.isGeographical": "",
 	"record.metadata.uniqueId": "",
 	"record.metadata.updateFrequency": "",
 	"record.metadata.updatedOn": "",
@@ -22011,6 +22031,7 @@ var nl = {
 	"search.error.recordNotFound": "",
 	"search.field.any.placeholder": "",
 	"search.field.sortBy": "",
+	"search.filter.into.feature.catalog": "",
 	"search.filters.availableServices.download": "",
 	"search.filters.availableServices.view": "",
 	"search.filters.changeDate": "",
@@ -22074,6 +22095,7 @@ var nl = {
 	"service.metadata.other": "",
 	"service.metadata.question": "",
 	"service.metadata.search": "",
+	"service.metadata.search.clear": "",
 	"service.metadata.spatialExtent": "",
 	"share.tab.permalink": "",
 	"share.tab.webComponent": "",
@@ -22467,8 +22489,9 @@ var pt = {
 	"record.action.view": "",
 	"record.card.metadata.contact": "",
 	"record.externalViewer.open": "",
+	"record.feature.catalog.number.total.attribute": "",
+	"record.feature.catalog.number.total.object": "",
 	"record.feature.limit": "",
-	"record.kind.data": "",
 	"record.kind.dataset": "",
 	"record.kind.reuse": "",
 	"record.kind.service": "",
@@ -22511,6 +22534,7 @@ var pt = {
 	"record.metadata.creation": "",
 	"record.metadata.details": "",
 	"record.metadata.download": "",
+	"record.metadata.feature.catalog": "",
 	"record.metadata.formats": "",
 	"record.metadata.keywords": "",
 	"record.metadata.languages": "",
@@ -22554,7 +22578,7 @@ var pt = {
 	"record.metadata.temporalExtent.untilDate": "",
 	"record.metadata.title": "",
 	"record.metadata.topics": "",
-	"record.metadata.type": "",
+	"record.metadata.isGeographical": "",
 	"record.metadata.uniqueId": "",
 	"record.metadata.updateFrequency": "",
 	"record.metadata.updatedOn": "",
@@ -22594,6 +22618,7 @@ var pt = {
 	"search.error.recordNotFound": "",
 	"search.field.any.placeholder": "",
 	"search.field.sortBy": "",
+	"search.filter.into.feature.catalog": "",
 	"search.filters.availableServices.download": "",
 	"search.filters.availableServices.view": "",
 	"search.filters.changeDate": "",
@@ -22657,6 +22682,7 @@ var pt = {
 	"service.metadata.other": "",
 	"service.metadata.question": "",
 	"service.metadata.search": "",
+	"service.metadata.search.clear": "",
 	"service.metadata.spatialExtent": "",
 	"share.tab.permalink": "",
 	"share.tab.webComponent": "",
@@ -23027,6 +23053,7 @@ class Gn4FieldMapper {
             /^OGC:WMS/.test(protocol) ||
             /^OGC:WFS/.test(protocol) ||
             /^OGC:WMTS/.test(protocol) ||
+            /TMS/i.test(protocol) ||
             /ogc\W*api\W*features/i.test(protocol) ||
             (/^WWW:DOWNLOAD-/.test(protocol) && /data.geopf.fr/.test(url)) // TO DO : change with the good protocol when decided
         ) {
@@ -23151,6 +23178,7 @@ const ES_SOURCE_SUMMARY = [
     'overview',
     'logo',
     'codelist_status_text',
+    'link',
     'linkProtocol',
     'contactForResource.organisation',
     'contact.organisation',
@@ -23726,7 +23754,9 @@ class Gn4Repository {
                 attributes: Array.isArray(featureType.attributeTable)
                     ? featureType.attributeTable.map((attr) => ({
                         name: attr.name,
+                        code: attr.code,
                         title: attr.definition,
+                        type: attr.type,
                     }))
                     : [],
             })),
@@ -23735,7 +23765,8 @@ class Gn4Repository {
     getFeatureCatalog(record, visited = new Set() // prevent looping
     ) {
         if (record.extras?.['featureTypes'] &&
-            Array.isArray(record.extras['featureTypes'])) {
+            Array.isArray(record.extras['featureTypes']) &&
+            record.extras['featureTypes'].length > 0) {
             return of(this.mapEmbeddedFeatureCatalog(record.extras['featureTypes']));
         }
         const featureCatalogIdentifier = record.extras['featureCatalogIdentifier'];
@@ -23822,8 +23853,8 @@ class Gn4Repository {
             const converter = findConverterForDocument(fetchedRecordAsXml);
             const record = await converter.readRecord(fetchedRecordAsXml);
             record.title = `${record.title} (Copy)`;
-            await converter.writeRecord(record, fetchedRecordAsXml);
-            return this.saveRecord(record, '', false);
+            const recordAsXml = await converter.writeRecord(record, fetchedRecordAsXml);
+            return this.saveRecord(record, recordAsXml, false);
         }), exhaustMap((uuidObservable) => uuidObservable), catchError((error) => {
             return throwError(() => error);
         }));
@@ -25230,6 +25261,9 @@ function getLinkLabel(link) {
                     case 'wmts':
                         format = 'WMTS';
                         break;
+                    case 'tms':
+                        format = 'TMS';
+                        break;
                     case 'esriRest':
                         format = 'REST';
                         break;
@@ -25309,7 +25343,10 @@ class LinkClassifierService {
                         return [LinkUsage.API, LinkUsage.DOWNLOAD, LinkUsage.GEODATA];
                     case 'wms':
                     case 'wmts':
+                    case 'tms':
                         return [LinkUsage.API, LinkUsage.MAP_API];
+                    case 'maplibre-style':
+                        return [LinkUsage.GEODATA];
                     case 'ogcFeatures':
                         return [LinkUsage.API, LinkUsage.DOWNLOAD, LinkUsage.GEODATA];
                     case 'GPFDL':
@@ -25351,7 +25388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 var name = "geonetwork-ui";
-var version = "2.6.0-dev.857b51517";
+var version = "2.6.0-dev.97a89c313";
 var engines = {
 	node: ">=20"
 };
@@ -25404,7 +25441,7 @@ var dependencies = {
 	"@nx/angular": "20.2.2",
 	"@rgrove/parse-xml": "4.2.0",
 	alasql: "4.6.0",
-	axios: "1.7.9",
+	axios: "1.8.2",
 	basiclightbox: "^5.0.4",
 	"chart.js": "4.4.7",
 	"chroma-js": "3.1.2",
@@ -25948,35 +25985,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class ExpandablePanelComponent {
-    constructor() {
-        this.collapsed = true;
-        this.maxHeight = this.setMaxHeight();
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.iconColor = '';
+        this._collapsed = true;
+    }
+    ngAfterViewInit() {
+        if (this.contentDiv) {
+            this.contentObserver = new ResizeObserver(() => {
+                this.changeDetector.detectChanges();
+            });
+            this.contentObserver.observe(this.contentDiv.nativeElement);
+        }
+    }
+    set collapsed(value) {
+        this._collapsed = value;
+    }
+    get collapsed() {
+        return this._collapsed;
     }
     toggle() {
         this.collapsed = !this.collapsed;
-        this.maxHeight = this.setMaxHeight();
     }
-    setMaxHeight() {
-        return `${this.collapsed ? '0' : this.contentDiv.nativeElement.scrollHeight}px`;
+    ngOnDestroy() {
+        if (this.contentObserver) {
+            this.contentObserver.disconnect();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ExpandablePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ExpandablePanelComponent, isStandalone: true, selector: "gn-ui-expandable-panel", inputs: { title: "title", collapsed: "collapsed" }, viewQueries: [{ propertyName: "contentDiv", first: true, predicate: ["contentDiv"], descendants: true }], ngImport: i0, template: "<div\n  class=\"group flex align-middle title border-b border-gray-100 cursor-pointer pt-2.5\"\n  (click)=\"toggle()\"\n>\n  <div class=\"grow font-medium text-black text-sm\">\n    {{ title }}\n  </div>\n  <div\n    class=\"w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity\"\n  >\n    <ng-icon name=\"matAdd\" *ngIf=\"collapsed\"></ng-icon>\n    <ng-icon name=\"matRemove\" *ngIf=\"!collapsed\"></ng-icon>\n  </div>\n</div>\n<div\n  class=\"content overflow-hidden transition-[max-height] duration-300\"\n  [ngClass]=\"collapsed ? 'ease-out' : 'ease-in'\"\n  [style.maxHeight]=\"maxHeight\"\n  #contentDiv\n>\n  <ng-content></ng-content>\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: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [provideIcons({ matAdd, matRemove })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ExpandablePanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ExpandablePanelComponent, isStandalone: true, selector: "gn-ui-expandable-panel", inputs: { title: "title", iconColor: "iconColor", collapsed: "collapsed" }, queries: [{ propertyName: "titleTemplate", first: true, predicate: ["titleTemplate"], descendants: true }], viewQueries: [{ propertyName: "contentDiv", first: true, predicate: ["contentDiv"], descendants: true }], ngImport: i0, template: "<div\n  class=\"group flex items-center justify-between title border-b border-gray-100 cursor-pointer\"\n  (click)=\"toggle()\"\n  data-cy=\"expandable-panel-header\"\n>\n  <div class=\"grow py-2.5\">\n    <ng-container *ngIf=\"titleTemplate; else simpleTitle\">\n      <div data-cy=\"expandable-panel-custom-title\">\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n      </div>\n    </ng-container>\n    <ng-template #simpleTitle>\n      <div\n        class=\"font-medium text-black text-sm\"\n        data-cy=\"expandable-panel-title\"\n      >\n        {{ title }}\n      </div>\n    </ng-template>\n  </div>\n  <div\n    class=\"w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity flex items-center shrink-0\"\n  >\n    <ng-icon\n      [name]=\"collapsed ? 'matAdd' : 'matRemove'\"\n      [style.color]=\"iconColor\"\n    ></ng-icon>\n  </div>\n</div>\n<div\n  class=\"content overflow-hidden transition-all duration-300\"\n  [ngClass]=\"collapsed ? 'ease-out' : 'ease-in'\"\n  #contentDiv\n  *ngIf=\"!collapsed\"\n  data-cy=\"expandable-panel-content\"\n>\n  <ng-content></ng-content>\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: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], viewProviders: [provideIcons({ matAdd, matRemove })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ExpandablePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-expandable-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, NgIcon], viewProviders: [provideIcons({ matAdd, matRemove })], template: "<div\n  class=\"group flex align-middle title border-b border-gray-100 cursor-pointer pt-2.5\"\n  (click)=\"toggle()\"\n>\n  <div class=\"grow font-medium text-black text-sm\">\n    {{ title }}\n  </div>\n  <div\n    class=\"w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity\"\n  >\n    <ng-icon name=\"matAdd\" *ngIf=\"collapsed\"></ng-icon>\n    <ng-icon name=\"matRemove\" *ngIf=\"!collapsed\"></ng-icon>\n  </div>\n</div>\n<div\n  class=\"content overflow-hidden transition-[max-height] duration-300\"\n  [ngClass]=\"collapsed ? 'ease-out' : 'ease-in'\"\n  [style.maxHeight]=\"maxHeight\"\n  #contentDiv\n>\n  <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { title: [{
+            args: [{ selector: 'gn-ui-expandable-panel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, NgIcon], viewProviders: [provideIcons({ matAdd, matRemove })], template: "<div\n  class=\"group flex items-center justify-between title border-b border-gray-100 cursor-pointer\"\n  (click)=\"toggle()\"\n  data-cy=\"expandable-panel-header\"\n>\n  <div class=\"grow py-2.5\">\n    <ng-container *ngIf=\"titleTemplate; else simpleTitle\">\n      <div data-cy=\"expandable-panel-custom-title\">\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n      </div>\n    </ng-container>\n    <ng-template #simpleTitle>\n      <div\n        class=\"font-medium text-black text-sm\"\n        data-cy=\"expandable-panel-title\"\n      >\n        {{ title }}\n      </div>\n    </ng-template>\n  </div>\n  <div\n    class=\"w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity flex items-center shrink-0\"\n  >\n    <ng-icon\n      [name]=\"collapsed ? 'matAdd' : 'matRemove'\"\n      [style.color]=\"iconColor\"\n    ></ng-icon>\n  </div>\n</div>\n<div\n  class=\"content overflow-hidden transition-all duration-300\"\n  [ngClass]=\"collapsed ? 'ease-out' : 'ease-in'\"\n  #contentDiv\n  *ngIf=\"!collapsed\"\n  data-cy=\"expandable-panel-content\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
                 type: Input
-            }], collapsed: [{
+            }], iconColor: [{
                 type: Input
+            }], titleTemplate: [{
+                type: ContentChild,
+                args: ['titleTemplate']
             }], contentDiv: [{
                 type: ViewChild,
                 args: ['contentDiv']
+            }], collapsed: [{
+                type: Input
             }] } });
 
 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: i1$4.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: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.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: i3.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: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.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,
@@ -26481,7 +26539,7 @@ 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$5.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;-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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoadingMaskComponent, decorators: [{
             type: Component,
@@ -26811,7 +26869,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)=\"handleEnter(searchInput.value)\"\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)=\"handleClickSearch()\"\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\"\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$6.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$6.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: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.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)=\"handleEnter(searchInput.value)\"\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)=\"handleClickSearch()\"\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: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -26832,7 +26890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         provideNgIconsConfig({
                             size: '1.75rem',
                         }),
-                    ], 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)=\"handleEnter(searchInput.value)\"\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)=\"handleClickSearch()\"\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\"\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"] }]
+                    ], 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)=\"handleEnter(searchInput.value)\"\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)=\"handleClickSearch()\"\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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { placeholder: [{
                 type: Input
             }], enterButton: [{
@@ -26953,7 +27011,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, selector: "gn-ui-checkbox", inputs: { type: "type", checked: "checked", indeterminate: "indeterminate" }, outputs: { changed: "changed" }, ngImport: i0, template: "<mat-checkbox\n  class=\"cursor-pointer\"\n  [class]=\"classList\"\n  [checked]=\"checked\"\n  [indeterminate]=\"indeterminate\"\n  (click)=\"handleClick($event)\"\n></mat-checkbox>\n", styles: [".default{--gn-ui-checkbox-color: var(--color-main)}.secondary{--gn-ui-checkbox-color: var(--color-secondary)}.primary{--gn-ui-checkbox-color: var(--color-primary)}mat-checkbox{--mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-state-layer-color: var( --gn-ui-checkbox-color )}\n"], dependencies: [{ kind: "component", type: i1$7.MatCheckbox, selector: "mat-checkbox", inputs: ["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, selector: "gn-ui-checkbox", inputs: { type: "type", checked: "checked", indeterminate: "indeterminate" }, outputs: { changed: "changed" }, ngImport: i0, template: "<mat-checkbox\n  class=\"cursor-pointer\"\n  [class]=\"classList\"\n  [checked]=\"checked\"\n  [indeterminate]=\"indeterminate\"\n  (click)=\"handleClick($event)\"\n></mat-checkbox>\n", styles: [".default{--gn-ui-checkbox-color: var(--color-main)}.secondary{--gn-ui-checkbox-color: var(--color-secondary)}.primary{--gn-ui-checkbox-color: var(--color-primary)}mat-checkbox{--mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-state-layer-color: var( --gn-ui-checkbox-color )}\n"], dependencies: [{ kind: "component", type: i1$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -26978,7 +27036,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: i1$4.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: i3.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,
@@ -27003,7 +27061,7 @@ class DatePickerComponent {
             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$8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$8.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 }); }
+        ], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -27041,13 +27099,13 @@ class DateRangeDropdownComponent {
             overlayContainerElement.querySelector('.mat-datepicker-content') !== null;
         this.cdr.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeDropdownComponent, deps: [{ token: i1$9.OverlayContainer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeDropdownComponent, deps: [{ token: i1$8.OverlayContainer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateRangeDropdownComponent, isStandalone: true, selector: "gn-ui-date-range-dropdown", inputs: { title: "title", startDate: "startDate", endDate: "endDate" }, outputs: { startDateChange: "startDateChange", endDateChange: "endDateChange" }, providers: [
             provideIcons({
                 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$8.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$8.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$8.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$8.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: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeDropdownComponent, decorators: [{
             type: Component,
@@ -27063,7 +27121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             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"] }]
-        }], ctorParameters: () => [{ type: i1$9.OverlayContainer }, { type: i0.ChangeDetectorRef }], propDecorators: { title: [{
+        }], ctorParameters: () => [{ type: i1$8.OverlayContainer }, { type: i0.ChangeDetectorRef }], propDecorators: { title: [{
                 type: Input
             }], startDate: [{
                 type: Input
@@ -27089,7 +27147,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$8.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$8.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$8.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$8.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: 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -27131,7 +27189,7 @@ class DragAndDropFileInputComponent {
         this.fileChange.emit(this.selectedFile);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DragAndDropFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DragAndDropFileInputComponent, selector: "gn-ui-drag-and-drop-file-input", inputs: { placeholder: "placeholder", accept: "accept" }, outputs: { fileChange: "fileChange" }, ngImport: i0, template: "<div class=\"flex h-full\">\n  <ngx-dropzone\n    class=\"flex-1\"\n    multiple=\"false\"\n    (change)=\"selectFile($event)\"\n    [accept]=\"accept\"\n  >\n    <div *ngIf=\"!fileName\" class=\"text-gray-900 pl-2 py-2\" translate=\"\">\n      {{ placeholder }}\n    </div>\n\n    <div *ngIf=\"fileName\" class=\"text-gray-900 pl-2 py-2\">{{ fileName }}</div>\n  </ngx-dropzone>\n</div>\n", styles: ["ngx-dropzone{height:auto;border:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i3.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "processDirectoryDrop", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DragAndDropFileInputComponent, selector: "gn-ui-drag-and-drop-file-input", inputs: { placeholder: "placeholder", accept: "accept" }, outputs: { fileChange: "fileChange" }, ngImport: i0, template: "<div class=\"flex h-full\">\n  <ngx-dropzone\n    class=\"flex-1\"\n    multiple=\"false\"\n    (change)=\"selectFile($event)\"\n    [accept]=\"accept\"\n  >\n    <div *ngIf=\"!fileName\" class=\"text-gray-900 pl-2 py-2\" translate=\"\">\n      {{ placeholder }}\n    </div>\n\n    <div *ngIf=\"fileName\" class=\"text-gray-900 pl-2 py-2\">{{ fileName }}</div>\n  </ngx-dropzone>\n</div>\n", styles: ["ngx-dropzone{height:auto;border:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i3$1.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "processDirectoryDrop", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DragAndDropFileInputComponent, decorators: [{
             type: Component,
@@ -27289,13 +27347,13 @@ class DropdownMultiselectComponent {
         propagateToDocumentOnly(event);
         this.setFocus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownMultiselectComponent, deps: [{ token: i1$9.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DropdownMultiselectComponent, selector: "gn-ui-dropdown-multiselect", inputs: { title: "title", choices: "choices", selected: "selected", allowSearch: "allowSearch", maxRows: "maxRows", searchInputValue: "searchInputValue" }, outputs: { selectValues: "selectValues" }, viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, read: ElementRef }, { propertyName: "searchFieldInput", first: true, predicate: ["searchFieldInput"], descendants: true }, { propertyName: "checkboxes", predicate: ["checkBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"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: "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: 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: "directive", type: i1$9.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$9.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: i2$2.NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownMultiselectComponent, deps: [{ token: i1$8.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DropdownMultiselectComponent, selector: "gn-ui-dropdown-multiselect", inputs: { title: "title", choices: "choices", selected: "selected", allowSearch: "allowSearch", maxRows: "maxRows", searchInputValue: "searchInputValue" }, outputs: { selectValues: "selectValues" }, viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, read: ElementRef }, { propertyName: "searchFieldInput", first: true, predicate: ["searchFieldInput"], descendants: true }, { propertyName: "checkboxes", predicate: ["checkBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"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: "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: 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: "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: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: i2$2.NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownMultiselectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gn-ui-dropdown-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"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" }]
-        }], ctorParameters: () => [{ type: i1$9.ScrollStrategyOptions }], propDecorators: { title: [{
+        }], ctorParameters: () => [{ type: i1$8.ScrollStrategyOptions }], propDecorators: { title: [{
                 type: Input
             }], choices: [{
                 type: Input
@@ -27467,7 +27525,7 @@ class DropdownSelectorComponent {
             provideNgIconsConfig({
                 size: '1.5em',
             }),
-        ], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "choiceInputs", predicate: ["choiceInputs"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-col sm:flex-row sm:items-center relative w-full\">\n  <span\n    *ngIf=\"showTitle\"\n    class=\"tracking-wide text-sm mb-2 sm:mb-0 sm:mr-2 whitespace-nowrap\"\n    [attr.for]=\"id\"\n  >\n    {{ title }}\n  </span>\n  <gn-ui-button\n    type=\"outline\"\n    class=\"grow min-w-0\"\n    [style.--gn-ui-button-padding]=\"'8px 8px 8px 16px'\"\n    extraClass=\"bg-background flex flex-row w-full {{ extraBtnClass }}\"\n    [title]=\"title\"\n    [attr.aria-owns]=\"id\"\n    (buttonClick)=\"openOverlay()\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n    [disabled]=\"disabled\"\n  >\n    <div class=\"grow truncate py-1 mr-2 text-left\">\n      {{ getChoiceLabel() | translate }}\n    </div>\n    <ng-icon\n      [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n      class=\"shrink-0 opacity-40\"\n    >\n    </ng-icon>\n  </gn-ui-button>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.min-width]=\"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  >\n    <button\n      #choiceInputs\n      type=\"button\"\n      *ngFor=\"let choice of choices\"\n      [title]=\"choice.label | translate\"\n      class=\"flex px-5 py-1 w-full text-start cursor-pointer transition-colors\"\n      [ngClass]=\"\n        isSelected(choice)\n          ? 'text-white bg-primary hover:text-white hover:bg-primary-darker focus:text-white focus:bg-primary-darker'\n          : 'text-gray-900 hover:text-primary-darkest hover:bg-gray-50 focus:text-primary-darkest focus:bg-gray-50'\n      \"\n      (click)=\"onSelectValue(choice)\"\n      (keydown)=\"selectIfEnter($event, choice)\"\n      [attr.data-cy-value]=\"choice.value.toString()\"\n      [attr.data-cy-active]=\"isSelected(choice) ? 'true' : undefined\"\n    >\n      <span class=\"text-[14px]\">\n        {{ choice.label | translate }}\n      </span>\n    </button>\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.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: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$9.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$9.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "choiceInputs", predicate: ["choiceInputs"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-col sm:flex-row sm:items-center relative w-full\">\n  <span\n    *ngIf=\"showTitle\"\n    class=\"tracking-wide text-sm mb-2 sm:mb-0 sm:mr-2 whitespace-nowrap\"\n    [attr.for]=\"id\"\n  >\n    {{ title }}\n  </span>\n  <gn-ui-button\n    type=\"outline\"\n    class=\"grow min-w-0\"\n    [style.--gn-ui-button-padding]=\"'8px 8px 8px 16px'\"\n    extraClass=\"bg-background flex flex-row w-full {{ extraBtnClass }}\"\n    [title]=\"title\"\n    [attr.aria-owns]=\"id\"\n    (buttonClick)=\"openOverlay()\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n    [disabled]=\"disabled\"\n  >\n    <div class=\"grow truncate py-1 mr-2 text-left\">\n      {{ getChoiceLabel() | translate }}\n    </div>\n    <ng-icon\n      [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n      class=\"shrink-0 opacity-40\"\n    >\n    </ng-icon>\n  </gn-ui-button>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.min-width]=\"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  >\n    <button\n      #choiceInputs\n      type=\"button\"\n      *ngFor=\"let choice of choices\"\n      [title]=\"choice.label | translate\"\n      class=\"flex px-5 py-1 w-full text-start cursor-pointer transition-colors\"\n      [ngClass]=\"\n        isSelected(choice)\n          ? 'text-white bg-primary hover:text-white hover:bg-primary-darker focus:text-white focus:bg-primary-darker'\n          : 'text-gray-900 hover:text-primary-darkest hover:bg-gray-50 focus:text-primary-darkest focus:bg-gray-50'\n      \"\n      (click)=\"onSelectValue(choice)\"\n      (keydown)=\"selectIfEnter($event, choice)\"\n      [attr.data-cy-value]=\"choice.value.toString()\"\n      [attr.data-cy-active]=\"isSelected(choice) ? 'true' : undefined\"\n    >\n      <span class=\"text-[14px]\">\n        {{ choice.label | translate }}\n      </span>\n    </button>\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.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: "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: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { 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: DropdownSelectorComponent, decorators: [{
             type: Component,
@@ -27767,7 +27825,7 @@ class FileInputComponent {
             provideNgIconsConfig({
                 size: '1.5em',
             }),
-        ], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-[16px]\">\n  <label\n    gnUiFilesDrop\n    class=\"flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100\"\n    [ngClass]=\"{\n      'border-primary-lighter bg-primary-white': dragFilesOver,\n      'border-gray-300': !dragFilesOver,\n      'cursor-pointer hover:border-gray-500': !isUploadInProgress && !disabled,\n      'cursor-not-allowed': disabled,\n    }\"\n    [attr.tabindex]=\"isUploadInProgress || disabled ? null : 0\"\n    (dragFilesOver)=\"handleDragFilesOver($event)\"\n    (dropFiles)=\"handleDropFiles($event)\"\n    (keydown.enter)=\"fileInput.click()\"\n  >\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"hidden\"\n      (change)=\"handleFileInput($event)\"\n      [disabled]=\"isUploadInProgress || disabled\"\n    />\n\n    <div\n      class=\"w-14 h-14 rounded-md bg-gray-50 grid\"\n      *ngIf=\"!isUploadInProgress\"\n    >\n      <ng-icon\n        *ngIf=\"!dragFilesOver\"\n        class=\"place-self-center text-primary\"\n        name=\"iconoirCloudUpload\"\n      ></ng-icon>\n      <ng-icon\n        *ngIf=\"dragFilesOver\"\n        class=\"place-self-center text-primary\"\n        name=\"iconoirFramePlusIn\"\n      ></ng-icon>\n    </div>\n    <div\n      *ngIf=\"isUploadInProgress\"\n      class=\"w-14 h-14 grid items-center justify-center relative\"\n    >\n      <div class=\"text-gray-100 absolute\">\n        <mat-progress-spinner\n          class=\"place-self-center\"\n          [diameter]=\"56\"\n          mode=\"determinate\"\n          [value]=\"100\"\n        ></mat-progress-spinner>\n      </div>\n      <div class=\"text-primary absolute\">\n        <mat-progress-spinner\n          class=\"place-self-center\"\n          [diameter]=\"56\"\n          mode=\"determinate\"\n          [value]=\"uploadProgress\"\n        ></mat-progress-spinner>\n      </div>\n      <span class=\"text-sm text-main font-bold\">{{ uploadProgress }}%</span>\n    </div>\n    <div class=\"flex flex-col items-center gap-1\">\n      <p class=\"font-medium\">\n        {{ getPrimaryText() | translate: { sizeMB: maxSizeMB.toFixed(0) } }}\n      </p>\n      <p\n        class=\"text-sm\"\n        [class]=\"\n          isUploadInProgress\n            ? 'font-bold text-primary cursor-pointer'\n            : 'font-medium text-gray-500'\n        \"\n        (click)=\"handleSecondaryTextClick($event)\"\n      >\n        {{ getSecondaryText() | translate }}\n      </p>\n    </div>\n    <p class=\"w-full flex flex-row items-center justify-stretch gap-[16px]\">\n      <span class=\"border-b border-gray-300 grow\"></span>\n      <span class=\"text-sm font-medium text-gray-500 or-input-url\" translate>\n        input.file.orInputUrl</span\n      >\n      <span class=\"border-b border-gray-300 grow\"></span>\n    </p>\n    <gn-ui-url-input\n      class=\"w-full\"\n      [disabled]=\"isUploadInProgress || disabled\"\n      (uploadClick)=\"handleUrlChange($event)\"\n    ></gn-ui-url-input>\n  </label>\n</div>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], 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: FilesDropDirective, selector: "[gnUiFilesDrop]", outputs: ["dragFilesOver", "dropFiles"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"w-full flex flex-col gap-[16px]\">\n  <label\n    gnUiFilesDrop\n    class=\"flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100\"\n    [ngClass]=\"{\n      'border-primary-lighter bg-primary-white': dragFilesOver,\n      'border-gray-300': !dragFilesOver,\n      'cursor-pointer hover:border-gray-500': !isUploadInProgress && !disabled,\n      'cursor-not-allowed': disabled,\n    }\"\n    [attr.tabindex]=\"isUploadInProgress || disabled ? null : 0\"\n    (dragFilesOver)=\"handleDragFilesOver($event)\"\n    (dropFiles)=\"handleDropFiles($event)\"\n    (keydown.enter)=\"fileInput.click()\"\n  >\n    <input\n      #fileInput\n      type=\"file\"\n      class=\"hidden\"\n      (change)=\"handleFileInput($event)\"\n      [disabled]=\"isUploadInProgress || disabled\"\n    />\n\n    <div\n      class=\"w-14 h-14 rounded-md bg-gray-50 grid\"\n      *ngIf=\"!isUploadInProgress\"\n    >\n      <ng-icon\n        *ngIf=\"!dragFilesOver\"\n        class=\"place-self-center text-primary\"\n        name=\"iconoirCloudUpload\"\n      ></ng-icon>\n      <ng-icon\n        *ngIf=\"dragFilesOver\"\n        class=\"place-self-center text-primary\"\n        name=\"iconoirFramePlusIn\"\n      ></ng-icon>\n    </div>\n    <div\n      *ngIf=\"isUploadInProgress\"\n      class=\"w-14 h-14 grid items-center justify-center relative\"\n    >\n      <div class=\"text-gray-100 absolute\">\n        <mat-progress-spinner\n          class=\"place-self-center\"\n          [diameter]=\"56\"\n          mode=\"determinate\"\n          [value]=\"100\"\n        ></mat-progress-spinner>\n      </div>\n      <div class=\"text-primary absolute\">\n        <mat-progress-spinner\n          class=\"place-self-center\"\n          [diameter]=\"56\"\n          mode=\"determinate\"\n          [value]=\"uploadProgress\"\n        ></mat-progress-spinner>\n      </div>\n      <span class=\"text-sm text-main font-bold\">{{ uploadProgress }}%</span>\n    </div>\n    <div class=\"flex flex-col items-center gap-1\">\n      <p class=\"font-medium\">\n        {{ getPrimaryText() | translate: { sizeMB: maxSizeMB.toFixed(0) } }}\n      </p>\n      <p\n        class=\"text-sm\"\n        [class]=\"\n          isUploadInProgress\n            ? 'font-bold text-primary cursor-pointer'\n            : 'font-medium text-gray-500'\n        \"\n        (click)=\"handleSecondaryTextClick($event)\"\n      >\n        {{ getSecondaryText() | translate }}\n      </p>\n    </div>\n    <p class=\"w-full flex flex-row items-center justify-stretch gap-[16px]\">\n      <span class=\"border-b border-gray-300 grow\"></span>\n      <span class=\"text-sm font-medium text-gray-500 or-input-url\" translate>\n        input.file.orInputUrl</span\n      >\n      <span class=\"border-b border-gray-300 grow\"></span>\n    </p>\n    <gn-ui-url-input\n      class=\"w-full\"\n      [disabled]=\"isUploadInProgress || disabled\"\n      (uploadClick)=\"handleUrlChange($event)\"\n    ></gn-ui-url-input>\n  </label>\n</div>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], 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: FilesDropDirective, selector: "[gnUiFilesDrop]", outputs: ["dragFilesOver", "dropFiles"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "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: FileInputComponent, decorators: [{
             type: Component,
@@ -27899,11 +27957,11 @@ class StarToggleComponent {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StarToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StarToggleComponent, isStandalone: true, selector: "gn-ui-star-toggle", inputs: { toggled: "toggled", disabled: "disabled" }, outputs: { newValue: "newValue" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["starOverlay"], descendants: true }], ngImport: i0, template: "<div class=\"inline-block relative align-middle\" style=\"line-height: 0.7em\">\n  <gn-ui-button\n    [type]=\"'outline'\"\n    [disabled]=\"disabled\"\n    class=\"-m-[8px] p-[8px]\"\n    (buttonClick)=\"toggle($event)\"\n    [ngClass]=\"{\n      enabled: toggled,\n      disabled: !toggled || disabled,\n      'transition hover:scale-125 will-change-transform': !disabled,\n    }\"\n  >\n    <ng-icon [name]=\"toggled ? 'matStar' : 'matStarBorder'\"></ng-icon>\n  </gn-ui-button>\n  <svg\n    #starOverlay\n    class=\"star-toggle-overlay\"\n    width=\"40px\"\n    height=\"40px\"\n    viewBox=\"-15 -15 30 30\"\n  >\n    <g>\n      <path d=\"M 0,13.229167 V 0\" />\n      <path d=\"M -12.484186,4.0880377 0,0\" />\n      <path d=\"M -7.6784102,-10.70262 0,0\" />\n      <path d=\"M 7.8734079,-10.70262 0,0\" />\n      <path d=\"M 12.679184,4.0880376 0,0\" />\n    </g>\n  </svg>\n</div>\n", styles: ["button.enabled{color:var(--star-toggle-enabled-color, var(--color-secondary))}button.disabled{color:var(--star-toggle-disabled-color, var(--color-primary))}.star-filled{font-variation-settings:\"FILL\" 1}.star-toggle-overlay{stroke:var(--color-secondary);stroke-width:3.5px;stroke-linecap:round;position:absolute;top:50%;left:50%;width:2.5em;height:2.5em;transform:translate(-50%,-50%);pointer-events:none;stroke-dasharray:5 20;stroke-dashoffset:-15;animation:overlay-dash .8s cubic-bezier(.16,.66,.44,.96) forwards;animation-play-state:paused}@keyframes overlay-dash{to{stroke-dashoffset:7}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], viewProviders: [provideIcons({ matStar, matStarBorder })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StarToggleComponent, isStandalone: true, selector: "gn-ui-star-toggle", inputs: { toggled: "toggled", disabled: "disabled" }, outputs: { newValue: "newValue" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["starOverlay"], descendants: true }], ngImport: i0, template: "<div class=\"inline-block relative align-middle\">\n  <gn-ui-button\n    [type]=\"'outline'\"\n    [disabled]=\"disabled\"\n    (buttonClick)=\"toggle($event)\"\n    [ngClass]=\"{\n      enabled: toggled,\n      disabled: !toggled || disabled,\n      'transition hover:scale-125 will-change-transform': !disabled,\n    }\"\n  >\n    <ng-icon [name]=\"toggled ? 'matStar' : 'matStarBorder'\"></ng-icon>\n  </gn-ui-button>\n  <svg\n    #starOverlay\n    class=\"star-toggle-overlay\"\n    width=\"40px\"\n    height=\"40px\"\n    viewBox=\"-15 -15 30 30\"\n  >\n    <g>\n      <path d=\"M 0,13.229167 V 0\" />\n      <path d=\"M -12.484186,4.0880377 0,0\" />\n      <path d=\"M -7.6784102,-10.70262 0,0\" />\n      <path d=\"M 7.8734079,-10.70262 0,0\" />\n      <path d=\"M 12.679184,4.0880376 0,0\" />\n    </g>\n  </svg>\n</div>\n", styles: ["button.enabled{color:var(--star-toggle-enabled-color, var(--color-secondary))}button.disabled{color:var(--star-toggle-disabled-color, var(--color-primary))}.star-filled{font-variation-settings:\"FILL\" 1}.star-toggle-overlay{stroke:var(--color-secondary);stroke-width:3.5px;stroke-linecap:round;position:absolute;top:50%;left:50%;width:2.5em;height:2.5em;transform:translate(-50%,-50%);pointer-events:none;stroke-dasharray:5 20;stroke-dashoffset:-15;animation:overlay-dash .8s cubic-bezier(.16,.66,.44,.96) forwards;animation-play-state:paused}@keyframes overlay-dash{to{stroke-dashoffset:7}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], viewProviders: [provideIcons({ matStar, matStarBorder })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StarToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-star-toggle', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, NgIcon, ButtonComponent], viewProviders: [provideIcons({ matStar, matStarBorder })], template: "<div class=\"inline-block relative align-middle\" style=\"line-height: 0.7em\">\n  <gn-ui-button\n    [type]=\"'outline'\"\n    [disabled]=\"disabled\"\n    class=\"-m-[8px] p-[8px]\"\n    (buttonClick)=\"toggle($event)\"\n    [ngClass]=\"{\n      enabled: toggled,\n      disabled: !toggled || disabled,\n      'transition hover:scale-125 will-change-transform': !disabled,\n    }\"\n  >\n    <ng-icon [name]=\"toggled ? 'matStar' : 'matStarBorder'\"></ng-icon>\n  </gn-ui-button>\n  <svg\n    #starOverlay\n    class=\"star-toggle-overlay\"\n    width=\"40px\"\n    height=\"40px\"\n    viewBox=\"-15 -15 30 30\"\n  >\n    <g>\n      <path d=\"M 0,13.229167 V 0\" />\n      <path d=\"M -12.484186,4.0880377 0,0\" />\n      <path d=\"M -7.6784102,-10.70262 0,0\" />\n      <path d=\"M 7.8734079,-10.70262 0,0\" />\n      <path d=\"M 12.679184,4.0880376 0,0\" />\n    </g>\n  </svg>\n</div>\n", styles: ["button.enabled{color:var(--star-toggle-enabled-color, var(--color-secondary))}button.disabled{color:var(--star-toggle-disabled-color, var(--color-primary))}.star-filled{font-variation-settings:\"FILL\" 1}.star-toggle-overlay{stroke:var(--color-secondary);stroke-width:3.5px;stroke-linecap:round;position:absolute;top:50%;left:50%;width:2.5em;height:2.5em;transform:translate(-50%,-50%);pointer-events:none;stroke-dasharray:5 20;stroke-dashoffset:-15;animation:overlay-dash .8s cubic-bezier(.16,.66,.44,.96) forwards;animation-play-state:paused}@keyframes overlay-dash{to{stroke-dashoffset:7}}\n"] }]
+            args: [{ selector: 'gn-ui-star-toggle', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, NgIcon, ButtonComponent], viewProviders: [provideIcons({ matStar, matStarBorder })], template: "<div class=\"inline-block relative align-middle\">\n  <gn-ui-button\n    [type]=\"'outline'\"\n    [disabled]=\"disabled\"\n    (buttonClick)=\"toggle($event)\"\n    [ngClass]=\"{\n      enabled: toggled,\n      disabled: !toggled || disabled,\n      'transition hover:scale-125 will-change-transform': !disabled,\n    }\"\n  >\n    <ng-icon [name]=\"toggled ? 'matStar' : 'matStarBorder'\"></ng-icon>\n  </gn-ui-button>\n  <svg\n    #starOverlay\n    class=\"star-toggle-overlay\"\n    width=\"40px\"\n    height=\"40px\"\n    viewBox=\"-15 -15 30 30\"\n  >\n    <g>\n      <path d=\"M 0,13.229167 V 0\" />\n      <path d=\"M -12.484186,4.0880377 0,0\" />\n      <path d=\"M -7.6784102,-10.70262 0,0\" />\n      <path d=\"M 7.8734079,-10.70262 0,0\" />\n      <path d=\"M 12.679184,4.0880376 0,0\" />\n    </g>\n  </svg>\n</div>\n", styles: ["button.enabled{color:var(--star-toggle-enabled-color, var(--color-secondary))}button.disabled{color:var(--star-toggle-disabled-color, var(--color-primary))}.star-filled{font-variation-settings:\"FILL\" 1}.star-toggle-overlay{stroke:var(--color-secondary);stroke-width:3.5px;stroke-linecap:round;position:absolute;top:50%;left:50%;width:2.5em;height:2.5em;transform:translate(-50%,-50%);pointer-events:none;stroke-dasharray:5 20;stroke-dashoffset:-15;animation:overlay-dash .8s cubic-bezier(.16,.66,.44,.96) forwards;animation-play-state:paused}@keyframes overlay-dash{to{stroke-dashoffset:7}}\n"] }]
         }], propDecorators: { toggled: [{
                 type: Input
             }], disabled: [{
@@ -27927,7 +27985,7 @@ class SwitchToggleComponent {
         this.selectedValue.emit(selectedOption);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwitchToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SwitchToggleComponent, isStandalone: true, selector: "gn-ui-switch-toggle", inputs: { options: "options", ariaLabel: "ariaLabel", extraClasses: "extraClasses", disabled: "disabled" }, outputs: { selectedValue: "selectedValue" }, ngImport: i0, template: "<mat-button-toggle-group\n  #group=\"matButtonToggleGroup\"\n  multiple=\"false\"\n  class=\"flex w-full\"\n  [disabled]=\"disabled\"\n>\n  <mat-button-toggle\n    *ngFor=\"let option of options\"\n    [aria-label]=\"option.label\"\n    [checked]=\"option.checked\"\n    (change)=\"onChange(option)\"\n    [class]=\"extraClasses\"\n    >{{ option.label | translate }}</mat-button-toggle\n  >\n</mat-button-toggle-group>\n", styles: [":host{--mat-standard-button-toggle-height: 32px}.mat-button-toggle-group-appearance-standard{background-color:var(--color-gray-200);padding:4px;display:flex;gap:4px;border-radius:8px}.mat-button-toggle-appearance-standard{color:#000;background-color:var(--color-gray-200);border-radius:4px;border-left:none;font-family:var(--font-family-main)}.mat-button-toggle-appearance-standard.mat-button-toggle-checked{background-color:#000;color:var(--color-background)}button.mat-button-toggle-button.mat-focus-indicator.mat-button-toggle-label-content,.mat-button-toggle-label-content{line-height:32px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$a.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$a.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SwitchToggleComponent, isStandalone: true, selector: "gn-ui-switch-toggle", inputs: { options: "options", ariaLabel: "ariaLabel", extraClasses: "extraClasses", disabled: "disabled" }, outputs: { selectedValue: "selectedValue" }, ngImport: i0, template: "<mat-button-toggle-group\n  #group=\"matButtonToggleGroup\"\n  multiple=\"false\"\n  class=\"flex w-full\"\n  [disabled]=\"disabled\"\n>\n  <mat-button-toggle\n    *ngFor=\"let option of options\"\n    [aria-label]=\"option.label\"\n    [checked]=\"option.checked\"\n    (change)=\"onChange(option)\"\n    [class]=\"extraClasses\"\n    >{{ option.label | translate }}</mat-button-toggle\n  >\n</mat-button-toggle-group>\n", styles: [":host{--mat-standard-button-toggle-height: 32px}.mat-button-toggle-group-appearance-standard{background-color:var(--color-gray-200);padding:4px;display:flex;gap:4px;border-radius:8px}.mat-button-toggle-appearance-standard{color:#000;background-color:var(--color-gray-200);border-radius:4px;border-left:none;font-family:var(--font-family-main)}.mat-button-toggle-appearance-standard.mat-button-toggle-checked{background-color:#000;color:var(--color-background)}button.mat-button-toggle-button.mat-focus-indicator.mat-button-toggle-label-content,.mat-button-toggle-label-content{line-height:32px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$9.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$9.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SwitchToggleComponent, decorators: [{
             type: Component,
@@ -28200,6 +28258,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+class SearchFeatureCatalogComponent {
+    constructor() {
+        this.filteredFeatureCatalogChange = new EventEmitter();
+        this.filterAction = (searchTerm) => {
+            of(searchTerm)
+                .pipe(debounceTime(300), distinctUntilChanged(), tap$1(() => {
+                const filtered = (this.featureCatalog?.featureTypes || []).filter((featureType) => {
+                    const fuzzyFilter = createFuzzyFilter(searchTerm);
+                    return (fuzzyFilter(featureType.name) ||
+                        (featureType.definition && fuzzyFilter(featureType.definition)));
+                });
+                this.filteredFeatureCatalog = {
+                    ...this.featureCatalog,
+                    featureTypes: filtered,
+                };
+                this.filteredFeatureCatalogChange.emit(this.filteredFeatureCatalog);
+            }))
+                .subscribe();
+        };
+    }
+    set featureCatalog(value) {
+        this._featureCatalog = value;
+        this.filteredFeatureCatalog = value;
+    }
+    get featureCatalog() {
+        return this._featureCatalog;
+    }
+    get totalObjects() {
+        return this.filteredFeatureCatalog?.featureTypes?.length || 0;
+    }
+    get totalAttributes() {
+        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>\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 class=\"text-sm px-1 ml-auto hidden sm:inline\">\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: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: [
+            provideIcons({ iconoirSearch }),
+            provideNgIconsConfig({
+                size: '1.5rem',
+            }),
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchFeatureCatalogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-search-feature-catalog', standalone: true, imports: [CommonModule, NgIcon, TranslateModule, FormsModule], viewProviders: [
+                        provideIcons({ iconoirSearch }),
+                        provideNgIconsConfig({
+                            size: '1.5rem',
+                        }),
+                    ], template: "<div\n  class=\"flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300\"\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 class=\"text-sm px-1 ml-auto hidden sm:inline\">\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" }]
+        }], propDecorators: { featureCatalog: [{
+                type: Input
+            }], filteredFeatureCatalogChange: [{
+                type: Output
+            }] } });
+
 class SortableListComponent {
     constructor() {
         this.itemsOrderChange = new EventEmitter();
@@ -28240,13 +28353,13 @@ class ModalDialogComponent {
     onCancel() {
         this.dialogRef.close(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalDialogComponent, deps: [{ token: i1$b.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ModalDialogComponent, isStandalone: true, selector: "gn-ui-modal-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>\n  <ng-container\n    *ngTemplateOutlet=\"data.body; context: { $implicit: data.bodyContext }\"\n  ></ng-container>\n</div>\n<div mat-dialog-actions>\n  <gn-ui-button (buttonClick)=\"onCancel()\">{{ data.cancelText }}</gn-ui-button>\n  <gn-ui-button\n    (buttonClick)=\"onConfirm()\"\n    class=\"ml-2\"\n    data-cy=\"confirm-button\"\n    >{{ data.confirmText }}</gn-ui-button\n  >\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$b.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$b.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$b.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalDialogComponent, deps: [{ token: i1$a.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ModalDialogComponent, isStandalone: true, selector: "gn-ui-modal-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>\n  <ng-container\n    *ngTemplateOutlet=\"data.body; context: { $implicit: data.bodyContext }\"\n  ></ng-container>\n</div>\n<div mat-dialog-actions>\n  <gn-ui-button (buttonClick)=\"onCancel()\">{{ data.cancelText }}</gn-ui-button>\n  <gn-ui-button\n    (buttonClick)=\"onConfirm()\"\n    class=\"ml-2\"\n    data-cy=\"confirm-button\"\n    >{{ data.confirmText }}</gn-ui-button\n  >\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$a.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$a.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$a.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModalDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gn-ui-modal-dialog', standalone: true, imports: [CommonModule, MatDialogModule, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>\n  <ng-container\n    *ngTemplateOutlet=\"data.body; context: { $implicit: data.bodyContext }\"\n  ></ng-container>\n</div>\n<div mat-dialog-actions>\n  <gn-ui-button (buttonClick)=\"onCancel()\">{{ data.cancelText }}</gn-ui-button>\n  <gn-ui-button\n    (buttonClick)=\"onConfirm()\"\n    class=\"ml-2\"\n    data-cy=\"confirm-button\"\n    >{{ data.confirmText }}</gn-ui-button\n  >\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$b.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$a.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
@@ -28374,20 +28487,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }] });
 
 class TruncatedTextComponent {
-    constructor(cd) {
+    constructor(cd, ngZone, viewportRuler) {
         this.cd = cd;
+        this.ngZone = ngZone;
+        this.viewportRuler = viewportRuler;
         this.text = '';
+        this.extraClass = '';
         this.isTextTruncated = false;
         this.isOpen = false;
+        this.overlayPosition = {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'top',
+        };
+        this.resizeObserver = new ResizeObserver(() => {
+            this.ngZone.run(() => this.checkTextTruncation());
+        });
+        this.mutationObserver = new MutationObserver(() => {
+            this.ngZone.run(() => {
+                this.checkTextTruncation();
+                this.close();
+            });
+        });
+        this.viewportSubscription = this.viewportRuler.change().subscribe(() => {
+            if (this.isOpen) {
+                this.updateOverlayPosition();
+            }
+        });
     }
     ngAfterViewInit() {
+        const element = this.textElement.nativeElement;
+        this.resizeObserver?.observe(element);
+        this.mutationObserver?.observe(element.parentElement, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
         this.checkTextTruncation();
     }
-    ngOnChange() {
-        this.checkTextTruncation();
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+        this.viewportSubscription?.unsubscribe();
+        this.close();
     }
     toggleOverlay() {
         this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            this.updateOverlayPosition();
+        }
+    }
+    updateOverlayPosition() {
+        const element = this.textElement.nativeElement;
+        const rect = element.getBoundingClientRect();
+        const viewportWidth = this.viewportRuler.getViewportSize().width;
+        const isMobile = viewportWidth < 640;
+        const overlayWidth = isMobile ? 190 : 320;
+        const isNearLeftEdge = rect.left < overlayWidth;
+        this.overlayPosition = {
+            originX: isNearLeftEdge ? 'start' : 'end',
+            originY: 'top',
+            overlayX: isNearLeftEdge ? 'start' : 'end',
+            overlayY: 'top',
+        };
     }
     close() {
         this.isOpen = false;
@@ -28397,8 +28560,8 @@ class TruncatedTextComponent {
         this.isTextTruncated = element.scrollWidth > element.clientWidth;
         this.cd.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TruncatedTextComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TruncatedTextComponent, isStandalone: true, selector: "gn-ui-truncated-text", inputs: { text: "text" }, providers: [provideIcons({ iconoirExpand, iconoirReduce })], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["textElement"], descendants: true }], ngImport: i0, template: "<div\n  class=\"flex items-center justify-between w-full gap-2\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n>\n  <span #textElement class=\"truncate\">\n    {{ text }}\n  </span>\n  <gn-ui-button\n    *ngIf=\"isTextTruncated\"\n    type=\"outline\"\n    extraClass=\"w-10 h-8 border rounded-lg\"\n    (buttonClick)=\"toggleOverlay()\"\n  >\n    <ng-icon name=\"iconoirExpand\" size=\"24\"> </ng-icon>\n  </gn-ui-button>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen\"\n    [cdkConnectedOverlayPositions]=\"[\n      {\n        originX: 'end',\n        originY: 'top',\n        overlayX: 'end',\n        overlayY: 'top',\n      },\n    ]\"\n    (detach)=\"isOpen = false\"\n  >\n    <div class=\"bg-white shadow-lg border border-gray-300 flex\">\n      <div class=\"w-64\">\n        <p class=\"m-2\">{{ text }}</p>\n      </div>\n      <gn-ui-button\n        class=\"m-2 flex-shrink-0\"\n        type=\"light\"\n        (buttonClick)=\"close()\"\n        extraClass=\"w-10 h-8 px-1 bg-white\"\n      >\n        <ng-icon name=\"iconoirReduce\" size=\"24\"> </ng-icon>\n      </gn-ui-button>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$9.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$9.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TruncatedTextComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$8.ViewportRuler }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TruncatedTextComponent, isStandalone: true, selector: "gn-ui-truncated-text", inputs: { text: "text", extraClass: "extraClass" }, providers: [provideIcons({ iconoirExpand, iconoirReduce })], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["textElement"], descendants: true }], ngImport: i0, template: "<div\n  class=\"flex items-center justify-between w-full gap-2\"\n  cdkOverlayOrigin\n  [class]=\"extraClass\"\n  #trigger=\"cdkOverlayOrigin\"\n>\n  <span #textElement class=\"truncate\">\n    {{ text }}\n  </span>\n  <gn-ui-button\n    *ngIf=\"isTextTruncated\"\n    type=\"outline\"\n    extraClass=\"w-10 h-8 border rounded-lg\"\n    (buttonClick)=\"toggleOverlay()\"\n  >\n    <ng-icon name=\"iconoirExpand\" size=\"24\"> </ng-icon>\n  </gn-ui-button>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen\"\n    [cdkConnectedOverlayPositions]=\"[overlayPosition]\"\n    cdkConnectedOverlayPush\n    [cdkConnectedOverlayWidth]=\"'auto'\"\n    [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n    [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n    (detach)=\"close()\"\n  >\n    <div class=\"bg-white shadow-lg border border-gray-300 flex\">\n      <div class=\"sm:w-64 xs:w-32\">\n        <p class=\"m-2\">{{ text }}</p>\n      </div>\n      <gn-ui-button\n        class=\"m-2 flex-shrink-0\"\n        type=\"light\"\n        (buttonClick)=\"close()\"\n        extraClass=\"w-10 h-8 px-1 bg-white\"\n      >\n        <ng-icon name=\"iconoirReduce\" size=\"24\"> </ng-icon>\n      </gn-ui-button>\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatButtonModule }, { 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: "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TruncatedTextComponent, decorators: [{
             type: Component,
@@ -28409,8 +28572,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         OverlayModule,
                         ButtonComponent,
                         NgIconComponent,
-                    ], providers: [provideIcons({ iconoirExpand, iconoirReduce })], template: "<div\n  class=\"flex items-center justify-between w-full gap-2\"\n  cdkOverlayOrigin\n  #trigger=\"cdkOverlayOrigin\"\n>\n  <span #textElement class=\"truncate\">\n    {{ text }}\n  </span>\n  <gn-ui-button\n    *ngIf=\"isTextTruncated\"\n    type=\"outline\"\n    extraClass=\"w-10 h-8 border rounded-lg\"\n    (buttonClick)=\"toggleOverlay()\"\n  >\n    <ng-icon name=\"iconoirExpand\" size=\"24\"> </ng-icon>\n  </gn-ui-button>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen\"\n    [cdkConnectedOverlayPositions]=\"[\n      {\n        originX: 'end',\n        originY: 'top',\n        overlayX: 'end',\n        overlayY: 'top',\n      },\n    ]\"\n    (detach)=\"isOpen = false\"\n  >\n    <div class=\"bg-white shadow-lg border border-gray-300 flex\">\n      <div class=\"w-64\">\n        <p class=\"m-2\">{{ text }}</p>\n      </div>\n      <gn-ui-button\n        class=\"m-2 flex-shrink-0\"\n        type=\"light\"\n        (buttonClick)=\"close()\"\n        extraClass=\"w-10 h-8 px-1 bg-white\"\n      >\n        <ng-icon name=\"iconoirReduce\" size=\"24\"> </ng-icon>\n      </gn-ui-button>\n    </div>\n  </ng-template>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { text: [{
+                    ], providers: [provideIcons({ iconoirExpand, iconoirReduce })], template: "<div\n  class=\"flex items-center justify-between w-full gap-2\"\n  cdkOverlayOrigin\n  [class]=\"extraClass\"\n  #trigger=\"cdkOverlayOrigin\"\n>\n  <span #textElement class=\"truncate\">\n    {{ text }}\n  </span>\n  <gn-ui-button\n    *ngIf=\"isTextTruncated\"\n    type=\"outline\"\n    extraClass=\"w-10 h-8 border rounded-lg\"\n    (buttonClick)=\"toggleOverlay()\"\n  >\n    <ng-icon name=\"iconoirExpand\" size=\"24\"> </ng-icon>\n  </gn-ui-button>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen\"\n    [cdkConnectedOverlayPositions]=\"[overlayPosition]\"\n    cdkConnectedOverlayPush\n    [cdkConnectedOverlayWidth]=\"'auto'\"\n    [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n    [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n    (detach)=\"close()\"\n  >\n    <div class=\"bg-white shadow-lg border border-gray-300 flex\">\n      <div class=\"sm:w-64 xs:w-32\">\n        <p class=\"m-2\">{{ text }}</p>\n      </div>\n      <gn-ui-button\n        class=\"m-2 flex-shrink-0\"\n        type=\"light\"\n        (buttonClick)=\"close()\"\n        extraClass=\"w-10 h-8 px-1 bg-white\"\n      >\n        <ng-icon name=\"iconoirReduce\" size=\"24\"> </ng-icon>\n      </gn-ui-button>\n    </div>\n  </ng-template>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$8.ViewportRuler }], propDecorators: { text: [{
+                type: Input
+            }], extraClass: [{
                 type: Input
             }], textElement: [{
                 type: ViewChild,
@@ -28888,6 +29053,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'gn-ui-record-preview-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"h-40 bg-white transition duration-200 border border-gray-200 rounded-md hover:bg-gray-50 hover:border-primary hover:text-primary\"\n>\n  <a\n    [href]=\"record.landingPage\"\n    [target]=\"linkTarget\"\n    [title]=\"record.abstract\"\n  >\n    <div class=\"h-full flex flex-row items-center shadow-sm\">\n      <gn-ui-thumbnail\n        class=\"w-40 h-full shrink-0 border-r border-gray-200 bg-gray-100\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n      ></gn-ui-thumbnail>\n\n      <div class=\"grow h-full px-6 py-4 flex flex-col overflow-hidden\">\n        <div class=\"title-font text-lg font-medium mb-2\">\n          <h1 class=\"truncate\">{{ record.title }}</h1>\n        </div>\n        <p class=\"leading-relaxed clamp-3 text-sm text-gray-700\">\n          {{ record.abstract }}\n        </p>\n        <div class=\"grow\"></div>\n        <div class=\"flex flex-row items-center\">\n          <div\n            class=\"text-gray-500 text-xs truncate capitalize border-r mr-4 pr-4\"\n            *ngIf=\"record.kind === 'dataset'\"\n          >\n            <span translate>{{ record.updateFrequency }}</span>\n          </div>\n          <div\n            class=\"text-gray-500 text-xs border-gray-300 truncate viewable-downloadable\"\n            *ngIf=\"isViewable || isDownloadable\"\n          >\n            <span *ngIf=\"isViewable\" translate>record.action.view</span>\n            <span *ngIf=\"isViewable && isDownloadable\">,&nbsp;</span>\n            <span *ngIf=\"isDownloadable\" translate>record.action.download</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </a>\n</div>\n", styles: [".viewable-downloadable :first-child{text-transform:capitalize}\n"] }]
         }] });
 
+class GeoDataBadgeComponent {
+    isGeodata() {
+        const links = 'onlineResources' in this.record ? this.record.onlineResources : [];
+        const hasMapApi = links.some((link) => this.linkClassifier.hasUsage(link, LinkUsage.MAP_API));
+        const hasGeoData = links.some((link) => this.linkClassifier.hasUsage(link, LinkUsage.GEODATA));
+        return hasMapApi || hasGeoData;
+    }
+    get badgeClasses() {
+        const baseClasses = 'flex shrink-0 items-center badge-btn text-xs px-2 h-6 min-h-6';
+        switch (this.styling) {
+            case 'light':
+                return `${baseClasses} bg-primary-white text-primary-darkest`;
+            case 'default':
+                return `${baseClasses} bg-primary-darker text-white`;
+            default:
+                return 'flex shrink-0 items-center';
+        }
+    }
+    constructor(linkClassifier) {
+        this.linkClassifier = linkClassifier;
+        this.showLabel = true;
+        this.styling = 'default';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeoDataBadgeComponent, deps: [{ token: LinkClassifierService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GeoDataBadgeComponent, isStandalone: true, selector: "gn-ui-geo-data-badge", inputs: { showLabel: "showLabel", styling: "styling", record: "record" }, ngImport: i0, template: "<div\n  [class]=\"badgeClasses\"\n  [title]=\"'record.metadata.isGeographical' | translate\"\n  *ngIf=\"isGeodata()\"\n>\n  <ng-icon\n    class=\"shrink-0 text-[0.75em]\"\n    name=\"matLocationSearchingOutline\"\n  ></ng-icon>\n  <span class=\"ml-1 hidden sm:inline-block shrink-0\" *ngIf=\"showLabel\" translate\n    >record.metadata.isGeographical</span\n  >\n</div>\n", styles: [":host{--gn-ui-geo-data-badge-background-color: var(--color-primary-white);--gn-ui-geo-data-badge-text-color: var(--color-primary-darkest)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], viewProviders: [
+            provideIcons({
+                matLocationSearchingOutline,
+            }),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeoDataBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-geo-data-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, NgIcon, TranslateModule], viewProviders: [
+                        provideIcons({
+                            matLocationSearchingOutline,
+                        }),
+                    ], template: "<div\n  [class]=\"badgeClasses\"\n  [title]=\"'record.metadata.isGeographical' | translate\"\n  *ngIf=\"isGeodata()\"\n>\n  <ng-icon\n    class=\"shrink-0 text-[0.75em]\"\n    name=\"matLocationSearchingOutline\"\n  ></ng-icon>\n  <span class=\"ml-1 hidden sm:inline-block shrink-0\" *ngIf=\"showLabel\" translate\n    >record.metadata.isGeographical</span\n  >\n</div>\n", styles: [":host{--gn-ui-geo-data-badge-background-color: var(--color-primary-white);--gn-ui-geo-data-badge-text-color: var(--color-primary-darkest)}\n"] }]
+        }], ctorParameters: () => [{ type: LinkClassifierService }], propDecorators: { showLabel: [{
+                type: Input
+            }], styling: [{
+                type: Input
+            }], record: [{
+                type: Input
+            }] } });
+
+marker('record.kind.dataset');
+marker('record.kind.reuse');
+marker('record.kind.service');
+var KindConfig;
+(function (KindConfig) {
+    KindConfig["all"] = "iconoirAppleWallet";
+    KindConfig["dataset"] = "iconoirAppleShortcuts";
+    KindConfig["service"] = "iconoirCode";
+    KindConfig["reuse"] = "iconoirCreditCard";
+})(KindConfig || (KindConfig = {}));
+class KindBadgeComponent {
+    constructor() {
+        this.styling = 'default';
+        this.hasProjectedContent = false;
+    }
+    get iconKind() {
+        return KindConfig[this.kind] || KindConfig.dataset;
+    }
+    get badgeClasses() {
+        const baseClasses = 'badge-btn text-white text-xs px-2 font-bold shrink-0 flex items-center h-6 min-h-6';
+        switch (this.styling) {
+            case 'outline':
+                return `${baseClasses} bg-transparent border border-white py-1.5`;
+            case 'default':
+                return `${baseClasses} bg-primary py-0.5`;
+            default:
+                return 'flex items-center';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KindBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KindBadgeComponent, isStandalone: true, selector: "gn-ui-kind-badge", inputs: { styling: "styling", contentTemplate: "contentTemplate", kind: "kind" }, ngImport: i0, template: "<div [class]=\"badgeClasses\" *ngIf=\"kind\">\n  <ng-icon [name]=\"iconKind\" class=\"mr-1 text-[0.85em]\"></ng-icon>\n\n  <ng-container *ngIf=\"contentTemplate; else defaultContent\">\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #defaultContent>\n  {{ 'record.kind.' + kind | translate }}\n</ng-template>\n", styles: [":host gn-ui-badge ng-icon{font-size:1.2rem;width:1.2rem;height:1.2rem;transform:translateY(-2px)}\n"], dependencies: [{ kind: "ngmodule", type: NgIconsModule }, { kind: "component", type: i2$2.NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], viewProviders: [
+            provideIcons({
+                iconoirAppleWallet,
+                iconoirAppleShortcuts,
+                iconoirCode,
+                iconoirCreditCard,
+            }),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KindBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-kind-badge', viewProviders: [
+                        provideIcons({
+                            iconoirAppleWallet,
+                            iconoirAppleShortcuts,
+                            iconoirCode,
+                            iconoirCreditCard,
+                        }),
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIconsModule, CommonModule, TranslateModule], template: "<div [class]=\"badgeClasses\" *ngIf=\"kind\">\n  <ng-icon [name]=\"iconKind\" class=\"mr-1 text-[0.85em]\"></ng-icon>\n\n  <ng-container *ngIf=\"contentTemplate; else defaultContent\">\n    <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #defaultContent>\n  {{ 'record.kind.' + kind | translate }}\n</ng-template>\n", styles: [":host gn-ui-badge ng-icon{font-size:1.2rem;width:1.2rem;height:1.2rem;transform:translateY(-2px)}\n"] }]
+        }], propDecorators: { styling: [{
+                type: Input
+            }], contentTemplate: [{
+                type: Input
+            }], kind: [{
+                type: Input
+            }] } });
+
 class MarkdownParserComponent {
     get parsedMarkdown() {
         return marked.parse(this.textContent ?? '');
@@ -28984,7 +29251,7 @@ class MetadataQualityComponent {
                 size: '1.2em',
                 strokeWidth: '1.5px',
             }),
-        ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"metadataQualityDisplay\" class=\"metadata-quality\">\n  <div\n    class=\"flex items-center\"\n    [class]=\"min - w - 0\"\n    [ngClass]=\"{ 'leading-[8px] m-h-[120px]': smaller }\"\n  >\n    <gn-ui-progress-bar\n      tabindex=\"0\"\n      [value]=\"qualityScore\"\n      [type]=\"'light'\"\n      class=\"flex-grow\"\n    ></gn-ui-progress-bar>\n    <gn-ui-popover\n      [content]=\"popoverItems\"\n      theme=\"light-border\"\n      [class]=\"smaller ? 'ml-2' : 'ml-2 mt-1'\"\n    >\n      <ng-icon\n        name=\"matInfoOutline\"\n        class=\"flex-shrink-0 text-gray-600\"\n      ></ng-icon>\n    </gn-ui-popover>\n  </div>\n</div>\n<ng-template #popoverItems>\n  <div class=\"p-2 py-4\">\n    <div class=\"mb-4 font-bold\" translate>record.metadata.quality.details</div>\n    <gn-ui-metadata-quality-item\n      *ngFor=\"let e of items\"\n      [name]=\"e.name\"\n      [value]=\"e.value\"\n    ></gn-ui-metadata-quality-item>\n  </div>\n</ng-template>\n", styles: [":host gn-ui-progress-bar{--progress-bar-font-weight: \"normal\"}\n"], 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: "component", type: PopoverComponent, selector: "gn-ui-popover", inputs: ["content", "theme"] }, { kind: "component", type: ProgressBarComponent, selector: "gn-ui-progress-bar", inputs: ["value", "type"] }, { kind: "component", type: MetadataQualityItemComponent, selector: "gn-ui-metadata-quality-item", inputs: ["name", "value"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"metadataQualityDisplay\" class=\"metadata-quality\">\n  <div\n    class=\"flex items-center\"\n    [class]=\"min - w - 0\"\n    [ngClass]=\"{ 'text-xs leading-[8px] m-h-[120px]': smaller }\"\n  >\n    <gn-ui-progress-bar\n      tabindex=\"0\"\n      [value]=\"qualityScore\"\n      [type]=\"'light'\"\n      class=\"flex-grow\"\n    ></gn-ui-progress-bar>\n    <gn-ui-popover\n      [content]=\"popoverItems\"\n      theme=\"light-border\"\n      [class]=\"smaller ? 'ml-2' : 'ml-2 mt-1'\"\n    >\n      <ng-icon\n        name=\"matInfoOutline\"\n        class=\"flex-shrink-0 text-gray-600\"\n      ></ng-icon>\n    </gn-ui-popover>\n  </div>\n</div>\n<ng-template #popoverItems>\n  <div class=\"p-2 py-4\">\n    <div class=\"mb-4 font-bold\" translate>record.metadata.quality.details</div>\n    <gn-ui-metadata-quality-item\n      *ngFor=\"let e of items\"\n      [name]=\"e.name\"\n      [value]=\"e.value\"\n    ></gn-ui-metadata-quality-item>\n  </div>\n</ng-template>\n", styles: [":host gn-ui-progress-bar{--progress-bar-font-weight: \"normal\"}\n"], 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: "component", type: PopoverComponent, selector: "gn-ui-popover", inputs: ["content", "theme"] }, { kind: "component", type: ProgressBarComponent, selector: "gn-ui-progress-bar", inputs: ["value", "type"] }, { kind: "component", type: MetadataQualityItemComponent, selector: "gn-ui-metadata-quality-item", inputs: ["name", "value"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: NgIcon, 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: MetadataQualityComponent, decorators: [{
             type: Component,
@@ -29003,7 +29270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             size: '1.2em',
                             strokeWidth: '1.5px',
                         }),
-                    ], template: "<div *ngIf=\"metadataQualityDisplay\" class=\"metadata-quality\">\n  <div\n    class=\"flex items-center\"\n    [class]=\"min - w - 0\"\n    [ngClass]=\"{ 'leading-[8px] m-h-[120px]': smaller }\"\n  >\n    <gn-ui-progress-bar\n      tabindex=\"0\"\n      [value]=\"qualityScore\"\n      [type]=\"'light'\"\n      class=\"flex-grow\"\n    ></gn-ui-progress-bar>\n    <gn-ui-popover\n      [content]=\"popoverItems\"\n      theme=\"light-border\"\n      [class]=\"smaller ? 'ml-2' : 'ml-2 mt-1'\"\n    >\n      <ng-icon\n        name=\"matInfoOutline\"\n        class=\"flex-shrink-0 text-gray-600\"\n      ></ng-icon>\n    </gn-ui-popover>\n  </div>\n</div>\n<ng-template #popoverItems>\n  <div class=\"p-2 py-4\">\n    <div class=\"mb-4 font-bold\" translate>record.metadata.quality.details</div>\n    <gn-ui-metadata-quality-item\n      *ngFor=\"let e of items\"\n      [name]=\"e.name\"\n      [value]=\"e.value\"\n    ></gn-ui-metadata-quality-item>\n  </div>\n</ng-template>\n", styles: [":host gn-ui-progress-bar{--progress-bar-font-weight: \"normal\"}\n"] }]
+                    ], template: "<div *ngIf=\"metadataQualityDisplay\" class=\"metadata-quality\">\n  <div\n    class=\"flex items-center\"\n    [class]=\"min - w - 0\"\n    [ngClass]=\"{ 'text-xs leading-[8px] m-h-[120px]': smaller }\"\n  >\n    <gn-ui-progress-bar\n      tabindex=\"0\"\n      [value]=\"qualityScore\"\n      [type]=\"'light'\"\n      class=\"flex-grow\"\n    ></gn-ui-progress-bar>\n    <gn-ui-popover\n      [content]=\"popoverItems\"\n      theme=\"light-border\"\n      [class]=\"smaller ? 'ml-2' : 'ml-2 mt-1'\"\n    >\n      <ng-icon\n        name=\"matInfoOutline\"\n        class=\"flex-shrink-0 text-gray-600\"\n      ></ng-icon>\n    </gn-ui-popover>\n  </div>\n</div>\n<ng-template #popoverItems>\n  <div class=\"p-2 py-4\">\n    <div class=\"mb-4 font-bold\" translate>record.metadata.quality.details</div>\n    <gn-ui-metadata-quality-item\n      *ngFor=\"let e of items\"\n      [name]=\"e.name\"\n      [value]=\"e.value\"\n    ></gn-ui-metadata-quality-item>\n  </div>\n</ng-template>\n", styles: [":host gn-ui-progress-bar{--progress-bar-font-weight: \"normal\"}\n"] }]
         }], propDecorators: { metadata: [{
                 type: Input
             }], smaller: [{
@@ -29012,17 +29279,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+class InternalLinkCardComponent {
+    set size(value) {
+        this._size = value;
+        this.cardClass = this.sizeClassMap[value] || '';
+        this.thumbnailContainerClass = this.thumbnailSizeClassMap[value] || 'hidden';
+    }
+    get size() {
+        return this._size;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.linkTarget = '_blank';
+        this.linkHref = null;
+        this.mdSelect = new EventEmitter();
+        this.subscription = new Subscription();
+        this.cardClass = '';
+        this.thumbnailContainerClass = '';
+        this._size = 'M';
+        this.sizeClassMap = {
+            L: 'min-h-[190px] w-full py-3 px-3 flex items-start gap-5',
+            M: 'min-h-[140px] py-3 px-3 flex items-start gap-4',
+            S: 'min-h-[220px] py-3 px-3 flex gap-4',
+            XS: 'min-h-[108px] py-3 px-3 flex gap-4',
+        };
+        this.thumbnailSizeClassMap = {
+            L: 'w-full md:w-[190px] h-[180px] rounded-lg overflow-hidden shrink-0',
+            M: 'w-[110px] h-[140px] rounded-lg overflow-hidden shrink-0',
+            S: 'hidden',
+            XS: 'hidden',
+        };
+        this.titleClassMap = {
+            L: 'text-xl line-clamp-1',
+            M: 'text-base line-clamp-2',
+            S: 'text-base line-clamp-3 ml-2',
+            XS: 'text-base line-clamp-1 ml-2',
+        };
+    }
+    ngOnInit() {
+        this.abstract = removeWhitespace(stripHtml(this.record?.abstract));
+        this.subscription.add(fromEvent(this.elementRef.nativeElement, 'click').subscribe(() => this.mdSelect.emit(this.record)));
+    }
+    get organization() {
+        return this.record.ownerOrganization;
+    }
+    get contacts() {
+        return ((this.record.kind === 'dataset'
+            ? this.record.contactsForResource
+            : this.record.contacts) || []);
+    }
+    getTitleClass() {
+        return this.titleClassMap[this._size];
+    }
+    openExternalUrl(event, url) {
+        event.stopPropagation();
+        window.open(url, '_blank');
+    }
+    openMailto(event, email) {
+        event.stopPropagation();
+        window.open(`mailto:${email}`, '_blank');
+    }
+    copyToClipboard(event, text) {
+        event.stopPropagation();
+        navigator.clipboard.writeText(text);
+    }
+    get shouldShowThumbnail() {
+        return this.size === 'L' || this.size === 'M';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InternalLinkCardComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InternalLinkCardComponent, isStandalone: true, selector: "gn-ui-internal-link-card", inputs: { record: "record", linkTarget: "linkTarget", linkHref: "linkHref", metadataQualityDisplay: "metadataQualityDisplay", favoriteTemplate: "favoriteTemplate", size: "size" }, outputs: { mdSelect: "mdSelect" }, providers: [
+            provideIcons({
+                iconoirInternet,
+                matLocationSearchingOutline,
+                matEmailOutline,
+                matPhoneOutline,
+                matLocationOnOutline,
+            }),
+            provideNgIconsConfig({
+                size: '1.2em',
+            }),
+        ], ngImport: i0, template: "<a [attr.href]=\"linkHref\" [target]=\"linkTarget\">\n  <div\n    class=\"group rounded-md bg-white hover:cursor-pointer hover:bg-slate-50 overflow-hidden w-full\"\n    [ngClass]=\"cardClass\"\n  >\n    <div\n      class=\"flex flex-row md:gap-0 justify-between w-full\"\n      [ngClass]=\"{ 'flex-wrap md:flex-nowrap gap-3': size === 'L' }\"\n    >\n      <div\n        *ngIf=\"shouldShowThumbnail\"\n        [ngClass]=\"thumbnailContainerClass\"\n        class=\"border mr-4 flex flex-col\"\n      >\n        <gn-ui-thumbnail\n          class=\"w-full h-full object-cover\"\n          [thumbnailUrl]=\"record.overviews?.[0]?.url?.toString() || ''\"\n          [fit]=\"'cover'\"\n        ></gn-ui-thumbnail>\n      </div>\n      <div class=\"grow flex flex-col gap-3\">\n        <div class=\"flex items-center gap-2\">\n          <div class=\"grow flex flex-wrap items-center gap-2\">\n            <gn-ui-kind-badge\n              [styling]=\"'default'\"\n              [kind]=\"record?.kind\"\n            ></gn-ui-kind-badge>\n            <gn-ui-geo-data-badge\n              [showLabel]=\"size === 'L'\"\n              [styling]=\"'light'\"\n              [record]=\"record\"\n            ></gn-ui-geo-data-badge>\n            <gn-ui-metadata-quality\n              class=\"flex items-center\"\n              [smaller]=\"true\"\n              [metadata]=\"record\"\n              [metadataQualityDisplay]=\"metadataQualityDisplay\"\n            ></gn-ui-metadata-quality>\n          </div>\n          <div *ngIf=\"size !== 'XS'\" data-cy=\"recordFav\">\n            <ng-container\n              [ngTemplateOutlet]=\"favoriteTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: record }\"\n            ></ng-container>\n          </div>\n        </div>\n\n        <div class=\"grow flex flex-col gap-2\">\n          <div\n            class=\"font-medium text-title group-hover:text-primary\"\n            [title]=\"record.title\"\n          >\n            <h4\n              class=\"mr-6 overflow-hidden\"\n              [ngClass]=\"getTitleClass()\"\n              data-cy=\"recordTitle\"\n              [title]=\"record.title\"\n            >\n              {{ record.title }}\n            </h4>\n          </div>\n          <div\n            *ngIf=\"size === 'L'\"\n            class=\"mr-6 text-xs text-gray-900 line-clamp-2 overflow-hidden\"\n            data-cy=\"recordAbstract\"\n          >\n            <gn-ui-markdown-parser\n              [textContent]=\"abstract\"\n              [whitoutStyles]=\"true\"\n            ></gn-ui-markdown-parser>\n          </div>\n        </div>\n\n        <div\n          data-cy=\"recordOrg\"\n          *ngIf=\"size !== 'XS' && record.ownerOrganization?.name\"\n          class=\"flex items-center justify-evenly bg-gray-50 rounded-lg h-[53px] px-2\"\n        >\n          <div class=\"flex items-center flex-1 min-w-0\">\n            <div\n              class=\"w-[45px] h-[45px] rounded-lg overflow-hidden shrink-0 mr-3\"\n            >\n              <gn-ui-thumbnail\n                [thumbnailUrl]=\"\n                  record.ownerOrganization?.logoUrl?.toString() || ''\n                \"\n                [fit]=\"'contain'\"\n                class=\"w-full h-full rounded-lg\"\n              ></gn-ui-thumbnail>\n            </div>\n            <div *ngIf=\"organization?.name\" class=\"flex-1 w-0 overflow-hidden\">\n              <div\n                class=\"text-xs text-black font-normal leading-tight truncate\"\n                translate\n              >\n                record.card.metadata.contact\n              </div>\n              <div\n                data-cy=\"recordOrgName\"\n                class=\"text-xl text-primary-black font-medium truncate\"\n              >\n                {{ organization.name }}\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"size === 'L'\" class=\"ml-2 flex space-x-2\">\n            <div *ngIf=\"organization?.website\" class=\"flex\">\n              <button\n                [title]=\"organization.website\"\n                class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest\"\n                (click)=\"openExternalUrl($event, organization.website)\"\n              >\n                <ng-icon name=\"iconoirInternet\"></ng-icon>\n              </button>\n            </div>\n            <div *ngIf=\"contacts[0]?.email\" class=\"flex\">\n              <button\n                [title]=\"contacts[0].email\"\n                class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest\"\n                data-cy=\"contact-email\"\n                (click)=\"openMailto($event, contacts[0].email)\"\n              >\n                <ng-icon name=\"matEmailOutline\"></ng-icon>\n              </button>\n            </div>\n            <div *ngIf=\"contacts[0]?.phone\" class=\"flex\">\n              <button\n                [title]=\"'Copy to clipboard'\"\n                class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest relative group\"\n                data-cy=\"contact-phone\"\n                (click)=\"copyToClipboard($event, contacts[0].phone)\"\n              >\n                <ng-icon name=\"matPhoneOutline\"></ng-icon>\n              </button>\n            </div>\n            <div *ngIf=\"contacts[0]?.address\" class=\"flex\">\n              <button\n                [title]=\"'Copy to clipboard'\"\n                class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest relative group\"\n                data-cy=\"contact-phone\"\n                (click)=\"copyToClipboard($event, contacts[0].address)\"\n              >\n                <ng-icon name=\"matLocationOnOutline\"></ng-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: MetadataQualityComponent, selector: "gn-ui-metadata-quality", inputs: ["metadata", "smaller", "metadataQualityDisplay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: GeoDataBadgeComponent, selector: "gn-ui-geo-data-badge", inputs: ["showLabel", "styling", "record"] }, { kind: "component", type: KindBadgeComponent, selector: "gn-ui-kind-badge", inputs: ["styling", "contentTemplate", "kind"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InternalLinkCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-internal-link-card', standalone: true, imports: [
+                        NgClass,
+                        NgIf,
+                        ThumbnailComponent,
+                        MetadataQualityComponent,
+                        NgTemplateOutlet,
+                        NgIconComponent,
+                        TranslateModule,
+                        GeoDataBadgeComponent,
+                        KindBadgeComponent,
+                        MarkdownParserComponent,
+                    ], providers: [
+                        provideIcons({
+                            iconoirInternet,
+                            matLocationSearchingOutline,
+                            matEmailOutline,
+                            matPhoneOutline,
+                            matLocationOnOutline,
+                        }),
+                        provideNgIconsConfig({
+                            size: '1.2em',
+                        }),
+                    ], template: "<a [attr.href]=\"linkHref\" [target]=\"linkTarget\">\n  <div\n    class=\"group rounded-md bg-white hover:cursor-pointer hover:bg-slate-50 overflow-hidden w-full\"\n    [ngClass]=\"cardClass\"\n  >\n    <div\n      class=\"flex flex-row md:gap-0 justify-between w-full\"\n      [ngClass]=\"{ 'flex-wrap md:flex-nowrap gap-3': size === 'L' }\"\n    >\n      <div\n        *ngIf=\"shouldShowThumbnail\"\n        [ngClass]=\"thumbnailContainerClass\"\n        class=\"border mr-4 flex flex-col\"\n      >\n        <gn-ui-thumbnail\n          class=\"w-full h-full object-cover\"\n          [thumbnailUrl]=\"record.overviews?.[0]?.url?.toString() || ''\"\n          [fit]=\"'cover'\"\n        ></gn-ui-thumbnail>\n      </div>\n      <div class=\"grow flex flex-col gap-3\">\n        <div class=\"flex items-center gap-2\">\n          <div class=\"grow flex flex-wrap items-center gap-2\">\n            <gn-ui-kind-badge\n              [styling]=\"'default'\"\n              [kind]=\"record?.kind\"\n            ></gn-ui-kind-badge>\n            <gn-ui-geo-data-badge\n              [showLabel]=\"size === 'L'\"\n              [styling]=\"'light'\"\n              [record]=\"record\"\n            ></gn-ui-geo-data-badge>\n            <gn-ui-metadata-quality\n              class=\"flex items-center\"\n              [smaller]=\"true\"\n              [metadata]=\"record\"\n              [metadataQualityDisplay]=\"metadataQualityDisplay\"\n            ></gn-ui-metadata-quality>\n          </div>\n          <div *ngIf=\"size !== 'XS'\" data-cy=\"recordFav\">\n            <ng-container\n              [ngTemplateOutlet]=\"favoriteTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: record }\"\n            ></ng-container>\n          </div>\n        </div>\n\n        <div class=\"grow flex flex-col gap-2\">\n          <div\n            class=\"font-medium text-title group-hover:text-primary\"\n            [title]=\"record.title\"\n          >\n            <h4\n              class=\"mr-6 overflow-hidden\"\n              [ngClass]=\"getTitleClass()\"\n              data-cy=\"recordTitle\"\n              [title]=\"record.title\"\n            >\n              {{ record.title }}\n            </h4>\n          </div>\n          <div\n            *ngIf=\"size === 'L'\"\n            class=\"mr-6 text-xs text-gray-900 line-clamp-2 overflow-hidden\"\n            data-cy=\"recordAbstract\"\n          >\n            <gn-ui-markdown-parser\n              [textContent]=\"abstract\"\n              [whitoutStyles]=\"true\"\n            ></gn-ui-markdown-parser>\n          </div>\n        </div>\n\n        <div\n          data-cy=\"recordOrg\"\n          *ngIf=\"size !== 'XS' && record.ownerOrganization?.name\"\n          class=\"flex items-center justify-evenly bg-gray-50 rounded-lg h-[53px] px-2\"\n        >\n          <div class=\"flex items-center flex-1 min-w-0\">\n            <div\n              class=\"w-[45px] h-[45px] rounded-lg overflow-hidden shrink-0 mr-3\"\n            >\n              <gn-ui-thumbnail\n                [thumbnailUrl]=\"\n                  record.ownerOrganization?.logoUrl?.toString() || ''\n                \"\n                [fit]=\"'contain'\"\n                class=\"w-full h-full rounded-lg\"\n              ></gn-ui-thumbnail>\n            </div>\n            <div *ngIf=\"organization?.name\" class=\"flex-1 w-0 overflow-hidden\">\n              <div\n                class=\"text-xs text-black font-normal leading-tight truncate\"\n                translate\n              >\n                record.card.metadata.contact\n              </div>\n              <div\n                data-cy=\"recordOrgName\"\n                class=\"text-xl text-primary-black font-medium truncate\"\n              >\n                {{ organization.name }}\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"size === 'L'\" class=\"ml-2 flex space-x-2\">\n            <div *ngIf=\"organization?.website\" class=\"flex\">\n              <button\n                [title]=\"organization.website\"\n                class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest\"\n                (click)=\"openExternalUrl($event, organization.website)\"\n              >\n                <ng-icon name=\"iconoirInternet\"></ng-icon>\n              </button>\n            </div>\n            <div *ngIf=\"contacts[0]?.email\" class=\"flex\">\n              <button\n                [title]=\"contacts[0].email\"\n                class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest\"\n                data-cy=\"contact-email\"\n                (click)=\"openMailto($event, contacts[0].email)\"\n              >\n                <ng-icon name=\"matEmailOutline\"></ng-icon>\n              </button>\n            </div>\n            <div *ngIf=\"contacts[0]?.phone\" class=\"flex\">\n              <button\n                [title]=\"'Copy to clipboard'\"\n                class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest relative group\"\n                data-cy=\"contact-phone\"\n                (click)=\"copyToClipboard($event, contacts[0].phone)\"\n              >\n                <ng-icon name=\"matPhoneOutline\"></ng-icon>\n              </button>\n            </div>\n            <div *ngIf=\"contacts[0]?.address\" class=\"flex\">\n              <button\n                [title]=\"'Copy to clipboard'\"\n                class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest relative group\"\n                data-cy=\"contact-phone\"\n                (click)=\"copyToClipboard($event, contacts[0].address)\"\n              >\n                <ng-icon name=\"matLocationOnOutline\"></ng-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</a>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { record: [{
+                type: Input
+            }], linkTarget: [{
+                type: Input
+            }], linkHref: [{
+                type: Input
+            }], metadataQualityDisplay: [{
+                type: Input
+            }], favoriteTemplate: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], mdSelect: [{
+                type: Output
+            }] } });
+
 class RecordPreviewRowComponent extends RecordPreviewComponent {
     constructor(elementRef) {
         super(elementRef);
         this.elementRef = elementRef;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RecordPreviewRowComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RecordPreviewRowComponent, selector: "gn-ui-record-preview-row", usesInheritance: true, ngImport: i0, template: "<a\n  class=\"group container-lg mx-auto flex cursor-pointer flex-wrap sm:flex-nowrap\"\n  [title]=\"record.title\"\n  [attr.href]=\"linkHref\"\n>\n  <div class=\"shrink-0 w-full sm:w-52\">\n    <div\n      class=\"overflow-hidden bg-gray-100 rounded-lg w-full border border-gray-300 h-36\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full object-cover object-left-top\"\n        [thumbnailUrl]=\"[\n          record.overviews?.[0]?.url?.toString(),\n          organization?.logoUrl?.toString(),\n        ]\"\n        [fit]=\"['cover', 'contain']\"\n      ></gn-ui-thumbnail>\n    </div>\n  </div>\n  <div\n    class=\"content grid grow relative sm:pl-6 sm:pr-12\"\n    style=\"grid-template-columns: auto 70px\"\n  >\n    <div class=\"mb-3 mt-5 sm:mt-2\">\n      <div\n        class=\"font-title text-21 text-title line-clamp-2 col-start-1 col-span-2 sm:line-clamp-1 group-hover:text-primary transition-colors\"\n        data-cy=\"recordTitle\"\n      >\n        {{ record.title }}\n      </div>\n    </div>\n    <div\n      class=\"abstract mt-4 mb-5 h-36 line-clamp-6 col-start-1 col-span-2 row-start-3 sm:mb-2 sm:h-[4.5rem] sm:line-clamp-3 sm:row-start-2 sm:mt-0\"\n      data-cy=\"recordAbstract\"\n    >\n      <gn-ui-markdown-parser\n        [textContent]=\"abstract\"\n        whitoutStyles=\"true\"\n      ></gn-ui-markdown-parser>\n    </div>\n    <div\n      class=\"text-primary opacity-45 uppercase col-start-1 col-span-2 row-start-2 sm:truncate sm:row-start-3 sm:col-span-1\"\n      data-cy=\"recordOrg\"\n      [class]=\"metadataQualityDisplay ? 'limit-organisation-with-quality' : ''\"\n    >\n      {{ organization?.name }}\n    </div>\n    <div\n      class=\"icons flex flex-row col-start-1 row-start-4 sm:col-start-2 sm:row-start-3 sm:absolute sm:right-[0.4em]\"\n    >\n      <ng-icon\n        *ngIf=\"isDownloadable\"\n        class=\"text-primary opacity-45 mx-1\"\n        name=\"matCloudDownloadOutline\"\n      ></ng-icon>\n      <ng-icon\n        *ngIf=\"isViewable\"\n        class=\"text-primary opacity-45 mx-1\"\n        name=\"matMapOutline\"\n      ></ng-icon>\n    </div>\n    <div\n      *ngIf=\"metadataQualityDisplay\"\n      class=\"col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]\"\n    >\n      <gn-ui-metadata-quality\n        [smaller]=\"true\"\n        [metadata]=\"record\"\n        [metadataQualityDisplay]=\"metadataQualityDisplay\"\n      ></gn-ui-metadata-quality>\n    </div>\n    <div\n      class=\"text-right col-start-3 row-start-4 sm:absolute sm:col-start-2 sm:row-start-1 sm:top-[-1.125em] sm:right-[0.4em]\"\n      data-cy=\"recordFav\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"favoriteTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: record }\"\n      ></ng-container>\n    </div>\n  </div>\n</a>\n", styles: [".limit-organisation-with-quality{max-width:calc(100% - 170px)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: i2$2.NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: MetadataQualityComponent, selector: "gn-ui-metadata-quality", inputs: ["metadata", "smaller", "metadataQualityDisplay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RecordPreviewRowComponent, selector: "gn-ui-record-preview-row", usesInheritance: true, ngImport: i0, template: "<gn-ui-internal-link-card\n  [linkHref]=\"linkHref\"\n  [linkTarget]=\"linkTarget\"\n  [record]=\"record\"\n  [favoriteTemplate]=\"favoriteTemplate\"\n  [metadataQualityDisplay]=\"metadataQualityDisplay\"\n  (mdSelect)=\"mdSelect.emit($event)\"\n  size=\"L\"\n>\n</gn-ui-internal-link-card>\n", styles: [".limit-organisation-with-quality{max-width:calc(100% - 170px)}\n"], dependencies: [{ kind: "component", type: InternalLinkCardComponent, selector: "gn-ui-internal-link-card", inputs: ["record", "linkTarget", "linkHref", "metadataQualityDisplay", "favoriteTemplate", "size"], outputs: ["mdSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RecordPreviewRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-record-preview-row', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  class=\"group container-lg mx-auto flex cursor-pointer flex-wrap sm:flex-nowrap\"\n  [title]=\"record.title\"\n  [attr.href]=\"linkHref\"\n>\n  <div class=\"shrink-0 w-full sm:w-52\">\n    <div\n      class=\"overflow-hidden bg-gray-100 rounded-lg w-full border border-gray-300 h-36\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full object-cover object-left-top\"\n        [thumbnailUrl]=\"[\n          record.overviews?.[0]?.url?.toString(),\n          organization?.logoUrl?.toString(),\n        ]\"\n        [fit]=\"['cover', 'contain']\"\n      ></gn-ui-thumbnail>\n    </div>\n  </div>\n  <div\n    class=\"content grid grow relative sm:pl-6 sm:pr-12\"\n    style=\"grid-template-columns: auto 70px\"\n  >\n    <div class=\"mb-3 mt-5 sm:mt-2\">\n      <div\n        class=\"font-title text-21 text-title line-clamp-2 col-start-1 col-span-2 sm:line-clamp-1 group-hover:text-primary transition-colors\"\n        data-cy=\"recordTitle\"\n      >\n        {{ record.title }}\n      </div>\n    </div>\n    <div\n      class=\"abstract mt-4 mb-5 h-36 line-clamp-6 col-start-1 col-span-2 row-start-3 sm:mb-2 sm:h-[4.5rem] sm:line-clamp-3 sm:row-start-2 sm:mt-0\"\n      data-cy=\"recordAbstract\"\n    >\n      <gn-ui-markdown-parser\n        [textContent]=\"abstract\"\n        whitoutStyles=\"true\"\n      ></gn-ui-markdown-parser>\n    </div>\n    <div\n      class=\"text-primary opacity-45 uppercase col-start-1 col-span-2 row-start-2 sm:truncate sm:row-start-3 sm:col-span-1\"\n      data-cy=\"recordOrg\"\n      [class]=\"metadataQualityDisplay ? 'limit-organisation-with-quality' : ''\"\n    >\n      {{ organization?.name }}\n    </div>\n    <div\n      class=\"icons flex flex-row col-start-1 row-start-4 sm:col-start-2 sm:row-start-3 sm:absolute sm:right-[0.4em]\"\n    >\n      <ng-icon\n        *ngIf=\"isDownloadable\"\n        class=\"text-primary opacity-45 mx-1\"\n        name=\"matCloudDownloadOutline\"\n      ></ng-icon>\n      <ng-icon\n        *ngIf=\"isViewable\"\n        class=\"text-primary opacity-45 mx-1\"\n        name=\"matMapOutline\"\n      ></ng-icon>\n    </div>\n    <div\n      *ngIf=\"metadataQualityDisplay\"\n      class=\"col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]\"\n    >\n      <gn-ui-metadata-quality\n        [smaller]=\"true\"\n        [metadata]=\"record\"\n        [metadataQualityDisplay]=\"metadataQualityDisplay\"\n      ></gn-ui-metadata-quality>\n    </div>\n    <div\n      class=\"text-right col-start-3 row-start-4 sm:absolute sm:col-start-2 sm:row-start-1 sm:top-[-1.125em] sm:right-[0.4em]\"\n      data-cy=\"recordFav\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"favoriteTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: record }\"\n      ></ng-container>\n    </div>\n  </div>\n</a>\n", styles: [".limit-organisation-with-quality{max-width:calc(100% - 170px)}\n"] }]
+            args: [{ selector: 'gn-ui-record-preview-row', changeDetection: ChangeDetectionStrategy.OnPush, template: "<gn-ui-internal-link-card\n  [linkHref]=\"linkHref\"\n  [linkTarget]=\"linkTarget\"\n  [record]=\"record\"\n  [favoriteTemplate]=\"favoriteTemplate\"\n  [metadataQualityDisplay]=\"metadataQualityDisplay\"\n  (mdSelect)=\"mdSelect.emit($event)\"\n  size=\"L\"\n>\n</gn-ui-internal-link-card>\n", styles: [".limit-organisation-with-quality{max-width:calc(100% - 170px)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
 class RecordPreviewTextComponent extends RecordPreviewComponent {
@@ -29056,46 +29445,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-var KindConfig;
-(function (KindConfig) {
-    KindConfig["all"] = "iconoirAppleWallet";
-    KindConfig["dataset"] = "iconoirAppleShortcuts";
-    KindConfig["service"] = "iconoirCode";
-    KindConfig["reuse"] = "iconoirCreditCard";
-})(KindConfig || (KindConfig = {}));
-class KindBadgeComponent {
-    constructor() {
-        this.hasProjectedContent = false;
-    }
-    get iconKind() {
-        return KindConfig[this.kind] || KindConfig.dataset;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KindBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KindBadgeComponent, isStandalone: true, selector: "gn-ui-kind-badge", inputs: { contentTemplate: "contentTemplate", kind: "kind" }, ngImport: i0, template: "<ng-icon [name]=\"iconKind\" class=\"mr-1\"></ng-icon>\n\n<ng-container *ngIf=\"contentTemplate; else defaultContent\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #defaultContent>\n  {{ kind | translate }}\n</ng-template>\n", styles: [":host gn-ui-badge ng-icon{font-size:1.2rem;width:1.2rem;height:1.2rem;transform:translateY(-2px)}\n"], dependencies: [{ kind: "ngmodule", type: NgIconsModule }, { kind: "component", type: i2$2.NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], viewProviders: [
-            provideIcons({
-                iconoirAppleWallet,
-                iconoirAppleShortcuts,
-                iconoirCode,
-                iconoirCreditCard,
-            }),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KindBadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-kind-badge', viewProviders: [
-                        provideIcons({
-                            iconoirAppleWallet,
-                            iconoirAppleShortcuts,
-                            iconoirCode,
-                            iconoirCreditCard,
-                        }),
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIconsModule, CommonModule, BadgeComponent, TranslateModule], template: "<ng-icon [name]=\"iconKind\" class=\"mr-1\"></ng-icon>\n\n<ng-container *ngIf=\"contentTemplate; else defaultContent\">\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #defaultContent>\n  {{ kind | translate }}\n</ng-template>\n", styles: [":host gn-ui-badge ng-icon{font-size:1.2rem;width:1.2rem;height:1.2rem;transform:translateY(-2px)}\n"] }]
-        }], propDecorators: { contentTemplate: [{
-                type: Input
-            }], kind: [{
-                type: Input
-            }] } });
-
 class ResultsHitsSearchKindComponent {
     constructor() {
         this.selected = [];
@@ -29130,11 +29479,11 @@ class ResultsHitsSearchKindComponent {
         return this.selected.length === 0 && choiceValue === 'all';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResultsHitsSearchKindComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResultsHitsSearchKindComponent, selector: "gn-ui-results-hits-search-kind", inputs: { selected: "selected", choices: "choices" }, outputs: { selectionChanged: "selectionChanged" }, usesOnChanges: true, ngImport: i0, template: "<gn-ui-inline-filter\n  [choices]=\"availableChoices\"\n  [selected]=\"selected\"\n  (selectValues)=\"onSelectedValues($event)\"\n>\n  <ng-template let-choice>\n    <gn-ui-kind-badge\n      [kind]=\"choice.value\"\n      [contentTemplate]=\"customTemplate\"\n      class=\"gn-ui-btn-outline rounded-md py-2 px-2 border-gray-400 cursor-pointer focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors bg-transparent hover:text-primary-darker focus:text-primary-darker active:text-primary-black\"\n      [ngClass]=\"{\n        '!bg-primary-lightest hover:bg-primary-lightest':\n          isSelectedChoice(choice.value) || isAllChoice(choice.value),\n      }\"\n    >\n      <ng-template #customTemplate>\n        {{ 'search.filters.recordKind.' + choice.value | translate\n        }}<span class=\"ml-1\" *ngIf=\"isSelectedChoice(choice.value)\"\n          >({{ choice.count }})</span\n        >\n      </ng-template>\n    </gn-ui-kind-badge>\n  </ng-template>\n</gn-ui-inline-filter>\n", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InlineFilterComponent, selector: "gn-ui-inline-filter", inputs: ["choices", "selected"], outputs: ["selectValues"] }, { kind: "component", type: KindBadgeComponent, selector: "gn-ui-kind-badge", inputs: ["contentTemplate", "kind"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResultsHitsSearchKindComponent, selector: "gn-ui-results-hits-search-kind", inputs: { selected: "selected", choices: "choices" }, outputs: { selectionChanged: "selectionChanged" }, usesOnChanges: true, ngImport: i0, template: "<gn-ui-inline-filter\n  [choices]=\"availableChoices\"\n  [selected]=\"selected\"\n  (selectValues)=\"onSelectedValues($event)\"\n>\n  <ng-template let-choice>\n    <gn-ui-kind-badge\n      [styling]=\"'custom'\"\n      [kind]=\"choice.value\"\n      [contentTemplate]=\"customTemplate\"\n      class=\"gn-ui-btn-outline rounded-md py-2 px-2 border-gray-400 cursor-pointer focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors bg-transparent hover:text-primary-darker focus:text-primary-darker active:text-primary-black\"\n      [ngClass]=\"{\n        '!bg-primary-lightest hover:bg-primary-lightest':\n          isSelectedChoice(choice.value) || isAllChoice(choice.value),\n      }\"\n    >\n      <ng-template #customTemplate>\n        {{ 'search.filters.recordKind.' + choice.value | translate\n        }}<span class=\"ml-1\" *ngIf=\"isSelectedChoice(choice.value)\"\n          >({{ choice.count }})</span\n        >\n      </ng-template>\n    </gn-ui-kind-badge>\n  </ng-template>\n</gn-ui-inline-filter>\n", dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InlineFilterComponent, selector: "gn-ui-inline-filter", inputs: ["choices", "selected"], outputs: ["selectValues"] }, { kind: "component", type: KindBadgeComponent, selector: "gn-ui-kind-badge", inputs: ["styling", "contentTemplate", "kind"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResultsHitsSearchKindComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-results-hits-search-kind', template: "<gn-ui-inline-filter\n  [choices]=\"availableChoices\"\n  [selected]=\"selected\"\n  (selectValues)=\"onSelectedValues($event)\"\n>\n  <ng-template let-choice>\n    <gn-ui-kind-badge\n      [kind]=\"choice.value\"\n      [contentTemplate]=\"customTemplate\"\n      class=\"gn-ui-btn-outline rounded-md py-2 px-2 border-gray-400 cursor-pointer focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors bg-transparent hover:text-primary-darker focus:text-primary-darker active:text-primary-black\"\n      [ngClass]=\"{\n        '!bg-primary-lightest hover:bg-primary-lightest':\n          isSelectedChoice(choice.value) || isAllChoice(choice.value),\n      }\"\n    >\n      <ng-template #customTemplate>\n        {{ 'search.filters.recordKind.' + choice.value | translate\n        }}<span class=\"ml-1\" *ngIf=\"isSelectedChoice(choice.value)\"\n          >({{ choice.count }})</span\n        >\n      </ng-template>\n    </gn-ui-kind-badge>\n  </ng-template>\n</gn-ui-inline-filter>\n" }]
+            args: [{ selector: 'gn-ui-results-hits-search-kind', template: "<gn-ui-inline-filter\n  [choices]=\"availableChoices\"\n  [selected]=\"selected\"\n  (selectValues)=\"onSelectedValues($event)\"\n>\n  <ng-template let-choice>\n    <gn-ui-kind-badge\n      [styling]=\"'custom'\"\n      [kind]=\"choice.value\"\n      [contentTemplate]=\"customTemplate\"\n      class=\"gn-ui-btn-outline rounded-md py-2 px-2 border-gray-400 cursor-pointer focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors bg-transparent hover:text-primary-darker focus:text-primary-darker active:text-primary-black\"\n      [ngClass]=\"{\n        '!bg-primary-lightest hover:bg-primary-lightest':\n          isSelectedChoice(choice.value) || isAllChoice(choice.value),\n      }\"\n    >\n      <ng-template #customTemplate>\n        {{ 'search.filters.recordKind.' + choice.value | translate\n        }}<span class=\"ml-1\" *ngIf=\"isSelectedChoice(choice.value)\"\n          >({{ choice.count }})</span\n        >\n      </ng-template>\n    </gn-ui-kind-badge>\n  </ng-template>\n</gn-ui-inline-filter>\n" }]
         }], propDecorators: { selected: [{
                 type: Input
             }], choices: [{
@@ -29184,7 +29533,7 @@ class ResultsLayoutConfigItem {
 const RESULTS_LAYOUT_CONFIG = new InjectionToken('results-layout.config');
 const DEFAULT_RESULTS_LAYOUT_CONFIG = {
     CARD: new ResultsLayoutConfigItem(RecordPreviewCardComponent, '', 'height: 24em;', 'grid md:grid-cols-2 lg:grid-cols-4 gap-4 p-4'),
-    ROW: new ResultsLayoutConfigItem(RecordPreviewRowComponent, 'pt-4 pb-5 sm:py-7', '', 'grid grid-cols-1 divide-y divide-gray-300'),
+    ROW: new ResultsLayoutConfigItem(RecordPreviewRowComponent, 'py-2', '', 'grid grid-cols-1 divide-y divide-gray-100'),
     FEED: new ResultsLayoutConfigItem(RecordPreviewFeedComponent, 'p-0', undefined, 'gap-0 p-0'),
     LIST: new ResultsLayoutConfigItem(RecordPreviewListComponent),
     TEXT: new ResultsLayoutConfigItem(RecordPreviewTextComponent),
@@ -29246,11 +29595,11 @@ class ResultsListComponent {
         this.mdSelect = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResultsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResultsListComponent, selector: "gn-ui-results-list", inputs: { records: "records", layoutConfig: "layoutConfig", favoriteTemplate: "favoriteTemplate", recordUrlGetter: "recordUrlGetter", metadataQualityDisplay: "metadataQualityDisplay" }, outputs: { mdSelect: "mdSelect" }, ngImport: i0, template: "<ng-container>\n  <div [ngClass]=\"layoutConfig.containerClass\">\n    <div\n      [ngClass]=\"layoutConfig.itemClass\"\n      [style]=\"layoutConfig.itemStyle\"\n      *ngFor=\"let record of records\"\n    >\n      <gn-ui-results-list-item\n        [record]=\"record\"\n        [layoutConfig]=\"layoutConfig\"\n        [metadataQualityDisplay]=\"metadataQualityDisplay\"\n        (mdSelect)=\"mdSelect.emit($event)\"\n        [favoriteTemplate]=\"favoriteTemplate\"\n        [linkHref]=\"recordUrlGetter(record)\"\n      ></gn-ui-results-list-item>\n    </div>\n  </div>\n</ng-container>\n\n<!--\n<ng-template #block>\n  <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-4 p-4\">\n    <gn-ui-record-preview-card\n      *ngFor=\"let record of records\"\n      [record]=\"record\"\n      (mdSelect)=\"mdSelect.emit($event)\"\n      linkTarget=\"_blank\"\n      style=\"height: 24em\"\n    ></gn-ui-record-preview-card>\n  </div>\n</ng-template>\n-->\n", styles: [""], dependencies: [{ 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: "component", type: ResultsListItemComponent, selector: "gn-ui-results-list-item", inputs: ["layoutConfig", "record", "favoriteTemplate", "metadataQualityDisplay", "linkHref"], outputs: ["mdSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResultsListComponent, selector: "gn-ui-results-list", inputs: { records: "records", layoutConfig: "layoutConfig", favoriteTemplate: "favoriteTemplate", recordUrlGetter: "recordUrlGetter", metadataQualityDisplay: "metadataQualityDisplay" }, outputs: { mdSelect: "mdSelect" }, ngImport: i0, template: "<ng-container>\n  <div [ngClass]=\"layoutConfig.containerClass\">\n    <div\n      [ngClass]=\"layoutConfig.itemClass\"\n      [style]=\"layoutConfig.itemStyle\"\n      *ngFor=\"let record of records\"\n    >\n      <gn-ui-results-list-item\n        [attr.data-cy]=\"record.uniqueIdentifier\"\n        [record]=\"record\"\n        [layoutConfig]=\"layoutConfig\"\n        [metadataQualityDisplay]=\"metadataQualityDisplay\"\n        (mdSelect)=\"mdSelect.emit($event)\"\n        [favoriteTemplate]=\"favoriteTemplate\"\n        [linkHref]=\"recordUrlGetter(record)\"\n      ></gn-ui-results-list-item>\n    </div>\n  </div>\n</ng-container>\n\n<!--\n<ng-template #block>\n  <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-4 p-4\">\n    <gn-ui-record-preview-card\n      *ngFor=\"let record of records\"\n      [record]=\"record\"\n      (mdSelect)=\"mdSelect.emit($event)\"\n      linkTarget=\"_blank\"\n      style=\"height: 24em\"\n    ></gn-ui-record-preview-card>\n  </div>\n</ng-template>\n-->\n", styles: [""], dependencies: [{ 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: "component", type: ResultsListItemComponent, selector: "gn-ui-results-list-item", inputs: ["layoutConfig", "record", "favoriteTemplate", "metadataQualityDisplay", "linkHref"], outputs: ["mdSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResultsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-results-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div [ngClass]=\"layoutConfig.containerClass\">\n    <div\n      [ngClass]=\"layoutConfig.itemClass\"\n      [style]=\"layoutConfig.itemStyle\"\n      *ngFor=\"let record of records\"\n    >\n      <gn-ui-results-list-item\n        [record]=\"record\"\n        [layoutConfig]=\"layoutConfig\"\n        [metadataQualityDisplay]=\"metadataQualityDisplay\"\n        (mdSelect)=\"mdSelect.emit($event)\"\n        [favoriteTemplate]=\"favoriteTemplate\"\n        [linkHref]=\"recordUrlGetter(record)\"\n      ></gn-ui-results-list-item>\n    </div>\n  </div>\n</ng-container>\n\n<!--\n<ng-template #block>\n  <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-4 p-4\">\n    <gn-ui-record-preview-card\n      *ngFor=\"let record of records\"\n      [record]=\"record\"\n      (mdSelect)=\"mdSelect.emit($event)\"\n      linkTarget=\"_blank\"\n      style=\"height: 24em\"\n    ></gn-ui-record-preview-card>\n  </div>\n</ng-template>\n-->\n" }]
+            args: [{ selector: 'gn-ui-results-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div [ngClass]=\"layoutConfig.containerClass\">\n    <div\n      [ngClass]=\"layoutConfig.itemClass\"\n      [style]=\"layoutConfig.itemStyle\"\n      *ngFor=\"let record of records\"\n    >\n      <gn-ui-results-list-item\n        [attr.data-cy]=\"record.uniqueIdentifier\"\n        [record]=\"record\"\n        [layoutConfig]=\"layoutConfig\"\n        [metadataQualityDisplay]=\"metadataQualityDisplay\"\n        (mdSelect)=\"mdSelect.emit($event)\"\n        [favoriteTemplate]=\"favoriteTemplate\"\n        [linkHref]=\"recordUrlGetter(record)\"\n      ></gn-ui-results-list-item>\n    </div>\n  </div>\n</ng-container>\n\n<!--\n<ng-template #block>\n  <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-4 p-4\">\n    <gn-ui-record-preview-card\n      *ngFor=\"let record of records\"\n      [record]=\"record\"\n      (mdSelect)=\"mdSelect.emit($event)\"\n      linkTarget=\"_blank\"\n      style=\"height: 24em\"\n    ></gn-ui-record-preview-card>\n  </div>\n</ng-template>\n-->\n" }]
         }], propDecorators: { records: [{
                 type: Input
             }], layoutConfig: [{
@@ -29306,7 +29655,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        >{{ link.accessServiceProtocol }}</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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$4.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        >{{ link.accessServiceProtocol }}</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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.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,
             }),
@@ -29362,13 +29711,13 @@ class ConfirmationDialogComponent {
     onCancel() {
         this.dialogRef.close(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$b.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmationDialogComponent, isStandalone: true, selector: "gn-ui-confirmation-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>{{ data.message }}</div>\n<div mat-dialog-actions>\n  <gn-ui-button (buttonClick)=\"onCancel()\">{{ data.cancelText }}</gn-ui-button>\n  <gn-ui-button\n    (buttonClick)=\"onConfirm()\"\n    cdkFocusInitial\n    class=\"ml-2\"\n    data-cy=\"confirm-button\"\n    >{{ data.confirmText }}</gn-ui-button\n  >\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$b.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$b.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$b.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$a.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmationDialogComponent, isStandalone: true, selector: "gn-ui-confirmation-dialog", ngImport: i0, template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>{{ data.message }}</div>\n<div mat-dialog-actions>\n  <gn-ui-button (buttonClick)=\"onCancel()\">{{ data.cancelText }}</gn-ui-button>\n  <gn-ui-button\n    (buttonClick)=\"onConfirm()\"\n    cdkFocusInitial\n    class=\"ml-2\"\n    data-cy=\"confirm-button\"\n    >{{ data.confirmText }}</gn-ui-button\n  >\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$a.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$a.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$a.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gn-ui-confirmation-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatDialogModule, ButtonComponent], template: "<h1 mat-dialog-title>{{ data.title }}</h1>\n<div mat-dialog-content>{{ data.message }}</div>\n<div mat-dialog-actions>\n  <gn-ui-button (buttonClick)=\"onCancel()\">{{ data.cancelText }}</gn-ui-button>\n  <gn-ui-button\n    (buttonClick)=\"onConfirm()\"\n    cdkFocusInitial\n    class=\"ml-2\"\n    data-cy=\"confirm-button\"\n    >{{ data.confirmText }}</gn-ui-button\n  >\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$b.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$a.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
@@ -29774,7 +30123,7 @@ class ImageInputComponent {
             provideNgIconsConfig({
                 size: '1.5rem',
             }),
-        ], ngImport: i0, template: "<ng-container *ngIf=\"previewUrl; then withImage; else withoutImage\">\n</ng-container>\n\n<ng-template #withImage>\n  <div class=\"w-80 h-full flex flex-col gap-2\">\n    <gn-ui-image-overlay-preview class=\"h-48\" [imageUrl]=\"previewUrl\">\n    </gn-ui-image-overlay-preview>\n    <gn-ui-text-input\n      *ngIf=\"showAltTextInput\"\n      [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n      [value]=\"altText ?? ''\"\n      (valueChange)=\"handleAltTextChange($event)\"\n      extraClass=\"gn-ui-editor-textarea\"\n    ></gn-ui-text-input>\n    <div class=\"flex flex-row gap-2 mt-2\">\n      <gn-ui-button\n        type=\"gray\"\n        (buttonClick)=\"handleDelete()\"\n        data-cy=\"delete-image\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirBin\"></ng-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      <gn-ui-button\n        *ngIf=\"!showAltTextInput\"\n        type=\"gray\"\n        (buttonClick)=\"toggleAltTextInput()\"\n      >\n        <ng-icon name=\"iconoirPlus\" class=\"me-1 text-primary\"></ng-icon>\n        {{ 'input.image.displayAltTextInput' | translate }}\n      </gn-ui-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #withoutImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100\"\n      [ngClass]=\"{\n        'border-primary-lighter bg-primary-white': dragFilesOver,\n        'border-gray-300': !dragFilesOver,\n        'cursor-pointer hover:border-gray-500': !getIsActionBlocked(),\n        'cursor-not-allowed': disabled,\n      }\"\n      [attr.tabindex]=\"getIsActionBlocked() ? null : 0\"\n      (keydown.enter)=\"fileInput.click()\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      <div\n        class=\"w-14 h-14 rounded-md bg-gray-50 grid\"\n        *ngIf=\"!isUploadInProgress && !imageFileError\"\n      >\n        <ng-icon\n          *ngIf=\"!dragFilesOver\"\n          class=\"place-self-center text-primary\"\n          name=\"iconoirMediaImage\"\n        ></ng-icon>\n        <ng-icon\n          *ngIf=\"dragFilesOver\"\n          class=\"place-self-center text-primary\"\n          name=\"iconoirFramePlusIn\"\n        ></ng-icon>\n      </div>\n\n      <div\n        *ngIf=\"isUploadInProgress && !imageFileError\"\n        class=\"w-14 h-14 grid items-center justify-center relative\"\n      >\n        <div class=\"text-gray-100 absolute\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            mode=\"determinate\"\n            [value]=\"100\"\n          ></mat-progress-spinner>\n        </div>\n        <div class=\"text-primary absolute\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            mode=\"determinate\"\n            [value]=\"uploadProgress\"\n          ></mat-progress-spinner>\n        </div>\n        <span class=\"text-sm text-main font-bold\">{{ uploadProgress }}%</span>\n      </div>\n\n      <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\" *ngIf=\"imageFileError\">\n        <ng-icon\n          name=\"iconoirMediaImageXmark\"\n          class=\"place-self-center text-rose-500\"\n          data-cy=\"imgErrorIcon\"\n        ></ng-icon>\n      </div>\n\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\" data-cy=\"imgInputMsgPrimary\">\n          {{ getPrimaryText() | translate }}\n        </p>\n        <p\n          class=\"text-sm\"\n          data-cy=\"imgInputMsgSecondary\"\n          [class]=\"\n            isUploadInProgress\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick($event)\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        #fileInput\n        accept=\"image/*\"\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      />\n    </label>\n\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none mt-2\">\n      <gn-ui-button\n        data-cy=\"imgUrlBtn\"\n        (buttonClick)=\"displayUrlInput()\"\n        type=\"gray\"\n        [disabled]=\"disabled\"\n        [extraClass]=\"disabled && 'cursor-not-allowed'\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirLink\"></ng-icon>\n        {{ 'input.image.displayUrlInput' | translate }}\n      </gn-ui-button>\n    </div>\n\n    <gn-ui-url-input\n      *ngIf=\"showUrlInput\"\n      class=\"mt-3.5\"\n      data-cy=\"imgUrlInput\"\n      (uploadClick)=\"downloadUrl($event)\"\n      [disabled]=\"isUploadInProgress || disabled\"\n    >\n    </gn-ui-url-input>\n  </div>\n</ng-template>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], 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: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "directive", type: FilesDropDirective, selector: "[gnUiFilesDrop]", outputs: ["dragFilesOver", "dropFiles"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ImageOverlayPreviewComponent, selector: "gn-ui-image-overlay-preview", inputs: ["imageUrl"], outputs: ["isPlaceholderShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<ng-container *ngIf=\"previewUrl; then withImage; else withoutImage\">\n</ng-container>\n\n<ng-template #withImage>\n  <div class=\"w-80 h-full flex flex-col gap-2\">\n    <gn-ui-image-overlay-preview class=\"h-48\" [imageUrl]=\"previewUrl\">\n    </gn-ui-image-overlay-preview>\n    <gn-ui-text-input\n      *ngIf=\"showAltTextInput\"\n      [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n      [value]=\"altText ?? ''\"\n      (valueChange)=\"handleAltTextChange($event)\"\n      extraClass=\"gn-ui-editor-textarea\"\n    ></gn-ui-text-input>\n    <div class=\"flex flex-row gap-2 mt-2\">\n      <gn-ui-button\n        type=\"gray\"\n        (buttonClick)=\"handleDelete()\"\n        data-cy=\"delete-image\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirBin\"></ng-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      <gn-ui-button\n        *ngIf=\"!showAltTextInput\"\n        type=\"gray\"\n        (buttonClick)=\"toggleAltTextInput()\"\n      >\n        <ng-icon name=\"iconoirPlus\" class=\"me-1 text-primary\"></ng-icon>\n        {{ 'input.image.displayAltTextInput' | translate }}\n      </gn-ui-button>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #withoutImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <label\n      gnUiFilesDrop\n      class=\"flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100\"\n      [ngClass]=\"{\n        'border-primary-lighter bg-primary-white': dragFilesOver,\n        'border-gray-300': !dragFilesOver,\n        'cursor-pointer hover:border-gray-500': !getIsActionBlocked(),\n        'cursor-not-allowed': disabled,\n      }\"\n      [attr.tabindex]=\"getIsActionBlocked() ? null : 0\"\n      (keydown.enter)=\"fileInput.click()\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      <div\n        class=\"w-14 h-14 rounded-md bg-gray-50 grid\"\n        *ngIf=\"!isUploadInProgress && !imageFileError\"\n      >\n        <ng-icon\n          *ngIf=\"!dragFilesOver\"\n          class=\"place-self-center text-primary\"\n          name=\"iconoirMediaImage\"\n        ></ng-icon>\n        <ng-icon\n          *ngIf=\"dragFilesOver\"\n          class=\"place-self-center text-primary\"\n          name=\"iconoirFramePlusIn\"\n        ></ng-icon>\n      </div>\n\n      <div\n        *ngIf=\"isUploadInProgress && !imageFileError\"\n        class=\"w-14 h-14 grid items-center justify-center relative\"\n      >\n        <div class=\"text-gray-100 absolute\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            mode=\"determinate\"\n            [value]=\"100\"\n          ></mat-progress-spinner>\n        </div>\n        <div class=\"text-primary absolute\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            mode=\"determinate\"\n            [value]=\"uploadProgress\"\n          ></mat-progress-spinner>\n        </div>\n        <span class=\"text-sm text-main font-bold\">{{ uploadProgress }}%</span>\n      </div>\n\n      <div class=\"w-14 h-14 rounded-md bg-gray-50 grid\" *ngIf=\"imageFileError\">\n        <ng-icon\n          name=\"iconoirMediaImageXmark\"\n          class=\"place-self-center text-rose-500\"\n          data-cy=\"imgErrorIcon\"\n        ></ng-icon>\n      </div>\n\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\" data-cy=\"imgInputMsgPrimary\">\n          {{ getPrimaryText() | translate }}\n        </p>\n        <p\n          class=\"text-sm\"\n          data-cy=\"imgInputMsgSecondary\"\n          [class]=\"\n            isUploadInProgress\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick($event)\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        #fileInput\n        accept=\"image/*\"\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"isUploadInProgress || disabled\"\n      />\n    </label>\n\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none mt-2\">\n      <gn-ui-button\n        data-cy=\"imgUrlBtn\"\n        (buttonClick)=\"displayUrlInput()\"\n        type=\"gray\"\n        [disabled]=\"disabled\"\n        [extraClass]=\"disabled && 'cursor-not-allowed'\"\n      >\n        <ng-icon class=\"me-1 text-primary\" name=\"iconoirLink\"></ng-icon>\n        {{ 'input.image.displayUrlInput' | translate }}\n      </gn-ui-button>\n    </div>\n\n    <gn-ui-url-input\n      *ngIf=\"showUrlInput\"\n      class=\"mt-3.5\"\n      data-cy=\"imgUrlInput\"\n      (uploadClick)=\"downloadUrl($event)\"\n      [disabled]=\"isUploadInProgress || disabled\"\n    >\n    </gn-ui-url-input>\n  </div>\n</ng-template>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], 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: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "directive", type: FilesDropDirective, selector: "[gnUiFilesDrop]", outputs: ["dragFilesOver", "dropFiles"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ImageOverlayPreviewComponent, selector: "gn-ui-image-overlay-preview", inputs: ["imageUrl"], outputs: ["isPlaceholderShown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageInputComponent, decorators: [{
             type: Component,
@@ -29946,7 +30295,7 @@ class MetadataContactComponent {
         this.organizationClick.emit(this.shownOrganization);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MetadataContactComponent, isStandalone: true, selector: "gn-ui-metadata-contact", inputs: { metadata: "metadata" }, outputs: { organizationClick: "organizationClick", contactClick: "contactClick" }, ngImport: i0, template: "<div class=\"py-5 px-5 rounded-lg bg-gray-100 text-black\">\n  <div class=\"grid grid-cols-1 gap-3 overflow-hidden\">\n    <div>\n      <p class=\"text-base font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid grid-cols-1 gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name\"\n        >\n          {{ shownOrganization?.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <ng-icon\n            class=\"!w-[12px] !h-[12px] opacity-75 shrink-0\"\n            name=\"matOpenInNew\"\n          ></ng-icon>\n        </a>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-1 gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matCallOutline\"\n          ></ng-icon>\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex gap-2\">\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=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"break-all text-sm hover:underline\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matPersonOutline\"\n          ></ng-icon>\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matLocationOnOutline\"\n          ></ng-icon>\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "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: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MetadataContactComponent, isStandalone: true, selector: "gn-ui-metadata-contact", inputs: { metadata: "metadata" }, outputs: { organizationClick: "organizationClick", contactClick: "contactClick" }, ngImport: i0, template: "<div\n  class=\"py-5 px-5 rounded bg-gray-100 text-black\"\n  data-cy=\"metadata-organization\"\n>\n  <div class=\"grid gap-3 overflow-hidden\">\n    <div>\n      <p class=\"text-base font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid grid-cols-1 gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name-link\"\n        >\n          {{ shownOrganization?.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <ng-icon\n            class=\"!w-[12px] !h-[12px] opacity-75 shrink-0\"\n            name=\"matOpenInNew\"\n          ></ng-icon>\n        </a>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-1 gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matCallOutline\"\n          ></ng-icon>\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex gap-2\">\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=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"break-all text-sm hover:underline\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matPersonOutline\"\n          ></ng-icon>\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matLocationOnOutline\"\n          ></ng-icon>\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "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: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], viewProviders: [
             provideIcons({
                 matOpenInNew,
                 matCallOutline,
@@ -29966,7 +30315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             matPersonOutline,
                             matLocationOnOutline,
                         }),
-                    ], template: "<div class=\"py-5 px-5 rounded-lg bg-gray-100 text-black\">\n  <div class=\"grid grid-cols-1 gap-3 overflow-hidden\">\n    <div>\n      <p class=\"text-base font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid grid-cols-1 gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name\"\n        >\n          {{ shownOrganization?.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <ng-icon\n            class=\"!w-[12px] !h-[12px] opacity-75 shrink-0\"\n            name=\"matOpenInNew\"\n          ></ng-icon>\n        </a>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-1 gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matCallOutline\"\n          ></ng-icon>\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex gap-2\">\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=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"break-all text-sm hover:underline\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matPersonOutline\"\n          ></ng-icon>\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matLocationOnOutline\"\n          ></ng-icon>\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+                    ], template: "<div\n  class=\"py-5 px-5 rounded bg-gray-100 text-black\"\n  data-cy=\"metadata-organization\"\n>\n  <div class=\"grid gap-3 overflow-hidden\">\n    <div>\n      <p class=\"text-base font-medium\" translate>record.metadata.contact</p>\n    </div>\n    <div\n      *ngIf=\"shownOrganization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"shownOrganization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"grid grid-cols-1 gap-1\">\n      <div class=\"flex\">\n        <div\n          class=\"font-title text-21 mr-2 cursor-pointer hover:underline\"\n          (click)=\"onOrganizationClick()\"\n          data-cy=\"organization-name-link\"\n        >\n          {{ shownOrganization?.name }}\n        </div>\n      </div>\n      <div *ngIf=\"shownOrganization?.website\">\n        <a\n          [href]=\"shownOrganization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-sm cursor-pointer hover:underline transition-all\"\n          >{{ shownOrganization.website }}\n          <ng-icon\n            class=\"!w-[12px] !h-[12px] opacity-75 shrink-0\"\n            name=\"matOpenInNew\"\n          ></ng-icon>\n        </a>\n      </div>\n    </div>\n    <div class=\"grid grid-cols-1 gap-5 py-3 overflow-hidden\">\n      <div *ngIf=\"contacts[0]?.phone\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matCallOutline\"\n          ></ng-icon>\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">{{ contacts[0].phone }}</p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.email\">\n        <div class=\"flex gap-2\">\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=\"contacts.length\"\n            [href]=\"'mailto:' + contacts[0].email\"\n            class=\"break-all text-sm hover:underline\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ contacts[0].email }}</a\n          >\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.firstName || contacts[0]?.lastName\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matPersonOutline\"\n          ></ng-icon>\n          <div class=\"flex flex-col ml-2\">\n            <p class=\"text-sm\">\n              {{ contacts[0]?.firstName || '' }}\n              {{ contacts[0]?.lastName || '' }}\n            </p>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"contacts[0]?.address\">\n        <div class=\"flex\">\n          <ng-icon\n            class=\"!w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n            name=\"matLocationOnOutline\"\n          ></ng-icon>\n          <div class=\"flex flex-col ml-2\">\n            <p *ngFor=\"let addressPart of address\" class=\"text-sm\">\n              {{ addressPart }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { metadata: [{
                 type: Input
             }], organizationClick: [{
@@ -30210,19 +30559,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 const geometryKeys = ['geometry', 'the_geom'];
 class FeatureDetailComponent {
+    constructor() {
+        this._featureAttributes = [];
+    }
+    set featureCatalog(value) {
+        if (value)
+            this._featureAttributes = value.featureTypes[0].attributes;
+    }
     get properties() {
         if (!this.feature)
             return [];
-        return Object.keys(this.feature.properties).filter((prop) => !geometryKeys.includes(prop));
+        return this.setProperties();
+    }
+    setProperties() {
+        const properties = Object.keys(this.feature.properties)
+            .filter((p) => !geometryKeys.includes(p))
+            .reduce((acc, p) => {
+            let key = p;
+            if (this._featureAttributes.length) {
+                const matchingAttribute = this._featureAttributes.find((attr) => attr.name === p);
+                if (matchingAttribute && matchingAttribute.code) {
+                    key = matchingAttribute.code;
+                }
+            }
+            acc[key] = this.feature.properties[p];
+            return acc;
+        }, {});
+        return properties;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeatureDetailComponent, isStandalone: true, selector: "gn-ui-feature-detail", inputs: { feature: "feature" }, ngImport: i0, template: "<div *ngIf=\"feature\" class=\"root\">\n  <div class=\"property\" *ngFor=\"let propName of properties\">\n    <div>{{ propName }}</div>\n    <div class=\"font-bold\">{{ feature.properties[propName] }}</div>\n  </div>\n</div>\n", styles: [".property{border-bottom:1px solid #f2f2f2;padding-bottom:.625rem;margin-bottom:.625rem;font-size:.75rem}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeatureDetailComponent, isStandalone: true, selector: "gn-ui-feature-detail", inputs: { feature: "feature", featureCatalog: "featureCatalog" }, ngImport: i0, template: "<div *ngIf=\"feature\" class=\"root\">\n  <div class=\"property\" *ngFor=\"let prop of properties | keyvalue\">\n    <div>{{ prop.key }}</div>\n    <div class=\"font-bold\">{{ prop.value }}</div>\n  </div>\n</div>\n", styles: [".property{border-bottom:1px solid #f2f2f2;padding-bottom:.625rem;margin-bottom:.625rem;font-size:.75rem}\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: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-feature-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div *ngIf=\"feature\" class=\"root\">\n  <div class=\"property\" *ngFor=\"let propName of properties\">\n    <div>{{ propName }}</div>\n    <div class=\"font-bold\">{{ feature.properties[propName] }}</div>\n  </div>\n</div>\n", styles: [".property{border-bottom:1px solid #f2f2f2;padding-bottom:.625rem;margin-bottom:.625rem;font-size:.75rem}\n"] }]
+            args: [{ selector: 'gn-ui-feature-detail', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div *ngIf=\"feature\" class=\"root\">\n  <div class=\"property\" *ngFor=\"let prop of properties | keyvalue\">\n    <div>{{ prop.key }}</div>\n    <div class=\"font-bold\">{{ prop.value }}</div>\n  </div>\n</div>\n", styles: [".property{border-bottom:1px solid #f2f2f2;padding-bottom:.625rem;margin-bottom:.625rem;font-size:.75rem}\n"] }]
         }], propDecorators: { feature: [{
                 type: Input
+            }], featureCatalog: [{
+                type: Input
             }] } });
 
 class MapLegendComponent {
@@ -30326,6 +30700,7 @@ class SpatialExtentComponent {
                 style: {
                     'stroke-color': 'black',
                     'stroke-width': 2,
+                    'fill-color': 'rgba(153, 153, 153, 0.3)',
                 },
             };
             const view = await createViewFromLayer(layer);
@@ -30435,7 +30810,7 @@ class MetadataInfoComponent {
         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    <div *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    </div>\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>\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>\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=\"metadata.kind !== 'dataset' && metadata.spatialExtents\"\n  [title]=\"'service.metadata.spatialExtent' | translate\"\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>\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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "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 [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    <div *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    </div>\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=\"metadata.kind !== 'dataset' && metadata.spatialExtents\"\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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "iconColor", "collapsed"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: MaxLinesComponent, selector: "gn-ui-max-lines", inputs: ["maxLines"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "component", type: SpatialExtentComponent, selector: "gn-ui-spatial-extent", inputs: ["spatialExtents"] }], viewProviders: [
             provideIcons({
                 matOpenInNew,
                 matMailOutline: matMailOutline$1,
@@ -30463,7 +30838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             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    <div *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    </div>\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>\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>\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=\"metadata.kind !== 'dataset' && metadata.spatialExtents\"\n  [title]=\"'service.metadata.spatialExtent' | translate\"\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>\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 [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    <div *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    </div>\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=\"metadata.kind !== 'dataset' && metadata.spatialExtents\"\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"] }]
         }], ctorParameters: () => [{ type: DateService }], propDecorators: { metadata: [{
                 type: Input
             }], incomplete: [{
@@ -30661,6 +31036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class RelatedRecordCardComponent {
     constructor() {
+        this.linkHref = null;
         this.extraClass = '';
         this.baseClasses = [
             'w-72',
@@ -30678,21 +31054,30 @@ class RelatedRecordCardComponent {
         return `${this.baseClasses} ${this.extraClass}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RelatedRecordCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RelatedRecordCardComponent, isStandalone: true, selector: "gn-ui-related-record-card", inputs: { record: "record", extraClass: "extraClass" }, ngImport: i0, template: "<a\n  [class]=\"classList\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <ng-icon\n          class=\"align-middle text-secondary\"\n          name=\"matOpenInNew\"\n        ></ng-icon>\n      </button>\n    </div>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$4.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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], viewProviders: [provideIcons({ matOpenInNew })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RelatedRecordCardComponent, isStandalone: true, selector: "gn-ui-related-record-card", inputs: { linkHref: "linkHref", record: "record", extraClass: "extraClass", favoriteTemplate: "favoriteTemplate", metadataQualityDisplay: "metadataQualityDisplay", size: "size" }, ngImport: i0, template: "<gn-ui-internal-link-card\n  [linkHref]=\"linkHref\"\n  [linkTarget]=\"'_blank'\"\n  [record]=\"record\"\n  [favoriteTemplate]=\"favoriteTemplate\"\n  [metadataQualityDisplay]=\"metadataQualityDisplay\"\n  [size]=\"size\"\n>\n</gn-ui-internal-link-card>\n", styles: [""], dependencies: [{ kind: "component", type: InternalLinkCardComponent, selector: "gn-ui-internal-link-card", inputs: ["record", "linkTarget", "linkHref", "metadataQualityDisplay", "favoriteTemplate", "size"], outputs: ["mdSelect"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: TranslateModule }], viewProviders: [provideIcons({ matOpenInNew })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RelatedRecordCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gn-ui-related-record-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        InternalLinkCardComponent,
                         ThumbnailComponent,
                         RouterLink,
                         MatTooltipModule,
                         NgIcon,
                         TranslateModule,
-                    ], standalone: true, viewProviders: [provideIcons({ matOpenInNew })], template: "<a\n  [class]=\"classList\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <ng-icon\n          class=\"align-middle text-secondary\"\n          name=\"matOpenInNew\"\n        ></ng-icon>\n      </button>\n    </div>\n  </div>\n</a>\n" }]
-        }], ctorParameters: () => [], propDecorators: { record: [{
+                    ], standalone: true, viewProviders: [provideIcons({ matOpenInNew })], template: "<gn-ui-internal-link-card\n  [linkHref]=\"linkHref\"\n  [linkTarget]=\"'_blank'\"\n  [record]=\"record\"\n  [favoriteTemplate]=\"favoriteTemplate\"\n  [metadataQualityDisplay]=\"metadataQualityDisplay\"\n  [size]=\"size\"\n>\n</gn-ui-internal-link-card>\n" }]
+        }], ctorParameters: () => [], propDecorators: { linkHref: [{
+                type: Input
+            }], record: [{
                 type: Input
             }], extraClass: [{
                 type: Input
+            }], favoriteTemplate: [{
+                type: Input
+            }], metadataQualityDisplay: [{
+                type: Input
+            }], size: [{
+                type: Input
             }] } });
 
 class TimeSincePipe {
@@ -30753,7 +31138,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, 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: "directive", type: i1$4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AvatarComponent, selector: "gn-ui-avatar", inputs: ["avatarUrl", "avatarPlaceholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserPreviewComponent, 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: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AvatarComponent, selector: "gn-ui-avatar", inputs: ["avatarUrl", "avatarPlaceholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserPreviewComponent, decorators: [{
             type: Component,
@@ -30835,154 +31220,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-marker('record.kind.data');
-marker('record.kind.reuse');
-marker('record.kind.service');
-class InternalLinkCardComponent {
-    set size(value) {
-        this._size = value;
-        this.cardClass = this.sizeClassMap[value] || '';
-        this.thumbnailContainerClass = this.thumbnailSizeClassMap[value] || 'hidden';
-    }
-    get size() {
-        return this._size;
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.linkHref = null;
-        this.mdSelect = new EventEmitter();
-        this.subscription = new Subscription();
-        this.cardClass = '';
-        this.thumbnailContainerClass = '';
-        this._size = 'M';
-        this.sizeClassMap = {
-            L: 'min-h-[190px] md:w-[992px] py-3 px-3 flex items-start gap-5',
-            M: 'min-h-[140px] md:w-[570px] py-3 px-3 flex items-start gap-4',
-            S: 'min-h-[220px] md:w-[370px] py-3 px-3 flex gap-4',
-            XS: 'min-h-[108px] md:w-[570px] py-3 px-3 flex gap-4',
-        };
-        this.thumbnailSizeClassMap = {
-            L: 'w-[190px] h-[180px] rounded-lg overflow-hidden shrink-0',
-            M: 'w-[110px] h-[140px] rounded-lg overflow-hidden shrink-0',
-            S: 'hidden',
-            XS: 'hidden',
-        };
-        this.titleClassMap = {
-            L: 'text-xl line-clamp-2',
-            M: 'text-base line-clamp-2',
-            S: 'text-base line-clamp-3',
-            XS: 'text-base mt-3 line-clamp-2',
-        };
-    }
-    ngOnInit() {
-        this.abstract = removeWhitespace(stripHtml(this.record?.abstract));
-        this.subscription.add(fromEvent(this.elementRef.nativeElement, 'click').subscribe((event) => {
-            event.preventDefault();
-            propagateToDocumentOnly(event);
-            this.mdSelect.emit(this.record);
-        }));
-    }
-    get organization() {
-        return this.record.ownerOrganization;
-    }
-    get contacts() {
-        return ((this.record.kind === 'dataset'
-            ? this.record.contactsForResource
-            : this.record.contacts) || []);
-    }
-    getTitleClass() {
-        return (this.titleClassMap[this._size] +
-            ' ' +
-            (this.record.ownerOrganization?.name ? '' : 'mt-3') || '');
-    }
-    openExternalUrl(event, url) {
-        event.stopPropagation();
-        window.open(url, '_blank');
-    }
-    openMailto(event, email) {
-        event.stopPropagation();
-        window.open(`mailto:${email}`, '_blank');
-    }
-    copyToClipboard(event, text) {
-        event.stopPropagation();
-        navigator.clipboard.writeText(text);
-    }
-    get shouldShowThumbnail() {
-        return this.size === 'L' || this.size === 'M';
-    }
-    getKindInfo() {
-        if (!this.record?.kind)
-            return { text: '', icon: '' };
-        switch (this.record.kind.toLowerCase()) {
-            case 'dataset':
-                return { text: 'record.kind.data', icon: 'iconoirDatabase' };
-            case 'reuse':
-                return { text: 'record.kind.reuse', icon: 'iconoirMap' };
-            case 'service':
-                return { text: 'record.kind.service', icon: 'matCode' };
-            default:
-                return { text: '', icon: '' };
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InternalLinkCardComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InternalLinkCardComponent, isStandalone: true, selector: "gn-ui-internal-link-card", inputs: { record: "record", metadataQualityDisplay: "metadataQualityDisplay", favoriteTemplate: "favoriteTemplate", linkHref: "linkHref", isGeodata: "isGeodata", size: "size" }, outputs: { mdSelect: "mdSelect" }, providers: [
-            provideIcons({
-                matLocationSearchingOutline,
-                matCode,
-                iconoirDatabase,
-                iconoirMap,
-                iconoirInternet,
-                matEmailOutline,
-                matPhoneOutline,
-                matLocationOnOutline,
-            }),
-            provideNgIconsConfig({
-                size: '1.2em',
-            }),
-        ], ngImport: i0, template: "<div\n  class=\"rounded-lg group card-shadow cursor-pointer overflow-hidden hover:bg-gray-50\"\n  [ngClass]=\"cardClass\"\n>\n  <div class=\"flex flex-row justify-between w-full\">\n    <div\n      *ngIf=\"shouldShowThumbnail\"\n      [ngClass]=\"thumbnailContainerClass\"\n      class=\"mr-4 flex flex-col\"\n    >\n      <gn-ui-thumbnail\n        class=\"w-full h-full object-cover\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url?.toString() || ''\"\n        [fit]=\"'cover'\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div\n      class=\"flex flex-col flex-1 relative\"\n      [ngClass]=\"{\n        'justify-between': record.ownerOrganization?.name && size !== 'XS',\n      }\"\n    >\n      <div class=\"flex items-center space-x-2\">\n        <span\n          *ngIf=\"getKindInfo().text\"\n          class=\"badge-btn text-white text-xs px-2 py-0.5 font-bold shrink-0 bg-primary leading-tight flex items-center justify-evenly h-6 min-h-6\"\n        >\n          <ng-icon\n            class=\"text-[0.9em] text-white mr-1\"\n            [name]=\"getKindInfo().icon\"\n          ></ng-icon>\n          <span class=\"font-medium text-white text-xs\" translate>\n            {{ getKindInfo().text }}\n          </span>\n        </span>\n        <span\n          *ngIf=\"isGeodata\"\n          class=\"badge-btn text-black text-xs px-2 py-0.5 font-bold shrink-0 bg-primary-white leading-tight flex items-center justify-evenly h-6 min-h-6\"\n          [ngClass]=\"size === 'L' ? 'w-[164px]' : 'w-8'\"\n        >\n          <ng-icon\n            class=\"text-[0.9em] text-primary-darkest\"\n            name=\"matLocationSearchingOutline\"\n          ></ng-icon>\n          <ng-container *ngIf=\"size === 'L'\">\n            <span\n              class=\"font-medium text-primary-darkest text-xs ml-1\"\n              translate\n            >\n              record.metadata.type\n            </span>\n          </ng-container>\n        </span>\n        <div class=\"flex items-center\">\n          <gn-ui-metadata-quality\n            [smaller]=\"true\"\n            [metadata]=\"record\"\n            [metadataQualityDisplay]=\"metadataQualityDisplay\"\n          ></gn-ui-metadata-quality>\n        </div>\n        <div class=\"absolute top-0 right-0 items-center\">\n          <ng-container\n            *ngIf=\"size !== 'XS'\"\n            [ngTemplateOutlet]=\"favoriteTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: record }\"\n          ></ng-container>\n        </div>\n      </div>\n      <div\n        class=\"font-medium text-title group-hover:text-primary overflow-hidden break-words\"\n        [ngClass]=\"getTitleClass()\"\n      >\n        {{ record.title }}\n      </div>\n      <div\n        *ngIf=\"size === 'L'\"\n        class=\"mt-1 mb-2 font-normal text-xs text-gray-900 line-clamp-2 overflow-hidden\"\n      >\n        <gn-ui-markdown-parser\n          [textContent]=\"abstract\"\n          [whitoutStyles]=\"true\"\n        ></gn-ui-markdown-parser>\n      </div>\n      <div\n        *ngIf=\"size !== 'XS' && record.ownerOrganization?.name\"\n        class=\"flex items-center justify-evenly bg-gray-50 rounded-lg h-[53px] px-2\"\n      >\n        <div class=\"flex items-center flex-1 min-w-0\">\n          <div\n            class=\"w-[45px] h-[45px] rounded-lg overflow-hidden shrink-0 mr-3\"\n          >\n            <gn-ui-thumbnail\n              [thumbnailUrl]=\"\n                record.ownerOrganization?.logoUrl?.toString() || ''\n              \"\n              [fit]=\"'contain'\"\n              class=\"w-full h-full rounded-lg\"\n            ></gn-ui-thumbnail>\n          </div>\n          <div *ngIf=\"organization?.name\" class=\"flex-1 w-0 overflow-hidden\">\n            <div\n              class=\"text-xs text-black font-normal leading-tight truncate\"\n              translate\n            >\n              record.card.metadata.contact\n            </div>\n            <div class=\"text-xl text-primary-black font-medium truncate\">\n              {{ organization.name }}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"size === 'L'\" class=\"ml-2 flex space-x-2\">\n          <div *ngIf=\"organization?.website\" class=\"flex\">\n            <button\n              [title]=\"organization.website\"\n              class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest\"\n              (click)=\"openExternalUrl($event, organization.website)\"\n            >\n              <ng-icon name=\"iconoirInternet\"></ng-icon>\n            </button>\n          </div>\n          <div *ngIf=\"contacts[0]?.email\" class=\"flex\">\n            <button\n              [title]=\"contacts[0].email\"\n              class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest\"\n              data-cy=\"contact-email\"\n              (click)=\"openMailto($event, contacts[0].email)\"\n            >\n              <ng-icon name=\"matEmailOutline\"></ng-icon>\n            </button>\n          </div>\n          <div *ngIf=\"contacts[0]?.phone\" class=\"flex\">\n            <button\n              [title]=\"'Copy to clipboard'\"\n              class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest relative group\"\n              data-cy=\"contact-phone\"\n              (click)=\"copyToClipboard($event, contacts[0].phone)\"\n            >\n              <ng-icon name=\"matPhoneOutline\"></ng-icon>\n            </button>\n          </div>\n          <div *ngIf=\"contacts[0]?.address\" class=\"flex\">\n            <button\n              [title]=\"'Copy to clipboard'\"\n              class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest relative group\"\n              data-cy=\"contact-phone\"\n              (click)=\"copyToClipboard($event, contacts[0].address)\"\n            >\n              <ng-icon name=\"matLocationOnOutline\"></ng-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: MetadataQualityComponent, selector: "gn-ui-metadata-quality", inputs: ["metadata", "smaller", "metadataQualityDisplay"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent", "whitoutStyles"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InternalLinkCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-internal-link-card', standalone: true, imports: [
-                        NgClass,
-                        NgIf,
-                        ThumbnailComponent,
-                        MetadataQualityComponent,
-                        NgTemplateOutlet,
-                        NgIconComponent,
-                        TranslateModule,
-                        MarkdownParserComponent,
-                    ], providers: [
-                        provideIcons({
-                            matLocationSearchingOutline,
-                            matCode,
-                            iconoirDatabase,
-                            iconoirMap,
-                            iconoirInternet,
-                            matEmailOutline,
-                            matPhoneOutline,
-                            matLocationOnOutline,
-                        }),
-                        provideNgIconsConfig({
-                            size: '1.2em',
-                        }),
-                    ], template: "<div\n  class=\"rounded-lg group card-shadow cursor-pointer overflow-hidden hover:bg-gray-50\"\n  [ngClass]=\"cardClass\"\n>\n  <div class=\"flex flex-row justify-between w-full\">\n    <div\n      *ngIf=\"shouldShowThumbnail\"\n      [ngClass]=\"thumbnailContainerClass\"\n      class=\"mr-4 flex flex-col\"\n    >\n      <gn-ui-thumbnail\n        class=\"w-full h-full object-cover\"\n        [thumbnailUrl]=\"record.overviews?.[0]?.url?.toString() || ''\"\n        [fit]=\"'cover'\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div\n      class=\"flex flex-col flex-1 relative\"\n      [ngClass]=\"{\n        'justify-between': record.ownerOrganization?.name && size !== 'XS',\n      }\"\n    >\n      <div class=\"flex items-center space-x-2\">\n        <span\n          *ngIf=\"getKindInfo().text\"\n          class=\"badge-btn text-white text-xs px-2 py-0.5 font-bold shrink-0 bg-primary leading-tight flex items-center justify-evenly h-6 min-h-6\"\n        >\n          <ng-icon\n            class=\"text-[0.9em] text-white mr-1\"\n            [name]=\"getKindInfo().icon\"\n          ></ng-icon>\n          <span class=\"font-medium text-white text-xs\" translate>\n            {{ getKindInfo().text }}\n          </span>\n        </span>\n        <span\n          *ngIf=\"isGeodata\"\n          class=\"badge-btn text-black text-xs px-2 py-0.5 font-bold shrink-0 bg-primary-white leading-tight flex items-center justify-evenly h-6 min-h-6\"\n          [ngClass]=\"size === 'L' ? 'w-[164px]' : 'w-8'\"\n        >\n          <ng-icon\n            class=\"text-[0.9em] text-primary-darkest\"\n            name=\"matLocationSearchingOutline\"\n          ></ng-icon>\n          <ng-container *ngIf=\"size === 'L'\">\n            <span\n              class=\"font-medium text-primary-darkest text-xs ml-1\"\n              translate\n            >\n              record.metadata.type\n            </span>\n          </ng-container>\n        </span>\n        <div class=\"flex items-center\">\n          <gn-ui-metadata-quality\n            [smaller]=\"true\"\n            [metadata]=\"record\"\n            [metadataQualityDisplay]=\"metadataQualityDisplay\"\n          ></gn-ui-metadata-quality>\n        </div>\n        <div class=\"absolute top-0 right-0 items-center\">\n          <ng-container\n            *ngIf=\"size !== 'XS'\"\n            [ngTemplateOutlet]=\"favoriteTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: record }\"\n          ></ng-container>\n        </div>\n      </div>\n      <div\n        class=\"font-medium text-title group-hover:text-primary overflow-hidden break-words\"\n        [ngClass]=\"getTitleClass()\"\n      >\n        {{ record.title }}\n      </div>\n      <div\n        *ngIf=\"size === 'L'\"\n        class=\"mt-1 mb-2 font-normal text-xs text-gray-900 line-clamp-2 overflow-hidden\"\n      >\n        <gn-ui-markdown-parser\n          [textContent]=\"abstract\"\n          [whitoutStyles]=\"true\"\n        ></gn-ui-markdown-parser>\n      </div>\n      <div\n        *ngIf=\"size !== 'XS' && record.ownerOrganization?.name\"\n        class=\"flex items-center justify-evenly bg-gray-50 rounded-lg h-[53px] px-2\"\n      >\n        <div class=\"flex items-center flex-1 min-w-0\">\n          <div\n            class=\"w-[45px] h-[45px] rounded-lg overflow-hidden shrink-0 mr-3\"\n          >\n            <gn-ui-thumbnail\n              [thumbnailUrl]=\"\n                record.ownerOrganization?.logoUrl?.toString() || ''\n              \"\n              [fit]=\"'contain'\"\n              class=\"w-full h-full rounded-lg\"\n            ></gn-ui-thumbnail>\n          </div>\n          <div *ngIf=\"organization?.name\" class=\"flex-1 w-0 overflow-hidden\">\n            <div\n              class=\"text-xs text-black font-normal leading-tight truncate\"\n              translate\n            >\n              record.card.metadata.contact\n            </div>\n            <div class=\"text-xl text-primary-black font-medium truncate\">\n              {{ organization.name }}\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"size === 'L'\" class=\"ml-2 flex space-x-2\">\n          <div *ngIf=\"organization?.website\" class=\"flex\">\n            <button\n              [title]=\"organization.website\"\n              class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest\"\n              (click)=\"openExternalUrl($event, organization.website)\"\n            >\n              <ng-icon name=\"iconoirInternet\"></ng-icon>\n            </button>\n          </div>\n          <div *ngIf=\"contacts[0]?.email\" class=\"flex\">\n            <button\n              [title]=\"contacts[0].email\"\n              class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest\"\n              data-cy=\"contact-email\"\n              (click)=\"openMailto($event, contacts[0].email)\"\n            >\n              <ng-icon name=\"matEmailOutline\"></ng-icon>\n            </button>\n          </div>\n          <div *ngIf=\"contacts[0]?.phone\" class=\"flex\">\n            <button\n              [title]=\"'Copy to clipboard'\"\n              class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest relative group\"\n              data-cy=\"contact-phone\"\n              (click)=\"copyToClipboard($event, contacts[0].phone)\"\n            >\n              <ng-icon name=\"matPhoneOutline\"></ng-icon>\n            </button>\n          </div>\n          <div *ngIf=\"contacts[0]?.address\" class=\"flex\">\n            <button\n              [title]=\"'Copy to clipboard'\"\n              class=\"w-[40px] h-[32px] flex items-center justify-center rounded-lg border border-[#D4D3D7] px-[8px] py-[4px] hover:bg-primary-lightest relative group\"\n              data-cy=\"contact-phone\"\n              (click)=\"copyToClipboard($event, contacts[0].address)\"\n            >\n              <ng-icon name=\"matLocationOnOutline\"></ng-icon>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { record: [{
-                type: Input
-            }], metadataQualityDisplay: [{
-                type: Input
-            }], favoriteTemplate: [{
-                type: Input
-            }], linkHref: [{
-                type: Input
-            }], isGeodata: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], mdSelect: [{
-                type: Output
-            }] } });
-
 marker(`service.metadata.search`);
 marker(`service.metadata.capabilities.title`);
 marker(`service.metadata.capabilities.abstract`);
@@ -31041,6 +31278,11 @@ class ServiceCapabilitiesComponent {
             this.searchLayers();
         }
     }
+    clearSearch() {
+        this.searchActive = false;
+        this.searchQuery = '';
+        this.filteredLayers = this.availableLayers;
+    }
     async loadLayers() {
         if (this.apiLinks.length > 0 &&
             this.apiLinks[0].accessServiceProtocol !== 'ogcFeatures') {
@@ -31099,15 +31341,16 @@ class ServiceCapabilitiesComponent {
         }
     }
     getExtraClass(layerItem) {
-        return layerItem.title === this.selectedLayer?.title
+        return layerItem === this.selectedLayer
             ? `h-8 rounded-lg bg-primary-darker text-white hover:text-primary-darker hover:bg-white`
             : `h-8 rounded-lg`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ServiceCapabilitiesComponent, deps: [{ 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: ServiceCapabilitiesComponent, isStandalone: true, selector: "gn-ui-service-capabilities", inputs: { apiLinks: "apiLinks" }, ngImport: i0, template: "<div style=\"height: 652px\" id=\"preview\" *ngIf=\"apiLinks.length > 0\">\n  <div class=\"bg-primary-opacity-10 overflow-visible\" style=\"height: 420px\">\n    <div class=\"container-lg px-4 lg:mx-auto\">\n      <div>\n        <div class=\"gn-ui-section-title mb-6\" translate>\n          service.metadata.capabilities\n        </div>\n        <div\n          *ngIf=\"loading\"\n          class=\"flex justify-center w-full h-[200px] items-center\"\n        >\n          <gn-ui-spinning-loader></gn-ui-spinning-loader>\n        </div>\n        <div *ngIf=\"!loading\">\n          <div class=\"flex flex-row gap-5\">\n            <div class=\"h-14 md:w-2/5 w-full mb-4 flex flex-row relative\">\n              <gn-ui-text-input\n                class=\"w-full\"\n                [extraClass]=\"getExtraInputClass()\"\n                [placeholder]=\"'service.metadata.search' | translate\"\n                (input)=\"onSearchChange($event)\"\n                (keydown.enter)=\"onSearchEnter($event)\"\n              >\n              </gn-ui-text-input>\n              <div class=\"border-l absolute border-gray-200 right-0 h-14 w-14\">\n                <gn-ui-button\n                  #inputBtn\n                  type=\"outline\"\n                  extraClass=\"h-12 w-12 border-0 absolute right-1 top-1\"\n                  (buttonClick)=\"searchLayers()\"\n                >\n                  <ng-icon name=\"iconoirSearch\"></ng-icon>\n                </gn-ui-button>\n              </div>\n            </div>\n            <gn-ui-popover\n              [content]=\"popoverItems\"\n              theme=\"light\"\n              class=\"w-14 h-14 border border-gray-300 rounded-lg flex justify-center items-center\"\n            >\n              <ng-icon name=\"matInfoOutline\" class=\"w-6 h-6 pt-0.5\"></ng-icon>\n            </gn-ui-popover>\n          </div>\n          <div\n            style=\"height: 500px\"\n            class=\"bg-white shadow-xl rounded p-0 flex md:flex-row flex-col\"\n          >\n            <div\n              class=\"flex flex-col gap-2 bg-gray-100 md:w-1/2 md:h-full w-full h-1/2 rounded-l overflow-y-auto py-5 pr-1 pl-3\"\n              data-test=\"layer-list\"\n            >\n              <gn-ui-button\n                *ngFor=\"let layerItem of filteredLayers\"\n                type=\"outline\"\n                [extraClass]=\"getExtraClass(layerItem)\"\n                (buttonClick)=\"selectLayer(layerItem)\"\n              >\n                {{ layerItem.title || layerItem.name }}\n              </gn-ui-button>\n              <span *ngIf=\"filteredLayers.length === 0\" class=\"text-gray-800\">\n                {{ 'service.metadata.filter.noLayers' | translate }}\n              </span>\n            </div>\n            <div\n              data-test=\"layer-information\"\n              class=\"flex flex-col gap-4 md:h-full md:w-1/2 w-full h-1/2 py-5 px-10 overflow-y-auto\"\n            >\n              <div\n                *ngFor=\"let item of layerInformation\"\n                class=\"flex flex-row gap-4 border-b border-gray-200\"\n              >\n                <span class=\"font-semibold w-24\">{{ item.displayName }}</span>\n                <div *ngIf=\"isList(item.value)\">\n                  <div\n                    *ngFor=\"let subItem of item.value\"\n                    class=\"flex flex-row break-words max-w-72\"\n                  >\n                    {{ subItem }}\n                  </div>\n                </div>\n                <div class=\"break-words max-w-72\" *ngIf=\"!isList(item.value)\">\n                  {{ item.value }}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #popoverItems>\n  <div class=\"p-2 py-4\">\n    <div translate>service.metadata.filter</div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: PopoverComponent, selector: "gn-ui-popover", inputs: ["content", "theme"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceCapabilitiesComponent, isStandalone: true, selector: "gn-ui-service-capabilities", inputs: { apiLinks: "apiLinks" }, ngImport: i0, template: "<div style=\"height: 652px\" id=\"preview\" *ngIf=\"apiLinks.length > 0\">\n  <div class=\"bg-primary-opacity-10 overflow-visible\" style=\"height: 420px\">\n    <div class=\"container-lg px-4 lg:mx-auto\">\n      <div>\n        <div class=\"gn-ui-section-title mb-6\" translate>\n          service.metadata.capabilities\n        </div>\n        <div\n          *ngIf=\"loading\"\n          class=\"flex justify-center w-full h-[200px] items-center\"\n        >\n          <gn-ui-spinning-loader></gn-ui-spinning-loader>\n        </div>\n        <div *ngIf=\"!loading\">\n          <div class=\"flex flex-row gap-5\">\n            <div class=\"h-14 md:w-2/5 w-full mb-4 flex flex-row relative\">\n              <gn-ui-text-input\n                class=\"w-full\"\n                [(value)]=\"searchQuery\"\n                [extraClass]=\"getExtraInputClass()\"\n                [placeholder]=\"'service.metadata.search' | translate\"\n                (input)=\"onSearchChange($event)\"\n                (keydown.enter)=\"onSearchEnter($event)\"\n              >\n              </gn-ui-text-input>\n              <div\n                class=\"absolute right-14 h-14 w-14 flex items-center justify-center\"\n              >\n                <button\n                  #inputBtn\n                  *ngIf=\"searchQuery\"\n                  [aria-label]=\"'service.metadata.search.clear' | translate\"\n                  (click)=\"clearSearch()\"\n                  class=\"h-12 w-12 border-0 flex items-center justify-center\"\n                >\n                  <ng-icon name=\"matClose\"></ng-icon>\n                </button>\n              </div>\n              <div class=\"border-l absolute border-gray-200 right-0 h-14 w-14\">\n                <gn-ui-button\n                  #inputBtn\n                  type=\"outline\"\n                  extraClass=\"h-12 w-12 border-0 absolute right-1 top-1 bg-white\"\n                  (buttonClick)=\"searchLayers()\"\n                >\n                  <ng-icon name=\"iconoirSearch\"></ng-icon>\n                </gn-ui-button>\n              </div>\n            </div>\n            <gn-ui-popover\n              [content]=\"popoverItems\"\n              theme=\"light\"\n              class=\"w-14 h-14 border border-gray-300 rounded-lg flex justify-center items-center\"\n            >\n              <ng-icon name=\"matInfoOutline\" class=\"w-6 h-6 pt-0.5\"></ng-icon>\n            </gn-ui-popover>\n          </div>\n          <div\n            style=\"height: 500px\"\n            class=\"bg-white shadow-xl rounded p-0 flex md:flex-row flex-col\"\n          >\n            <div\n              class=\"flex flex-col gap-2 bg-gray-100 md:w-1/2 md:h-full w-full h-1/2 rounded-l overflow-y-auto py-5 pr-1 pl-3\"\n              data-test=\"layer-list\"\n            >\n              <gn-ui-button\n                *ngFor=\"let layerItem of filteredLayers\"\n                type=\"outline\"\n                [extraClass]=\"getExtraClass(layerItem)\"\n                (buttonClick)=\"selectLayer(layerItem)\"\n              >\n                {{ layerItem.title || layerItem.name }}\n              </gn-ui-button>\n              <span *ngIf=\"filteredLayers.length === 0\" class=\"text-gray-800\">\n                {{ 'service.metadata.filter.noLayers' | translate }}\n              </span>\n            </div>\n            <div\n              data-test=\"layer-information\"\n              class=\"flex flex-col gap-4 md:h-full md:w-1/2 w-full h-1/2 py-5 px-10 overflow-y-auto\"\n            >\n              <div\n                *ngFor=\"let item of layerInformation\"\n                class=\"flex flex-row gap-4 border-b border-gray-200\"\n              >\n                <span class=\"font-semibold w-24\">{{ item.displayName }}</span>\n                <div *ngIf=\"isList(item.value)\">\n                  <div\n                    *ngFor=\"let subItem of item.value\"\n                    class=\"flex flex-row break-words max-w-72\"\n                  >\n                    {{ subItem }}\n                  </div>\n                </div>\n                <div class=\"break-words max-w-72\" *ngIf=\"!isList(item.value)\">\n                  {{ item.value }}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #popoverItems>\n  <div class=\"p-2 py-4\">\n    <div translate>service.metadata.filter</div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: PopoverComponent, selector: "gn-ui-popover", inputs: ["content", "theme"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }], viewProviders: [
             provideIcons({
                 iconoirSearch,
                 matInfoOutline,
+                matClose,
             }),
         ] }); }
 }
@@ -31125,8 +31368,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         provideIcons({
                             iconoirSearch,
                             matInfoOutline,
+                            matClose,
                         }),
-                    ], template: "<div style=\"height: 652px\" id=\"preview\" *ngIf=\"apiLinks.length > 0\">\n  <div class=\"bg-primary-opacity-10 overflow-visible\" style=\"height: 420px\">\n    <div class=\"container-lg px-4 lg:mx-auto\">\n      <div>\n        <div class=\"gn-ui-section-title mb-6\" translate>\n          service.metadata.capabilities\n        </div>\n        <div\n          *ngIf=\"loading\"\n          class=\"flex justify-center w-full h-[200px] items-center\"\n        >\n          <gn-ui-spinning-loader></gn-ui-spinning-loader>\n        </div>\n        <div *ngIf=\"!loading\">\n          <div class=\"flex flex-row gap-5\">\n            <div class=\"h-14 md:w-2/5 w-full mb-4 flex flex-row relative\">\n              <gn-ui-text-input\n                class=\"w-full\"\n                [extraClass]=\"getExtraInputClass()\"\n                [placeholder]=\"'service.metadata.search' | translate\"\n                (input)=\"onSearchChange($event)\"\n                (keydown.enter)=\"onSearchEnter($event)\"\n              >\n              </gn-ui-text-input>\n              <div class=\"border-l absolute border-gray-200 right-0 h-14 w-14\">\n                <gn-ui-button\n                  #inputBtn\n                  type=\"outline\"\n                  extraClass=\"h-12 w-12 border-0 absolute right-1 top-1\"\n                  (buttonClick)=\"searchLayers()\"\n                >\n                  <ng-icon name=\"iconoirSearch\"></ng-icon>\n                </gn-ui-button>\n              </div>\n            </div>\n            <gn-ui-popover\n              [content]=\"popoverItems\"\n              theme=\"light\"\n              class=\"w-14 h-14 border border-gray-300 rounded-lg flex justify-center items-center\"\n            >\n              <ng-icon name=\"matInfoOutline\" class=\"w-6 h-6 pt-0.5\"></ng-icon>\n            </gn-ui-popover>\n          </div>\n          <div\n            style=\"height: 500px\"\n            class=\"bg-white shadow-xl rounded p-0 flex md:flex-row flex-col\"\n          >\n            <div\n              class=\"flex flex-col gap-2 bg-gray-100 md:w-1/2 md:h-full w-full h-1/2 rounded-l overflow-y-auto py-5 pr-1 pl-3\"\n              data-test=\"layer-list\"\n            >\n              <gn-ui-button\n                *ngFor=\"let layerItem of filteredLayers\"\n                type=\"outline\"\n                [extraClass]=\"getExtraClass(layerItem)\"\n                (buttonClick)=\"selectLayer(layerItem)\"\n              >\n                {{ layerItem.title || layerItem.name }}\n              </gn-ui-button>\n              <span *ngIf=\"filteredLayers.length === 0\" class=\"text-gray-800\">\n                {{ 'service.metadata.filter.noLayers' | translate }}\n              </span>\n            </div>\n            <div\n              data-test=\"layer-information\"\n              class=\"flex flex-col gap-4 md:h-full md:w-1/2 w-full h-1/2 py-5 px-10 overflow-y-auto\"\n            >\n              <div\n                *ngFor=\"let item of layerInformation\"\n                class=\"flex flex-row gap-4 border-b border-gray-200\"\n              >\n                <span class=\"font-semibold w-24\">{{ item.displayName }}</span>\n                <div *ngIf=\"isList(item.value)\">\n                  <div\n                    *ngFor=\"let subItem of item.value\"\n                    class=\"flex flex-row break-words max-w-72\"\n                  >\n                    {{ subItem }}\n                  </div>\n                </div>\n                <div class=\"break-words max-w-72\" *ngIf=\"!isList(item.value)\">\n                  {{ item.value }}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #popoverItems>\n  <div class=\"p-2 py-4\">\n    <div translate>service.metadata.filter</div>\n  </div>\n</ng-template>\n" }]
+                    ], template: "<div style=\"height: 652px\" id=\"preview\" *ngIf=\"apiLinks.length > 0\">\n  <div class=\"bg-primary-opacity-10 overflow-visible\" style=\"height: 420px\">\n    <div class=\"container-lg px-4 lg:mx-auto\">\n      <div>\n        <div class=\"gn-ui-section-title mb-6\" translate>\n          service.metadata.capabilities\n        </div>\n        <div\n          *ngIf=\"loading\"\n          class=\"flex justify-center w-full h-[200px] items-center\"\n        >\n          <gn-ui-spinning-loader></gn-ui-spinning-loader>\n        </div>\n        <div *ngIf=\"!loading\">\n          <div class=\"flex flex-row gap-5\">\n            <div class=\"h-14 md:w-2/5 w-full mb-4 flex flex-row relative\">\n              <gn-ui-text-input\n                class=\"w-full\"\n                [(value)]=\"searchQuery\"\n                [extraClass]=\"getExtraInputClass()\"\n                [placeholder]=\"'service.metadata.search' | translate\"\n                (input)=\"onSearchChange($event)\"\n                (keydown.enter)=\"onSearchEnter($event)\"\n              >\n              </gn-ui-text-input>\n              <div\n                class=\"absolute right-14 h-14 w-14 flex items-center justify-center\"\n              >\n                <button\n                  #inputBtn\n                  *ngIf=\"searchQuery\"\n                  [aria-label]=\"'service.metadata.search.clear' | translate\"\n                  (click)=\"clearSearch()\"\n                  class=\"h-12 w-12 border-0 flex items-center justify-center\"\n                >\n                  <ng-icon name=\"matClose\"></ng-icon>\n                </button>\n              </div>\n              <div class=\"border-l absolute border-gray-200 right-0 h-14 w-14\">\n                <gn-ui-button\n                  #inputBtn\n                  type=\"outline\"\n                  extraClass=\"h-12 w-12 border-0 absolute right-1 top-1 bg-white\"\n                  (buttonClick)=\"searchLayers()\"\n                >\n                  <ng-icon name=\"iconoirSearch\"></ng-icon>\n                </gn-ui-button>\n              </div>\n            </div>\n            <gn-ui-popover\n              [content]=\"popoverItems\"\n              theme=\"light\"\n              class=\"w-14 h-14 border border-gray-300 rounded-lg flex justify-center items-center\"\n            >\n              <ng-icon name=\"matInfoOutline\" class=\"w-6 h-6 pt-0.5\"></ng-icon>\n            </gn-ui-popover>\n          </div>\n          <div\n            style=\"height: 500px\"\n            class=\"bg-white shadow-xl rounded p-0 flex md:flex-row flex-col\"\n          >\n            <div\n              class=\"flex flex-col gap-2 bg-gray-100 md:w-1/2 md:h-full w-full h-1/2 rounded-l overflow-y-auto py-5 pr-1 pl-3\"\n              data-test=\"layer-list\"\n            >\n              <gn-ui-button\n                *ngFor=\"let layerItem of filteredLayers\"\n                type=\"outline\"\n                [extraClass]=\"getExtraClass(layerItem)\"\n                (buttonClick)=\"selectLayer(layerItem)\"\n              >\n                {{ layerItem.title || layerItem.name }}\n              </gn-ui-button>\n              <span *ngIf=\"filteredLayers.length === 0\" class=\"text-gray-800\">\n                {{ 'service.metadata.filter.noLayers' | translate }}\n              </span>\n            </div>\n            <div\n              data-test=\"layer-information\"\n              class=\"flex flex-col gap-4 md:h-full md:w-1/2 w-full h-1/2 py-5 px-10 overflow-y-auto\"\n            >\n              <div\n                *ngFor=\"let item of layerInformation\"\n                class=\"flex flex-row gap-4 border-b border-gray-200\"\n              >\n                <span class=\"font-semibold w-24\">{{ item.displayName }}</span>\n                <div *ngIf=\"isList(item.value)\">\n                  <div\n                    *ngFor=\"let subItem of item.value\"\n                    class=\"flex flex-row break-words max-w-72\"\n                  >\n                    {{ subItem }}\n                  </div>\n                </div>\n                <div class=\"break-words max-w-72\" *ngIf=\"!isList(item.value)\">\n                  {{ item.value }}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #popoverItems>\n  <div class=\"p-2 py-4\">\n    <div translate>service.metadata.filter</div>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }], propDecorators: { apiLinks: [{
                 type: Input
             }] } });
@@ -31152,7 +31396,8 @@ class UiElementsModule {
             ApplicationBannerComponent,
             InternalLinkCardComponent,
             ServiceCapabilitiesComponent,
-            KindBadgeComponent], exports: [ThumbnailComponent,
+            KindBadgeComponent,
+            GeoDataBadgeComponent], exports: [ThumbnailComponent,
             AvatarComponent,
             UserPreviewComponent,
             MarkdownParserComponent,
@@ -31160,7 +31405,8 @@ class UiElementsModule {
             ApplicationBannerComponent,
             InternalLinkCardComponent,
             ServiceCapabilitiesComponent,
-            KindBadgeComponent] }); }
+            KindBadgeComponent,
+            GeoDataBadgeComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UiElementsModule, providers: [
             provideNgIconsConfig({
                 size: '1.5em',
@@ -31183,7 +31429,8 @@ class UiElementsModule {
             ApplicationBannerComponent,
             InternalLinkCardComponent,
             ServiceCapabilitiesComponent,
-            KindBadgeComponent] }); }
+            KindBadgeComponent,
+            GeoDataBadgeComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UiElementsModule, decorators: [{
             type: NgModule,
@@ -31211,6 +31458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         InternalLinkCardComponent,
                         ServiceCapabilitiesComponent,
                         KindBadgeComponent,
+                        GeoDataBadgeComponent,
                     ],
                     providers: [
                         provideNgIconsConfig({
@@ -31228,6 +31476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         InternalLinkCardComponent,
                         ServiceCapabilitiesComponent,
                         KindBadgeComponent,
+                        GeoDataBadgeComponent,
                     ],
                 }]
         }] });
@@ -31299,6 +31548,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
+class FeatureCatalogListComponent {
+    constructor() {
+        this.columns = [
+            {
+                key: 'type',
+                label: 'feature.catalog.attribute.type',
+                width: '19%',
+            },
+            {
+                key: 'name',
+                label: 'feature.catalog.attribute.name',
+                width: '32%',
+            },
+            {
+                key: 'code',
+                label: 'feature.catalog.attribute.code',
+                width: '24%',
+            },
+            {
+                key: 'title',
+                label: 'feature.catalog.attribute.description',
+                width: '25%',
+            },
+        ];
+        this.gridTemplateColumns = '';
+    }
+    ngOnInit() {
+        this.gridTemplateColumns = this.columns.map((col) => col.width).join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureCatalogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeatureCatalogListComponent, isStandalone: true, selector: "gn-ui-feature-catalog-list", inputs: { filteredFeatureCatalog: "filteredFeatureCatalog" }, ngImport: i0, template: "<div class=\"flex flex-col gap-2 py-5 px-5 h-[562px] overflow-y-auto\">\n  <div\n    *ngFor=\"let featureType of filteredFeatureCatalog?.featureTypes\"\n    class=\"rounded shadow bg-white\"\n  >\n    <gn-ui-expandable-panel\n      [collapsed]=\"filteredFeatureCatalog?.featureTypes?.length !== 1\"\n      iconColor=\"black\"\n    >\n      <ng-template #titleTemplate>\n        <div class=\"px-2\">\n          <div class=\"text-lg font-bold\">{{ featureType.name }}</div>\n          <div class=\"text-sm\" *ngIf=\"featureType.definition\">\n            {{ featureType.definition }}\n          </div>\n        </div>\n      </ng-template>\n      <div\n        class=\"grid gap-0\"\n        [style.grid-template-columns]=\"gridTemplateColumns\"\n        data-cy=\"feature-type-content\"\n      >\n        <div\n          class=\"py-1 px-2 text-sm font-bold text-left border-t\"\n          [class.border-l]=\"i > 0\"\n          [class.border-gray-300]=\"i > 0\"\n          *ngFor=\"let col of columns; let i = index\"\n          data-test=\"column-label\"\n        >\n          {{ col.label | translate }}\n        </div>\n        <ng-container *ngFor=\"let row of featureType.attributes\">\n          <div\n            class=\"bg-white text-sm font-normal text-left border-t\"\n            [class.border-l]=\"i > 0\"\n            [class.border-gray-300]=\"i > 0\"\n            *ngFor=\"let col of columns; let i = index\"\n          >\n            <gn-ui-truncated-text\n              extraClass=\"py-3 px-2\"\n              [text]=\"row[col.key]\"\n            ></gn-ui-truncated-text>\n          </div>\n        </ng-container>\n      </div>\n    </gn-ui-expandable-panel>\n  </div>\n</div>\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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "iconColor", "collapsed"] }, { kind: "component", type: TruncatedTextComponent, selector: "gn-ui-truncated-text", inputs: ["text", "extraClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureCatalogListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-feature-catalog-list', standalone: true, imports: [
+                        CommonModule,
+                        TranslateModule,
+                        ExpandablePanelComponent,
+                        TruncatedTextComponent,
+                    ], template: "<div class=\"flex flex-col gap-2 py-5 px-5 h-[562px] overflow-y-auto\">\n  <div\n    *ngFor=\"let featureType of filteredFeatureCatalog?.featureTypes\"\n    class=\"rounded shadow bg-white\"\n  >\n    <gn-ui-expandable-panel\n      [collapsed]=\"filteredFeatureCatalog?.featureTypes?.length !== 1\"\n      iconColor=\"black\"\n    >\n      <ng-template #titleTemplate>\n        <div class=\"px-2\">\n          <div class=\"text-lg font-bold\">{{ featureType.name }}</div>\n          <div class=\"text-sm\" *ngIf=\"featureType.definition\">\n            {{ featureType.definition }}\n          </div>\n        </div>\n      </ng-template>\n      <div\n        class=\"grid gap-0\"\n        [style.grid-template-columns]=\"gridTemplateColumns\"\n        data-cy=\"feature-type-content\"\n      >\n        <div\n          class=\"py-1 px-2 text-sm font-bold text-left border-t\"\n          [class.border-l]=\"i > 0\"\n          [class.border-gray-300]=\"i > 0\"\n          *ngFor=\"let col of columns; let i = index\"\n          data-test=\"column-label\"\n        >\n          {{ col.label | translate }}\n        </div>\n        <ng-container *ngFor=\"let row of featureType.attributes\">\n          <div\n            class=\"bg-white text-sm font-normal text-left border-t\"\n            [class.border-l]=\"i > 0\"\n            [class.border-gray-300]=\"i > 0\"\n            *ngFor=\"let col of columns; let i = index\"\n          >\n            <gn-ui-truncated-text\n              extraClass=\"py-3 px-2\"\n              [text]=\"row[col.key]\"\n            ></gn-ui-truncated-text>\n          </div>\n        </ng-container>\n      </div>\n    </gn-ui-expandable-panel>\n  </div>\n</div>\n" }]
+        }], propDecorators: { filteredFeatureCatalog: [{
+                type: Input
+            }] } });
+
 class UiSearchModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UiSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: UiSearchModule, declarations: [RecordPreviewComponent,
@@ -31455,7 +31748,7 @@ class ActionMenuComponent {
         }
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionMenuComponent, deps: [{ token: i1$b.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionMenuComponent, deps: [{ token: i1$a.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActionMenuComponent, isStandalone: true, selector: "gn-ui-action-menu", inputs: { canDuplicate: "canDuplicate", canDelete: "canDelete", isDraftPage: "isDraftPage" }, outputs: { duplicate: "duplicate", delete: "delete", closeActionMenu: "closeActionMenu", rollback: "rollback" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"sectionDisplayed\">\n  <ng-container *ngSwitchCase=\"'mainMenu'\">\n    <div\n      data-test=\"mainMenuSection\"\n      class=\"mt-2 border border-gray-100 p-2 flex items-center bg-white shadow-2xl rounded-2xl\"\n    >\n      <ul class=\"flex flex-col gap-2 w-full\">\n        <gn-ui-button\n          *ngIf=\"!isDraftPage\"\n          type=\"light\"\n          extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n          (buttonClick)=\"duplicate.emit()\"\n          [disabled]=\"!canDuplicate\"\n          data-test=\"record-menu-duplicate-button\"\n        >\n          <span *ngIf=\"canDuplicate\" translate>record.action.duplicate</span>\n          <span *ngIf=\"!canDuplicate\" translate\n            >record.action.duplicating</span\n          ></gn-ui-button\n        >\n        <gn-ui-button\n          type=\"light\"\n          extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n          (buttonClick)=\"displayDeleteMenu()\"\n          [disabled]=\"!canDelete\"\n          data-test=\"record-menu-delete-button\"\n          ><span *ngIf=\"!isDraftPage\" translate>record.action.delete</span>\n          <span *ngIf=\"isDraftPage\" translate\n            >record.action.rollback</span\n          ></gn-ui-button\n        >\n      </ul>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'deleteMenu'\">\n    <div\n      data-test=\"deleteMenuSection\"\n      class=\"w-72 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <span class=\"text-lg font-bold text-center\">{{\n        'editor.record.delete.confirmation.title' | translate\n      }}</span>\n      <span class=\"text-center\">{{\n        'editor.record.delete.confirmation.message' | translate\n      }}</span>\n      <div class=\"flex flex-row gap-8 justify-center\">\n        <gn-ui-button\n          (buttonClick)=\"delete.emit()\"\n          cdkFocusInitial\n          type=\"primary\"\n          data-cy=\"confirm-button\"\n          [style.--gn-ui-button-width]=\"'100px'\"\n          >{{\n            'editor.record.delete.confirmation.confirmText' | translate\n          }}</gn-ui-button\n        >\n        <gn-ui-button\n          [style.--gn-ui-button-width]=\"'100px'\"\n          (buttonClick)=\"closeActionMenu.emit()\"\n          >{{\n            'editor.record.delete.confirmation.cancelText' | translate\n          }}</gn-ui-button\n        >\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'rollbackMenu'\">\n    <div\n      data-test=\"rollbackMenuSection\"\n      class=\"w-80 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <span class=\"text-lg font-bold text-center\">{{\n        'editor.record.undo.confirmation.title' | translate\n      }}</span>\n      <span class=\"text-center\">{{\n        'editor.record.undo.confirmation.message' | translate\n      }}</span>\n      <div class=\"flex flex-row gap-8 justify-center\">\n        <gn-ui-button\n          (buttonClick)=\"rollback.emit()\"\n          cdkFocusInitial\n          type=\"primary\"\n          data-cy=\"confirm-button\"\n          [style.--gn-ui-button-width]=\"'120px'\"\n          >{{\n            'editor.record.undo.confirmation.confirmText' | translate\n          }}</gn-ui-button\n        >\n        <gn-ui-button\n          [style.--gn-ui-button-width]=\"'120px'\"\n          (buttonClick)=\"closeActionMenu.emit()\"\n          >{{\n            'editor.record.undo.confirmation.cancelText' | translate\n          }}</gn-ui-button\n        >\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionMenuComponent, decorators: [{
@@ -31468,7 +31761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ConfirmationDialogComponent,
                         TranslateModule,
                     ], template: "<ng-container [ngSwitch]=\"sectionDisplayed\">\n  <ng-container *ngSwitchCase=\"'mainMenu'\">\n    <div\n      data-test=\"mainMenuSection\"\n      class=\"mt-2 border border-gray-100 p-2 flex items-center bg-white shadow-2xl rounded-2xl\"\n    >\n      <ul class=\"flex flex-col gap-2 w-full\">\n        <gn-ui-button\n          *ngIf=\"!isDraftPage\"\n          type=\"light\"\n          extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n          (buttonClick)=\"duplicate.emit()\"\n          [disabled]=\"!canDuplicate\"\n          data-test=\"record-menu-duplicate-button\"\n        >\n          <span *ngIf=\"canDuplicate\" translate>record.action.duplicate</span>\n          <span *ngIf=\"!canDuplicate\" translate\n            >record.action.duplicating</span\n          ></gn-ui-button\n        >\n        <gn-ui-button\n          type=\"light\"\n          extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n          (buttonClick)=\"displayDeleteMenu()\"\n          [disabled]=\"!canDelete\"\n          data-test=\"record-menu-delete-button\"\n          ><span *ngIf=\"!isDraftPage\" translate>record.action.delete</span>\n          <span *ngIf=\"isDraftPage\" translate\n            >record.action.rollback</span\n          ></gn-ui-button\n        >\n      </ul>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'deleteMenu'\">\n    <div\n      data-test=\"deleteMenuSection\"\n      class=\"w-72 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <span class=\"text-lg font-bold text-center\">{{\n        'editor.record.delete.confirmation.title' | translate\n      }}</span>\n      <span class=\"text-center\">{{\n        'editor.record.delete.confirmation.message' | translate\n      }}</span>\n      <div class=\"flex flex-row gap-8 justify-center\">\n        <gn-ui-button\n          (buttonClick)=\"delete.emit()\"\n          cdkFocusInitial\n          type=\"primary\"\n          data-cy=\"confirm-button\"\n          [style.--gn-ui-button-width]=\"'100px'\"\n          >{{\n            'editor.record.delete.confirmation.confirmText' | translate\n          }}</gn-ui-button\n        >\n        <gn-ui-button\n          [style.--gn-ui-button-width]=\"'100px'\"\n          (buttonClick)=\"closeActionMenu.emit()\"\n          >{{\n            'editor.record.delete.confirmation.cancelText' | translate\n          }}</gn-ui-button\n        >\n      </div>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'rollbackMenu'\">\n    <div\n      data-test=\"rollbackMenuSection\"\n      class=\"w-80 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <span class=\"text-lg font-bold text-center\">{{\n        'editor.record.undo.confirmation.title' | translate\n      }}</span>\n      <span class=\"text-center\">{{\n        'editor.record.undo.confirmation.message' | translate\n      }}</span>\n      <div class=\"flex flex-row gap-8 justify-center\">\n        <gn-ui-button\n          (buttonClick)=\"rollback.emit()\"\n          cdkFocusInitial\n          type=\"primary\"\n          data-cy=\"confirm-button\"\n          [style.--gn-ui-button-width]=\"'120px'\"\n          >{{\n            'editor.record.undo.confirmation.confirmText' | translate\n          }}</gn-ui-button\n        >\n        <gn-ui-button\n          [style.--gn-ui-button-width]=\"'120px'\"\n          (buttonClick)=\"closeActionMenu.emit()\"\n          >{{\n            'editor.record.undo.confirmation.cancelText' | translate\n          }}</gn-ui-button\n        >\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i1$b.MatDialog }, { type: i0.ChangeDetectorRef }], propDecorators: { canDuplicate: [{
+        }], ctorParameters: () => [{ type: i1$a.MatDialog }, { type: i0.ChangeDetectorRef }], propDecorators: { canDuplicate: [{
                 type: Input
             }], canDelete: [{
                 type: Input
@@ -31613,7 +31906,7 @@ class ResultsTableComponent {
     handleRecordSelectedChange(selected, record) {
         this.recordsSelectedChange.emit([[record], selected]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResultsTableComponent, deps: [{ token: i1$9.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: DateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResultsTableComponent, deps: [{ token: i1$8.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: DateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResultsTableComponent, isStandalone: true, selector: "gn-ui-results-table", inputs: { records: "records", selectedRecordsIdentifiers: "selectedRecordsIdentifiers", sortOrder: "sortOrder", hasDraft: "hasDraft", canDuplicate: "canDuplicate", canDelete: "canDelete", isDraftPage: "isDraftPage", isDuplicating: "isDuplicating" }, outputs: { sortByChange: "sortByChange", recordClick: "recordClick", duplicateRecord: "duplicateRecord", deleteRecord: "deleteRecord", rollbackDraft: "rollbackDraft", recordsSelectedChange: "recordsSelectedChange" }, providers: [provideIcons({ iconoirUser, iconoirLock, matMoreVert })], viewQueries: [{ propertyName: "actionMenuButtons", predicate: ["actionMenuButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-interactive-table\n  [items]=\"records\"\n  [isDraftPage]=\"isDraftPage\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'3rem'\">\n    <ng-template #cell let-item let-i=\"index\">\n      <ng-icon\n        name=\"iconoirLock\"\n        class=\"text-purple\"\n        *ngIf=\"(!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset'\"\n      ></ng-icon>\n      <gn-ui-checkbox\n        *ngIf=\"(item.extras?.edit || isDraftPage) && item.kind === 'dataset'\"\n        [checked]=\"isChecked(item)\"\n        (changed)=\"handleRecordSelectedChange($event, item)\"\n        class=\"-m-2\"\n        type=\"default\"\n      ></gn-ui-checkbox>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [grow]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword')\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex flex-row items-center gap-2 max-w-full font-semibold\">\n        <span data-cy=\"resultItemTitle\" class=\"overflow-hidden text-ellipsis\">{{\n          item.title\n        }}</span>\n        <gn-ui-badge\n          *ngIf=\"hasDraft(item)\"\n          [style.--gn-ui-badge-padding]=\"'0.2em 0.6em'\"\n          [style.--gn-ui-badge-text-size]=\"'12px'\"\n          [style.--gn-ui-badge-text-color]=\"'#3d2006'\"\n          [style.--gn-ui-badge-background-color]=\"'#ffbc7b'\"\n          [style.--gn-ui-badge-rounded]=\"'4px'\"\n        >\n          <span translate>dashboard.records.hasDraft</span>\n        </gn-ui-badge>\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'9rem'\">\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2 font-medium\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"shrink-0 text-xs\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [width]=\"'12rem'\"\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner')\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>search.filters.user</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <ng-icon name=\"iconoirUser\" size=\"16px\"></ng-icon>\n      <span data-cy=\"ownerInfo\" class=\"text-xs\">{{\n        formatUserInfo(item.extras?.ownerInfo)\n      }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'6rem'\">\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <span class=\"text-xs\">\n        {{\n          (item.extras?.['isPublishedToAll']\n            ? 'record.metadata.status.published'\n            : 'record.metadata.status.notPublished'\n          ) | translate\n        }}</span\n      >\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [width]=\"'8rem'\"\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate')\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>search.filters.changeDate</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex text-left w-full text-xs\">\n        {{\n          item.extras?.['isPublishedToAll']\n            ? dateToString(item.recordUpdated)\n            : '-'\n        }}\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- ACTION MENU COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header> </ng-template>\n    <ng-template #cell let-item>\n      <gn-ui-button\n        cdkOverlayOrigin\n        #actionMenuButton\n        (buttonClick)=\"openActionMenu(item, template)\"\n        type=\"light\"\n        data-test=\"record-menu-button\"\n        [disabled]=\"\n          (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset'\n        \"\n      >\n        <ng-icon\n          [ngClass]=\"{\n            'text-purple-light':\n              (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset',\n          }\"\n          name=\"matMoreVert\"\n        ></ng-icon>\n      </gn-ui-button>\n      <ng-template #template>\n        <gn-ui-action-menu\n          [canDuplicate]=\"canDuplicate(item) && !isDuplicating\"\n          [canDelete]=\"canDelete(item)\"\n          [isDraftPage]=\"isDraftPage\"\n          (duplicate)=\"handleDuplicate(item)\"\n          (delete)=\"handleDelete(item)\"\n          (closeActionMenu)=\"closeActionMenu()\"\n          (rollback)=\"handleRollback(item)\"\n        >\n        </gn-ui-action-menu>\n      </ng-template>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n", styles: [""], 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: UiInputsModule }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: CheckboxComponent, selector: "gn-ui-checkbox", inputs: ["type", "checked", "indeterminate"], outputs: ["changed"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "component", type: InteractiveTableComponent, selector: "gn-ui-interactive-table", inputs: ["items", "isDraftPage"], outputs: ["itemClick"] }, { kind: "component", type: InteractiveTableColumnComponent, selector: "gn-ui-interactive-table-column", inputs: ["grow", "width", "sortable", "activeSort"], outputs: ["sortChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ActionMenuComponent, selector: "gn-ui-action-menu", inputs: ["canDuplicate", "canDelete", "isDraftPage"], outputs: ["duplicate", "delete", "closeActionMenu", "rollback"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResultsTableComponent, decorators: [{
@@ -31629,7 +31922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         NgIconComponent,
                         CdkOverlayOrigin,
                     ], providers: [provideIcons({ iconoirUser, iconoirLock, matMoreVert })], template: "<gn-ui-interactive-table\n  [items]=\"records\"\n  [isDraftPage]=\"isDraftPage\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'3rem'\">\n    <ng-template #cell let-item let-i=\"index\">\n      <ng-icon\n        name=\"iconoirLock\"\n        class=\"text-purple\"\n        *ngIf=\"(!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset'\"\n      ></ng-icon>\n      <gn-ui-checkbox\n        *ngIf=\"(item.extras?.edit || isDraftPage) && item.kind === 'dataset'\"\n        [checked]=\"isChecked(item)\"\n        (changed)=\"handleRecordSelectedChange($event, item)\"\n        class=\"-m-2\"\n        type=\"default\"\n      ></gn-ui-checkbox>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [grow]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword')\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex flex-row items-center gap-2 max-w-full font-semibold\">\n        <span data-cy=\"resultItemTitle\" class=\"overflow-hidden text-ellipsis\">{{\n          item.title\n        }}</span>\n        <gn-ui-badge\n          *ngIf=\"hasDraft(item)\"\n          [style.--gn-ui-badge-padding]=\"'0.2em 0.6em'\"\n          [style.--gn-ui-badge-text-size]=\"'12px'\"\n          [style.--gn-ui-badge-text-color]=\"'#3d2006'\"\n          [style.--gn-ui-badge-background-color]=\"'#ffbc7b'\"\n          [style.--gn-ui-badge-rounded]=\"'4px'\"\n        >\n          <span translate>dashboard.records.hasDraft</span>\n        </gn-ui-badge>\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'9rem'\">\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2 font-medium\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"shrink-0 text-xs\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [width]=\"'12rem'\"\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner')\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>search.filters.user</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <ng-icon name=\"iconoirUser\" size=\"16px\"></ng-icon>\n      <span data-cy=\"ownerInfo\" class=\"text-xs\">{{\n        formatUserInfo(item.extras?.ownerInfo)\n      }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column [width]=\"'6rem'\">\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <span class=\"text-xs\">\n        {{\n          (item.extras?.['isPublishedToAll']\n            ? 'record.metadata.status.published'\n            : 'record.metadata.status.notPublished'\n          ) | translate\n        }}</span\n      >\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [width]=\"'8rem'\"\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate')\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>search.filters.changeDate</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex text-left w-full text-xs\">\n        {{\n          item.extras?.['isPublishedToAll']\n            ? dateToString(item.recordUpdated)\n            : '-'\n        }}\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- ACTION MENU COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header> </ng-template>\n    <ng-template #cell let-item>\n      <gn-ui-button\n        cdkOverlayOrigin\n        #actionMenuButton\n        (buttonClick)=\"openActionMenu(item, template)\"\n        type=\"light\"\n        data-test=\"record-menu-button\"\n        [disabled]=\"\n          (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset'\n        \"\n      >\n        <ng-icon\n          [ngClass]=\"{\n            'text-purple-light':\n              (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset',\n          }\"\n          name=\"matMoreVert\"\n        ></ng-icon>\n      </gn-ui-button>\n      <ng-template #template>\n        <gn-ui-action-menu\n          [canDuplicate]=\"canDuplicate(item) && !isDuplicating\"\n          [canDelete]=\"canDelete(item)\"\n          [isDraftPage]=\"isDraftPage\"\n          (duplicate)=\"handleDuplicate(item)\"\n          (delete)=\"handleDelete(item)\"\n          (closeActionMenu)=\"closeActionMenu()\"\n          (rollback)=\"handleRollback(item)\"\n        >\n        </gn-ui-action-menu>\n      </ng-template>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n" }]
-        }], ctorParameters: () => [{ type: i1$9.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: DateService }], propDecorators: { records: [{
+        }], ctorParameters: () => [{ type: i1$8.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: DateService }], propDecorators: { records: [{
                 type: Input
             }], selectedRecordsIdentifiers: [{
                 type: Input
@@ -31881,6 +32174,7 @@ const FIELDS_SUMMARY = [
     'overview',
     'logo',
     'codelist_status_text',
+    'link',
     'linkProtocol',
     'contactForResource*.organisation*',
     'contact*.organisation*',
@@ -32949,7 +33243,7 @@ class ResultsListContainerComponent {
         const urlKind = tokenMap[metadata.kind];
         return urlKind.replace('${uuid}', metadata.uniqueIdentifier);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResultsListContainerComponent, deps: [{ token: SearchFacade }, { token: RESULTS_LAYOUT_CONFIG }, { token: RECORD_DATASET_URL_TOKEN, optional: true }, { token: RECORD_SERVICE_URL_TOKEN }, { token: RECORD_REUSE_URL_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResultsListContainerComponent, deps: [{ token: SearchFacade }, { token: RESULTS_LAYOUT_CONFIG }, { token: RECORD_DATASET_URL_TOKEN, optional: true }, { token: RECORD_SERVICE_URL_TOKEN, optional: true }, { token: RECORD_REUSE_URL_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResultsListContainerComponent, selector: "gn-ui-results-list-container", inputs: { metadataQualityDisplay: "metadataQualityDisplay", layout: "layout", showMore: "showMore" }, outputs: { mdSelect: "mdSelect" }, ngImport: i0, template: "<div *ngIf=\"(error$ | async) === null\" class=\"search-results relative\">\n  <gn-ui-results-list\n    [records]=\"facade.results$ | async\"\n    [layoutConfig]=\"layoutConfig$ | async\"\n    [metadataQualityDisplay]=\"\n      metadataQualityDisplay && (pipelineForQualityScoreActivated | async)\n    \"\n    [favoriteTemplate]=\"favoriteToggle\"\n    [recordUrlGetter]=\"recordUrlGetter\"\n    (mdSelect)=\"onMetadataSelection($event)\"\n  ></gn-ui-results-list>\n  <ng-container *ngIf=\"allowShowMore$ | async\">\n    <div class=\"show-more h-[100px] pt-[30px]\" *ngIf=\"showMore === 'button'\">\n      <gn-ui-button\n        data-cy=\"addMoreBtn\"\n        type=\"secondary\"\n        (buttonClick)=\"onShowMore()\"\n        extraClass=\"m-auto !p-[22px]\"\n        [style.--gn-ui-button-width]=\"!auto\"\n      >\n        <span class=\"uppercase font-medium tracking-widest\" translate\n          >results.showMore</span\n        >\n      </gn-ui-button>\n    </div>\n    <div class=\"show-more h-[100px]\" *ngIf=\"showMore === 'auto'\">\n      <gn-ui-viewport-intersector\n        (entersViewport)=\"onShowMore()\"\n      ></gn-ui-viewport-intersector>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"(facade.isLoading$ | async) === true\">\n    <div class=\"loading flex justify-center h-[100px] pt-[45px]\">\n      <gn-ui-spinning-loader></gn-ui-spinning-loader>\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"p-4 max-w-[600px] m-auto text-[13px]\">\n  <gn-ui-error\n    *ngIf=\"(errorCode$ | async) === 0\"\n    [type]=\"errorTypes.COULD_NOT_REACH_API\"\n  >\n  </gn-ui-error>\n  <gn-ui-error\n    *ngIf=\"(error$ | async) !== null && (errorCode$ | async) !== 0\"\n    [type]=\"errorTypes.RECEIVED_ERROR\"\n    [error]=\"errorMessage$ | async\"\n  ></gn-ui-error>\n</div>\n\n<ng-template #favoriteToggle let-record>\n  <gn-ui-favorite-star [record]=\"record\"></gn-ui-favorite-star>\n</ng-template>\n", styles: [":host{--gn-ui-button-height: 24px;--gn-ui-button-width: 24px;--gn-ui-button-color: var(--color-secondary);--gn-ui-button-border-width: 0px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ResultsListComponent, selector: "gn-ui-results-list", inputs: ["records", "layoutConfig", "favoriteTemplate", "recordUrlGetter", "metadataQualityDisplay"], outputs: ["mdSelect"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: ViewportIntersectorComponent, selector: "gn-ui-viewport-intersector", outputs: ["isInViewport", "entersViewport", "exitsViewport"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "component", type: ErrorComponent, selector: "gn-ui-error", inputs: ["type", "error", "recordId"] }, { kind: "component", type: FavoriteStarComponent, selector: "gn-ui-favorite-star", inputs: ["displayCount", "record"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResultsListContainerComponent, decorators: [{
@@ -32964,9 +33258,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     type: Inject,
                     args: [RECORD_DATASET_URL_TOKEN]
                 }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
                     args: [RECORD_SERVICE_URL_TOKEN]
                 }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
                     args: [RECORD_REUSE_URL_TOKEN]
                 }] }], propDecorators: { metadataQualityDisplay: [{
@@ -33154,12 +33452,12 @@ class SearchEffects {
             );
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchEffects, deps: [{ token: i1$c.Actions }, { token: i1$3.Store }, { token: RecordsRepositoryInterface }, { token: FavoritesService }, { token: PlatformServiceInterface }, { token: FILTER_GEOMETRY, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchEffects, deps: [{ token: i1$b.Actions }, { token: i1$3.Store }, { token: RecordsRepositoryInterface }, { token: FavoritesService }, { token: PlatformServiceInterface }, { token: FILTER_GEOMETRY, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$c.Actions }, { type: i1$3.Store }, { type: RecordsRepositoryInterface }, { type: FavoritesService }, { type: PlatformServiceInterface }, { type: Promise, decorators: [{
+        }], ctorParameters: () => [{ type: i1$b.Actions }, { type: i1$3.Store }, { type: RecordsRepositoryInterface }, { type: FavoritesService }, { type: PlatformServiceInterface }, { type: Promise, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -33785,7 +34083,7 @@ class FeatureSearchModule {
             ResultsListContainerComponent,
             ResultsHitsContainerComponent,
             SearchStateContainerDirective,
-            FilterDropdownComponent], imports: [CommonModule, i1$1.TranslateModule, i1$3.StoreFeatureModule, i1$c.EffectsFeatureModule, HttpClientModule,
+            FilterDropdownComponent], imports: [CommonModule, i1$1.TranslateModule, i1$3.StoreFeatureModule, i1$b.EffectsFeatureModule, HttpClientModule,
             HttpClientXsrfModule,
             UiSearchModule,
             UiInputsModule,
@@ -37045,6 +37343,36 @@ class DataService {
             throw new Error(`ogc.unreachable.unknown`);
         });
     }
+    async getGeodataLinksFromTms(tmsLink, keepOriginalLink = false) {
+        const endpoint = new TmsEndpoint(tmsLink.url.toString());
+        const tileMaps = await endpoint.allTileMaps;
+        if (!tileMaps?.length)
+            return null;
+        // TODO: at some point use the identifierInService field if more that one layers in the TMS service
+        const tileMapInfo = await endpoint.getTileMapInfo(tileMaps[0].href);
+        // case 1: no styles; return a plain TMS link
+        if (!tileMapInfo?.metadata?.length)
+            return [tmsLink];
+        // case 2: styles present; return each as a separate link
+        const styleLinks = tileMapInfo.metadata
+            .filter((meta) => meta.href)
+            .map((meta) => {
+            const fileName = meta.href.split('/').pop() || '';
+            const linkName = tmsLink.description || ('name' in tmsLink ? tmsLink.name : '');
+            const styleName = fileName.split('.')[0];
+            const name = `${linkName} - ${styleName}`;
+            return {
+                type: 'service',
+                url: new URL(meta.href),
+                name,
+                accessServiceProtocol: 'maplibre-style',
+            };
+        });
+        if (keepOriginalLink) {
+            styleLinks.unshift(tmsLink);
+        }
+        return styleLinks;
+    }
     getDownloadLinksFromEsriRest(esriRestLink) {
         return ['json', 'geojson'].map((format) => ({
             ...esriRestLink,
@@ -37199,7 +37527,7 @@ class ChartComponent {
             labels: this.getDataProxy(this.labelProperty),
             datasets: [
                 {
-                    label: this.valueProperty,
+                    label: this.prettyLabel,
                     data,
                 },
             ],
@@ -37309,7 +37637,7 @@ class ChartComponent {
         this.chart = this.createChart();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChartComponent, isStandalone: true, selector: "gn-ui-chart", inputs: { data: "data", labelProperty: "labelProperty", valueProperty: "valueProperty", secondaryValueProperty: "secondaryValueProperty", type: "type" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"h-full flex justify-center items-center p-1\">\n  <canvas #chartCanvas></canvas>\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChartComponent, isStandalone: true, selector: "gn-ui-chart", inputs: { data: "data", labelProperty: "labelProperty", prettyLabel: "prettyLabel", valueProperty: "valueProperty", secondaryValueProperty: "secondaryValueProperty", type: "type" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["chartCanvas"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"h-full flex justify-center items-center p-1\">\n  <canvas #chartCanvas></canvas>\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
@@ -37318,6 +37646,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], labelProperty: [{
                 type: Input
+            }], prettyLabel: [{
+                type: Input
             }], valueProperty: [{
                 type: Input
             }], secondaryValueProperty: [{
@@ -37398,17 +37728,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 const rowIdPrefix = 'table-item-';
 class DataTableComponent {
+    set featureAttributes(value) {
+        this._featureAttributes = value;
+        this.properties$.next(value.map((attr) => attr.value));
+    }
     set dataset(value) {
-        this.properties$.next(null);
         this.dataset_ = value;
         this.dataset_.load();
-        this.dataset_.properties.then((properties) => this.properties$.next(properties.map((p) => p.name)));
         this.dataset_.info.then((info) => (this.count = info.itemsCount));
     }
     constructor(eltRef, cdr, translateService) {
         this.eltRef = eltRef;
         this.cdr = cdr;
         this.translateService = translateService;
+        this._featureAttributes = [];
         this.selected = new EventEmitter();
         this.properties$ = new BehaviorSubject(null);
         this.loading$ = new BehaviorSubject(false);
@@ -37481,7 +37814,7 @@ class DataTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ElementRef }, { 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: DataTableComponent, isStandalone: true, selector: "gn-ui-data-table", inputs: { dataset: "dataset", activeId: "activeId" }, outputs: { selected: "selected" }, providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col border border-gray-300 rounded-lg bg-white h-full\">\n  <div class=\"flex-1 overflow-y-hidden overflow-x-auto rounded-lg relative\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"setSort($event)\"\n      [matSortDisableClear]=\"true\"\n      *ngrxLet=\"properties$ as properties\"\n    >\n      <ng-container *ngFor=\"let prop of properties\" [matColumnDef]=\"prop\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          class=\"text-sm text-black bg-white\"\n        >\n          {{ prop }}\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let element\"\n          class=\"whitespace-nowrap pr-1 truncate\"\n        >\n          {{ element[prop] }}\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"properties; sticky: true\"></tr>\n      <tr\n        [id]=\"getRowEltId(row.id)\"\n        mat-row\n        *matRowDef=\"let row; columns: properties\"\n        (click)=\"selected.emit(row)\"\n        [class.active]=\"\n          activeId !== undefined && activeId !== null && row.id === activeId\n        \"\n      ></tr>\n    </table>\n    <gn-ui-loading-mask\n      *ngIf=\"loading$ | async\"\n      class=\"sticky inset-0\"\n      [message]=\"'table.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 z-[100]\"\n    >\n      <span translate>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n  <div class=\"flex justify-between items-center overflow-hidden\">\n    <div class=\"text-gray-900 px-4 py-2 text-sm\">\n      <span class=\"count font-extrabold text-primary\">{{ count }}</span\n      >&nbsp;<span translate>table.object.count</span>.\n    </div>\n\n    <mat-paginator\n      class=\"my-[-16px]\"\n      (page)=\"setPagination()\"\n      [length]=\"count\"\n      [pageSize]=\"10\"\n      [showFirstLastButtons]=\"true\"\n      [hidePageSize]=\"true\"\n    ></mat-paginator>\n  </div>\n</div>\n", styles: ["table{width:100%;background:#fff}th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding-right:20px}tr.mat-mdc-row,tr.mat-mdc-footer-row{height:36px}tr:hover{background:#f5f5f5}tr.mat-mdc-header-row{height:48px}[mat-header-cell]{color:#0000008a;font-size:12px;font-weight:500}tr{cursor:pointer}.active .mat-mdc-cell{color:var(--color-primary)}.mat-mdc-paginator{background:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataTableComponent, isStandalone: true, selector: "gn-ui-data-table", inputs: { featureAttributes: "featureAttributes", dataset: "dataset", activeId: "activeId" }, outputs: { selected: "selected" }, providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col border border-gray-300 rounded-lg bg-white h-full\">\n  <div class=\"flex-1 overflow-y-hidden overflow-x-auto rounded-lg relative\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"setSort($event)\"\n      [matSortDisableClear]=\"true\"\n      *ngrxLet=\"properties$ as properties\"\n    >\n      <ng-container\n        *ngFor=\"let attr of _featureAttributes\"\n        [matColumnDef]=\"attr.value\"\n      >\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          class=\"text-sm text-black bg-white\"\n        >\n          {{ attr.label }}\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let element\"\n          class=\"whitespace-nowrap pr-1 truncate\"\n        >\n          {{ element[attr.value] }}\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"properties; sticky: true\"></tr>\n      <tr\n        [id]=\"getRowEltId(row.id)\"\n        mat-row\n        *matRowDef=\"let row; columns: properties\"\n        (click)=\"selected.emit(row)\"\n        [class.active]=\"\n          activeId !== undefined && activeId !== null && row.id === activeId\n        \"\n      ></tr>\n    </table>\n    <gn-ui-loading-mask\n      *ngIf=\"loading$ | async\"\n      class=\"sticky inset-0\"\n      [message]=\"'table.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 z-[100]\"\n    >\n      <span translate>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n  <div class=\"flex justify-between items-center overflow-hidden\">\n    <div class=\"text-gray-900 px-4 py-2 text-sm\">\n      <span class=\"count font-extrabold text-primary\">{{ count }}</span\n      >&nbsp;<span translate>table.object.count</span>.\n    </div>\n\n    <mat-paginator\n      class=\"my-[-16px]\"\n      (page)=\"setPagination()\"\n      [length]=\"count\"\n      [pageSize]=\"10\"\n      [showFirstLastButtons]=\"true\"\n      [hidePageSize]=\"true\"\n    ></mat-paginator>\n  </div>\n</div>\n", styles: ["table{width:100%;background:#fff}th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding-right:20px}tr.mat-mdc-row,tr.mat-mdc-footer-row{height:36px}tr:hover{background:#f5f5f5}tr.mat-mdc-header-row{height:48px}[mat-header-cell]{color:#0000008a;font-size:12px;font-weight:500}tr{cursor:pointer}.active .mat-mdc-cell{color:var(--color-primary)}.mat-mdc-paginator{background:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i2$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i2$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i2$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i2$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i2$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i2$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i2$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i2$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i2$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i2$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -37495,8 +37828,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LoadingMaskComponent,
                         PopupAlertComponent,
                         LetDirective,
-                    ], providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }], selector: 'gn-ui-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col border border-gray-300 rounded-lg bg-white h-full\">\n  <div class=\"flex-1 overflow-y-hidden overflow-x-auto rounded-lg relative\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"setSort($event)\"\n      [matSortDisableClear]=\"true\"\n      *ngrxLet=\"properties$ as properties\"\n    >\n      <ng-container *ngFor=\"let prop of properties\" [matColumnDef]=\"prop\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          class=\"text-sm text-black bg-white\"\n        >\n          {{ prop }}\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let element\"\n          class=\"whitespace-nowrap pr-1 truncate\"\n        >\n          {{ element[prop] }}\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"properties; sticky: true\"></tr>\n      <tr\n        [id]=\"getRowEltId(row.id)\"\n        mat-row\n        *matRowDef=\"let row; columns: properties\"\n        (click)=\"selected.emit(row)\"\n        [class.active]=\"\n          activeId !== undefined && activeId !== null && row.id === activeId\n        \"\n      ></tr>\n    </table>\n    <gn-ui-loading-mask\n      *ngIf=\"loading$ | async\"\n      class=\"sticky inset-0\"\n      [message]=\"'table.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 z-[100]\"\n    >\n      <span translate>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n  <div class=\"flex justify-between items-center overflow-hidden\">\n    <div class=\"text-gray-900 px-4 py-2 text-sm\">\n      <span class=\"count font-extrabold text-primary\">{{ count }}</span\n      >&nbsp;<span translate>table.object.count</span>.\n    </div>\n\n    <mat-paginator\n      class=\"my-[-16px]\"\n      (page)=\"setPagination()\"\n      [length]=\"count\"\n      [pageSize]=\"10\"\n      [showFirstLastButtons]=\"true\"\n      [hidePageSize]=\"true\"\n    ></mat-paginator>\n  </div>\n</div>\n", styles: ["table{width:100%;background:#fff}th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding-right:20px}tr.mat-mdc-row,tr.mat-mdc-footer-row{height:36px}tr:hover{background:#f5f5f5}tr.mat-mdc-header-row{height:48px}[mat-header-cell]{color:#0000008a;font-size:12px;font-weight:500}tr{cursor:pointer}.active .mat-mdc-cell{color:var(--color-primary)}.mat-mdc-paginator{background:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }], propDecorators: { dataset: [{
+                    ], providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }], selector: 'gn-ui-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col border border-gray-300 rounded-lg bg-white h-full\">\n  <div class=\"flex-1 overflow-y-hidden overflow-x-auto rounded-lg relative\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"setSort($event)\"\n      [matSortDisableClear]=\"true\"\n      *ngrxLet=\"properties$ as properties\"\n    >\n      <ng-container\n        *ngFor=\"let attr of _featureAttributes\"\n        [matColumnDef]=\"attr.value\"\n      >\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          class=\"text-sm text-black bg-white\"\n        >\n          {{ attr.label }}\n        </th>\n        <td\n          mat-cell\n          *matCellDef=\"let element\"\n          class=\"whitespace-nowrap pr-1 truncate\"\n        >\n          {{ element[attr.value] }}\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"properties; sticky: true\"></tr>\n      <tr\n        [id]=\"getRowEltId(row.id)\"\n        mat-row\n        *matRowDef=\"let row; columns: properties\"\n        (click)=\"selected.emit(row)\"\n        [class.active]=\"\n          activeId !== undefined && activeId !== null && row.id === activeId\n        \"\n      ></tr>\n    </table>\n    <gn-ui-loading-mask\n      *ngIf=\"loading$ | async\"\n      class=\"sticky inset-0\"\n      [message]=\"'table.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 z-[100]\"\n    >\n      <span translate>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n  <div class=\"flex justify-between items-center overflow-hidden\">\n    <div class=\"text-gray-900 px-4 py-2 text-sm\">\n      <span class=\"count font-extrabold text-primary\">{{ count }}</span\n      >&nbsp;<span translate>table.object.count</span>.\n    </div>\n\n    <mat-paginator\n      class=\"my-[-16px]\"\n      (page)=\"setPagination()\"\n      [length]=\"count\"\n      [pageSize]=\"10\"\n      [showFirstLastButtons]=\"true\"\n      [hidePageSize]=\"true\"\n    ></mat-paginator>\n  </div>\n</div>\n", styles: ["table{width:100%;background:#fff}th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding-right:20px}tr.mat-mdc-row,tr.mat-mdc-footer-row{height:36px}tr:hover{background:#f5f5f5}tr.mat-mdc-header-row{height:48px}[mat-header-cell]{color:#0000008a;font-size:12px;font-weight:500}tr{cursor:pointer}.active .mat-mdc-cell{color:var(--color-primary)}.mat-mdc-paginator{background:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }], propDecorators: { featureAttributes: [{
+                type: Input
+            }], dataset: [{
                 type: Input
             }], activeId: [{
                 type: Input
@@ -37603,8 +37938,14 @@ marker('chart.aggregation.min');
 marker('chart.aggregation.average');
 marker('chart.aggregation.count');
 class ChartViewComponent {
+    set featureCatalog(value) {
+        this.featureCatalog$.next(value);
+    }
     set link(value) {
         this.currentLink$.next(value);
+        if (value) {
+            this.aggregation$.next('sum');
+        }
     }
     set aggregation(value) {
         this.aggregation$.next(value);
@@ -37647,6 +37988,7 @@ class ChartViewComponent {
         this.dataService = dataService;
         this.changeDetector = changeDetector;
         this.translateService = translateService;
+        this.featureCatalog$ = new BehaviorSubject(null);
         this.cacheActive = true;
         this.currentLink$ = new BehaviorSubject(null);
         this.aggregation$ = new BehaviorSubject('sum');
@@ -37686,10 +38028,7 @@ class ChartViewComponent {
                 return EMPTY;
             }));
         }), shareReplay(1));
-        this.properties$ = this.dataset$.pipe(switchMap$1((dataset) => dataset.properties.catch((error) => {
-            this.handleError(error);
-            return [];
-        })), shareReplay(1));
+        this.properties$ = combineLatest([this.dataset$, this.featureCatalog$]).pipe(switchMap$1(([dataset, catalog]) => this.setProperties(dataset, catalog)), shareReplay(1));
         this.yChoices$ = this.properties$.pipe(map$1((properties) => properties
             .filter((prop) => prop.type === 'number' || prop.type === 'date')
             .map((prop) => ({ value: prop.name, label: prop.label || prop.name }))), tap$1((choices) => {
@@ -37716,7 +38055,7 @@ class ChartViewComponent {
             this.xProperty$.pipe(filter((value) => value !== undefined)),
             this.yProperty$.pipe(filter((value) => value !== undefined)),
             this.aggregation$,
-        ]).pipe(switchMap$1(([dataset, xProp, yProp, aggregation]) => {
+        ]).pipe(filter(([_, x, y]) => !!x || !!y), switchMap$1(([dataset, xProp, yProp, aggregation]) => {
             const fieldAgg = aggregation === 'count' ? ['count'] : [aggregation, yProp];
             return dataset
                 .groupBy(['distinct', xProp])
@@ -37730,6 +38069,36 @@ class ChartViewComponent {
                 this.loading = false;
             });
         }), map$1(getJsonDataItemsProxy), startWith([]), shareReplay(1));
+        this.prettyLabel$ = combineLatest([
+            this.aggregation$,
+            this.properties$,
+            this.yProperty$,
+        ]).pipe(map$1(([aggregation, properties, yProperty]) => {
+            if (aggregation === 'count')
+                return 'count()';
+            const prop = properties.find((p) => p.name === yProperty);
+            return prop ? `${aggregation}(${prop.label})` : '';
+        }));
+    }
+    setProperties(dataset, catalog) {
+        return dataset.properties
+            .then((properties) => {
+            return properties.map((p) => {
+                if (catalog) {
+                    const featureAttributes = catalog?.featureTypes[0]?.attributes ?? [];
+                    const matchingAttribute = featureAttributes.find((attr) => attr.name === p.label);
+                    if (matchingAttribute?.code) {
+                        return { ...p, label: matchingAttribute.code };
+                    }
+                    return p;
+                }
+                return p;
+            });
+        })
+            .catch((error) => {
+            this.handleError(error);
+            return [];
+        });
     }
     handleError(error) {
         if (error instanceof FetchError) {
@@ -37750,7 +38119,7 @@ class ChartViewComponent {
         this.changeDetector.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChartViewComponent, deps: [{ 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: ChartViewComponent, isStandalone: true, selector: "gn-ui-chart-view", inputs: { cacheActive: "cacheActive", link: "link", aggregation: "aggregation", xProperty: "xProperty", yProperty: "yProperty", chartType: "chartType" }, outputs: { chartConfig$: "chartConfig$" }, ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\">\n  <div\n    class=\"flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2 justify-between text-[13px]\"\n  >\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"typeChoices\"\n      [extraBtnClass]=\"'secondary min-w-full'\"\n      (selectValue)=\"chartType$.next($event)\"\n      [selected]=\"chartType$.value\"\n      [title]=\"'chart.dropdown.type' | translate\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"xChoices$ | async\"\n      [extraBtnClass]=\"'secondary min-w-full'\"\n      (selectValue)=\"xProperty$.next($event)\"\n      [selected]=\"xProperty$.value\"\n      [title]=\"'chart.dropdown.xProperty' | translate\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      *ngIf=\"!isCountAggregation\"\n      [choices]=\"yChoices$ | async\"\n      (selectValue)=\"yProperty$.next($event)\"\n      [selected]=\"yProperty$.value\"\n      [title]=\"'chart.dropdown.yProperty' | translate\"\n      class=\"select-y-prop\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"aggregationChoices\"\n      class=\"aggregation-choices\"\n      (selectValue)=\"aggregation$.next($event)\"\n      [selected]=\"aggregation$.value\"\n      [title]=\"'chart.dropdown.aggregation' | translate\"\n    ></gn-ui-dropdown-selector>\n  </div>\n  <div\n    class=\"relative h-full mt-2 bg-white border border-gray-300 rounded-lg overflow-hidden\"\n  >\n    <gn-ui-chart\n      *ngIf=\"!error\"\n      [data]=\"chartData$ | async\"\n      [type]=\"chartType$.value\"\n      [labelProperty]=\"labelProperty\"\n      [valueProperty]=\"valueProperty\"\n    ></gn-ui-chart>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'chart.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>{{ error }}</span>\n    </gn-ui-popup-alert>\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: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: ChartComponent, selector: "gn-ui-chart", inputs: ["data", "labelProperty", "valueProperty", "secondaryValueProperty", "type"] }, { kind: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChartViewComponent, isStandalone: true, selector: "gn-ui-chart-view", inputs: { featureCatalog: "featureCatalog", cacheActive: "cacheActive", link: "link", aggregation: "aggregation", xProperty: "xProperty", yProperty: "yProperty", chartType: "chartType" }, outputs: { chartConfig$: "chartConfig$" }, ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\">\n  <div\n    class=\"flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2 justify-between text-[13px]\"\n  >\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"typeChoices\"\n      [extraBtnClass]=\"'secondary min-w-full'\"\n      (selectValue)=\"chartType$.next($event)\"\n      [selected]=\"chartType$.value\"\n      [title]=\"'chart.dropdown.type' | translate\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"xChoices$ | async\"\n      [extraBtnClass]=\"'secondary min-w-full'\"\n      (selectValue)=\"xProperty$.next($event)\"\n      [selected]=\"xProperty$.value\"\n      [title]=\"'chart.dropdown.xProperty' | translate\"\n    ></gn-ui-dropdown-selector>\n    <ng-container *ngIf=\"yChoices$ | async as yChoices\">\n      <gn-ui-dropdown-selector\n        class=\"basis-1/4\"\n        *ngIf=\"!isCountAggregation\"\n        [choices]=\"yChoices\"\n        (selectValue)=\"yProperty$.next($event)\"\n        [selected]=\"yProperty$.value\"\n        [title]=\"'chart.dropdown.yProperty' | translate\"\n        class=\"select-y-prop\"\n      ></gn-ui-dropdown-selector>\n    </ng-container>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"aggregationChoices\"\n      class=\"aggregation-choices\"\n      (selectValue)=\"aggregation$.next($event)\"\n      [selected]=\"aggregation$.value\"\n      [title]=\"'chart.dropdown.aggregation' | translate\"\n    ></gn-ui-dropdown-selector>\n  </div>\n  <div\n    class=\"relative h-full mt-2 bg-white border border-gray-300 rounded-lg overflow-hidden\"\n  >\n    <gn-ui-chart\n      *ngIf=\"!error\"\n      [data]=\"chartData$ | async\"\n      [type]=\"chartType$.value\"\n      [prettyLabel]=\"prettyLabel$ | async\"\n      [labelProperty]=\"labelProperty\"\n      [valueProperty]=\"valueProperty\"\n    ></gn-ui-chart>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'chart.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>{{ error }}</span>\n    </gn-ui-popup-alert>\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: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "component", type: ChartComponent, selector: "gn-ui-chart", inputs: ["data", "labelProperty", "prettyLabel", "valueProperty", "secondaryValueProperty", "type"] }, { kind: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChartViewComponent, decorators: [{
             type: Component,
@@ -37761,8 +38130,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ChartComponent,
                         LoadingMaskComponent,
                         PopupAlertComponent,
-                    ], standalone: true, template: "<div class=\"w-full h-full flex flex-col\">\n  <div\n    class=\"flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2 justify-between text-[13px]\"\n  >\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"typeChoices\"\n      [extraBtnClass]=\"'secondary min-w-full'\"\n      (selectValue)=\"chartType$.next($event)\"\n      [selected]=\"chartType$.value\"\n      [title]=\"'chart.dropdown.type' | translate\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"xChoices$ | async\"\n      [extraBtnClass]=\"'secondary min-w-full'\"\n      (selectValue)=\"xProperty$.next($event)\"\n      [selected]=\"xProperty$.value\"\n      [title]=\"'chart.dropdown.xProperty' | translate\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      *ngIf=\"!isCountAggregation\"\n      [choices]=\"yChoices$ | async\"\n      (selectValue)=\"yProperty$.next($event)\"\n      [selected]=\"yProperty$.value\"\n      [title]=\"'chart.dropdown.yProperty' | translate\"\n      class=\"select-y-prop\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"aggregationChoices\"\n      class=\"aggregation-choices\"\n      (selectValue)=\"aggregation$.next($event)\"\n      [selected]=\"aggregation$.value\"\n      [title]=\"'chart.dropdown.aggregation' | translate\"\n    ></gn-ui-dropdown-selector>\n  </div>\n  <div\n    class=\"relative h-full mt-2 bg-white border border-gray-300 rounded-lg overflow-hidden\"\n  >\n    <gn-ui-chart\n      *ngIf=\"!error\"\n      [data]=\"chartData$ | async\"\n      [type]=\"chartType$.value\"\n      [labelProperty]=\"labelProperty\"\n      [valueProperty]=\"valueProperty\"\n    ></gn-ui-chart>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'chart.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>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: DataService }, { type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }], propDecorators: { cacheActive: [{
+                    ], standalone: true, template: "<div class=\"w-full h-full flex flex-col\">\n  <div\n    class=\"flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2 justify-between text-[13px]\"\n  >\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"typeChoices\"\n      [extraBtnClass]=\"'secondary min-w-full'\"\n      (selectValue)=\"chartType$.next($event)\"\n      [selected]=\"chartType$.value\"\n      [title]=\"'chart.dropdown.type' | translate\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"xChoices$ | async\"\n      [extraBtnClass]=\"'secondary min-w-full'\"\n      (selectValue)=\"xProperty$.next($event)\"\n      [selected]=\"xProperty$.value\"\n      [title]=\"'chart.dropdown.xProperty' | translate\"\n    ></gn-ui-dropdown-selector>\n    <ng-container *ngIf=\"yChoices$ | async as yChoices\">\n      <gn-ui-dropdown-selector\n        class=\"basis-1/4\"\n        *ngIf=\"!isCountAggregation\"\n        [choices]=\"yChoices\"\n        (selectValue)=\"yProperty$.next($event)\"\n        [selected]=\"yProperty$.value\"\n        [title]=\"'chart.dropdown.yProperty' | translate\"\n        class=\"select-y-prop\"\n      ></gn-ui-dropdown-selector>\n    </ng-container>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"aggregationChoices\"\n      class=\"aggregation-choices\"\n      (selectValue)=\"aggregation$.next($event)\"\n      [selected]=\"aggregation$.value\"\n      [title]=\"'chart.dropdown.aggregation' | translate\"\n    ></gn-ui-dropdown-selector>\n  </div>\n  <div\n    class=\"relative h-full mt-2 bg-white border border-gray-300 rounded-lg overflow-hidden\"\n  >\n    <gn-ui-chart\n      *ngIf=\"!error\"\n      [data]=\"chartData$ | async\"\n      [type]=\"chartType$.value\"\n      [prettyLabel]=\"prettyLabel$ | async\"\n      [labelProperty]=\"labelProperty\"\n      [valueProperty]=\"valueProperty\"\n    ></gn-ui-chart>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'chart.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>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: DataService }, { type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }], propDecorators: { featureCatalog: [{
+                type: Input
+            }], cacheActive: [{
                 type: Input
             }], link: [{
                 type: Input
@@ -37915,7 +38286,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"] }, { kind: "component", type: DataTableComponent, selector: "gn-ui-data-table", inputs: ["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", "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GeoTableViewComponent, decorators: [{
             type: Component,
@@ -37937,6 +38308,7 @@ class TableViewComponent {
     constructor(dataService, translateService) {
         this.dataService = dataService;
         this.translateService = translateService;
+        this.featureAttributes = [];
         this.cacheActive = true;
         this.currentLink$ = new BehaviorSubject(null);
         this.loading = false;
@@ -37950,7 +38322,7 @@ class TableViewComponent {
                 return of([]);
             }
             this.loading = true;
-            return this.getDatasetReader(link).pipe(catchError((error) => {
+            return this.getDatasetReader(link).pipe(tap$1((dataset) => this.setProperties(dataset)), catchError((error) => {
                 this.handleError(error);
                 return of(undefined);
             }), finalize(() => {
@@ -37981,8 +38353,24 @@ class TableViewComponent {
         }
         this.loading = false;
     }
+    setProperties(dataset) {
+        dataset.properties.then((properties) => {
+            const updatedProperties = properties.map((p) => {
+                let label = p.name;
+                if (this.featureCatalog) {
+                    const attributes = this.featureCatalog.featureTypes[0].attributes;
+                    const matchingAttribute = attributes.find((attr) => attr.name === p.name);
+                    if (matchingAttribute && matchingAttribute.code) {
+                        label = matchingAttribute.code;
+                    }
+                }
+                return { value: p.name, label };
+            });
+            this.featureAttributes = updatedProperties;
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableViewComponent, deps: [{ token: DataService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableViewComponent, isStandalone: true, selector: "gn-ui-table-view", inputs: { cacheActive: "cacheActive", link: "link" }, ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\">\n  <div class=\"relative h-full\">\n    <gn-ui-data-table\n      *ngIf=\"tableData$ | async as dataset\"\n      class=\"overflow-auto grow\"\n      [dataset]=\"dataset\"\n      (selected)=\"onTableSelect($event)\"\n    ></gn-ui-data-table>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'table.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <ng-content *ngIf=\"error\">\n      <div class=\"border border-gray-300 rounded-lg bg-white h-full\"></div>\n      <gn-ui-popup-alert\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    </ng-content>\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: DataTableComponent, selector: "gn-ui-data-table", inputs: ["dataset", "activeId"], outputs: ["selected"] }, { kind: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.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: TableViewComponent, isStandalone: true, selector: "gn-ui-table-view", inputs: { featureCatalog: "featureCatalog", cacheActive: "cacheActive", link: "link" }, ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\">\n  <div class=\"relative h-full\">\n    <gn-ui-data-table\n      *ngIf=\"tableData$ | async as dataset\"\n      class=\"overflow-auto grow\"\n      [dataset]=\"dataset\"\n      [featureAttributes]=\"featureAttributes\"\n      (selected)=\"onTableSelect($event)\"\n    ></gn-ui-data-table>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'table.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <ng-content *ngIf=\"error\">\n      <div class=\"border border-gray-300 rounded-lg bg-white h-full\"></div>\n      <gn-ui-popup-alert\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    </ng-content>\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: DataTableComponent, selector: "gn-ui-data-table", inputs: ["featureAttributes", "dataset", "activeId"], outputs: ["selected"] }, { kind: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.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: TableViewComponent, decorators: [{
             type: Component,
@@ -37992,8 +38380,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         LoadingMaskComponent,
                         PopupAlertComponent,
                         TranslateModule,
-                    ], standalone: true, template: "<div class=\"w-full h-full flex flex-col\">\n  <div class=\"relative h-full\">\n    <gn-ui-data-table\n      *ngIf=\"tableData$ | async as dataset\"\n      class=\"overflow-auto grow\"\n      [dataset]=\"dataset\"\n      (selected)=\"onTableSelect($event)\"\n    ></gn-ui-data-table>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'table.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <ng-content *ngIf=\"error\">\n      <div class=\"border border-gray-300 rounded-lg bg-white h-full\"></div>\n      <gn-ui-popup-alert\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    </ng-content>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: DataService }, { type: i1$1.TranslateService }], propDecorators: { cacheActive: [{
+                    ], standalone: true, template: "<div class=\"w-full h-full flex flex-col\">\n  <div class=\"relative h-full\">\n    <gn-ui-data-table\n      *ngIf=\"tableData$ | async as dataset\"\n      class=\"overflow-auto grow\"\n      [dataset]=\"dataset\"\n      [featureAttributes]=\"featureAttributes\"\n      (selected)=\"onTableSelect($event)\"\n    ></gn-ui-data-table>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'table.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <ng-content *ngIf=\"error\">\n      <div class=\"border border-gray-300 rounded-lg bg-white h-full\"></div>\n      <gn-ui-popup-alert\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    </ng-content>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: DataService }, { type: i1$1.TranslateService }], propDecorators: { featureCatalog: [{
+                type: Input
+            }], cacheActive: [{
                 type: Input
             }], link: [{
                 type: Input
@@ -38026,17 +38416,9 @@ class MdViewFacade {
         this.error$ = this.store.pipe(select(getMetadataError));
         this.related$ = this.store.pipe(select(getRelated));
         this.chartConfig$ = this.store.pipe(select(getChartConfig));
-        this.allLinks$ = this.metadata$.pipe(map$1((record) => ('onlineResources' in record ? record.onlineResources : [])));
-        this.apiLinks$ = this.allLinks$.pipe(map$1((links) => links
-            .filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
-            // Put links to IGN Géoplateforme first
-            .sort((dd1, dd2) => {
-            return dd2
-                .accessServiceProtocol === 'GPFDL'
-                ? 1
-                : undefined; // do not change the sorting otherwise
-        })));
-        this.mapApiLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.MAP_API))));
+        this.allLinks$ = this.metadata$.pipe(map$1((record) => 'onlineResources' in record ? record.onlineResources : []), shareReplay(1));
+        this.apiLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))), shareReplay(1));
+        this.mapApiLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.MAP_API))), shareReplay(1));
         this.downloadLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.DOWNLOAD))));
         this.dataLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.DATA))));
         this.geoDataLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.GEODATA))));
@@ -38095,6 +38477,12 @@ class MdViewFacade {
     loadUserFeedbacks(datasetUuid) {
         this.store.dispatch(loadUserFeedbacks({ datasetUuid }));
     }
+    /**
+     * loadFeatureCatalog
+     */
+    loadFeatureCatalog(metadata) {
+        this.store.dispatch(loadFeatureCatalog({ metadata }));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MdViewFacade, deps: [{ token: i1$3.Store }, { token: LinkClassifierService }, { token: AvatarServiceInterface }, { token: DataService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MdViewFacade }); }
 }
@@ -38147,12 +38535,12 @@ class MdViewEffects {
             }));
         })))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MdViewEffects, deps: [{ token: i1$c.Actions }, { token: RecordsRepositoryInterface }, { token: PlatformServiceInterface }, { token: i1$d.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MdViewEffects, deps: [{ token: i1$b.Actions }, { token: RecordsRepositoryInterface }, { token: PlatformServiceInterface }, { token: i1$c.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MdViewEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MdViewEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$c.Actions }, { type: RecordsRepositoryInterface }, { type: PlatformServiceInterface }, { type: i1$d.Router }] });
+        }], ctorParameters: () => [{ type: i1$b.Actions }, { type: RecordsRepositoryInterface }, { type: PlatformServiceInterface }, { type: i1$c.Router }] });
 
 class CatalogTitleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CatalogTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -38576,7 +38964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class FeatureRecordModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureRecordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FeatureRecordModule, imports: [CommonModule, i1$3.StoreFeatureModule, i1$c.EffectsFeatureModule, UiLayoutModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FeatureRecordModule, imports: [CommonModule, i1$3.StoreFeatureModule, i1$b.EffectsFeatureModule, UiLayoutModule,
             FeatureMapModule,
             FeatureCatalogModule,
             UiInputsModule,
@@ -38748,7 +39136,7 @@ class DataViewComponent {
             .subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataViewComponent, deps: [{ token: MdViewFacade }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataViewComponent, isStandalone: true, selector: "gn-ui-data-view", inputs: { mode: "mode", displaySource: "displaySource", exceedsLimit: "exceedsLimit" }, outputs: { chartConfig$: "chartConfig$" }, ngImport: i0, template: "<div class=\"w-full h-full flex flex-col gap-[13px]\">\n  <div\n    class=\"w-full py-4 px-5 bg-white border border-color-border rounded-lg mt-6\"\n  >\n    <gn-ui-dropdown-selector\n      *ngIf=\"dropdownChoices$ | async as choices\"\n      [ngClass]=\"{ hidden: !displaySource }\"\n      [title]=\"'table.select.data' | translate\"\n      class=\"h-[44px] w-full\"\n      extraBtnClass=\"font-sans font-bold\"\n      [choices]=\"choices\"\n      (selectValue)=\"selectLink($event)\"\n    ></gn-ui-dropdown-selector>\n  </div>\n  <ng-container *ngIf=\"hidePreview; else dataView\">\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 #dataView>\n    <div class=\"relative h-[460px]\">\n      <gn-ui-table-view\n        *ngIf=\"mode === 'table'\"\n        [cacheActive]=\"cacheActive$ | async\"\n        [link]=\"selectedLink$ | async\"\n      ></gn-ui-table-view>\n      <gn-ui-chart-view\n        *ngIf=\"mode === 'chart'\"\n        (chartConfig$)=\"setChartConfig($event)\"\n        [cacheActive]=\"cacheActive$ | async\"\n        [link]=\"selectedLink$ | async\"\n      ></gn-ui-chart-view>\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: TableViewComponent, selector: "gn-ui-table-view", inputs: ["cacheActive", "link"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ChartViewComponent, selector: "gn-ui-chart-view", inputs: ["cacheActive", "link", "aggregation", "xProperty", "yProperty", "chartType"], outputs: ["chartConfig$"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataViewComponent, isStandalone: true, selector: "gn-ui-data-view", inputs: { mode: "mode", displaySource: "displaySource", exceedsLimit: "exceedsLimit" }, outputs: { chartConfig$: "chartConfig$" }, ngImport: i0, template: "<div class=\"w-full h-full flex flex-col gap-[13px]\">\n  <div\n    class=\"w-full py-4 px-5 bg-white border border-color-border rounded-lg mt-6\"\n  >\n    <gn-ui-dropdown-selector\n      *ngIf=\"dropdownChoices$ | async as choices\"\n      [ngClass]=\"{ hidden: !displaySource }\"\n      [title]=\"'table.select.data' | translate\"\n      class=\"h-[44px] w-full\"\n      extraBtnClass=\"font-sans font-bold\"\n      [choices]=\"choices\"\n      (selectValue)=\"selectLink($event)\"\n    ></gn-ui-dropdown-selector>\n  </div>\n  <ng-container *ngIf=\"hidePreview; else dataView\">\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 #dataView>\n    <div class=\"relative h-[460px]\">\n      <gn-ui-table-view\n        *ngIf=\"mode === 'table'\"\n        [cacheActive]=\"cacheActive$ | async\"\n        [link]=\"selectedLink$ | async\"\n        [featureCatalog]=\"mdViewFacade.featureCatalog$ | async\"\n      ></gn-ui-table-view>\n      <gn-ui-chart-view\n        *ngIf=\"mode === 'chart'\"\n        (chartConfig$)=\"setChartConfig($event)\"\n        [cacheActive]=\"cacheActive$ | async\"\n        [link]=\"selectedLink$ | async\"\n        [featureCatalog]=\"mdViewFacade.featureCatalog$ | async\"\n      ></gn-ui-chart-view>\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: TableViewComponent, selector: "gn-ui-table-view", inputs: ["featureCatalog", "cacheActive", "link"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ChartViewComponent, selector: "gn-ui-chart-view", inputs: ["featureCatalog", "cacheActive", "link", "aggregation", "xProperty", "yProperty", "chartType"], outputs: ["chartConfig$"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataViewComponent, decorators: [{
             type: Component,
@@ -38759,7 +39147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TranslateModule,
                         ChartViewComponent,
                         PopupAlertComponent,
-                    ], template: "<div class=\"w-full h-full flex flex-col gap-[13px]\">\n  <div\n    class=\"w-full py-4 px-5 bg-white border border-color-border rounded-lg mt-6\"\n  >\n    <gn-ui-dropdown-selector\n      *ngIf=\"dropdownChoices$ | async as choices\"\n      [ngClass]=\"{ hidden: !displaySource }\"\n      [title]=\"'table.select.data' | translate\"\n      class=\"h-[44px] w-full\"\n      extraBtnClass=\"font-sans font-bold\"\n      [choices]=\"choices\"\n      (selectValue)=\"selectLink($event)\"\n    ></gn-ui-dropdown-selector>\n  </div>\n  <ng-container *ngIf=\"hidePreview; else dataView\">\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 #dataView>\n    <div class=\"relative h-[460px]\">\n      <gn-ui-table-view\n        *ngIf=\"mode === 'table'\"\n        [cacheActive]=\"cacheActive$ | async\"\n        [link]=\"selectedLink$ | async\"\n      ></gn-ui-table-view>\n      <gn-ui-chart-view\n        *ngIf=\"mode === 'chart'\"\n        (chartConfig$)=\"setChartConfig($event)\"\n        [cacheActive]=\"cacheActive$ | async\"\n        [link]=\"selectedLink$ | async\"\n      ></gn-ui-chart-view>\n    </div>\n  </ng-template>\n</div>\n" }]
+                    ], template: "<div class=\"w-full h-full flex flex-col gap-[13px]\">\n  <div\n    class=\"w-full py-4 px-5 bg-white border border-color-border rounded-lg mt-6\"\n  >\n    <gn-ui-dropdown-selector\n      *ngIf=\"dropdownChoices$ | async as choices\"\n      [ngClass]=\"{ hidden: !displaySource }\"\n      [title]=\"'table.select.data' | translate\"\n      class=\"h-[44px] w-full\"\n      extraBtnClass=\"font-sans font-bold\"\n      [choices]=\"choices\"\n      (selectValue)=\"selectLink($event)\"\n    ></gn-ui-dropdown-selector>\n  </div>\n  <ng-container *ngIf=\"hidePreview; else dataView\">\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 #dataView>\n    <div class=\"relative h-[460px]\">\n      <gn-ui-table-view\n        *ngIf=\"mode === 'table'\"\n        [cacheActive]=\"cacheActive$ | async\"\n        [link]=\"selectedLink$ | async\"\n        [featureCatalog]=\"mdViewFacade.featureCatalog$ | async\"\n      ></gn-ui-table-view>\n      <gn-ui-chart-view\n        *ngIf=\"mode === 'chart'\"\n        (chartConfig$)=\"setChartConfig($event)\"\n        [cacheActive]=\"cacheActive$ | async\"\n        [link]=\"selectedLink$ | async\"\n        [featureCatalog]=\"mdViewFacade.featureCatalog$ | async\"\n      ></gn-ui-chart-view>\n    </div>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: () => [{ type: MdViewFacade }], propDecorators: { mode: [{
                 type: Input
             }], displaySource: [{
@@ -38933,196 +39321,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-marker('map.dropdown.placeholder');
-marker('wfs.feature.limit');
-marker('dataset.error.restrictedAccess');
-class MapViewComponent {
-    set exceedsLimit(value) {
-        this.excludeWfs$.next(value);
-    }
-    toggleLegend() {
-        this.showLegend = !this.showLegend;
-    }
-    onLegendStatusChange(status) {
-        this.legendExists = status;
-    }
-    constructor(mdViewFacade, mapUtils, dataService, changeRef, translateService) {
-        this.mdViewFacade = mdViewFacade;
-        this.mapUtils = mapUtils;
-        this.dataService = dataService;
-        this.changeRef = changeRef;
-        this.translateService = translateService;
-        this.displaySource = true;
-        this.excludeWfs$ = new BehaviorSubject(false);
-        this.hidePreview = false;
-        this.showLegend = true;
-        this.legendExists = false;
-        this.compatibleMapLinks$ = combineLatest([
-            this.mdViewFacade.mapApiLinks$,
-            this.mdViewFacade.geoDataLinksWithGeometry$,
-        ]).pipe(map$1(([mapApiLinks, geoDataLinksWithGeometry]) => {
-            return [...mapApiLinks, ...geoDataLinksWithGeometry];
-        }));
-        this.dropdownChoices$ = this.compatibleMapLinks$.pipe(map$1((links) => links.length
-            ? links.map((link, index) => ({
-                label: getLinkLabel(link),
-                value: index,
-            }))
-            : [{ label: 'map.dropdown.placeholder', value: 0 }]));
-        this.selectedLinkIndex$ = new BehaviorSubject(0);
-        this.loading = false;
-        this.error = null;
-        this.selectedLink$ = combineLatest([
-            this.compatibleMapLinks$,
-            this.selectedLinkIndex$.pipe(distinctUntilChanged()),
-        ]).pipe(map$1(([links, index]) => links[index]));
-        this.currentLayers$ = combineLatest([this.selectedLink$, this.excludeWfs$]).pipe(switchMap$1(([link, excludeWfs]) => {
-            if (!link) {
-                return of([]);
-            }
-            if (excludeWfs && link.accessServiceProtocol === 'wfs') {
-                this.hidePreview = true;
-                return of([]);
-            }
-            this.hidePreview = false;
-            this.loading = true;
-            this.error = null;
-            if (link.accessRestricted) {
-                this.handleError('dataset.error.restrictedAccess');
-                return of([]);
-            }
-            return this.getLayerFromLink(link).pipe(map$1((layer) => [layer]), catchError((e) => {
-                this.handleError(e);
-                return of([]);
-            }), finalize(() => (this.loading = false)));
-        }));
-        this.mapContext$ = this.currentLayers$.pipe(switchMap$1((layers) => from(createViewFromLayer(layers[0])).pipe(catchError(() => of(null)), // could not zoom on the layer: use the record extent
-        map$1((view) => ({
-            layers,
-            view,
-        })), tap$1(() => {
-            this.resetSelection();
-        }))), startWith$1({
-            layers: [],
-            view: null,
-        }), withLatestFrom$1(this.mdViewFacade.metadata$), map$1(([context, metadata]) => {
-            if (context.view)
-                return context;
-            const extent = this.mapUtils.getRecordExtent(metadata);
-            const view = extent ? { extent } : null;
-            return {
-                ...context,
-                view,
-            };
-        }), shareReplay(1));
-    }
-    async ngAfterViewInit() {
-        const map = await this.mapContainer.openlayersMap;
-        prioritizePageScroll(map.getInteractions());
-    }
-    onMapFeatureSelect(features) {
-        this.resetSelection();
-        this.selection = features?.length > 0 && features[0];
-        if (this.selection) {
-            // FIXME: restore styling of selected feature
-            // this.selection.setStyle(this.selectionStyle)
-        }
-        this.changeRef.detectChanges();
-    }
-    onSourceLoadError(error) {
-        if (error.httpStatus === 403 || error.httpStatus === 401) {
-            this.error = this.translateService.instant(`dataset.error.forbidden`);
-        }
-        else {
-            this.error = this.translateService.instant(`dataset.error.http`, {
-                info: error.httpStatus,
-            });
-        }
-    }
-    resetSelection() {
-        if (this.selection) {
-            // FIXME: restore styling of selected feature
-            // this.selection.setStyle(null)
-        }
-        this.selection = null;
-    }
-    getLayerFromLink(link) {
-        if (link.type === 'service' && link.accessServiceProtocol === 'wms') {
-            return of({
-                url: link.url.toString(),
-                type: 'wms',
-                name: link.name,
-            });
-        }
-        else if (link.type === 'service' &&
-            link.accessServiceProtocol === 'wmts') {
-            return of({
-                url: link.url.toString(),
-                type: 'wmts',
-                name: link.name,
-            });
-        }
-        else if ((link.type === 'service' &&
-            (link.accessServiceProtocol === 'wfs' ||
-                link.accessServiceProtocol === 'esriRest' ||
-                link.accessServiceProtocol === 'ogcFeatures')) ||
-            link.type === 'download') {
-            const cacheActive = true; // TODO implement whether should be true or false
-            return this.dataService.readAsGeoJson(link, cacheActive).pipe(map$1((data) => ({
-                type: 'geojson',
-                data,
-            })));
-        }
-        return throwError(() => 'protocol not supported');
-    }
-    selectLinkToDisplay(link) {
-        this.selectedLinkIndex$.next(link);
-    }
-    handleError(error) {
-        if (error instanceof FetchError) {
-            this.error = this.translateService.instant(`dataset.error.${error.type}`, {
-                info: error.info,
-            });
-            console.warn(error.message);
-        }
-        else if (error instanceof Error) {
-            this.error = this.translateService.instant(error.message);
-            console.warn(error.stack || error);
-        }
-        else {
-            this.error = this.translateService.instant(error);
-            console.warn(error);
-        }
-        this.loading = false;
-        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", displaySource: "displaySource" }, 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 py-4 px-5 bg-white border border-color-border rounded-lg mt-6\"\n  >\n    <div class=\"grow min-w-0\">\n      <gn-ui-dropdown-selector\n        [ngClass]=\"{ hidden: !displaySource }\"\n        class=\"w-full\"\n        extraBtnClass=\"font-sans font-bold\"\n        [title]=\"'map.select.layer' | translate\"\n        [choices]=\"dropdownChoices$ | async\"\n        (selectValue)=\"selectLinkToDisplay($event)\"\n      ></gn-ui-dropdown-selector>\n    </div>\n    <div class=\"self-end\">\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 [feature]=\"selection\"></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\">Legend</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      >\n        Legend\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"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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 })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-map-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        CommonModule,
-                        DropdownSelectorComponent,
-                        MapContainerComponent,
-                        FeatureDetailComponent,
-                        PopupAlertComponent,
-                        TranslateModule,
-                        LoadingMaskComponent,
-                        NgIconComponent,
-                        ExternalViewerButtonComponent,
-                        ButtonComponent,
-                        MapLegendComponent,
-                    ], viewProviders: [provideIcons({ matClose })], template: "<div class=\"w-full h-full flex flex-col gap-[13px]\">\n  <div\n    class=\"flex py-4 px-5 bg-white border border-color-border rounded-lg mt-6\"\n  >\n    <div class=\"grow min-w-0\">\n      <gn-ui-dropdown-selector\n        [ngClass]=\"{ hidden: !displaySource }\"\n        class=\"w-full\"\n        extraBtnClass=\"font-sans font-bold\"\n        [title]=\"'map.select.layer' | translate\"\n        [choices]=\"dropdownChoices$ | async\"\n        (selectValue)=\"selectLinkToDisplay($event)\"\n      ></gn-ui-dropdown-selector>\n    </div>\n    <div class=\"self-end\">\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 [feature]=\"selection\"></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\">Legend</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      >\n        Legend\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" }]
-        }], ctorParameters: () => [{ type: MdViewFacade }, { type: MapUtilsService }, { type: DataService }, { type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }], propDecorators: { exceedsLimit: [{
-                type: Input
-            }], displaySource: [{
-                type: Input
-            }], mapContainer: [{
-                type: ViewChild,
-                args: ['mapContainer']
-            }] } });
-
 class GpfApiDlListItemComponent {
     constructor(http) {
         this.http = http;
@@ -39314,6 +39512,222 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+marker('map.dropdown.placeholder');
+marker('wfs.feature.limit');
+marker('dataset.error.restrictedAccess');
+class MapViewComponent {
+    set exceedsLimit(value) {
+        this.excludeWfs$.next(value);
+    }
+    toggleLegend() {
+        this.showLegend = !this.showLegend;
+    }
+    onLegendStatusChange(status) {
+        this.legendExists = status;
+    }
+    constructor(mdViewFacade, mapUtils, dataService, changeRef, translateService) {
+        this.mdViewFacade = mdViewFacade;
+        this.mapUtils = mapUtils;
+        this.dataService = dataService;
+        this.changeRef = changeRef;
+        this.translateService = translateService;
+        this.displaySource = true;
+        this.excludeWfs$ = new BehaviorSubject(false);
+        this.hidePreview = false;
+        this.showLegend = true;
+        this.legendExists = false;
+        this.compatibleMapLinks$ = combineLatest([
+            this.mdViewFacade.mapApiLinks$,
+            this.mdViewFacade.geoDataLinksWithGeometry$,
+        ]).pipe(switchMap$1(async ([mapApiLinks, geoDataLinksWithGeometry]) => {
+            // looking for TMS links to process
+            let processedMapApiLinks = await Promise.all(mapApiLinks.map((link) => {
+                if (link.type === 'service' && link.accessServiceProtocol === 'tms') {
+                    return this.dataService.getGeodataLinksFromTms(link);
+                }
+                return link;
+            }));
+            processedMapApiLinks = processedMapApiLinks.flat();
+            return [...processedMapApiLinks, ...geoDataLinksWithGeometry];
+        }), shareReplay(1));
+        this.dropdownChoices$ = this.compatibleMapLinks$.pipe(map$1((links) => links.length
+            ? links.map((link, index) => ({
+                label: getLinkLabel(link),
+                value: index,
+            }))
+            : [{ label: 'map.dropdown.placeholder', value: 0 }]));
+        this.selectedLinkIndex$ = new BehaviorSubject(0);
+        this.loading = false;
+        this.error = null;
+        this.selectedLink$ = combineLatest([
+            this.compatibleMapLinks$,
+            this.selectedLinkIndex$.pipe(distinctUntilChanged()),
+        ]).pipe(map$1(([links, index]) => links[index]));
+        this.currentLayers$ = combineLatest([this.selectedLink$, this.excludeWfs$]).pipe(switchMap$1(([link, excludeWfs]) => {
+            if (!link) {
+                return of([]);
+            }
+            if (excludeWfs && link.accessServiceProtocol === 'wfs') {
+                this.hidePreview = true;
+                return of([]);
+            }
+            this.hidePreview = false;
+            this.loading = true;
+            this.error = null;
+            if (link.accessRestricted) {
+                this.handleError('dataset.error.restrictedAccess');
+                return of([]);
+            }
+            return this.getLayerFromLink(link).pipe(map$1((layer) => [layer]), catchError((e) => {
+                this.handleError(e);
+                return of([]);
+            }), finalize(() => (this.loading = false)));
+        }));
+        this.mapContext$ = this.currentLayers$.pipe(switchMap$1((layers) => from(createViewFromLayer(layers[0])).pipe(catchError(() => of(null)), // could not zoom on the layer: use the record extent
+        map$1((view) => ({
+            layers,
+            view,
+        })), tap$1(() => {
+            this.resetSelection();
+        }))), startWith$1({
+            layers: [],
+            view: null,
+        }), withLatestFrom$1(this.mdViewFacade.metadata$), map$1(([context, metadata]) => {
+            if (context.view)
+                return context;
+            const extent = this.mapUtils.getRecordExtent(metadata);
+            const view = extent ? { extent } : null;
+            return {
+                ...context,
+                view,
+            };
+        }), shareReplay(1));
+    }
+    async ngAfterViewInit() {
+        const map = await this.mapContainer.openlayersMap;
+        prioritizePageScroll(map.getInteractions());
+    }
+    onMapFeatureSelect(features) {
+        this.resetSelection();
+        this.selection = features?.length > 0 && features[0];
+        if (this.selection) {
+            // FIXME: restore styling of selected feature
+            // this.selection.setStyle(this.selectionStyle)
+        }
+        this.changeRef.detectChanges();
+    }
+    onSourceLoadError(error) {
+        if (error.httpStatus === 403 || error.httpStatus === 401) {
+            this.error = this.translateService.instant(`dataset.error.forbidden`);
+        }
+        else {
+            this.error = this.translateService.instant(`dataset.error.http`, {
+                info: error.httpStatus,
+            });
+        }
+    }
+    resetSelection() {
+        if (this.selection) {
+            // FIXME: restore styling of selected feature
+            // this.selection.setStyle(null)
+        }
+        this.selection = null;
+    }
+    getLayerFromLink(link) {
+        if (link.type === 'service' && link.accessServiceProtocol === 'wms') {
+            return of({
+                url: link.url.toString(),
+                type: 'wms',
+                name: link.name,
+            });
+        }
+        else if (link.type === 'service' &&
+            link.accessServiceProtocol === 'tms') {
+            // FIXME: here we're assuming that the TMS serves vector tiles only; should be checked with ogc-client first
+            return of({
+                url: link.url.toString().replace(/\/?$/, '/{z}/{x}/{y}.pbf'),
+                type: 'xyz',
+                tileFormat: 'application/vnd.mapbox-vector-tile',
+                name: link.name,
+            });
+        }
+        else if (link.type === 'service' &&
+            link.accessServiceProtocol === 'maplibre-style') {
+            return of({
+                type: 'maplibre-style',
+                name: link.name,
+                styleUrl: link.url.toString(),
+            });
+        }
+        else if (link.type === 'service' &&
+            link.accessServiceProtocol === 'wmts') {
+            return of({
+                url: link.url.toString(),
+                type: 'wmts',
+                name: link.name,
+            });
+        }
+        else if ((link.type === 'service' &&
+            (link.accessServiceProtocol === 'wfs' ||
+                link.accessServiceProtocol === 'esriRest' ||
+                link.accessServiceProtocol === 'ogcFeatures')) ||
+            link.type === 'download') {
+            const cacheActive = true; // TODO implement whether should be true or false
+            return this.dataService.readAsGeoJson(link, cacheActive).pipe(map$1((data) => ({
+                type: 'geojson',
+                data,
+            })));
+        }
+        return throwError(() => 'protocol not supported');
+    }
+    selectLinkToDisplay(link) {
+        this.selectedLinkIndex$.next(link);
+    }
+    handleError(error) {
+        if (error instanceof FetchError) {
+            this.error = this.translateService.instant(`dataset.error.${error.type}`, {
+                info: error.info,
+            });
+            console.warn(error.message);
+        }
+        else if (error instanceof Error) {
+            this.error = this.translateService.instant(error.message);
+            console.warn(error.stack || error);
+        }
+        else {
+            this.error = this.translateService.instant(error);
+            console.warn(error);
+        }
+        this.loading = false;
+        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", displaySource: "displaySource" }, 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 py-4 px-5 bg-white border border-color-border rounded-lg mt-6\"\n  >\n    <div class=\"grow min-w-0\">\n      <gn-ui-dropdown-selector\n        [ngClass]=\"{ hidden: !displaySource }\"\n        class=\"w-full\"\n        extraBtnClass=\"font-sans font-bold\"\n        [title]=\"'map.select.layer' | translate\"\n        [choices]=\"dropdownChoices$ | async\"\n        (selectValue)=\"selectLinkToDisplay($event)\"\n      ></gn-ui-dropdown-selector>\n    </div>\n    <div class=\"self-end\">\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\">Legend</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      >\n        Legend\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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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 })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MapViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-map-view', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        DropdownSelectorComponent,
+                        MapContainerComponent,
+                        FeatureDetailComponent,
+                        PopupAlertComponent,
+                        TranslateModule,
+                        LoadingMaskComponent,
+                        NgIconComponent,
+                        ExternalViewerButtonComponent,
+                        ButtonComponent,
+                        MapLegendComponent,
+                    ], viewProviders: [provideIcons({ matClose })], template: "<div class=\"w-full h-full flex flex-col gap-[13px]\">\n  <div\n    class=\"flex py-4 px-5 bg-white border border-color-border rounded-lg mt-6\"\n  >\n    <div class=\"grow min-w-0\">\n      <gn-ui-dropdown-selector\n        [ngClass]=\"{ hidden: !displaySource }\"\n        class=\"w-full\"\n        extraBtnClass=\"font-sans font-bold\"\n        [title]=\"'map.select.layer' | translate\"\n        [choices]=\"dropdownChoices$ | async\"\n        (selectValue)=\"selectLinkToDisplay($event)\"\n      ></gn-ui-dropdown-selector>\n    </div>\n    <div class=\"self-end\">\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\">Legend</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      >\n        Legend\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" }]
+        }], ctorParameters: () => [{ type: MdViewFacade }, { type: MapUtilsService }, { type: DataService }, { type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }], propDecorators: { exceedsLimit: [{
+                type: Input
+            }], displaySource: [{
+                type: Input
+            }], mapContainer: [{
+                type: ViewChild,
+                args: ['mapContainer']
+            }] } });
+
 class RecordMetaComponent {
     constructor(meta) {
         this.meta = meta;
@@ -39340,7 +39754,7 @@ class RecordMetaComponent {
         this.meta.removeTag('property="og:url"');
         this.meta.removeTag('property="og:title"');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RecordMetaComponent, deps: [{ token: i1$e.Meta }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RecordMetaComponent, deps: [{ token: i1$d.Meta }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RecordMetaComponent, isStandalone: true, selector: "gn-ui-record-meta", inputs: { metadata: "metadata" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RecordMetaComponent, decorators: [{
@@ -39351,7 +39765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1$e.Meta }], propDecorators: { metadata: [{
+        }], ctorParameters: () => [{ type: i1$d.Meta }], propDecorators: { metadata: [{
                 type: Input
             }] } });
 
@@ -40151,7 +40565,7 @@ class WizardFieldComponent {
                 deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
             },
             { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
-        ], viewQueries: [{ propertyName: "searchText", first: true, predicate: ["searchText"], descendants: true }, { propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-1\">\n  <span [class]=\"wizardFieldConfig.icon + ' pr-10'\"></span>\n  <div class=\"flex flex-col flex-1\">\n    <div translate class=\"text-xl font-bold pb-1\">\n      {{ wizardFieldConfig.label }}\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.TEXT === wizardFieldConfig.type\"\n    >\n      <gn-ui-text-input\n        #searchText\n        [id]=\"wizardFieldConfig.id\"\n        [value]=\"wizardFieldData\"\n        [required]=\"wizardFieldConfig.required || false\"\n        placeholder=\"\"\n      ></gn-ui-text-input>\n    </div>\n    <div\n      class=\"h-32 w-11/12\"\n      *ngIf=\"wizardFieldType.TEXT_AREA === wizardFieldConfig.type\"\n    >\n      <gn-ui-text-area\n        #textArea\n        [id]=\"wizardFieldConfig.id\"\n        [value]=\"wizardFieldData\"\n        [required]=\"wizardFieldConfig.required || false\"\n        placeholder=\"\"\n      ></gn-ui-text-area>\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.DATA_PICKER === wizardFieldConfig.type\"\n    >\n      <input\n        [id]=\"wizardFieldConfig.id\"\n        type=\"text\"\n        (click)=\"datepicker.open()\"\n        class=\"rounded p-2 text-gray-700 w-full leading-tight focus:outline-none focus:border-primary\"\n        [value]=\"wizardFieldData\"\n        [matDatepicker]=\"datepicker\"\n        (dateChange)=\"onDateChange($event)\"\n      />\n      <mat-datepicker #datepicker></mat-datepicker>\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.DROPDOWN === wizardFieldConfig.type\"\n    >\n      <gn-ui-dropdown-selector\n        #dropdown\n        [id]=\"wizardFieldConfig.id\"\n        [title]=\"''\"\n        [extraBtnClass]=\"'secondary min-w-full'\"\n        [showTitle]=\"false\"\n        [choices]=\"dropdownChoices\"\n        [selected]=\"wizardFieldData\"\n        ariaName=\"search-sort-by\"\n      ></gn-ui-dropdown-selector>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex:1}gn-ui-text-input::ng-deep input,input[type=text]{height:100%;background:#fff;color:#000;font-style:italic;border-width:2px;border-color:var(--color-primary)}gn-ui-text-area::ng-deep textarea{border-width:2px;border-color:var(--color-primary)}gn-ui-dropdown-selector::ng-deep div{height:100%}gn-ui-dropdown-selector::ng-deep select{height:100%;border-width:2px;border-color:var(--color-primary);background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i1$8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "searchText", first: true, predicate: ["searchText"], descendants: true }, { propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-1\">\n  <span [class]=\"wizardFieldConfig.icon + ' pr-10'\"></span>\n  <div class=\"flex flex-col flex-1\">\n    <div translate class=\"text-xl font-bold pb-1\">\n      {{ wizardFieldConfig.label }}\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.TEXT === wizardFieldConfig.type\"\n    >\n      <gn-ui-text-input\n        #searchText\n        [id]=\"wizardFieldConfig.id\"\n        [value]=\"wizardFieldData\"\n        [required]=\"wizardFieldConfig.required || false\"\n        placeholder=\"\"\n      ></gn-ui-text-input>\n    </div>\n    <div\n      class=\"h-32 w-11/12\"\n      *ngIf=\"wizardFieldType.TEXT_AREA === wizardFieldConfig.type\"\n    >\n      <gn-ui-text-area\n        #textArea\n        [id]=\"wizardFieldConfig.id\"\n        [value]=\"wizardFieldData\"\n        [required]=\"wizardFieldConfig.required || false\"\n        placeholder=\"\"\n      ></gn-ui-text-area>\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.DATA_PICKER === wizardFieldConfig.type\"\n    >\n      <input\n        [id]=\"wizardFieldConfig.id\"\n        type=\"text\"\n        (click)=\"datepicker.open()\"\n        class=\"rounded p-2 text-gray-700 w-full leading-tight focus:outline-none focus:border-primary\"\n        [value]=\"wizardFieldData\"\n        [matDatepicker]=\"datepicker\"\n        (dateChange)=\"onDateChange($event)\"\n      />\n      <mat-datepicker #datepicker></mat-datepicker>\n    </div>\n    <div\n      class=\"w-1/2 h-12\"\n      *ngIf=\"wizardFieldType.DROPDOWN === wizardFieldConfig.type\"\n    >\n      <gn-ui-dropdown-selector\n        #dropdown\n        [id]=\"wizardFieldConfig.id\"\n        [title]=\"''\"\n        [extraBtnClass]=\"'secondary min-w-full'\"\n        [showTitle]=\"false\"\n        [choices]=\"dropdownChoices\"\n        [selected]=\"wizardFieldData\"\n        ariaName=\"search-sort-by\"\n      ></gn-ui-dropdown-selector>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex:1}gn-ui-text-input::ng-deep input,input[type=text]{height:100%;background:#fff;color:#000;font-style:italic;border-width:2px;border-color:var(--color-primary)}gn-ui-text-area::ng-deep textarea{border-width:2px;border-color:var(--color-primary)}gn-ui-dropdown-selector::ng-deep div{height:100%}gn-ui-dropdown-selector::ng-deep select{height:100%;border-width:2px;border-color:var(--color-primary);background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WizardFieldComponent, decorators: [{
             type: Component,
@@ -40297,7 +40711,7 @@ class FeatureEditorModule {
             MatNativeDateModule,
             MatFormFieldModule,
             HttpClientModule,
-            HttpClientXsrfModule, i1$3.StoreFeatureModule, i1$c.EffectsFeatureModule, TextInputComponent], exports: [WizardComponent, WizardSummarizeComponent] }); }
+            HttpClientXsrfModule, i1$3.StoreFeatureModule, i1$b.EffectsFeatureModule, TextInputComponent], exports: [WizardComponent, WizardSummarizeComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeatureEditorModule, providers: [EditorFacade, Gn4PlatformService], imports: [CommonModule,
             UiInputsModule,
             UiWidgetsModule,
@@ -40399,7 +40813,7 @@ class ImportRecordComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImportRecordComponent, deps: [{ token: i1$d.Router }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: NotificationsService }, { token: RecordsRepositoryInterface }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImportRecordComponent, deps: [{ token: i1$c.Router }, { token: i1$1.TranslateService }, { token: i0.ChangeDetectorRef }, { token: NotificationsService }, { token: RecordsRepositoryInterface }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImportRecordComponent, isStandalone: true, selector: "gn-ui-import-record", outputs: { closeImportMenu: "closeImportMenu" }, providers: [
             provideIcons({
                 iconoirImport,
@@ -40430,7 +40844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             size: '1.5em',
                         }),
                     ], template: "<ng-container [ngSwitch]=\"sectionDisplayed\">\n  <ng-container *ngSwitchCase=\"'mainMenu'\">\n    <div\n      data-test=\"importMenuMainSection\"\n      class=\"mt-2 border border-gray-100 p-2 flex items-center bg-white shadow-2xl rounded-2xl\"\n    >\n      <ul class=\"flex flex-col gap-2 w-full\">\n        <li *ngFor=\"let menuItem of importMenuItems\">\n          <gn-ui-button\n            [attr.data-test]=\"menuItem.dataTest\"\n            type=\"light\"\n            extraClass=\"flex flex-row items-center gap-2 w-full justify-start\"\n            (buttonClick)=\"menuItem.action()\"\n            [disabled]=\"menuItem.disabled\"\n            [title]=\"\n              (menuItem.disabled ? 'editor.temporary.disabled' : '') | translate\n            \"\n            ><ng-icon [name]=\"menuItem.icon\"></ng-icon\n            ><span>{{ menuItem.label }}</span></gn-ui-button\n          >\n        </li>\n      </ul>\n    </div>\n  </ng-container>\n  <ng-container *ngSwitchCase=\"'importExternalFile'\">\n    <div\n      data-test=\"importMenuImportExternalFileSection\"\n      class=\"p-6 flex flex-col gap-2 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl\"\n    >\n      <div class=\"flex flex-row items-center gap-2\">\n        <gn-ui-button\n          data-test=\"importMenuImportExternalFileSectionBackButton\"\n          type=\"light\"\n          (buttonClick)=\"displayMainMenu()\"\n        >\n          <ng-icon name=\"iconoirArrowLeft\"></ng-icon>\n        </gn-ui-button>\n        <span class=\"font-bold\" translate\n          >dashboard.importRecord.importExternal.title</span\n        >\n        <span translate>dashboard.importRecord.importExternal.subtitle</span>\n      </div>\n      <gn-ui-url-input\n        (uploadClick)=\"importRecord($event)\"\n        [disabled]=\"isRecordImportInProgress\"\n      ></gn-ui-url-input>\n    </div>\n  </ng-container>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i1$d.Router }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: NotificationsService }, { type: RecordsRepositoryInterface }], propDecorators: { closeImportMenu: [{
+        }], ctorParameters: () => [{ type: i1$c.Router }, { type: i1$1.TranslateService }, { type: i0.ChangeDetectorRef }, { type: NotificationsService }, { type: RecordsRepositoryInterface }], propDecorators: { closeImportMenu: [{
                 type: Output
             }] } });
 
@@ -41321,7 +41735,7 @@ class FormFieldOnlineLinkResourcesComponent {
             ]);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldOnlineLinkResourcesComponent, deps: [{ token: NotificationsService }, { token: i1$1.TranslateService }, { token: PlatformServiceInterface }, { token: i0.ChangeDetectorRef }, { token: i1$b.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldOnlineLinkResourcesComponent, deps: [{ token: NotificationsService }, { token: i1$1.TranslateService }, { token: PlatformServiceInterface }, { token: i0.ChangeDetectorRef }, { token: i1$a.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldOnlineLinkResourcesComponent, isStandalone: true, selector: "gn-ui-form-field-online-link-resources", inputs: { metadataUuid: "metadataUuid", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col\">\n  <gn-ui-file-input\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    (fileChange)=\"handleFileChange($event)\"\n    (uploadCancel)=\"handleUploadCancel()\"\n    [uploadProgress]=\"uploadProgress\"\n    (urlChange)=\"handleUrlChange($event)\"\n  ></gn-ui-file-input>\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-sortable-list\n    [items]=\"linkResources\"\n    (itemsOrderChange)=\"handleResourcesChange($event)\"\n    [elementTemplate]=\"template\"\n  >\n  </gn-ui-sortable-list>\n  <ng-template #template let-onlineResource let-index=\"index\">\n    <gn-ui-online-resource-card\n      [onlineResource]=\"onlineResource\"\n      (modifyClick)=\"handleResourceModify(onlineResource, index)\"\n    ></gn-ui-online-resource-card>\n  </ng-template>\n\n  <ng-template #dialogTemplate let-onlineResource>\n    <div class=\"flex flex-col gap-[16px]\">\n      <div>\n        <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n          editor.record.form.field.onlineResource.edit.title\n        </h3>\n        <gn-ui-text-input [(value)]=\"onlineResource.name\"></gn-ui-text-input>\n      </div>\n      <div>\n        <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n          editor.record.form.field.onlineResource.edit.description\n        </h3>\n        <gn-ui-text-area\n          [(value)]=\"onlineResource.description\"\n        ></gn-ui-text-area>\n      </div>\n      <span class=\"w-full border-b border-gray-300\"></span>\n      <gn-ui-url-input\n        class=\"w-full\"\n        [disabled]=\"true\"\n        [value]=\"onlineResource.url\"\n        [showValidateButton]=\"false\"\n      ></gn-ui-url-input>\n    </div>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: FileInputComponent, selector: "gn-ui-file-input", inputs: ["maxSizeMB", "uploadProgress", "disabled"], outputs: ["fileChange", "urlChange", "uploadCancel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: OnlineResourceCardComponent, selector: "gn-ui-online-resource-card", inputs: ["onlineResource"], outputs: ["modifyClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.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: FormFieldOnlineLinkResourcesComponent, decorators: [{
@@ -41336,7 +41750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         UrlInputComponent,
                         TranslateModule,
                     ], template: "<div class=\"flex flex-col\">\n  <gn-ui-file-input\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    (fileChange)=\"handleFileChange($event)\"\n    (uploadCancel)=\"handleUploadCancel()\"\n    [uploadProgress]=\"uploadProgress\"\n    (urlChange)=\"handleUrlChange($event)\"\n  ></gn-ui-file-input>\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-sortable-list\n    [items]=\"linkResources\"\n    (itemsOrderChange)=\"handleResourcesChange($event)\"\n    [elementTemplate]=\"template\"\n  >\n  </gn-ui-sortable-list>\n  <ng-template #template let-onlineResource let-index=\"index\">\n    <gn-ui-online-resource-card\n      [onlineResource]=\"onlineResource\"\n      (modifyClick)=\"handleResourceModify(onlineResource, index)\"\n    ></gn-ui-online-resource-card>\n  </ng-template>\n\n  <ng-template #dialogTemplate let-onlineResource>\n    <div class=\"flex flex-col gap-[16px]\">\n      <div>\n        <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n          editor.record.form.field.onlineResource.edit.title\n        </h3>\n        <gn-ui-text-input [(value)]=\"onlineResource.name\"></gn-ui-text-input>\n      </div>\n      <div>\n        <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n          editor.record.form.field.onlineResource.edit.description\n        </h3>\n        <gn-ui-text-area\n          [(value)]=\"onlineResource.description\"\n        ></gn-ui-text-area>\n      </div>\n      <span class=\"w-full border-b border-gray-300\"></span>\n      <gn-ui-url-input\n        class=\"w-full\"\n        [disabled]=\"true\"\n        [value]=\"onlineResource.url\"\n        [showValidateButton]=\"false\"\n      ></gn-ui-url-input>\n    </div>\n  </ng-template>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: NotificationsService }, { type: i1$1.TranslateService }, { type: PlatformServiceInterface }, { type: i0.ChangeDetectorRef }, { type: i1$b.MatDialog }], propDecorators: { metadataUuid: [{
+        }], ctorParameters: () => [{ type: NotificationsService }, { type: i1$1.TranslateService }, { type: PlatformServiceInterface }, { type: i0.ChangeDetectorRef }, { type: i1$a.MatDialog }], propDecorators: { metadataUuid: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -41468,7 +41882,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: i1$4.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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }], 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$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: i3.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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OnlineServiceResourceInputComponent, decorators: [{
             type: Component,
@@ -41636,7 +42050,7 @@ class FormFieldOnlineResourcesComponent {
             ]);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldOnlineResourcesComponent, deps: [{ token: NotificationsService }, { token: i1$1.TranslateService }, { token: PlatformServiceInterface }, { token: i0.ChangeDetectorRef }, { token: i1$b.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormFieldOnlineResourcesComponent, deps: [{ token: NotificationsService }, { token: i1$1.TranslateService }, { token: PlatformServiceInterface }, { token: i0.ChangeDetectorRef }, { token: i1$a.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormFieldOnlineResourcesComponent, isStandalone: true, selector: "gn-ui-form-field-online-resources", inputs: { metadataUuid: "metadataUuid", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col\">\n  <gn-ui-switch-toggle\n    [options]=\"typeOptions\"\n    (selectedValue)=\"onSelectedTypeChange($event.value)\"\n    extraClasses=\"grow text-sm\"\n    data-cy=\"online-resources-type\"\n  ></gn-ui-switch-toggle>\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-file-input\n    *ngIf=\"selectedType === 'download'\"\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    (fileChange)=\"handleFileChange($event)\"\n    (uploadCancel)=\"handleUploadCancel()\"\n    [uploadProgress]=\"uploadProgress\"\n    (urlChange)=\"handleDownloadUrlChange($event)\"\n  ></gn-ui-file-input>\n  <div\n    *ngIf=\"selectedType === 'service'\"\n    class=\"w-full border-2 border-dashed rounded-lg p-6 flex flex-col gap-[16px]\"\n  >\n    <gn-ui-online-service-resource-input\n      [service]=\"newService\"\n      (serviceChange)=\"handleServiceChange($event)\"\n    ></gn-ui-online-service-resource-input>\n  </div>\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-sortable-list\n    [items]=\"notLinkResources\"\n    (itemsOrderChange)=\"handleResourcesChange($event)\"\n    [elementTemplate]=\"template\"\n  >\n  </gn-ui-sortable-list>\n  <ng-template #template let-onlineResource let-index=\"index\">\n    <gn-ui-online-resource-card\n      [onlineResource]=\"onlineResource\"\n      (modifyClick)=\"handleResourceModify(onlineResource, index)\"\n    ></gn-ui-online-resource-card>\n  </ng-template>\n\n  <ng-template #dialogTemplate let-onlineResource>\n    <div class=\"flex flex-col gap-[16px]\">\n      <ng-container *ngIf=\"onlineResource.type === 'service'; else urlInput\">\n        <gn-ui-online-service-resource-input\n          [service]=\"onlineResource\"\n          [modifyMode]=\"true\"\n          [disabled]=\"true\"\n        ></gn-ui-online-service-resource-input>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.description\n          </h3>\n          <gn-ui-text-area\n            [(value)]=\"onlineResource.description\"\n          ></gn-ui-text-area>\n        </div>\n      </ng-container>\n      <ng-template #urlInput>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.title\n          </h3>\n          <gn-ui-text-input [(value)]=\"onlineResource.name\"></gn-ui-text-input>\n        </div>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.description\n          </h3>\n          <gn-ui-text-area\n            [(value)]=\"onlineResource.description\"\n          ></gn-ui-text-area>\n        </div>\n        <span class=\"w-full border-b border-gray-300\"></span>\n        <gn-ui-url-input\n          class=\"w-full\"\n          [disabled]=\"true\"\n          [value]=\"onlineResource.url\"\n          [showValidateButton]=\"false\"\n        ></gn-ui-url-input>\n      </ng-template>\n    </div>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SwitchToggleComponent, selector: "gn-ui-switch-toggle", inputs: ["options", "ariaLabel", "extraClasses", "disabled"], outputs: ["selectedValue"] }, { kind: "component", type: FileInputComponent, selector: "gn-ui-file-input", inputs: ["maxSizeMB", "uploadProgress", "disabled"], outputs: ["fileChange", "urlChange", "uploadCancel"] }, { kind: "component", type: OnlineServiceResourceInputComponent, selector: "gn-ui-online-service-resource-input", inputs: ["service", "protocolHint", "disabled", "modifyMode"], outputs: ["serviceChange"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: OnlineResourceCardComponent, selector: "gn-ui-online-resource-card", inputs: ["onlineResource"], outputs: ["modifyClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.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: FormFieldOnlineResourcesComponent, decorators: [{
@@ -41653,7 +42067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         TextAreaComponent,
                         TranslateModule,
                     ], template: "<div class=\"flex flex-col\">\n  <gn-ui-switch-toggle\n    [options]=\"typeOptions\"\n    (selectedValue)=\"onSelectedTypeChange($event.value)\"\n    extraClasses=\"grow text-sm\"\n    data-cy=\"online-resources-type\"\n  ></gn-ui-switch-toggle>\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-file-input\n    *ngIf=\"selectedType === 'download'\"\n    [maxSizeMB]=\"MAX_UPLOAD_SIZE_MB\"\n    (fileChange)=\"handleFileChange($event)\"\n    (uploadCancel)=\"handleUploadCancel()\"\n    [uploadProgress]=\"uploadProgress\"\n    (urlChange)=\"handleDownloadUrlChange($event)\"\n  ></gn-ui-file-input>\n  <div\n    *ngIf=\"selectedType === 'service'\"\n    class=\"w-full border-2 border-dashed rounded-lg p-6 flex flex-col gap-[16px]\"\n  >\n    <gn-ui-online-service-resource-input\n      [service]=\"newService\"\n      (serviceChange)=\"handleServiceChange($event)\"\n    ></gn-ui-online-service-resource-input>\n  </div>\n  <div class=\"h-[8px]\"></div>\n  <gn-ui-sortable-list\n    [items]=\"notLinkResources\"\n    (itemsOrderChange)=\"handleResourcesChange($event)\"\n    [elementTemplate]=\"template\"\n  >\n  </gn-ui-sortable-list>\n  <ng-template #template let-onlineResource let-index=\"index\">\n    <gn-ui-online-resource-card\n      [onlineResource]=\"onlineResource\"\n      (modifyClick)=\"handleResourceModify(onlineResource, index)\"\n    ></gn-ui-online-resource-card>\n  </ng-template>\n\n  <ng-template #dialogTemplate let-onlineResource>\n    <div class=\"flex flex-col gap-[16px]\">\n      <ng-container *ngIf=\"onlineResource.type === 'service'; else urlInput\">\n        <gn-ui-online-service-resource-input\n          [service]=\"onlineResource\"\n          [modifyMode]=\"true\"\n          [disabled]=\"true\"\n        ></gn-ui-online-service-resource-input>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.description\n          </h3>\n          <gn-ui-text-area\n            [(value)]=\"onlineResource.description\"\n          ></gn-ui-text-area>\n        </div>\n      </ng-container>\n      <ng-template #urlInput>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.title\n          </h3>\n          <gn-ui-text-input [(value)]=\"onlineResource.name\"></gn-ui-text-input>\n        </div>\n        <div>\n          <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n            editor.record.form.field.onlineResource.edit.description\n          </h3>\n          <gn-ui-text-area\n            [(value)]=\"onlineResource.description\"\n          ></gn-ui-text-area>\n        </div>\n        <span class=\"w-full border-b border-gray-300\"></span>\n        <gn-ui-url-input\n          class=\"w-full\"\n          [disabled]=\"true\"\n          [value]=\"onlineResource.url\"\n          [showValidateButton]=\"false\"\n        ></gn-ui-url-input>\n      </ng-template>\n    </div>\n  </ng-template>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: NotificationsService }, { type: i1$1.TranslateService }, { type: PlatformServiceInterface }, { type: i0.ChangeDetectorRef }, { type: i1$b.MatDialog }], propDecorators: { metadataUuid: [{
+        }], ctorParameters: () => [{ type: NotificationsService }, { type: i1$1.TranslateService }, { type: PlatformServiceInterface }, { type: i0.ChangeDetectorRef }, { type: i1$a.MatDialog }], propDecorators: { metadataUuid: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -42236,7 +42650,7 @@ class FormFieldComponent {
         return this.value;
     }
     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=\"'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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$4.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: "ngmodule", type: TextFieldModule }, { kind: "directive", type: i4$2.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=\"'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=\"'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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.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: "ngmodule", type: TextFieldModule }, { kind: "directive", type: i4$2.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,
@@ -42381,7 +42795,7 @@ class RouterService {
     getOrganizationPageRoute() {
         return ROUTER_ROUTE_ORGANIZATION;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RouterService, deps: [{ token: ROUTER_CONFIG }, { token: i1$d.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RouterService, deps: [{ token: ROUTER_CONFIG }, { token: i1$c.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RouterService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RouterService, decorators: [{
@@ -42392,7 +42806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ROUTER_CONFIG]
-                }] }, { type: i1$d.Router }] });
+                }] }, { type: i1$c.Router }] });
 
 const goAction = createAction('[Router] Go', props());
 const backAction = createAction('[Router] Back');
@@ -42703,12 +43117,12 @@ class RouterEffects {
         this.navigateBack$ = createEffect(() => this._actions$.pipe(ofType(backAction), tap$1(() => this._location.back())), { dispatch: false });
         this.navigateForward$ = createEffect(() => this._actions$.pipe(ofType(forwardAction), tap$1(() => this._location.forward())), { dispatch: false });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RouterEffects, deps: [{ token: i1$c.Actions }, { token: i1$d.Router }, { token: i1$2.Location }, { token: RouterFacade }, { token: ROUTER_CONFIG }, { token: FieldsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RouterEffects, deps: [{ token: i1$b.Actions }, { token: i1$c.Router }, { token: i1$2.Location }, { token: RouterFacade }, { token: ROUTER_CONFIG }, { token: FieldsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RouterEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RouterEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$c.Actions }, { type: i1$d.Router }, { type: i1$2.Location }, { type: RouterFacade }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$b.Actions }, { type: i1$c.Router }, { type: i1$2.Location }, { type: RouterFacade }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [ROUTER_CONFIG]
                 }] }, { type: FieldsService }] });
@@ -42725,7 +43139,7 @@ class DefaultRouterModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultRouterModule, deps: [{ token: RouterService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DefaultRouterModule, declarations: [SearchRouterContainerDirective], imports: [i1$3.StoreFeatureModule, i3$2.StoreRouterConnectingModule, i1$c.EffectsFeatureModule], exports: [SearchRouterContainerDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DefaultRouterModule, declarations: [SearchRouterContainerDirective], imports: [i1$3.StoreFeatureModule, i3$3.StoreRouterConnectingModule, i1$b.EffectsFeatureModule], exports: [SearchRouterContainerDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultRouterModule, providers: [
             RouterFacade,
             {
@@ -42768,5 +43182,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, 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, 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, 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, ExternalViewerButtonComponent, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FILTER_SUMMARY_IGNORE_LIST, FORMATS, FacetBlockComponent, FacetBlockStubComponent, FacetItemComponent, FacetItemStubComponent, FacetListComponent, FacetsContainerComponent, FacetsModule, FavoriteStarComponent, FavoritesService, FeatureAuthModule, FeatureCatalogModule, FeatureDetailComponent, FeatureEditorModule, FeatureMapModule, FeatureNotificationsModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileInputComponent, FileTranslateLoader, FilesDropDirective, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldDateComponent, FormFieldFileComponent, FormFieldKeywordsComponent, FormFieldLicenseComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentsComponent, FormFieldWrapperComponent, FullTextSearchField, FuzzySearchComponent, GEONETWORK_UI_TAG_NAME, GEONETWORK_UI_VERSION, 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, LANG_3_TO_2_MAPPER, LOGIN_URL, LOGOUT_URL, LONLAT_CRS_CODES, LangService, LanguageSwitcherComponent, LayersPanelComponent, LicenseSearchField, LinkCardComponent, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_FEATURE_KEY, MAP_VIEW_CONSTRAINTS, METADATA_LANGUAGE, MY_FORMATS, MapContainerComponent, MapFacade, MapLegendComponent, MapStateContainerComponent, MapStyleService, MapUtilsService, MapViewComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataInfoComponent, MetadataLinkType, MetadataMapperContext, MetadataQualityComponent, MetadataQualityItemComponent, 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, OwnerSearchField, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PaginationDotsComponent, PatchResultsAggregations, 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, RelatedRecordCardComponent, 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, 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, StarToggleComponent, StickyHeaderComponent, SupportedTypes, SwitchToggleComponent, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, TranslatedSearchField, TruncatedTextComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UiDatavizModule, UiElementsModule, FacetsModule$1 as UiFacetsModule, UiInputsModule, UiLayoutModule, UiSearchModule, UiWidgetsModule, UpdateConfigAggregations, UpdateFilters, UrlInputComponent, UserFeedbackItemComponent, UserPreviewComponent, UserSearchField, UtilI18nModule, UtilSharedModule, VECTOR_STYLE_DEFAULT, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, WizardComponent, WizardFieldComponent, WizardFieldType, WizardService, WizardSummarizeComponent, 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, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryFromGeoJSON, getGlobalConfig, getJsonDataItemsProxy, getLangFromBrowser, getLayers, getLinkLabel, getLinkPriority, getMapContext, getMapContextLayerFromConfig, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getNamespace, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getResourceType, getReuseType, getRootElement, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSelectedFeatures, getSpatialFilterEnabled, getTemporalRangeUnion, getThemeConfig, 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, parse, parseXmlString, placeholder, prioritizePageScroll, propagateToDocumentOnly, provideGn4, 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, totalPages, undoRecordDraft, unrecognizedKeysConfigFixture, updateRecordField, wmsLayerFlatten, writeAttribute, wrongLanguageCodeConfigFixture, xmlToString };
+export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AbstractSearchField, 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, 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, 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, ExternalViewerButtonComponent, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FILTER_SUMMARY_IGNORE_LIST, FORMATS, FacetBlockComponent, FacetBlockStubComponent, FacetItemComponent, FacetItemStubComponent, FacetListComponent, FacetsContainerComponent, FacetsModule, FavoriteStarComponent, FavoritesService, FeatureAuthModule, FeatureCatalogListComponent, FeatureCatalogModule, FeatureDetailComponent, FeatureEditorModule, FeatureMapModule, FeatureNotificationsModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileInputComponent, FileTranslateLoader, FilesDropDirective, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldDateComponent, FormFieldFileComponent, FormFieldKeywordsComponent, FormFieldLicenseComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentsComponent, 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, LANG_3_TO_2_MAPPER, LOGIN_URL, LOGOUT_URL, LONLAT_CRS_CODES, LangService, LanguageSwitcherComponent, LayersPanelComponent, LicenseSearchField, LinkCardComponent, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_FEATURE_KEY, MAP_VIEW_CONSTRAINTS, METADATA_LANGUAGE, MY_FORMATS, MapContainerComponent, MapFacade, MapLegendComponent, MapStateContainerComponent, MapStyleService, MapUtilsService, MapViewComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataInfoComponent, MetadataLinkType, MetadataMapperContext, MetadataQualityComponent, MetadataQualityItemComponent, 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, OwnerSearchField, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PaginationDotsComponent, PatchResultsAggregations, 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, RelatedRecordCardComponent, 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, StarToggleComponent, StickyHeaderComponent, SupportedTypes, SwitchToggleComponent, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, TranslatedSearchField, TruncatedTextComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UiDatavizModule, UiElementsModule, FacetsModule$1 as UiFacetsModule, UiInputsModule, UiLayoutModule, UiSearchModule, UiWidgetsModule, UpdateConfigAggregations, UpdateFilters, UrlInputComponent, UserFeedbackItemComponent, UserPreviewComponent, UserSearchField, UtilI18nModule, UtilSharedModule, VECTOR_STYLE_DEFAULT, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, WizardComponent, WizardFieldComponent, WizardFieldType, WizardService, WizardSummarizeComponent, 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, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryFromGeoJSON, getGlobalConfig, getJsonDataItemsProxy, getLangFromBrowser, getLayers, getLinkLabel, getLinkPriority, getMapContext, getMapContextLayerFromConfig, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getNamespace, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getResourceType, getReuseType, getRootElement, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSelectedFeatures, getSpatialFilterEnabled, getTemporalRangeUnion, getThemeConfig, 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, parse, parseXmlString, placeholder, prioritizePageScroll, propagateToDocumentOnly, provideGn4, 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, totalPages, undoRecordDraft, unrecognizedKeysConfigFixture, updateRecordField, wmsLayerFlatten, writeAttribute, wrongLanguageCodeConfigFixture, xmlToString };
 //# sourceMappingURL=geonetwork-ui.mjs.map