geonetwork-ui 2.4.0-dev.6c8dcba0 → 2.4.0-dev.9c5250ea

package/fesm2022/geonetwork-ui.mjs

@@ -8,11 +8,11 @@ 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, catchError, tap as tap$1, shareReplay, filter, startWith, withLatestFrom, switchMap as switchMap$1, take, delay, debounceTime, distinctUntilChanged, finalize, first, throttleTime, share, pairwise, mergeMap, defaultIfEmpty, scan } from 'rxjs/operators';
+import { map as map$1, catchError, tap as tap$1, shareReplay, filter, startWith, withLatestFrom, switchMap as switchMap$1, take, delay, distinctUntilChanged, debounceTime, finalize, throttleTime, first as first$1, share, pairwise, mergeMap, defaultIfEmpty, toArray } from 'rxjs/operators';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import * as i1$3 from '@angular/common';
 import { CommonModule, NgFor, NgComponentOutlet, NgOptimizedImage, NgForOf } from '@angular/common';
-import { of, map as map$2, lastValueFrom, switchMap, throwError, combineLatest, from, takeLast, forkJoin, firstValueFrom, Subject, merge, BehaviorSubject, fromEvent, timer, Subscription, ReplaySubject, distinctUntilChanged as distinctUntilChanged$1, debounceTime as debounceTime$1, filter as filter$1, animationFrameScheduler, tap as tap$2, Observable, buffer, combineLatestWith, catchError as catchError$1, takeUntil, EMPTY, exhaustMap, mergeMap as mergeMap$1, withLatestFrom as withLatestFrom$1, startWith as startWith$1, pairwise as pairwise$1 } from 'rxjs';
+import { of, map as map$2, lastValueFrom, switchMap, throwError, combineLatest, from, takeLast, forkJoin, firstValueFrom, Subject, merge, BehaviorSubject, fromEvent, timer, ReplaySubject, Subscription, first, distinctUntilChanged as distinctUntilChanged$1, debounceTime as debounceTime$1, filter as filter$1, animationFrameScheduler, tap as tap$2, Observable, buffer, combineLatestWith, catchError as catchError$1, takeUntil, EMPTY, exhaustMap, mergeMap as mergeMap$1, withLatestFrom as withLatestFrom$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';
@@ -48,28 +48,28 @@ import { MVT, WFS, GeoJSON as GeoJSON$1 } from 'ol/format';
 import VectorTileLayer from 'ol/layer/VectorTile';
 import OGCMapTile from 'ol/source/OGCMapTile.js';
 import ImageLayer from 'ol/layer/Image';
-import * as i2$4 from '@angular/material/tabs';
+import * as i2$5 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i2$1 from '@angular/forms';
-import { UntypedFormControl, FormsModule, ReactiveFormsModule, FormArray, FormControl } from '@angular/forms';
-import * as i4 from '@angular/material/autocomplete';
+import * as i2$2 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, UntypedFormControl, FormArray, FormControl } from '@angular/forms';
+import * as i2$1 from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i5 from '@angular/material/core';
+import * as i3$1 from 'ngx-dropzone';
+import { NgxDropzoneModule } from 'ngx-dropzone';
+import * as i5 from 'ngx-chips';
+import { TagInputModule } from 'ngx-chips';
+import * as i1$4 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i3 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 * as i1$5 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 * as i2$3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2$3 from '@angular/material/datepicker';
+import * as i2$4 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/cdk/overlay';
+import * as i1$6 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 { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import * as i1$7 from '@angular/router';
@@ -89,19 +89,19 @@ import { Polygon } from 'ol/geom';
 import { queryDataGouvFr, queryGeonames, queryGeoadmin } from '@geospatial-sdk/geocoding';
 import { trigger, transition, animate, keyframes, style } from '@angular/animations';
 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 * as i4 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import * as i2$5 from '@angular/material/sort';
+import * as i2$6 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$1 from 'ng-table-virtual-scroll';
+import * as i3$2 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 { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
-import * as i3$2 from '@ngrx/router-store';
+import * as i3$3 from '@ngrx/router-store';
 import { getRouterSelectors, routerReducer, StoreRouterConnectingModule, FullRouterStateSerializer } from '@ngrx/router-store';
 import { navigation } from '@ngrx/router-store/data-persistence';
 
@@ -17306,6 +17306,7 @@ var next$6 = "weiter";
 var previous$6 = "zurück";
 var records$6 = "Datensätze";
 var de = {
+	"Add Layer As": "",
 	"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}}",
@@ -17324,16 +17325,22 @@ var de = {
 	"chart.type.line": "Liniendiagramm",
 	"chart.type.lineSmooth": "Geglättes Liniendiagramm",
 	"chart.type.pie": "Kreisdiagramm",
+	"dashboard.catalog.allRecords": "Metadatenkatalog",
+	"dashboard.catalog.calendar": "Kalender",
+	"dashboard.catalog.contacts": "Kontakte",
+	"dashboard.catalog.discussion": "Diskussion",
+	"dashboard.catalog.thesaurus": "Thesaurus",
 	"dashboard.createRecord": "Neuer Eintrag",
+	"dashboard.labels.catalog": "Katalog",
 	"dashboard.labels.mySpace": "Mein Bereich",
 	"dashboard.records.all": "Katalog",
 	"dashboard.records.hasDraft": "",
 	"dashboard.records.myDraft": "Meine Entwürfe",
 	"dashboard.records.myLibrary": "Meine Bibliothek",
-	"dashboard.records.myOrg": "Meine Organisation",
 	"dashboard.records.myRecords": "Meine Datensätze",
 	"dashboard.records.publishedRecords": "{count, plural, =1{veröffentlichter Datensatz} other{veröffentlichte Datensätze}}",
 	"dashboard.records.search": "Suche nach \"{searchText}\"",
+	"dashboard.records.templates": "Vorlagen",
 	"dashboard.records.userDetail": "Name",
 	"dashboard.records.userEmail": "E-Mail",
 	"dashboard.records.username": "Benutzername",
@@ -17709,6 +17716,7 @@ var next$5 = "next";
 var previous$5 = "previous";
 var records$5 = "records";
 var en = {
+	"Add Layer As": "",
 	"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}}",
@@ -17727,16 +17735,22 @@ var en = {
 	"chart.type.line": "line chart",
 	"chart.type.lineSmooth": "smooth line chart",
 	"chart.type.pie": "pie chart",
+	"dashboard.catalog.allRecords": "Metadata records",
+	"dashboard.catalog.calendar": "Calendar",
+	"dashboard.catalog.contacts": "Contacts",
+	"dashboard.catalog.discussion": "Discussion",
+	"dashboard.catalog.thesaurus": "Thesaurus",
 	"dashboard.createRecord": "New record",
+	"dashboard.labels.catalog": "Catalog",
 	"dashboard.labels.mySpace": "My space",
 	"dashboard.records.all": "Metadata records",
 	"dashboard.records.hasDraft": "draft",
 	"dashboard.records.myDraft": "My drafts",
 	"dashboard.records.myLibrary": "My library",
-	"dashboard.records.myOrg": "Organization",
 	"dashboard.records.myRecords": "My Records",
 	"dashboard.records.publishedRecords": "{count, plural, =1{published record} other{published records}}",
 	"dashboard.records.search": "Search for \"{searchText}\"",
+	"dashboard.records.templates": "Templates",
 	"dashboard.records.userDetail": "Name",
 	"dashboard.records.userEmail": "Email",
 	"dashboard.records.username": "Username",
@@ -18112,6 +18126,7 @@ var next$4 = "";
 var previous$4 = "";
 var records$4 = "";
 var es = {
+	"Add Layer As": "",
 	"button.login": "",
 	"catalog.figures.datasets": "conjuntos de datos",
 	"catalog.figures.organisations": "organizaciones",
@@ -18130,16 +18145,22 @@ var es = {
 	"chart.type.line": "gráfico de líneas",
 	"chart.type.lineSmooth": "gráfico de líneas suave",
 	"chart.type.pie": "gráfico circular",
+	"dashboard.catalog.allRecords": "",
+	"dashboard.catalog.calendar": "",
+	"dashboard.catalog.contacts": "",
+	"dashboard.catalog.discussion": "",
+	"dashboard.catalog.thesaurus": "",
 	"dashboard.createRecord": "",
+	"dashboard.labels.catalog": "Catálogo",
 	"dashboard.labels.mySpace": "Mi espacio",
 	"dashboard.records.all": "Catálogo",
 	"dashboard.records.hasDraft": "",
 	"dashboard.records.myDraft": "Mis borradores",
 	"dashboard.records.myLibrary": "Mi biblioteca",
-	"dashboard.records.myOrg": "Organización",
 	"dashboard.records.myRecords": "Mis Registros",
 	"dashboard.records.publishedRecords": "",
 	"dashboard.records.search": "Buscar \"{searchText}\"",
+	"dashboard.records.templates": "",
 	"dashboard.records.userDetail": "",
 	"dashboard.records.userEmail": "",
 	"dashboard.records.username": "",
@@ -18515,6 +18536,7 @@ var next$3 = "suivant";
 var previous$3 = "précédent";
 var records$3 = "enregistrements";
 var fr = {
+	"Add Layer As": "",
 	"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}}",
@@ -18533,16 +18555,22 @@ var fr = {
 	"chart.type.line": "ligne",
 	"chart.type.lineSmooth": "ligne lisse",
 	"chart.type.pie": "camembert",
+	"dashboard.catalog.allRecords": "Fiches de métadonnée",
+	"dashboard.catalog.calendar": "Calendrier",
+	"dashboard.catalog.contacts": "Annuaire",
+	"dashboard.catalog.discussion": "Discussions",
+	"dashboard.catalog.thesaurus": "Thesaurus",
 	"dashboard.createRecord": "Nouvel enregistrement",
+	"dashboard.labels.catalog": "Catalogue",
 	"dashboard.labels.mySpace": "Mon espace",
 	"dashboard.records.all": "Catalogue",
 	"dashboard.records.hasDraft": "brouillon",
 	"dashboard.records.myDraft": "Mes brouillons",
 	"dashboard.records.myLibrary": "Ma bibliothèque",
-	"dashboard.records.myOrg": "Mon organisation",
 	"dashboard.records.myRecords": "Mes fiches publiées",
 	"dashboard.records.publishedRecords": "{count, plural, =1{donnée publiée} other{données publiées}}",
 	"dashboard.records.search": "Résultats pour \"{searchText}\"",
+	"dashboard.records.templates": "Modèles pré-remplis",
 	"dashboard.records.userDetail": "Nom",
 	"dashboard.records.userEmail": "Email",
 	"dashboard.records.username": "Nom d'utilisateur",
@@ -18918,6 +18946,7 @@ var next$2 = "successivo";
 var previous$2 = "precedente";
 var records$2 = "record";
 var it = {
+	"Add Layer As": "",
 	"button.login": "",
 	"catalog.figures.datasets": "{count, plural, =0{datasets} one{dataset} other{datasets}}",
 	"catalog.figures.organisations": "{count, plural, =0{organizzazioni} one{organizzazione} other{organizzazioni}}",
@@ -18936,16 +18965,22 @@ var it = {
 	"chart.type.line": "grafico a linee",
 	"chart.type.lineSmooth": "grafico a linea liscia",
 	"chart.type.pie": "grafico a torta",
+	"dashboard.catalog.allRecords": "",
+	"dashboard.catalog.calendar": "",
+	"dashboard.catalog.contacts": "",
+	"dashboard.catalog.discussion": "",
+	"dashboard.catalog.thesaurus": "",
 	"dashboard.createRecord": "Crea un record",
+	"dashboard.labels.catalog": "Catalogo",
 	"dashboard.labels.mySpace": "Il mio spazio",
 	"dashboard.records.all": "Catalogo",
 	"dashboard.records.hasDraft": "",
 	"dashboard.records.myDraft": "Le mie bozze",
 	"dashboard.records.myLibrary": "La mia biblioteca",
-	"dashboard.records.myOrg": "La mia organizzazione",
 	"dashboard.records.myRecords": "I miei dati",
 	"dashboard.records.publishedRecords": "dati pubblicati",
 	"dashboard.records.search": "Risultati per \"{searchText}\"",
+	"dashboard.records.templates": "",
 	"dashboard.records.userDetail": "Nome",
 	"dashboard.records.userEmail": "Email",
 	"dashboard.records.username": "Nome utente",
@@ -19321,6 +19356,7 @@ var next$1 = "";
 var previous$1 = "";
 var records$1 = "";
 var nl = {
+	"Add Layer As": "",
 	"button.login": "",
 	"catalog.figures.datasets": "datasets",
 	"catalog.figures.organisations": "organisaties",
@@ -19339,16 +19375,22 @@ var nl = {
 	"chart.type.line": "lijndiagram",
 	"chart.type.lineSmooth": "glad lijndiagram",
 	"chart.type.pie": "cirkeldiagram",
+	"dashboard.catalog.allRecords": "",
+	"dashboard.catalog.calendar": "",
+	"dashboard.catalog.contacts": "",
+	"dashboard.catalog.discussion": "",
+	"dashboard.catalog.thesaurus": "",
 	"dashboard.createRecord": "",
+	"dashboard.labels.catalog": "Catalogus",
 	"dashboard.labels.mySpace": "Mijn ruimte",
 	"dashboard.records.all": "Catalogus",
 	"dashboard.records.hasDraft": "",
 	"dashboard.records.myDraft": "Mijn concepten",
 	"dashboard.records.myLibrary": "Mijn bibliotheek",
-	"dashboard.records.myOrg": "Organisatie",
 	"dashboard.records.myRecords": "Mijn Records",
 	"dashboard.records.publishedRecords": "",
 	"dashboard.records.search": "Zoeken naar \"{searchText}\"",
+	"dashboard.records.templates": "",
 	"dashboard.records.userDetail": "",
 	"dashboard.records.userEmail": "",
 	"dashboard.records.username": "",
@@ -19724,6 +19766,7 @@ var next = "";
 var previous = "";
 var records = "";
 var pt = {
+	"Add Layer As": "",
 	"button.login": "",
 	"catalog.figures.datasets": "conjuntos de dados",
 	"catalog.figures.organisations": "organizações",
@@ -19742,16 +19785,22 @@ var pt = {
 	"chart.type.line": "gráfico de linha",
 	"chart.type.lineSmooth": "gráfico de linha suave",
 	"chart.type.pie": "gráfico de pizza",
+	"dashboard.catalog.allRecords": "",
+	"dashboard.catalog.calendar": "",
+	"dashboard.catalog.contacts": "",
+	"dashboard.catalog.discussion": "",
+	"dashboard.catalog.thesaurus": "",
 	"dashboard.createRecord": "",
+	"dashboard.labels.catalog": "Catálogo",
 	"dashboard.labels.mySpace": "Meu espaço",
 	"dashboard.records.all": "Catálogo",
 	"dashboard.records.hasDraft": "",
 	"dashboard.records.myDraft": "Meus rascunhos",
 	"dashboard.records.myLibrary": "Minha biblioteca",
-	"dashboard.records.myOrg": "Organização",
 	"dashboard.records.myRecords": "Meus Registros",
 	"dashboard.records.publishedRecords": "",
 	"dashboard.records.search": "Buscar por \"{searchText}\"",
+	"dashboard.records.templates": "",
 	"dashboard.records.userDetail": "",
 	"dashboard.records.userEmail": "",
 	"dashboard.records.username": "",
@@ -21113,10 +21162,10 @@ class Gn4Repository {
     saveRecord(record, referenceRecordSource) {
         return this.serializeRecordToXml(record, referenceRecordSource).pipe(switchMap((recordXml) => this.gn4RecordsApi
             .insert('METADATA', undefined, undefined, undefined, true, undefined, 'OVERWRITE', undefined, undefined, undefined, '_none_', undefined, undefined, undefined, recordXml)
-            .pipe(map$1(() => recordXml))), tap$1(() => {
-            // if saving was successful, the associated draft can be discarded
-            window.localStorage.removeItem(this.getLocalStorageKeyForRecord(record.uniqueIdentifier));
-        }));
+            .pipe(map$1((response) => {
+            const metadataId = Object.keys(response.metadataInfos)[0];
+            return response.metadataInfos[metadataId][0].uuid;
+        }))));
     }
     saveRecordAsDraft(record, referenceRecordSource) {
         return this.serializeRecordToXml(record, referenceRecordSource).pipe(tap$1((recordXml) => window.localStorage.setItem(this.getLocalStorageKeyForRecord(record.uniqueIdentifier), recordXml)));
@@ -21127,6 +21176,15 @@ class Gn4Repository {
     recordHasDraft(uniqueIdentifier) {
         return (window.localStorage.getItem(this.getLocalStorageKeyForRecord(uniqueIdentifier)) !== null);
     }
+    // generated by copilot
+    getAllDrafts() {
+        const items = { ...window.localStorage };
+        const drafts = Object.keys(items)
+            .filter((key) => key.startsWith('geonetwork-ui-draft-'))
+            .map((key) => window.localStorage.getItem(key))
+            .filter((draft) => draft !== null);
+        return from(Promise.all(drafts.map((draft) => findConverterForDocument(draft).readRecord(draft))));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Gn4Repository, deps: [{ token: SearchApiService }, { token: ElasticsearchService }, { token: Gn4Converter }, { token: RecordsApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Gn4Repository }); }
 }
@@ -21623,8 +21681,8 @@ class Gn4PlatformMapper {
         const { enabled, emailAddresses, organisation, kind, lastLoginDate, accountNonExpired, accountNonLocked, id, credentialsNonExpired, ...user } = apiUser;
         return { ...apiUser, id: id.toString() };
     }
-    thesaurusFromApi(thesaurus, lang3) {
-        return thesaurus.map((keyword) => {
+    keywordsFromApi(keywords, thesaurus, lang3) {
+        return keywords.map((keyword) => {
             let key = keyword.uri;
             // sometines GN can prefix an URI with an "all thesaurus" URI; only keep the last one
             if (key.indexOf('@@@') > -1) {
@@ -21634,10 +21692,18 @@ class Gn4PlatformMapper {
             const description = lang3 && lang3 in keyword.definitions
                 ? keyword.definitions[lang3]
                 : keyword.definition;
+            const matchedThesaurus = thesaurus.find((thes) => keyword.thesaurusKey === thes.key);
             return {
                 key,
                 label,
                 description,
+                type: matchedThesaurus?.dname,
+                thesaurus: {
+                    id: matchedThesaurus?.key,
+                    name: matchedThesaurus?.title,
+                    url: new URL(matchedThesaurus?.url),
+                    type: matchedThesaurus?.dname,
+                },
             };
         });
     }
@@ -21683,7 +21749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 const minApiVersion = '4.2.2';
 class Gn4PlatformService {
-    constructor(siteApiService, meApi, usersApi, mapper, toolsApiService, registriesApiService, langService, userfeedbackApiService) {
+    constructor(siteApiService, meApi, usersApi, mapper, toolsApiService, registriesApiService, langService, userfeedbackApiService, httpClient) {
         this.siteApiService = siteApiService;
         this.meApi = meApi;
         this.usersApi = usersApi;
@@ -21692,6 +21758,7 @@ class Gn4PlatformService {
         this.registriesApiService = registriesApiService;
         this.langService = langService;
         this.userfeedbackApiService = userfeedbackApiService;
+        this.httpClient = httpClient;
         this.type = 'GeoNetwork';
         this.keyTranslations$ = this.toolsApiService
             .getTranslationsPackage1('gnui')
@@ -21709,7 +21776,14 @@ class Gn4PlatformService {
          * A map of already loaded thesauri (groups of keywords); the key is a URI
          * @private
          */
-        this.thesauri = {};
+        this.keywordsByThesauri = {};
+        this.allThesaurus$ = this.httpClient
+            .get(`${this.registriesApiService.configuration.basePath}/thesaurus?_content_type=json`)
+            .pipe(map$1((thesaurus) => {
+            // FIXME: find a better way to exclude place keywords
+            // thesaurus[0].filter((thes) => thes.dname !== 'place')
+            return thesaurus[0];
+        }), shareReplay(1));
         this.me$ = this.meApi.getMe().pipe(switchMap((apiUser) => this.mapper.userFromMeApi(apiUser)), shareReplay({ bufferSize: 1, refCount: true }));
         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());
@@ -21741,7 +21815,7 @@ class Gn4PlatformService {
             // the thesaurus URI is inferred by removing a part of the keyword URI
             // this is not exact science but it's OK, we'll still end up loading a bunch of keywords at once anyway
             const thesaurusUri = key.replace(/\/([^/]+)$/, '/');
-            return this.getThesaurusByUri(thesaurusUri).pipe(map$1((thesaurus) => {
+            return this.getKeywordsByUri(thesaurusUri).pipe(map$1((thesaurus) => {
                 for (const item of thesaurus) {
                     if (item.key === key)
                         return item.label;
@@ -21751,14 +21825,24 @@ class Gn4PlatformService {
         }
         return this.keyTranslations$.pipe(map$1((translations) => translations[key]));
     }
-    getThesaurusByUri(uri) {
-        if (this.thesauri[uri]) {
-            return this.thesauri[uri];
+    searchKeywords(query) {
+        const keywords$ = this.registriesApiService.searchKeywords(query, this.langService.iso3, 10, 0, null, null, null, `*${query}*`);
+        return combineLatest([keywords$, this.allThesaurus$]).pipe(map$1(([keywords, thesaurus]) => {
+            return this.mapper.keywordsFromApi(keywords, thesaurus, this.langService.iso3);
+        }));
+    }
+    getKeywordsByUri(uri) {
+        if (this.keywordsByThesauri[uri]) {
+            return this.keywordsByThesauri[uri];
         }
-        this.thesauri[uri] = this.registriesApiService
-            .searchKeywords(null, this.langService.iso3, 1000, 0, null, null, null, `${uri}*`)
-            .pipe(map$1((thesaurus) => this.mapper.thesaurusFromApi(thesaurus, this.langService.iso3)), shareReplay(1));
-        return this.thesauri[uri];
+        const keywords$ = this.registriesApiService.searchKeywords(null, this.langService.iso3, 1000, 0, null, null, null, `${uri}*`);
+        this.keywordsByThesauri[uri] = combineLatest([
+            keywords$,
+            this.allThesaurus$,
+        ]).pipe(map$1(([keywords, thesaurus]) => {
+            return this.mapper.keywordsFromApi(keywords, thesaurus, this.langService.iso3);
+        }), shareReplay(1));
+        return this.keywordsByThesauri[uri];
     }
     getUserFeedbacks(uuid) {
         return this.userfeedbackApiService.getUserComments(uuid).pipe(map$1((userFeedbacks) => userFeedbacks.map(this.mapper.userFeedbacksFromApi)), catchError((error) => {
@@ -21773,12 +21857,12 @@ class Gn4PlatformService {
             return of(undefined);
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Gn4PlatformService, deps: [{ token: SiteApiService }, { token: MeApiService }, { token: UsersApiService }, { token: Gn4PlatformMapper }, { token: ToolsApiService }, { token: RegistriesApiService }, { token: LangService }, { token: UserfeedbackApiService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Gn4PlatformService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Gn4PlatformService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: SiteApiService }, { type: MeApiService }, { type: UsersApiService }, { type: Gn4PlatformMapper }, { type: ToolsApiService }, { type: RegistriesApiService }, { type: LangService }, { type: UserfeedbackApiService }]; } });
+        }], ctorParameters: function () { return [{ type: SiteApiService }, { type: MeApiService }, { type: UsersApiService }, { type: Gn4PlatformMapper }, { type: ToolsApiService }, { type: RegistriesApiService }, { type: LangService }, { type: UserfeedbackApiService }, { type: i1.HttpClient }]; } });
 
 function provideGn4() {
     return [
@@ -24244,6 +24328,185 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+class ColorScaleComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorScaleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorScaleComponent, selector: "gn-ui-color-scale", ngImport: i0, template: "<div class=\"flex flex-row items-center\">\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32 text-right\">primary</div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-black\"\n    title=\"primary-black\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-darkest\"\n    title=\"primary-darkest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-darker\"\n    title=\"primary-darker\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary border-2 border-primary-darkest\"\n    title=\"primary\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-lighter\"\n    title=\"primary-lighter\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-lightest\"\n    title=\"primary-lightest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-white\"\n    title=\"primary-white\"\n  ></div>\n</div>\n<div class=\"flex flex-row\">\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32 text-right\">\n    secondary\n  </div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-black\"\n    title=\"secondary-black\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-darkest\"\n    title=\"secondary-darkest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-darker\"\n    title=\"secondary-darker\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary border-2 border-secondary-darkest\"\n    title=\"secondary\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-lighter\"\n    title=\"secondary-lighter\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-lightest\"\n    title=\"secondary-lightest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-white\"\n    title=\"secondary-white\"\n  ></div>\n</div>\n<div class=\"flex flex-row\">\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32 text-right\">main</div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-main\" title=\"main\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-900\" title=\"gray-900\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-800\" title=\"gray-800\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-700\" title=\"gray-700\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-600\" title=\"gray-600\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-500\" title=\"gray-500\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-400\" title=\"gray-400\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-300\" title=\"gray-300\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-200\" title=\"gray-200\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-100\" title=\"gray-100\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-50\" title=\"gray-50\"></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-background\"\n    title=\"background\"\n  ></div>\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32\">background</div>\n</div>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorScaleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-color-scale', template: "<div class=\"flex flex-row items-center\">\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32 text-right\">primary</div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-black\"\n    title=\"primary-black\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-darkest\"\n    title=\"primary-darkest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-darker\"\n    title=\"primary-darker\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary border-2 border-primary-darkest\"\n    title=\"primary\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-lighter\"\n    title=\"primary-lighter\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-lightest\"\n    title=\"primary-lightest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-white\"\n    title=\"primary-white\"\n  ></div>\n</div>\n<div class=\"flex flex-row\">\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32 text-right\">\n    secondary\n  </div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-black\"\n    title=\"secondary-black\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-darkest\"\n    title=\"secondary-darkest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-darker\"\n    title=\"secondary-darker\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary border-2 border-secondary-darkest\"\n    title=\"secondary\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-lighter\"\n    title=\"secondary-lighter\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-lightest\"\n    title=\"secondary-lightest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-white\"\n    title=\"secondary-white\"\n  ></div>\n</div>\n<div class=\"flex flex-row\">\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32 text-right\">main</div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-main\" title=\"main\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-900\" title=\"gray-900\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-800\" title=\"gray-800\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-700\" title=\"gray-700\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-600\" title=\"gray-600\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-500\" title=\"gray-500\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-400\" title=\"gray-400\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-300\" title=\"gray-300\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-200\" title=\"gray-200\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-100\" title=\"gray-100\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-50\" title=\"gray-50\"></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-background\"\n    title=\"background\"\n  ></div>\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32\">background</div>\n</div>\n" }]
+        }] });
+
+class ProgressBarComponent {
+    constructor() {
+        this.value = 0;
+        this.type = 'default';
+    }
+    get progress() {
+        return this.value > 0 ? (this.value < 100 ? this.value : 100) : 0;
+    }
+    get color() {
+        switch (this.type) {
+            case 'default':
+                return {
+                    outerBar: 'bg-gray-200',
+                    innerBar: 'bg-gray-100',
+                    text: 'text-gray-900',
+                };
+            case 'primary':
+                return {
+                    outerBar: 'bg-primary',
+                    innerBar: 'bg-primary-lighter',
+                    text: 'text-white',
+                };
+            case 'secondary':
+                return {
+                    outerBar: 'bg-secondary',
+                    innerBar: 'bg-secondary-lighter',
+                    text: 'text-white',
+                };
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressBarComponent, selector: "gn-ui-progress-bar", inputs: { value: "value", type: "type" }, ngImport: i0, template: "<div class=\"flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg\">\n  <div\n    [style.width.%]=\"progress\"\n    class=\"flex {{\n      color.innerBar\n    }} my-1 mx-1 transition-width duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl\"\n  >\n    <div class=\"flex items-center pl-2 py-1 {{ color.text }} font-bold text-4\">\n      {{ progress }}%\n    </div>\n  </div>\n</div>\n", styles: [".font-bold{font-weight:var(--progress-bar-font-weight, \"bold\")}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-progress-bar', template: "<div class=\"flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg\">\n  <div\n    [style.width.%]=\"progress\"\n    class=\"flex {{\n      color.innerBar\n    }} my-1 mx-1 transition-width duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl\"\n  >\n    <div class=\"flex items-center pl-2 py-1 {{ color.text }} font-bold text-4\">\n      {{ progress }}%\n    </div>\n  </div>\n</div>\n", styles: [".font-bold{font-weight:var(--progress-bar-font-weight, \"bold\")}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+class StepBarComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.currentStep = 1;
+        this.type = 'default';
+    }
+    get stepCounter() {
+        return new Array(this.steps);
+    }
+    get color() {
+        switch (this.type) {
+            case 'default':
+                return {
+                    outerBar: 'bg-gray-200',
+                    innerBar: 'bg-gray-100',
+                };
+            case 'primary':
+                return {
+                    outerBar: 'bg-primary',
+                    innerBar: 'bg-primary-lighter',
+                };
+            case 'secondary':
+                return {
+                    outerBar: 'bg-secondary',
+                    innerBar: 'bg-secondary-lighter',
+                };
+        }
+    }
+    getCircleColor(index) {
+        return index === this.currentStep
+            ? 'bg-black'
+            : index < this.currentStep
+                ? 'bg-white'
+                : this.color.innerBar;
+    }
+    getChecked(index) {
+        return index + 1 < this.currentStep;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepBarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepBarComponent, selector: "gn-ui-step-bar", inputs: { steps: "steps", currentStep: "currentStep", type: "type" }, ngImport: i0, template: "<div class=\"relative flex flex-col justify-center\">\n  <div class=\"flex justify-between ml-16 mr-16 z-10 circle-steps\">\n    <div\n      *ngFor=\"let step of stepCounter; let i = index\"\n      class=\"shadow-md rounded-full h-6 w-6 {{ getCircleColor(i + 1) }}\"\n    >\n      <span class=\"icon-check pl-1\" *ngIf=\"getChecked(i)\"></span>\n    </div>\n  </div>\n  <div\n    class=\"absolute rounded-lg right-0 w-full {{ color.outerBar }} h-2 z-0\"\n  ></div>\n</div>\n", styles: [".icon-check{color:var(--color-primary)}\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-step-bar', template: "<div class=\"relative flex flex-col justify-center\">\n  <div class=\"flex justify-between ml-16 mr-16 z-10 circle-steps\">\n    <div\n      *ngFor=\"let step of stepCounter; let i = index\"\n      class=\"shadow-md rounded-full h-6 w-6 {{ getCircleColor(i + 1) }}\"\n    >\n      <span class=\"icon-check pl-1\" *ngIf=\"getChecked(i)\"></span>\n    </div>\n  </div>\n  <div\n    class=\"absolute rounded-lg right-0 w-full {{ color.outerBar }} h-2 z-0\"\n  ></div>\n</div>\n", styles: [".icon-check{color:var(--color-primary)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { steps: [{
+                type: Input
+            }], currentStep: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }] } });
+
+class LoadingMaskComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingMaskComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-loading-mask', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+        }], propDecorators: { message: [{
+                type: Input
+            }] } });
+
+class SpinningLoaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpinningLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader", ngImport: i0, template: "<span>\n  <svg\n    class=\"animate-spin h-8 w-8 text-primary\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n  >\n    <circle\n      class=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"4\"\n    ></circle>\n    <path\n      class=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    ></path>\n  </svg>\n</span>\n", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpinningLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-spinning-loader', template: "<span>\n  <svg\n    class=\"animate-spin h-8 w-8 text-primary\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n  >\n    <circle\n      class=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"4\"\n    ></circle>\n    <path\n      class=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    ></path>\n  </svg>\n</span>\n" }]
+        }] });
+
+class UiWidgetsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UiWidgetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: UiWidgetsModule, declarations: [ColorScaleComponent,
+            ProgressBarComponent,
+            StepBarComponent,
+            LoadingMaskComponent,
+            SpinningLoaderComponent], imports: [CommonModule, i1$1.TranslateModule, NgxDropzoneModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TagInputModule,
+            UtilSharedModule,
+            MatProgressSpinnerModule,
+            MatIconModule], exports: [ProgressBarComponent,
+            StepBarComponent,
+            LoadingMaskComponent,
+            SpinningLoaderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UiWidgetsModule, imports: [CommonModule,
+            TranslateModule.forChild(),
+            NgxDropzoneModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TagInputModule,
+            UtilSharedModule,
+            MatProgressSpinnerModule,
+            MatIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UiWidgetsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ColorScaleComponent,
+                        ProgressBarComponent,
+                        StepBarComponent,
+                        LoadingMaskComponent,
+                        SpinningLoaderComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        TranslateModule.forChild(),
+                        NgxDropzoneModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TagInputModule,
+                        UtilSharedModule,
+                        MatProgressSpinnerModule,
+                        MatIconModule,
+                    ],
+                    exports: [
+                        ProgressBarComponent,
+                        StepBarComponent,
+                        LoadingMaskComponent,
+                        SpinningLoaderComponent,
+                    ],
+                }]
+        }] });
+
 class PopupAlertComponent {
     constructor(changeDetector) {
         this.changeDetector = changeDetector;
@@ -24274,11 +24537,11 @@ class PopupAlertComponent {
         }, this.showDuration);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupAlertComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PopupAlertComponent, isStandalone: true, 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.2.12", 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"] }]
+            args: [{ selector: 'gn-ui-popup-alert', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule], 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: [{
@@ -24295,37 +24558,59 @@ class AutocompleteComponent {
         this.cdRef = cdRef;
         this.clearOnSelection = false;
         this.autoFocus = false;
+        this.minCharacterCount = 3;
+        this.allowSubmit = true;
         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;
+        this.subscription = new Subscription();
+        this.displayWithFn = (item) => item.toString();
+        this.displayWithFnInternal = (item) => {
+            if (item === null || item === undefined)
+                return null;
+            return this.displayWithFn(item);
+        };
     }
     ngOnChanges(changes) {
         const { value } = changes;
         if (value) {
-            const previousTextValue = this.displayWithFn(value.previousValue);
-            const currentTextValue = this.displayWithFn(value.currentValue);
+            const previousTextValue = this.displayWithFnInternal(value.previousValue);
+            const currentTextValue = this.displayWithFnInternal(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) => {
+        const newValue$ = merge(of(''), this.inputCleared.pipe(map$1(() => '')), this.control.valueChanges.pipe(filter((value) => typeof value === 'string'), distinctUntilChanged(), debounceTime(400)));
+        const externalValueChange$ = this.control.valueChanges.pipe(filter((value) => typeof value === 'object' && value.title), map$1((item) => item.title));
+        // this observable emits arrays of suggestions loaded using the given action
+        const suggestionsFromAction = merge(newValue$.pipe(filter((value) => value.length >= this.minCharacterCount)), externalValueChange$).pipe(tap$1(() => {
+            this.searching = true;
+            this.error = null;
+        }), switchMap$1((value) => this.action(value)), catchError((error) => {
             this.error = error.message;
             return of([]);
         }), finalize(() => (this.searching = false)));
-        this.subscription = this.control.valueChanges.subscribe((any) => {
+        this.suggestions$ = merge(suggestionsFromAction, 
+        // if a new value is under the min char count, clear suggestions
+        newValue$.pipe(filter((value) => value.length < this.minCharacterCount), map$1(() => [])));
+        // close the panel whenever suggestions are cleared
+        this.subscription.add(this.suggestions$
+            .pipe(filter((suggestions) => suggestions.length === 0))
+            .subscribe(() => {
+            this.triggerRef?.closePanel();
+        }));
+        this.subscription.add(this.control.valueChanges.subscribe((any) => {
             if (any !== '') {
                 this.cancelEnter = false;
             }
-        });
+        }));
         this.control.valueChanges
             .pipe(filter((value) => typeof value === 'string'))
             .subscribe(this.lastInputValue$);
@@ -24338,7 +24623,7 @@ class AutocompleteComponent {
         }
     }
     ngOnDestroy() {
-        this.subscription.unsubscribe();
+        this.subscription?.unsubscribe();
     }
     updateInputValue(value) {
         if (value) {
@@ -24355,17 +24640,14 @@ class AutocompleteComponent {
             .pipe(take(1))
             .subscribe((selection) => selection && selection.option.deselect());
         this.inputRef.nativeElement.focus();
-        this.triggerRef.closePanel();
     }
     handleEnter(any) {
-        if (!this.cancelEnter) {
+        if (!this.cancelEnter && this.allowSubmit) {
             this.inputSubmitted.emit(any);
-            this.triggerRef.closePanel();
         }
     }
     handleClickSearch() {
         this.inputSubmitted.emit(this.inputRef.nativeElement.value);
-        this.triggerRef.closePanel();
     }
     handleSelection(event) {
         this.cancelEnter = true;
@@ -24377,11 +24659,18 @@ class AutocompleteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AutocompleteComponent, isStandalone: true, selector: "gn-ui-autocomplete", inputs: { placeholder: "placeholder", action: "action", value: "value", clearOnSelection: "clearOnSelection", autoFocus: "autoFocus", minCharacterCount: "minCharacterCount", allowSubmit: "allowSubmit", 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  <div class=\"flex flex-row absolute inset-y-0 right-0\">\n    <button\n      type=\"button\"\n      class=\"text-primary-lightest hover:text-primary hover:bg-gray-50 transition-all duration-100 clear-btn\"\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 transition-all duration-100 search-btn rounded-r\"\n      aria-label=\"Trigger search\"\n      *ngIf=\"allowSubmit\"\n      data-test=\"autocomplete-submit-btn\"\n      (click)=\"handleClickSearch()\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n    </button>\n  </div>\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]=\"displayWithFnInternal\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion\"\n  >\n    {{ displayWithFnInternal(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: [":host{--input-height: 3.5em}.clear-btn{width: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: "ngmodule", type: MatIconModule }, { 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: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i2$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { 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: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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"] }]
+            args: [{ selector: 'gn-ui-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatIconModule,
+                        PopupAlertComponent,
+                        MatAutocompleteModule,
+                        CommonModule,
+                        TranslateModule,
+                        ReactiveFormsModule,
+                    ], 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  <div class=\"flex flex-row absolute inset-y-0 right-0\">\n    <button\n      type=\"button\"\n      class=\"text-primary-lightest hover:text-primary hover:bg-gray-50 transition-all duration-100 clear-btn\"\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 transition-all duration-100 search-btn rounded-r\"\n      aria-label=\"Trigger search\"\n      *ngIf=\"allowSubmit\"\n      data-test=\"autocomplete-submit-btn\"\n      (click)=\"handleClickSearch()\"\n    >\n      <mat-icon class=\"material-symbols-outlined\">search</mat-icon>\n    </button>\n  </div>\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]=\"displayWithFnInternal\"\n>\n  <mat-option\n    *ngFor=\"let suggestion of suggestions$ | async\"\n    [value]=\"suggestion\"\n    class=\"p-2 suggestion\"\n  >\n    {{ displayWithFnInternal(suggestion) }}\n  </mat-option>\n</mat-autocomplete>\n", styles: [":host{--input-height: 3.5em}.clear-btn{width: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: [{
@@ -24392,6 +24681,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], autoFocus: [{
                 type: Input
+            }], minCharacterCount: [{
+                type: Input
+            }], allowSubmit: [{
+                type: Input
             }], itemSelected: [{
                 type: Output
             }], inputSubmitted: [{
@@ -24462,6 +24755,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+class BadgeComponent {
+    constructor() {
+        this.clickable = false;
+        this.removable = false;
+        this.badgeRemoveClicked = new EventEmitter();
+    }
+    removeBadge() {
+        this.badgeRemoveClicked.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BadgeComponent, isStandalone: true, selector: "gn-ui-badge", inputs: { clickable: "clickable", removable: "removable" }, outputs: { badgeRemoveClicked: "badgeRemoveClicked" }, ngImport: i0, template: "<div\n  class=\"gn-ui-badge flex items-center gap-1.5\"\n  [ngClass]=\"\n    clickable\n      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'\n      : ''\n  \"\n>\n  <span><ng-content></ng-content></span>\n  <gn-ui-button\n    class=\"material-symbols-outlined cursor-pointer text-xs\"\n    *ngIf=\"removable\"\n    (buttonClick)=\"removeBadge()\"\n    extraClass=\"p-1 bg-transparent border-0 border-transparent \"\n  >\n    close\n  </gn-ui-button>\n</div>\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: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, ButtonComponent], template: "<div\n  class=\"gn-ui-badge flex items-center gap-1.5\"\n  [ngClass]=\"\n    clickable\n      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'\n      : ''\n  \"\n>\n  <span><ng-content></ng-content></span>\n  <gn-ui-button\n    class=\"material-symbols-outlined cursor-pointer text-xs\"\n    *ngIf=\"removable\"\n    (buttonClick)=\"removeBadge()\"\n    extraClass=\"p-1 bg-transparent border-0 border-transparent \"\n  >\n    close\n  </gn-ui-button>\n</div>\n" }]
+        }], propDecorators: { clickable: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], badgeRemoveClicked: [{
+                type: Output
+            }] } });
+
 class CheckToggleComponent {
     constructor() {
         this.color = 'primary';
@@ -24471,7 +24787,7 @@ class CheckToggleComponent {
         this.toggled.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckToggleComponent, isStandalone: true, selector: "gn-ui-check-toggle", inputs: { title: "title", label: "label", value: "value", color: "color" }, outputs: { toggled: "toggled" }, ngImport: i0, template: "<label 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckToggleComponent, isStandalone: true, selector: "gn-ui-check-toggle", inputs: { title: "title", label: "label", value: "value", color: "color" }, outputs: { toggled: "toggled" }, ngImport: i0, template: "<label 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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.2.12", ngImport: i0, type: CheckToggleComponent, decorators: [{
             type: Component,
@@ -24504,7 +24820,7 @@ class CheckboxComponent {
         this.changed.emit(this.checked);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -24564,7 +24880,7 @@ class ChipsInputComponent {
         this.subscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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.2.12", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipsInputComponent, decorators: [{
             type: Component,
@@ -24595,7 +24911,7 @@ class CopyTextButtonComponent {
         event.target.blur();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CopyTextButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CopyTextButtonComponent, decorators: [{
             type: Component,
@@ -24615,7 +24931,7 @@ class DatePickerComponent {
         this.dateChange = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 rounded-lg border border-gray-300 bg-white\"\n>\n  <input\n    class=\"pl-3\"\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 rounded-lg border border-gray-300 bg-white\"\n>\n  <input\n    class=\"pl-3\"\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$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -24632,7 +24948,7 @@ class DateRangePickerComponent {
         this.endDateChange = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateRangePickerComponent, isStandalone: true, selector: "gn-ui-date-range-picker", inputs: { startDate: "startDate", endDate: "endDate" }, outputs: { startDateChange: "startDateChange", endDateChange: "endDateChange" }, ngImport: i0, template: "<div\n  class=\"flex items-center justify-between rounded-lg border border-gray-300 bg-white\"\n>\n  <div class=\"pl-3 flex justify-center\">\n    <mat-date-range-input [rangePicker]=\"picker\" class=\"w-full\">\n      <input\n        matStartDate\n        placeholder=\"Start date\"\n        [value]=\"startDate\"\n        (dateInput)=\"startDateChange.emit($event.value)\"\n      />\n      <input\n        matEndDate\n        placeholder=\"End date\"\n        [value]=\"endDate\"\n        (dateInput)=\"endDateChange.emit($event.value)\"\n      />\n    </mat-date-range-input>\n  </div>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon>calendar_today</mat-icon>\n  </mat-datepicker-toggle>\n</div>\n<mat-date-range-picker #picker></mat-date-range-picker>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateRangePickerComponent, isStandalone: true, selector: "gn-ui-date-range-picker", inputs: { startDate: "startDate", endDate: "endDate" }, outputs: { startDateChange: "startDateChange", endDateChange: "endDateChange" }, ngImport: i0, template: "<div\n  class=\"flex items-center justify-between rounded-lg border border-gray-300 bg-white\"\n>\n  <div class=\"pl-3 flex justify-center\">\n    <mat-date-range-input [rangePicker]=\"picker\" class=\"w-full\">\n      <input\n        matStartDate\n        placeholder=\"Start date\"\n        [value]=\"startDate\"\n        (dateInput)=\"startDateChange.emit($event.value)\"\n      />\n      <input\n        matEndDate\n        placeholder=\"End date\"\n        [value]=\"endDate\"\n        (dateInput)=\"endDateChange.emit($event.value)\"\n      />\n    </mat-date-range-input>\n  </div>\n  <mat-datepicker-toggle matSuffix [for]=\"picker\">\n    <mat-icon>calendar_today</mat-icon>\n  </mat-datepicker-toggle>\n</div>\n<mat-date-range-picker #picker></mat-date-range-picker>\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$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -24664,7 +24980,7 @@ class DragAndDropFileInputComponent {
         this.fileChange.emit(this.selectedFile);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragAndDropFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$1.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "processDirectoryDrop", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DragAndDropFileInputComponent, decorators: [{
             type: Component,
@@ -24822,13 +25138,13 @@ class DropdownMultiselectComponent {
         propagateToDocumentOnly(event);
         this.setFocus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownMultiselectComponent, deps: [{ token: i1$5.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownMultiselectComponent, deps: [{ token: i1$6.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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$6.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$6.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.2.12", ngImport: i0, type: DropdownMultiselectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gn-ui-dropdown-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    <div\n      *ngIf=\"hasSelectedChoices\"\n      class=\"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: [{
+        }], ctorParameters: function () { return [{ type: i1$6.ScrollStrategyOptions }]; }, propDecorators: { title: [{
                 type: Input
             }], choices: [{
                 type: Input
@@ -24992,7 +25308,7 @@ class DropdownSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", disabled: "disabled" }, 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    [disabled]=\"disabled\"\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", disabled: "disabled" }, 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    [disabled]=\"disabled\"\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$6.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$6.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.2.12", ngImport: i0, type: DropdownSelectorComponent, decorators: [{
             type: Component,
@@ -25270,203 +25586,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['input']
             }] } });
 
-class ColorScaleComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorScaleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorScaleComponent, selector: "gn-ui-color-scale", ngImport: i0, template: "<div class=\"flex flex-row items-center\">\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32 text-right\">primary</div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-black\"\n    title=\"primary-black\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-darkest\"\n    title=\"primary-darkest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-darker\"\n    title=\"primary-darker\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary border-2 border-primary-darkest\"\n    title=\"primary\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-lighter\"\n    title=\"primary-lighter\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-lightest\"\n    title=\"primary-lightest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-white\"\n    title=\"primary-white\"\n  ></div>\n</div>\n<div class=\"flex flex-row\">\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32 text-right\">\n    secondary\n  </div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-black\"\n    title=\"secondary-black\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-darkest\"\n    title=\"secondary-darkest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-darker\"\n    title=\"secondary-darker\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary border-2 border-secondary-darkest\"\n    title=\"secondary\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-lighter\"\n    title=\"secondary-lighter\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-lightest\"\n    title=\"secondary-lightest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-white\"\n    title=\"secondary-white\"\n  ></div>\n</div>\n<div class=\"flex flex-row\">\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32 text-right\">main</div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-main\" title=\"main\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-900\" title=\"gray-900\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-800\" title=\"gray-800\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-700\" title=\"gray-700\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-600\" title=\"gray-600\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-500\" title=\"gray-500\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-400\" title=\"gray-400\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-300\" title=\"gray-300\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-200\" title=\"gray-200\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-100\" title=\"gray-100\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-50\" title=\"gray-50\"></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-background\"\n    title=\"background\"\n  ></div>\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32\">background</div>\n</div>\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorScaleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-color-scale', template: "<div class=\"flex flex-row items-center\">\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32 text-right\">primary</div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-black\"\n    title=\"primary-black\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-darkest\"\n    title=\"primary-darkest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-darker\"\n    title=\"primary-darker\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary border-2 border-primary-darkest\"\n    title=\"primary\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-lighter\"\n    title=\"primary-lighter\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-lightest\"\n    title=\"primary-lightest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-primary-white\"\n    title=\"primary-white\"\n  ></div>\n</div>\n<div class=\"flex flex-row\">\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32 text-right\">\n    secondary\n  </div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-black\"\n    title=\"secondary-black\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-darkest\"\n    title=\"secondary-darkest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-darker\"\n    title=\"secondary-darker\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary border-2 border-secondary-darkest\"\n    title=\"secondary\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-lighter\"\n    title=\"secondary-lighter\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-lightest\"\n    title=\"secondary-lightest\"\n  ></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-secondary-white\"\n    title=\"secondary-white\"\n  ></div>\n</div>\n<div class=\"flex flex-row\">\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32 text-right\">main</div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-main\" title=\"main\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-900\" title=\"gray-900\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-800\" title=\"gray-800\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-700\" title=\"gray-700\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-600\" title=\"gray-600\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-500\" title=\"gray-500\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-400\" title=\"gray-400\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-300\" title=\"gray-300\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-200\" title=\"gray-200\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-100\" title=\"gray-100\"></div>\n  <div class=\"shadow-md rounded w-6 h-6 m-2 bg-gray-50\" title=\"gray-50\"></div>\n  <div\n    class=\"shadow-md rounded w-6 h-6 m-2 bg-background\"\n    title=\"background\"\n  ></div>\n  <div class=\"text-xs text-gray-700 font-bold m-2 w-32\">background</div>\n</div>\n" }]
-        }] });
-
-class ProgressBarComponent {
-    constructor() {
-        this.value = 0;
-        this.type = 'default';
-    }
-    get progress() {
-        return this.value > 0 ? (this.value < 100 ? this.value : 100) : 0;
-    }
-    get color() {
-        switch (this.type) {
-            case 'default':
-                return {
-                    outerBar: 'bg-gray-200',
-                    innerBar: 'bg-gray-100',
-                    text: 'text-gray-900',
-                };
-            case 'primary':
-                return {
-                    outerBar: 'bg-primary',
-                    innerBar: 'bg-primary-lighter',
-                    text: 'text-white',
-                };
-            case 'secondary':
-                return {
-                    outerBar: 'bg-secondary',
-                    innerBar: 'bg-secondary-lighter',
-                    text: 'text-white',
-                };
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressBarComponent, selector: "gn-ui-progress-bar", inputs: { value: "value", type: "type" }, ngImport: i0, template: "<div class=\"flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg\">\n  <div\n    [style.width.%]=\"progress\"\n    class=\"flex {{\n      color.innerBar\n    }} my-1 mx-1 transition-width duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl\"\n  >\n    <div class=\"flex items-center pl-2 py-1 {{ color.text }} font-bold text-4\">\n      {{ progress }}%\n    </div>\n  </div>\n</div>\n", styles: [".font-bold{font-weight:var(--progress-bar-font-weight, \"bold\")}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-progress-bar', template: "<div class=\"flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg\">\n  <div\n    [style.width.%]=\"progress\"\n    class=\"flex {{\n      color.innerBar\n    }} my-1 mx-1 transition-width duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl\"\n  >\n    <div class=\"flex items-center pl-2 py-1 {{ color.text }} font-bold text-4\">\n      {{ progress }}%\n    </div>\n  </div>\n</div>\n", styles: [".font-bold{font-weight:var(--progress-bar-font-weight, \"bold\")}\n"] }]
-        }], propDecorators: { value: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }] } });
-
-class StepBarComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.currentStep = 1;
-        this.type = 'default';
-    }
-    get stepCounter() {
-        return new Array(this.steps);
-    }
-    get color() {
-        switch (this.type) {
-            case 'default':
-                return {
-                    outerBar: 'bg-gray-200',
-                    innerBar: 'bg-gray-100',
-                };
-            case 'primary':
-                return {
-                    outerBar: 'bg-primary',
-                    innerBar: 'bg-primary-lighter',
-                };
-            case 'secondary':
-                return {
-                    outerBar: 'bg-secondary',
-                    innerBar: 'bg-secondary-lighter',
-                };
-        }
-    }
-    getCircleColor(index) {
-        return index === this.currentStep
-            ? 'bg-black'
-            : index < this.currentStep
-                ? 'bg-white'
-                : this.color.innerBar;
-    }
-    getChecked(index) {
-        return index + 1 < this.currentStep;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepBarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StepBarComponent, selector: "gn-ui-step-bar", inputs: { steps: "steps", currentStep: "currentStep", type: "type" }, ngImport: i0, template: "<div class=\"relative flex flex-col justify-center\">\n  <div class=\"flex justify-between ml-16 mr-16 z-10 circle-steps\">\n    <div\n      *ngFor=\"let step of stepCounter; let i = index\"\n      class=\"shadow-md rounded-full h-6 w-6 {{ getCircleColor(i + 1) }}\"\n    >\n      <span class=\"icon-check pl-1\" *ngIf=\"getChecked(i)\"></span>\n    </div>\n  </div>\n  <div\n    class=\"absolute rounded-lg right-0 w-full {{ color.outerBar }} h-2 z-0\"\n  ></div>\n</div>\n", styles: [".icon-check{color:var(--color-primary)}\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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StepBarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-step-bar', template: "<div class=\"relative flex flex-col justify-center\">\n  <div class=\"flex justify-between ml-16 mr-16 z-10 circle-steps\">\n    <div\n      *ngFor=\"let step of stepCounter; let i = index\"\n      class=\"shadow-md rounded-full h-6 w-6 {{ getCircleColor(i + 1) }}\"\n    >\n      <span class=\"icon-check pl-1\" *ngIf=\"getChecked(i)\"></span>\n    </div>\n  </div>\n  <div\n    class=\"absolute rounded-lg right-0 w-full {{ color.outerBar }} h-2 z-0\"\n  ></div>\n</div>\n", styles: [".icon-check{color:var(--color-primary)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { steps: [{
-                type: Input
-            }], currentStep: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }] } });
-
-class LoadingMaskComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadingMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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.2.12", ngImport: i0, type: LoadingMaskComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-loading-mask', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
-        }], propDecorators: { message: [{
-                type: Input
-            }] } });
-
-class SpinningLoaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpinningLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader", ngImport: i0, template: "<span>\n  <svg\n    class=\"animate-spin h-8 w-8 text-primary\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n  >\n    <circle\n      class=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"4\"\n    ></circle>\n    <path\n      class=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    ></path>\n  </svg>\n</span>\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpinningLoaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-spinning-loader', template: "<span>\n  <svg\n    class=\"animate-spin h-8 w-8 text-primary\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n  >\n    <circle\n      class=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      stroke-width=\"4\"\n    ></circle>\n    <path\n      class=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    ></path>\n  </svg>\n</span>\n" }]
-        }] });
-
-class UiWidgetsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UiWidgetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: UiWidgetsModule, declarations: [ColorScaleComponent,
-            ProgressBarComponent,
-            StepBarComponent,
-            LoadingMaskComponent,
-            PopupAlertComponent,
-            SpinningLoaderComponent], imports: [CommonModule, i1$1.TranslateModule, NgxDropzoneModule,
-            FormsModule,
-            ReactiveFormsModule,
-            TagInputModule,
-            UtilSharedModule,
-            MatProgressSpinnerModule,
-            MatIconModule], exports: [ProgressBarComponent,
-            StepBarComponent,
-            LoadingMaskComponent,
-            PopupAlertComponent,
-            SpinningLoaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UiWidgetsModule, imports: [CommonModule,
-            TranslateModule.forChild(),
-            NgxDropzoneModule,
-            FormsModule,
-            ReactiveFormsModule,
-            TagInputModule,
-            UtilSharedModule,
-            MatProgressSpinnerModule,
-            MatIconModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UiWidgetsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ColorScaleComponent,
-                        ProgressBarComponent,
-                        StepBarComponent,
-                        LoadingMaskComponent,
-                        PopupAlertComponent,
-                        SpinningLoaderComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        TranslateModule.forChild(),
-                        NgxDropzoneModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        TagInputModule,
-                        UtilSharedModule,
-                        MatProgressSpinnerModule,
-                        MatIconModule,
-                    ],
-                    exports: [
-                        ProgressBarComponent,
-                        StepBarComponent,
-                        LoadingMaskComponent,
-                        PopupAlertComponent,
-                        SpinningLoaderComponent,
-                    ],
-                }]
-        }] });
-
-class BadgeComponent {
-    constructor() {
-        this.clickable = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BadgeComponent, isStandalone: true, selector: "gn-ui-badge", inputs: { clickable: "clickable" }, ngImport: i0, template: "<div\n  class=\"gn-ui-badge\"\n  [ngClass]=\"\n    clickable\n      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'\n      : ''\n  \"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-badge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule], template: "<div\n  class=\"gn-ui-badge\"\n  [ngClass]=\"\n    clickable\n      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'\n      : ''\n  \"\n>\n  <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { clickable: [{
-                type: Input
-            }] } });
-
 class ViewportIntersectorComponent {
     constructor(vcRef) {
         this.vcRef = vcRef;
@@ -25698,7 +25817,7 @@ class ImageInputComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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.2.12", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageInputComponent, decorators: [{
             type: Component,
@@ -25734,8 +25853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class UiInputsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UiInputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: UiInputsModule, declarations: [AutocompleteComponent,
-            TextInputComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: UiInputsModule, declarations: [TextInputComponent,
             DragAndDropFileInputComponent,
             ChipsInputComponent,
             NavigationButtonComponent,
@@ -25765,8 +25883,8 @@ class UiInputsModule {
             ImageInputComponent,
             DropdownSelectorComponent,
             DateRangePickerComponent,
-            CheckToggleComponent], exports: [DropdownSelectorComponent,
-            AutocompleteComponent,
+            CheckToggleComponent,
+            BadgeComponent], exports: [DropdownSelectorComponent,
             ButtonComponent,
             TextInputComponent,
             DragAndDropFileInputComponent,
@@ -25782,7 +25900,8 @@ class UiInputsModule {
             SearchInputComponent,
             DateRangePickerComponent,
             EditableLabelDirective,
-            ImageInputComponent] }); }
+            ImageInputComponent,
+            BadgeComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UiInputsModule, imports: [CommonModule,
             TranslateModule.forChild(),
             NgxDropzoneModule,
@@ -25803,13 +25922,13 @@ class UiInputsModule {
             ImageInputComponent,
             DropdownSelectorComponent,
             DateRangePickerComponent,
-            CheckToggleComponent] }); }
+            CheckToggleComponent,
+            BadgeComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UiInputsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        AutocompleteComponent,
                         TextInputComponent,
                         DragAndDropFileInputComponent,
                         ChipsInputComponent,
@@ -25846,10 +25965,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         DropdownSelectorComponent,
                         DateRangePickerComponent,
                         CheckToggleComponent,
+                        BadgeComponent,
                     ],
                     exports: [
                         DropdownSelectorComponent,
-                        AutocompleteComponent,
                         ButtonComponent,
                         TextInputComponent,
                         DragAndDropFileInputComponent,
@@ -25866,6 +25985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         DateRangePickerComponent,
                         EditableLabelDirective,
                         ImageInputComponent,
+                        BadgeComponent,
                     ],
                 }]
         }] });
@@ -26022,7 +26142,7 @@ class FacetItemComponent {
         this.onInvertedChange(this.inverted);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FacetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FacetItemComponent, selector: "gn-ui-facet-item", inputs: { label: "label", count: "count", selected: "selected", inverted: "inverted" }, outputs: { selectedChange: "selectedChange", invertedChange: "invertedChange" }, ngImport: i0, template: "<div\n  class=\"flex flex-row items-center group px-1 my-1 hover:bg-gray-100 rounded-sm\"\n>\n  <label class=\"grow shrink truncate cursor-pointer group-hover:text-black\">\n    <input\n      type=\"checkbox\"\n      class=\"cursor-pointer\"\n      [ngModel]=\"selected\"\n      (ngModelChange)=\"onSelectedChange($event)\"\n    />\n    {{ label | translate }}\n    <span class=\"group-hover:text-black\">({{ count }})</span>\n  </label>\n  <div\n    *ngIf=\"!inverted\"\n    class=\"shrink-0 cursor-pointer invisible group-hover:visible icon-exclude\"\n    style=\"min-width: 20px\"\n    (click)=\"toggleInverted()\"\n  >\n    <!-- minus svg -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\"\n        clip-rule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    *ngIf=\"inverted\"\n    class=\"shrink-0 cursor-pointer invisible group-hover:visible icon-include\"\n    style=\"min-width: 20px\"\n    (click)=\"toggleInverted()\"\n  >\n    <!-- check svg -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n        clip-rule=\"evenodd\"\n      />\n    </svg>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FacetItemComponent, selector: "gn-ui-facet-item", inputs: { label: "label", count: "count", selected: "selected", inverted: "inverted" }, outputs: { selectedChange: "selectedChange", invertedChange: "invertedChange" }, ngImport: i0, template: "<div\n  class=\"flex flex-row items-center group px-1 my-1 hover:bg-gray-100 rounded-sm\"\n>\n  <label class=\"grow shrink truncate cursor-pointer group-hover:text-black\">\n    <input\n      type=\"checkbox\"\n      class=\"cursor-pointer\"\n      [ngModel]=\"selected\"\n      (ngModelChange)=\"onSelectedChange($event)\"\n    />\n    {{ label | translate }}\n    <span class=\"group-hover:text-black\">({{ count }})</span>\n  </label>\n  <div\n    *ngIf=\"!inverted\"\n    class=\"shrink-0 cursor-pointer invisible group-hover:visible icon-exclude\"\n    style=\"min-width: 20px\"\n    (click)=\"toggleInverted()\"\n  >\n    <!-- minus svg -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z\"\n        clip-rule=\"evenodd\"\n      />\n    </svg>\n  </div>\n  <div\n    *ngIf=\"inverted\"\n    class=\"shrink-0 cursor-pointer invisible group-hover:visible icon-include\"\n    style=\"min-width: 20px\"\n    (click)=\"toggleInverted()\"\n  >\n    <!-- check svg -->\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n        clip-rule=\"evenodd\"\n      />\n    </svg>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FacetItemComponent, decorators: [{
             type: Component,
@@ -26755,7 +26875,7 @@ class ApiCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ApiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$3.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.2.12", ngImport: i0, type: ApiCardComponent, decorators: [{
             type: Component,
@@ -27292,7 +27412,7 @@ class MetadataInfoComponent {
         this.keyword.emit(keyword);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MetadataInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MetadataInfoComponent, selector: "gn-ui-metadata-info", inputs: { metadata: "metadata", incomplete: "incomplete" }, outputs: { keyword: "keyword" }, ngImport: i0, template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost ghostClass=\"h-32\" [showContent]=\"fieldReady('abstract')\">\n    <gn-ui-max-lines [maxLines]=\"6\" *ngIf=\"metadata.abstract\">\n      <div>\n        <gn-ui-markdown-parser\n          [textContent]=\"metadata.abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n    </gn-ui-max-lines>\n    <div *ngIf=\"metadata.keywords?.length\">\n      <p class=\"mt-6 mb-3 font-medium text-primary text-sm\" translate>\n        record.metadata.keywords\n      </p>\n      <div class=\"sm:pb-4 flex flex-wrap gap-2\">\n        <gn-ui-badge\n          class=\"inline-block lowercase\"\n          (click)=\"onKeywordClick(keyword)\"\n          [clickable]=\"true\"\n          *ngFor=\"let keyword of metadata.keywords\"\n          >{{ keyword.label }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\n  <div class=\"flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900\">\n    <ng-container *ngFor=\"let license of licenses\">\n      <div *ngIf=\"license.url; else noUrl\" class=\"text-primary\">\n        <a\n          [href]=\"license.url\"\n          target=\"_blank\"\n          class=\"cursor-pointer hover:underline transition-all\"\n        >\n          {{ license.text }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <ng-template #noUrl>\n        <div class=\"text-primary\" gnUiLinkify>\n          {{ license.text }}\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"legalConstraints.length\">\n      <gn-ui-markdown-parser\n        *ngFor=\"let constraint of legalConstraints\"\n        [textContent]=\"constraint\"\n      >\n      </gn-ui-markdown-parser>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <h5 translate class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\">\n          record.metadata.otherConstraints\n        </h5>\n        <gn-ui-markdown-parser [textContent]=\"constraint\">\n        </gn-ui-markdown-parser>\n      </div>\n    </ng-container>\n\n    <span class=\"noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div *ngIf=\"metadata.lineage\" class=\"text-gray-900 flex flex-col mt-4 gap-2\">\n    <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n      {{ metadata.lineage }}\n    </p>\n  </div>\n  <div class=\"flex flex-row gap-6 mt-5 mb-8\" *ngIf=\"resourceContact\">\n    <div\n      *ngIf=\"resourceContact.organization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"resourceContact.organization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\" translate>record.metadata.producer</p>\n      <div\n        class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n        data-cy=\"organization-name\"\n      >\n        {{ resourceContact.organization?.name }}\n      </div>\n      <div *ngIf=\"resourceContact.organization?.website\">\n        <a\n          [href]=\"resourceContact.organization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ resourceContact.organization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"resourceContact.email\"\n            [href]=\"'mailto:' + resourceContact.email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ resourceContact?.email }}</a\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n  >\n    <div *ngIf=\"metadata.recordCreated\">\n      <p class=\"text-sm\" translate>record.metadata.creation</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordCreated.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.recordPublished\">\n      <p class=\"text-sm\" translate>record.metadata.publication</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordPublished.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"updateFrequency\">\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.languages\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n      <div class=\"flex flex-row gap-1 flex-wrap\">\n        <p\n          class=\"text-primary font-medium\"\n          translate\n          *ngFor=\"let language of metadata.languages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"temporalExtent\">\n      <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n      <div class=\"flex flex-row gap-1 mb-1 text-primary font-medium\">\n        <p\n          *ngIf=\"temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{\n            start: temporalExtent.start,\n            end: temporalExtent.end\n          }\"\n        >\n          record.metadata.temporalExtent.fromDateToDate\n        </p>\n        <p\n          *ngIf=\"temporalExtent.start && !temporalExtent.end\"\n          translate\n          [translateParams]=\"{ start: temporalExtent.start }\"\n        >\n          record.metadata.temporalExtent.sinceDate\n        </p>\n        <p\n          *ngIf=\"!temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{ end: temporalExtent.end }\"\n        >\n          record.metadata.temporalExtent.untilDate\n        </p>\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'record.metadata.technical' | translate\"\n>\n  <div class=\"flex flex-col gap-4 mr-4 py-5 rounded text-gray-700\">\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.landingPage\">\n      <p class=\"text-sm\" translate>record.metadata.sheet</p>\n      <p class=\"text-primary font-medium\" translate>\n        <a [href]=\"metadata.landingPage\" target=\"_blank\">\n          <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n        </a>\n      </p>\n    </div>\n    <div *ngIf=\"metadata.ownerOrganization\">\n      <p class=\"text-sm\" translate>record.metadata.owner</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.ownerOrganization.name }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.uniqueIdentifier\">\n      <p class=\"text-sm\" translate>record.metadata.uniqueId</p>\n      <div class=\"flex flex-row content-align items-end gap-1\">\n        <gn-ui-copy-text-button\n          [text]=\"metadata.uniqueIdentifier\"\n          [tooltipText]=\"'tooltip.id.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <p class=\"text-primary font-medium\">\n          {{ metadata.uniqueIdentifier }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"metadata.topics?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          class=\"inline-block mr-2 mb-2 lowercase\"\n          *ngFor=\"let topic of metadata.topics\"\n          >{{ topic }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button mat-icon{transform:scale(.8)}\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: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "collapsed"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "component", type: MaxLinesComponent, selector: "gn-ui-max-lines", inputs: ["maxLines"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MetadataInfoComponent, selector: "gn-ui-metadata-info", inputs: { metadata: "metadata", incomplete: "incomplete" }, outputs: { keyword: "keyword" }, ngImport: i0, template: "<div class=\"mb-6 md-description sm:mb-4 sm:pr-16\">\n  <gn-ui-content-ghost ghostClass=\"h-32\" [showContent]=\"fieldReady('abstract')\">\n    <gn-ui-max-lines [maxLines]=\"6\" *ngIf=\"metadata.abstract\">\n      <div>\n        <gn-ui-markdown-parser\n          [textContent]=\"metadata.abstract\"\n        ></gn-ui-markdown-parser>\n      </div>\n    </gn-ui-max-lines>\n    <div *ngIf=\"metadata.keywords?.length\">\n      <p class=\"mt-6 mb-3 font-medium text-primary text-sm\" translate>\n        record.metadata.keywords\n      </p>\n      <div class=\"sm:pb-4 flex flex-wrap gap-2\">\n        <gn-ui-badge\n          class=\"inline-block lowercase\"\n          (click)=\"onKeywordClick(keyword)\"\n          [clickable]=\"true\"\n          *ngFor=\"let keyword of metadata.keywords\"\n          >{{ keyword.label }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </gn-ui-content-ghost>\n</div>\n\n<gn-ui-expandable-panel [title]=\"'record.metadata.usage' | translate\">\n  <div class=\"flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900\">\n    <ng-container *ngFor=\"let license of licenses\">\n      <div *ngIf=\"license.url; else noUrl\" class=\"text-primary\">\n        <a\n          [href]=\"license.url\"\n          target=\"_blank\"\n          class=\"cursor-pointer hover:underline transition-all\"\n        >\n          {{ license.text }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <ng-template #noUrl>\n        <div class=\"text-primary\" gnUiLinkify>\n          {{ license.text }}\n        </div>\n      </ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"legalConstraints.length\">\n      <gn-ui-markdown-parser\n        *ngFor=\"let constraint of legalConstraints\"\n        [textContent]=\"constraint\"\n      >\n      </gn-ui-markdown-parser>\n    </ng-container>\n    <ng-container *ngIf=\"otherConstraints.length\">\n      <div gnUiLinkify *ngFor=\"let constraint of otherConstraints\">\n        <h5 translate class=\"font-medium text-black text-sm mb-[2px] mt-[16px]\">\n          record.metadata.otherConstraints\n        </h5>\n        <gn-ui-markdown-parser [textContent]=\"constraint\">\n        </gn-ui-markdown-parser>\n      </div>\n    </ng-container>\n\n    <span class=\"noUsage\" *ngIf=\"!hasUsage\">\n      {{ 'record.metadata.noUsage' | translate }}\n    </span>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"\n    metadata.lineage ||\n    metadata.recordUpdated ||\n    metadata.updateFrequency ||\n    metadata.status\n  \"\n  [title]=\"'record.metadata.details' | translate\"\n>\n  <div *ngIf=\"metadata.lineage\" class=\"text-gray-900 flex flex-col mt-4 gap-2\">\n    <p class=\"whitespace-pre-line break-words text-gray-900\" gnUiLinkify>\n      {{ metadata.lineage }}\n    </p>\n  </div>\n  <div class=\"flex flex-row gap-6 mt-5 mb-8\" *ngIf=\"resourceContact\">\n    <div\n      *ngIf=\"resourceContact.organization?.logoUrl?.href\"\n      class=\"flex items-center justify-center border-solid border border-gray-300 rounded-md bg-white h-32 overflow-hidden\"\n    >\n      <gn-ui-thumbnail\n        class=\"relative h-full w-full\"\n        [thumbnailUrl]=\"resourceContact.organization.logoUrl.href\"\n        fit=\"contain\"\n      ></gn-ui-thumbnail>\n    </div>\n    <div class=\"flex flex-col gap-1\">\n      <p class=\"text-sm font-medium\" translate>record.metadata.producer</p>\n      <div\n        class=\"text-primary font-title text-21 mr-2 cursor-pointer hover:underline\"\n        data-cy=\"organization-name\"\n      >\n        {{ resourceContact.organization?.name }}\n      </div>\n      <div *ngIf=\"resourceContact.organization?.website\">\n        <a\n          [href]=\"resourceContact.organization.website\"\n          target=\"_blank\"\n          class=\"contact-website text-primary text-sm cursor-pointer hover:underline transition-all\"\n          >{{ resourceContact.organization.website }}\n          <mat-icon\n            class=\"material-symbols-outlined !w-[12px] !h-[12px] !text-[12px] opacity-75 shrink-0\"\n            >open_in_new</mat-icon\n          >\n        </a>\n      </div>\n      <div class=\"mt-4\" *ngIf=\"resourceContact.email\">\n        <div class=\"flex\">\n          <mat-icon\n            class=\"material-symbols-outlined !w-5 !h-5 !text-[20px] opacity-75 shrink-0\"\n          >\n            mail_outline</mat-icon\n          >\n          <a\n            *ngIf=\"resourceContact.email\"\n            [href]=\"'mailto:' + resourceContact.email\"\n            class=\"text-sm hover:underline ml-2\"\n            target=\"_blank\"\n            data-cy=\"contact-email\"\n            >{{ resourceContact?.email }}</a\n          >\n        </div>\n      </div>\n    </div>\n  </div>\n  <div\n    class=\"py-6 px-6 rounded bg-gray-100 grid grid-cols-2 gap-y-6 gap-x-[20px] text-gray-700\"\n  >\n    <div *ngIf=\"metadata.recordCreated\">\n      <p class=\"text-sm\" translate>record.metadata.creation</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordCreated.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.recordPublished\">\n      <p class=\"text-sm\" translate>record.metadata.publication</p>\n      <p class=\"text-primary font-medium mt-1\">\n        {{ metadata.recordPublished.toLocaleDateString() }}\n      </p>\n    </div>\n    <div *ngIf=\"updateFrequency\">\n      <p class=\"text-sm\" translate>record.metadata.updateFrequency</p>\n      <p\n        class=\"text-primary font-medium mt-1 updateFrequency\"\n        translate\n        [translateParams]=\"{ count: updatedTimes }\"\n      >\n        {{ updateFrequency }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.languages\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.languages</p>\n      <div class=\"flex flex-row gap-1 flex-wrap\">\n        <p\n          class=\"text-primary font-medium\"\n          translate\n          *ngFor=\"let language of metadata.languages\"\n        >\n          language.{{ language }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"temporalExtent\">\n      <p class=\"text-sm\" translate>record.metadata.temporalExtent</p>\n      <div class=\"flex flex-row gap-1 mb-1 text-primary font-medium\">\n        <p\n          *ngIf=\"temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{\n            start: temporalExtent.start,\n            end: temporalExtent.end\n          }\"\n        >\n          record.metadata.temporalExtent.fromDateToDate\n        </p>\n        <p\n          *ngIf=\"temporalExtent.start && !temporalExtent.end\"\n          translate\n          [translateParams]=\"{ start: temporalExtent.start }\"\n        >\n          record.metadata.temporalExtent.sinceDate\n        </p>\n        <p\n          *ngIf=\"!temporalExtent.start && temporalExtent.end\"\n          translate\n          [translateParams]=\"{ end: temporalExtent.end }\"\n        >\n          record.metadata.temporalExtent.untilDate\n        </p>\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n<gn-ui-expandable-panel\n  *ngIf=\"metadata.landingPage\"\n  [title]=\"'record.metadata.technical' | translate\"\n>\n  <div class=\"flex flex-col gap-4 mr-4 py-5 rounded text-gray-700\">\n    <div *ngIf=\"metadata.recordUpdated\">\n      <p class=\"text-sm\" translate>record.metadata.updatedOn</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.recordUpdated && metadata.recordUpdated.toLocaleString() }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.landingPage\">\n      <p class=\"text-sm\" translate>record.metadata.sheet</p>\n      <p class=\"text-primary font-medium\" translate>\n        <a [href]=\"metadata.landingPage\" target=\"_blank\">\n          <span class=\"break-all\" gnUiLinkify>{{ metadata.landingPage }}</span>\n        </a>\n      </p>\n    </div>\n    <div *ngIf=\"metadata.ownerOrganization\">\n      <p class=\"text-sm\" translate>record.metadata.owner</p>\n      <p class=\"text-primary font-medium\">\n        {{ metadata.ownerOrganization.name }}\n      </p>\n    </div>\n    <div *ngIf=\"metadata.uniqueIdentifier\">\n      <p class=\"text-sm\" translate>record.metadata.uniqueId</p>\n      <div class=\"flex flex-row content-align items-end gap-1\">\n        <gn-ui-copy-text-button\n          [text]=\"metadata.uniqueIdentifier\"\n          [tooltipText]=\"'tooltip.id.copy' | translate\"\n          [displayText]=\"false\"\n        ></gn-ui-copy-text-button>\n        <p class=\"text-primary font-medium\">\n          {{ metadata.uniqueIdentifier }}\n        </p>\n      </div>\n    </div>\n    <div *ngIf=\"metadata.topics?.length\">\n      <p class=\"text-sm mb-1\" translate>record.metadata.topics</p>\n      <div class=\"sm:pb-4 sm:pr-16\">\n        <gn-ui-badge\n          class=\"inline-block mr-2 mb-2 lowercase\"\n          *ngFor=\"let topic of metadata.topics\"\n          >{{ topic }}</gn-ui-badge\n        >\n      </div>\n    </div>\n  </div>\n</gn-ui-expandable-panel>\n", styles: [".md-description ::ng-deep a{@apply underline text-blue-600 hover:text-blue-800;}.info-grid>:nth-last-child(n+3){padding-bottom:10px;@apply border-b border-gray-300;}:host ::ng-deep gn-ui-copy-text-button button mat-icon{transform:scale(.8)}\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: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandablePanelComponent, selector: "gn-ui-expandable-panel", inputs: ["title", "collapsed"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: CopyTextButtonComponent, selector: "gn-ui-copy-text-button", inputs: ["text", "tooltipText", "displayText", "rows"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "component", type: MarkdownParserComponent, selector: "gn-ui-markdown-parser", inputs: ["textContent"] }, { kind: "component", type: ThumbnailComponent, selector: "gn-ui-thumbnail", inputs: ["thumbnailUrl", "fit"], outputs: ["placeholderShown"] }, { kind: "component", type: ContentGhostComponent, selector: "gn-ui-content-ghost", inputs: ["showContent", "ghostClass"] }, { kind: "directive", type: GnUiLinkifyDirective, selector: "[gnUiLinkify]" }, { kind: "component", type: MaxLinesComponent, selector: "gn-ui-max-lines", inputs: ["maxLines"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MetadataInfoComponent, decorators: [{
             type: Component,
@@ -27425,7 +27545,7 @@ class PaginationComponent {
         this.setPage(this.currentPage - 1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PaginationComponent, selector: "gn-ui-pagination", inputs: { currentPage: "currentPage", nPages: "nPages", hideButton: "hideButton" }, outputs: { newCurrentPageEvent: "newCurrentPageEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"sm:absolute sm:inset-0\" *ngIf=\"!hideButton\">\n    <gn-ui-button\n      (buttonClick)=\"nextPage()\"\n      type=\"secondary\"\n      [disabled]=\"currentPage === nPages\"\n      extraClass=\"lg:m-auto !p-[22px]\"\n    >\n      <span class=\"uppercase font-medium tracking-widest\" translate\n        >pagination.nextPage</span\n      >\n    </gn-ui-button>\n  </div>\n  <div\n    class=\"relative pointer-events-none flex flex-row justify-start sm:justify-end\"\n  >\n    <div class=\"pointer-events-auto flex flex-row items-center py-[13px]\">\n      <span class=\"mr-3 capitalize text-sm text-gray-900\" translate\n        >pagination.page</span\n      >\n      <input\n        type=\"number\"\n        [ngModel]=\"currentPage\"\n        [min]=\"1\"\n        [max]=\"nPages\"\n        (ngModelChange)=\"setPage($event)\"\n        class=\"border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center\"\n      />\n      <span class=\"mr-3 text-sm text-gray-900\"\n        ><span translate>pagination.pageOf</span> {{ nPages }}</span\n      >\n      <gn-ui-button\n        (buttonClick)=\"previousPage()\"\n        id=\"navigate_previous\"\n        class=\"mr-2\"\n        [disabled]=\"currentPage === 1\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"prev-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_before</mat-icon>\n      </gn-ui-button>\n      <gn-ui-button\n        (buttonClick)=\"nextPage()\"\n        id=\"navigate_next\"\n        [disabled]=\"currentPage === nPages\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"next-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_next</mat-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</div>\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"] }, { 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: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PaginationComponent, selector: "gn-ui-pagination", inputs: { currentPage: "currentPage", nPages: "nPages", hideButton: "hideButton" }, outputs: { newCurrentPageEvent: "newCurrentPageEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"relative\">\n  <div class=\"sm:absolute sm:inset-0\" *ngIf=\"!hideButton\">\n    <gn-ui-button\n      (buttonClick)=\"nextPage()\"\n      type=\"secondary\"\n      [disabled]=\"currentPage === nPages\"\n      extraClass=\"lg:m-auto !p-[22px]\"\n    >\n      <span class=\"uppercase font-medium tracking-widest\" translate\n        >pagination.nextPage</span\n      >\n    </gn-ui-button>\n  </div>\n  <div\n    class=\"relative pointer-events-none flex flex-row justify-start sm:justify-end\"\n  >\n    <div class=\"pointer-events-auto flex flex-row items-center py-[13px]\">\n      <span class=\"mr-3 capitalize text-sm text-gray-900\" translate\n        >pagination.page</span\n      >\n      <input\n        type=\"number\"\n        [ngModel]=\"currentPage\"\n        [min]=\"1\"\n        [max]=\"nPages\"\n        (ngModelChange)=\"setPage($event)\"\n        class=\"border border-gray-300 rounded w-[54px] h-[34px] pl-[12px] mr-3 text-center\"\n      />\n      <span class=\"mr-3 text-sm text-gray-900\"\n        ><span translate>pagination.pageOf</span> {{ nPages }}</span\n      >\n      <gn-ui-button\n        (buttonClick)=\"previousPage()\"\n        id=\"navigate_previous\"\n        class=\"mr-2\"\n        [disabled]=\"currentPage === 1\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"prev-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_before</mat-icon>\n      </gn-ui-button>\n      <gn-ui-button\n        (buttonClick)=\"nextPage()\"\n        id=\"navigate_next\"\n        [disabled]=\"currentPage === nPages\"\n        [type]=\"'light'\"\n        extraClass=\"!px-[3px]\"\n        data-cy=\"next-page\"\n      >\n        <mat-icon class=\"material-symbols-outlined\">navigate_next</mat-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</div>\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"] }, { 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: "directive", type: i2$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$2.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.2.12", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
@@ -27553,7 +27673,7 @@ class RecordApiFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RecordApiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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", "disabled"], 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$3.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", "disabled"], 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.2.12", ngImport: i0, type: RecordApiFormComponent, decorators: [{
             type: Component,
@@ -27564,7 +27684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class RelatedRecordCardComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RelatedRecordCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$3.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.2.12", ngImport: i0, type: RelatedRecordCardComponent, decorators: [{
             type: Component,
@@ -27737,7 +27857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class FormFieldWrapperComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldWrapperComponent, decorators: [{
             type: Component,
@@ -27993,7 +28113,7 @@ class UserPreviewComponent {
         return (this.user.name + ' ' + this.user.surname).trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$3.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.2.12", ngImport: i0, type: UserPreviewComponent, decorators: [{
             type: Component,
@@ -28347,6 +28467,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class ResultsTableComponent {
+    constructor() {
+        this.records = [];
+        this.selectedRecordsIdentifiers = [];
+        this.sortOrder = null;
+        this.recordHasDraft = () => false;
+        // emits the column (field) as well as the order
+        this.sortByChange = new EventEmitter();
+        this.recordClick = new EventEmitter();
+        this.recordsSelectedChange = new EventEmitter();
+    }
+    dateToString(date) {
+        return date?.toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            timeZone: 'UTC',
+        });
+    }
+    getStatus(isPublishedToAll) {
+        return isPublishedToAll ? 'published' : 'not published';
+    }
+    getRecordFormats(record) {
+        if (record.kind === 'service' || !('distributions' in record)) {
+            return [];
+        }
+        const formats = Array.from(new Set(record.distributions.map((distribution) => getFileFormat(distribution)))).filter((format) => !!format);
+        formats.sort((a, b) => getFormatPriority(b) - getFormatPriority(a));
+        return formats;
+    }
+    formatUserInfo(userInfo) {
+        const infos = (typeof userInfo === 'string' ? userInfo : '').split('|');
+        if (infos && infos.length === 4) {
+            return `${infos[2]} ${infos[1]}`;
+        }
+        return undefined;
+    }
+    getBadgeColor(format) {
+        return getBadgeColor(format);
+    }
+    handleRecordClick(item) {
+        this.recordClick.emit(item);
+    }
+    setSortBy(col, order) {
+        this.sortByChange.emit([col, order]);
+    }
+    isSortedBy(col) {
+        if (!this.sortOrder) {
+            return null;
+        }
+        const sortArray = Array.isArray(this.sortOrder[0])
+            ? this.sortOrder
+            : [this.sortOrder];
+        for (const sort of sortArray) {
+            if (sort[1] === col) {
+                return sort[0];
+            }
+        }
+        return null;
+    }
+    isChecked(record) {
+        return this.selectedRecordsIdentifiers.includes(record.uniqueIdentifier);
+    }
+    handleRecordSelectedChange(selected, record) {
+        this.recordsSelectedChange.emit([[record], selected]);
+    }
+    async toggleSelectAll() {
+        this.recordsSelectedChange.emit([this.records, !this.isAllSelected()]);
+    }
+    isAllSelected() {
+        return this.records.every((record) => this.selectedRecordsIdentifiers.includes(record.uniqueIdentifier));
+    }
+    isSomeSelected() {
+        const allSelected = this.records.every((record) => this.selectedRecordsIdentifiers.includes(record.uniqueIdentifier));
+        const someSelected = this.records.some((record) => this.selectedRecordsIdentifiers.includes(record.uniqueIdentifier));
+        return !allSelected && someSelected;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResultsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResultsTableComponent, isStandalone: true, selector: "gn-ui-results-table", inputs: { records: "records", selectedRecordsIdentifiers: "selectedRecordsIdentifiers", sortOrder: "sortOrder", recordHasDraft: "recordHasDraft" }, outputs: { sortByChange: "sortByChange", recordClick: "recordClick", recordsSelectedChange: "recordsSelectedChange" }, ngImport: i0, template: "<gn-ui-interactive-table\n  [items]=\"records\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <gn-ui-checkbox\n        [checked]=\"isAllSelected()\"\n        [indeterminate]=\"isSomeSelected()\"\n        (changed)=\"toggleSelectAll()\"\n        type=\"default\"\n        class=\"-m-2 mr-3\"\n      >\n      </gn-ui-checkbox>\n    </ng-template>\n    <ng-template #cell let-item>\n      <gn-ui-checkbox\n        [checked]=\"isChecked(item)\"\n        (changed)=\"handleRecordSelectedChange($event, item)\"\n        class=\"-m-2\"\n        type=\"default\"\n      ></gn-ui-checkbox>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword')\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex flex-row items-center gap-2 max-w-full\">\n        <span class=\"overflow-hidden text-ellipsis\">{{ item.title }}</span>\n        <gn-ui-badge\n          *ngIf=\"recordHasDraft(item)\"\n          [style.--gn-ui-badge-padding]=\"'0.4em 0.6em'\"\n          [style.--gn-ui-badge-text-color]=\"'#3d2006'\"\n          [style.--gn-ui-badge-background-color]=\"'#ffbc7b'\"\n          [style.--gn-ui-badge-rounded]=\"'4px'\"\n        >\n          <span translate>dashboard.records.hasDraft</span>\n        </gn-ui-badge>\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"shrink-0\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner')\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.author</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <mat-icon class=\"material-symbols-outlined\">person</mat-icon>\n      <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.status }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate')\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.updatedOn</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ dateToString(item.recordUpdated) }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: CheckboxComponent, selector: "gn-ui-checkbox", inputs: ["type", "checked", "indeterminate"], outputs: ["changed"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "component", type: InteractiveTableComponent, selector: "gn-ui-interactive-table", inputs: ["items"], outputs: ["itemClick"] }, { kind: "component", type: InteractiveTableColumnComponent, selector: "gn-ui-interactive-table-column", inputs: ["grow", "sortable", "activeSort"], outputs: ["sortChange"] }, { 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: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResultsTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-results-table', standalone: true, imports: [
+                        CommonModule,
+                        UiInputsModule,
+                        InteractiveTableComponent,
+                        InteractiveTableColumnComponent,
+                        MatIconModule,
+                        TranslateModule,
+                        BadgeComponent,
+                    ], template: "<gn-ui-interactive-table\n  [items]=\"records\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <gn-ui-checkbox\n        [checked]=\"isAllSelected()\"\n        [indeterminate]=\"isSomeSelected()\"\n        (changed)=\"toggleSelectAll()\"\n        type=\"default\"\n        class=\"-m-2 mr-3\"\n      >\n      </gn-ui-checkbox>\n    </ng-template>\n    <ng-template #cell let-item>\n      <gn-ui-checkbox\n        [checked]=\"isChecked(item)\"\n        (changed)=\"handleRecordSelectedChange($event, item)\"\n        class=\"-m-2\"\n        type=\"default\"\n      ></gn-ui-checkbox>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword')\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex flex-row items-center gap-2 max-w-full\">\n        <span class=\"overflow-hidden text-ellipsis\">{{ item.title }}</span>\n        <gn-ui-badge\n          *ngIf=\"recordHasDraft(item)\"\n          [style.--gn-ui-badge-padding]=\"'0.4em 0.6em'\"\n          [style.--gn-ui-badge-text-color]=\"'#3d2006'\"\n          [style.--gn-ui-badge-background-color]=\"'#ffbc7b'\"\n          [style.--gn-ui-badge-rounded]=\"'4px'\"\n        >\n          <span translate>dashboard.records.hasDraft</span>\n        </gn-ui-badge>\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"shrink-0\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner')\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.author</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <mat-icon class=\"material-symbols-outlined\">person</mat-icon>\n      <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.status }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate')\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.updatedOn</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ dateToString(item.recordUpdated) }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n" }]
+        }], propDecorators: { records: [{
+                type: Input
+            }], selectedRecordsIdentifiers: [{
+                type: Input
+            }], sortOrder: [{
+                type: Input
+            }], recordHasDraft: [{
+                type: Input
+            }], sortByChange: [{
+                type: Output
+            }], recordClick: [{
+                type: Output
+            }], recordsSelectedChange: [{
+                type: Output
+            }] } });
+
 const ADD_SEARCH = '[Search] Add search instance';
 const SET_FILTERS = '[Search] Set Filters';
 const SET_CONFIG_FILTERS = '[Search] Set config filters';
@@ -29324,7 +29551,7 @@ class SearchService {
     }
     updateFilters(params) {
         this.facade.searchFilters$
-            .pipe(first(), map$1((filters) => ({ ...filters, ...params })))
+            .pipe(first$1(), map$1((filters) => ({ ...filters, ...params })))
             .subscribe((filters) => this.facade.setFilters(filters));
     }
     setFilters(params) {
@@ -29357,7 +29584,7 @@ class FuzzySearchComponent {
         this.autoFocus = false;
         this.itemSelected = new EventEmitter();
         this.inputSubmitted = new EventEmitter();
-        this.displayWithFn = (record) => record?.title;
+        this.displayWithFn = (record) => record.title;
         this.autoCompleteAction = (query) => this.recordsRepository
             .fuzzySearch(query)
             .pipe(map$1((result) => result.records));
@@ -29397,7 +29624,7 @@ class FuzzySearchComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FuzzySearchComponent, deps: [{ token: SearchFacade }, { token: SearchService }, { token: RecordsRepositoryInterface }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FuzzySearchComponent, selector: "gn-ui-fuzzy-search", inputs: { autoFocus: "autoFocus" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: AutocompleteComponent, descendants: true }], ngImport: i0, template: "<gn-ui-autocomplete\n  [placeholder]=\"'search.field.any.placeholder' | translate\"\n  [displayWithFn]=\"displayWithFn\"\n  [action]=\"autoCompleteAction\"\n  (itemSelected)=\"handleItemSelection($event)\"\n  (inputSubmitted)=\"handleInputSubmission($event)\"\n  (inputCleared)=\"handleInputCleared()\"\n  [value]=\"searchInputValue$ | async\"\n  [clearOnSelection]=\"true\"\n  [autoFocus]=\"autoFocus\"\n></gn-ui-autocomplete>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "action", "value", "clearOnSelection", "autoFocus", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared"] }, { 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.2.12", type: FuzzySearchComponent, selector: "gn-ui-fuzzy-search", inputs: { autoFocus: "autoFocus" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: AutocompleteComponent, descendants: true }], ngImport: i0, template: "<gn-ui-autocomplete\n  [placeholder]=\"'search.field.any.placeholder' | translate\"\n  [displayWithFn]=\"displayWithFn\"\n  [action]=\"autoCompleteAction\"\n  (itemSelected)=\"handleItemSelection($event)\"\n  (inputSubmitted)=\"handleInputSubmission($event)\"\n  (inputCleared)=\"handleInputCleared()\"\n  [value]=\"searchInputValue$ | async\"\n  [clearOnSelection]=\"true\"\n  [autoFocus]=\"autoFocus\"\n></gn-ui-autocomplete>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "action", "value", "clearOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared"] }, { 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.2.12", ngImport: i0, type: FuzzySearchComponent, decorators: [{
             type: Component,
@@ -30225,7 +30452,8 @@ class FeatureSearchModule {
             UiElementsModule,
             FacetsModule,
             MatIconModule,
-            UiWidgetsModule], exports: [SortByComponent,
+            UiWidgetsModule,
+            AutocompleteComponent], exports: [SortByComponent,
             ResultsLayoutComponent,
             FuzzySearchComponent,
             RecordsMetricsComponent,
@@ -30253,7 +30481,8 @@ class FeatureSearchModule {
             UiElementsModule,
             FacetsModule,
             MatIconModule,
-            UiWidgetsModule, FacetsModule] }); }
+            UiWidgetsModule,
+            AutocompleteComponent, FacetsModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeatureSearchModule, decorators: [{
             type: NgModule,
@@ -30284,6 +30513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FacetsModule,
                         MatIconModule,
                         UiWidgetsModule,
+                        AutocompleteComponent,
                     ],
                     exports: [
                         SortByComponent,
@@ -30306,7 +30536,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class ResultsTableComponent {
+class ResultsTableContainerComponent {
     constructor(searchFacade, searchService, selectionService, recordsRepository) {
         this.searchFacade = searchFacade;
         this.searchService = searchService;
@@ -30315,106 +30545,29 @@ class ResultsTableComponent {
         this.recordClick = new EventEmitter();
         this.records$ = this.searchFacade.results$;
         this.selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$;
-    }
-    dateToString(date) {
-        return date?.toLocaleDateString(undefined, {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-            timeZone: 'UTC',
-        });
-    }
-    getStatus(isPublishedToAll) {
-        return isPublishedToAll ? 'published' : 'not published';
-    }
-    getRecordFormats(record) {
-        if (record.kind === 'service' || !('distributions' in record)) {
-            return [];
-        }
-        const formats = Array.from(new Set(record.distributions.map((distribution) => getFileFormat(distribution)))).filter((format) => !!format);
-        formats.sort((a, b) => getFormatPriority(b) - getFormatPriority(a));
-        return formats;
-    }
-    formatUserInfo(userInfo) {
-        const infos = (typeof userInfo === 'string' ? userInfo : '').split('|');
-        if (infos && infos.length === 4) {
-            return `${infos[2]} ${infos[1]}`;
-        }
-        return undefined;
-    }
-    getBadgeColor(format) {
-        return getBadgeColor(format);
+        this.sortBy$ = this.searchFacade.sortBy$;
+        this.hasDraft = (record) => this.recordsRepository.recordHasDraft(record.uniqueIdentifier);
     }
     handleRecordClick(item) {
         this.recordClick.emit(item);
     }
-    setSortBy(col, order) {
+    handleSortByChange(col, order) {
         this.searchService.setSortBy([order, col]);
     }
-    isSortedBy(col) {
-        return this.searchFacade.sortBy$.pipe(take(1), map$1((sortOrder) => {
-            const sortArray = Array.isArray(sortOrder[0])
-                ? sortOrder
-                : [sortOrder];
-            for (const sort of sortArray) {
-                if (sort[1] === col) {
-                    return sort[0];
-                }
-            }
-            return null;
-        }));
-    }
-    isChecked(record) {
-        return this.selectedRecords$.pipe(take(1), map$1((selectedRecords) => {
-            return selectedRecords.includes(record.uniqueIdentifier);
-        }));
-    }
-    handleRecordSelectedChange(selected, record) {
+    handleRecordsSelectedChange(records, selected) {
         if (!selected) {
-            this.selectionService.deselectRecords([record]);
-        }
-        else {
-            this.selectionService.selectRecords([record]);
-        }
-    }
-    async toggleSelectAll() {
-        const records = await firstValueFrom(this.records$);
-        if (await firstValueFrom(this.isAllSelected())) {
             this.selectionService.deselectRecords(records);
         }
         else {
             this.selectionService.selectRecords(records);
         }
     }
-    isAllSelected() {
-        return combineLatest([this.records$, this.selectedRecords$]).pipe(take(1), map$1(([records, selectedRecords]) => {
-            return records.every((record) => selectedRecords.includes(record.uniqueIdentifier));
-        }));
-    }
-    isSomeSelected() {
-        return combineLatest([this.records$, this.selectedRecords$]).pipe(take(1), map$1(([records, selectedRecords]) => {
-            const allSelected = records.every((record) => selectedRecords.includes(record.uniqueIdentifier));
-            const someSelected = records.some((record) => selectedRecords.includes(record.uniqueIdentifier));
-            return !allSelected && someSelected;
-        }));
-    }
-    hasDraft(record) {
-        return this.recordsRepository.recordHasDraft(record.uniqueIdentifier);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResultsTableComponent, deps: [{ token: SearchFacade }, { token: SearchService }, { token: SelectionService }, { token: RecordsRepositoryInterface }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResultsTableComponent, isStandalone: true, selector: "gn-ui-results-table", outputs: { recordClick: "recordClick" }, ngImport: i0, template: "<gn-ui-interactive-table\n  [items]=\"records$ | async\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <gn-ui-checkbox\n        [checked]=\"isAllSelected() | async\"\n        [indeterminate]=\"isSomeSelected() | async\"\n        (changed)=\"toggleSelectAll()\"\n        type=\"default\"\n        class=\"-m-2 mr-3\"\n      >\n      </gn-ui-checkbox>\n    </ng-template>\n    <ng-template #cell let-item>\n      <gn-ui-checkbox\n        [checked]=\"isChecked(item) | async\"\n        (changed)=\"handleRecordSelectedChange($event, item)\"\n        class=\"-m-2\"\n        type=\"default\"\n      ></gn-ui-checkbox>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword') | async\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex flex-row items-center gap-2 max-w-full\">\n        <span class=\"overflow-hidden text-ellipsis\">{{ item.title }}</span>\n        <gn-ui-badge\n          *ngIf=\"hasDraft(item)\"\n          [style.--gn-ui-badge-padding]=\"'0.4em 0.6em'\"\n          [style.--gn-ui-badge-text-color]=\"'#3d2006'\"\n          [style.--gn-ui-badge-background-color]=\"'#ffbc7b'\"\n          [style.--gn-ui-badge-rounded]=\"'4px'\"\n        >\n          <span translate>dashboard.records.hasDraft</span>\n        </gn-ui-badge>\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"shrink-0\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner') | async\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.author</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <mat-icon class=\"material-symbols-outlined\">person</mat-icon>\n      <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.status }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate') | async\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.updatedOn</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ dateToString(item.recordUpdated) }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: CheckboxComponent, selector: "gn-ui-checkbox", inputs: ["type", "checked", "indeterminate"], outputs: ["changed"] }, { kind: "component", type: InteractiveTableComponent, selector: "gn-ui-interactive-table", inputs: ["items"], outputs: ["itemClick"] }, { kind: "component", type: InteractiveTableColumnComponent, selector: "gn-ui-interactive-table-column", inputs: ["grow", "sortable", "activeSort"], outputs: ["sortChange"] }, { 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: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResultsTableContainerComponent, deps: [{ token: SearchFacade }, { token: SearchService }, { token: SelectionService }, { token: RecordsRepositoryInterface }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResultsTableContainerComponent, isStandalone: true, selector: "gn-ui-results-table-container", outputs: { recordClick: "recordClick" }, ngImport: i0, template: "<gn-ui-results-table\n  [records]=\"records$ | async\"\n  [recordHasDraft]=\"hasDraft\"\n  [selectedRecordsIdentifiers]=\"selectedRecords$ | async\"\n  [sortOrder]=\"sortBy$ | async\"\n  (recordClick)=\"handleRecordClick($event)\"\n  (recordsSelectedChange)=\"handleRecordsSelectedChange($event[0], $event[1])\"\n  (sortByChange)=\"handleSortByChange($event[0], $event[1])\"\n></gn-ui-results-table>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "component", type: ResultsTableComponent, selector: "gn-ui-results-table", inputs: ["records", "selectedRecordsIdentifiers", "sortOrder", "recordHasDraft"], outputs: ["sortByChange", "recordClick", "recordsSelectedChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResultsTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResultsTableContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-results-table', standalone: true, imports: [
-                        CommonModule,
-                        UiInputsModule,
-                        InteractiveTableComponent,
-                        InteractiveTableColumnComponent,
-                        MatIconModule,
-                        TranslateModule,
-                        BadgeComponent,
-                    ], template: "<gn-ui-interactive-table\n  [items]=\"records$ | async\"\n  (itemClick)=\"handleRecordClick($event)\"\n>\n  <!-- SELECTED COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <gn-ui-checkbox\n        [checked]=\"isAllSelected() | async\"\n        [indeterminate]=\"isSomeSelected() | async\"\n        (changed)=\"toggleSelectAll()\"\n        type=\"default\"\n        class=\"-m-2 mr-3\"\n      >\n      </gn-ui-checkbox>\n    </ng-template>\n    <ng-template #cell let-item>\n      <gn-ui-checkbox\n        [checked]=\"isChecked(item) | async\"\n        (changed)=\"handleRecordSelectedChange($event, item)\"\n        class=\"-m-2\"\n        type=\"default\"\n      ></gn-ui-checkbox>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- TITLE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('resourceTitleObject.default.keyword') | async\"\n    (sortChange)=\"setSortBy('resourceTitleObject.default.keyword', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.title</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div class=\"flex flex-row items-center gap-2 max-w-full\">\n        <span class=\"overflow-hidden text-ellipsis\">{{ item.title }}</span>\n        <gn-ui-badge\n          *ngIf=\"hasDraft(item)\"\n          [style.--gn-ui-badge-padding]=\"'0.4em 0.6em'\"\n          [style.--gn-ui-badge-text-color]=\"'#3d2006'\"\n          [style.--gn-ui-badge-background-color]=\"'#ffbc7b'\"\n          [style.--gn-ui-badge-rounded]=\"'4px'\"\n        >\n          <span translate>dashboard.records.hasDraft</span>\n        </gn-ui-badge>\n      </div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- FORMATS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.formats</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <div\n        class=\"flex justify-start items-center gap-2\"\n        *ngIf=\"getRecordFormats(item) as formats\"\n        [title]=\"formats.join(', ')\"\n      >\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[0])\"\n          *ngIf=\"formats[0]\"\n        >\n          {{ formats[0] }}\n        </span>\n        <span\n          class=\"badge-btn min-w-[45px] text-sm text-white px-2 shrink-0\"\n          [style.background-color]=\"getBadgeColor(formats[1])\"\n          *ngIf=\"formats[1]\"\n        >\n          {{ formats[1] }}\n        </span>\n        <div class=\"shrink-0\" *ngIf=\"formats.slice(2).length > 0\">\n          <span>+{{ formats.slice(2).length }}</span>\n        </div>\n      </div>\n      <div *ngIf=\"!getRecordFormats(item)\"></div>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- OWNER COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('recordOwner') | async\"\n    (sortChange)=\"setSortBy('recordOwner', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.author</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      <mat-icon class=\"material-symbols-outlined\">person</mat-icon>\n      <span>{{ formatUserInfo(item.extras?.ownerInfo) }}</span>\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- STATUS COLUMN -->\n  <gn-ui-interactive-table-column>\n    <ng-template #header>\n      <span translate>record.metadata.status</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ item.status }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n\n  <!-- UPDATE DATE COLUMN -->\n  <gn-ui-interactive-table-column\n    [sortable]=\"true\"\n    [activeSort]=\"isSortedBy('changeDate') | async\"\n    (sortChange)=\"setSortBy('changeDate', $event)\"\n  >\n    <ng-template #header>\n      <span translate>record.metadata.updatedOn</span>\n    </ng-template>\n    <ng-template #cell let-item>\n      {{ dateToString(item.recordUpdated) }}\n    </ng-template>\n  </gn-ui-interactive-table-column>\n</gn-ui-interactive-table>\n" }]
+            args: [{ selector: 'gn-ui-results-table-container', standalone: true, imports: [CommonModule, ResultsTableComponent], template: "<gn-ui-results-table\n  [records]=\"records$ | async\"\n  [recordHasDraft]=\"hasDraft\"\n  [selectedRecordsIdentifiers]=\"selectedRecords$ | async\"\n  [sortOrder]=\"sortBy$ | async\"\n  (recordClick)=\"handleRecordClick($event)\"\n  (recordsSelectedChange)=\"handleRecordsSelectedChange($event[0], $event[1])\"\n  (sortByChange)=\"handleSortByChange($event[0], $event[1])\"\n></gn-ui-results-table>\n" }]
         }], ctorParameters: function () { return [{ type: SearchFacade }, { type: SearchService }, { type: SelectionService }, { type: RecordsRepositoryInterface }]; }, propDecorators: { recordClick: [{
                 type: Output
             }] } });
@@ -30716,7 +30869,7 @@ class LayersPanelComponent {
         this.mapFacade.addLayer(layer);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LayersPanelComponent, deps: [{ token: MapFacade }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$5.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$5.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.2.12", ngImport: i0, type: LayersPanelComponent, decorators: [{
             type: Component,
@@ -31461,7 +31614,7 @@ class TableComponent {
         return rowIdPrefix + id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$6.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: TableVirtualScrollModule }, { kind: "directive", type: i3$2.TableItemSizeDirective, selector: "cdk-virtual-scroll-viewport[tvsItemSize]", inputs: ["tvsItemSize", "headerEnabled", "headerHeight", "footerEnabled", "footerHeight", "bufferMultiplier"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: i4.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.2.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -32562,7 +32715,7 @@ class TableViewComponent {
         this.loading = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableViewComponent, deps: [{ token: DataService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableViewComponent, selector: "gn-ui-table-view", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\">\n  <div class=\"relative h-full\">\n    <gn-ui-table\n      class=\"overflow-auto grow\"\n      [data]=\"tableData$ | async\"\n      (selected)=\"onTableSelect($event)\"\n    ></gn-ui-table>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'table.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <gn-ui-popup-alert\n      *ngIf=\"error\"\n      type=\"warning\"\n      icon=\"error_outline\"\n      class=\"absolute m-2 inset-0\"\n    >\n      <span translate>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableComponent, selector: "gn-ui-table", inputs: ["data", "activeId"], outputs: ["selected"] }, { kind: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { 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.2.12", type: TableViewComponent, selector: "gn-ui-table-view", inputs: { link: "link" }, ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\">\n  <div class=\"relative h-full\">\n    <gn-ui-table\n      class=\"overflow-auto grow\"\n      [data]=\"tableData$ | async\"\n      (selected)=\"onTableSelect($event)\"\n    ></gn-ui-table>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'table.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <gn-ui-popup-alert\n      *ngIf=\"error\"\n      type=\"warning\"\n      icon=\"error_outline\"\n      class=\"absolute m-2 inset-0\"\n    >\n      <span translate>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableComponent, selector: "gn-ui-table", inputs: ["data", "activeId"], outputs: ["selected"] }, { kind: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { 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.2.12", ngImport: i0, type: TableViewComponent, decorators: [{
             type: Component,
@@ -32724,7 +32877,7 @@ class ChartViewComponent {
         this.changeDetector.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChartViewComponent, deps: [{ token: DataService }, { token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChartViewComponent, selector: "gn-ui-chart-view", inputs: { link: "link", aggregation: "aggregation", xProperty: "xProperty", yProperty: "yProperty", chartType: "chartType" }, outputs: { chartConfig$: "chartConfig$" }, ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\">\n  <div\n    class=\"flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2 justify-between text-[13px]\"\n  >\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"typeChoices\"\n      [extraBtnClass]=\"'secondary min-w-full'\"\n      (selectValue)=\"chartType$.next($event)\"\n      [selected]=\"chartType$.value\"\n      [title]=\"'chart.dropdown.type' | translate\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"xChoices$ | async\"\n      [extraBtnClass]=\"'secondary min-w-full'\"\n      (selectValue)=\"xProperty$.next($event)\"\n      [selected]=\"xProperty$.value\"\n      [title]=\"'chart.dropdown.xProperty' | translate\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      *ngIf=\"!isCountAggregation\"\n      [choices]=\"yChoices$ | async\"\n      (selectValue)=\"yProperty$.next($event)\"\n      [selected]=\"yProperty$.value\"\n      [title]=\"'chart.dropdown.yProperty' | translate\"\n      class=\"select-y-prop\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"aggregationChoices\"\n      class=\"aggregation-choices\"\n      (selectValue)=\"aggregation$.next($event)\"\n      [selected]=\"aggregation$.value\"\n      [title]=\"'chart.dropdown.aggregation' | translate\"\n    ></gn-ui-dropdown-selector>\n  </div>\n  <div\n    class=\"relative h-full mt-2 bg-white border border-gray-300 rounded-lg overflow-hidden\"\n  >\n    <gn-ui-chart\n      [data]=\"chartData$ | async\"\n      [type]=\"chartType$.value\"\n      [labelProperty]=\"labelProperty\"\n      [valueProperty]=\"valueProperty\"\n    ></gn-ui-chart>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'chart.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <gn-ui-popup-alert\n      *ngIf=\"error\"\n      type=\"warning\"\n      icon=\"error_outline\"\n      class=\"absolute m-2 inset-0\"\n    >\n      <span>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "component", type: ChartComponent, selector: "gn-ui-chart", inputs: ["data", "labelProperty", "valueProperty", "secondaryValueProperty", "type"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { 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.2.12", type: ChartViewComponent, selector: "gn-ui-chart-view", inputs: { link: "link", aggregation: "aggregation", xProperty: "xProperty", yProperty: "yProperty", chartType: "chartType" }, outputs: { chartConfig$: "chartConfig$" }, ngImport: i0, template: "<div class=\"w-full h-full flex flex-col\">\n  <div\n    class=\"flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2 justify-between text-[13px]\"\n  >\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"typeChoices\"\n      [extraBtnClass]=\"'secondary min-w-full'\"\n      (selectValue)=\"chartType$.next($event)\"\n      [selected]=\"chartType$.value\"\n      [title]=\"'chart.dropdown.type' | translate\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"xChoices$ | async\"\n      [extraBtnClass]=\"'secondary min-w-full'\"\n      (selectValue)=\"xProperty$.next($event)\"\n      [selected]=\"xProperty$.value\"\n      [title]=\"'chart.dropdown.xProperty' | translate\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      *ngIf=\"!isCountAggregation\"\n      [choices]=\"yChoices$ | async\"\n      (selectValue)=\"yProperty$.next($event)\"\n      [selected]=\"yProperty$.value\"\n      [title]=\"'chart.dropdown.yProperty' | translate\"\n      class=\"select-y-prop\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-dropdown-selector\n      class=\"basis-1/4\"\n      [choices]=\"aggregationChoices\"\n      class=\"aggregation-choices\"\n      (selectValue)=\"aggregation$.next($event)\"\n      [selected]=\"aggregation$.value\"\n      [title]=\"'chart.dropdown.aggregation' | translate\"\n    ></gn-ui-dropdown-selector>\n  </div>\n  <div\n    class=\"relative h-full mt-2 bg-white border border-gray-300 rounded-lg overflow-hidden\"\n  >\n    <gn-ui-chart\n      [data]=\"chartData$ | async\"\n      [type]=\"chartType$.value\"\n      [labelProperty]=\"labelProperty\"\n      [valueProperty]=\"valueProperty\"\n    ></gn-ui-chart>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'chart.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <gn-ui-popup-alert\n      *ngIf=\"error\"\n      type=\"warning\"\n      icon=\"error_outline\"\n      class=\"absolute m-2 inset-0\"\n    >\n      <span>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: ChartComponent, selector: "gn-ui-chart", inputs: ["data", "labelProperty", "valueProperty", "secondaryValueProperty", "type"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { 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.2.12", ngImport: i0, type: ChartViewComponent, decorators: [{
             type: Component,
@@ -32756,7 +32909,8 @@ class FeatureDatavizModule {
             UiWidgetsModule,
             TranslateModule,
             ChartComponent,
-            UiInputsModule], exports: [GeoTableViewComponent,
+            UiInputsModule,
+            PopupAlertComponent], exports: [GeoTableViewComponent,
             FigureContainerComponent,
             TableViewComponent,
             ChartViewComponent] }); }
@@ -32767,7 +32921,8 @@ class FeatureDatavizModule {
             TableComponent,
             UiWidgetsModule,
             TranslateModule,
-            UiInputsModule] }); }
+            UiInputsModule,
+            PopupAlertComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeatureDatavizModule, decorators: [{
             type: NgModule,
@@ -32782,6 +32937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TranslateModule,
                         ChartComponent,
                         UiInputsModule,
+                        PopupAlertComponent,
                     ],
                     declarations: [
                         GeoTableViewComponent,
@@ -32823,9 +32979,7 @@ class MdViewFacade {
         this.downloadLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.DOWNLOAD))));
         this.dataLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.DATA))));
         this.geoDataLinks$ = this.allLinks$.pipe(map$1((links) => links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.GEODATA))));
-        this.geoDataLinksWithGeometry$ = this.allLinks$.pipe(mergeMap((links) => {
-            return from(links);
-        }), mergeMap((link) => {
+        this.geoDataLinksWithGeometry$ = this.allLinks$.pipe(switchMap$1((links) => from(links).pipe(mergeMap((link) => {
             if (this.linkClassifier.hasUsage(link, LinkUsage.GEODATA)) {
                 if (link.type === 'service' &&
                     link.accessServiceProtocol === 'ogcFeatures') {
@@ -32842,12 +32996,7 @@ class MdViewFacade {
             else {
                 return of(null);
             }
-        }), scan((acc, val) => {
-            if (val !== null && !acc.includes(val)) {
-                acc.push(val);
-            }
-            return acc;
-        }, []));
+        }), toArray(), map$1((links) => links.filter((link) => link !== null)))));
         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));
@@ -33114,7 +33263,7 @@ class MapViewComponent {
         this.selectedLinkIndex$.next(link);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MapViewComponent, deps: [{ token: MdViewFacade }, { token: MapManagerService }, { token: MapUtilsService }, { token: DataService }, { token: FeatureInfoService }, { token: i0.ChangeDetectorRef }, { token: MapStyleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MapViewComponent, selector: "gn-ui-map-view", ngImport: i0, template: "<div class=\"w-full h-full flex flex-col p-1\">\n  <div class=\"w-full flex justify-end mb-7 mt-1\">\n    <gn-ui-dropdown-selector\n      class=\"truncate p-1 -mx-1\"\n      extraBtnClass=\"!text-primary font-sans font-medium\"\n      [title]=\"'map.select.layer' | translate\"\n      [choices]=\"dropdownChoices$ | async\"\n      (selectValue)=\"selectLinkToDisplay($event)\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-external-viewer-button\n      class=\"shrink-0 py-1 place-self-end\"\n      [link]=\"selectedLink$ | async\"\n      [mapConfig]=\"mapConfig\"\n    >\n    </gn-ui-external-viewer-button>\n  </div>\n  <div\n    class=\"relative w-full h-full bg-white border border-gray-300 rounded-lg overflow-hidden\"\n  >\n    <gn-ui-map-context\n      [context]=\"mapContext$ | async\"\n      [mapConfig]=\"mapConfig\"\n    ></gn-ui-map-context>\n    <div\n      class=\"top-[1em] right-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56\"\n      [class.hidden]=\"!selection\"\n    >\n      <button\n        (click)=\"resetSelection()\"\n        class=\"rounded bg-primary-opacity-25 text-white absolute right-[0.5em]\"\n      >\n        <mat-icon\n          class=\"material-symbols-outlined align-middle text-sm\"\n          style=\"height: 21px\"\n          >close</mat-icon\n        >\n      </button>\n      <gn-ui-feature-detail [feature]=\"selection\"></gn-ui-feature-detail>\n    </div>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'map.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <gn-ui-popup-alert\n      *ngIf=\"error\"\n      type=\"warning\"\n      icon=\"error_outline\"\n      class=\"absolute m-2 inset-0\"\n    >\n      <span translate>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapContextComponent, selector: "gn-ui-map-context", inputs: ["context", "mapConfig"], outputs: ["featureClicked"] }, { kind: "component", type: FeatureDetailComponent, selector: "gn-ui-feature-detail", inputs: ["feature"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ExternalViewerButtonComponent, selector: "gn-ui-external-viewer-button", inputs: ["link", "mapConfig"] }, { 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.2.12", type: MapViewComponent, selector: "gn-ui-map-view", ngImport: i0, template: "<div class=\"w-full h-full flex flex-col p-1\">\n  <div class=\"w-full flex justify-end mb-7 mt-1\">\n    <gn-ui-dropdown-selector\n      class=\"truncate p-1 -mx-1\"\n      extraBtnClass=\"!text-primary font-sans font-medium\"\n      [title]=\"'map.select.layer' | translate\"\n      [choices]=\"dropdownChoices$ | async\"\n      (selectValue)=\"selectLinkToDisplay($event)\"\n    ></gn-ui-dropdown-selector>\n    <gn-ui-external-viewer-button\n      class=\"shrink-0 py-1 place-self-end\"\n      [link]=\"selectedLink$ | async\"\n      [mapConfig]=\"mapConfig\"\n    >\n    </gn-ui-external-viewer-button>\n  </div>\n  <div\n    class=\"relative w-full h-full bg-white border border-gray-300 rounded-lg overflow-hidden\"\n  >\n    <gn-ui-map-context\n      [context]=\"mapContext$ | async\"\n      [mapConfig]=\"mapConfig\"\n    ></gn-ui-map-context>\n    <div\n      class=\"top-[1em] right-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56\"\n      [class.hidden]=\"!selection\"\n    >\n      <button\n        (click)=\"resetSelection()\"\n        class=\"rounded bg-primary-opacity-25 text-white absolute right-[0.5em]\"\n      >\n        <mat-icon\n          class=\"material-symbols-outlined align-middle text-sm\"\n          style=\"height: 21px\"\n          >close</mat-icon\n        >\n      </button>\n      <gn-ui-feature-detail [feature]=\"selection\"></gn-ui-feature-detail>\n    </div>\n    <gn-ui-loading-mask\n      *ngIf=\"loading\"\n      class=\"absolute inset-0\"\n      [message]=\"'map.loading.data' | translate\"\n    ></gn-ui-loading-mask>\n    <gn-ui-popup-alert\n      *ngIf=\"error\"\n      type=\"warning\"\n      icon=\"error_outline\"\n      class=\"absolute m-2 inset-0\"\n    >\n      <span translate>{{ error }}</span>\n    </gn-ui-popup-alert>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MapContextComponent, selector: "gn-ui-map-context", inputs: ["context", "mapConfig"], outputs: ["featureClicked"] }, { kind: "component", type: FeatureDetailComponent, selector: "gn-ui-feature-detail", inputs: ["feature"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "component", type: ExternalViewerButtonComponent, selector: "gn-ui-external-viewer-button", inputs: ["link", "mapConfig"] }, { 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.2.12", ngImport: i0, type: MapViewComponent, decorators: [{
             type: Component,
@@ -33699,7 +33848,7 @@ class DataViewShareComponent {
         this.wcEmbedderBaseUrl = wcEmbedderBaseUrl;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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.2.12", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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$5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$5.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i2$5.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.2.12", ngImport: i0, type: DataViewShareComponent, decorators: [{
             type: Component,
@@ -33729,7 +33878,8 @@ class FeatureRecordModule {
             UiWidgetsModule,
             TranslateModule,
             TableComponent,
-            FeatureDatavizModule], exports: [MapViewComponent,
+            FeatureDatavizModule,
+            PopupAlertComponent], exports: [MapViewComponent,
             DataViewComponent,
             DataViewPermalinkComponent,
             DataViewWebComponentComponent,
@@ -33748,7 +33898,8 @@ class FeatureRecordModule {
             UiWidgetsModule,
             TranslateModule,
             TableComponent,
-            FeatureDatavizModule] }); }
+            FeatureDatavizModule,
+            PopupAlertComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeatureRecordModule, decorators: [{
             type: NgModule,
@@ -33777,6 +33928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TranslateModule,
                         TableComponent,
                         FeatureDatavizModule,
+                        PopupAlertComponent,
                     ],
                     providers: [MdViewFacade],
                     exports: [
@@ -33795,6 +33947,7 @@ const markRecordAsChanged = createAction('[Editor] Mark record as changed');
 const saveRecord = createAction('[Editor] Save record');
 const saveRecordSuccess = createAction('[Editor] Save record success');
 const saveRecordFailure = createAction('[Editor] Save record failure', props());
+const draftSaveSuccess = createAction('[Editor] Draft save success');
 
 const DEFAULT_FIELDS = [
     {
@@ -33856,6 +34009,13 @@ const DEFAULT_FIELDS = [
             type: 'list',
         },
     },
+    {
+        model: 'keywords',
+        formFieldConfig: {
+            labelKey: marker('editor.record.form.keywords'),
+            type: 'list',
+        },
+    },
 ];
 
 const EDITOR_FEATURE_KEY = 'editor';
@@ -33911,7 +34071,7 @@ const selectRecordAlreadySavedOnce = createSelector(selectEditorState, (state) =
 const selectRecordFieldsConfig = createSelector(selectEditorState, (state) => state.fieldsConfig);
 const selectRecordFields = createSelector(selectEditorState, (state) => state.fieldsConfig.map((fieldConfig) => ({
     config: fieldConfig,
-    value: state.record?.[fieldConfig.model] || null,
+    value: state.record?.[fieldConfig.model] ?? null,
 })));
 
 class EditorFacade {
@@ -33926,6 +34086,7 @@ class EditorFacade {
         this.saveSuccess$ = this.actions$.pipe(ofType(saveRecordSuccess));
         this.changedSinceSave$ = this.store.pipe(select(selectRecordChangedSinceSave));
         this.recordFields$ = this.store.pipe(select(selectRecordFields));
+        this.draftSaveSuccess$ = this.actions$.pipe(ofType(draftSaveSuccess));
     }
     openRecord(record, recordSource, alreadySavedOnce) {
         this.store.dispatch(openRecord({ record, recordSource, alreadySavedOnce }));
@@ -33961,7 +34122,7 @@ class EditorService {
         this.recordsRepository = recordsRepository;
     }
     // returns the record as it was when saved, alongside its source
-    saveRecord(record, fieldsConfig) {
+    saveRecord(record, fieldsConfig, generateNewUniqueIdentifier = false) {
         const savedRecord = { ...record };
         // run onSave processes
         for (const field of fieldsConfig) {
@@ -33973,9 +34134,14 @@ class EditorService {
                 });
             }
         }
-        return this.recordsRepository
-            .saveRecord(savedRecord)
-            .pipe(map$1((recordSource) => [savedRecord, recordSource]));
+        // if we want a new unique identifier, clear the existing one
+        if (generateNewUniqueIdentifier) {
+            savedRecord.uniqueIdentifier = null;
+        }
+        return this.recordsRepository.saveRecord(savedRecord).pipe(switchMap((uniqueIdentifier) => this.recordsRepository.openRecordForEdition(uniqueIdentifier)), tap$1(() => {
+            // if saving was successful, the original draft can be discarded
+            this.recordsRepository.clearRecordDraft(record.uniqueIdentifier);
+        }), map$1(([record, recordSource]) => [record, recordSource]));
     }
     // emits and completes once saving is done
     // note: onSave processes are not run for drafts
@@ -34000,7 +34166,9 @@ class EditorEffects {
         this.editorService = inject(EditorService);
         this.recordsRepository = inject(RecordsRepositoryInterface);
         this.store = inject(Store);
-        this.saveRecord$ = createEffect(() => this.actions$.pipe(ofType(saveRecord), withLatestFrom$1(this.store.select(selectRecord), this.store.select(selectRecordFieldsConfig)), switchMap$1(([, record, fieldsConfig]) => this.editorService.saveRecord(record, fieldsConfig).pipe(switchMap$1(([record, recordSource]) => of(saveRecordSuccess(), openRecord({
+        this.saveRecord$ = createEffect(() => this.actions$.pipe(ofType(saveRecord), withLatestFrom$1(this.store.select(selectRecord), this.store.select(selectRecordFieldsConfig), this.store.select(selectRecordAlreadySavedOnce)), switchMap$1(([, record, fieldsConfig, alreadySavedOnce]) => this.editorService
+            .saveRecord(record, fieldsConfig, !alreadySavedOnce)
+            .pipe(switchMap$1(([record, recordSource]) => of(saveRecordSuccess(), openRecord({
             record,
             alreadySavedOnce: true,
             recordSource,
@@ -34008,7 +34176,7 @@ class EditorEffects {
             error: error.message,
         })))))));
         this.markAsChanged$ = createEffect(() => this.actions$.pipe(ofType(updateRecordField), map$1(() => markRecordAsChanged())));
-        this.saveRecordDraft$ = createEffect(() => this.actions$.pipe(ofType(updateRecordField), debounceTime$1(1000), withLatestFrom$1(this.store.select(selectRecord)), switchMap$1(([, record]) => this.editorService.saveRecordAsDraft(record))), { dispatch: false });
+        this.saveRecordDraft$ = createEffect(() => this.actions$.pipe(ofType(updateRecordField), debounceTime$1(1000), withLatestFrom$1(this.store.select(selectRecord)), switchMap$1(([, record]) => this.editorService.saveRecordAsDraft(record)), map$1(() => draftSaveSuccess())));
         this.checkHasChangesOnOpen$ = createEffect(() => this.actions$.pipe(ofType(openRecord), map$1(({ record }) => this.recordsRepository.recordHasDraft(record.uniqueIdentifier)), filter$1((hasDraft) => hasDraft), map$1(() => markRecordAsChanged())));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -34239,7 +34407,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", "disabled"], 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 }); }
+        ], 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", "disabled"], 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$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WizardFieldComponent, decorators: [{
             type: Component,
@@ -34390,7 +34558,7 @@ class FeatureEditorModule {
             MatFormFieldModule,
             HttpClientModule,
             HttpClientXsrfModule, i1$2.StoreFeatureModule, i1$8.EffectsFeatureModule], exports: [WizardComponent, WizardSummarizeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeatureEditorModule, providers: [EditorFacade], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FeatureEditorModule, providers: [EditorFacade, Gn4PlatformService], imports: [CommonModule,
             UiInputsModule,
             UiWidgetsModule,
             TranslateModule.forChild(),
@@ -34424,10 +34592,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         EffectsModule.forFeature([EditorEffects]),
                     ],
                     exports: [WizardComponent, WizardSummarizeComponent],
-                    providers: [EditorFacade],
+                    providers: [EditorFacade, Gn4PlatformService],
                 }]
         }] });
 
+class FormFieldKeywordsComponent {
+    constructor(platformService) {
+        this.platformService = platformService;
+        this.displayWithFn = (item) => {
+            return `${item.title} (${item.value.thesaurus?.name})`;
+        };
+        this.autoCompleteAction = (query) => {
+            return this.platformService.searchKeywords(query).pipe(map$2((keywords) => keywords.map((keyword) => {
+                return { title: keyword.label, value: keyword };
+            })));
+        };
+    }
+    handleItemSelection(item) {
+        this.addKeyword(item.value);
+    }
+    addKeyword(keyword) {
+        const addedKeywords = [...this.control.value, keyword];
+        // remove duplicates from keyword
+        const filteredKeywords = addedKeywords.filter((value, index, self) => {
+            return (index ===
+                self.findIndex((t) => t?.label === value?.label &&
+                    t?.thesaurus?.id === value?.thesaurus?.id &&
+                    t?.type === value?.type));
+        });
+        this.control.setValue(filteredKeywords);
+    }
+    removeKeyword(index) {
+        const removeKeywords = this.control.value.filter((_, i) => i !== index);
+        this.control.setValue(removeKeywords);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldKeywordsComponent, deps: [{ token: PlatformServiceInterface }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldKeywordsComponent, isStandalone: true, selector: "gn-ui-form-field-keywords", inputs: { control: "control" }, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <gn-ui-autocomplete\n    [placeholder]=\"'Search for keywords in all thesaurus'\"\n    [displayWithFn]=\"displayWithFn\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"handleItemSelection($event)\"\n    [clearOnSelection]=\"true\"\n    [minCharacterCount]=\"0\"\n    [allowSubmit]=\"false\"\n  ></gn-ui-autocomplete>\n  <div class=\"flex gap-2 flex-wrap\">\n    <gn-ui-badge\n      *ngFor=\"let keyword of control.value; let index = index\"\n      [removable]=\"true\"\n      (badgeRemoveClicked)=\"removeKeyword(index)\"\n      >{{ keyword.label }}</gn-ui-badge\n    >\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: UiInputsModule }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: UiWidgetsModule }, { kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "action", "value", "clearOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldKeywordsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-form-field-keywords', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        DropdownSelectorComponent,
+                        UiInputsModule,
+                        CommonModule,
+                        UiWidgetsModule,
+                        AutocompleteComponent,
+                    ], template: "<div class=\"flex flex-col gap-3\">\n  <gn-ui-autocomplete\n    [placeholder]=\"'Search for keywords in all thesaurus'\"\n    [displayWithFn]=\"displayWithFn\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"handleItemSelection($event)\"\n    [clearOnSelection]=\"true\"\n    [minCharacterCount]=\"0\"\n    [allowSubmit]=\"false\"\n  ></gn-ui-autocomplete>\n  <div class=\"flex gap-2 flex-wrap\">\n    <gn-ui-badge\n      *ngFor=\"let keyword of control.value; let index = index\"\n      [removable]=\"true\"\n      (badgeRemoveClicked)=\"removeKeyword(index)\"\n      >{{ keyword.label }}</gn-ui-badge\n    >\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: PlatformServiceInterface }]; }, propDecorators: { control: [{
+                type: Input
+            }] } });
+
 class FormFieldLicenseComponent {
     constructor() {
         this.choices = [
@@ -34639,7 +34853,7 @@ class FormFieldSimpleComponent {
         return this.type === 'list';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldSimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldSimpleComponent, isStandalone: true, selector: "gn-ui-form-field-simple", inputs: { type: "type", control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder", options: "options" }, ngImport: i0, template: "<input\n  *ngIf=\"!isSelect\"\n  [type]=\"inputType\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n<select\n  *ngIf=\"isSelect\"\n  [formControl]=\"control\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n>\n  <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n    {{ option.label }}\n  </option>\n</select>\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldSimpleComponent, isStandalone: true, selector: "gn-ui-form-field-simple", inputs: { type: "type", control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder", options: "options" }, ngImport: i0, template: "<input\n  *ngIf=\"!isSelect\"\n  [type]=\"inputType\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n<select\n  *ngIf=\"isSelect\"\n  [formControl]=\"control\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n>\n  <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n    {{ option.label }}\n  </option>\n</select>\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldSimpleComponent, decorators: [{
             type: Component,
@@ -34665,7 +34879,7 @@ class FormFieldFileComponent {
         this.placeholder = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldFileComponent, isStandalone: true, selector: "gn-ui-form-field-file", inputs: { control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder" }, ngImport: i0, template: "<input\n  type=\"file\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldFileComponent, isStandalone: true, selector: "gn-ui-form-field-file", inputs: { control: "control", readonly: "readonly", invalid: "invalid", placeholder: "placeholder" }, ngImport: i0, template: "<input\n  type=\"file\"\n  [readonly]=\"readonly\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  class=\"border rounded-md p-3 w-full bg-white transition-colors\"\n  [ngClass]=\"{\n    'border-pink-500': invalid,\n    'border-gray-200': !invalid,\n    'text-gray-600': readonly\n  }\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldFileComponent, decorators: [{
             type: Component,
@@ -34747,92 +34961,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class FormFieldUpdateFrequencyComponent {
     get planned() {
-        return this.control.value !== 'notPlanned';
+        return typeof this.control.value !== 'string';
     }
     constructor(translateService) {
         this.translateService = translateService;
-        this.choices = [
+        this.choices = [];
+    }
+    async ngOnInit() {
+        this.choices = await this.getInitialChoices();
+        if (typeof this.control.value === 'string') {
+            return;
+        }
+        const updatedTimes = this.control.value.updatedTimes;
+        const per = this.control.value.per;
+        // the update frequency is not in the list; make it appear there
+        if (updatedTimes && updatedTimes !== 1 && updatedTimes !== 2) {
+            this.choices = [
+                {
+                    value: `${per}.${updatedTimes}`,
+                    label: await firstValueFrom(this.translateService.get(`domain.record.updateFrequency.${per}`, {
+                        count: updatedTimes,
+                    })),
+                },
+                ...this.choices,
+            ];
+        }
+    }
+    onPlannedToggled() {
+        if (this.planned) {
+            this.control.setValue('notPlanned');
+        }
+        else {
+            this.control.setValue({ updatedTimes: 1, per: 'day' });
+        }
+    }
+    get selectedFrequency() {
+        if (typeof this.control.value === 'string')
+            return null;
+        const { updatedTimes, per } = this.control.value;
+        return `${per}.${updatedTimes}`;
+    }
+    onSelectFrequencyValue(value) {
+        const split = value.split('.');
+        this.control.setValue({
+            updatedTimes: Number(split[1]),
+            per: split[0],
+        });
+    }
+    async getInitialChoices() {
+        return [
             {
                 value: 'day.1',
-                label: this.translateService.instant('domain.record.updateFrequency.day', {
+                label: await firstValueFrom(this.translateService.get('domain.record.updateFrequency.day', {
                     count: 1,
-                }),
+                })),
             },
             {
                 value: 'day.2',
-                label: this.translateService.instant('domain.record.updateFrequency.day', {
+                label: await firstValueFrom(this.translateService.get('domain.record.updateFrequency.day', {
                     count: 2,
-                }),
+                })),
             },
             {
                 value: 'week.1',
-                label: this.translateService.instant('domain.record.updateFrequency.week', {
+                label: await firstValueFrom(this.translateService.get('domain.record.updateFrequency.week', {
                     count: 1,
-                }),
+                })),
             },
             {
                 value: 'week.2',
-                label: this.translateService.instant('domain.record.updateFrequency.week', {
+                label: await firstValueFrom(this.translateService.get('domain.record.updateFrequency.week', {
                     count: 2,
-                }),
+                })),
             },
             {
                 value: 'month.1',
-                label: this.translateService.instant('domain.record.updateFrequency.month', {
+                label: await firstValueFrom(this.translateService.get('domain.record.updateFrequency.month', {
                     count: 1,
-                }),
+                })),
             },
             {
                 value: 'month.2',
-                label: this.translateService.instant('domain.record.updateFrequency.month', {
+                label: await firstValueFrom(this.translateService.get('domain.record.updateFrequency.month', {
                     count: 2,
-                }),
+                })),
             },
             {
                 value: 'year.1',
-                label: this.translateService.instant('domain.record.updateFrequency.year', {
+                label: await firstValueFrom(this.translateService.get('domain.record.updateFrequency.year', {
                     count: 1,
-                }),
+                })),
             },
             {
                 value: 'year.2',
-                label: this.translateService.instant('domain.record.updateFrequency.year', {
+                label: await firstValueFrom(this.translateService.get('domain.record.updateFrequency.year', {
                     count: 2,
-                }),
+                })),
             },
         ];
     }
-    ngOnInit() {
-        const updatedTimes = this.control.value?.updatedTimes;
-        const per = this.control.value?.per;
-        if (updatedTimes && updatedTimes !== 1 && updatedTimes !== 2) {
-            this.choices = [
-                {
-                    value: `${per}.${updatedTimes}`,
-                    label: this.translateService.instant(`domain.record.updateFrequency.${per}`, {
-                        count: updatedTimes,
-                    }),
-                },
-                ...this.choices,
-            ];
-        }
-    }
-    onPlannedToggled() {
-        if (this.planned) {
-            this.control.setValue('notPlanned');
-        }
-        else {
-            this.control.setValue({ updatedTimes: 1, per: 'day' });
-        }
-    }
-    get selectedFrequency() {
-        const { updatedTimes, per } = this.control.value;
-        return `${per}.${updatedTimes}`;
-    }
-    onSelectFrequencyValue(value) {
-        const split = value.split('.');
-        this.control.setValue({ updatedTimes: Number(split[1]), per: split[0] });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldUpdateFrequencyComponent, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FormFieldUpdateFrequencyComponent, isStandalone: true, selector: "gn-ui-form-field-update-frequency", inputs: { control: "control" }, ngImport: i0, template: "<gn-ui-check-toggle\n  [label]=\"'editor.record.form.updateFrequency.planned' | translate\"\n  [value]=\"planned\"\n  (toggled)=\"onPlannedToggled()\"\n></gn-ui-check-toggle>\n<gn-ui-dropdown-selector\n  title=\"updateFrequency\"\n  [showTitle]=\"false\"\n  [choices]=\"choices\"\n  [selected]=\"selectedFrequency\"\n  (selectValue)=\"onSelectFrequencyValue($event)\"\n  [disabled]=\"!planned\"\n>\n</gn-ui-dropdown-selector>\n", styles: [""], dependencies: [{ kind: "component", type: CheckToggleComponent, selector: "gn-ui-check-toggle", inputs: ["title", "label", "value", "color"], outputs: ["toggled"] }, { kind: "component", type: DropdownSelectorComponent, selector: "gn-ui-dropdown-selector", inputs: ["title", "showTitle", "ariaName", "choices", "selected", "maxRows", "extraBtnClass", "minWidth", "disabled"], outputs: ["selectValue"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -34856,38 +35083,6 @@ class FormFieldComponent {
     focusTitleInput() {
         this.titleInput.nativeElement.children[0].focus();
     }
-    get simpleType() {
-        return this.config.type;
-    }
-    get isSimpleField() {
-        return (this.config.type === 'text' ||
-            this.config.type === 'number' ||
-            this.config.type === 'date' ||
-            this.config.type === 'list' ||
-            this.config.type === 'url' ||
-            this.config.type === 'toggle');
-    }
-    get isFileField() {
-        return this.config.type === 'file';
-    }
-    get isSpatialExtentField() {
-        return this.config.type === 'spatial_extent';
-    }
-    get isArrayField() {
-        return this.config.type === 'array';
-    }
-    get isObjectField() {
-        return this.config.type === 'object';
-    }
-    get isFieldOk() {
-        return !this.config.locked && !this.config.invalid;
-    }
-    get isFieldLocked() {
-        return this.config.locked;
-    }
-    get isFieldInvalid() {
-        return !this.config.locked && this.config.invalid;
-    }
     get isTitle() {
         return this.model === 'title';
     }
@@ -34906,11 +35101,23 @@ class FormFieldComponent {
     get isTemporalExtents() {
         return this.model === 'temporalExtents';
     }
+    get isSpatialExtentField() {
+        return this.model === 'spatialExtents';
+    }
+    get isSimpleField() {
+        return this.model === 'uniqueIdentifier' || this.model === 'recordUpdated';
+    }
+    get isReadOnly() {
+        return this.model === 'uniqueIdentifier' || this.model === 'recordUpdated';
+    }
+    get isKeywords() {
+        return this.model === 'keywords';
+    }
     get withoutWrapper() {
         return this.model === 'title' || this.model === 'abstract';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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=\"isUpdateFrequency\">\n    <gn-ui-form-field-update-frequency\n      [control]=\"formControl\"\n    ></gn-ui-form-field-update-frequency>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtents\">\n    <gn-ui-form-field-temporal-extents\n      [control]=\"formControl\"\n    ></gn-ui-form-field-temporal-extents>\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  <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: FormFieldUpdateFrequencyComponent, selector: "gn-ui-form-field-update-frequency", inputs: ["control"] }, { kind: "component", type: FormFieldTemporalExtentsComponent, selector: "gn-ui-form-field-temporal-extents", 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: 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.2.12", 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=\"isUpdateFrequency\">\n    <gn-ui-form-field-update-frequency\n      [control]=\"formControl\"\n    ></gn-ui-form-field-update-frequency>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtents\">\n    <gn-ui-form-field-temporal-extents\n      [control]=\"formControl\"\n    ></gn-ui-form-field-temporal-extents>\n  </ng-container>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      type=\"text\"\n      [control]=\"formControl\"\n      [readonly]=\"isReadOnly\"\n    ></gn-ui-form-field-simple>\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=\"isKeywords\">\n    <gn-ui-form-field-keywords\n      [control]=\"formControl\"\n    ></gn-ui-form-field-keywords>\n  </ng-container>\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$3.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: FormFieldUpdateFrequencyComponent, selector: "gn-ui-form-field-update-frequency", inputs: ["control"] }, { kind: "component", type: FormFieldTemporalExtentsComponent, selector: "gn-ui-form-field-temporal-extents", 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: FormFieldSpatialExtentComponent, selector: "gn-ui-form-field-spatial-extent" }, { kind: "component", type: FormFieldKeywordsComponent, selector: "gn-ui-form-field-keywords", inputs: ["control"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -34931,8 +35138,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FormFieldSpatialExtentComponent,
                         FormFieldFileComponent,
                         FormFieldArrayComponent,
+                        FormFieldKeywordsComponent,
                         TranslateModule,
-                    ], 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=\"isUpdateFrequency\">\n    <gn-ui-form-field-update-frequency\n      [control]=\"formControl\"\n    ></gn-ui-form-field-update-frequency>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtents\">\n    <gn-ui-form-field-temporal-extents\n      [control]=\"formControl\"\n    ></gn-ui-form-field-temporal-extents>\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  <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" }]
+                    ], 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=\"isUpdateFrequency\">\n    <gn-ui-form-field-update-frequency\n      [control]=\"formControl\"\n    ></gn-ui-form-field-update-frequency>\n  </ng-container>\n  <ng-container *ngIf=\"isTemporalExtents\">\n    <gn-ui-form-field-temporal-extents\n      [control]=\"formControl\"\n    ></gn-ui-form-field-temporal-extents>\n  </ng-container>\n  <ng-container *ngIf=\"isSimpleField\">\n    <gn-ui-form-field-simple\n      type=\"text\"\n      [control]=\"formControl\"\n      [readonly]=\"isReadOnly\"\n    ></gn-ui-form-field-simple>\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=\"isKeywords\">\n    <gn-ui-form-field-keywords\n      [control]=\"formControl\"\n    ></gn-ui-form-field-keywords>\n  </ng-container>\n</ng-template>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { model: [{
                 type: Input
             }], config: [{
@@ -35290,7 +35498,7 @@ class DefaultRouterModule {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultRouterModule, deps: [{ token: RouterService }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DefaultRouterModule, declarations: [SearchRouterContainerDirective], imports: [i1$2.StoreFeatureModule, i3$2.StoreRouterConnectingModule, i1$8.EffectsFeatureModule], exports: [SearchRouterContainerDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DefaultRouterModule, declarations: [SearchRouterContainerDirective], imports: [i1$2.StoreFeatureModule, i3$3.StoreRouterConnectingModule, i1$8.EffectsFeatureModule], exports: [SearchRouterContainerDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultRouterModule, providers: [
             RouterFacade,
             {
@@ -35333,5 +35541,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AbstractSearchField, 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, ErrorComponent, 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, FullTextSearchField, FuzzySearchComponent, GN_UI_VERSION, GeoTableViewComponent, GeocodingComponent, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, ImageOverlayPreviewComponent, InteractiveTableColumnComponent, InteractiveTableComponent, IsSpatialSearchField, 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, LicenseSearchField, 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, MultilingualSearchField, MyOrgService, NavigationButtonComponent, NotificationComponent, NotificationsContainerComponent, NotificationsService, ORGANIZATIONS_STRATEGY, ORGANIZATION_URL_TOKEN, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationSearchField, OrganizationsFromGroupsService, OrganizationsFromMetadataService, OwnerSearchField, 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, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SimpleSearchField, SiteTitleComponent, SortByComponent, SortableListComponent, 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, TranslatedSearchField, 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, selectRecordAlreadySavedOnce, selectRecordChangedSinceSave, selectRecordFields, selectRecordFieldsConfig, selectRecordSaveError, selectRecordSaving, selectRecordSource, selectTranslatedField, selectTranslatedValue, setLayerError, sortByFromString, sortByToString, sortByToStrings, stripHtml, toDate, totalPages, updateLayer, updateRecordField };
+export { ADD_RESULTS, ADD_SEARCH, AbstractAction, AbstractSearchField, 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, ErrorComponent, 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, FullTextSearchField, FuzzySearchComponent, GN_UI_VERSION, GeoTableViewComponent, GeocodingComponent, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GravatarService, HttpLoaderFactory, I18nInterceptor, ImageFallbackDirective, ImageOverlayPreviewComponent, InteractiveTableColumnComponent, InteractiveTableComponent, IsSpatialSearchField, 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, LicenseSearchField, 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, MultilingualSearchField, MyOrgService, NavigationButtonComponent, NotificationComponent, NotificationsContainerComponent, NotificationsService, ORGANIZATIONS_STRATEGY, ORGANIZATION_URL_TOKEN, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationSearchField, OrganizationsFromGroupsService, OrganizationsFromMetadataService, OwnerSearchField, 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, ResultsTableContainerComponent, 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, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SimpleSearchField, SiteTitleComponent, SortByComponent, SortableListComponent, 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, TranslatedSearchField, 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, draftSaveSuccess, 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, selectRecordAlreadySavedOnce, selectRecordChangedSinceSave, selectRecordFields, selectRecordFieldsConfig, selectRecordSaveError, selectRecordSaving, selectRecordSource, selectTranslatedField, selectTranslatedValue, setLayerError, sortByFromString, sortByToString, sortByToStrings, stripHtml, toDate, totalPages, updateLayer, updateRecordField };
 //# sourceMappingURL=geonetwork-ui.mjs.map