geonetwork-ui 2.3.0-dev.139106e0 → 2.3.0-dev.22f4da74

package/fesm2022/geonetwork-ui.mjs

@@ -1,18 +1,18 @@
 import { parseXml, XmlDocument, XmlElement, XmlText } from '@rgrove/parse-xml';
 import format from 'date-fns/format';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostListener, EventEmitter, Output, ElementRef, ViewChildren, ViewContainerRef, HostBinding, ContentChild, ContentChildren, TemplateRef, Host, inject } from '@angular/core';
+import { InjectionToken, Injectable, Optional, Inject, NgModule, SkipSelf, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, HostListener, EventEmitter, Output, ElementRef, ViewChildren, ViewContainerRef, HostBinding, ContentChild, ContentChildren, TemplateRef, Host, Pipe, inject } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpClient, HttpClientModule, HTTP_INTERCEPTORS, HttpClientXsrfModule } from '@angular/common/http';
 import * as i1$1 from '@ngx-translate/core';
 import { TranslateCompiler, TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { map as map$1, shareReplay, filter, tap as tap$1, startWith, withLatestFrom, switchMap as switchMap$1, catchError, take, delay, distinctUntilChanged, debounceTime, finalize, first, throttleTime, share, pairwise, mergeMap } from 'rxjs/operators';
+import { map as map$1, shareReplay, filter, tap as tap$1, startWith, withLatestFrom, switchMap as switchMap$1, catchError, take, delay, debounceTime, distinctUntilChanged, finalize, first, throttleTime, share, pairwise, mergeMap } from 'rxjs/operators';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import * as i1$3 from '@angular/common';
 import { CommonModule, NgOptimizedImage, NgForOf } from '@angular/common';
-import { of, map as map$2, lastValueFrom, switchMap, combineLatest, takeLast, forkJoin, Subject, merge, throwError, BehaviorSubject, firstValueFrom, fromEvent, timer, Subscription, ReplaySubject, distinctUntilChanged as distinctUntilChanged$1, debounceTime as debounceTime$1, animationFrameScheduler, from, tap as tap$2, Observable, buffer, combineLatestWith, catchError as catchError$1, takeUntil, EMPTY, withLatestFrom as withLatestFrom$1, filter as filter$1, startWith as startWith$1, pairwise as pairwise$1 } from 'rxjs';
+import { of, map as map$2, lastValueFrom, switchMap, combineLatest, takeLast, forkJoin, firstValueFrom, Subject, merge, throwError, BehaviorSubject, fromEvent, timer, Subscription, ReplaySubject, distinctUntilChanged as distinctUntilChanged$1, debounceTime as debounceTime$1, animationFrameScheduler, from, tap as tap$2, Observable, buffer, combineLatestWith, catchError as catchError$1, takeUntil, exhaustMap, mergeMap as mergeMap$1, EMPTY, withLatestFrom as withLatestFrom$1, filter as filter$1, startWith as startWith$1, pairwise as pairwise$1 } from 'rxjs';
 import { valid, coerce, satisfies, ltr } from 'semver';
 import * as i1$2 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, select, StoreModule, Store } from '@ngrx/store';
@@ -42,30 +42,33 @@ import TileLayer from 'ol/layer/Tile';
 import XYZ from 'ol/source/XYZ';
 import { bbox } from 'ol/loadingstrategy';
 import WMTS from 'ol/source/WMTS';
-import * as i2$3 from '@angular/material/tabs';
+import OGCVectorTile from 'ol/source/OGCVectorTile.js';
+import { MVT, WFS, GeoJSON as GeoJSON$1 } from 'ol/format';
+import VectorTileLayer from 'ol/layer/VectorTile';
+import OGCMapTile from 'ol/source/OGCMapTile.js';
+import * as i2$4 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i1$4 from '@angular/cdk/overlay';
-import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
 import * as i2$1 from '@angular/forms';
 import { UntypedFormControl, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
-import * as i5 from 'ngx-chips';
-import { TagInputModule } from 'ngx-chips';
 import * as i4 from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i5$1 from '@angular/material/core';
+import * as i5 from '@angular/material/core';
 import { MatNativeDateModule, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import * as i1$4 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i5$1 from 'ngx-chips';
+import { TagInputModule } from 'ngx-chips';
+import * as i2$2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2$3 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i3 from 'ngx-dropzone';
 import { NgxDropzoneModule } from 'ngx-dropzone';
-import * as i1$5 from '@angular/material/progress-spinner';
+import * as i1$5 from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import * as i1$6 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i1$6 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i3$1 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$2 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 import * as i1$7 from '@angular/router';
 import { RouterModule, RouterLink, RouteReuseStrategy } from '@angular/router';
@@ -73,6 +76,8 @@ import Duration from 'duration-relativetimeformat';
 import * as basicLightbox from 'basiclightbox';
 import { marked } from 'marked';
 import EmblaCarousel from 'embla-carousel';
+import { formatDistance } from 'date-fns';
+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 * as i1$8 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule, Actions } from '@ngrx/effects';
 import tippy from 'tippy.js';
@@ -83,18 +88,17 @@ import { trigger, transition, animate, keyframes, style } from '@angular/animati
 import { Chart, BarController, BarElement, CategoryScale, LinearScale, LineController, LineElement, PointElement, PieController, ArcElement, ScatterController, Tooltip, Colors, Legend } from 'chart.js';
 import * as i4$1 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import * as i2$4 from '@angular/material/sort';
+import * as i2$5 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i1$9 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i3$3 from 'ng-table-virtual-scroll';
+import * as i3$1 from 'ng-table-virtual-scroll';
 import { TableVirtualScrollDataSource, TableVirtualScrollModule } from 'ng-table-virtual-scroll';
 import * as Papa from 'papaparse';
 import parseDate from 'date-fns/parse';
 import parseIsoDate from 'date-fns/parseISO';
-import { WFS, GeoJSON as GeoJSON$1 } from 'ol/format';
 import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
-import * as i3$4 from '@ngrx/router-store';
+import * as i3$2 from '@ngrx/router-store';
 import { getRouterSelectors, routerReducer, StoreRouterConnectingModule, FullRouterStateSerializer } from '@ngrx/router-store';
 import { navigation } from '@ngrx/router-store/data-persistence';
 
@@ -17271,6 +17275,7 @@ var next$6 = "weiter";
 var previous$6 = "zurück";
 var records$6 = "Datensätze";
 var de = {
+	"button.login": "",
 	"catalog.figures.datasets": "{count, plural, =0{Datensätze} one{Datensatz} other{Datensätze}}",
 	"catalog.figures.organisations": "{count, plural, =0{Organisationen} one{Organisation} other{Organisationen}}",
 	"chart.aggregation.average": "Durchschnitt",
@@ -17416,6 +17421,17 @@ var de = {
 	"downloads.format.unknown": "unbekannt",
 	"downloads.wfs.featuretype.not.found": "Der Layer wurde nicht gefunden",
 	dropFile: dropFile$6,
+	"editor.record.form.license": "Lizenz",
+	"editor.record.form.license.cc-by": "",
+	"editor.record.form.license.cc-by-sa": "",
+	"editor.record.form.license.cc-zero": "",
+	"editor.record.form.license.etalab": "",
+	"editor.record.form.license.etalab-v2": "",
+	"editor.record.form.license.odbl": "",
+	"editor.record.form.license.odc-by": "",
+	"editor.record.form.license.pddl": "",
+	"editor.record.form.license.unknown": "Unbekannt oder nicht vorhanden",
+	"editor.record.form.resourceUpdated": "",
 	"editor.record.loadError.body": "",
 	"editor.record.loadError.closeMessage": "",
 	"editor.record.loadError.title": "",
@@ -17486,6 +17502,7 @@ var de = {
 	"multiselect.filter.placeholder": "Suche",
 	"nav.back": "Zurück",
 	next: next$6,
+	"ogc.unreachable.unknown": "Der Dienst konnte nicht erreicht werden",
 	"organisation.filter.placeholder": "Ergebnisse filtern",
 	"organisation.sort.sortBy": "Sortieren nach:",
 	"organisations.hits.found": "{hits, plural, =0{Keine Organisation gefunden} other{{hits} von {total} Organisationen angezeigt}}",
@@ -17564,6 +17581,14 @@ var de = {
 	"record.metadata.updateFrequency": "Aktualisierungsfrequenz der Daten",
 	"record.metadata.updatedOn": "Letzte Aktualisierung der Dateninformationen",
 	"record.metadata.usage": "Nutzung und Einschränkungen",
+	"record.metadata.userFeedbacks": "",
+	"record.metadata.userFeedbacks.anonymousUser": "",
+	"record.metadata.userFeedbacks.newAnswer.buttonTitle": "",
+	"record.metadata.userFeedbacks.newAnswer.placeholder": "",
+	"record.metadata.userFeedbacks.newComment.placeholder": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.label": "",
 	"record.more.details": "Weitere Details",
 	"record.tab.chart": "Diagramm",
 	"record.tab.data": "Tabelle",
@@ -17641,6 +17666,7 @@ var next$5 = "next";
 var previous$5 = "previous";
 var records$5 = "records";
 var en = {
+	"button.login": "Log in",
 	"catalog.figures.datasets": "{count, plural, =0{datasets} one{dataset} other{datasets}}",
 	"catalog.figures.organisations": "{count, plural, =0{organisations} one{organisation} other{organisations}}",
 	"chart.aggregation.average": "average",
@@ -17786,6 +17812,17 @@ var en = {
 	"downloads.format.unknown": "unknown",
 	"downloads.wfs.featuretype.not.found": "The layer was not found",
 	dropFile: dropFile$5,
+	"editor.record.form.license": "License",
+	"editor.record.form.license.cc-by": "Creative Commons CC-BY",
+	"editor.record.form.license.cc-by-sa": "Creative Commons CC-BY-SA",
+	"editor.record.form.license.cc-zero": "Creative Commons CC-0",
+	"editor.record.form.license.etalab": "Open Licence (Etalab)",
+	"editor.record.form.license.etalab-v2": "Open Licence v2.0 (Etalab)",
+	"editor.record.form.license.odbl": "Open Data Commons ODbL",
+	"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": "Unknown or absent",
+	"editor.record.form.resourceUpdated": "Last update date",
 	"editor.record.loadError.body": "The record could not be loaded:",
 	"editor.record.loadError.closeMessage": "Understood",
 	"editor.record.loadError.title": "Error loading record",
@@ -17856,6 +17893,7 @@ var en = {
 	"multiselect.filter.placeholder": "Search",
 	"nav.back": "Back",
 	next: next$5,
+	"ogc.unreachable.unknown": "The service could not be reached",
 	"organisation.filter.placeholder": "Filter results",
 	"organisation.sort.sortBy": "Sort by:",
 	"organisations.hits.found": "{hits, plural, =0{No organizations found} other{{hits} out of {total} organizations shown}}",
@@ -17934,6 +17972,14 @@ var en = {
 	"record.metadata.updateFrequency": "Data Update Frequency",
 	"record.metadata.updatedOn": "Last Data Information Update",
 	"record.metadata.usage": "License and Conditions",
+	"record.metadata.userFeedbacks": "Questions / Answers",
+	"record.metadata.userFeedbacks.anonymousUser": "In order to leave a comment, please log in.",
+	"record.metadata.userFeedbacks.newAnswer.buttonTitle": "Publish",
+	"record.metadata.userFeedbacks.newAnswer.placeholder": "Answer...",
+	"record.metadata.userFeedbacks.newComment.placeholder": "Write your comment here...",
+	"record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "Newest comments first",
+	"record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "Oldest comments first",
+	"record.metadata.userFeedbacks.sortSelector.label": "Sort by ...",
 	"record.more.details": "Read more",
 	"record.tab.chart": "Chart",
 	"record.tab.data": "Table",
@@ -18011,6 +18057,7 @@ var next$4 = "";
 var previous$4 = "";
 var records$4 = "";
 var es = {
+	"button.login": "",
 	"catalog.figures.datasets": "conjuntos de datos",
 	"catalog.figures.organisations": "organizaciones",
 	"chart.aggregation.average": "promedio",
@@ -18156,6 +18203,17 @@ var es = {
 	"downloads.format.unknown": "",
 	"downloads.wfs.featuretype.not.found": "",
 	dropFile: dropFile$4,
+	"editor.record.form.license": "",
+	"editor.record.form.license.cc-by": "",
+	"editor.record.form.license.cc-by-sa": "",
+	"editor.record.form.license.cc-zero": "",
+	"editor.record.form.license.etalab": "",
+	"editor.record.form.license.etalab-v2": "",
+	"editor.record.form.license.odbl": "",
+	"editor.record.form.license.odc-by": "",
+	"editor.record.form.license.pddl": "",
+	"editor.record.form.license.unknown": "",
+	"editor.record.form.resourceUpdated": "",
 	"editor.record.loadError.body": "",
 	"editor.record.loadError.closeMessage": "",
 	"editor.record.loadError.title": "",
@@ -18226,6 +18284,7 @@ var es = {
 	"multiselect.filter.placeholder": "",
 	"nav.back": "",
 	next: next$4,
+	"ogc.unreachable.unknown": "",
 	"organisation.filter.placeholder": "",
 	"organisation.sort.sortBy": "",
 	"organisations.hits.found": "",
@@ -18304,6 +18363,14 @@ var es = {
 	"record.metadata.updateFrequency": "",
 	"record.metadata.updatedOn": "",
 	"record.metadata.usage": "",
+	"record.metadata.userFeedbacks": "",
+	"record.metadata.userFeedbacks.anonymousUser": "",
+	"record.metadata.userFeedbacks.newAnswer.buttonTitle": "",
+	"record.metadata.userFeedbacks.newAnswer.placeholder": "",
+	"record.metadata.userFeedbacks.newComment.placeholder": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.label": "",
 	"record.more.details": "",
 	"record.tab.chart": "",
 	"record.tab.data": "",
@@ -18381,6 +18448,7 @@ var next$3 = "suivant";
 var previous$3 = "précédent";
 var records$3 = "enregistrements";
 var fr = {
+	"button.login": "Se connecter",
 	"catalog.figures.datasets": "{count, plural, =0{données} one{donnée} other{données}}",
 	"catalog.figures.organisations": "{count, plural, =0{organisations} one{organisation} other{organisations}}",
 	"chart.aggregation.average": "moyenne",
@@ -18526,6 +18594,17 @@ var fr = {
 	"downloads.format.unknown": "inconnu",
 	"downloads.wfs.featuretype.not.found": "La couche n'a pas été retrouvée",
 	dropFile: dropFile$3,
+	"editor.record.form.license": "Licence",
+	"editor.record.form.license.cc-by": "",
+	"editor.record.form.license.cc-by-sa": "",
+	"editor.record.form.license.cc-zero": "",
+	"editor.record.form.license.etalab": "Licence Ouverte (Etalab)",
+	"editor.record.form.license.etalab-v2": "Licence Ouverte v2.0 (Etalab)",
+	"editor.record.form.license.odbl": "",
+	"editor.record.form.license.odc-by": "",
+	"editor.record.form.license.pddl": "",
+	"editor.record.form.license.unknown": "Non-reconnue ou absente",
+	"editor.record.form.resourceUpdated": "Date de dernière révision",
 	"editor.record.loadError.body": "",
 	"editor.record.loadError.closeMessage": "",
 	"editor.record.loadError.title": "",
@@ -18596,6 +18675,7 @@ var fr = {
 	"multiselect.filter.placeholder": "Rechercher",
 	"nav.back": "Retour",
 	next: next$3,
+	"ogc.unreachable.unknown": "Le service n'est pas accessible",
 	"organisation.filter.placeholder": "Filtrer les résultats",
 	"organisation.sort.sortBy": "Trier par :",
 	"organisations.hits.found": "{hits, plural, =0{Aucune organisation trouvé} one{1 organisation sur {total} affichée} other{{hits} organisations sur {total} affichées}}",
@@ -18674,6 +18754,14 @@ var fr = {
 	"record.metadata.updateFrequency": "Fréquence de mise à jour des données",
 	"record.metadata.updatedOn": "Dernière mise à jour des informations sur les données",
 	"record.metadata.usage": "Licences et conditions d'utilisation",
+	"record.metadata.userFeedbacks": "Questions / Réponses",
+	"record.metadata.userFeedbacks.anonymousUser": "Pour rédiger un commentaire, veuillez vous identifier.",
+	"record.metadata.userFeedbacks.newAnswer.buttonTitle": "Publier",
+	"record.metadata.userFeedbacks.newAnswer.placeholder": "Répondre...",
+	"record.metadata.userFeedbacks.newComment.placeholder": "Rédiger votre commentaire ici...",
+	"record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "Les plus récents en premier",
+	"record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "Les plus anciens en premier",
+	"record.metadata.userFeedbacks.sortSelector.label": "Trier par ...",
 	"record.more.details": "Détails",
 	"record.tab.chart": "Graphique",
 	"record.tab.data": "Tableau",
@@ -18751,6 +18839,7 @@ var next$2 = "successivo";
 var previous$2 = "precedente";
 var records$2 = "record";
 var it = {
+	"button.login": "",
 	"catalog.figures.datasets": "{count, plural, =0{datasets} one{dataset} other{datasets}}",
 	"catalog.figures.organisations": "{count, plural, =0{organizzazioni} one{organizzazione} other{organizzazioni}}",
 	"chart.aggregation.average": "media",
@@ -18896,6 +18985,17 @@ var it = {
 	"downloads.format.unknown": "sconosciuto",
 	"downloads.wfs.featuretype.not.found": "Il layer non è stato trovato",
 	dropFile: dropFile$2,
+	"editor.record.form.license": "Licenza",
+	"editor.record.form.license.cc-by": "",
+	"editor.record.form.license.cc-by-sa": "",
+	"editor.record.form.license.cc-zero": "",
+	"editor.record.form.license.etalab": "Licenza aperta (Etalab)",
+	"editor.record.form.license.etalab-v2": "Licenza aperta v2.0 (Etalab)",
+	"editor.record.form.license.odbl": "",
+	"editor.record.form.license.odc-by": "",
+	"editor.record.form.license.pddl": "",
+	"editor.record.form.license.unknown": "Non riconosciuta o assente",
+	"editor.record.form.resourceUpdated": "",
 	"editor.record.loadError.body": "",
 	"editor.record.loadError.closeMessage": "",
 	"editor.record.loadError.title": "",
@@ -18966,6 +19066,7 @@ var it = {
 	"multiselect.filter.placeholder": "Cerca",
 	"nav.back": "Indietro",
 	next: next$2,
+	"ogc.unreachable.unknown": "Il servizio non è accessibile",
 	"organisation.filter.placeholder": "Filtra i risultati",
 	"organisation.sort.sortBy": "Ordina per:",
 	"organisations.hits.found": "{hits, plural, =0{Nessuna organizzazione trovata} one{1 organizzazione su {total} visualizzata} other{{hits} organizzazioni su {total} visualizzate}}",
@@ -19044,6 +19145,14 @@ var it = {
 	"record.metadata.updateFrequency": "Frequenza di aggiornamento dei dati",
 	"record.metadata.updatedOn": "Ultimo aggiornamento delle informazioni sui dati",
 	"record.metadata.usage": "Licenze e limiti di utilizzo",
+	"record.metadata.userFeedbacks": "",
+	"record.metadata.userFeedbacks.anonymousUser": "",
+	"record.metadata.userFeedbacks.newAnswer.buttonTitle": "",
+	"record.metadata.userFeedbacks.newAnswer.placeholder": "",
+	"record.metadata.userFeedbacks.newComment.placeholder": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.label": "",
 	"record.more.details": "Dettagli",
 	"record.tab.chart": "Grafico",
 	"record.tab.data": "Tabella",
@@ -19121,6 +19230,7 @@ var next$1 = "";
 var previous$1 = "";
 var records$1 = "";
 var nl = {
+	"button.login": "",
 	"catalog.figures.datasets": "datasets",
 	"catalog.figures.organisations": "organisaties",
 	"chart.aggregation.average": "gemiddelde",
@@ -19266,6 +19376,17 @@ var nl = {
 	"downloads.format.unknown": "",
 	"downloads.wfs.featuretype.not.found": "",
 	dropFile: dropFile$1,
+	"editor.record.form.license": "",
+	"editor.record.form.license.cc-by": "",
+	"editor.record.form.license.cc-by-sa": "",
+	"editor.record.form.license.cc-zero": "",
+	"editor.record.form.license.etalab": "",
+	"editor.record.form.license.etalab-v2": "",
+	"editor.record.form.license.odbl": "",
+	"editor.record.form.license.odc-by": "",
+	"editor.record.form.license.pddl": "",
+	"editor.record.form.license.unknown": "",
+	"editor.record.form.resourceUpdated": "",
 	"editor.record.loadError.body": "",
 	"editor.record.loadError.closeMessage": "",
 	"editor.record.loadError.title": "",
@@ -19336,6 +19457,7 @@ var nl = {
 	"multiselect.filter.placeholder": "",
 	"nav.back": "",
 	next: next$1,
+	"ogc.unreachable.unknown": "",
 	"organisation.filter.placeholder": "",
 	"organisation.sort.sortBy": "",
 	"organisations.hits.found": "",
@@ -19414,6 +19536,14 @@ var nl = {
 	"record.metadata.updateFrequency": "",
 	"record.metadata.updatedOn": "",
 	"record.metadata.usage": "",
+	"record.metadata.userFeedbacks": "",
+	"record.metadata.userFeedbacks.anonymousUser": "",
+	"record.metadata.userFeedbacks.newAnswer.buttonTitle": "",
+	"record.metadata.userFeedbacks.newAnswer.placeholder": "",
+	"record.metadata.userFeedbacks.newComment.placeholder": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.label": "",
 	"record.more.details": "",
 	"record.tab.chart": "",
 	"record.tab.data": "",
@@ -19491,6 +19621,7 @@ var next = "";
 var previous = "";
 var records = "";
 var pt = {
+	"button.login": "",
 	"catalog.figures.datasets": "conjuntos de dados",
 	"catalog.figures.organisations": "organizações",
 	"chart.aggregation.average": "média",
@@ -19636,6 +19767,17 @@ var pt = {
 	"downloads.format.unknown": "",
 	"downloads.wfs.featuretype.not.found": "",
 	dropFile: dropFile,
+	"editor.record.form.license": "",
+	"editor.record.form.license.cc-by": "",
+	"editor.record.form.license.cc-by-sa": "",
+	"editor.record.form.license.cc-zero": "",
+	"editor.record.form.license.etalab": "",
+	"editor.record.form.license.etalab-v2": "",
+	"editor.record.form.license.odbl": "",
+	"editor.record.form.license.odc-by": "",
+	"editor.record.form.license.pddl": "",
+	"editor.record.form.license.unknown": "",
+	"editor.record.form.resourceUpdated": "",
 	"editor.record.loadError.body": "",
 	"editor.record.loadError.closeMessage": "",
 	"editor.record.loadError.title": "",
@@ -19706,6 +19848,7 @@ var pt = {
 	"multiselect.filter.placeholder": "",
 	"nav.back": "",
 	next: next,
+	"ogc.unreachable.unknown": "",
 	"organisation.filter.placeholder": "",
 	"organisation.sort.sortBy": "",
 	"organisations.hits.found": "",
@@ -19784,6 +19927,14 @@ var pt = {
 	"record.metadata.updateFrequency": "",
 	"record.metadata.updatedOn": "",
 	"record.metadata.usage": "",
+	"record.metadata.userFeedbacks": "",
+	"record.metadata.userFeedbacks.anonymousUser": "",
+	"record.metadata.userFeedbacks.newAnswer.buttonTitle": "",
+	"record.metadata.userFeedbacks.newAnswer.placeholder": "",
+	"record.metadata.userFeedbacks.newComment.placeholder": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "",
+	"record.metadata.userFeedbacks.sortSelector.label": "",
 	"record.more.details": "",
 	"record.tab.chart": "",
 	"record.tab.data": "",
@@ -21166,6 +21317,16 @@ class GravatarService {
     getProfileIcon(hash) {
         return this.identicon$.pipe(map$1((identicon) => identicon || this.GRAVATAR_IDENTICON), map$1((identicon) => `${this.GRAVATAR_URL}${hash}?d=${identicon}`));
     }
+    async getProfileIconUrl(userId) {
+        let iconUrl = '';
+        try {
+            iconUrl = await firstValueFrom(this.getProfileIcon(userId));
+        }
+        catch (error) {
+            return '';
+        }
+        return iconUrl;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GravatarService, deps: [{ token: Gn4SettingsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GravatarService, providedIn: 'root' }); }
 }
@@ -21317,6 +21478,39 @@ class Gn4PlatformMapper {
             };
         });
     }
+    userFeedbacksFromApi(userFeedback) {
+        return {
+            uuid: userFeedback.uuid,
+            metadataUUID: userFeedback.metadataUUID,
+            comment: userFeedback.comment,
+            authorUserId: userFeedback.authorUserId.toString(),
+            authorName: userFeedback.authorName,
+            authorEmail: userFeedback.authorEmail,
+            published: userFeedback.published,
+            parentUuid: userFeedback.parentUuid ?? undefined,
+            date: new Date(userFeedback.date),
+        };
+    }
+    userFeedbacksToApi(userFeedback) {
+        return {
+            uuid: userFeedback.uuid,
+            metadataUUID: userFeedback.metadataUUID,
+            comment: userFeedback.comment,
+            authorUserId: Number.parseInt(userFeedback.authorUserId),
+            authorName: userFeedback.authorName,
+            authorEmail: userFeedback.authorEmail,
+            published: userFeedback.published,
+            parentUuid: userFeedback.parentUuid,
+            date: userFeedback.date.getTime().toString(),
+        };
+    }
+    async createUserFeedbackViewModel(baseUserFeedback) {
+        const userAvatarUrl = await this.avatarService.getProfileIconUrl(baseUserFeedback.authorUserId?.toString());
+        return {
+            ...baseUserFeedback,
+            avatarUrl: userAvatarUrl,
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformMapper, deps: [{ token: AvatarServiceInterface }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformMapper }); }
 }
@@ -21326,7 +21520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 const minApiVersion = '4.2.2';
 class Gn4PlatformService {
-    constructor(siteApiService, meApi, usersApi, mapper, toolsApiService, registriesApiService, langService) {
+    constructor(siteApiService, meApi, usersApi, mapper, toolsApiService, registriesApiService, langService, userfeedbackApiService) {
         this.siteApiService = siteApiService;
         this.meApi = meApi;
         this.usersApi = usersApi;
@@ -21334,6 +21528,7 @@ class Gn4PlatformService {
         this.toolsApiService = toolsApiService;
         this.registriesApiService = registriesApiService;
         this.langService = langService;
+        this.userfeedbackApiService = userfeedbackApiService;
         this.type = 'GeoNetwork';
         this.keyTranslations$ = this.toolsApiService
             .getTranslationsPackage1('gnui')
@@ -21353,7 +21548,7 @@ class Gn4PlatformService {
          */
         this.thesauri = {};
         this.me$ = this.meApi.getMe().pipe(switchMap((apiUser) => this.mapper.userFromMeApi(apiUser)), shareReplay({ bufferSize: 1, refCount: true }));
-        this.isAnonymous$ = this.me$.pipe(map$1((user) => !user || !('id' in user)));
+        this.isUserAnonymous$ = this.me$.pipe(map$1((user) => !user || !('id' in user)));
         this.users$ = this.usersApi.getUsers().pipe(map$1((users) => users.map((user) => this.mapper.userFromApi(user))), shareReplay());
     }
     getType() {
@@ -21366,7 +21561,7 @@ class Gn4PlatformService {
         return this.me$;
     }
     isAnonymous() {
-        return this.isAnonymous$;
+        return this.isUserAnonymous$;
     }
     getOrganizations() {
         return undefined;
@@ -21402,12 +21597,23 @@ class Gn4PlatformService {
             .pipe(map$1((thesaurus) => this.mapper.thesaurusFromApi(thesaurus, this.langService.iso3)), shareReplay(1));
         return this.thesauri[uri];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformService, deps: [{ token: SiteApiService }, { token: MeApiService }, { token: UsersApiService }, { token: Gn4PlatformMapper }, { token: ToolsApiService }, { token: RegistriesApiService }, { token: LangService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    getUserFeedbacks(uuid) {
+        return this.userfeedbackApiService
+            .getUserComments(uuid)
+            .pipe(map$1((userFeedbacks) => userFeedbacks.map(this.mapper.userFeedbacksFromApi)));
+    }
+    postUserFeedbacks(userFeedback) {
+        const mappedUserFeedBack = this.mapper.userFeedbacksToApi(userFeedback);
+        return this.userfeedbackApiService
+            .newUserFeedback(mappedUserFeedBack)
+            .pipe(map$1(() => undefined));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformService, deps: [{ token: SiteApiService }, { token: MeApiService }, { token: UsersApiService }, { token: Gn4PlatformMapper }, { token: ToolsApiService }, { token: RegistriesApiService }, { token: LangService }, { token: UserfeedbackApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Gn4PlatformService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: SiteApiService }, { type: MeApiService }, { type: UsersApiService }, { type: Gn4PlatformMapper }, { type: ToolsApiService }, { type: RegistriesApiService }, { type: LangService }]; } });
+        }], ctorParameters: function () { return [{ type: SiteApiService }, { type: MeApiService }, { type: UsersApiService }, { type: Gn4PlatformMapper }, { type: ToolsApiService }, { type: RegistriesApiService }, { type: LangService }, { type: UserfeedbackApiService }]; } });
 
 function provideGn4() {
     return [
@@ -22134,6 +22340,27 @@ const FORMATS = {
         color: '#de630b',
         mimeTypes: ['application/x-dxf', 'image/x-dxf'],
     },
+    html: {
+        extensions: ['html', 'htm'],
+        priority: 12,
+        color: '#f2bb3a',
+        mimeTypes: ['text/html'],
+    },
+    fgb: {
+        extensions: ['fgb', 'flatgeobuf'],
+        priority: 13,
+        color: '#f2bb3a',
+        mimeTypes: ['application/flatgeobuf'],
+    },
+    jsonfg: {
+        extensions: ['jsonfg', 'jsonfgc'],
+        priority: 14,
+        color: '#f2bb3a',
+        mimeTypes: [
+            'application/vnd.ogc.fg+json',
+            'application/vnd.ogc.fg+json;compatibility=geojson',
+        ],
+    },
 };
 function getFormatPriority(linkFormat) {
     for (const format in FORMATS) {
@@ -22265,7 +22492,7 @@ class LinkClassifierService {
                     case 'wmts':
                         return [LinkUsage.API, LinkUsage.MAP_API];
                     case 'ogcFeatures':
-                        return [LinkUsage.API];
+                        return [LinkUsage.API, LinkUsage.DOWNLOAD, LinkUsage.GEODATA];
                     default:
                         return [LinkUsage.UNKNOWN];
                 }
@@ -23566,13 +23793,30 @@ class MapContextService {
         const style = this.styleService.styles.default;
         switch (type) {
             case MapContextLayerTypeEnum.OGCAPI:
-                return new VectorLayer({
-                    source: new VectorSource({
-                        format: new GeoJSON(),
-                        url: layerModel.url,
-                    }),
-                    style,
-                });
+                if (layerModel.layerType === 'vectorTiles') {
+                    return new VectorTileLayer({
+                        source: new OGCVectorTile({
+                            url: layerModel.url,
+                            format: new MVT(),
+                        }),
+                    });
+                }
+                else if (layerModel.layerType === 'mapTiles') {
+                    return new TileLayer({
+                        source: new OGCMapTile({
+                            url: layerModel.url,
+                        }),
+                    });
+                }
+                else {
+                    return new VectorLayer({
+                        source: new VectorSource({
+                            format: new GeoJSON(),
+                            url: layerModel.url,
+                        }),
+                        style,
+                    });
+                }
             case MapContextLayerTypeEnum.XYZ:
                 return new TileLayer({
                     source: new XYZ({
@@ -23811,6 +24055,173 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
+class PopupAlertComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.type = 'info';
+        this.position = 'top';
+        this.expanded = false;
+        this.timeout = null;
+    }
+    get showDuration() {
+        const chars = this.content.nativeElement.innerHTML.length;
+        return Math.max(3000, chars * 20);
+    }
+    ngOnInit() {
+        this.expandAndClose();
+    }
+    expand() {
+        this.expanded = true;
+        this.changeDetector.detectChanges();
+        clearTimeout(this.timeout);
+    }
+    expandAndClose() {
+        this.expanded = true;
+        this.changeDetector.detectChanges();
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+            this.expanded = false;
+            this.changeDetector.detectChanges();
+        }, this.showDuration);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PopupAlertComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: { icon: "icon", type: "type", position: "position" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"h-full relative container\">\n  <div\n    class=\"pointer-events-auto absolute text-white flex flex-row p-2 rounded message\"\n    role=\"alert\"\n    [ngClass]=\"{\n      'position-bottom': position === 'bottom',\n      'position-top': position === 'top',\n      expanded: this.expanded,\n      'bg-red-500': type === 'danger',\n      'bg-yellow-500': type === 'warning',\n      'bg-blue-500': type === 'info'\n    }\"\n    (mouseenter)=\"expand()\"\n    (mouseleave)=\"expandAndClose()\"\n  >\n    <mat-icon class=\"material-symbols-outlined mr-2 shrink-0 select-none\">{{\n      icon\n    }}</mat-icon>\n    <div class=\"grow\" #content [ngClass]=\"{ invisible: !expanded }\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{pointer-events:none}.container{filter:drop-shadow(0px 4px 3px rgba(0,0,0,.2))}.message{transition:clip-path .3s cubic-bezier(.25,.46,.45,.94)}.message.expanded{clip-path:circle(100%)}.position-top{clip-path:circle(19px at 20px 20px);align-items:start;top:0;left:0}.position-bottom{clip-path:circle(19px at 20px calc(100% - 20px));align-items:end;bottom:0;left:0}.container ::ng-deep a{text-decoration:underline;font-weight:700}.container ::ng-deep a:hover{opacity:.85}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PopupAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-popup-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"h-full relative container\">\n  <div\n    class=\"pointer-events-auto absolute text-white flex flex-row p-2 rounded message\"\n    role=\"alert\"\n    [ngClass]=\"{\n      'position-bottom': position === 'bottom',\n      'position-top': position === 'top',\n      expanded: this.expanded,\n      'bg-red-500': type === 'danger',\n      'bg-yellow-500': type === 'warning',\n      'bg-blue-500': type === 'info'\n    }\"\n    (mouseenter)=\"expand()\"\n    (mouseleave)=\"expandAndClose()\"\n  >\n    <mat-icon class=\"material-symbols-outlined mr-2 shrink-0 select-none\">{{\n      icon\n    }}</mat-icon>\n    <div class=\"grow\" #content [ngClass]=\"{ invisible: !expanded }\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{pointer-events:none}.container{filter:drop-shadow(0px 4px 3px rgba(0,0,0,.2))}.message{transition:clip-path .3s cubic-bezier(.25,.46,.45,.94)}.message.expanded{clip-path:circle(100%)}.position-top{clip-path:circle(19px at 20px 20px);align-items:start;top:0;left:0}.position-bottom{clip-path:circle(19px at 20px calc(100% - 20px));align-items:end;bottom:0;left:0}.container ::ng-deep a{text-decoration:underline;font-weight:700}.container ::ng-deep a:hover{opacity:.85}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { icon: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], content: [{
+                type: ViewChild,
+                args: ['content']
+            }] } });
+
+class AutocompleteComponent {
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        this.clearOnSelection = false;
+        this.autoFocus = false;
+        this.itemSelected = new EventEmitter();
+        this.inputSubmitted = new EventEmitter();
+        this.inputCleared = new EventEmitter();
+        this.control = new UntypedFormControl();
+        this.subscription = new Subscription();
+        this.cancelEnter = true;
+        this.selectionSubject = new ReplaySubject(1);
+        this.lastInputValue$ = new ReplaySubject(1);
+        this.error = null;
+        this.displayWithFn = (item) => item;
+    }
+    ngOnChanges(changes) {
+        const { value } = changes;
+        if (value) {
+            const previousTextValue = this.displayWithFn(value.previousValue);
+            const currentTextValue = this.displayWithFn(value.currentValue);
+            if (previousTextValue !== currentTextValue) {
+                this.updateInputValue(value.currentValue);
+            }
+        }
+    }
+    ngOnInit() {
+        this.suggestions$ = merge(this.control.valueChanges.pipe(filter((value) => typeof value === 'string'), filter((value) => value.length > 2), debounceTime(400), distinctUntilChanged(), tap$1(() => (this.searching = true))), this.control.valueChanges.pipe(filter((value) => typeof value === 'object' && value.title), map$1((item) => item.title))).pipe(switchMap$1((value) => (value ? this.action(value) : of([]))), catchError((error) => {
+            this.error = error.message;
+            return of([]);
+        }), finalize(() => (this.searching = false)));
+        this.subscription = this.control.valueChanges.subscribe((any) => {
+            if (any !== '') {
+                this.cancelEnter = false;
+            }
+        });
+        this.control.valueChanges
+            .pipe(filter((value) => typeof value === 'string'))
+            .subscribe(this.lastInputValue$);
+    }
+    ngAfterViewInit() {
+        this.autocomplete.optionSelected.subscribe(this.selectionSubject);
+        if (this.autoFocus) {
+            this.inputRef.nativeElement.focus();
+            this.cdRef.detectChanges();
+        }
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    updateInputValue(value) {
+        if (value) {
+            this.control.setValue(value);
+        }
+        if (this.inputRef) {
+            this.inputRef.nativeElement.value = value?.title || '';
+        }
+    }
+    clear() {
+        this.inputRef.nativeElement.value = '';
+        this.inputCleared.emit();
+        this.selectionSubject
+            .pipe(take(1))
+            .subscribe((selection) => selection && selection.option.deselect());
+        this.inputRef.nativeElement.focus();
+        this.triggerRef.closePanel();
+    }
+    handleEnter(any) {
+        if (!this.cancelEnter) {
+            this.inputSubmitted.emit(any);
+            this.triggerRef.closePanel();
+        }
+    }
+    handleClickSearch() {
+        this.inputSubmitted.emit(this.inputRef.nativeElement.value);
+        this.triggerRef.closePanel();
+    }
+    handleSelection(event) {
+        this.cancelEnter = true;
+        this.itemSelected.emit(event.option.value);
+        if (this.clearOnSelection) {
+            this.lastInputValue$.pipe(first()).subscribe((any) => {
+                this.inputRef.nativeElement.value = any;
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: { placeholder: "placeholder", action: "action", value: "value", clearOnSelection: "clearOnSelection", autoFocus: "autoFocus", displayWithFn: "displayWithFn" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted", inputCleared: "inputCleared" }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <input\n    #searchInput\n    type=\"text\"\n    class=\"appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded w-full text-black shadow-xl focus:shadow-[0_0_24px_0_rgba(21,40,184,0.09)]\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"handleEnter(searchInput.value)\"\n  />\n  <button\n    type=\"button\"\n    class=\"text-primary-lightest hover:text-primary hover:bg-gray-50 absolute transition-all duration-100 clear-btn inset-y-0\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (click)=\"clear()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">close</mat-icon>\n  </button>\n  <button\n    type=\"button\"\n    class=\"text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 absolute transition-all duration-100 search-btn rounded-r inset-y-0 right-0\"\n    aria-label=\"Trigger search\"\n    (click)=\"handleClickSearch()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n  </button>\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"error_outline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</div>\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFn\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion\"\n  >\n    {{ displayWithFn(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: [":host{--input-height: 3.5em}.clear-btn{width:var(--input-height);right:var(--input-height);height:100%}.search-btn{width:var(--input-height);height:100%;border-left-width:.1em}mat-icon{width:100%;height:100%;padding:.65em;font-size:1.5em}input{height:var(--input-height);padding:1.05em;padding-right:calc(2 * var(--input-height))}input:placeholder-shown{text-overflow:ellipsis}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n  <input\n    #searchInput\n    type=\"text\"\n    class=\"appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded w-full text-black shadow-xl focus:shadow-[0_0_24px_0_rgba(21,40,184,0.09)]\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"handleEnter(searchInput.value)\"\n  />\n  <button\n    type=\"button\"\n    class=\"text-primary-lightest hover:text-primary hover:bg-gray-50 absolute transition-all duration-100 clear-btn inset-y-0\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (click)=\"clear()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">close</mat-icon>\n  </button>\n  <button\n    type=\"button\"\n    class=\"text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 absolute transition-all duration-100 search-btn rounded-r inset-y-0 right-0\"\n    aria-label=\"Trigger search\"\n    (click)=\"handleClickSearch()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n  </button>\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"error_outline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</div>\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFn\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion\"\n  >\n    {{ displayWithFn(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: [":host{--input-height: 3.5em}.clear-btn{width:var(--input-height);right:var(--input-height);height:100%}.search-btn{width:var(--input-height);height:100%;border-left-width:.1em}mat-icon{width:100%;height:100%;padding:.65em;font-size:1.5em}input{height:var(--input-height);padding:1.05em;padding-right:calc(2 * var(--input-height))}input:placeholder-shown{text-overflow:ellipsis}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
+                type: Input
+            }], action: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], clearOnSelection: [{
+                type: Input
+            }], autoFocus: [{
+                type: Input
+            }], itemSelected: [{
+                type: Output
+            }], inputSubmitted: [{
+                type: Output
+            }], inputCleared: [{
+                type: Output
+            }], triggerRef: [{
+                type: ViewChild,
+                args: [MatAutocompleteTrigger]
+            }], autocomplete: [{
+                type: ViewChild,
+                args: [MatAutocomplete]
+            }], inputRef: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], displayWithFn: [{
+                type: Input
+            }] } });
+
 class ButtonComponent {
     constructor() {
         this.btnClass = 'gn-ui-btn-default';
@@ -23862,16 +24273,237 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Output
             }] } });
 
-const DEFAULT_ROW_NUMBERS = 6;
-class DropdownSelectorComponent {
+class CheckToggleComponent {
     constructor() {
-        this.showTitle = true;
-        this.extraBtnClass = '';
-        this.minWidth = '';
-        this.selectValue = new EventEmitter();
-        this.overlayOpen = false;
-        this.overlayWidth = 'auto';
-        this.overlayMaxHeight = 'none';
+        this.color = 'primary';
+        this.toggled = new EventEmitter();
+    }
+    toggle(event) {
+        this.toggled.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CheckToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CheckToggleComponent, selector: "gn-ui-check-toggle", inputs: { title: "title", label: "label", value: "value", color: "color" }, outputs: { toggled: "toggled" }, ngImport: i0, template: "<label class=\"inline-flex relative items-start cursor-pointer\" [title]=\"title\">\n  <span class=\"shrink-0\">\n    <input\n      type=\"checkbox\"\n      class=\"sr-only peer\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"toggle($event)\"\n    />\n    <div\n      class=\"w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all\"\n      [class]=\"\n        color === 'secondary'\n          ? 'peer-focus:ring-secondary-lighter peer-checked:bg-secondary'\n          : 'peer-focus:ring-primary-lighter peer-checked:bg-primary'\n      \"\n    ></div>\n  </span>\n  <span class=\"ml-3 mt-[2px] text-sm font-medium\">{{ label }}</span>\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CheckToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-check-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"inline-flex relative items-start cursor-pointer\" [title]=\"title\">\n  <span class=\"shrink-0\">\n    <input\n      type=\"checkbox\"\n      class=\"sr-only peer\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"toggle($event)\"\n    />\n    <div\n      class=\"w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all\"\n      [class]=\"\n        color === 'secondary'\n          ? 'peer-focus:ring-secondary-lighter peer-checked:bg-secondary'\n          : 'peer-focus:ring-primary-lighter peer-checked:bg-primary'\n      \"\n    ></div>\n  </span>\n  <span class=\"ml-3 mt-[2px] text-sm font-medium\">{{ label }}</span>\n</label>\n" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], toggled: [{
+                type: Output
+            }] } });
+
+class CheckboxComponent {
+    constructor() {
+        this.type = 'default';
+        this.checked = false;
+        this.indeterminate = false;
+        this.changed = new EventEmitter();
+    }
+    get classList() {
+        return `${this.type}`;
+    }
+    handleClick(event) {
+        event.stopPropagation();
+        this.checked = !this.checked;
+        this.changed.emit(this.checked);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CheckboxComponent, selector: "gn-ui-checkbox", inputs: { type: "type", checked: "checked", indeterminate: "indeterminate" }, outputs: { changed: "changed" }, ngImport: i0, template: "<mat-checkbox\n  class=\"cursor-pointer\"\n  [class]=\"classList\"\n  [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$4.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-checkbox\n  class=\"cursor-pointer\"\n  [class]=\"classList\"\n  [checked]=\"checked\"\n  [indeterminate]=\"indeterminate\"\n  (click)=\"handleClick($event)\"\n></mat-checkbox>\n", styles: [".default{--gn-ui-checkbox-color: var(--color-main)}.secondary{--gn-ui-checkbox-color: var(--color-secondary)}.primary{--gn-ui-checkbox-color: var(--color-primary)}mat-checkbox{--mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-state-layer-color: var( --gn-ui-checkbox-color )}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }] } });
+
+class ChipsInputComponent {
+    onChange(event) {
+        this.rawChange.next(event);
+    }
+    constructor(http, translate) {
+        this.http = http;
+        this.translate = translate;
+        this.required = false;
+        this.loadOnce = false;
+        this.autocompleteItems = [];
+        this.invalid = false;
+        this.items = [];
+        this.requestAutocompleteItems = (text) => {
+            if (this.url) {
+                if (this.loadOnce && this.loadedItems) {
+                    return this.loadedItems;
+                }
+                const url = this.url(text);
+                const lang = LANG_2_TO_3_MAPPER[this.translate.currentLang.slice(0, 2)];
+                return this.http
+                    .get(url.replace('${lang}', lang))
+                    .pipe(map$1((item) => item.map((i) => i.values[lang])));
+            }
+            else {
+                return of(this.autocompleteItems || []);
+            }
+        };
+        this.rawChange = new Subject();
+        this.itemsChange = this.rawChange.pipe(distinctUntilChanged());
+        this.subscription = new Subscription();
+    }
+    ngOnInit() {
+        if (this.loadOnce) {
+            this.loadedItems = this.requestAutocompleteItems('*').pipe(shareReplay(1));
+        }
+        this.items = this.selectedItems;
+        this.subscription = this.rawChange
+            .pipe(tap$1((v) => (this.invalid = v.length === 0)))
+            .subscribe();
+        this.rawChange.next(this.items);
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ChipsInputComponent, deps: [{ token: i1.HttpClient }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ChipsInputComponent, selector: "gn-ui-chips-input", inputs: { url: "url", placeholder: "placeholder", selectedItems: "selectedItems", required: "required", loadOnce: "loadOnce", autocompleteItems: "autocompleteItems" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<tag-input\n  [ngModel]=\"items\"\n  (ngModelChange)=\"onChange($event)\"\n  onlyFromAutocomplete=\"true\"\n  [placeholder]=\"placeholder\"\n  [secondaryPlaceholder]=\"placeholder\"\n  [ripple]=\"false\"\n  [animationDuration]=\"{ enter: '0ms', leave: '0ms' }\"\n  [onTextChangeDebounce]=\"100\"\n  class=\"border-2 border-primary h-full rounded-lg p-2 bg-white text-sm focus:border-primary\"\n  [ngClass]=\"{ invalid: invalid }\"\n>\n  <tag-input-dropdown\n    [autocompleteObservable]=\"requestAutocompleteItems\"\n    [minimumTextLength]=\"0\"\n    [keepOpen]=\"false\"\n    [showDropdownIfEmpty]=\"true\"\n  >\n    <ng-template let-item=\"item\" let-index=\"index\">\n      {{ item.display }}\n    </ng-template>\n  </tag-input-dropdown>\n</tag-input>\n", styles: ["tag-input::ng-deep .ng2-tag-input{border-bottom:none}tag-input::ng-deep .ng2-tag-input.ng2-tag-input--focused{border-bottom:none}tag-input::ng-deep tag{border-radius:5px;background:var(--color-primary-lightest);font-family:inherit;align-content:center;font-style:italic}tag-input::ng-deep tag::ng-deep:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,tag-input::ng-deep tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover{background:var(--color-primary)!important}tag-input::ng-deep .tag__text{padding-right:7px}tag-input::ng-deep div,tag-input::ng-deep form{height:100%}tag-input.invalid{border-color:var(--color-secondary)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.TagInputComponent, selector: "tag-input", inputs: ["separatorKeys", "separatorKeyCodes", "placeholder", "secondaryPlaceholder", "maxItems", "validators", "asyncValidators", "onlyFromAutocomplete", "errorMessages", "theme", "onTextChangeDebounce", "inputId", "inputClass", "clearOnBlur", "hideForm", "addOnBlur", "addOnPaste", "pasteSplitPattern", "blinkIfDupe", "removable", "editable", "allowDupes", "modelAsStrings", "trimTags", "inputText", "ripple", "tabindex", "disable", "dragZone", "onRemoving", "onAdding", "animationDuration"], outputs: ["onAdd", "onRemove", "onSelect", "onFocus", "onBlur", "onTextChange", "onPaste", "onValidationError", "onTagEdited", "inputTextChange"] }, { kind: "component", type: i5$1.TagInputDropdown, selector: "tag-input-dropdown", inputs: ["offset", "focusFirstElement", "showDropdownIfEmpty", "autocompleteObservable", "minimumTextLength", "limitItemsTo", "displayBy", "identifyBy", "matchingFn", "appendToBody", "keepOpen", "dynamicUpdate", "zIndex", "autocompleteItems"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ChipsInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-chips-input', template: "<tag-input\n  [ngModel]=\"items\"\n  (ngModelChange)=\"onChange($event)\"\n  onlyFromAutocomplete=\"true\"\n  [placeholder]=\"placeholder\"\n  [secondaryPlaceholder]=\"placeholder\"\n  [ripple]=\"false\"\n  [animationDuration]=\"{ enter: '0ms', leave: '0ms' }\"\n  [onTextChangeDebounce]=\"100\"\n  class=\"border-2 border-primary h-full rounded-lg p-2 bg-white text-sm focus:border-primary\"\n  [ngClass]=\"{ invalid: invalid }\"\n>\n  <tag-input-dropdown\n    [autocompleteObservable]=\"requestAutocompleteItems\"\n    [minimumTextLength]=\"0\"\n    [keepOpen]=\"false\"\n    [showDropdownIfEmpty]=\"true\"\n  >\n    <ng-template let-item=\"item\" let-index=\"index\">\n      {{ item.display }}\n    </ng-template>\n  </tag-input-dropdown>\n</tag-input>\n", styles: ["tag-input::ng-deep .ng2-tag-input{border-bottom:none}tag-input::ng-deep .ng2-tag-input.ng2-tag-input--focused{border-bottom:none}tag-input::ng-deep tag{border-radius:5px;background:var(--color-primary-lightest);font-family:inherit;align-content:center;font-style:italic}tag-input::ng-deep tag::ng-deep:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,tag-input::ng-deep tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover{background:var(--color-primary)!important}tag-input::ng-deep .tag__text{padding-right:7px}tag-input::ng-deep div,tag-input::ng-deep form{height:100%}tag-input.invalid{border-color:var(--color-secondary)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i1$1.TranslateService }]; }, propDecorators: { url: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], selectedItems: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], loadOnce: [{
+                type: Input
+            }], autocompleteItems: [{
+                type: Input
+            }], itemsChange: [{
+                type: Output
+            }] } });
+
+class CopyTextButtonComponent {
+    constructor() {
+        this.displayText = true;
+        this.rows = 1;
+    }
+    copyText(event) {
+        navigator.clipboard.writeText(this.text);
+        event.target.blur();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CopyTextButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: { text: "text", tooltipText: "tooltipText", displayText: "displayText", rows: "rows" }, ngImport: i0, template: "<div class=\"flex\">\n  <input\n    *ngIf=\"displayText && rows <= 1\"\n    type=\"text\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate\"\n    value=\"{{ text }}\"\n    readonly\n  />\n  <textarea\n    *ngIf=\"displayText && rows > 1\"\n    [rows]=\"rows\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max\"\n    readonly\n    >{{ text }}</textarea\n  >\n  <button\n    type=\"button\"\n    (click)=\"copyText($event)\"\n    [ngClass]=\"{\n      'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n        displayText\n    }\"\n    mat-raised-button\n    [matTooltip]=\"tooltipText\"\n    matTooltipPosition=\"above\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n      >content_copy</mat-icon\n    >\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CopyTextButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-copy-text-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\n  <input\n    *ngIf=\"displayText && rows <= 1\"\n    type=\"text\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate\"\n    value=\"{{ text }}\"\n    readonly\n  />\n  <textarea\n    *ngIf=\"displayText && rows > 1\"\n    [rows]=\"rows\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max\"\n    readonly\n    >{{ text }}</textarea\n  >\n  <button\n    type=\"button\"\n    (click)=\"copyText($event)\"\n    [ngClass]=\"{\n      'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n        displayText\n    }\"\n    mat-raised-button\n    [matTooltip]=\"tooltipText\"\n    matTooltipPosition=\"above\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n      >content_copy</mat-icon\n    >\n  </button>\n</div>\n" }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], tooltipText: [{
+                type: Input
+            }], displayText: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }] } });
+
+class DatePickerComponent {
+    constructor() {
+        this.dateChange = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DatePickerComponent, isStandalone: true, selector: "gn-ui-date-picker", inputs: { date: "date" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div\n  class=\"flex items-center justify-between pl-3 rounded-lg border border-gray-300 bg-white\"\n>\n  <input\n    [matDatepicker]=\"picker\"\n    [value]=\"date\"\n    (dateChange)=\"dateChange.emit($event.value)\"\n  />\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n</div>\n<mat-datepicker #picker></mat-datepicker>\n", styles: ["mat-datepicker-toggle{@apply text-primary;}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-date-picker', standalone: true, imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule], template: "<div\n  class=\"flex items-center justify-between pl-3 rounded-lg border border-gray-300 bg-white\"\n>\n  <input\n    [matDatepicker]=\"picker\"\n    [value]=\"date\"\n    (dateChange)=\"dateChange.emit($event.value)\"\n  />\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n</div>\n<mat-datepicker #picker></mat-datepicker>\n", styles: ["mat-datepicker-toggle{@apply text-primary;}\n"] }]
+        }], propDecorators: { date: [{
+                type: Input
+            }], dateChange: [{
+                type: Output
+            }] } });
+
+class DateRangePickerComponent {
+    startDateSelected(event) {
+        this.startDate = event.value;
+    }
+    endDateSelected(event) {
+        this.endDate = event.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DateRangePickerComponent, isStandalone: true, selector: "gn-ui-date-range-picker", ngImport: i0, template: "<div\n  class=\"flex items-center justify-center w-64 h-11 rounded-lg border border-gray-300 bg-white\"\n>\n  <div class=\"w-48 flex justify-between\">\n    <mat-date-range-input [rangePicker]=\"picker\" class=\"w-full\">\n      <input\n        class=\"w-24 text-black font-basierCircle text-base font-medium text-center\"\n        matStartDate\n        placeholder=\"Start date\"\n        (dateInput)=\"startDateSelected($event)\"\n      />\n      <input\n        class=\"w-24 text-black font-basierCircle text-base font-medium text-center\"\n        matEndDate\n        placeholder=\"End date\"\n        (dateInput)=\"endDateSelected($event)\"\n      />\n    </mat-date-range-input>\n  </div>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon>calendar_today</mat-icon>\n  </mat-datepicker-toggle>\n  <mat-date-range-picker #picker></mat-date-range-picker>\n</div>\n", styles: ["mat-datepicker-toggle{@apply text-primary;}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$3.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$3.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DateRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-date-range-picker', standalone: true, imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule], template: "<div\n  class=\"flex items-center justify-center w-64 h-11 rounded-lg border border-gray-300 bg-white\"\n>\n  <div class=\"w-48 flex justify-between\">\n    <mat-date-range-input [rangePicker]=\"picker\" class=\"w-full\">\n      <input\n        class=\"w-24 text-black font-basierCircle text-base font-medium text-center\"\n        matStartDate\n        placeholder=\"Start date\"\n        (dateInput)=\"startDateSelected($event)\"\n      />\n      <input\n        class=\"w-24 text-black font-basierCircle text-base font-medium text-center\"\n        matEndDate\n        placeholder=\"End date\"\n        (dateInput)=\"endDateSelected($event)\"\n      />\n    </mat-date-range-input>\n  </div>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon>calendar_today</mat-icon>\n  </mat-datepicker-toggle>\n  <mat-date-range-picker #picker></mat-date-range-picker>\n</div>\n", styles: ["mat-datepicker-toggle{@apply text-primary;}\n"] }]
+        }] });
+
+const placeholder = 'dropFile';
+marker('dropFile');
+class DragAndDropFileInputComponent {
+    constructor() {
+        this.placeholder = placeholder;
+        this.accept = '*';
+        this.fileChange = new EventEmitter();
+        this.selectedFile = null;
+    }
+    get fileName() {
+        return this.selectedFile && this.selectedFile.name;
+    }
+    selectFile(event) {
+        this.selectedFile = event.addedFiles[0];
+        this.fileChange.emit(this.selectedFile);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DragAndDropFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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$3.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DragAndDropFileInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-drag-and-drop-file-input', 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"] }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], fileChange: [{
+                type: Output
+            }] } });
+
+class DropdownMultiselectComponent {
+    get hasSelectedChoices() {
+        return this.selected.length > 0;
+    }
+    get selectedChoices() {
+        return this.choices.filter((choice) => this.selected.indexOf(choice.value) > -1);
+    }
+    get filteredChoicesByText() {
+        if (!this.searchInputValue)
+            return this.choices;
+        const filter = createFuzzyFilter(this.searchInputValue);
+        return this.choices.filter((choice) => filter(choice.label));
+    }
+    get focusedIndex() {
+        return this.checkboxes.reduce((prev, curr, curIndex) => curr.nativeElement === document.activeElement ? curIndex : prev, -1);
+    }
+    constructor(scrollStrategies) {
+        this.scrollStrategies = scrollStrategies;
+        this.selected = [];
+        this.allowSearch = true;
+        this.searchInputValue = '';
+        this.selectValues = new EventEmitter();
         this.overlayPositions = [
             {
                 originX: 'start',
@@ -23888,31 +24520,16 @@ class DropdownSelectorComponent {
                 offsetY: -8,
             },
         ];
+        this.scrollStrategy = this.scrollStrategies.reposition();
+        this.overlayOpen = false;
+        this.overlayWidth = 'auto';
+        this.overlayMaxHeight = 'none';
+        this.id = `dropdown-multiselect-${Math.floor(Math.random() * 10000)}`;
     }
-    get selectedChoice() {
-        return (this.choices.find((choice) => choice.value === this.selected) ??
-            this.choices[0]);
-    }
-    get id() {
-        return this.title.toLowerCase().replace(/[^a-z]+/g, '-');
-    }
-    getChoiceLabel() {
-        return this.selectedChoice?.label;
-    }
-    ngOnInit() {
-        if (!this.maxRows)
-            this.maxRows = DEFAULT_ROW_NUMBERS;
-        if (!this.choices || this.choices.length === 0) {
-            this.choices = [];
-        }
-    }
-    isSelected(choice) {
-        return choice === this.selectedChoice;
-    }
-    onSelectValue(choice) {
-        this.closeOverlay();
-        this.selected = choice.value;
-        this.selectValue.emit(this.selected);
+    setFocus() {
+        setTimeout(() => {
+            this.searchFieldInput.nativeElement.focus();
+        }, 0);
     }
     openOverlay() {
         this.overlayWidth =
@@ -23922,20 +24539,16 @@ class DropdownSelectorComponent {
             ? `${this.maxRows * 29 + 60}px`
             : 'none';
         this.overlayOpen = true;
+        this.setFocus();
+        // this will wait for the checkboxes to be referenced and the overlay to be attached
         return Promise.all([
-            firstValueFrom(this.overlay.attach),
-            firstValueFrom(this.choiceInputs.changes),
+            this.overlay.attach.pipe(take(1)).toPromise(),
+            this.checkboxes.changes.pipe(take(1)).toPromise(),
         ]);
     }
     closeOverlay() {
         this.overlayOpen = false;
     }
-    focusFirstItem() {
-        this.choiceInputs.get(0).nativeElement.focus();
-    }
-    focusLastItem() {
-        this.choiceInputs.get(this.choiceInputs.length - 1).nativeElement.focus();
-    }
     async handleTriggerKeydown(event) {
         const keyCode = event.code;
         const isOpenKey = keyCode === 'ArrowDown' ||
@@ -23944,12 +24557,10 @@ class DropdownSelectorComponent {
             keyCode === 'ArrowRight' ||
             keyCode === 'Enter' ||
             keyCode === 'Space';
-        const isCloseKey = keyCode === 'Escape';
-        if (isOpenKey) {
+        const isCloseKey = keyCode === 'Escape' || isOpenKey;
+        if (!this.overlayOpen && isOpenKey) {
             event.preventDefault();
-            if (!this.overlayOpen) {
-                await this.openOverlay();
-            }
+            await this.openOverlay();
             if (keyCode === 'ArrowLeft' || keyCode === 'ArrowUp')
                 this.focusLastItem();
             else
@@ -23966,7 +24577,11 @@ class DropdownSelectorComponent {
         const keyCode = event.code;
         if (keyCode === 'ArrowDown' || keyCode === 'ArrowRight') {
             event.preventDefault();
-            this.shiftItemFocus(1);
+            if (document.activeElement['type'] !== 'checkbox') {
+                this.focusFirstItem();
+            }
+            else
+                this.shiftItemFocus(1);
         }
         else if (keyCode === 'ArrowLeft' || keyCode === 'ArrowUp') {
             event.preventDefault();
@@ -23976,47 +24591,61 @@ class DropdownSelectorComponent {
             this.closeOverlay();
         }
     }
-    shiftItemFocus(shift) {
-        const index = this.focusedIndex;
-        if (index === -1)
+    focusFirstItem() {
+        this.checkboxes.get(0).nativeElement.focus();
+    }
+    focusLastItem() {
+        this.checkboxes.get(this.checkboxes.length - 1).nativeElement.focus();
+    }
+    shiftItemFocus(shift) {
+        const index = this.focusedIndex;
+        if (index === -1)
             return;
-        const max = this.choiceInputs.length;
+        const max = this.checkboxes.length;
         // modulo, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder
         const newIndex = (((index + shift) % max) + max) % max;
-        this.choiceInputs.get(newIndex).nativeElement.focus();
+        this.checkboxes.get(newIndex).nativeElement.focus();
     }
-    get focusedIndex() {
-        return this.choiceInputs.reduce((prev, curr, curIndex) => curr.nativeElement === document.activeElement ? curIndex : prev, -1);
+    isSelected(choice) {
+        return this.selected.indexOf(choice.value) > -1;
     }
-    selectIfEnter(event, choice) {
-        if (event.code === 'Enter') {
-            event.preventDefault();
-            this.onSelectValue(choice);
-        }
+    select(choice, selected) {
+        this.selected = selected
+            ? [...this.selected.filter((v) => v !== choice.value), choice.value]
+            : this.selected.filter((v) => v !== choice.value);
+        this.selectValues.emit(this.selected);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DropdownSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: { title: "title", showTitle: "showTitle", ariaName: "ariaName", choices: "choices", selected: "selected", maxRows: "maxRows", extraBtnClass: "extraBtnClass", minWidth: "minWidth" }, outputs: { selectValue: "selectValue" }, 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    extraClass=\"bg-background !p-[8px] !pl-[16px] flex flex-row w-full {{\n      extraBtnClass\n    }}\"\n    [title]=\"title\"\n    [attr.aria-owns]=\"id\"\n    (buttonClick)=\"openOverlay()\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\n    <div class=\"grow font-medium truncate py-1 mr-2 text-left\">\n      {{ getChoiceLabel() | translate }}\n    </div>\n    <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n      <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n      <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n    </mat-icon>\n  </gn-ui-button>\n</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: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    toggle(choice) {
+        this.select(choice, !this.isSelected(choice));
+    }
+    clearSelection(event) {
+        this.selectValues.emit([]);
+        propagateToDocumentOnly(event);
+    }
+    clearSearchInputValue(event) {
+        this.searchInputValue = '';
+        propagateToDocumentOnly(event);
+        this.setFocus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DropdownMultiselectComponent, deps: [{ token: i1$5.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DropdownMultiselectComponent, selector: "gn-ui-dropdown-multiselect", inputs: { title: "title", choices: "choices", selected: "selected", allowSearch: "allowSearch", maxRows: "maxRows", searchInputValue: "searchInputValue" }, outputs: { selectValues: "selectValues" }, viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, read: ElementRef }, { propertyName: "searchFieldInput", first: true, predicate: ["searchFieldInput"], descendants: true }, { propertyName: "checkboxes", predicate: ["checkBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"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=\"shrink-0 rounded-full text-primary bg-primary-opacity-25 text-white font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n    >\n      {{ selected.length }}\n    </div>\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    <mat-icon\n      class=\"material-symbols-outlined shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n      *ngIf=\"hasSelectedChoices && !overlayOpen\"\n      (click)=\"clearSelection($event)\"\n    >\n      close\n    </mat-icon>\n  </button>\n  <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n    <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n    <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n  </mat-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      <button\n        type=\"button\"\n        *ngFor=\"let selected of selectedChoices\"\n        [title]=\"selected.label\"\n        class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n        (click)=\"select(selected, false)\"\n      >\n        <div class=\"text-sm truncate leading-[26px] px-2\">\n          {{ selected.label }}\n        </div>\n        <div\n          class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[12px] !w-[12px] text-[12px]\"\n          >\n            close</mat-icon\n          >\n        </div>\n      </button>\n\n      <div *ngIf=\"allowSearch\" class=\"w-[50%] relative grow shrink\">\n        <input\n          #searchFieldInput\n          class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n          [(ngModel)]=\"searchInputValue\"\n          [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n        />\n        <button\n          *ngIf=\"!!searchInputValue\"\n          class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n          (click)=\"clearSearchInputValue($event)\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[10px] !w-[12px] text-[12px]\"\n          >\n            close\n          </mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <label\n      *ngFor=\"let choice of filteredChoicesByText\"\n      [title]=\"choice.label\"\n      class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n    >\n      <input\n        class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n        type=\"checkbox\"\n        #checkBox\n        [checked]=\"isSelected(choice)\"\n        (change)=\"select(choice, checkBox.checked)\"\n      />\n      <span class=\"ml-[8px] text-[14px] truncate\">\n        {{ choice.label }}\n      </span>\n    </label>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DropdownSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DropdownMultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-dropdown-selector', changeDetection: ChangeDetectionStrategy.OnPush, 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    extraClass=\"bg-background !p-[8px] !pl-[16px] flex flex-row w-full {{\n      extraBtnClass\n    }}\"\n    [title]=\"title\"\n    [attr.aria-owns]=\"id\"\n    (buttonClick)=\"openOverlay()\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\n    <div class=\"grow font-medium truncate py-1 mr-2 text-left\">\n      {{ getChoiceLabel() | translate }}\n    </div>\n    <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n      <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n      <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n    </mat-icon>\n  </gn-ui-button>\n</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" }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], showTitle: [{
-                type: Input
-            }], ariaName: [{
+            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=\"shrink-0 rounded-full text-primary bg-primary-opacity-25 text-white font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n    >\n      {{ selected.length }}\n    </div>\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    <mat-icon\n      class=\"material-symbols-outlined shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n      *ngIf=\"hasSelectedChoices && !overlayOpen\"\n      (click)=\"clearSelection($event)\"\n    >\n      close\n    </mat-icon>\n  </button>\n  <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n    <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n    <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n  </mat-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      <button\n        type=\"button\"\n        *ngFor=\"let selected of selectedChoices\"\n        [title]=\"selected.label\"\n        class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n        (click)=\"select(selected, false)\"\n      >\n        <div class=\"text-sm truncate leading-[26px] px-2\">\n          {{ selected.label }}\n        </div>\n        <div\n          class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[12px] !w-[12px] text-[12px]\"\n          >\n            close</mat-icon\n          >\n        </div>\n      </button>\n\n      <div *ngIf=\"allowSearch\" class=\"w-[50%] relative grow shrink\">\n        <input\n          #searchFieldInput\n          class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n          [(ngModel)]=\"searchInputValue\"\n          [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n        />\n        <button\n          *ngIf=\"!!searchInputValue\"\n          class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n          (click)=\"clearSearchInputValue($event)\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[10px] !w-[12px] text-[12px]\"\n          >\n            close\n          </mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <label\n      *ngFor=\"let choice of filteredChoicesByText\"\n      [title]=\"choice.label\"\n      class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n    >\n      <input\n        class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n        type=\"checkbox\"\n        #checkBox\n        [checked]=\"isSelected(choice)\"\n        (change)=\"select(choice, checkBox.checked)\"\n      />\n      <span class=\"ml-[8px] text-[14px] truncate\">\n        {{ choice.label }}\n      </span>\n    </label>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$5.ScrollStrategyOptions }]; }, propDecorators: { title: [{
                 type: Input
             }], choices: [{
                 type: Input
             }], selected: [{
                 type: Input
-            }], maxRows: [{
+            }], allowSearch: [{
                 type: Input
-            }], extraBtnClass: [{
+            }], maxRows: [{
                 type: Input
-            }], minWidth: [{
+            }], searchInputValue: [{
                 type: Input
-            }], selectValue: [{
+            }], selectValues: [{
                 type: Output
             }], overlayOrigin: [{
                 type: ViewChild,
@@ -24024,33 +24653,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             }], overlay: [{
                 type: ViewChild,
                 args: [CdkConnectedOverlay]
-            }], choiceInputs: [{
+            }], overlayContainer: [{
+                type: ViewChild,
+                args: ['overlayContainer', { read: ElementRef }]
+            }], searchFieldInput: [{
+                type: ViewChild,
+                args: ['searchFieldInput']
+            }], checkboxes: [{
                 type: ViewChildren,
-                args: ['choiceInputs', { read: ElementRef }]
+                args: ['checkBox', { read: ElementRef }]
             }] } });
 
-class DropdownMultiselectComponent {
-    get hasSelectedChoices() {
-        return this.selected.length > 0;
-    }
-    get selectedChoices() {
-        return this.choices.filter((choice) => this.selected.indexOf(choice.value) > -1);
-    }
-    get filteredChoicesByText() {
-        if (!this.searchInputValue)
-            return this.choices;
-        const filter = createFuzzyFilter(this.searchInputValue);
-        return this.choices.filter((choice) => filter(choice.label));
-    }
-    get focusedIndex() {
-        return this.checkboxes.reduce((prev, curr, curIndex) => curr.nativeElement === document.activeElement ? curIndex : prev, -1);
-    }
-    constructor(scrollStrategies) {
-        this.scrollStrategies = scrollStrategies;
-        this.selected = [];
-        this.allowSearch = true;
-        this.searchInputValue = '';
-        this.selectValues = new EventEmitter();
+const DEFAULT_ROW_NUMBERS = 6;
+class DropdownSelectorComponent {
+    constructor() {
+        this.showTitle = true;
+        this.extraBtnClass = '';
+        this.minWidth = '';
+        this.selectValue = new EventEmitter();
+        this.overlayOpen = false;
+        this.overlayWidth = 'auto';
+        this.overlayMaxHeight = 'none';
         this.overlayPositions = [
             {
                 originX: 'start',
@@ -24067,16 +24690,31 @@ class DropdownMultiselectComponent {
                 offsetY: -8,
             },
         ];
-        this.scrollStrategy = this.scrollStrategies.reposition();
-        this.overlayOpen = false;
-        this.overlayWidth = 'auto';
-        this.overlayMaxHeight = 'none';
-        this.id = `dropdown-multiselect-${Math.floor(Math.random() * 10000)}`;
     }
-    setFocus() {
-        setTimeout(() => {
-            this.searchFieldInput.nativeElement.focus();
-        }, 0);
+    get selectedChoice() {
+        return (this.choices.find((choice) => choice.value === this.selected) ??
+            this.choices[0]);
+    }
+    get id() {
+        return this.title.toLowerCase().replace(/[^a-z]+/g, '-');
+    }
+    getChoiceLabel() {
+        return this.selectedChoice?.label;
+    }
+    ngOnInit() {
+        if (!this.maxRows)
+            this.maxRows = DEFAULT_ROW_NUMBERS;
+        if (!this.choices || this.choices.length === 0) {
+            this.choices = [];
+        }
+    }
+    isSelected(choice) {
+        return choice === this.selectedChoice;
+    }
+    onSelectValue(choice) {
+        this.closeOverlay();
+        this.selected = choice.value;
+        this.selectValue.emit(this.selected);
     }
     openOverlay() {
         this.overlayWidth =
@@ -24086,16 +24724,20 @@ class DropdownMultiselectComponent {
             ? `${this.maxRows * 29 + 60}px`
             : 'none';
         this.overlayOpen = true;
-        this.setFocus();
-        // this will wait for the checkboxes to be referenced and the overlay to be attached
         return Promise.all([
-            this.overlay.attach.pipe(take(1)).toPromise(),
-            this.checkboxes.changes.pipe(take(1)).toPromise(),
+            firstValueFrom(this.overlay.attach),
+            firstValueFrom(this.choiceInputs.changes),
         ]);
     }
     closeOverlay() {
         this.overlayOpen = false;
     }
+    focusFirstItem() {
+        this.choiceInputs.get(0).nativeElement.focus();
+    }
+    focusLastItem() {
+        this.choiceInputs.get(this.choiceInputs.length - 1).nativeElement.focus();
+    }
     async handleTriggerKeydown(event) {
         const keyCode = event.code;
         const isOpenKey = keyCode === 'ArrowDown' ||
@@ -24104,10 +24746,12 @@ class DropdownMultiselectComponent {
             keyCode === 'ArrowRight' ||
             keyCode === 'Enter' ||
             keyCode === 'Space';
-        const isCloseKey = keyCode === 'Escape' || isOpenKey;
-        if (!this.overlayOpen && isOpenKey) {
+        const isCloseKey = keyCode === 'Escape';
+        if (isOpenKey) {
             event.preventDefault();
-            await this.openOverlay();
+            if (!this.overlayOpen) {
+                await this.openOverlay();
+            }
             if (keyCode === 'ArrowLeft' || keyCode === 'ArrowUp')
                 this.focusLastItem();
             else
@@ -24124,11 +24768,7 @@ class DropdownMultiselectComponent {
         const keyCode = event.code;
         if (keyCode === 'ArrowDown' || keyCode === 'ArrowRight') {
             event.preventDefault();
-            if (document.activeElement['type'] !== 'checkbox') {
-                this.focusFirstItem();
-            }
-            else
-                this.shiftItemFocus(1);
+            this.shiftItemFocus(1);
         }
         else if (keyCode === 'ArrowLeft' || keyCode === 'ArrowUp') {
             event.preventDefault();
@@ -24138,61 +24778,53 @@ class DropdownMultiselectComponent {
             this.closeOverlay();
         }
     }
-    focusFirstItem() {
-        this.checkboxes.get(0).nativeElement.focus();
-    }
-    focusLastItem() {
-        this.checkboxes.get(this.checkboxes.length - 1).nativeElement.focus();
-    }
     shiftItemFocus(shift) {
         const index = this.focusedIndex;
         if (index === -1)
             return;
-        const max = this.checkboxes.length;
+        const max = this.choiceInputs.length;
         // modulo, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder
         const newIndex = (((index + shift) % max) + max) % max;
-        this.checkboxes.get(newIndex).nativeElement.focus();
-    }
-    isSelected(choice) {
-        return this.selected.indexOf(choice.value) > -1;
-    }
-    select(choice, selected) {
-        this.selected = selected
-            ? [...this.selected.filter((v) => v !== choice.value), choice.value]
-            : this.selected.filter((v) => v !== choice.value);
-        this.selectValues.emit(this.selected);
-    }
-    toggle(choice) {
-        this.select(choice, !this.isSelected(choice));
+        this.choiceInputs.get(newIndex).nativeElement.focus();
     }
-    clearSelection(event) {
-        this.selectValues.emit([]);
-        propagateToDocumentOnly(event);
+    get focusedIndex() {
+        return this.choiceInputs.reduce((prev, curr, curIndex) => curr.nativeElement === document.activeElement ? curIndex : prev, -1);
     }
-    clearSearchInputValue(event) {
-        this.searchInputValue = '';
-        propagateToDocumentOnly(event);
-        this.setFocus();
+    selectIfEnter(event, choice) {
+        if (event.code === 'Enter') {
+            event.preventDefault();
+            this.onSelectValue(choice);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DropdownMultiselectComponent, deps: [{ token: i1$4.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DropdownMultiselectComponent, selector: "gn-ui-dropdown-multiselect", inputs: { title: "title", choices: "choices", selected: "selected", allowSearch: "allowSearch", maxRows: "maxRows", searchInputValue: "searchInputValue" }, outputs: { selectValues: "selectValues" }, viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, read: ElementRef }, { propertyName: "searchFieldInput", first: true, predicate: ["searchFieldInput"], descendants: true }, { propertyName: "checkboxes", predicate: ["checkBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"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=\"shrink-0 rounded-full text-primary bg-primary-opacity-25 text-white font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n    >\n      {{ selected.length }}\n    </div>\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    <mat-icon\n      class=\"material-symbols-outlined shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n      *ngIf=\"hasSelectedChoices && !overlayOpen\"\n      (click)=\"clearSelection($event)\"\n    >\n      close\n    </mat-icon>\n  </button>\n  <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n    <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n    <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n  </mat-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      <button\n        type=\"button\"\n        *ngFor=\"let selected of selectedChoices\"\n        [title]=\"selected.label\"\n        class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n        (click)=\"select(selected, false)\"\n      >\n        <div class=\"text-sm truncate leading-[26px] px-2\">\n          {{ selected.label }}\n        </div>\n        <div\n          class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[12px] !w-[12px] text-[12px]\"\n          >\n            close</mat-icon\n          >\n        </div>\n      </button>\n\n      <div *ngIf=\"allowSearch\" class=\"w-[50%] relative grow shrink\">\n        <input\n          #searchFieldInput\n          class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n          [(ngModel)]=\"searchInputValue\"\n          [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n        />\n        <button\n          *ngIf=\"!!searchInputValue\"\n          class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n          (click)=\"clearSearchInputValue($event)\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[10px] !w-[12px] text-[12px]\"\n          >\n            close\n          </mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <label\n      *ngFor=\"let choice of filteredChoicesByText\"\n      [title]=\"choice.label\"\n      class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n    >\n      <input\n        class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n        type=\"checkbox\"\n        #checkBox\n        [checked]=\"isSelected(choice)\"\n        (change)=\"select(choice, checkBox.checked)\"\n      />\n      <span class=\"ml-[8px] text-[14px] truncate\">\n        {{ choice.label }}\n      </span>\n    </label>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DropdownSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DropdownSelectorComponent, isStandalone: true, selector: "gn-ui-dropdown-selector", inputs: { title: "title", showTitle: "showTitle", ariaName: "ariaName", choices: "choices", selected: "selected", maxRows: "maxRows", extraBtnClass: "extraBtnClass", minWidth: "minWidth" }, outputs: { selectValue: "selectValue" }, 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    extraClass=\"bg-background !p-[8px] !pl-[16px] flex flex-row w-full {{\n      extraBtnClass\n    }}\"\n    [title]=\"title\"\n    [attr.aria-owns]=\"id\"\n    (buttonClick)=\"openOverlay()\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\n    <div class=\"grow font-medium truncate py-1 mr-2 text-left\">\n      {{ getChoiceLabel() | translate }}\n    </div>\n    <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n      <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n      <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n    </mat-icon>\n  </gn-ui-button>\n</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$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DropdownMultiselectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DropdownSelectorComponent, 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=\"shrink-0 rounded-full text-primary bg-primary-opacity-25 text-white font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n    >\n      {{ selected.length }}\n    </div>\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    <mat-icon\n      class=\"material-symbols-outlined shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n      *ngIf=\"hasSelectedChoices && !overlayOpen\"\n      (click)=\"clearSelection($event)\"\n    >\n      close\n    </mat-icon>\n  </button>\n  <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n    <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n    <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n  </mat-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      <button\n        type=\"button\"\n        *ngFor=\"let selected of selectedChoices\"\n        [title]=\"selected.label\"\n        class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n        (click)=\"select(selected, false)\"\n      >\n        <div class=\"text-sm truncate leading-[26px] px-2\">\n          {{ selected.label }}\n        </div>\n        <div\n          class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[12px] !w-[12px] text-[12px]\"\n          >\n            close</mat-icon\n          >\n        </div>\n      </button>\n\n      <div *ngIf=\"allowSearch\" class=\"w-[50%] relative grow shrink\">\n        <input\n          #searchFieldInput\n          class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n          [(ngModel)]=\"searchInputValue\"\n          [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n        />\n        <button\n          *ngIf=\"!!searchInputValue\"\n          class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n          (click)=\"clearSearchInputValue($event)\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined !h-[10px] !w-[12px] text-[12px]\"\n          >\n            close\n          </mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <label\n      *ngFor=\"let choice of filteredChoicesByText\"\n      [title]=\"choice.label\"\n      class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n    >\n      <input\n        class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n        type=\"checkbox\"\n        #checkBox\n        [checked]=\"isSelected(choice)\"\n        (change)=\"select(choice, checkBox.checked)\"\n      />\n      <span class=\"ml-[8px] text-[14px] truncate\">\n        {{ choice.label }}\n      </span>\n    </label>\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$4.ScrollStrategyOptions }]; }, propDecorators: { title: [{
+            args: [{ selector: 'gn-ui-dropdown-selector', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ButtonComponent,
+                        OverlayModule,
+                        MatIconModule,
+                        TranslateModule,
+                    ], 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    extraClass=\"bg-background !p-[8px] !pl-[16px] flex flex-row w-full {{\n      extraBtnClass\n    }}\"\n    [title]=\"title\"\n    [attr.aria-owns]=\"id\"\n    (buttonClick)=\"openOverlay()\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\n    <div class=\"grow font-medium truncate py-1 mr-2 text-left\">\n      {{ getChoiceLabel() | translate }}\n    </div>\n    <mat-icon class=\"material-symbols-outlined shrink-0 opacity-40\">\n      <ng-container *ngIf=\"overlayOpen\">expand_less</ng-container>\n      <ng-container *ngIf=\"!overlayOpen\">expand_more</ng-container>\n    </mat-icon>\n  </gn-ui-button>\n</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" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], showTitle: [{
+                type: Input
+            }], ariaName: [{
                 type: Input
             }], choices: [{
                 type: Input
             }], selected: [{
                 type: Input
-            }], allowSearch: [{
-                type: Input
             }], maxRows: [{
                 type: Input
-            }], searchInputValue: [{
+            }], extraBtnClass: [{
                 type: Input
-            }], selectValues: [{
+            }], minWidth: [{
+                type: Input
+            }], selectValue: [{
                 type: Output
             }], overlayOrigin: [{
                 type: ViewChild,
@@ -24200,322 +24832,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             }], overlay: [{
                 type: ViewChild,
                 args: [CdkConnectedOverlay]
-            }], overlayContainer: [{
-                type: ViewChild,
-                args: ['overlayContainer', { read: ElementRef }]
-            }], searchFieldInput: [{
-                type: ViewChild,
-                args: ['searchFieldInput']
-            }], checkboxes: [{
+            }], choiceInputs: [{
                 type: ViewChildren,
-                args: ['checkBox', { read: ElementRef }]
+                args: ['choiceInputs', { read: ElementRef }]
             }] } });
 
-class TextInputComponent {
-    constructor() {
-        this.value = '';
-        this.required = false;
-        this.rawChange = new Subject();
-        this.valueChange = this.rawChange.pipe(distinctUntilChanged());
+class EditableLabelDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.editableLabelChanged = new EventEmitter();
     }
     ngAfterViewInit() {
-        this.checkRequired(this.input.nativeElement.value);
-    }
-    checkRequired(value) {
-        this.input.nativeElement.classList.toggle('invalid', this.required && value === '');
-    }
-    handleChange($event) {
-        const value = $event.target.value;
-        this.checkRequired(value);
-        this.rawChange.next(value);
+        if (this.gnUiEditableLabel !== false) {
+            const appendedInput = this.renderer.createElement('input');
+            this.renderer.setStyle(appendedInput, 'background', 'inherit');
+            this.renderer.setStyle(appendedInput, 'color', 'inherit');
+            this.renderer.setStyle(appendedInput, 'font', 'inherit');
+            this.renderer.setStyle(appendedInput, 'border', 'inherit');
+            this.renderer.setStyle(appendedInput, 'width', '100%');
+            this.renderer.setStyle(appendedInput, 'padding', 'inherit');
+            this.renderer.setStyle(appendedInput, 'margin', '0');
+            this.renderer.setStyle(appendedInput, 'height', 'inherit');
+            this.renderer.setStyle(appendedInput, 'line-height', 'inherit');
+            this.renderer.setStyle(appendedInput, 'text-decoration', 'inherit');
+            const hostContent = this.el.nativeElement.textContent || '';
+            const formattedContent = hostContent.replace(/\s+/g, ' ').trim();
+            this.renderer.setProperty(appendedInput, 'value', formattedContent);
+            this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '');
+            this.renderer.listen(appendedInput, 'input', (event) => {
+                this.editableLabelChanged.emit(event.target.value);
+            });
+            this.renderer.appendChild(this.el.nativeElement, appendedInput);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: TextInputComponent, selector: "gn-ui-text-input", inputs: { value: "value", hint: "hint", required: "required" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input\n  #input\n  class=\"appearance-none border border-gray-300 rounded w-full p-2 text-gray-700 leading-tight focus:outline-none focus:border-primary\"\n  type=\"text\"\n  [value]=\"value\"\n  (change)=\"handleChange($event)\"\n  (input)=\"handleChange($event)\"\n  [placeholder]=\"hint\"\n  [attr.aria-label]=\"hint\"\n  [attr.required]=\"required || null\"\n/>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditableLabelDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: EditableLabelDirective, isStandalone: true, selector: "[gnUiEditableLabel]", inputs: { gnUiEditableLabel: "gnUiEditableLabel" }, outputs: { editableLabelChanged: "editableLabelChanged" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TextInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-text-input', template: "<input\n  #input\n  class=\"appearance-none border border-gray-300 rounded w-full p-2 text-gray-700 leading-tight focus:outline-none focus:border-primary\"\n  type=\"text\"\n  [value]=\"value\"\n  (change)=\"handleChange($event)\"\n  (input)=\"handleChange($event)\"\n  [placeholder]=\"hint\"\n  [attr.aria-label]=\"hint\"\n  [attr.required]=\"required || null\"\n/>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], hint: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], valueChange: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditableLabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gnUiEditableLabel]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { editableLabelChanged: [{
                 type: Output
-            }], input: [{
-                type: ViewChild,
-                args: ['input']
+            }], gnUiEditableLabel: [{
+                type: Input
             }] } });
 
-class ChipsInputComponent {
-    onChange(event) {
-        this.rawChange.next(event);
-    }
-    constructor(http, translate) {
-        this.http = http;
-        this.translate = translate;
-        this.required = false;
-        this.loadOnce = false;
-        this.autocompleteItems = [];
-        this.invalid = false;
-        this.items = [];
-        this.requestAutocompleteItems = (text) => {
-            if (this.url) {
-                if (this.loadOnce && this.loadedItems) {
-                    return this.loadedItems;
-                }
-                const url = this.url(text);
-                const lang = LANG_2_TO_3_MAPPER[this.translate.currentLang.slice(0, 2)];
-                return this.http
-                    .get(url.replace('${lang}', lang))
-                    .pipe(map$1((item) => item.map((i) => i.values[lang])));
-            }
-            else {
-                return of(this.autocompleteItems || []);
-            }
-        };
-        this.rawChange = new Subject();
-        this.itemsChange = this.rawChange.pipe(distinctUntilChanged());
-        this.subscription = new Subscription();
-    }
-    ngOnInit() {
-        if (this.loadOnce) {
-            this.loadedItems = this.requestAutocompleteItems('*').pipe(shareReplay(1));
-        }
-        this.items = this.selectedItems;
-        this.subscription = this.rawChange
-            .pipe(tap$1((v) => (this.invalid = v.length === 0)))
-            .subscribe();
-        this.rawChange.next(this.items);
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ChipsInputComponent, deps: [{ token: i1.HttpClient }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ChipsInputComponent, selector: "gn-ui-chips-input", inputs: { url: "url", placeholder: "placeholder", selectedItems: "selectedItems", required: "required", loadOnce: "loadOnce", autocompleteItems: "autocompleteItems" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<tag-input\n  [ngModel]=\"items\"\n  (ngModelChange)=\"onChange($event)\"\n  onlyFromAutocomplete=\"true\"\n  [placeholder]=\"placeholder\"\n  [secondaryPlaceholder]=\"placeholder\"\n  [ripple]=\"false\"\n  [animationDuration]=\"{ enter: '0ms', leave: '0ms' }\"\n  [onTextChangeDebounce]=\"100\"\n  class=\"border-2 border-primary h-full rounded-lg p-2 bg-white text-sm focus:border-primary\"\n  [ngClass]=\"{ invalid: invalid }\"\n>\n  <tag-input-dropdown\n    [autocompleteObservable]=\"requestAutocompleteItems\"\n    [minimumTextLength]=\"0\"\n    [keepOpen]=\"false\"\n    [showDropdownIfEmpty]=\"true\"\n  >\n    <ng-template let-item=\"item\" let-index=\"index\">\n      {{ item.display }}\n    </ng-template>\n  </tag-input-dropdown>\n</tag-input>\n", styles: ["tag-input::ng-deep .ng2-tag-input{border-bottom:none}tag-input::ng-deep .ng2-tag-input.ng2-tag-input--focused{border-bottom:none}tag-input::ng-deep tag{border-radius:5px;background:var(--color-primary-lightest);font-family:inherit;align-content:center;font-style:italic}tag-input::ng-deep tag::ng-deep:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,tag-input::ng-deep tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover{background:var(--color-primary)!important}tag-input::ng-deep .tag__text{padding-right:7px}tag-input::ng-deep div,tag-input::ng-deep form{height:100%}tag-input.invalid{border-color:var(--color-secondary)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.TagInputComponent, selector: "tag-input", inputs: ["separatorKeys", "separatorKeyCodes", "placeholder", "secondaryPlaceholder", "maxItems", "validators", "asyncValidators", "onlyFromAutocomplete", "errorMessages", "theme", "onTextChangeDebounce", "inputId", "inputClass", "clearOnBlur", "hideForm", "addOnBlur", "addOnPaste", "pasteSplitPattern", "blinkIfDupe", "removable", "editable", "allowDupes", "modelAsStrings", "trimTags", "inputText", "ripple", "tabindex", "disable", "dragZone", "onRemoving", "onAdding", "animationDuration"], outputs: ["onAdd", "onRemove", "onSelect", "onFocus", "onBlur", "onTextChange", "onPaste", "onValidationError", "onTagEdited", "inputTextChange"] }, { kind: "component", type: i5.TagInputDropdown, selector: "tag-input-dropdown", inputs: ["offset", "focusFirstElement", "showDropdownIfEmpty", "autocompleteObservable", "minimumTextLength", "limitItemsTo", "displayBy", "identifyBy", "matchingFn", "appendToBody", "keepOpen", "dynamicUpdate", "zIndex", "autocompleteItems"] }] }); }
+class NavigationButtonComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NavigationButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NavigationButtonComponent, selector: "gn-ui-navigation-button", inputs: { label: "label", icon: "icon" }, ngImport: i0, template: "<button\n  class=\"group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 rounded content-center\"\n>\n  <mat-icon class=\"material-symbols-outlined align-middle w-[18px]\">{{\n    icon\n  }}</mat-icon>\n  <span\n    class=\"mx-2 mt-0.5 text-[16px] tracking-widest content-center opacity-75\"\n    >{{ label.toUpperCase() }}</span\n  >\n</button>\n", styles: ["button{color:var(--navigation-button-color, --color-background)}\n"], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ChipsInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NavigationButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-chips-input', template: "<tag-input\n  [ngModel]=\"items\"\n  (ngModelChange)=\"onChange($event)\"\n  onlyFromAutocomplete=\"true\"\n  [placeholder]=\"placeholder\"\n  [secondaryPlaceholder]=\"placeholder\"\n  [ripple]=\"false\"\n  [animationDuration]=\"{ enter: '0ms', leave: '0ms' }\"\n  [onTextChangeDebounce]=\"100\"\n  class=\"border-2 border-primary h-full rounded-lg p-2 bg-white text-sm focus:border-primary\"\n  [ngClass]=\"{ invalid: invalid }\"\n>\n  <tag-input-dropdown\n    [autocompleteObservable]=\"requestAutocompleteItems\"\n    [minimumTextLength]=\"0\"\n    [keepOpen]=\"false\"\n    [showDropdownIfEmpty]=\"true\"\n  >\n    <ng-template let-item=\"item\" let-index=\"index\">\n      {{ item.display }}\n    </ng-template>\n  </tag-input-dropdown>\n</tag-input>\n", styles: ["tag-input::ng-deep .ng2-tag-input{border-bottom:none}tag-input::ng-deep .ng2-tag-input.ng2-tag-input--focused{border-bottom:none}tag-input::ng-deep tag{border-radius:5px;background:var(--color-primary-lightest);font-family:inherit;align-content:center;font-style:italic}tag-input::ng-deep tag::ng-deep:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover,tag-input::ng-deep tag:not(:focus):not(.tag--editing):not(:active):not(.readonly):hover{background:var(--color-primary)!important}tag-input::ng-deep .tag__text{padding-right:7px}tag-input::ng-deep div,tag-input::ng-deep form{height:100%}tag-input.invalid{border-color:var(--color-secondary)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i1$1.TranslateService }]; }, propDecorators: { url: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], selectedItems: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], loadOnce: [{
+            args: [{ selector: 'gn-ui-navigation-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 rounded content-center\"\n>\n  <mat-icon class=\"material-symbols-outlined align-middle w-[18px]\">{{\n    icon\n  }}</mat-icon>\n  <span\n    class=\"mx-2 mt-0.5 text-[16px] tracking-widest content-center opacity-75\"\n    >{{ label.toUpperCase() }}</span\n  >\n</button>\n", styles: ["button{color:var(--navigation-button-color, --color-background)}\n"] }]
+        }], propDecorators: { label: [{
                 type: Input
-            }], autocompleteItems: [{
+            }], icon: [{
                 type: Input
-            }], itemsChange: [{
-                type: Output
             }] } });
 
-class TextAreaComponent {
+class SearchInputComponent {
     constructor() {
         this.value = '';
-        this.required = false;
+        this.placeholder = '';
         this.rawChange = new Subject();
-        this.valueChange = this.rawChange.pipe(distinctUntilChanged());
-    }
-    ngAfterViewInit() {
-        this.checkRequired(this.input.nativeElement.value);
-    }
-    checkRequired(value) {
-        this.input.nativeElement.classList.toggle('invalid', this.required && value === '');
+        this.valueChange = this.rawChange.pipe(distinctUntilChanged$1());
     }
     handleChange($event) {
         const value = $event.target.value;
-        this.checkRequired(value);
         this.rawChange.next(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: TextAreaComponent, isStandalone: true, selector: "gn-ui-text-area", inputs: { value: "value", placeholder: "placeholder", required: "required" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"h-full flex\">\n  <textarea\n    #input\n    name=\"textArea\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n    class=\"w-full pt-2 pl-2 resize-none border border-gray-800 rounded italic leading-tight focus:outline-none focus:bg-background focus:border-primary\"\n    [attr.required]=\"required || null\"\n  ></textarea>\n</div>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }); }
+    clear() {
+        this.value = null;
+        this.rawChange.next(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SearchInputComponent, selector: "gn-ui-search-input", inputs: { value: "value", placeholder: "placeholder" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"h-full relative text-gray-300\">\n  <input\n    #input\n    class=\"peer h-full appearance-none border border-gray-300 rounded w-full p-2 pl-10 text-gray-700 leading-tight hover:border-primary focus:text-primary focus:outline-none focus:border-primary focus:border-2\"\n    type=\"text\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n  />\n  <div\n    class=\"absolute inset-y-0 left-0 pl-2.5 flex items-center peer-hover:text-primary peer-focus:text-primary\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n  </div>\n  <button\n    *ngIf=\"rawChange | async\"\n    type=\"button\"\n    class=\"text-primary-lightest hover:text-primary absolute transition-all duration-100 inset-y-0 right-0 pr-2.5\"\n    aria-label=\"Clear\"\n    (click)=\"clear()\"\n  >\n    <mat-icon class=\"material-symbols-outlined align-middle\">close</mat-icon>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TextAreaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SearchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-text-area', standalone: true, template: "<div class=\"h-full flex\">\n  <textarea\n    #input\n    name=\"textArea\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n    class=\"w-full pt-2 pl-2 resize-none border border-gray-800 rounded italic leading-tight focus:outline-none focus:bg-background focus:border-primary\"\n    [attr.required]=\"required || null\"\n  ></textarea>\n</div>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }]
+            args: [{ selector: 'gn-ui-search-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"h-full relative text-gray-300\">\n  <input\n    #input\n    class=\"peer h-full appearance-none border border-gray-300 rounded w-full p-2 pl-10 text-gray-700 leading-tight hover:border-primary focus:text-primary focus:outline-none focus:border-primary focus:border-2\"\n    type=\"text\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n  />\n  <div\n    class=\"absolute inset-y-0 left-0 pl-2.5 flex items-center peer-hover:text-primary peer-focus:text-primary\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n  </div>\n  <button\n    *ngIf=\"rawChange | async\"\n    type=\"button\"\n    class=\"text-primary-lightest hover:text-primary absolute transition-all duration-100 inset-y-0 right-0 pr-2.5\"\n    aria-label=\"Clear\"\n    (click)=\"clear()\"\n  >\n    <mat-icon class=\"material-symbols-outlined align-middle\">close</mat-icon>\n  </button>\n</div>\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }], placeholder: [{
                 type: Input
-            }], required: [{
-                type: Input
             }], valueChange: [{
                 type: Output
-            }], input: [{
-                type: ViewChild,
-                args: ['input']
-            }] } });
-
-class PopupAlertComponent {
-    constructor(changeDetector) {
-        this.changeDetector = changeDetector;
-        this.type = 'info';
-        this.position = 'top';
-        this.expanded = false;
-        this.timeout = null;
-    }
-    get showDuration() {
-        const chars = this.content.nativeElement.innerHTML.length;
-        return Math.max(3000, chars * 20);
-    }
-    ngOnInit() {
-        this.expandAndClose();
-    }
-    expand() {
-        this.expanded = true;
-        this.changeDetector.detectChanges();
-        clearTimeout(this.timeout);
-    }
-    expandAndClose() {
-        this.expanded = true;
-        this.changeDetector.detectChanges();
-        clearTimeout(this.timeout);
-        this.timeout = setTimeout(() => {
-            this.expanded = false;
-            this.changeDetector.detectChanges();
-        }, this.showDuration);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PopupAlertComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: { icon: "icon", type: "type", position: "position" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"h-full relative container\">\n  <div\n    class=\"pointer-events-auto absolute text-white flex flex-row p-2 rounded message\"\n    role=\"alert\"\n    [ngClass]=\"{\n      'position-bottom': position === 'bottom',\n      'position-top': position === 'top',\n      expanded: this.expanded,\n      'bg-red-500': type === 'danger',\n      'bg-yellow-500': type === 'warning',\n      'bg-blue-500': type === 'info'\n    }\"\n    (mouseenter)=\"expand()\"\n    (mouseleave)=\"expandAndClose()\"\n  >\n    <mat-icon class=\"material-symbols-outlined mr-2 shrink-0 select-none\">{{\n      icon\n    }}</mat-icon>\n    <div class=\"grow\" #content [ngClass]=\"{ invisible: !expanded }\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{pointer-events:none}.container{filter:drop-shadow(0px 4px 3px rgba(0,0,0,.2))}.message{transition:clip-path .3s cubic-bezier(.25,.46,.45,.94)}.message.expanded{clip-path:circle(100%)}.position-top{clip-path:circle(19px at 20px 20px);align-items:start;top:0;left:0}.position-bottom{clip-path:circle(19px at 20px calc(100% - 20px));align-items:end;bottom:0;left:0}.container ::ng-deep a{text-decoration:underline;font-weight:700}.container ::ng-deep a:hover{opacity:.85}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PopupAlertComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-popup-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"h-full relative container\">\n  <div\n    class=\"pointer-events-auto absolute text-white flex flex-row p-2 rounded message\"\n    role=\"alert\"\n    [ngClass]=\"{\n      'position-bottom': position === 'bottom',\n      'position-top': position === 'top',\n      expanded: this.expanded,\n      'bg-red-500': type === 'danger',\n      'bg-yellow-500': type === 'warning',\n      'bg-blue-500': type === 'info'\n    }\"\n    (mouseenter)=\"expand()\"\n    (mouseleave)=\"expandAndClose()\"\n  >\n    <mat-icon class=\"material-symbols-outlined mr-2 shrink-0 select-none\">{{\n      icon\n    }}</mat-icon>\n    <div class=\"grow\" #content [ngClass]=\"{ invisible: !expanded }\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{pointer-events:none}.container{filter:drop-shadow(0px 4px 3px rgba(0,0,0,.2))}.message{transition:clip-path .3s cubic-bezier(.25,.46,.45,.94)}.message.expanded{clip-path:circle(100%)}.position-top{clip-path:circle(19px at 20px 20px);align-items:start;top:0;left:0}.position-bottom{clip-path:circle(19px at 20px calc(100% - 20px));align-items:end;bottom:0;left:0}.container ::ng-deep a{text-decoration:underline;font-weight:700}.container ::ng-deep a:hover{opacity:.85}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { icon: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }], content: [{
-                type: ViewChild,
-                args: ['content']
-            }] } });
-
-class AutocompleteComponent {
-    constructor(cdRef) {
-        this.cdRef = cdRef;
-        this.clearOnSelection = false;
-        this.autoFocus = false;
-        this.itemSelected = new EventEmitter();
-        this.inputSubmitted = new EventEmitter();
-        this.inputCleared = new EventEmitter();
-        this.control = new UntypedFormControl();
-        this.subscription = new Subscription();
-        this.cancelEnter = true;
-        this.selectionSubject = new ReplaySubject(1);
-        this.lastInputValue$ = new ReplaySubject(1);
-        this.error = null;
-        this.displayWithFn = (item) => item;
-    }
-    ngOnChanges(changes) {
-        const { value } = changes;
-        if (value) {
-            const previousTextValue = this.displayWithFn(value.previousValue);
-            const currentTextValue = this.displayWithFn(value.currentValue);
-            if (previousTextValue !== currentTextValue) {
-                this.updateInputValue(value.currentValue);
-            }
-        }
-    }
-    ngOnInit() {
-        this.suggestions$ = merge(this.control.valueChanges.pipe(filter((value) => typeof value === 'string'), filter((value) => value.length > 2), debounceTime(400), distinctUntilChanged(), tap$1(() => (this.searching = true))), this.control.valueChanges.pipe(filter((value) => typeof value === 'object' && value.title), map$1((item) => item.title))).pipe(switchMap$1((value) => (value ? this.action(value) : of([]))), catchError((error) => {
-            this.error = error.message;
-            return of([]);
-        }), finalize(() => (this.searching = false)));
-        this.subscription = this.control.valueChanges.subscribe((any) => {
-            if (any !== '') {
-                this.cancelEnter = false;
-            }
-        });
-        this.control.valueChanges
-            .pipe(filter((value) => typeof value === 'string'))
-            .subscribe(this.lastInputValue$);
-    }
-    ngAfterViewInit() {
-        this.autocomplete.optionSelected.subscribe(this.selectionSubject);
-        if (this.autoFocus) {
-            this.inputRef.nativeElement.focus();
-            this.cdRef.detectChanges();
-        }
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    updateInputValue(value) {
-        if (value) {
-            this.control.setValue(value);
-        }
-        if (this.inputRef) {
-            this.inputRef.nativeElement.value = value?.title || '';
-        }
-    }
-    clear() {
-        this.inputRef.nativeElement.value = '';
-        this.inputCleared.emit();
-        this.selectionSubject
-            .pipe(take(1))
-            .subscribe((selection) => selection && selection.option.deselect());
-        this.inputRef.nativeElement.focus();
-        this.triggerRef.closePanel();
-    }
-    handleEnter(any) {
-        if (!this.cancelEnter) {
-            this.inputSubmitted.emit(any);
-            this.triggerRef.closePanel();
-        }
-    }
-    handleClickSearch() {
-        this.inputSubmitted.emit(this.inputRef.nativeElement.value);
-        this.triggerRef.closePanel();
-    }
-    handleSelection(event) {
-        this.cancelEnter = true;
-        this.itemSelected.emit(event.option.value);
-        if (this.clearOnSelection) {
-            this.lastInputValue$.pipe(first()).subscribe((any) => {
-                this.inputRef.nativeElement.value = any;
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: { placeholder: "placeholder", action: "action", value: "value", clearOnSelection: "clearOnSelection", autoFocus: "autoFocus", displayWithFn: "displayWithFn" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted", inputCleared: "inputCleared" }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <input\n    #searchInput\n    type=\"text\"\n    class=\"appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded w-full text-black shadow-xl focus:shadow-[0_0_24px_0_rgba(21,40,184,0.09)]\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"handleEnter(searchInput.value)\"\n  />\n  <button\n    type=\"button\"\n    class=\"text-primary-lightest hover:text-primary hover:bg-gray-50 absolute transition-all duration-100 clear-btn inset-y-0\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (click)=\"clear()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">close</mat-icon>\n  </button>\n  <button\n    type=\"button\"\n    class=\"text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 absolute transition-all duration-100 search-btn rounded-r inset-y-0 right-0\"\n    aria-label=\"Trigger search\"\n    (click)=\"handleClickSearch()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n  </button>\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"error_outline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</div>\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFn\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion\"\n  >\n    {{ displayWithFn(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: [":host{--input-height: 3.5em}.clear-btn{width:var(--input-height);right:var(--input-height);height:100%}.search-btn{width:var(--input-height);height:100%;border-left-width:.1em}mat-icon{width:100%;height:100%;padding:.65em;font-size:1.5em}input{height:var(--input-height);padding:1.05em;padding-right:calc(2 * var(--input-height))}input:placeholder-shown{text-overflow:ellipsis}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\">\n  <input\n    #searchInput\n    type=\"text\"\n    class=\"appearance-none focus:outline-white focus:outline-2 focus:outline-dotted focus:outline-offset-2 leading-tight rounded w-full text-black shadow-xl focus:shadow-[0_0_24px_0_rgba(21,40,184,0.09)]\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"control\"\n    [matAutocomplete]=\"auto\"\n    (keyup.enter)=\"handleEnter(searchInput.value)\"\n  />\n  <button\n    type=\"button\"\n    class=\"text-primary-lightest hover:text-primary hover:bg-gray-50 absolute transition-all duration-100 clear-btn inset-y-0\"\n    *ngIf=\"searchInput.value\"\n    aria-label=\"Clear\"\n    (click)=\"clear()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">close</mat-icon>\n  </button>\n  <button\n    type=\"button\"\n    class=\"text-primary bg-white hover:text-primary-darkest hover:bg-gray-100 border-gray-300 hover:border-gray-500 absolute transition-all duration-100 search-btn rounded-r inset-y-0 right-0\"\n    aria-label=\"Trigger search\"\n    (click)=\"handleClickSearch()\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n  </button>\n  <gn-ui-popup-alert\n    *ngIf=\"error\"\n    class=\"absolute mt-2 w-full top-[100%] left-0\"\n    icon=\"error_outline\"\n    position=\"top\"\n    type=\"warning\"\n  >\n    <span translate>search.autocomplete.error</span>\n    {{ error }}\n  </gn-ui-popup-alert>\n</div>\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFn\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion\"\n  >\n    {{ displayWithFn(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: [":host{--input-height: 3.5em}.clear-btn{width:var(--input-height);right:var(--input-height);height:100%}.search-btn{width:var(--input-height);height:100%;border-left-width:.1em}mat-icon{width:100%;height:100%;padding:.65em;font-size:1.5em}input{height:var(--input-height);padding:1.05em;padding-right:calc(2 * var(--input-height))}input:placeholder-shown{text-overflow:ellipsis}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
-                type: Input
-            }], action: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], clearOnSelection: [{
-                type: Input
-            }], autoFocus: [{
-                type: Input
-            }], itemSelected: [{
-                type: Output
-            }], inputSubmitted: [{
-                type: Output
-            }], inputCleared: [{
-                type: Output
-            }], triggerRef: [{
-                type: ViewChild,
-                args: [MatAutocompleteTrigger]
-            }], autocomplete: [{
-                type: ViewChild,
-                args: [MatAutocomplete]
-            }], inputRef: [{
-                type: ViewChild,
-                args: ['searchInput']
-            }], displayWithFn: [{
-                type: Input
             }] } });
 
 class StarToggleComponent {
@@ -24553,115 +24958,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 args: ['starOverlay']
             }] } });
 
-class ViewportIntersectorComponent {
-    constructor(vcRef) {
-        this.vcRef = vcRef;
-        this.isInViewport = new EventEmitter();
-        this.entersViewport = this.isInViewport.pipe(filter((inViewport) => inViewport), map$1(() => undefined));
-        this.exitsViewport = this.isInViewport.pipe(filter((inViewport) => !inViewport), map$1(() => undefined));
-    }
-    ngOnInit() {
-        const elToObserve = this.vcRef.element.nativeElement;
-        this.observeInputElement(elToObserve);
-    }
-    ngOnDestroy() {
-        const elToObserve = this.vcRef.element.nativeElement;
-        this.unObserveInputElement(elToObserve);
+class TextAreaComponent {
+    constructor() {
+        this.value = '';
+        this.disabled = false;
+        this.extraClass = '';
+        this.required = false;
+        this.rawChange = new Subject();
+        this.valueChange = this.rawChange.pipe(distinctUntilChanged());
+        this.baseClasses = [
+            'w-full',
+            'pt-2',
+            'pl-2',
+            'resize-none',
+            'border',
+            'border-gray-800',
+            'rounded italic',
+            'leading-tight',
+            'focus:outline-none',
+            'focus:bg-background',
+            'focus:border-primary',
+        ].join(' ');
+        this.disabledClasses = ['cursor-not-allowed'].join(' ');
     }
-    observeInputElement(elToObserve) {
-        if (!this.observer) {
-            this.observer = new IntersectionObserver((entries) => {
-                entries.forEach((entry) => {
-                    this.isInViewport.emit(entry.isIntersecting);
-                });
-            }, { root: null, threshold: 0 });
-        }
-        this.observer.observe(elToObserve);
+    get classList() {
+        return `${this.baseClasses} ${this.extraClass} ${this.disabled ? this.disabledClasses : ''}`;
     }
-    unObserveInputElement(elToObserve) {
-        this.observer?.unobserve(elToObserve);
+    ngAfterViewInit() {
+        this.checkRequired(this.input.nativeElement.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ViewportIntersectorComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ViewportIntersectorComponent, selector: "gn-ui-viewport-intersector", outputs: { isInViewport: "isInViewport", entersViewport: "entersViewport", exitsViewport: "exitsViewport" }, ngImport: i0, template: "<div class=\"w-full h-full\"></div>\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ViewportIntersectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-viewport-intersector', template: "<div class=\"w-full h-full\"></div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { isInViewport: [{
-                type: Output
-            }], entersViewport: [{
-                type: Output
-            }], exitsViewport: [{
-                type: Output
-            }] } });
-
-class CheckToggleComponent {
-    constructor() {
-        this.color = 'primary';
-        this.toggled = new EventEmitter();
+    checkRequired(value) {
+        this.input.nativeElement.classList.toggle('invalid', this.required && value === '');
     }
-    toggle(event) {
-        this.toggled.emit(event);
+    handleChange($event) {
+        const value = $event.target.value;
+        this.checkRequired(value);
+        this.rawChange.next(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CheckToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CheckToggleComponent, selector: "gn-ui-check-toggle", inputs: { title: "title", label: "label", value: "value", color: "color" }, outputs: { toggled: "toggled" }, ngImport: i0, template: "<label class=\"inline-flex relative items-start cursor-pointer\" [title]=\"title\">\n  <span class=\"shrink-0\">\n    <input\n      type=\"checkbox\"\n      class=\"sr-only peer\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"toggle($event)\"\n    />\n    <div\n      class=\"w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all\"\n      [class]=\"\n        color === 'secondary'\n          ? 'peer-focus:ring-secondary-lighter peer-checked:bg-secondary'\n          : 'peer-focus:ring-primary-lighter peer-checked:bg-primary'\n      \"\n    ></div>\n  </span>\n  <span class=\"ml-3 mt-[2px] text-sm font-medium\">{{ label }}</span>\n</label>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: TextAreaComponent, isStandalone: true, selector: "gn-ui-text-area", inputs: { value: "value", disabled: "disabled", extraClass: "extraClass", placeholder: "placeholder", required: "required" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"h-full flex\">\n  <textarea\n    #input\n    name=\"textArea\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n    [class]=\"classList\"\n    [attr.required]=\"required || null\"\n  ></textarea>\n</div>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CheckToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-check-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"inline-flex relative items-start cursor-pointer\" [title]=\"title\">\n  <span class=\"shrink-0\">\n    <input\n      type=\"checkbox\"\n      class=\"sr-only peer\"\n      [ngModel]=\"value\"\n      (ngModelChange)=\"toggle($event)\"\n    />\n    <div\n      class=\"w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all\"\n      [class]=\"\n        color === 'secondary'\n          ? 'peer-focus:ring-secondary-lighter peer-checked:bg-secondary'\n          : 'peer-focus:ring-primary-lighter peer-checked:bg-primary'\n      \"\n    ></div>\n  </span>\n  <span class=\"ml-3 mt-[2px] text-sm font-medium\">{{ label }}</span>\n</label>\n" }]
-        }], propDecorators: { title: [{
+            args: [{ selector: 'gn-ui-text-area', standalone: true, template: "<div class=\"h-full flex\">\n  <textarea\n    #input\n    name=\"textArea\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    [value]=\"value\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n    [class]=\"classList\"\n    [attr.required]=\"required || null\"\n  ></textarea>\n</div>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { value: [{
                 type: Input
-            }], label: [{
+            }], disabled: [{
                 type: Input
-            }], value: [{
+            }], extraClass: [{
                 type: Input
-            }], color: [{
+            }], placeholder: [{
                 type: Input
-            }], toggled: [{
+            }], required: [{
+                type: Input
+            }], valueChange: [{
                 type: Output
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
             }] } });
 
-const placeholder = 'dropFile';
-marker('dropFile');
-class DragAndDropFileInputComponent {
+class TextInputComponent {
     constructor() {
-        this.placeholder = placeholder;
-        this.accept = '*';
-        this.fileChange = new EventEmitter();
-        this.selectedFile = null;
+        this.baseClass = [
+            'appearance-none',
+            'border border-gray-300',
+            'rounded w-full',
+            'p-2',
+            'text-gray-700',
+            'leading-tight',
+            'focus:outline-none',
+            'focus:border-primary',
+        ].join(' ');
+        this.value = '';
+        this.extraClass = '';
+        this.required = false;
+        this.rawChange = new Subject();
+        this.valueChange = this.rawChange.pipe(distinctUntilChanged());
     }
-    get fileName() {
-        return this.selectedFile && this.selectedFile.name;
+    get classList() {
+        return `${this.baseClass} ${this.extraClass}`;
     }
-    selectFile(event) {
-        this.selectedFile = event.addedFiles[0];
-        this.fileChange.emit(this.selectedFile);
+    ngAfterViewInit() {
+        this.checkRequired(this.input.nativeElement.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DragAndDropFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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$3.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"] }] }); }
+    checkRequired(value) {
+        this.input.nativeElement.classList.toggle('invalid', this.required && value === '');
+    }
+    handleChange($event) {
+        const value = $event.target.value;
+        this.checkRequired(value);
+        this.rawChange.next(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: TextInputComponent, selector: "gn-ui-text-input", inputs: { value: "value", extraClass: "extraClass", hint: "hint", required: "required", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input\n  #input\n  [class]=\"classList\"\n  type=\"text\"\n  [value]=\"value\"\n  (change)=\"handleChange($event)\"\n  (input)=\"handleChange($event)\"\n  [placeholder]=\"hint\"\n  [attr.aria-label]=\"hint\"\n  [attr.required]=\"required || null\"\n  [disabled]=\"disabled\"\n/>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DragAndDropFileInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-drag-and-drop-file-input', 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"] }]
-        }], propDecorators: { placeholder: [{
+            args: [{ selector: 'gn-ui-text-input', template: "<input\n  #input\n  [class]=\"classList\"\n  type=\"text\"\n  [value]=\"value\"\n  (change)=\"handleChange($event)\"\n  (input)=\"handleChange($event)\"\n  [placeholder]=\"hint\"\n  [attr.aria-label]=\"hint\"\n  [attr.required]=\"required || null\"\n  [disabled]=\"disabled\"\n/>\n", styles: [".invalid{border-color:var(--color-secondary)}\n"] }]
+        }], propDecorators: { value: [{
                 type: Input
-            }], accept: [{
+            }], extraClass: [{
                 type: Input
-            }], fileChange: [{
-                type: Output
-            }] } });
-
-class NavigationButtonComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NavigationButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NavigationButtonComponent, selector: "gn-ui-navigation-button", inputs: { label: "label", icon: "icon" }, ngImport: i0, template: "<button\n  class=\"group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 rounded content-center\"\n>\n  <mat-icon class=\"material-symbols-outlined align-middle w-[18px]\">{{\n    icon\n  }}</mat-icon>\n  <span\n    class=\"mx-2 mt-0.5 text-[16px] tracking-widest content-center opacity-75\"\n    >{{ label.toUpperCase() }}</span\n  >\n</button>\n", styles: ["button{color:var(--navigation-button-color, --color-background)}\n"], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NavigationButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-navigation-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"group flex items-center justify-center gap-1 backdrop-blur p-1 bg-primary-opacity-30 rounded content-center\"\n>\n  <mat-icon class=\"material-symbols-outlined align-middle w-[18px]\">{{\n    icon\n  }}</mat-icon>\n  <span\n    class=\"mx-2 mt-0.5 text-[16px] tracking-widest content-center opacity-75\"\n    >{{ label.toUpperCase() }}</span\n  >\n</button>\n", styles: ["button{color:var(--navigation-button-color, --color-background)}\n"] }]
-        }], propDecorators: { label: [{
+            }], hint: [{
                 type: Input
-            }], icon: [{
+            }], required: [{
+                type: Input
+            }], disabled: [{
                 type: Input
+            }], valueChange: [{
+                type: Output
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
             }] } });
 
 class ColorScaleComponent {
@@ -24769,7 +25178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 class LoadingMaskComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LoadingMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: LoadingMaskComponent, 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: "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: "16.1.7", type: LoadingMaskComponent, 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: "component", type: i1$6.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: "16.1.7", ngImport: i0, type: LoadingMaskComponent, decorators: [{
             type: Component,
@@ -24865,148 +25274,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
-class CopyTextButtonComponent {
-    constructor() {
-        this.displayText = true;
-        this.rows = 1;
+class ViewportIntersectorComponent {
+    constructor(vcRef) {
+        this.vcRef = vcRef;
+        this.isInViewport = new EventEmitter();
+        this.entersViewport = this.isInViewport.pipe(filter((inViewport) => inViewport), map$1(() => undefined));
+        this.exitsViewport = this.isInViewport.pipe(filter((inViewport) => !inViewport), map$1(() => undefined));
     }
-    copyText(event) {
-        navigator.clipboard.writeText(this.text);
-        event.target.blur();
+    ngOnInit() {
+        const elToObserve = this.vcRef.element.nativeElement;
+        this.observeInputElement(elToObserve);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CopyTextButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: { text: "text", tooltipText: "tooltipText", displayText: "displayText", rows: "rows" }, ngImport: i0, template: "<div class=\"flex\">\n  <input\n    *ngIf=\"displayText && rows <= 1\"\n    type=\"text\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate\"\n    value=\"{{ text }}\"\n    readonly\n  />\n  <textarea\n    *ngIf=\"displayText && rows > 1\"\n    [rows]=\"rows\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max\"\n    readonly\n    >{{ text }}</textarea\n  >\n  <button\n    type=\"button\"\n    (click)=\"copyText($event)\"\n    [ngClass]=\"{\n      'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n        displayText\n    }\"\n    mat-raised-button\n    [matTooltip]=\"tooltipText\"\n    matTooltipPosition=\"above\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n      >content_copy</mat-icon\n    >\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CopyTextButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-copy-text-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\n  <input\n    *ngIf=\"displayText && rows <= 1\"\n    type=\"text\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 truncate\"\n    value=\"{{ text }}\"\n    readonly\n  />\n  <textarea\n    *ngIf=\"displayText && rows > 1\"\n    [rows]=\"rows\"\n    class=\"grow py-2 px-4 bg-gray-200 opacity-50 rounded-l-md border border-gray-300 overflow-y-auto h-max\"\n    readonly\n    >{{ text }}</textarea\n  >\n  <button\n    type=\"button\"\n    (click)=\"copyText($event)\"\n    [ngClass]=\"{\n      'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n        displayText\n    }\"\n    mat-raised-button\n    [matTooltip]=\"tooltipText\"\n    matTooltipPosition=\"above\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n      >content_copy</mat-icon\n    >\n  </button>\n</div>\n" }]
-        }], propDecorators: { text: [{
-                type: Input
-            }], tooltipText: [{
-                type: Input
-            }], displayText: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }] } });
-
-class CheckboxComponent {
-    constructor() {
-        this.type = 'default';
-        this.checked = false;
-        this.indeterminate = false;
-        this.changed = new EventEmitter();
+    ngOnDestroy() {
+        const elToObserve = this.vcRef.element.nativeElement;
+        this.unObserveInputElement(elToObserve);
     }
-    get classList() {
-        return `${this.type}`;
+    observeInputElement(elToObserve) {
+        if (!this.observer) {
+            this.observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    this.isInViewport.emit(entry.isIntersecting);
+                });
+            }, { root: null, threshold: 0 });
+        }
+        this.observer.observe(elToObserve);
     }
-    handleClick(event) {
-        event.stopPropagation();
-        this.checked = !this.checked;
-        this.changed.emit(this.checked);
+    unObserveInputElement(elToObserve) {
+        this.observer?.unobserve(elToObserve);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CheckboxComponent, selector: "gn-ui-checkbox", inputs: { type: "type", checked: "checked", indeterminate: "indeterminate" }, outputs: { changed: "changed" }, ngImport: i0, template: "<mat-checkbox\n  class=\"cursor-pointer\"\n  [class]=\"classList\"\n  [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: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ViewportIntersectorComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ViewportIntersectorComponent, selector: "gn-ui-viewport-intersector", outputs: { isInViewport: "isInViewport", entersViewport: "entersViewport", exitsViewport: "exitsViewport" }, ngImport: i0, template: "<div class=\"w-full h-full\"></div>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ViewportIntersectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-checkbox\n  class=\"cursor-pointer\"\n  [class]=\"classList\"\n  [checked]=\"checked\"\n  [indeterminate]=\"indeterminate\"\n  (click)=\"handleClick($event)\"\n></mat-checkbox>\n", styles: [".default{--gn-ui-checkbox-color: var(--color-main)}.secondary{--gn-ui-checkbox-color: var(--color-secondary)}.primary{--gn-ui-checkbox-color: var(--color-primary)}mat-checkbox{--mdc-checkbox-selected-focus-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-icon-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-focus-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-hover-state-layer-color: var(--gn-ui-checkbox-color);--mdc-checkbox-selected-pressed-state-layer-color: var( --gn-ui-checkbox-color )}\n"] }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], indeterminate: [{
-                type: Input
-            }], changed: [{
+            args: [{ selector: 'gn-ui-viewport-intersector', template: "<div class=\"w-full h-full\"></div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { isInViewport: [{
                 type: Output
-            }] } });
-
-class SearchInputComponent {
-    constructor() {
-        this.value = '';
-        this.placeholder = '';
-        this.rawChange = new Subject();
-        this.valueChange = this.rawChange.pipe(distinctUntilChanged$1());
-    }
-    handleChange($event) {
-        const value = $event.target.value;
-        this.rawChange.next(value);
-    }
-    clear() {
-        this.value = null;
-        this.rawChange.next(null);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: SearchInputComponent, selector: "gn-ui-search-input", inputs: { value: "value", placeholder: "placeholder" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"h-full relative text-gray-300\">\n  <input\n    #input\n    class=\"peer h-full appearance-none border border-gray-300 rounded w-full p-2 pl-10 text-gray-700 leading-tight hover:border-primary focus:text-primary focus:outline-none focus:border-primary focus:border-2\"\n    type=\"text\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n  />\n  <div\n    class=\"absolute inset-y-0 left-0 pl-2.5 flex items-center peer-hover:text-primary peer-focus:text-primary\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n  </div>\n  <button\n    *ngIf=\"rawChange | async\"\n    type=\"button\"\n    class=\"text-primary-lightest hover:text-primary absolute transition-all duration-100 inset-y-0 right-0 pr-2.5\"\n    aria-label=\"Clear\"\n    (click)=\"clear()\"\n  >\n    <mat-icon class=\"material-symbols-outlined align-middle\">close</mat-icon>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: SearchInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-search-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"h-full relative text-gray-300\">\n  <input\n    #input\n    class=\"peer h-full appearance-none border border-gray-300 rounded w-full p-2 pl-10 text-gray-700 leading-tight hover:border-primary focus:text-primary focus:outline-none focus:border-primary focus:border-2\"\n    type=\"text\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    (change)=\"handleChange($event)\"\n    (input)=\"handleChange($event)\"\n  />\n  <div\n    class=\"absolute inset-y-0 left-0 pl-2.5 flex items-center peer-hover:text-primary peer-focus:text-primary\"\n  >\n    <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n  </div>\n  <button\n    *ngIf=\"rawChange | async\"\n    type=\"button\"\n    class=\"text-primary-lightest hover:text-primary absolute transition-all duration-100 inset-y-0 right-0 pr-2.5\"\n    aria-label=\"Clear\"\n    (click)=\"clear()\"\n  >\n    <mat-icon class=\"material-symbols-outlined align-middle\">close</mat-icon>\n  </button>\n</div>\n" }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], valueChange: [{
+            }], entersViewport: [{
                 type: Output
-            }] } });
-
-class DateRangePickerComponent {
-    startDateSelected(event) {
-        this.startDate = event.value;
-    }
-    endDateSelected(event) {
-        this.endDate = event.value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DateRangePickerComponent, selector: "gn-ui-date-range-picker", ngImport: i0, template: "<div\n  class=\"flex items-center justify-center w-64 h-11 rounded-lg border border-gray-300 bg-white\"\n>\n  <div class=\"w-48 flex justify-between\">\n    <mat-date-range-input [rangePicker]=\"picker\" class=\"w-full\">\n      <input\n        class=\"w-24 text-black font-basierCircle text-base font-medium text-center\"\n        matStartDate\n        placeholder=\"Start date\"\n        (dateInput)=\"startDateSelected($event)\"\n      />\n      <input\n        class=\"w-24 text-black font-basierCircle text-base font-medium text-center\"\n        matEndDate\n        placeholder=\"End date\"\n        (dateInput)=\"endDateSelected($event)\"\n      />\n    </mat-date-range-input>\n  </div>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon>calendar_today</mat-icon>\n  </mat-datepicker-toggle>\n  <mat-date-range-picker #picker></mat-date-range-picker>\n</div>\n", styles: ["mat-datepicker-toggle{@apply text-primary;}\n"], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$2.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$2.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DateRangePickerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-date-range-picker', template: "<div\n  class=\"flex items-center justify-center w-64 h-11 rounded-lg border border-gray-300 bg-white\"\n>\n  <div class=\"w-48 flex justify-between\">\n    <mat-date-range-input [rangePicker]=\"picker\" class=\"w-full\">\n      <input\n        class=\"w-24 text-black font-basierCircle text-base font-medium text-center\"\n        matStartDate\n        placeholder=\"Start date\"\n        (dateInput)=\"startDateSelected($event)\"\n      />\n      <input\n        class=\"w-24 text-black font-basierCircle text-base font-medium text-center\"\n        matEndDate\n        placeholder=\"End date\"\n        (dateInput)=\"endDateSelected($event)\"\n      />\n    </mat-date-range-input>\n  </div>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon>calendar_today</mat-icon>\n  </mat-datepicker-toggle>\n  <mat-date-range-picker #picker></mat-date-range-picker>\n</div>\n", styles: ["mat-datepicker-toggle{@apply text-primary;}\n"] }]
-        }] });
-
-class EditableLabelDirective {
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-        this.editableLabelChanged = new EventEmitter();
-    }
-    ngAfterViewInit() {
-        if (this.gnUiEditableLabel !== false) {
-            const appendedInput = this.renderer.createElement('input');
-            this.renderer.setStyle(appendedInput, 'background', 'inherit');
-            this.renderer.setStyle(appendedInput, 'color', 'inherit');
-            this.renderer.setStyle(appendedInput, 'font', 'inherit');
-            this.renderer.setStyle(appendedInput, 'border', 'inherit');
-            this.renderer.setStyle(appendedInput, 'width', '100%');
-            this.renderer.setStyle(appendedInput, 'padding', 'inherit');
-            this.renderer.setStyle(appendedInput, 'margin', '0');
-            this.renderer.setStyle(appendedInput, 'height', 'inherit');
-            this.renderer.setStyle(appendedInput, 'line-height', 'inherit');
-            this.renderer.setStyle(appendedInput, 'text-decoration', 'inherit');
-            const hostContent = this.el.nativeElement.textContent || '';
-            const formattedContent = hostContent.replace(/\s+/g, ' ').trim();
-            this.renderer.setProperty(appendedInput, 'value', formattedContent);
-            this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '');
-            this.renderer.listen(appendedInput, 'input', (event) => {
-                this.editableLabelChanged.emit(event.target.value);
-            });
-            this.renderer.appendChild(this.el.nativeElement, appendedInput);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditableLabelDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: EditableLabelDirective, isStandalone: true, selector: "[gnUiEditableLabel]", inputs: { gnUiEditableLabel: "gnUiEditableLabel" }, outputs: { editableLabelChanged: "editableLabelChanged" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditableLabelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[gnUiEditableLabel]',
-                    standalone: true,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { editableLabelChanged: [{
+            }], exitsViewport: [{
                 type: Output
-            }], gnUiEditableLabel: [{
-                type: Input
             }] } });
 
 class FilesDropDirective {
@@ -25198,7 +25505,7 @@ class ImageInputComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ImageInputComponent, deps: [{ token: i1.HttpClient }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ImageInputComponent, isStandalone: true, selector: "gn-ui-image-input", inputs: { maxSizeMB: "maxSizeMB", previewUrl: "previewUrl", altText: "altText", uploadProgress: "uploadProgress", uploadError: "uploadError" }, outputs: { fileChange: "fileChange", urlChange: "urlChange", uploadCancel: "uploadCancel", delete: "delete", altTextChange: "altTextChange" }, ngImport: i0, template: "<ng-container *ngIf=\"previewUrl; then withImage; else withoutImage\">\n</ng-container>\n\n<ng-template #withImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <div class=\"flex-1 group relative\">\n      <img\n        class=\"w-full h-full object-cover border-2 border-gray-300 rounded-lg\"\n        [alt]=\"altText\"\n        loading=\"lazy\"\n        [src]=\"previewUrl\"\n      />\n      <gn-ui-button\n        [extraClass]=\"\n          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'\n        \"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">delete</mat-icon>\n      </gn-ui-button>\n    </div>\n    <input\n      *ngIf=\"showAltTextInput\"\n      type=\"text\"\n      class=\"py-3 px-2 border-2 border-gray-300 rounded-lg text-sm font-medium\"\n      [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n      [value]=\"altText\"\n      (change)=\"handleAltTextChange($event)\"\n    />\n    <div class=\"flex flex-row gap-2\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">delete</mat-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      <gn-ui-button\n        *ngIf=\"!showAltTextInput\"\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"toggleAltTextInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">add</mat-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=\"block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      <div class=\"w-14 h-14 rounded-md bg-gray-200 grid\">\n        <mat-icon\n          *ngIf=\"!dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >image</mat-icon\n        >\n        <mat-icon\n          *ngIf=\"dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >add_box</mat-icon\n        >\n        <div *ngIf=\"uploadProgress\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            [mode]=\"'determinate'\"\n            [value]=\"uploadProgress\"\n          ></mat-progress-spinner>\n          <span\n            class=\"text-sm font-medium relative inline-block width-[30px] bottom-[40px] left-[15px]\"\n          >\n            {{ uploadProgress }}%\n          </span>\n        </div>\n        <mat-icon\n          *ngIf=\"uploadError\"\n          class=\"material-symbols-outlined place-self-center text-rose-500\"\n          >broken_image</mat-icon\n        >\n      </div>\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\">{{ getPrimaryText() | translate }}</p>\n        <p\n          class=\"text-sm\"\n          [class]=\"\n            uploadProgress || uploadError\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick()\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"showUrlInput || uploadProgress || uploadError\"\n      />\n    </label>\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"displayUrlInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">link</mat-icon>\n        {{ 'input.image.displayUrlInput' | translate }}\n      </gn-ui-button>\n    </div>\n    <div *ngIf=\"showUrlInput\" class=\"flex-none flex flex-col gap-2\">\n      <div class=\"h-2\"></div>\n      <div class=\"flex gap-2 items-center\">\n        <div class=\"flex-1 flex rounded-lg\">\n          <span\n            class=\"material-symbols-outlined px-4 inline-flex items-center min-w-fit rounded-s-lg border-2 border-e-0 border-gray-300\"\n            >link</span\n          >\n          <input\n            type=\"text\"\n            class=\"py-3 ps-1 block w-full border-2 border-s-0 border-e-0 border-gray-300 text-sm font-medium\"\n            placeholder=\"https://exemple.com/image.jpg\"\n            (change)=\"handleUrlChange($event)\"\n          />\n          <gn-ui-button\n            class=\"px-1 inline-flex items-center min-w-fit rounded-e-lg border-2 border-s-0 border-gray-300 text-white\"\n            [extraClass]=\"\n              urlInputValue && !downloadError ? 'bg-blue-500' : 'bg-gray-500'\n            \"\n            [disabled]=\"!urlInputValue || downloadError\"\n            (buttonClick)=\"downloadUrl()\"\n          >\n            <mat-icon class=\"material-symbols-outlined\">arrow_upward</mat-icon>\n          </gn-ui-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ImageInputComponent, isStandalone: true, selector: "gn-ui-image-input", inputs: { maxSizeMB: "maxSizeMB", previewUrl: "previewUrl", altText: "altText", uploadProgress: "uploadProgress", uploadError: "uploadError" }, outputs: { fileChange: "fileChange", urlChange: "urlChange", uploadCancel: "uploadCancel", delete: "delete", altTextChange: "altTextChange" }, ngImport: i0, template: "<ng-container *ngIf=\"previewUrl; then withImage; else withoutImage\">\n</ng-container>\n\n<ng-template #withImage>\n  <div class=\"w-full h-full flex flex-col gap-2\">\n    <div class=\"flex-1 group relative\">\n      <img\n        class=\"w-full h-full object-cover border-2 border-gray-300 rounded-lg\"\n        [alt]=\"altText\"\n        loading=\"lazy\"\n        [src]=\"previewUrl\"\n      />\n      <gn-ui-button\n        [extraClass]=\"\n          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'\n        \"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">delete</mat-icon>\n      </gn-ui-button>\n    </div>\n    <input\n      *ngIf=\"showAltTextInput\"\n      type=\"text\"\n      class=\"py-3 px-2 border-2 border-gray-300 rounded-lg text-sm font-medium\"\n      [placeholder]=\"'input.image.altTextPlaceholder' | translate\"\n      [value]=\"altText\"\n      (change)=\"handleAltTextChange($event)\"\n    />\n    <div class=\"flex flex-row gap-2\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"handleDelete()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">delete</mat-icon>\n        {{ 'input.image.delete' | translate }}\n      </gn-ui-button>\n      <gn-ui-button\n        *ngIf=\"!showAltTextInput\"\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"toggleAltTextInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">add</mat-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=\"block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4\"\n      (dragFilesOver)=\"handleDragFilesOver($event)\"\n      (dropFiles)=\"handleDropFiles($event)\"\n    >\n      <div class=\"w-14 h-14 rounded-md bg-gray-200 grid\">\n        <mat-icon\n          *ngIf=\"!dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >image</mat-icon\n        >\n        <mat-icon\n          *ngIf=\"dragFilesOver && !uploadProgress && !uploadError\"\n          class=\"material-symbols-outlined place-self-center text-blue-500\"\n          >add_box</mat-icon\n        >\n        <div *ngIf=\"uploadProgress\">\n          <mat-progress-spinner\n            class=\"place-self-center\"\n            [diameter]=\"56\"\n            [mode]=\"'determinate'\"\n            [value]=\"uploadProgress\"\n          ></mat-progress-spinner>\n          <span\n            class=\"text-sm font-medium relative inline-block width-[30px] bottom-[40px] left-[15px]\"\n          >\n            {{ uploadProgress }}%\n          </span>\n        </div>\n        <mat-icon\n          *ngIf=\"uploadError\"\n          class=\"material-symbols-outlined place-self-center text-rose-500\"\n          >broken_image</mat-icon\n        >\n      </div>\n      <div class=\"flex flex-col items-center gap-1\">\n        <p class=\"font-medium\">{{ getPrimaryText() | translate }}</p>\n        <p\n          class=\"text-sm\"\n          [class]=\"\n            uploadProgress || uploadError\n              ? 'font-bold text-blue-500 cursor-pointer'\n              : 'font-medium text-gray-500'\n          \"\n          (click)=\"handleSecondaryTextClick()\"\n        >\n          {{ getSecondaryText() | translate }}\n        </p>\n      </div>\n      <input\n        type=\"file\"\n        class=\"hidden\"\n        (change)=\"handleFileInput($event)\"\n        [disabled]=\"showUrlInput || uploadProgress || uploadError\"\n      />\n    </label>\n    <div *ngIf=\"!showUrlInput\" class=\"flex-none\">\n      <gn-ui-button\n        [extraClass]=\"'bg-gray-200 font-bold'\"\n        (buttonClick)=\"displayUrlInput()\"\n      >\n        <mat-icon class=\"material-symbols-outlined me-1\">link</mat-icon>\n        {{ 'input.image.displayUrlInput' | translate }}\n      </gn-ui-button>\n    </div>\n    <div *ngIf=\"showUrlInput\" class=\"flex-none flex flex-col gap-2\">\n      <div class=\"h-2\"></div>\n      <div class=\"flex gap-2 items-center\">\n        <div class=\"flex-1 flex rounded-lg\">\n          <span\n            class=\"material-symbols-outlined px-4 inline-flex items-center min-w-fit rounded-s-lg border-2 border-e-0 border-gray-300\"\n            >link</span\n          >\n          <input\n            type=\"text\"\n            class=\"py-3 ps-1 block w-full border-2 border-s-0 border-e-0 border-gray-300 text-sm font-medium\"\n            placeholder=\"https://exemple.com/image.jpg\"\n            (change)=\"handleUrlChange($event)\"\n          />\n          <gn-ui-button\n            class=\"px-1 inline-flex items-center min-w-fit rounded-e-lg border-2 border-s-0 border-gray-300 text-white\"\n            [extraClass]=\"\n              urlInputValue && !downloadError ? 'bg-blue-500' : 'bg-gray-500'\n            \"\n            [disabled]=\"!urlInputValue || downloadError\"\n            (buttonClick)=\"downloadUrl()\"\n          >\n            <mat-icon class=\"material-symbols-outlined\">arrow_upward</mat-icon>\n          </gn-ui-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: FilesDropDirective, selector: "[gnUiFilesDrop]", outputs: ["dragFilesOver", "dropFiles"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$6.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ImageInputComponent, decorators: [{
             type: Component,
@@ -25234,8 +25541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 class UiInputsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, declarations: [DropdownSelectorComponent,
-            AutocompleteComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, declarations: [AutocompleteComponent,
             TextInputComponent,
             DragAndDropFileInputComponent,
             ChipsInputComponent,
@@ -25246,8 +25552,7 @@ class UiInputsModule {
             CheckToggleComponent,
             CopyTextButtonComponent,
             CheckboxComponent,
-            SearchInputComponent,
-            DateRangePickerComponent], imports: [CommonModule, i1$1.TranslateModule, NgxDropzoneModule,
+            SearchInputComponent], imports: [CommonModule, i1$1.TranslateModule, NgxDropzoneModule,
             FormsModule,
             ReactiveFormsModule,
             TagInputModule,
@@ -25265,7 +25570,9 @@ class UiInputsModule {
             EditableLabelDirective,
             TextAreaComponent,
             ButtonComponent,
-            ImageInputComponent], exports: [DropdownSelectorComponent,
+            ImageInputComponent,
+            DropdownSelectorComponent,
+            DateRangePickerComponent], exports: [DropdownSelectorComponent,
             AutocompleteComponent,
             ButtonComponent,
             TextInputComponent,
@@ -25300,13 +25607,14 @@ class UiInputsModule {
             MatInputModule,
             MatDatepickerModule,
             MatNativeDateModule,
-            ImageInputComponent] }); }
+            ImageInputComponent,
+            DropdownSelectorComponent,
+            DateRangePickerComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiInputsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        DropdownSelectorComponent,
                         AutocompleteComponent,
                         TextInputComponent,
                         DragAndDropFileInputComponent,
@@ -25319,7 +25627,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         CopyTextButtonComponent,
                         CheckboxComponent,
                         SearchInputComponent,
-                        DateRangePickerComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -25343,6 +25650,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         TextAreaComponent,
                         ButtonComponent,
                         ImageInputComponent,
+                        DropdownSelectorComponent,
+                        DateRangePickerComponent,
                     ],
                     exports: [
                         DropdownSelectorComponent,
@@ -25367,34 +25676,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
+class PreviousNextButtonsComponent {
+    constructor() {
+        this.directionButtonClicked = new EventEmitter();
+    }
+    previousButtonClicked() {
+        this.directionButtonClicked.next('previous');
+    }
+    nextButtonClicked() {
+        this.directionButtonClicked.next('next');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PreviousNextButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: PreviousNextButtonsComponent, isStandalone: true, selector: "gn-ui-previous-next-buttons", inputs: { isFirst: "isFirst", isLast: "isLast" }, outputs: { directionButtonClicked: "directionButtonClicked" }, ngImport: i0, template: "<div class=\"flex flex-row gap-x-4 items-center\">\n  <gn-ui-button\n    data-test=\"previousButton\"\n    [type]=\"isFirst ? 'default' : 'outline'\"\n    [disabled]=\"isFirst\"\n    (buttonClick)=\"previousButtonClicked()\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined text-[14px] text-center pt-[5px]\"\n    >\n      arrow_back\n    </mat-icon>\n  </gn-ui-button>\n  <gn-ui-button\n    data-test=\"nextButton\"\n    [type]=\"isLast ? 'default' : 'outline'\"\n    [disabled]=\"isLast\"\n    (buttonClick)=\"nextButtonClicked()\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined text-[14px] text-center pt-[5px]\"\n    >\n      arrow_forward\n    </mat-icon>\n  </gn-ui-button>\n</div>\n", styles: [":host{--gn-ui-button-rounded: 100%;--gn-ui-button-width: 8px;--gn-ui-button-height: 8px;--gn-ui-button-padding: 12px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PreviousNextButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-previous-next-buttons', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ButtonComponent, MatIconModule], template: "<div class=\"flex flex-row gap-x-4 items-center\">\n  <gn-ui-button\n    data-test=\"previousButton\"\n    [type]=\"isFirst ? 'default' : 'outline'\"\n    [disabled]=\"isFirst\"\n    (buttonClick)=\"previousButtonClicked()\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined text-[14px] text-center pt-[5px]\"\n    >\n      arrow_back\n    </mat-icon>\n  </gn-ui-button>\n  <gn-ui-button\n    data-test=\"nextButton\"\n    [type]=\"isLast ? 'default' : 'outline'\"\n    [disabled]=\"isLast\"\n    (buttonClick)=\"nextButtonClicked()\"\n  >\n    <mat-icon\n      class=\"material-symbols-outlined text-[14px] text-center pt-[5px]\"\n    >\n      arrow_forward\n    </mat-icon>\n  </gn-ui-button>\n</div>\n", styles: [":host{--gn-ui-button-rounded: 100%;--gn-ui-button-width: 8px;--gn-ui-button-height: 8px;--gn-ui-button-padding: 12px}\n"] }]
+        }], propDecorators: { isFirst: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }], directionButtonClicked: [{
+                type: Output
+            }] } });
+
 class AddLayerFromOgcApiComponent {
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
         this.layerAdded = new EventEmitter();
         this.urlChange = new Subject();
-        this.layerUrl = '';
         this.loading = false;
         this.layers = [];
-        this.ogcEndpoint = null;
         this.errorMessage = null;
+        this.selectedLayerTypes = {};
     }
     ngOnInit() {
         this.urlChange.pipe(debounceTime$1(700)).subscribe(() => {
             this.loadLayers();
-            this.changeDetectorRef.detectChanges(); // manually trigger change detection
         });
     }
     async loadLayers() {
         this.errorMessage = null;
         try {
             this.loading = true;
-            if (this.ogcUrl.trim() === '') {
+            if (!this.ogcUrl.trim()) {
                 this.layers = [];
                 return;
             }
-            this.ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl);
-            // Currently only supports feature collections
-            this.layers = await this.ogcEndpoint.featureCollections;
+            const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl);
+            this.layers = await ogcEndpoint.allCollections;
+            this.setDefaultLayerTypes();
         }
         catch (error) {
             const err = error;
@@ -25406,21 +25737,75 @@ class AddLayerFromOgcApiComponent {
             this.changeDetectorRef.markForCheck();
         }
     }
-    async addLayer(layer) {
-        this.layerUrl = await this.ogcEndpoint.getCollectionItemsUrl(layer);
-        const layerToAdd = {
-            name: layer,
-            url: this.layerUrl,
-            type: MapContextLayerTypeEnum.OGCAPI,
-        };
-        this.layerAdded.emit({ ...layerToAdd, title: layer });
+    setDefaultLayerTypes() {
+        this.layers.forEach((layer) => {
+            const choices = this.getLayerChoices(layer);
+            if (choices.length > 0) {
+                this.selectedLayerTypes[layer.name] = choices[0].value;
+            }
+        });
+    }
+    getLayerChoices(layer) {
+        const choices = [];
+        if (layer.hasRecords) {
+            choices.push({ label: 'Records', value: 'record' });
+        }
+        if (layer.hasFeatures) {
+            choices.push({ label: 'Features', value: 'features' });
+        }
+        if (layer.hasVectorTiles) {
+            choices.push({ label: 'Vector Tiles', value: 'vectorTiles' });
+        }
+        if (layer.hasMapTiles) {
+            choices.push({ label: 'Map Tiles', value: 'mapTiles' });
+        }
+        return choices;
+    }
+    shouldDisplayLayer(layer) {
+        return (layer.hasRecords ||
+            layer.hasFeatures ||
+            layer.hasVectorTiles ||
+            layer.hasMapTiles);
+    }
+    onLayerTypeSelect(layerName, selectedType) {
+        this.selectedLayerTypes[layerName] = selectedType
+            ? selectedType
+            : this.getLayerChoices(layerName)[0]?.value;
+    }
+    async addLayer(layer, layerType) {
+        try {
+            const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl);
+            let layerUrl;
+            if (layerType === 'vectorTiles') {
+                layerUrl = await ogcEndpoint.getVectorTilesetUrl(layer);
+            }
+            else if (layerType === 'mapTiles') {
+                layerUrl = await ogcEndpoint.getMapTilesetUrl(layer);
+            }
+            else {
+                layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer, {
+                    outputFormat: 'json',
+                });
+            }
+            const layerToAdd = {
+                name: layer,
+                url: layerUrl,
+                type: MapContextLayerTypeEnum.OGCAPI,
+                layerType: layerType,
+            };
+            this.layerAdded.emit({ ...layerToAdd, title: layer });
+        }
+        catch (error) {
+            const err = error;
+            console.error('Error adding layer:', err.message);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromOgcApiComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromOgcApiComponent, isStandalone: true, selector: "gn-ui-add-layer-from-ogc-api", inputs: { ogcUrl: "ogcUrl" }, outputs: { layerAdded: "layerAdded" }, ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"ogcUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.ogc.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container *ngFor=\"let layer of layers\">\n    <div class=\"flex items-center justify-between my-2 layer-item-tree\">\n      <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n        {{ layer }}\n      </p>\n      <gn-ui-button\n        class=\"layer-add-btn\"\n        type=\"primary\"\n        (buttonClick)=\"addLayer(layer)\"\n        extraClass=\"text-sm !px-2 !py-1\"\n        translate\n        ><span translate> map.layer.add </span></gn-ui-button\n      >\n    </div>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: UiInputsModule }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromOgcApiComponent, isStandalone: true, selector: "gn-ui-add-layer-from-ogc-api", inputs: { ogcUrl: "ogcUrl" }, outputs: { layerAdded: "layerAdded" }, ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"ogcUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.ogc.urlInput.hint' | translate\"\n    class=\"w-96\"\n  ></gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<ng-container *ngFor=\"let layer of layers\">\n  <div\n    *ngIf=\"shouldDisplayLayer(layer)\"\n    class=\"flex items-center justify-between my-2 layer-item-tree\"\n  >\n    <div class=\"flex flex-col items-start w-full\">\n      <p\n        class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\"\n        [title]=\"layer.name\"\n      >\n        {{ layer.name }}\n      </p>\n      <div class=\"flex justify-between items-center w-full\">\n        <gn-ui-dropdown-selector\n          [title]=\"'Add Layer As' | translate\"\n          [choices]=\"getLayerChoices(layer)\"\n          (selectValue)=\"onLayerTypeSelect(layer.name, $event)\"\n          [selected]=\"selectedLayerTypes[layer.name]\"\n          extraBtnClass=\"w-6 h-5 !text-sm !px-2 !py-1\"\n        ></gn-ui-dropdown-selector>\n        <gn-ui-button\n          class=\"layer-add-btn\"\n          type=\"primary\"\n          (buttonClick)=\"addLayer(layer.name, selectedLayerTypes[layer.name])\"\n          extraClass=\"text-sm !px-2 !py-1\"\n          translate\n        >\n          <span translate>map.layer.add</span>\n        </gn-ui-button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".dropdown-content{display:none}.relative:hover .dropdown-content{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: UiInputsModule }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }, { 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", "hint", "required", "disabled"], outputs: ["valueChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromOgcApiComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-add-layer-from-ogc-api', standalone: true, imports: [CommonModule, TranslateModule, UiInputsModule], template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"ogcUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.ogc.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container *ngFor=\"let layer of layers\">\n    <div class=\"flex items-center justify-between my-2 layer-item-tree\">\n      <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n        {{ layer }}\n      </p>\n      <gn-ui-button\n        class=\"layer-add-btn\"\n        type=\"primary\"\n        (buttonClick)=\"addLayer(layer)\"\n        extraClass=\"text-sm !px-2 !py-1\"\n        translate\n        ><span translate> map.layer.add </span></gn-ui-button\n      >\n    </div>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'gn-ui-add-layer-from-ogc-api', standalone: true, imports: [CommonModule, TranslateModule, UiInputsModule], template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"ogcUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.ogc.urlInput.hint' | translate\"\n    class=\"w-96\"\n  ></gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<ng-container *ngFor=\"let layer of layers\">\n  <div\n    *ngIf=\"shouldDisplayLayer(layer)\"\n    class=\"flex items-center justify-between my-2 layer-item-tree\"\n  >\n    <div class=\"flex flex-col items-start w-full\">\n      <p\n        class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\"\n        [title]=\"layer.name\"\n      >\n        {{ layer.name }}\n      </p>\n      <div class=\"flex justify-between items-center w-full\">\n        <gn-ui-dropdown-selector\n          [title]=\"'Add Layer As' | translate\"\n          [choices]=\"getLayerChoices(layer)\"\n          (selectValue)=\"onLayerTypeSelect(layer.name, $event)\"\n          [selected]=\"selectedLayerTypes[layer.name]\"\n          extraBtnClass=\"w-6 h-5 !text-sm !px-2 !py-1\"\n        ></gn-ui-dropdown-selector>\n        <gn-ui-button\n          class=\"layer-add-btn\"\n          type=\"primary\"\n          (buttonClick)=\"addLayer(layer.name, selectedLayerTypes[layer.name])\"\n          extraClass=\"text-sm !px-2 !py-1\"\n          translate\n        >\n          <span translate>map.layer.add</span>\n        </gn-ui-button>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".dropdown-content{display:none}.relative:hover .dropdown-content{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { ogcUrl: [{
                 type: Input
             }], layerAdded: [{
@@ -26162,7 +26547,8 @@ class ApiCardComponent {
     }
     ngOnInit() {
         this.displayApiFormButton =
-            this.link.accessServiceProtocol === 'ogcFeatures' ? true : false;
+            this.link.accessServiceProtocol === 'ogcFeatures' ||
+                this.link.accessServiceProtocol === 'wfs';
     }
     ngOnChanges(changes) {
         this.currentlyActive =
@@ -26175,7 +26561,7 @@ class ApiCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ApiCardComponent, selector: "gn-ui-api-card", inputs: { link: "link", currentLink: "currentLink" }, outputs: { openRecordApiForm: "openRecordApiForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden\"\n  [ngClass]=\"{ 'cursor-pointer': displayApiFormButton }\"\n  (click)=\"openRecordApiFormPanel()\"\n>\n  <div\n    class=\"font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]\"\n  >\n    {{ link.name || link.description }}\n  </div>\n  <div class=\"\">\n    <div class=\"flex flex-row justify-between\">\n      <span\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      <gn-ui-copy-text-button\n        *ngIf=\"!displayApiFormButton\"\n        [text]=\"link.url.toString()\"\n        [tooltipText]=\"'tooltip.url.copy' | translate\"\n        [displayText]=\"false\"\n      ></gn-ui-copy-text-button>\n      <button\n        *ngIf=\"displayApiFormButton\"\n        type=\"button\"\n        [ngClass]=\"{\n          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n            displayText\n        }\"\n        mat-raised-button\n        [matTooltip]=\"\n          !currentlyActive\n            ? ('record.metadata.api.form.openForm' | translate)\n            : ('record.metadata.api.form.closeForm' | translate)\n        \"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon\n          class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n          [ngClass]=\"{\n            'text-secondary opacity-100': currentlyActive\n          }\"\n          >more_horiz</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ApiCardComponent, selector: "gn-ui-api-card", inputs: { link: "link", currentLink: "currentLink" }, outputs: { openRecordApiForm: "openRecordApiForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden\"\n  [ngClass]=\"{ 'cursor-pointer': displayApiFormButton }\"\n  (click)=\"openRecordApiFormPanel()\"\n>\n  <div\n    class=\"font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]\"\n  >\n    {{ link.name || link.description }}\n  </div>\n  <div class=\"\">\n    <div class=\"flex flex-row justify-between\">\n      <span\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      <gn-ui-copy-text-button\n        *ngIf=\"!displayApiFormButton\"\n        [text]=\"link.url.toString()\"\n        [tooltipText]=\"'tooltip.url.copy' | translate\"\n        [displayText]=\"false\"\n      ></gn-ui-copy-text-button>\n      <button\n        *ngIf=\"displayApiFormButton\"\n        type=\"button\"\n        [ngClass]=\"{\n          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':\n            displayText\n        }\"\n        mat-raised-button\n        [matTooltip]=\"\n          !currentlyActive\n            ? ('record.metadata.api.form.openForm' | translate)\n            : ('record.metadata.api.form.closeForm' | translate)\n        \"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon\n          class=\"material-symbols-outlined pointer-events-none align-middle card-icon\"\n          [ngClass]=\"{\n            'text-secondary opacity-100': currentlyActive\n          }\"\n          >more_horiz</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ApiCardComponent, decorators: [{
             type: Component,
@@ -26306,7 +26692,7 @@ class DownloadsListComponent {
         return getBadgeColor(getFileFormat(link));
     }
     isFromWfs(link) {
-        return link.type === 'service' && link.accessServiceProtocol === 'wfs';
+        return link.type === 'download' && link.accessServiceProtocol === 'wfs';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DownloadsListComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DownloadsListComponent, selector: "gn-ui-downloads-list", inputs: { links: "links" }, ngImport: i0, template: "<div\n  class=\"flex flex-wrap justify-between mt-8 mb-6 sm:mt-12 sm:mb-2\"\n  *ngIf=\"links && links.length > 0\"\n>\n  <p\n    class=\"font-title text-[28px] text-title font-medium mr-4 pb-4 text-center sm:text-left\"\n    translate\n  >\n    record.metadata.download\n  </p>\n  <div\n    class=\"flex flex-wrap justify-start sm:justify-end sm:pb-4\"\n    data-cy=\"download-format-filters\"\n  >\n    <gn-ui-button\n      class=\"m-1 format-filter\"\n      [extraClass]=\"\n        '!px-[12px] !py-[8px] !text-[15px]' +\n        (isFilterActive(format) ? ' opacity-100' : ' opacity-50')\n      \"\n      (buttonClick)=\"toggleFilterFormat(format)\"\n      [attr.data-format]=\"format\"\n      *ngFor=\"let format of visibleFormats\"\n    >\n      {{ getFilterFormatTitle(format) }}\n    </gn-ui-button>\n  </div>\n</div>\n<div class=\"mb-2 sm:mb-3\" *ngFor=\"let link of filteredLinks\">\n  <gn-ui-download-item\n    [link]=\"link\"\n    [color]=\"getLinkColor(link)\"\n    [format]=\"getLinkFormat(link)\"\n    [isFromWfs]=\"isFromWfs(link)\"\n  ></gn-ui-download-item>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: DownloadItemComponent, selector: "gn-ui-download-item", inputs: ["link", "color", "format", "isFromWfs"], outputs: ["exportUrl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -26338,14 +26724,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             }] } });
 
 class LinkCardComponent {
+    constructor() {
+        this.compact = false;
+    }
+    get title() {
+        if (this.link.name && this.link.description) {
+            return `${this.link.name} | ${this.link.description}`;
+        }
+        return this.link.name || this.link.description || '';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: LinkCardComponent, selector: "gn-ui-link-card", inputs: { link: "link" }, ngImport: i0, template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80\"\n>\n  <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n    <p\n      class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n    >\n      {{ link.name }}\n    </p>\n    <p class=\"font-medium text-sm break-words\">\n      {{ link.description }}\n    </p>\n    <p\n      *ngIf=\"!link.name && !link.description\"\n      class=\"font-medium text-sm break-words truncate\"\n    >\n      {{ link.url }}\n    </p>\n  </div>\n  <div>\n    <mat-icon class=\"material-symbols-outlined card-icon\">open_in_new</mat-icon>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: LinkCardComponent, isStandalone: true, selector: "gn-ui-link-card", inputs: { link: "link", compact: "compact" }, ngImport: i0, template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden\"\n  [ngClass]=\"{ 'h-40': !compact }\"\n  [title]=\"title\"\n>\n  <ng-container *ngIf=\"!compact; else compactTpl\">\n    <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n      <p\n        class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n      >\n        {{ link.name }}\n      </p>\n      <p class=\"font-medium text-sm break-words\">\n        {{ link.description }}\n      </p>\n      <p\n        *ngIf=\"!link.name && !link.description\"\n        class=\"font-medium text-sm break-words truncate\"\n      >\n        {{ link.url }}\n      </p>\n    </div>\n    <div>\n      <mat-icon class=\"material-symbols-outlined card-icon\"\n        >open_in_new</mat-icon\n      >\n    </div>\n  </ng-container>\n  <ng-template #compactTpl>\n    <div class=\"flex items-center justify-between gap-4\">\n      <p\n        class=\"overflow-hidden font-title font-medium text-21 text-black text-ellipsis whitespace-nowrap\"\n      >\n        {{ link.name || link.description }}\n      </p>\n      <mat-icon class=\"material-symbols-outlined card-icon flex-shrink-0\"\n        >open_in_new</mat-icon\n      >\n    </div>\n  </ng-template>\n</a>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LinkCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-link-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80\"\n>\n  <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n    <p\n      class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n    >\n      {{ link.name }}\n    </p>\n    <p class=\"font-medium text-sm break-words\">\n      {{ link.description }}\n    </p>\n    <p\n      *ngIf=\"!link.name && !link.description\"\n      class=\"font-medium text-sm break-words truncate\"\n    >\n      {{ link.url }}\n    </p>\n  </div>\n  <div>\n    <mat-icon class=\"material-symbols-outlined card-icon\">open_in_new</mat-icon>\n  </div>\n</a>\n" }]
+            args: [{ selector: 'gn-ui-link-card', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule], template: "<a\n  [href]=\"link.url\"\n  target=\"_blank\"\n  class=\"flex flex-col justify-between group grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden\"\n  [ngClass]=\"{ 'h-40': !compact }\"\n  [title]=\"title\"\n>\n  <ng-container *ngIf=\"!compact; else compactTpl\">\n    <div class=\"max-h-24 overflow-hidden text-ellipsis\">\n      <p\n        class=\"font-title font-medium text-21 text-black break-words mb-1 line-clamp-2\"\n      >\n        {{ link.name }}\n      </p>\n      <p class=\"font-medium text-sm break-words\">\n        {{ link.description }}\n      </p>\n      <p\n        *ngIf=\"!link.name && !link.description\"\n        class=\"font-medium text-sm break-words truncate\"\n      >\n        {{ link.url }}\n      </p>\n    </div>\n    <div>\n      <mat-icon class=\"material-symbols-outlined card-icon\"\n        >open_in_new</mat-icon\n      >\n    </div>\n  </ng-container>\n  <ng-template #compactTpl>\n    <div class=\"flex items-center justify-between gap-4\">\n      <p\n        class=\"overflow-hidden font-title font-medium text-21 text-black text-ellipsis whitespace-nowrap\"\n      >\n        {{ link.name || link.description }}\n      </p>\n      <mat-icon class=\"material-symbols-outlined card-icon flex-shrink-0\"\n        >open_in_new</mat-icon\n      >\n    </div>\n  </ng-template>\n</a>\n" }]
         }], propDecorators: { link: [{
                 type: Input
+            }], compact: [{
+                type: Input
             }] } });
 
 class MarkdownParserComponent {
@@ -26372,7 +26769,7 @@ class MarkdownEditorComponent {
         this.textContentChanged.emit(this.textContent);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MarkdownEditorComponent, isStandalone: true, selector: "gn-ui-markdown-editor", inputs: { preview: "preview", helperText: "helperText", placeholder: "placeholder", textContent: "textContent" }, outputs: { textContentChanged: "textContentChanged" }, ngImport: i0, template: "<div class=\"h-full flex flex-col\">\n  <p class=\"flex-none mb-2 font-medium text-sm text-gray-900\">\n    {{ helperText }}\n  </p>\n  <div class=\"flex-1\" [hidden]=\"preview\">\n    <gn-ui-text-area\n      [placeholder]=\"placeholder\"\n      [value]=\"textContent\"\n      (valueChange)=\"textContentChangedHandler($event)\"\n    ></gn-ui-text-area>\n  </div>\n  <div\n    class=\"flex-1 border border-gray-800 rounded overflow-y-scroll\"\n    [hidden]=\"!preview\"\n  >\n    <gn-ui-markdown-parser [textContent]=\"textContent\"></gn-ui-markdown-parser>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: MarkdownEditorComponent, isStandalone: true, selector: "gn-ui-markdown-editor", inputs: { preview: "preview", helperText: "helperText", placeholder: "placeholder", textContent: "textContent" }, outputs: { textContentChanged: "textContentChanged" }, ngImport: i0, template: "<div class=\"h-full flex flex-col\">\n  <p class=\"flex-none mb-2 font-medium text-sm text-gray-900\">\n    {{ helperText }}\n  </p>\n  <div class=\"flex-1\" [hidden]=\"preview\">\n    <gn-ui-text-area\n      [placeholder]=\"placeholder\"\n      [value]=\"textContent\"\n      (valueChange)=\"textContentChangedHandler($event)\"\n    ></gn-ui-text-area>\n  </div>\n  <div\n    class=\"flex-1 border border-gray-800 rounded overflow-y-scroll\"\n    [hidden]=\"!preview\"\n  >\n    <gn-ui-markdown-parser [textContent]=\"textContent\"></gn-ui-markdown-parser>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { kind: "ngmodule", type: TranslateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MarkdownEditorComponent, decorators: [{
             type: Component,
@@ -26807,11 +27204,9 @@ class RecordApiFormComponent {
         this.offset$ = new BehaviorSubject('');
         this.limit$ = new BehaviorSubject('');
         this.format$ = new BehaviorSubject('');
-        this.formatsList = [
-            { label: 'JSON', value: 'json' },
-            { label: 'CSV', value: 'csv' },
-        ];
-        this.apiQueryUrl$ = combineLatest([this.offset$, this.limit$, this.format$]).pipe(map$2(([offset, limit, format]) => {
+        this.supportOffset = true;
+        this.outputFormats = [{ value: 'json', label: 'JSON' }];
+        this.apiQueryUrl$ = combineLatest([this.offset$, this.limit$, this.format$]).pipe(switchMap(async ([offset, limit, format]) => {
             let outputUrl;
             if (this.apiBaseUrl) {
                 const url = new URL(this.apiBaseUrl);
@@ -26826,13 +27221,32 @@ class RecordApiFormComponent {
                 }
                 outputUrl = url.toString();
             }
+            if (this.accessServiceProtocol === 'wfs') {
+                const wfsEndpoint = new WfsEndpoint(this.apiBaseUrl);
+                if (await wfsEndpoint.isReady()) {
+                    const options = {
+                        outputFormat: format,
+                        startIndex: Number(offset),
+                    };
+                    if (limit !== '-1') {
+                        options['maxFeatures'] = Number(limit);
+                    }
+                    outputUrl = wfsEndpoint.getFeatureUrl(this.apiFeatureType, options);
+                }
+            }
             return outputUrl;
         }));
         this.noLimitChecked$ = this.limit$.pipe(map$2((limit) => limit === '-1' || limit === ''));
         this.displayLimit$ = this.limit$.pipe(map$2((limit) => (limit !== '-1' ? limit : '')));
     }
     set apiLink(value) {
-        this.apiBaseUrl = value ? value.url.href : undefined;
+        this.outputFormats = [{ value: 'json', label: 'JSON' }];
+        this.accessServiceProtocol = value ? value.accessServiceProtocol : undefined;
+        this.apiFeatureType = value ? value.name : undefined;
+        if (value) {
+            this.apiBaseUrl = value.url.href;
+            this.parseOutputFormats();
+        }
         this.resetUrl();
     }
     setOffset(value) {
@@ -26850,19 +27264,61 @@ class RecordApiFormComponent {
         this.limit$.next(DEFAULT_PARAMS.LIMIT);
         this.format$.next(DEFAULT_PARAMS.FORMAT);
     }
+    parseOutputFormats() {
+        const apiUrl = this.apiBaseUrl.slice(-1) === '?'
+            ? this.apiBaseUrl.slice(0, -1)
+            : this.apiBaseUrl;
+        this.getOutputFormats(apiUrl, this.accessServiceProtocol).then((outputFormats) => {
+            let formatsList = [];
+            if ('itemFormats' in outputFormats) {
+                formatsList = this.mapFormats(outputFormats.itemFormats);
+            }
+            else if ('outputFormats' in outputFormats) {
+                formatsList = this.mapFormats(outputFormats.outputFormats);
+            }
+            this.outputFormats = this.outputFormats.concat(formatsList.filter(Boolean));
+            this.outputFormats = this.outputFormats
+                .filter((format, index, self) => index === self.findIndex((t) => t.value === format.value))
+                .sort((a, b) => a.label.localeCompare(b.label));
+        });
+    }
+    mapFormats(formats) {
+        return formats.map((format) => {
+            const normalizedFormat = mimeTypeToFormat(format);
+            if (normalizedFormat) {
+                return {
+                    label: normalizedFormat.toUpperCase(),
+                    value: normalizedFormat,
+                };
+            }
+            return null;
+        });
+    }
+    async getOutputFormats(url, accessServiceProtocol) {
+        if (accessServiceProtocol === 'wfs') {
+            const endpoint = await new WfsEndpoint(url).isReady();
+            this.supportOffset = endpoint.supportsStartIndex();
+            return endpoint.getServiceInfo();
+        }
+        else {
+            const endpoint = await new OgcApiEndpoint(url);
+            const firstCollection = (await endpoint.featureCollections)[0];
+            return endpoint.getCollectionInfo(firstCollection);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordApiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordApiFormComponent, selector: "gn-ui-record-api-form", inputs: { apiLink: "apiLink" }, ngImport: i0, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.offset</p>\n        <gn-ui-text-input\n          class=\"w-20\"\n          [value]=\"offset$ | async\"\n          (valueChange)=\"setOffset($event)\"\n          hint=\"\"\n        >\n        </gn-ui-text-input>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"formatsList\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"], dependencies: [{ kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RecordApiFormComponent, selector: "gn-ui-record-api-form", inputs: { apiLink: "apiLink" }, ngImport: i0, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3 relative\">\n        <p class=\"text-sm\" [class.text-gray-600]=\"!supportOffset\" translate>\n          record.metadata.api.form.offset\n        </p>\n        <div class=\"flex items-center\">\n          <gn-ui-text-input\n            class=\"w-20\"\n            [value]=\"offset$ | async\"\n            [disabled]=\"!supportOffset\"\n            (valueChange)=\"supportOffset ? setOffset($event) : null\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div\n            *ngIf=\"!supportOffset\"\n            class=\"flex items-center gap-2 text-orange-500 z-10 ml-3\"\n          >\n            <span\n              class=\"material-symbols-outlined\"\n              matTooltip=\"Not supported on this service\"\n            >\n              warning\n            </span>\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"outputFormats\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "hint", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RecordApiFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-record-api-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.offset</p>\n        <gn-ui-text-input\n          class=\"w-20\"\n          [value]=\"offset$ | async\"\n          (valueChange)=\"setOffset($event)\"\n          hint=\"\"\n        >\n        </gn-ui-text-input>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"formatsList\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"] }]
+            args: [{ selector: 'gn-ui-record-api-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-8\">\n  <div class=\"flex flex-col bg-white p-8 ng-star-inserted shadow-xl gap-8\">\n    <div class=\"flex flex-row\">\n      <div class=\"text-[16px] text-black truncate font-title w-11/12\" translate>\n        record.metadata.api.form.create\n      </div>\n      <button\n        (click)=\"resetUrl()\"\n        class=\"bg-primary-opacity-50 inline-flex items-center justify-center px-2 py-1 text-13 font-medium leading-none text-white rounded capitalize text-primary-lightest hover:bg-primary transition-colors\"\n      >\n        <p class=\"text-[13px] uppercase\" translate>\n          record.metadata.api.form.reset\n        </p>\n      </button>\n    </div>\n    <div class=\"flex flex-row flex-wrap justify-between grow gap-5\">\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-[14px]\" translate>record.metadata.api.form.limit</p>\n        <div class=\"flex flex-row items-center gap-2\">\n          <gn-ui-text-input\n            class=\"mr-2 w-20\"\n            (valueChange)=\"setLimit($event)\"\n            [value]=\"displayLimit$ | async\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div class=\"flex items-center\">\n            <input\n              class=\"mr-2 cursor-pointer\"\n              type=\"checkbox\"\n              [checked]=\"noLimitChecked$ | async\"\n              (change)=\"setLimit('-1')\"\n            />\n            <span class=\"text-sm\" translate\n              >record.metadata.api.form.limit.all</span\n            >\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3 relative\">\n        <p class=\"text-sm\" [class.text-gray-600]=\"!supportOffset\" translate>\n          record.metadata.api.form.offset\n        </p>\n        <div class=\"flex items-center\">\n          <gn-ui-text-input\n            class=\"w-20\"\n            [value]=\"offset$ | async\"\n            [disabled]=\"!supportOffset\"\n            (valueChange)=\"supportOffset ? setOffset($event) : null\"\n            hint=\"\"\n          >\n          </gn-ui-text-input>\n          <div\n            *ngIf=\"!supportOffset\"\n            class=\"flex items-center gap-2 text-orange-500 z-10 ml-3\"\n          >\n            <span\n              class=\"material-symbols-outlined\"\n              matTooltip=\"Not supported on this service\"\n            >\n              warning\n            </span>\n          </div>\n        </div>\n      </div>\n      <div class=\"flex flex-col gap-3\">\n        <p class=\"text-sm\" translate>record.metadata.api.form.type</p>\n        <gn-ui-dropdown-selector\n          #dropdown\n          [title]=\"''\"\n          extraBtnClass=\"secondary min-w-full !w-40 !text-black\"\n          [showTitle]=\"false\"\n          class=\"text-black\"\n          [choices]=\"outputFormats\"\n          (selectValue)=\"setFormat($event)\"\n          [selected]=\"format$ | async\"\n        ></gn-ui-dropdown-selector>\n      </div>\n    </div>\n  </div>\n  <div class=\"flex flex-col gap-3 mb-3\">\n    <div class=\"text-sm text-black truncate font-title w-11/12\" translate>\n      record.metadata.api.form.customUrl\n    </div>\n    <div class=\"bg-white rounded-lg\">\n      <gn-ui-copy-text-button\n        [text]=\"apiQueryUrl$ | async\"\n      ></gn-ui-copy-text-button>\n    </div>\n  </div>\n</div>\n", styles: [":host ::ng-deep input{color:#000;opacity:1}:host ::ng-deep gn-ui-copy-text-button input[type=text]{color:#000;background-color:#fff}:host ::ng-deep gn-ui-copy-text-button button,host ::ng-deep gn-ui-copy-text-button button:hover{background-color:var(--color-secondary)!important}:host ::ng-deep gn-ui-copy-text-button button mat-icon{color:#fff!important;opacity:1!important}:host ::ng-deep gn-ui-copy-text-button button:hover mat-icon{color:#d3d3d3!important}\n"] }]
         }], propDecorators: { apiLink: [{
                 type: Input
             }] } });
 
 class RelatedRecordCardComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RelatedRecordCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RelatedRecordCardComponent, selector: "gn-ui-related-record-card", inputs: { record: "record" }, ngImport: i0, template: "<a\n  class=\"w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RelatedRecordCardComponent, selector: "gn-ui-related-record-card", inputs: { record: "record" }, ngImport: i0, template: "<a\n  class=\"w-72 h-96 overflow-hidden rounded-lg bg-white cursor-pointer block hover:-translate-y-2 duration-[180ms]\"\n  [routerLink]=\"['/dataset', record.uniqueIdentifier]\"\n  target=\"_blank\"\n>\n  <div class=\"h-52 bg-gray-100\">\n    <gn-ui-thumbnail\n      class=\"h-52 w-full object-cover\"\n      [thumbnailUrl]=\"record.overviews?.[0]?.url.toString()\"\n    ></gn-ui-thumbnail>\n  </div>\n  <div class=\"flex flex-col justify-between h-44 px-5 pt-4 pb-6\">\n    <h4\n      class=\"max-h-24 font-title text-21 text-black text-ellipsis overflow-hidden\"\n    >\n      {{ record.title }}\n    </h4>\n    <div>\n      <button\n        mat-raised-button\n        [matTooltip]=\"'tooltip.url.open' | translate\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon class=\"material-symbols-outlined align-middle text-secondary\"\n          >open_in_new</mat-icon\n        >\n      </button>\n    </div>\n  </div>\n</a>\n", styles: [""], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RelatedRecordCardComponent, decorators: [{
             type: Component,
@@ -26958,48 +27414,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             }] } });
 
 class CarouselComponent {
+    get isFirstStep() {
+        return this.currentStep === 0;
+    }
+    get isLastStep() {
+        return this.currentStep === this.steps.length - 1;
+    }
+    get stepsCount() {
+        return this.steps.length;
+    }
     constructor(changeDetector) {
         this.changeDetector = changeDetector;
         this.containerClass = '';
-        this.stepsContainerClass = '';
+        this.stepsContainerClass = 'w-full bottom-0 top-auto';
+        this.currentStepChange = new EventEmitter();
         this.steps = [];
-        this.selectedStep = -1;
+        this.currentStep = 0;
+        this.refreshSteps = () => {
+            this.steps = this.emblaApi.scrollSnapList();
+            this.currentStep = this.emblaApi.selectedScrollSnap();
+            this.currentStepChange.emit(this.currentStep);
+            this.changeDetector.detectChanges();
+        };
     }
     ngAfterViewInit() {
         this.emblaApi = EmblaCarousel(this.carouselOverflowContainer.nativeElement, {
             duration: 15,
         });
-        const refreshSteps = () => {
-            this.steps = this.emblaApi.scrollSnapList();
-            this.selectedStep = this.emblaApi.selectedScrollSnap();
-            this.changeDetector.detectChanges();
-        };
         this.emblaApi
-            .on('init', refreshSteps)
-            .on('reInit', refreshSteps)
-            .on('select', refreshSteps);
+            .on('init', this.refreshSteps)
+            .on('reInit', this.refreshSteps)
+            .on('select', this.refreshSteps);
     }
     scrollToStep(stepIndex) {
         this.emblaApi.scrollTo(stepIndex);
     }
+    slideToPrevious() {
+        if (this.isFirstStep)
+            return;
+        this.emblaApi.scrollPrev();
+    }
+    slideToNext() {
+        if (this.isLastStep)
+            return;
+        this.emblaApi.scrollNext();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CarouselComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CarouselComponent, selector: "gn-ui-carousel", inputs: { containerClass: "containerClass", stepsContainerClass: "stepsContainerClass" }, viewQueries: [{ propertyName: "carouselOverflowContainer", first: true, predicate: ["carouselOverflowContainer"], descendants: true }], ngImport: i0, template: "<div #carouselOverflowContainer class=\"overflow-hidden h-full w-full\">\n  <div class=\"carousel-container flex flex-row\" [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<div\n  *ngIf=\"steps.length > 1\"\n  class=\"absolute right-0 top-0 flex flex-row justify-center gap-[10px] p-1\"\n  [ngClass]=\"stepsContainerClass\"\n>\n  <button\n    *ngFor=\"let step of steps; let i = index\"\n    class=\"carousel-step-dot\"\n    (click)=\"scrollToStep(i)\"\n    [ngClass]=\"selectedStep === i ? 'bg-secondary' : 'bg-gray-400'\"\n  ></button>\n</div>\n", styles: [":host .carousel-container ::ng-deep>*{flex-shrink:0}:host{position:relative}.carousel-step-dot{width:6px;height:6px;border-radius:6px;position:relative}.carousel-step-dot:after{content:\"\";position:absolute;left:-4px;top:-4px;width:14px;height:14px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CarouselComponent, isStandalone: true, selector: "gn-ui-carousel", inputs: { containerClass: "containerClass", stepsContainerClass: "stepsContainerClass" }, outputs: { currentStepChange: "currentStepChange" }, viewQueries: [{ propertyName: "carouselOverflowContainer", first: true, predicate: ["carouselOverflowContainer"], descendants: true }], ngImport: i0, template: "<div #carouselOverflowContainer class=\"w-full\">\n  <div class=\"carousel-container flex\" [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<div\n  *ngIf=\"steps.length > 1\"\n  class=\"absolute flex flex-row justify-center gap-[14px] p-1\"\n  [ngClass]=\"stepsContainerClass\"\n>\n  <button\n    *ngFor=\"let step of steps; let i = index\"\n    class=\"carousel-step-dot\"\n    (click)=\"scrollToStep(i)\"\n    [ngClass]=\"currentStep === i ? 'bg-primary' : 'bg-gray-400'\"\n  ></button>\n</div>\n", styles: [":host .carousel-container ::ng-deep>*{flex-shrink:0}:host{position:relative}.carousel-step-dot{width:6px;height:6px;border-radius:6px;position:relative}.carousel-step-dot:after{content:\"\";position:absolute;left:-7px;top:-7px;width:20px;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-carousel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #carouselOverflowContainer class=\"overflow-hidden h-full w-full\">\n  <div class=\"carousel-container flex flex-row\" [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<div\n  *ngIf=\"steps.length > 1\"\n  class=\"absolute right-0 top-0 flex flex-row justify-center gap-[10px] p-1\"\n  [ngClass]=\"stepsContainerClass\"\n>\n  <button\n    *ngFor=\"let step of steps; let i = index\"\n    class=\"carousel-step-dot\"\n    (click)=\"scrollToStep(i)\"\n    [ngClass]=\"selectedStep === i ? 'bg-secondary' : 'bg-gray-400'\"\n  ></button>\n</div>\n", styles: [":host .carousel-container ::ng-deep>*{flex-shrink:0}:host{position:relative}.carousel-step-dot{width:6px;height:6px;border-radius:6px;position:relative}.carousel-step-dot:after{content:\"\";position:absolute;left:-4px;top:-4px;width:14px;height:14px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { containerClass: [{
+            args: [{ selector: 'gn-ui-carousel', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div #carouselOverflowContainer class=\"w-full\">\n  <div class=\"carousel-container flex\" [ngClass]=\"containerClass\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<div\n  *ngIf=\"steps.length > 1\"\n  class=\"absolute flex flex-row justify-center gap-[14px] p-1\"\n  [ngClass]=\"stepsContainerClass\"\n>\n  <button\n    *ngFor=\"let step of steps; let i = index\"\n    class=\"carousel-step-dot\"\n    (click)=\"scrollToStep(i)\"\n    [ngClass]=\"currentStep === i ? 'bg-primary' : 'bg-gray-400'\"\n  ></button>\n</div>\n", styles: [":host .carousel-container ::ng-deep>*{flex-shrink:0}:host{position:relative}.carousel-step-dot{width:6px;height:6px;border-radius:6px;position:relative}.carousel-step-dot:after{content:\"\";position:absolute;left:-7px;top:-7px;width:20px;height:20px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { carouselOverflowContainer: [{
+                type: ViewChild,
+                args: ['carouselOverflowContainer']
+            }], containerClass: [{
                 type: Input
             }], stepsContainerClass: [{
                 type: Input
-            }], carouselOverflowContainer: [{
-                type: ViewChild,
-                args: ['carouselOverflowContainer']
+            }], currentStepChange: [{
+                type: Output
             }] } });
 
 class FormFieldWrapperComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\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\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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\">\n  <div class=\"flex-none w-full flex flex-row items-center\">\n    <span class=\"flex-none font-bold\">{{ label }}</span>\n    <div class=\"flex-1 flex justify-end items-center\">\n      <ng-content select=\"[form-field-interaction]\"></ng-content>\n      <span\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\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldWrapperComponent, decorators: [{
             type: Component,
@@ -27148,17 +27627,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 args: ['innerContainer']
             }] } });
 
+class BlockListComponent {
+    get pages() {
+        return new Array(this.pagesCount).fill(0).map((_, i) => i);
+    }
+    get isFirstPage() {
+        return this.currentPage === 0;
+    }
+    get isLastPage() {
+        return this.currentPage === this.pagesCount - 1;
+    }
+    get pagesCount() {
+        return this.blocks ? Math.ceil(this.blocks.length / this.pageSize) : 1;
+    }
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.pageSize = 5;
+        this.containerClass = '';
+        this.paginationContainerClass = 'w-full bottom-0 top-auto';
+        this.minHeight = 0;
+        this.currentPage = 0;
+        this.refreshBlocksVisibility = () => {
+            this.blocks.forEach((block, index) => {
+                block.nativeElement.style.display =
+                    index >= this.currentPage * this.pageSize &&
+                        index < (this.currentPage + 1) * this.pageSize
+                        ? null
+                        : 'none';
+            });
+        };
+    }
+    ngAfterViewInit() {
+        this.blocks.changes.subscribe(this.refreshBlocksVisibility);
+        this.refreshBlocksVisibility();
+        // we store the first height as the min-height of the list container
+        this.minHeight = this.blockContainer.nativeElement.clientHeight;
+        this.changeDetector.detectChanges();
+    }
+    goToPage(index) {
+        this.currentPage = Math.max(Math.min(index, this.pagesCount - 1), 0);
+        this.changeDetector.detectChanges();
+        this.refreshBlocksVisibility();
+    }
+    previousPage() {
+        if (this.isFirstPage)
+            return;
+        this.goToPage(this.currentPage - 1);
+    }
+    nextPage() {
+        if (this.isLastPage)
+            return;
+        this.goToPage(this.currentPage + 1);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: BlockListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: BlockListComponent, isStandalone: true, selector: "gn-ui-block-list", inputs: { pageSize: "pageSize", containerClass: "containerClass", paginationContainerClass: "paginationContainerClass" }, queries: [{ propertyName: "blocks", predicate: ["block"], read: ElementRef }], viewQueries: [{ propertyName: "blockContainer", first: true, predicate: ["blockContainer"], descendants: true }], ngImport: i0, template: "<div\n  class=\"block-list-container flex flex-col\"\n  #blockContainer\n  [ngClass]=\"containerClass\"\n  [ngStyle]=\"{ minHeight: minHeight + 'px' }\"\n>\n  <ng-content></ng-content>\n</div>\n<div\n  *ngIf=\"pagesCount > 1\"\n  class=\"absolute flex flex-row justify-center gap-[14px] p-1\"\n  [ngClass]=\"paginationContainerClass\"\n>\n  <button\n    *ngFor=\"let page of pages\"\n    class=\"list-page-dot\"\n    (click)=\"goToPage(page)\"\n    [ngClass]=\"currentPage === page ? 'bg-primary' : 'bg-gray-400'\"\n  ></button>\n</div>\n", styles: [":host .block-list-container ::ng-deep>*{flex-shrink:0}:host{position:relative}.list-page-dot{width:6px;height:6px;border-radius:6px;position:relative}.list-page-dot:after{content:\"\";position:absolute;left:-7px;top:-7px;width:20px;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: BlockListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-block-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div\n  class=\"block-list-container flex flex-col\"\n  #blockContainer\n  [ngClass]=\"containerClass\"\n  [ngStyle]=\"{ minHeight: minHeight + 'px' }\"\n>\n  <ng-content></ng-content>\n</div>\n<div\n  *ngIf=\"pagesCount > 1\"\n  class=\"absolute flex flex-row justify-center gap-[14px] p-1\"\n  [ngClass]=\"paginationContainerClass\"\n>\n  <button\n    *ngFor=\"let page of pages\"\n    class=\"list-page-dot\"\n    (click)=\"goToPage(page)\"\n    [ngClass]=\"currentPage === page ? 'bg-primary' : 'bg-gray-400'\"\n  ></button>\n</div>\n", styles: [":host .block-list-container ::ng-deep>*{flex-shrink:0}:host{position:relative}.list-page-dot{width:6px;height:6px;border-radius:6px;position:relative}.list-page-dot:after{content:\"\";position:absolute;left:-7px;top:-7px;width:20px;height:20px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { pageSize: [{
+                type: Input
+            }], containerClass: [{
+                type: Input
+            }], paginationContainerClass: [{
+                type: Input
+            }], blocks: [{
+                type: ContentChildren,
+                args: ['block', { read: ElementRef }]
+            }], blockContainer: [{
+                type: ViewChild,
+                args: ['blockContainer']
+            }] } });
+
 class UiLayoutModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiLayoutModule, declarations: [ExpandablePanelComponent,
             StickyHeaderComponent,
             AnchorLinkDirective,
-            ExpandablePanelButtonComponent,
-            CarouselComponent], imports: [CommonModule, MatIconModule, i1$1.TranslateModule], exports: [ExpandablePanelComponent,
+            ExpandablePanelButtonComponent], imports: [CommonModule, MatIconModule, i1$1.TranslateModule], exports: [ExpandablePanelComponent,
             StickyHeaderComponent,
             AnchorLinkDirective,
-            ExpandablePanelButtonComponent,
-            CarouselComponent] }); }
+            ExpandablePanelButtonComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiLayoutModule, imports: [CommonModule, MatIconModule, TranslateModule.forChild()] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiLayoutModule, decorators: [{
@@ -27170,14 +27719,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         StickyHeaderComponent,
                         AnchorLinkDirective,
                         ExpandablePanelButtonComponent,
-                        CarouselComponent,
                     ],
                     exports: [
                         ExpandablePanelComponent,
                         StickyHeaderComponent,
                         AnchorLinkDirective,
                         ExpandablePanelButtonComponent,
-                        CarouselComponent,
                     ],
                 }]
         }] });
@@ -27187,7 +27734,7 @@ class UserPreviewComponent {
         return (this.user.name + ' ' + this.user.surname).trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UserPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: UserPreviewComponent, selector: "gn-ui-user-preview", inputs: { user: "user", avatarPlaceholder: "avatarPlaceholder" }, ngImport: i0, template: "<figure class=\"text-center\">\n  <div\n    class=\"w-12 h-12 border border-primary rounded-full capitalize\"\n    [matTooltip]=\"userFullName\"\n  >\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$1.MatTooltip, selector: "[matTooltip]", 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: "16.1.7", type: UserPreviewComponent, selector: "gn-ui-user-preview", inputs: { user: "user", avatarPlaceholder: "avatarPlaceholder" }, ngImport: i0, template: "<figure class=\"text-center\">\n  <div\n    class=\"w-12 h-12 border border-primary rounded-full capitalize\"\n    [matTooltip]=\"userFullName\"\n  >\n    <gn-ui-avatar\n      [avatarUrl]=\"user.profileIcon\"\n      [avatarPlaceholder]=\"avatarPlaceholder\"\n    ></gn-ui-avatar>\n  </div>\n</figure>\n", dependencies: [{ kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AvatarComponent, selector: "gn-ui-avatar", inputs: ["avatarUrl", "avatarPlaceholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UserPreviewComponent, decorators: [{
             type: Component,
@@ -27198,6 +27745,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
+class TimeSincePipe {
+    constructor(translate) {
+        this.translate = translate;
+    }
+    transform(value) {
+        if (isNaN(value.getTime())) {
+            throw new Error('Invalid Date');
+        }
+        const maintenant = new Date();
+        let locale;
+        switch (this.translate.currentLang) {
+            case 'fr':
+                locale = fr$1;
+                break;
+            case 'de':
+                locale = de$1;
+                break;
+            case 'es':
+                locale = es$1;
+                break;
+            case 'it':
+                locale = it$1;
+                break;
+            case 'nl':
+                locale = nl$1;
+                break;
+            case 'pt':
+                locale = pt$1;
+                break;
+            case 'sk':
+                locale = sk;
+                break;
+            case 'en':
+            default:
+                locale = enUS;
+                break;
+        }
+        return formatDistance(value, maintenant, {
+            addSuffix: true,
+            locale: locale,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TimeSincePipe, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: TimeSincePipe, isStandalone: true, name: "timeSince" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TimeSincePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'timeSince',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
+
+class UserFeedbackItemComponent {
+    constructor() {
+        this.newUserFeedbackAnswer = new EventEmitter();
+        this.isAnAnswer = false;
+        this.newAnswer = '';
+        this.isAnswerEmpty = true;
+    }
+    ngOnInit() {
+        this.isAnAnswer = !!this.userFeedbackParent.parentUuid;
+    }
+    onNewAnswerValueChange() {
+        this.isAnswerEmpty = this.newAnswer.length === 0;
+    }
+    publishNewAnswer() {
+        if (this.newAnswer.trim() === '')
+            return;
+        const newAnswer = {
+            ...this.userFeedbackParent,
+            uuid: undefined,
+            published: true,
+            comment: this.newAnswer,
+            parentUuid: this.userFeedbackParent.uuid,
+            authorUserId: this.activeUser?.id,
+            authorEmail: this.activeUser?.email,
+            date: new Date(),
+            authorName: `${this.activeUser?.name} ${this.activeUser?.surname}`,
+        };
+        this.newUserFeedbackAnswer.emit(newAnswer);
+        this.newAnswer = '';
+        this.onNewAnswerValueChange();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UserFeedbackItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: UserFeedbackItemComponent, selector: "gn-ui-user-feedback-item", inputs: { userFeedbackParent: "userFeedbackParent", userFeedBacksAnswers: "userFeedBacksAnswers", isActiveUserEditor: "isActiveUserEditor", activeUser: "activeUser", isLastComment: "isLastComment", isAddUserFeedbackLoading: "isAddUserFeedbackLoading" }, outputs: { newUserFeedbackAnswer: "newUserFeedbackAnswer" }, ngImport: i0, template: "<div\n  *ngIf=\"userFeedbackParent.published\"\n  class=\"flex flex-col bg-white rounded w-full\"\n  [ngClass]=\"[isAnAnswer ? 'ps-4 ' : 'p-4']\"\n>\n  <div class=\"flex flex-row\">\n    <div class=\"avatar\">\n      <img\n        class=\"rounded-full\"\n        [src]=\"userFeedbackParent.avatarUrl\"\n        alt=\"avatar\"\n      />\n    </div>\n    <div class=\"p-4 flex flex-col\">\n      <span>{{ userFeedbackParent.authorName }}</span>\n      <span> {{ userFeedbackParent.date | timeSince }}</span>\n    </div>\n  </div>\n  <div data-cy=\"commentText\" class=\"mt-4 whitespace-pre-line\">\n    {{ userFeedbackParent.comment }}\n  </div>\n  <div\n    class=\"w-full\"\n    *ngFor=\"let userFeedBacksAnswer of userFeedBacksAnswers; let last = last\"\n  >\n    <hr class=\"-mx-4 my-6\" />\n    <gn-ui-user-feedback-item\n      [userFeedbackParent]=\"userFeedBacksAnswer\"\n      [isLastComment]=\"last\"\n    ></gn-ui-user-feedback-item>\n  </div>\n\n  <div *ngIf=\"isActiveUserEditor\" class=\"mt-2 flex flex-col\">\n    <hr class=\"-mx-4 my-4\" />\n    <div\n      id=\"new-comment-buttons\"\n      class=\"flex flex-row gap-2 items-center justify-end\"\n    >\n      <gn-ui-text-area\n        [disabled]=\"isAddUserFeedbackLoading\"\n        [(value)]=\"newAnswer\"\n        (valueChange)=\"onNewAnswerValueChange()\"\n        (keyup.control.enter)=\"publishNewAnswer()\"\n        [placeholder]=\"\n          'record.metadata.userFeedbacks.newAnswer.placeholder' | translate\n        \"\n        class=\"grow\"\n        extraClass=\"bg-transparent border-0 placeholder-primary-darker text-primary-darker h-9\"\n      ></gn-ui-text-area>\n      <div *ngIf=\"!isAnswerEmpty\" class=\"flex flex-row justify-end\">\n        <gn-ui-button\n          [disabled]=\"isAddUserFeedbackLoading\"\n          [type]=\"'outline'\"\n          (buttonClick)=\"publishNewAnswer()\"\n          [title]=\"\n            'record.metadata.userFeedbacks.newAnswer.buttonTitle' | translate\n          \"\n          extraClass=\"!p-[0.5em] text-primary-darker border-primary-darker h-9\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined\"\n            *ngIf=\"!isAddUserFeedbackLoading\"\n          >\n            send\n          </mat-icon>\n          <ng-container *ngIf=\"isAddUserFeedbackLoading\">\n            <div class=\"flex justify-center w-full\">\n              <gn-ui-spinning-loader></gn-ui-spinning-loader>\n            </div>\n          </ng-container>\n        </gn-ui-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: UserFeedbackItemComponent, selector: "gn-ui-user-feedback-item", inputs: ["userFeedbackParent", "userFeedBacksAnswers", "isActiveUserEditor", "activeUser", "isLastComment", "isAddUserFeedbackLoading"], outputs: ["newUserFeedbackAnswer"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: TimeSincePipe, name: "timeSince" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UserFeedbackItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-user-feedback-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"userFeedbackParent.published\"\n  class=\"flex flex-col bg-white rounded w-full\"\n  [ngClass]=\"[isAnAnswer ? 'ps-4 ' : 'p-4']\"\n>\n  <div class=\"flex flex-row\">\n    <div class=\"avatar\">\n      <img\n        class=\"rounded-full\"\n        [src]=\"userFeedbackParent.avatarUrl\"\n        alt=\"avatar\"\n      />\n    </div>\n    <div class=\"p-4 flex flex-col\">\n      <span>{{ userFeedbackParent.authorName }}</span>\n      <span> {{ userFeedbackParent.date | timeSince }}</span>\n    </div>\n  </div>\n  <div data-cy=\"commentText\" class=\"mt-4 whitespace-pre-line\">\n    {{ userFeedbackParent.comment }}\n  </div>\n  <div\n    class=\"w-full\"\n    *ngFor=\"let userFeedBacksAnswer of userFeedBacksAnswers; let last = last\"\n  >\n    <hr class=\"-mx-4 my-6\" />\n    <gn-ui-user-feedback-item\n      [userFeedbackParent]=\"userFeedBacksAnswer\"\n      [isLastComment]=\"last\"\n    ></gn-ui-user-feedback-item>\n  </div>\n\n  <div *ngIf=\"isActiveUserEditor\" class=\"mt-2 flex flex-col\">\n    <hr class=\"-mx-4 my-4\" />\n    <div\n      id=\"new-comment-buttons\"\n      class=\"flex flex-row gap-2 items-center justify-end\"\n    >\n      <gn-ui-text-area\n        [disabled]=\"isAddUserFeedbackLoading\"\n        [(value)]=\"newAnswer\"\n        (valueChange)=\"onNewAnswerValueChange()\"\n        (keyup.control.enter)=\"publishNewAnswer()\"\n        [placeholder]=\"\n          'record.metadata.userFeedbacks.newAnswer.placeholder' | translate\n        \"\n        class=\"grow\"\n        extraClass=\"bg-transparent border-0 placeholder-primary-darker text-primary-darker h-9\"\n      ></gn-ui-text-area>\n      <div *ngIf=\"!isAnswerEmpty\" class=\"flex flex-row justify-end\">\n        <gn-ui-button\n          [disabled]=\"isAddUserFeedbackLoading\"\n          [type]=\"'outline'\"\n          (buttonClick)=\"publishNewAnswer()\"\n          [title]=\"\n            'record.metadata.userFeedbacks.newAnswer.buttonTitle' | translate\n          \"\n          extraClass=\"!p-[0.5em] text-primary-darker border-primary-darker h-9\"\n        >\n          <mat-icon\n            class=\"material-symbols-outlined\"\n            *ngIf=\"!isAddUserFeedbackLoading\"\n          >\n            send\n          </mat-icon>\n          <ng-container *ngIf=\"isAddUserFeedbackLoading\">\n            <div class=\"flex justify-center w-full\">\n              <gn-ui-spinning-loader></gn-ui-spinning-loader>\n            </div>\n          </ng-container>\n        </gn-ui-button>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { userFeedbackParent: [{
+                type: Input
+            }], userFeedBacksAnswers: [{
+                type: Input
+            }], isActiveUserEditor: [{
+                type: Input
+            }], activeUser: [{
+                type: Input
+            }], isLastComment: [{
+                type: Input
+            }], isAddUserFeedbackLoading: [{
+                type: Input
+            }], newUserFeedbackAnswer: [{
+                type: Output
+            }] } });
+
 class UiElementsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: UiElementsModule, declarations: [MetadataInfoComponent,
@@ -27205,7 +27858,6 @@ class UiElementsModule {
             DownloadItemComponent,
             DownloadsListComponent,
             ApiCardComponent,
-            LinkCardComponent,
             RelatedRecordCardComponent,
             MetadataContactComponent,
             MetadataCatalogComponent,
@@ -27219,6 +27871,7 @@ class UiElementsModule {
             PaginationButtonsComponent,
             MaxLinesComponent,
             RecordApiFormComponent,
+            UserFeedbackItemComponent,
             ImageOverlayPreviewComponent], imports: [CommonModule,
             MatIconModule,
             MatTooltipModule,
@@ -27229,12 +27882,12 @@ class UiElementsModule {
             FormsModule,
             NgOptimizedImage,
             MarkdownParserComponent,
-            ThumbnailComponent], exports: [MetadataInfoComponent,
+            ThumbnailComponent,
+            TimeSincePipe], exports: [MetadataInfoComponent,
             ContentGhostComponent,
             DownloadItemComponent,
             DownloadsListComponent,
             ApiCardComponent,
-            LinkCardComponent,
             RelatedRecordCardComponent,
             MetadataContactComponent,
             MetadataCatalogComponent,
@@ -27249,6 +27902,7 @@ class UiElementsModule {
             MaxLinesComponent,
             RecordApiFormComponent,
             MarkdownParserComponent,
+            UserFeedbackItemComponent,
             ImageOverlayPreviewComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: UiElementsModule, imports: [CommonModule,
             MatIconModule,
@@ -27279,6 +27933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         NgOptimizedImage,
                         MarkdownParserComponent,
                         ThumbnailComponent,
+                        TimeSincePipe,
                     ],
                     declarations: [
                         MetadataInfoComponent,
@@ -27286,7 +27941,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         DownloadItemComponent,
                         DownloadsListComponent,
                         ApiCardComponent,
-                        LinkCardComponent,
                         RelatedRecordCardComponent,
                         MetadataContactComponent,
                         MetadataCatalogComponent,
@@ -27300,6 +27954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         PaginationButtonsComponent,
                         MaxLinesComponent,
                         RecordApiFormComponent,
+                        UserFeedbackItemComponent,
                         ImageOverlayPreviewComponent,
                     ],
                     exports: [
@@ -27308,7 +27963,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         DownloadItemComponent,
                         DownloadsListComponent,
                         ApiCardComponent,
-                        LinkCardComponent,
                         RelatedRecordCardComponent,
                         MetadataContactComponent,
                         MetadataCatalogComponent,
@@ -27323,6 +27977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         MaxLinesComponent,
                         RecordApiFormComponent,
                         MarkdownParserComponent,
+                        UserFeedbackItemComponent,
                         ImageOverlayPreviewComponent,
                     ],
                 }]
@@ -29652,7 +30307,7 @@ class AddLayerFromWmsComponent {
         this.mapFacade.addLayer({ ...layerToAdd, title: layer.title });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromWmsComponent, deps: [{ token: MapFacade }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromWmsComponent, selector: "gn-ui-add-layer-from-wms", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wmsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.wms.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container\n    *ngFor=\"let layer of layers\"\n    [ngTemplateOutlet]=\"layerTreeItem\"\n    [ngTemplateOutletContext]=\"{\n      layer: layer\n    }\"\n  ></ng-container>\n</div>\n\n<ng-template #layerTreeItem let-layer=\"layer\">\n  <div class=\"flex items-center justify-between layer-tree-item my-2\">\n    <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n      {{ layer.title }}\n    </p>\n    <gn-ui-button\n      *ngIf=\"layer.name\"\n      class=\"layer-add-btn\"\n      type=\"primary\"\n      (buttonClick)=\"addLayer(layer)\"\n      extraClass=\"text-sm !px-2 !py-1\"\n      translate\n      ><span translate> map.layer.add </span></gn-ui-button\n    >\n  </div>\n  <div *ngIf=\"layer.children?.length > 0\" class=\"ml-4\">\n    <ng-container\n      *ngFor=\"let child of layer.children\"\n      [ngTemplateOutlet]=\"layerTreeItem\"\n      [ngTemplateOutletContext]=\"{\n        layer: child\n      }\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromWmsComponent, selector: "gn-ui-add-layer-from-wms", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wmsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.wms.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container\n    *ngFor=\"let layer of layers\"\n    [ngTemplateOutlet]=\"layerTreeItem\"\n    [ngTemplateOutletContext]=\"{\n      layer: layer\n    }\"\n  ></ng-container>\n</div>\n\n<ng-template #layerTreeItem let-layer=\"layer\">\n  <div class=\"flex items-center justify-between layer-tree-item my-2\">\n    <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n      {{ layer.title }}\n    </p>\n    <gn-ui-button\n      *ngIf=\"layer.name\"\n      class=\"layer-add-btn\"\n      type=\"primary\"\n      (buttonClick)=\"addLayer(layer)\"\n      extraClass=\"text-sm !px-2 !py-1\"\n      translate\n      ><span translate> map.layer.add </span></gn-ui-button\n    >\n  </div>\n  <div *ngIf=\"layer.children?.length > 0\" class=\"ml-4\">\n    <ng-container\n      *ngFor=\"let child of layer.children\"\n      [ngTemplateOutlet]=\"layerTreeItem\"\n      [ngTemplateOutletContext]=\"{\n        layer: child\n      }\"\n    >\n    </ng-container>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "hint", "required", "disabled"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromWmsComponent, decorators: [{
             type: Component,
@@ -29803,7 +30458,7 @@ class AddLayerFromWfsComponent {
         this.mapFacade.addLayer({ ...layerToAdd, title: layer.title });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromWfsComponent, deps: [{ token: MapFacade }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromWfsComponent, selector: "gn-ui-add-layer-from-wfs", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wfsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.wfs.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container *ngFor=\"let layer of layers\">\n    <div class=\"flex items-center justify-between my-2 layer-item-tree\">\n      <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n        {{ layer.title }}\n      </p>\n      <gn-ui-button\n        *ngIf=\"layer.name\"\n        class=\"layer-add-btn\"\n        type=\"primary\"\n        (buttonClick)=\"addLayer(layer)\"\n        extraClass=\"text-sm !px-2 !py-1\"\n        translate\n        ><span translate> map.layer.add </span></gn-ui-button\n      >\n    </div>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: AddLayerFromWfsComponent, selector: "gn-ui-add-layer-from-wfs", ngImport: i0, template: "<div class=\"flex items-center mb-5\">\n  <gn-ui-text-input\n    [(value)]=\"wfsUrl\"\n    (valueChange)=\"urlChange.next($event)\"\n    [hint]=\"'map.wfs.urlInput.hint' | translate\"\n    class=\"w-96\"\n  >\n  </gn-ui-text-input>\n</div>\n\n<div *ngIf=\"errorMessage\" class=\"text-red-500 mt-2\">\n  {{ errorMessage }}\n</div>\n\n<div *ngIf=\"loading\">\n  <p class=\"loading-message\" translate>map.loading.service</p>\n</div>\n\n<div *ngIf=\"!loading && layers.length > 0\">\n  <h2 class=\"font-bold\" translate>map.layers.available</h2>\n  <ng-container *ngFor=\"let layer of layers\">\n    <div class=\"flex items-center justify-between my-2 layer-item-tree\">\n      <p class=\"max-w-xs overflow-hidden overflow-ellipsis whitespace-nowrap\">\n        {{ layer.title }}\n      </p>\n      <gn-ui-button\n        *ngIf=\"layer.name\"\n        class=\"layer-add-btn\"\n        type=\"primary\"\n        (buttonClick)=\"addLayer(layer)\"\n        extraClass=\"text-sm !px-2 !py-1\"\n        translate\n        ><span translate> map.layer.add </span></gn-ui-button\n      >\n    </div>\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "hint", "required", "disabled"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AddLayerFromWfsComponent, decorators: [{
             type: Component,
@@ -29823,7 +30478,7 @@ class LayersPanelComponent {
         this.mapFacade.addLayer(layer);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LayersPanelComponent, deps: [{ token: MapFacade }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: LayersPanelComponent, selector: "gn-ui-layers-panel", ngImport: i0, template: "<div\n  class=\"bg-white rounded shadow shadow-lg relative h-full w-[400px] overflow-hidden\"\n>\n  <div class=\"p-3 border-b border-gray-300 flex items-center\">\n    <mat-icon class=\"material-symbols-outlined mr-2\">layers</mat-icon>\n    <span translate>map.layers.list</span>\n  </div>\n  <div class=\"flex flex-col px-4 divide-y divide-y-gray-50\">\n    <div\n      *ngFor=\"let layer of layers$ | async; let index = index\"\n      class=\"flex flex-row py-3\"\n    >\n      <mat-icon class=\"material-symbols-outlined -ml-2 mr-2 shrink-0\"\n        >chevron_right</mat-icon\n      >\n      <span class=\"mr-2 grow\">{{ layer.title }}</span>\n      <a\n        href\n        class=\"underline text-sm text-red-700 hover:text-red-900\"\n        (click)=\"deleteLayer(index)\"\n      >\n        delete\n      </a>\n    </div>\n  </div>\n  <gn-ui-expandable-panel-button [titleTemplate]=\"addLayerTitle\">\n    <mat-tab-group animationDuration=\"200ms\" class=\"h-full\">\n      <mat-tab [label]=\"'map.add.layer.catalog' | translate\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-catalog></gn-ui-add-layer-from-catalog>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wms' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-wms></gn-ui-add-layer-from-wms>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wfs' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-wfs></gn-ui-add-layer-from-wfs>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.ogc.api' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-ogc-api\n            [ogcUrl]=\"ogcUrl\"\n            (layerAdded)=\"addLayer($event)\"\n          ></gn-ui-add-layer-from-ogc-api>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.file' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-file></gn-ui-add-layer-from-file>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </gn-ui-expandable-panel-button>\n</div>\n\n<ng-template #addLayerTitle>\n  <mat-icon class=\"material-symbols-outlined mr-4\">add_circle</mat-icon>\n  <span translate>map.add.layer</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ExpandablePanelButtonComponent, selector: "gn-ui-expandable-panel-button", inputs: ["titleTemplate", "collapsed"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: AddLayerFromOgcApiComponent, selector: "gn-ui-add-layer-from-ogc-api", inputs: ["ogcUrl"], outputs: ["layerAdded"] }, { kind: "component", type: AddLayerFromCatalogComponent, selector: "gn-ui-add-layer-from-catalog" }, { kind: "component", type: AddLayerFromWmsComponent, selector: "gn-ui-add-layer-from-wms" }, { kind: "component", type: AddLayerFromFileComponent, selector: "gn-ui-add-layer-from-file" }, { kind: "component", type: AddLayerFromWfsComponent, selector: "gn-ui-add-layer-from-wfs" }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: LayersPanelComponent, selector: "gn-ui-layers-panel", ngImport: i0, template: "<div\n  class=\"bg-white rounded shadow shadow-lg relative h-full w-[400px] overflow-hidden\"\n>\n  <div class=\"p-3 border-b border-gray-300 flex items-center\">\n    <mat-icon class=\"material-symbols-outlined mr-2\">layers</mat-icon>\n    <span translate>map.layers.list</span>\n  </div>\n  <div class=\"flex flex-col px-4 divide-y divide-y-gray-50\">\n    <div\n      *ngFor=\"let layer of layers$ | async; let index = index\"\n      class=\"flex flex-row py-3\"\n    >\n      <mat-icon class=\"material-symbols-outlined -ml-2 mr-2 shrink-0\"\n        >chevron_right</mat-icon\n      >\n      <span class=\"mr-2 grow\">{{ layer.title }}</span>\n      <a\n        href\n        class=\"underline text-sm text-red-700 hover:text-red-900\"\n        (click)=\"deleteLayer(index)\"\n      >\n        delete\n      </a>\n    </div>\n  </div>\n  <gn-ui-expandable-panel-button [titleTemplate]=\"addLayerTitle\">\n    <mat-tab-group animationDuration=\"200ms\" class=\"h-full\">\n      <mat-tab [label]=\"'map.add.layer.catalog' | translate\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-catalog></gn-ui-add-layer-from-catalog>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wms' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-wms></gn-ui-add-layer-from-wms>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.wfs' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-wfs></gn-ui-add-layer-from-wfs>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.ogc.api' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-ogc-api\n            [ogcUrl]=\"ogcUrl\"\n            (layerAdded)=\"addLayer($event)\"\n          ></gn-ui-add-layer-from-ogc-api>\n        </div>\n      </mat-tab>\n      <mat-tab [label]=\"'map.add.layer.file' | translate\" bodyClass=\"h-full\">\n        <div class=\"p-3\">\n          <gn-ui-add-layer-from-file></gn-ui-add-layer-from-file>\n        </div>\n      </mat-tab>\n    </mat-tab-group>\n  </gn-ui-expandable-panel-button>\n</div>\n\n<ng-template #addLayerTitle>\n  <mat-icon class=\"material-symbols-outlined mr-4\">add_circle</mat-icon>\n  <span translate>map.add.layer</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ExpandablePanelButtonComponent, selector: "gn-ui-expandable-panel-button", inputs: ["titleTemplate", "collapsed"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2$4.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: AddLayerFromOgcApiComponent, selector: "gn-ui-add-layer-from-ogc-api", inputs: ["ogcUrl"], outputs: ["layerAdded"] }, { kind: "component", type: AddLayerFromCatalogComponent, selector: "gn-ui-add-layer-from-catalog" }, { kind: "component", type: AddLayerFromWmsComponent, selector: "gn-ui-add-layer-from-wms" }, { kind: "component", type: AddLayerFromFileComponent, selector: "gn-ui-add-layer-from-file" }, { kind: "component", type: AddLayerFromWfsComponent, selector: "gn-ui-add-layer-from-wfs" }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: LayersPanelComponent, decorators: [{
             type: Component,
@@ -30198,31 +30853,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                     ], template: "<div class=\"flex flex-col gap-6 p-6 items-start pointer-events-none\">\n  <gn-ui-notification\n    *ngFor=\"\n      let notification of notificationsService.notifications$ | async;\n      trackBy: trackById\n    \"\n    class=\"max-w-full pointer-events-auto\"\n    [text]=\"notification.text\"\n    [type]=\"notification.type\"\n    [title]=\"notification.title\"\n    [closeMessage]=\"notification.closeMessage\"\n    (notificationClose)=\"\n      notificationsService.removeNotificationById(notification.id)\n    \"\n    [@enterExit]\n  ></gn-ui-notification>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: NotificationsService }]; } });
 
+/*
+  Metadata actions
+ */
 const loadFullMetadata = createAction('[Metadata view] Load full metadata', props());
 const setIncompleteMetadata = createAction('[Metadata view] Set incomplete metadata', props());
-const loadFullSuccess = createAction('[Metadata view] Load full success', props());
-const loadFullFailure = createAction('[Metadata view] Load full failure', props());
+const loadFullMetadataSuccess = createAction('[Metadata view] Load full metadata success', props());
+const loadFullMetadataFailure = createAction('[Metadata view] Load full metadata failure', props());
+const closeMetadata = createAction('[Metadata view] close');
+/*
+  Related actions
+ */
 const setRelated = createAction('[Metadata view] Set related records', props());
+/*
+  ChartConfig actions
+ */
 const setChartConfig = createAction('[Metadata view] Set chart config', props());
-const close = createAction('[Metadata view] close');
+/*
+  User Feedbacks actions
+ */
+const addUserFeedback = createAction('[Metadata view] Add UserFeedback', props());
+const addUserFeedbackSuccess = createAction('[Metadata view] Add UserFeedback Success', props());
+const addUserFeedbackFailure = createAction('[Metadata view] Add UserFeedback Failure', props());
+const loadUserFeedbacks = createAction('[Metadata view] Load UserFeedbacks', props());
+const loadUserFeedbacksSuccess = createAction('[Metadata view] Load UserFeedbacks Success', props());
+const loadUserFeedbacksFailure = createAction('[Metadata view] Load UserFeedbacks Failure', props());
 
 var mdview_actions = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    close: close,
-    loadFullFailure: loadFullFailure,
+    addUserFeedback: addUserFeedback,
+    addUserFeedbackFailure: addUserFeedbackFailure,
+    addUserFeedbackSuccess: addUserFeedbackSuccess,
+    closeMetadata: closeMetadata,
     loadFullMetadata: loadFullMetadata,
-    loadFullSuccess: loadFullSuccess,
+    loadFullMetadataFailure: loadFullMetadataFailure,
+    loadFullMetadataSuccess: loadFullMetadataSuccess,
+    loadUserFeedbacks: loadUserFeedbacks,
+    loadUserFeedbacksFailure: loadUserFeedbacksFailure,
+    loadUserFeedbacksSuccess: loadUserFeedbacksSuccess,
     setChartConfig: setChartConfig,
     setIncompleteMetadata: setIncompleteMetadata,
     setRelated: setRelated
 });
 
-const MD_VIEW_FEATURE_STATE_KEY = 'mdView';
-const initialMdviewState = {
+const METADATA_VIEW_FEATURE_STATE_KEY = 'metadataView';
+const initialMetadataViewState = {
     error: null,
     loadingFull: false,
+    allUserFeedbacksLoading: false,
+    addUserFeedbackLoading: false,
 };
-const mdViewReducer = createReducer(initialMdviewState, on(loadFullMetadata, (state) => ({
+const metadataViewReducer = createReducer(initialMetadataViewState, 
+/*
+  Metadata reducers
+*/
+on(loadFullMetadata, (state) => ({
     ...state,
     error: null,
     loadingFull: true,
@@ -30230,38 +30915,82 @@ const mdViewReducer = createReducer(initialMdviewState, on(loadFullMetadata, (st
     ...state,
     error: null,
     metadata: incomplete,
-})), on(loadFullSuccess, (state, { full }) => ({
+})), on(loadFullMetadataSuccess, (state, { full }) => ({
     ...state,
     error: null,
     metadata: full,
     loadingFull: false,
-})), on(loadFullFailure, (state, { otherError, notFound }) => ({
+})), on(loadFullMetadataFailure, (state, { otherError, notFound }) => ({
     ...state,
     error: { otherError, notFound },
     loadingFull: false,
-})), on(setRelated, (state, { related }) => ({
+})), on(closeMetadata, (state) => {
+    const { metadata, related, userFeedbacks, ...stateWithoutMetadata } = state;
+    return stateWithoutMetadata;
+}), 
+/*
+  Related reducers
+*/
+on(setRelated, (state, { related }) => ({
     ...state,
     related,
-})), on(setChartConfig, (state, { chartConfig }) => ({
+})), 
+/*
+  ChartConfig reducers
+*/
+on(setChartConfig, (state, { chartConfig }) => ({
     ...state,
     chartConfig,
-})), on(close, (state) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { metadata, related, ...stateWithoutMd } = state;
-    return stateWithoutMd;
-}));
-function reducer$1(state, action) {
-    return mdViewReducer(state, action);
+})), 
+/*
+  UserFeedbacks reducers
+*/
+on(loadUserFeedbacks, (state) => ({
+    ...state,
+    error: null,
+    allUserFeedbacksLoading: true,
+})), on(addUserFeedback, (state) => ({
+    ...state,
+    addUserFeedbackLoading: true,
+})), on(loadUserFeedbacksSuccess, (state, { userFeedbacks }) => ({
+    ...state,
+    error: null,
+    userFeedbacks: userFeedbacks,
+    addUserFeedbackLoading: false,
+    allUserFeedbacksLoading: false,
+})), on(loadUserFeedbacksFailure, (state, { otherError, notFound }) => ({
+    ...state,
+    error: { otherError, notFound },
+    addUserFeedbackLoading: false,
+    allUserFeedbacksLoading: false,
+})));
+function reducer$1(metadataViewState, action) {
+    return metadataViewReducer(metadataViewState, action);
 }
 
-const getMdViewState = createFeatureSelector(MD_VIEW_FEATURE_STATE_KEY);
+const getMdViewState = createFeatureSelector(METADATA_VIEW_FEATURE_STATE_KEY);
+/*
+  Metadata selectors
+*/
 const getMetadataUuid = createSelector(getMdViewState, (state) => state.metadata ? state.metadata.uniqueIdentifier : null);
 const getMetadata = createSelector(getMdViewState, (state) => state.metadata);
 const getMetadataIsIncomplete = createSelector(getMdViewState, (state) => (state.metadata ? state.loadingFull : null));
 const getMetadataIsLoading = createSelector(getMdViewState, (state) => state.loadingFull);
 const getMetadataError = createSelector(getMdViewState, (state) => state.error);
+/*
+  Related selectors
+*/
 const getRelated = createSelector(getMdViewState, (state) => state.related);
+/*
+  Metadata selectors
+*/
 const getChartConfig = createSelector(getMdViewState, (state) => state.chartConfig);
+/*
+  UserFeedback selectors
+*/
+const getUserFeedbacks = createSelector(getMdViewState, (state) => state.userFeedbacks);
+const getAllUserFeedbacksLoading = createSelector(getMdViewState, (state) => state.allUserFeedbacksLoading);
+const getAddUserFeedbacksLoading = createSelector(getMdViewState, (state) => state.addUserFeedbackLoading);
 
 /**
  * The Metadata View Facade is used to render complete metadata records.
@@ -30270,11 +30999,12 @@ const getChartConfig = createSelector(getMdViewState, (state) => state.chartConf
  * To clear the current record use the `close()` method.
  */
 class MdViewFacade {
-    constructor(store, linkClassifier) {
+    constructor(store, linkClassifier, avatarService) {
         this.store = store;
         this.linkClassifier = linkClassifier;
+        this.avatarService = avatarService;
         this.isPresent$ = this.store.pipe(select(getMetadataUuid), map$1((uuid) => !!uuid));
-        this.isLoading$ = this.store.pipe(select(getMetadataIsLoading));
+        this.isMetadataLoading$ = this.store.pipe(select(getMetadataIsLoading));
         this.metadata$ = this.store.pipe(select(getMetadata), filter((md) => !!md));
         this.isIncomplete$ = this.store.pipe(select(getMetadataIsIncomplete), filter((incomplete) => incomplete !== null));
         this.error$ = this.store.pipe(select(getMetadataError));
@@ -30288,6 +31018,9 @@ class MdViewFacade {
         this.geoDataLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.GEODATA))));
         this.landingPageLinks$ = this.metadata$.pipe(map$1((record) => ('landingPage' in record ? [record.landingPage] : [])));
         this.otherLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.UNKNOWN))));
+        this.userFeedbacks$ = this.store.pipe(select(getUserFeedbacks));
+        this.isAllUserFeedbackLoading$ = this.store.pipe(select(getAllUserFeedbacksLoading));
+        this.isAddUserFeedbackLoading$ = this.store.pipe(select(getAddUserFeedbacksLoading));
     }
     /**
      * This will show an incomplete record (e.g. from a search result) as a preview
@@ -30302,39 +31035,73 @@ class MdViewFacade {
     loadFull(uuid) {
         this.store.dispatch(loadFullMetadata({ uuid }));
     }
-    close() {
-        this.store.dispatch(close());
+    closeMetadata() {
+        this.store.dispatch(closeMetadata());
     }
     setChartConfig(chartConfig) {
         this.store.dispatch(setChartConfig({ chartConfig }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewFacade, deps: [{ token: i1$2.Store }, { token: LinkClassifierService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /**
+     * UserFeedbacks
+     */
+    addUserFeedback(userFeedback) {
+        this.store.dispatch(addUserFeedback({ userFeedback }));
+    }
+    loadUserFeedbacks(datasetUuid) {
+        this.store.dispatch(loadUserFeedbacks({ datasetUuid }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewFacade, deps: [{ token: i1$2.Store }, { token: LinkClassifierService }, { token: AvatarServiceInterface }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewFacade }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewFacade, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Store }, { type: LinkClassifierService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$2.Store }, { type: LinkClassifierService }, { type: AvatarServiceInterface }]; } });
 
 class MdViewEffects {
-    constructor(actions$, recordsRepository) {
+    constructor(actions$, recordsRepository, platformServiceInterface) {
         this.actions$ = actions$;
         this.recordsRepository = recordsRepository;
-        this.loadFull$ = createEffect(() => this.actions$.pipe(ofType(loadFullMetadata), switchMap$1(({ uuid }) => this.recordsRepository.getByUniqueIdentifier(uuid)), map$1((record) => {
+        this.platformServiceInterface = platformServiceInterface;
+        /*
+          Metadata effects
+        */
+        this.loadFullMetadata$ = createEffect(() => this.actions$.pipe(ofType(loadFullMetadata), switchMap$1(({ uuid }) => this.recordsRepository.getByUniqueIdentifier(uuid)), map$1((record) => {
             if (record === null) {
-                return loadFullFailure({ notFound: true });
+                return loadFullMetadataFailure({ notFound: true });
             }
-            return loadFullSuccess({ full: record });
-        }), catchError((error) => of(loadFullFailure({ otherError: error.message })))));
-        this.loadRelatedRecords$ = createEffect(() => this.actions$.pipe(ofType(loadFullSuccess), switchMap$1(({ full }) => this.recordsRepository.getSimilarRecords(full)), map$1((related) => {
+            return loadFullMetadataSuccess({ full: record });
+        }), catchError((error) => of(loadFullMetadataFailure({ otherError: error.message })))));
+        /*
+          Related effects
+        */
+        this.loadRelatedRecords$ = createEffect(() => this.actions$.pipe(ofType(loadFullMetadataSuccess), switchMap$1(({ full }) => this.recordsRepository.getSimilarRecords(full)), map$1((related) => {
             return setRelated({ related });
         }), catchError((error) => of(setRelated({ related: null })))));
+        /*
+          UserFeedback effects
+        */
+        this.loadUserFeedbacks$ = createEffect(() => this.actions$.pipe(ofType(loadUserFeedbacks), exhaustMap(({ datasetUuid }) => this.platformServiceInterface.getUserFeedbacks(datasetUuid).pipe(map$1((userFeedbacks) => loadUserFeedbacksSuccess({ userFeedbacks })), catchError((error) => of(loadUserFeedbacksFailure({
+            otherError: error.message,
+        })))))));
+        this.reloadUserFeedbacks$ = createEffect(() => this.actions$.pipe(ofType(addUserFeedbackSuccess), exhaustMap(({ datasetUuid }) => this.platformServiceInterface.getUserFeedbacks(datasetUuid).pipe(map$1((userFeedbacks) => loadUserFeedbacksSuccess({ userFeedbacks })), catchError((error) => of(loadUserFeedbacksFailure({
+            otherError: error.message,
+        })))))));
+        this.addUserFeedback$ = createEffect(() => this.actions$.pipe(ofType(addUserFeedback), mergeMap$1((action) => this.platformServiceInterface
+            .postUserFeedbacks(action.userFeedback)
+            .pipe(map$1(() => addUserFeedbackSuccess({
+            datasetUuid: action.userFeedback.metadataUUID,
+        })), catchError((error) => {
+            return of(addUserFeedbackFailure({
+                otherError: error.message,
+            }));
+        })))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewEffects, deps: [{ token: i1$8.Actions }, { token: RecordsRepositoryInterface }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewEffects, deps: [{ token: i1$8.Actions }, { token: RecordsRepositoryInterface }, { token: PlatformServiceInterface }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: MdViewEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$8.Actions }, { type: RecordsRepositoryInterface }]; } });
+        }], ctorParameters: function () { return [{ type: i1$8.Actions }, { type: RecordsRepositoryInterface }, { type: PlatformServiceInterface }]; } });
 
 class FigureComponent {
     constructor() {
@@ -30569,7 +31336,7 @@ class TableComponent {
         return rowIdPrefix + id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: TableComponent, isStandalone: true, selector: "gn-ui-table", inputs: { data: "data", activeId: "activeId" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"border border-gray-300 rounded-lg overflow-hidden bg-white h-full\">\n  <cdk-virtual-scroll-viewport\n    tvsItemSize=\"48\"\n    headerHeight=\"56\"\n    style=\"height: calc(100% - 37px)\"\n  >\n    <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z8\" matSort>\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]=\"row.id === activeId\"\n      ></tr>\n    </table>\n  </cdk-virtual-scroll-viewport>\n  <div class=\"text-gray-900 border-t border-gray-300 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</div>\n", styles: ["table{width:100%;background:white}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:whitesmoke}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)}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i1$9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: TableVirtualScrollModule }, { kind: "directive", type: i3$3.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: i4$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "16.1.7", type: TableComponent, isStandalone: true, selector: "gn-ui-table", inputs: { data: "data", activeId: "activeId" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"border border-gray-300 rounded-lg overflow-hidden bg-white h-full\">\n  <cdk-virtual-scroll-viewport\n    tvsItemSize=\"48\"\n    headerHeight=\"56\"\n    style=\"height: calc(100% - 37px)\"\n  >\n    <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z8\" matSort>\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]=\"row.id === activeId\"\n      ></tr>\n    </table>\n  </cdk-virtual-scroll-viewport>\n  <div class=\"text-gray-900 border-t border-gray-300 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</div>\n", styles: ["table{width:100%;background:white}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:whitesmoke}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)}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i1$9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$5.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: TableVirtualScrollModule }, { kind: "directive", type: i3$1.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: i4$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "16.1.7", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -31439,6 +32206,7 @@ marker('wfs.unreachable.http');
 marker('wfs.unreachable.unknown');
 marker('wfs.featuretype.notfound');
 marker('wfs.geojsongml.notsupported');
+marker('ogc.unreachable.unknown');
 marker('dataset.error.network');
 marker('dataset.error.http');
 marker('dataset.error.parse');
@@ -31518,6 +32286,27 @@ class DataService {
             mimeType: getMimeTypeForFormat(getFileFormatFromServiceOutput(format)),
         }))));
     }
+    async getDownloadLinksFromOgcApiFeatures(ogcApiLink) {
+        const collectionInfo = await this.getDownloadUrlsFromOgcApi(ogcApiLink.url.href);
+        return Object.keys(collectionInfo.bulkDownloadLinks).map((downloadLink) => {
+            return {
+                ...ogcApiLink,
+                type: 'download',
+                url: new URL(collectionInfo.bulkDownloadLinks[downloadLink]),
+                mimeType: getMimeTypeForFormat(getFileFormatFromServiceOutput(downloadLink)),
+            };
+        });
+    }
+    async getDownloadUrlsFromOgcApi(url) {
+        const endpoint = new OgcApiEndpoint(this.proxy.getProxiedUrl(url));
+        return await endpoint.featureCollections
+            .then((collections) => {
+            return endpoint.getCollectionInfo(collections[0]);
+        })
+            .catch((error) => {
+            throw new Error(`ogc.unreachable.unknown`);
+        });
+    }
     getDownloadLinksFromEsriRest(esriRestLink) {
         return ['json', 'geojson'].map((format) => ({
             ...esriRestLink,
@@ -31561,6 +32350,17 @@ class DataService {
             const url = this.getDownloadUrlFromEsriRest(link.url.toString(), 'geojson');
             return from(openDataset(url, 'geojson')).pipe();
         }
+        else if (link.type === 'service' &&
+            link.accessServiceProtocol === 'ogcFeatures') {
+            return from(this.getDownloadUrlsFromOgcApi(link.url.href)).pipe(switchMap$1((collectionInfo) => {
+                const geojsonUrl = collectionInfo.jsonDownloadLink;
+                return openDataset(geojsonUrl, 'geojson');
+            }), tap$1((url) => {
+                if (url === null) {
+                    throw new Error('wfs.geojsongml.notsupported');
+                }
+            }));
+        }
         return throwError(() => 'protocol not supported');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DataService, deps: [{ token: ProxyService }], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -32019,7 +32819,8 @@ class MapViewComponent {
         }
         else if ((link.type === 'service' &&
             (link.accessServiceProtocol === 'wfs' ||
-                link.accessServiceProtocol === 'esriRest')) ||
+                link.accessServiceProtocol === 'esriRest' ||
+                link.accessServiceProtocol === 'ogcFeatures')) ||
             link.type === 'download') {
             return this.dataService.readAsGeoJson(link).pipe(map$1((data) => ({
                 type: MapContextLayerTypeEnum.GEOJSON,
@@ -32617,7 +33418,7 @@ class DataViewShareComponent {
         this.wcEmbedderBaseUrl = wcEmbedderBaseUrl;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DataViewShareComponent, deps: [{ token: WEB_COMPONENT_EMBEDDER_URL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DataViewShareComponent, selector: "gn-ui-data-view-share", ngImport: i0, template: "<div class=\"container-lg px-5 my-1 lg:mx-auto\">\n  <mat-tab-group\n    [selectedIndex]=\"0\"\n    animationDuration=\"0ms\"\n    mat-stretch-tabs=\"false\"\n    mat-align-tabs=\"start\"\n    [disableRipple]=\"!wcEmbedderBaseUrl\"\n  >\n    <mat-tab *ngIf=\"wcEmbedderBaseUrl\">\n      <ng-template mat-tab-label>\n        <span class=\"tab-header-label-gray\" translate>share.tab.permalink</span>\n      </ng-template>\n      <gn-ui-data-view-permalink></gn-ui-data-view-permalink>\n    </mat-tab>\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <span\n          [class]=\"\n            wcEmbedderBaseUrl\n              ? 'tab-header-label-gray'\n              : 'single-tab-header-label-gray'\n          \"\n          translate\n          >share.tab.webComponent</span\n        >\n      </ng-template>\n      <gn-ui-data-view-web-component></gn-ui-data-view-web-component>\n    </mat-tab>\n  </mat-tab-group>\n</div>\n", styles: ["::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .tab-header-label-gray{opacity:100%;font-weight:700}.tab-header-label-gray{@apply text-sm text-gray-700 opacity-75 hover:text-gray-900;}.single-tab-header-label-gray{@apply text-sm text-gray-900;}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$3.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DataViewPermalinkComponent, selector: "gn-ui-data-view-permalink" }, { kind: "component", type: DataViewWebComponentComponent, selector: "gn-ui-data-view-web-component" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: DataViewShareComponent, selector: "gn-ui-data-view-share", ngImport: i0, template: "<div class=\"container-lg px-5 my-1 lg:mx-auto\">\n  <mat-tab-group\n    [selectedIndex]=\"0\"\n    animationDuration=\"0ms\"\n    mat-stretch-tabs=\"false\"\n    mat-align-tabs=\"start\"\n    [disableRipple]=\"!wcEmbedderBaseUrl\"\n  >\n    <mat-tab *ngIf=\"wcEmbedderBaseUrl\">\n      <ng-template mat-tab-label>\n        <span class=\"tab-header-label-gray\" translate>share.tab.permalink</span>\n      </ng-template>\n      <gn-ui-data-view-permalink></gn-ui-data-view-permalink>\n    </mat-tab>\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <span\n          [class]=\"\n            wcEmbedderBaseUrl\n              ? 'tab-header-label-gray'\n              : 'single-tab-header-label-gray'\n          \"\n          translate\n          >share.tab.webComponent</span\n        >\n      </ng-template>\n      <gn-ui-data-view-web-component></gn-ui-data-view-web-component>\n    </mat-tab>\n  </mat-tab-group>\n</div>\n", styles: ["::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .tab-header-label-gray{opacity:100%;font-weight:700}.tab-header-label-gray{@apply text-sm text-gray-700 opacity-75 hover:text-gray-900;}.single-tab-header-label-gray{@apply text-sm text-gray-900;}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$4.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DataViewPermalinkComponent, selector: "gn-ui-data-view-permalink" }, { kind: "component", type: DataViewWebComponentComponent, selector: "gn-ui-data-view-web-component" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DataViewShareComponent, decorators: [{
             type: Component,
@@ -32653,7 +33454,7 @@ class FeatureRecordModule {
             DataViewWebComponentComponent,
             DataViewShareComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FeatureRecordModule, providers: [MdViewFacade], imports: [CommonModule,
-            StoreModule.forFeature(MD_VIEW_FEATURE_STATE_KEY, reducer$1),
+            StoreModule.forFeature(METADATA_VIEW_FEATURE_STATE_KEY, reducer$1),
             EffectsModule.forFeature([MdViewEffects]),
             UiLayoutModule,
             FeatureMapModule,
@@ -32681,7 +33482,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                     ],
                     imports: [
                         CommonModule,
-                        StoreModule.forFeature(MD_VIEW_FEATURE_STATE_KEY, reducer$1),
+                        StoreModule.forFeature(METADATA_VIEW_FEATURE_STATE_KEY, reducer$1),
                         EffectsModule.forFeature([MdViewEffects]),
                         UiLayoutModule,
                         FeatureMapModule,
@@ -32746,6 +33547,20 @@ const DEFAULT_FIELDS = [
         },
         onSaveProcess: '${dateNow()}',
     },
+    {
+        model: 'licenses',
+        formFieldConfig: {
+            labelKey: marker('editor.record.form.license'),
+            type: 'list',
+        },
+    },
+    {
+        model: 'resourceUpdated',
+        formFieldConfig: {
+            labelKey: marker('editor.record.form.resourceUpdated'),
+            type: 'date',
+        },
+    },
 ];
 
 const EDITOR_FEATURE_KEY = 'editor';
@@ -33130,7 +33945,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: "chips", first: true, predicate: ["chips"], 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        hint=\"\"\n      ></gn-ui-text-input>\n    </div>\n    <div\n      class=\"flex-1 w-11/12\"\n      *ngIf=\"wizardFieldType.CHIPS === wizardFieldConfig.type\"\n    >\n      <gn-ui-chips-input\n        #chips\n        [selectedItems]=\"wizardFieldData\"\n        placeholder=\"\"\n        [id]=\"wizardFieldConfig.id\"\n        [url]=\"wizardFieldConfig.options.url\"\n        [loadOnce]=\"wizardFieldConfig.options.loadOnce\"\n      ></gn-ui-chips-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:white;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$3.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"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "hint", "required"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: ChipsInputComponent, selector: "gn-ui-chips-input", inputs: ["url", "placeholder", "selectedItems", "required", "loadOnce", "autocompleteItems"], outputs: ["itemsChange"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "searchText", first: true, predicate: ["searchText"], descendants: true }, { propertyName: "chips", first: true, predicate: ["chips"], 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        hint=\"\"\n      ></gn-ui-text-input>\n    </div>\n    <div\n      class=\"flex-1 w-11/12\"\n      *ngIf=\"wizardFieldType.CHIPS === wizardFieldConfig.type\"\n    >\n      <gn-ui-chips-input\n        #chips\n        [selectedItems]=\"wizardFieldData\"\n        placeholder=\"\"\n        [id]=\"wizardFieldConfig.id\"\n        [url]=\"wizardFieldConfig.options.url\"\n        [loadOnce]=\"wizardFieldConfig.options.loadOnce\"\n      ></gn-ui-chips-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:white;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$3.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"], outputs: ["selectValue"] }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "hint", "required", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextAreaComponent, selector: "gn-ui-text-area", inputs: ["value", "disabled", "extraClass", "placeholder", "required"], outputs: ["valueChange"] }, { kind: "component", type: ChipsInputComponent, selector: "gn-ui-chips-input", inputs: ["url", "placeholder", "selectedItems", "required", "loadOnce", "autocompleteItems"], outputs: ["itemsChange"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardFieldComponent, decorators: [{
             type: Component,
@@ -33459,6 +34274,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             args: [{ selector: 'gn-ui-form-field-temporal-extent', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<p>form-field-temporal-extent works!</p>\n" }]
         }] });
 
+class FormFieldLicenseComponent {
+    constructor() {
+        this.choices = [
+            {
+                value: 'cc-by',
+                label: marker('editor.record.form.license.cc-by'),
+            },
+            {
+                value: 'cc-by-sa',
+                label: marker('editor.record.form.license.cc-by-sa'),
+            },
+            {
+                value: 'cc-zero',
+                label: marker('editor.record.form.license.cc-zero'),
+            },
+            {
+                value: 'etalab',
+                label: marker('editor.record.form.license.etalab'),
+            },
+            {
+                value: 'etalab-v2',
+                label: marker('editor.record.form.license.etalab-v2'),
+            },
+            {
+                value: 'odbl',
+                label: marker('editor.record.form.license.odbl'),
+            },
+            {
+                value: 'odc-by',
+                label: marker('editor.record.form.license.odc-by'),
+            },
+            {
+                value: 'pddl',
+                label: marker('editor.record.form.license.pddl'),
+            },
+            {
+                value: 'unknown',
+                label: marker('editor.record.form.license.unknown'),
+            },
+        ];
+    }
+    get selected() {
+        return this.control.value[0]?.text;
+    }
+    onSelectValue(value) {
+        this.control.setValue([{ text: value }]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldLicenseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldLicenseComponent, isStandalone: true, selector: "gn-ui-form-field-license", inputs: { control: "control", label: "label" }, ngImport: i0, template: "<gn-ui-dropdown-selector\n  [title]=\"label\"\n  [showTitle]=\"false\"\n  [choices]=\"choices\"\n  [selected]=\"selected\"\n  (selectValue)=\"onSelectValue($event)\"\n>\n</gn-ui-dropdown-selector>\n", styles: [""], dependencies: [{ kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth"], outputs: ["selectValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldLicenseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-license', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [DropdownSelectorComponent], template: "<gn-ui-dropdown-selector\n  [title]=\"label\"\n  [showTitle]=\"false\"\n  [choices]=\"choices\"\n  [selected]=\"selected\"\n  (selectValue)=\"onSelectValue($event)\"\n>\n</gn-ui-dropdown-selector>\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }] } });
+
+class FormFieldResourceUpdatedComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldResourceUpdatedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldResourceUpdatedComponent, isStandalone: true, selector: "gn-ui-form-field-resource-updated", inputs: { control: "control" }, ngImport: i0, template: "<gn-ui-date-picker\n  [date]=\"control.value\"\n  (dateChange)=\"control.setValue($event)\"\n></gn-ui-date-picker>\n", styles: [""], dependencies: [{ kind: "component", type: DatePickerComponent, selector: "gn-ui-date-picker", inputs: ["date"], outputs: ["dateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldResourceUpdatedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-resource-updated', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [DatePickerComponent], template: "<gn-ui-date-picker\n  [date]=\"control.value\"\n  (dateChange)=\"control.setValue($event)\"\n></gn-ui-date-picker>\n" }]
+        }], propDecorators: { control: [{
+                type: Input
+            }] } });
+
 class FormFieldComponent {
     set value(v) {
         this.formControl.setValue(v, {
@@ -33513,8 +34398,17 @@ class FormFieldComponent {
     get isAbstract() {
         return this.model === 'abstract';
     }
+    get isLicenses() {
+        return this.model === 'licenses';
+    }
+    get isResourceUpdated() {
+        return this.model === 'resourceUpdated';
+    }
+    get withoutWrapper() {
+        return this.model === 'title' || this.model === 'abstract';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: FormFieldComponent, isStandalone: true, selector: "gn-ui-form-field", inputs: { model: "model", config: "config", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col h-full\">\n  <div class=\"mb-2 flex flex-row\">\n    <label class=\"grow\">\n      <span class=\"font-medium field-label\">{{\n        config.labelKey | translate\n      }}</span>\n      <span *ngIf=\"config.hintKey\" class=\"text-gray-900 text-sm\">\n        - {{ config.hintKey | translate }}\n      </span>\n    </label>\n    <mat-icon\n      *ngIf=\"isFieldOk\"\n      class=\"material-symbols-outlined text-[#c6d950] icon-ok\"\n      >check_circle</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldLocked\"\n      class=\"material-symbols-outlined text-blue-400 icon-locked\"\n      >lock</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldInvalid\"\n      class=\"material-symbols-outlined text-pink-500 icon-invalid\"\n      >cancel</mat-icon\n    >\n  </div>\n  <ng-container *ngIf=\"isTitle\">\n    <div class=\"flex justify-between items-center gap-3\">\n      <h2\n        #titleInput\n        class=\"grow text-3xl font-normal\"\n        [gnUiEditableLabel]=\"true\"\n        (editableLabelChanged)=\"formControl.setValue($event)\"\n      >\n        {{ formControl.value }}\n      </h2>\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        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  </ng-container>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      [type]=\"simpleType\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isFileField\">\n    <gn-ui-form-field-file\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-file>\n  </ng-container>\n  <ng-container *ngIf=\"isAbstract\">\n    <gn-ui-form-field-rich\n      class=\"h-[8rem]\"\n      [control]=\"formControl\"\n      [label]=\"config.labelKey | translate\"\n      [hint]=\"config.hintKey | translate\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isArrayField\">\n    <gn-ui-form-field-array></gn-ui-form-field-array>\n  </ng-container>\n  <ng-container *ngIf=\"isObjectField\">\n    <gn-ui-form-field-object></gn-ui-form-field-object>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtentField\">\n    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>\n  </ng-container>\n  <div\n    *ngIf=\"isFieldInvalid && config.invalidHintKey\"\n    class=\"mt-2 text-pink-500 text-sm field-invalid-hint\"\n  >\n    {{ config.invalidHintKey | translate }}\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: EditableLabelDirective, selector: "[gnUiEditableLabel]", inputs: ["gnUiEditableLabel"], outputs: ["editableLabelChanged"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: ["type", "control", "readonly", "invalid", "placeholder", "options"] }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["control", "label", "hint", "helperText", "placeholder"] }, { kind: "component", type: FormFieldObjectComponent, selector: "gn-ui-form-field-object" }, { kind: "component", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent" }, { kind: "component", type: FormFieldTemporalExtentComponent, selector: "gn-ui-form-field-temporal-extent" }, { kind: "component", type: FormFieldFileComponent, selector: "gn-ui-form-field-file", inputs: ["control", "readonly", "invalid", "placeholder"] }, { kind: "component", type: FormFieldArrayComponent, selector: "gn-ui-form-field-array" }, { 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: "16.1.7", type: FormFieldComponent, isStandalone: true, selector: "gn-ui-form-field", inputs: { model: "model", config: "config", value: "value" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }], ngImport: i0, template: "<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 *ngIf=\"isTitle\">\n    <div class=\"flex justify-between items-center gap-3\">\n      <h2\n        #titleInput\n        class=\"grow text-3xl font-normal\"\n        [gnUiEditableLabel]=\"true\"\n        (editableLabelChanged)=\"formControl.setValue($event)\"\n      >\n        {{ formControl.value }}\n      </h2>\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        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  </ng-container>\n  <ng-container *ngIf=\"isAbstract\">\n    <gn-ui-form-field-rich\n      class=\"h-[8rem]\"\n      [control]=\"formControl\"\n      [label]=\"config.labelKey | translate\"\n      [hint]=\"config.hintKey | translate\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isLicenses\">\n    <gn-ui-form-field-license\n      [control]=\"formControl\"\n      [label]=\"config.labelKey | translate\"\n    ></gn-ui-form-field-license>\n  </ng-container>\n  <ng-container *ngIf=\"isResourceUpdated\">\n    <gn-ui-form-field-resource-updated\n      [control]=\"formControl\"\n    ></gn-ui-form-field-resource-updated>\n  </ng-container>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      [type]=\"simpleType\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isFileField\">\n    <gn-ui-form-field-file\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-file>\n  </ng-container>\n  <ng-container *ngIf=\"isArrayField\">\n    <gn-ui-form-field-array></gn-ui-form-field-array>\n  </ng-container>\n  <ng-container *ngIf=\"isObjectField\">\n    <gn-ui-form-field-object></gn-ui-form-field-object>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtentField\">\n    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>\n  </ng-container>\n  <div\n    *ngIf=\"isFieldInvalid && config.invalidHintKey\"\n    class=\"mt-2 text-pink-500 text-sm field-invalid-hint\"\n  >\n    {{ config.invalidHintKey | translate }}\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: EditableLabelDirective, selector: "[gnUiEditableLabel]", inputs: ["gnUiEditableLabel"], outputs: ["editableLabelChanged"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", 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: ["control", "label"] }, { kind: "component", type: FormFieldResourceUpdatedComponent, selector: "gn-ui-form-field-resource-updated", inputs: ["control"] }, { kind: "component", type: FormFieldSimpleComponent, selector: "gn-ui-form-field-simple", inputs: ["type", "control", "readonly", "invalid", "placeholder", "options"] }, { kind: "component", type: FormFieldRichComponent, selector: "gn-ui-form-field-rich", inputs: ["control", "label", "hint", "helperText", "placeholder"] }, { kind: "component", type: FormFieldObjectComponent, selector: "gn-ui-form-field-object" }, { kind: "component", type: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent" }, { kind: "component", type: FormFieldTemporalExtentComponent, selector: "gn-ui-form-field-temporal-extent" }, { kind: "component", type: FormFieldFileComponent, selector: "gn-ui-form-field-file", inputs: ["control", "readonly", "invalid", "placeholder"] }, { kind: "component", type: FormFieldArrayComponent, selector: "gn-ui-form-field-array" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -33524,6 +34418,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         EditableLabelDirective,
                         MatIconModule,
                         MatTooltipModule,
+                        FormFieldWrapperComponent,
+                        FormFieldLicenseComponent,
+                        FormFieldResourceUpdatedComponent,
                         FormFieldSimpleComponent,
                         FormFieldRichComponent,
                         FormFieldObjectComponent,
@@ -33532,7 +34429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         FormFieldFileComponent,
                         FormFieldArrayComponent,
                         TranslateModule,
-                    ], template: "<div class=\"flex flex-col h-full\">\n  <div class=\"mb-2 flex flex-row\">\n    <label class=\"grow\">\n      <span class=\"font-medium field-label\">{{\n        config.labelKey | translate\n      }}</span>\n      <span *ngIf=\"config.hintKey\" class=\"text-gray-900 text-sm\">\n        - {{ config.hintKey | translate }}\n      </span>\n    </label>\n    <mat-icon\n      *ngIf=\"isFieldOk\"\n      class=\"material-symbols-outlined text-[#c6d950] icon-ok\"\n      >check_circle</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldLocked\"\n      class=\"material-symbols-outlined text-blue-400 icon-locked\"\n      >lock</mat-icon\n    >\n    <mat-icon\n      *ngIf=\"isFieldInvalid\"\n      class=\"material-symbols-outlined text-pink-500 icon-invalid\"\n      >cancel</mat-icon\n    >\n  </div>\n  <ng-container *ngIf=\"isTitle\">\n    <div class=\"flex justify-between items-center gap-3\">\n      <h2\n        #titleInput\n        class=\"grow text-3xl font-normal\"\n        [gnUiEditableLabel]=\"true\"\n        (editableLabelChanged)=\"formControl.setValue($event)\"\n      >\n        {{ formControl.value }}\n      </h2>\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        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  </ng-container>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      [type]=\"simpleType\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isFileField\">\n    <gn-ui-form-field-file\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-file>\n  </ng-container>\n  <ng-container *ngIf=\"isAbstract\">\n    <gn-ui-form-field-rich\n      class=\"h-[8rem]\"\n      [control]=\"formControl\"\n      [label]=\"config.labelKey | translate\"\n      [hint]=\"config.hintKey | translate\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isArrayField\">\n    <gn-ui-form-field-array></gn-ui-form-field-array>\n  </ng-container>\n  <ng-container *ngIf=\"isObjectField\">\n    <gn-ui-form-field-object></gn-ui-form-field-object>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtentField\">\n    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>\n  </ng-container>\n  <div\n    *ngIf=\"isFieldInvalid && config.invalidHintKey\"\n    class=\"mt-2 text-pink-500 text-sm field-invalid-hint\"\n  >\n    {{ config.invalidHintKey | translate }}\n  </div>\n</div>\n" }]
+                    ], template: "<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 *ngIf=\"isTitle\">\n    <div class=\"flex justify-between items-center gap-3\">\n      <h2\n        #titleInput\n        class=\"grow text-3xl font-normal\"\n        [gnUiEditableLabel]=\"true\"\n        (editableLabelChanged)=\"formControl.setValue($event)\"\n      >\n        {{ formControl.value }}\n      </h2>\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        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  </ng-container>\n  <ng-container *ngIf=\"isAbstract\">\n    <gn-ui-form-field-rich\n      class=\"h-[8rem]\"\n      [control]=\"formControl\"\n      [label]=\"config.labelKey | translate\"\n      [hint]=\"config.hintKey | translate\"\n    ></gn-ui-form-field-rich>\n  </ng-container>\n  <ng-container *ngIf=\"isLicenses\">\n    <gn-ui-form-field-license\n      [control]=\"formControl\"\n      [label]=\"config.labelKey | translate\"\n    ></gn-ui-form-field-license>\n  </ng-container>\n  <ng-container *ngIf=\"isResourceUpdated\">\n    <gn-ui-form-field-resource-updated\n      [control]=\"formControl\"\n    ></gn-ui-form-field-resource-updated>\n  </ng-container>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      [type]=\"simpleType\"\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-simple>\n  </ng-container>\n  <ng-container *ngIf=\"isFileField\">\n    <gn-ui-form-field-file\n      [control]=\"formControl\"\n      [readonly]=\"isFieldLocked\"\n      [invalid]=\"isFieldInvalid\"\n    ></gn-ui-form-field-file>\n  </ng-container>\n  <ng-container *ngIf=\"isArrayField\">\n    <gn-ui-form-field-array></gn-ui-form-field-array>\n  </ng-container>\n  <ng-container *ngIf=\"isObjectField\">\n    <gn-ui-form-field-object></gn-ui-form-field-object>\n  </ng-container>\n  <ng-container *ngIf=\"isSpatialExtentField\">\n    <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtentField\">\n    <gn-ui-form-field-temporal-extent></gn-ui-form-field-temporal-extent>\n  </ng-container>\n  <div\n    *ngIf=\"isFieldInvalid && config.invalidHintKey\"\n    class=\"mt-2 text-pink-500 text-sm field-invalid-hint\"\n  >\n    {{ config.invalidHintKey | translate }}\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], config: [{
@@ -33863,7 +34760,7 @@ class RouterEffects {
          * the search results happens
          */
         this.navigateToSearch$ = createEffect(() => this._actions$.pipe(navigation(this.routerConfig.searchRouteComponent, {
-            run: () => close(),
+            run: () => closeMetadata(),
         })));
         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 });
@@ -33890,7 +34787,7 @@ class DefaultRouterModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DefaultRouterModule, deps: [{ token: RouterService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: DefaultRouterModule, declarations: [SearchRouterContainerDirective], imports: [i1$2.StoreFeatureModule, i3$4.StoreRouterConnectingModule, i1$8.EffectsFeatureModule], exports: [SearchRouterContainerDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: DefaultRouterModule, declarations: [SearchRouterContainerDirective], imports: [i1$2.StoreFeatureModule, i3$2.StoreRouterConnectingModule, i1$8.EffectsFeatureModule], exports: [SearchRouterContainerDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DefaultRouterModule, providers: [
             RouterFacade,
             {
@@ -33933,5 +34830,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, AuthService, AutocompleteComponent, AvatarComponent, AvatarServiceInterface, BLOCK_MODEL_FIXTURE, BadgeComponent, BaseReader, ButtonComponent, CLEAR_ERROR, CLEAR_RESULTS, CONFIG_MALFORMED, CONFIG_MINIMAL, CONFIG_MISSING_MANDATORY, CONFIG_OK, CONFIG_UNRECOGNIZED_KEYS, CONFIG_WITH_TRANSLATIONS, CONFIG_WRONG_LANGUAGE_CODE, CarouselComponent, CatalogTitleComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ChipsInputComponent, ClearError, ClearResults, ColorScaleComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_BASELAYER_CONTEXT, DEFAULT_GN4_LOGIN_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DEFAULT_STYLE_FIXTURE, DEFAULT_STYLE_HL_FIXTURE, DEFAULT_VIEW, DataService, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DateRangePickerComponent, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EDITOR_FEATURE_KEY, EMPTY_BLOCK_MODEL_FIXTURE, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EditableLabelDirective, EditorFacade, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalViewerButtonComponent, FACET_ITEM_FIXTURE, FEATURE_MAP_OPTIONS, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FORMATS, FacetBlockComponent, FacetBlockStubComponent, FacetItemComponent, FacetItemStubComponent, FacetListComponent, FacetsContainerComponent, FacetsModule, FavoriteStarComponent, FavoritesService, FeatureAuthModule, FeatureCatalogModule, FeatureDatavizModule, FeatureDetailComponent, FeatureEditorModule, FeatureInfoService, FeatureMapModule, FeatureNotificationsModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileTranslateLoader, FilterDropdownComponent, FormFieldWrapperComponent, FuzzySearchComponent, GN_UI_VERSION, GeoTableViewComponent, GeocodingComponent, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, ImageOverlayPreviewComponent, InteractiveTableColumnComponent, InteractiveTableComponent, Iso191153Converter, Iso19139Converter, LANGUAGES_LIST, LANGUAGE_NAMES, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LANG_3_TO_2_MAPPER, LOGIN_URL, LONLAT_CRS_CODES, LangService, LanguageSwitcherComponent, LayersPanelComponent, LinkCardComponent, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_CONFIG_FIXTURE, MAP_FEATURE_KEY, METADATA_LANGUAGE, MY_FORMATS, MapComponent, MapContainerComponent, MapContextComponent, MapContextLayerTypeEnum, MapContextService, MapFacade, MapInstanceDirective, MapManagerService, MapStyleService, MapUtilsService, MapViewComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataInfoComponent, MetadataLinkType, MetadataQualityComponent, MetadataQualityItemComponent, MyOrgService, NavigationButtonComponent, NotificationComponent, NotificationsContainerComponent, NotificationsService, ORGANIZATIONS_STRATEGY, ORGANIZATION_URL_TOKEN, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationsFromGroupsService, OrganizationsFromMetadataService, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PatchResultsAggregations, PopupAlertComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_URL_TOKEN, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESULTS_LAYOUT_CONFIG, ROUTER_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_SEARCH, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordsMetricsComponent, RecordsService, RelatedRecordCardComponent, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SET_CONFIG_AGGREGATIONS, SET_CONFIG_FILTERS, SET_CONFIG_REQUEST_FIELDS, SET_ERROR, SET_FAVORITES_ONLY, SET_FILTERS, SET_INCLUDE_ON_AGGREGATION, SET_PAGE_SIZE, SET_RESULTS_AGGREGATIONS, SET_RESULTS_HITS, SET_RESULTS_LAYOUT, SET_SEARCH, SET_SORT_BY, SET_SPATIAL_FILTER_ENABLED, SearchEffects, SearchFacade, SearchInputComponent, SearchResultsErrorComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SiteTitleComponent, SortByComponent, SourceLabelComponent, SourcesService, SpinningLoaderComponent, StarToggleComponent, StepBarComponent, StickyHeaderComponent, SupportedTypes, TABLE_ITEM_FIXTURE, TABLE_ITEM_FIXTURE_HAB, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableComponent, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UiCatalogModule, UiDatavizModule, UiElementsModule, FacetsModule$1 as UiFacetsModule, UiInputsModule, UiLayoutModule, UiMapModule, UiSearchModule, UiWidgetsModule, UpdateConfigAggregations, UpdateFilters, UserPreviewComponent, UtilI18nModule, UtilSharedModule, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, WFS_MAX_FEATURES, WizardComponent, WizardFieldComponent, WizardFieldType, WizardService, WizardSummarizeComponent, _reset, addLayer, changeLayerOrder, checkFileFormat, clearLayerError, createFuzzyFilter, currentPage, defaultMapOptions, downgradeImage, downsizeImage, dragPanCondition, dropEmptyTranslations, editorReducer, findConverterForDocument, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryFromGeoJSON, getGlobalConfig, getJsonDataItemsProxy, getLangFromBrowser, getLinkLabel, getLinkPriority, getMapLayers, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSpatialFilterEnabled, getTemporalRangeUnion, getThemeConfig, initSearch, initialEditorState, initialMapState, initialState, isConfigLoaded, isEndOfResults, isFormatInQueryParam, loadAppConfig, mapContact, mapKeywords, mapLogo, mapOrganization, mapReducer, markRecordAsChanged, megabytesToBytes, mimeTypeToFormat, mouseWheelZoomCondition, openDataset, openRecord, parse, placeholder, propagateToDocumentOnly, provideGn4, provideRepositoryUrl, readDataset, readDatasetHeaders, reducer$2 as reducer, reducerSearch, removeLayer, removeSearchParams, removeWhitespace, saveRecord, saveRecordFailure, saveRecordSuccess, selectEditorState, selectFallback, selectFallbackFields, selectField, selectRecord, selectRecordChangedSinceSave, selectRecordFields, selectRecordFieldsConfig, selectRecordSaveError, selectRecordSaving, selectTranslatedField, selectTranslatedValue, setLayerError, sortByFromString, sortByToString, sortByToStrings, stripHtml, toDate, totalPages, updateLayer, updateRecordField };
+export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, AuthService, AutocompleteComponent, AvatarComponent, AvatarServiceInterface, BLOCK_MODEL_FIXTURE, BadgeComponent, BaseReader, BlockListComponent, ButtonComponent, CLEAR_ERROR, CLEAR_RESULTS, CONFIG_MALFORMED, CONFIG_MINIMAL, CONFIG_MISSING_MANDATORY, CONFIG_OK, CONFIG_UNRECOGNIZED_KEYS, CONFIG_WITH_TRANSLATIONS, CONFIG_WRONG_LANGUAGE_CODE, CarouselComponent, CatalogTitleComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ChipsInputComponent, ClearError, ClearResults, ColorScaleComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_BASELAYER_CONTEXT, DEFAULT_GN4_LOGIN_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DEFAULT_STYLE_FIXTURE, DEFAULT_STYLE_HL_FIXTURE, DEFAULT_VIEW, DataService, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DatePickerComponent, DateRangePickerComponent, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EDITOR_FEATURE_KEY, EMPTY_BLOCK_MODEL_FIXTURE, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EditableLabelDirective, EditorFacade, EditorService, ElasticsearchService, EmbeddedTranslateLoader, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalViewerButtonComponent, FACET_ITEM_FIXTURE, FEATURE_MAP_OPTIONS, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FORMATS, FacetBlockComponent, FacetBlockStubComponent, FacetItemComponent, FacetItemStubComponent, FacetListComponent, FacetsContainerComponent, FacetsModule, FavoriteStarComponent, FavoritesService, FeatureAuthModule, FeatureCatalogModule, FeatureDatavizModule, FeatureDetailComponent, FeatureEditorModule, FeatureInfoService, FeatureMapModule, FeatureNotificationsModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldsService, FigureComponent, FigureContainerComponent, FileTranslateLoader, FilterDropdownComponent, FormFieldWrapperComponent, FuzzySearchComponent, GN_UI_VERSION, GeoTableViewComponent, GeocodingComponent, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, ImageOverlayPreviewComponent, InteractiveTableColumnComponent, InteractiveTableComponent, Iso191153Converter, Iso19139Converter, LANGUAGES_LIST, LANGUAGE_NAMES, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LANG_3_TO_2_MAPPER, LOGIN_URL, LONLAT_CRS_CODES, LangService, LanguageSwitcherComponent, LayersPanelComponent, LinkCardComponent, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_CONFIG_FIXTURE, MAP_FEATURE_KEY, METADATA_LANGUAGE, MY_FORMATS, MapComponent, MapContainerComponent, MapContextComponent, MapContextLayerTypeEnum, MapContextService, MapFacade, MapInstanceDirective, MapManagerService, MapStyleService, MapUtilsService, MapViewComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataInfoComponent, MetadataLinkType, MetadataQualityComponent, MetadataQualityItemComponent, MyOrgService, NavigationButtonComponent, NotificationComponent, NotificationsContainerComponent, NotificationsService, ORGANIZATIONS_STRATEGY, ORGANIZATION_URL_TOKEN, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationsFromGroupsService, OrganizationsFromMetadataService, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PatchResultsAggregations, PopupAlertComponent, PreviousNextButtonsComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_URL_TOKEN, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESULTS_LAYOUT_CONFIG, ROUTER_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_SEARCH, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordsMetricsComponent, RecordsService, RelatedRecordCardComponent, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SET_CONFIG_AGGREGATIONS, SET_CONFIG_FILTERS, SET_CONFIG_REQUEST_FIELDS, SET_ERROR, SET_FAVORITES_ONLY, SET_FILTERS, SET_INCLUDE_ON_AGGREGATION, SET_PAGE_SIZE, SET_RESULTS_AGGREGATIONS, SET_RESULTS_HITS, SET_RESULTS_LAYOUT, SET_SEARCH, SET_SORT_BY, SET_SPATIAL_FILTER_ENABLED, SearchEffects, SearchFacade, SearchInputComponent, SearchResultsErrorComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SiteTitleComponent, SortByComponent, SourceLabelComponent, SourcesService, SpinningLoaderComponent, StarToggleComponent, StepBarComponent, StickyHeaderComponent, SupportedTypes, TABLE_ITEM_FIXTURE, TABLE_ITEM_FIXTURE_HAB, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableComponent, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UiCatalogModule, UiDatavizModule, UiElementsModule, FacetsModule$1 as UiFacetsModule, UiInputsModule, UiLayoutModule, UiMapModule, UiSearchModule, UiWidgetsModule, UpdateConfigAggregations, UpdateFilters, UserPreviewComponent, UtilI18nModule, UtilSharedModule, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, WFS_MAX_FEATURES, WizardComponent, WizardFieldComponent, WizardFieldType, WizardService, WizardSummarizeComponent, _reset, addLayer, changeLayerOrder, checkFileFormat, clearLayerError, createFuzzyFilter, currentPage, defaultMapOptions, downgradeImage, downsizeImage, dragPanCondition, dropEmptyTranslations, editorReducer, findConverterForDocument, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryFromGeoJSON, getGlobalConfig, getJsonDataItemsProxy, getLangFromBrowser, getLinkLabel, getLinkPriority, getMapLayers, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSpatialFilterEnabled, getTemporalRangeUnion, getThemeConfig, initSearch, initialEditorState, initialMapState, initialState, isConfigLoaded, isEndOfResults, isFormatInQueryParam, loadAppConfig, mapContact, mapKeywords, mapLogo, mapOrganization, mapReducer, markRecordAsChanged, megabytesToBytes, mimeTypeToFormat, mouseWheelZoomCondition, openDataset, openRecord, parse, placeholder, propagateToDocumentOnly, provideGn4, provideRepositoryUrl, readDataset, readDatasetHeaders, reducer$2 as reducer, reducerSearch, removeLayer, removeSearchParams, removeWhitespace, saveRecord, saveRecordFailure, saveRecordSuccess, selectEditorState, selectFallback, selectFallbackFields, selectField, selectRecord, selectRecordChangedSinceSave, selectRecordFields, selectRecordFieldsConfig, selectRecordSaveError, selectRecordSaving, selectTranslatedField, selectTranslatedValue, setLayerError, sortByFromString, sortByToString, sortByToStrings, stripHtml, toDate, totalPages, updateLayer, updateRecordField };
 //# sourceMappingURL=geonetwork-ui.mjs.map