geonetwork-ui 2.11.0-dev.96d0c6ce2 → 2.11.0-dev.9bd41a961

package/fesm2022/geonetwork-ui.mjs

@@ -6,9 +6,9 @@ import GeoJSON from 'ol/format/GeoJSON.js';
 import { parse as parse$1 } from 'ol/xml.js';
 import { format } from 'date-fns/format';
 import { Namespace, Literal, lit, parse as parse$2, sym, BlankNode, graph } from 'rdflib';
-import { lastValueFrom, fromEvent, startWith, map as map$2, shareReplay, filter, pairwise, of, switchMap, Subject, combineLatest, from, exhaustMap, throwError, forkJoin, takeLast, firstValueFrom, merge, BehaviorSubject, timer, ReplaySubject, Subscription, first, distinctUntilChanged as distinctUntilChanged$1, animationFrameScheduler, debounceTime as debounceTime$1, Observable, buffer, tap as tap$2, combineLatestWith, take as take$1, catchError as catchError$1, takeUntil, EMPTY, mergeMap as mergeMap$1, withLatestFrom as withLatestFrom$1 } from 'rxjs';
+import { lastValueFrom, fromEvent, startWith, map as map$2, shareReplay, filter, pairwise, of, switchMap, Subject, forkJoin, combineLatest, from, exhaustMap, throwError, takeLast, firstValueFrom, merge, BehaviorSubject, timer, ReplaySubject, Subscription, first, distinctUntilChanged as distinctUntilChanged$1, animationFrameScheduler, debounceTime as debounceTime$1, Observable, buffer, tap as tap$2, combineLatestWith, take as take$1, catchError as catchError$1, EMPTY, mergeMap as mergeMap$1, withLatestFrom as withLatestFrom$1, takeUntil } from 'rxjs';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, NgModule, Injector, provideAppInitializer, makeEnvironmentProviders, ElementRef, HostListener, Input, Directive, Renderer2, DestroyRef, EventEmitter, Output, ViewChild, ChangeDetectionStrategy, Component, ViewEncapsulation, ChangeDetectorRef, HostBinding, ViewContainerRef, TemplateRef, ViewChildren, ContentChild, input, output, signal, viewChild, computed, ContentChildren, NgZone, ComponentFactoryResolver, afterNextRender, viewChildren } from '@angular/core';
+import { InjectionToken, inject, Injectable, NgModule, Injector, provideAppInitializer, makeEnvironmentProviders, ElementRef, afterNextRender, booleanAttribute, Input, Directive, HostListener, Renderer2, DestroyRef, EventEmitter, Output, ViewChild, ChangeDetectionStrategy, Component, ViewEncapsulation, ChangeDetectorRef, HostBinding, ViewContainerRef, TemplateRef, ViewChildren, ContentChild, input, output, signal, viewChild, computed, ContentChildren, NgZone, ComponentFactoryResolver, viewChildren } from '@angular/core';
 import { HttpClient, HttpHeaders, HttpParams, HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi, HttpEventType } from '@angular/common/http';
 import * as i4 from '@ngx-translate/core';
 import { TranslateLoader, TranslateCompiler, TranslateDefaultParser, TranslateParser, TranslateService, provideTranslateService, TranslateDirective, TranslatePipe, TranslateModule } from '@ngx-translate/core';
@@ -18,7 +18,7 @@ import { map as map$1, shareReplay as shareReplay$1, catchError, tap as tap$1, f
 import { lt, valid, coerce, satisfies, ltr } from 'semver';
 import chroma from 'chroma-js';
 import * as i1$1 from '@angular/common';
-import { Location, CommonModule, NgClass, NgTemplateOutlet, DatePipe, AsyncPipe } from '@angular/common';
+import { Location, CommonModule, NgTemplateOutlet, NgClass, AsyncPipe } from '@angular/common';
 import { formatDistance } from 'date-fns/formatDistance';
 import { Scroll, NavigationEnd, Router, RouteReuseStrategy } from '@angular/router';
 import { WmtsEndpoint, WmsEndpoint, WfsEndpoint, OgcApiEndpoint, sharedFetch, useCache, StacEndpoint, TmsEndpoint } from '@camptocamp/ogc-client';
@@ -26,7 +26,6 @@ import { getLength } from 'ol/sphere.js';
 import { LineString } from 'ol/geom.js';
 import * as i1 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, Store, select, StoreModule } from '@ngrx/store';
-import { queryDataGouvFr, queryGeonames, queryGeoadmin } from '@geospatial-sdk/geocoding';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { FeaturesClickEventType, FeaturesHoverEventType, MapClickEventType, MapExtentChangeEventType, SourceLoadErrorType, computeMapContextDiff, createViewFromLayer } from '@geospatial-sdk/core';
 import { createMapFromContext, applyContextDiffToMap, listen } from '@geospatial-sdk/openlayers';
@@ -41,10 +40,10 @@ import * as TOML from '@ltd/j-toml';
 import { Style, Stroke, Fill, Circle } from 'ol/style.js';
 import CircleStyle from 'ol/style/Circle.js';
 import EmblaCarousel from 'embla-carousel';
-import { iconoirNavArrowLeft, iconoirNavArrowRight, iconoirLongArrowDownLeft, iconoirSearch, iconoirCalendar, iconoirArrowUp, iconoirLink, iconoirFramePlusIn, iconoirCloudUpload, iconoirReduce, iconoirNavArrowUp, iconoirNavArrowDown, iconoirExpand, iconoirSettings, iconoirDownload, iconoirPlus, iconoirBin, iconoirMediaImageXmark, iconoirMediaImage, iconoirAppWindow, iconoirCode, iconoirDatabase, iconoirAppleWallet, iconoirBank, iconoirList, iconoirTranslate, iconoirLock, iconoirUser, iconoirArrowLeft, iconoirLightBulbOn, iconoirImport, iconoirBadgeCheck, iconoirSystemShut, iconoirCircle, iconoirCheckCircle, iconoirAttachment, iconoirRefresh } from '@ng-icons/iconoir';
+import { iconoirNavArrowLeft, iconoirNavArrowRight, iconoirLongArrowDownLeft, iconoirSearch, iconoirCalendar, iconoirArrowUp, iconoirLink, iconoirFramePlusIn, iconoirCloudUpload, iconoirTrash, iconoirSquareDashed, iconoirImport, iconoirCheckCircle, iconoirReduce, iconoirNavArrowUp, iconoirNavArrowDown, iconoirExpand, iconoirSettings, iconoirDownload, iconoirPlus, iconoirBin, iconoirMediaImageXmark, iconoirMediaImage, iconoirAppWindow, iconoirCode, iconoirDatabase, iconoirAppleWallet, iconoirBank, iconoirList, iconoirTranslate, iconoirLock, iconoirUser, iconoirArrowLeft, iconoirLightBulbOn, iconoirBadgeCheck, iconoirSystemShut, iconoirCircle, iconoirAttachment, iconoirRefresh } from '@ng-icons/iconoir';
 import { MatButtonModule } from '@angular/material/button';
-import * as i1$8 from '@angular/cdk/overlay';
-import { OverlayContainer, ScrollStrategyOptions, OverlayModule, CdkConnectedOverlay, ScrollDispatcher, Overlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import * as i1$7 from '@angular/cdk/overlay';
+import { ScrollStrategyOptions, OverlayModule, CdkConnectedOverlay, ScrollDispatcher, Overlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as i1$3 from '@angular/forms';
 import { UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$2 from '@angular/material/autocomplete';
@@ -52,16 +51,18 @@ import { MatAutocompleteModule, MatAutocompleteTrigger, MatAutocomplete } from '
 import tippy from 'tippy.js';
 import * as i2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { matClose, matContentCopy, matExpandLess, matExpandMore, matSearch, matStarBorder, matStar, matRemove, matAdd, matChevronRight, matChevronLeft, matArrowForwardIos, matArrowBackIos, matMoodBad, matQuestionMark, matFace, matZoomOutMap, matOpenInNew, matPersonOutline, matMailOutline, matWarningAmber, matCheck, matCheckCircleOutline, matWarning, matMoreVert } from '@ng-icons/material-icons/baseline';
+import { matClose, matContentCopy, matExpandMore, matExpandLess, matSearch, matStarBorder, matStar, matRemove, matAdd, matChevronRight, matChevronLeft, matArrowForwardIos, matArrowBackIos, matMoodBad, matQuestionMark, matFace, matZoomOutMap, matOpenInNew, matPersonOutline, matMailOutline, matWarningAmber, matCheck, matCheckCircleOutline, matWarning, matMoreVert } from '@ng-icons/material-icons/baseline';
 import * as i1$4 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i1$5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { DateAdapter, MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MAT_DATE_LOCALE, MAT_DATE_FORMATS, DateAdapter } from '@angular/material/core';
+import { MAT_DATE_FNS_FORMATS, DateFnsAdapter } from '@angular/material-date-fns-adapter';
+import { enUS } from 'date-fns/locale/en-US';
 import * as i1$6 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i1$7 from 'ngx-dropzone';
-import { NgxDropzoneModule } from 'ngx-dropzone';
+import * as i1$8 from 'ngx-dropzone';
+import { NgxDropzoneModule, NgxDropzoneComponent } from 'ngx-dropzone';
 import * as i1$9 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
@@ -72,6 +73,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import * as i2$2 from '@ngrx/effects';
 import { Actions, createEffect, ofType, EffectsModule } from '@ngrx/effects';
 import { valid as valid$1 } from 'geojson-validation';
+import { queryDataGouvFr, queryGeonames, queryGeoadmin } from '@geospatial-sdk/geocoding';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { parse as parse$3 } from 'marked';
 import * as i2$3 from '@angular/cdk/scrolling';
@@ -79,10 +81,10 @@ import { ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
 import Duration from 'duration-relativetimeformat';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import { trigger, transition, animate, keyframes, style } from '@angular/animations';
-import * as Papa from 'papaparse';
-import { parse as parse$4 } from 'date-fns/parse';
-import { parseISO } from 'date-fns/parseISO';
-import { WFS, GeoJSON as GeoJSON$1 } from 'ol/format.js';
+import * as duckdb from '@duckdb/duckdb-wasm';
+import { Vector, DataType } from 'apache-arrow';
+import WFS from 'ol/format/WFS';
+import GeoJSON$1 from 'ol/format/GeoJSON';
 import { Chart, BarController, BarElement, CategoryScale, LinearScale, LineController, LineElement, PointElement, PieController, ArcElement, ScatterController, Tooltip, Colors, Legend } from 'chart.js';
 import * as i2$4 from '@angular/material/sort';
 import { MatSortModule, MatSort } from '@angular/material/sort';
@@ -90,7 +92,6 @@ import * as i1$b from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i3 from '@angular/material/paginator';
 import { MatPaginatorIntl, MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
-import { LetDirective } from '@ngrx/component';
 import { Meta } from '@angular/platform-browser';
 import { tablerFolderOpen } from '@ng-icons/tabler-icons';
 import * as i3$1 from '@angular/material/radio';
@@ -18907,14 +18908,29 @@ class Gn4FieldMapper {
                 featureTypes: selectField(source, 'featureTypes'),
             }, output),
             related: (output, source) => {
-                const fcatSource = selectField(getFirstValue(selectField(selectField(source, 'related'), 'fcats')) ?? {}, '_source');
+                const related = selectField(source, 'related');
+                const fcatSource = selectField(getFirstValue(selectField(related, 'fcats')) ?? {}, '_source');
                 const featureCatalogIdentifier = selectField(fcatSource, 'uuid');
-                const sourceOfLinks = getAsArray(selectField(selectField(source, 'related'), 'hassources'));
+                const sourceOfLinks = getAsArray(selectField(related, 'hassources'));
                 const sourceOfIdentifiers = sourceOfLinks
                     .filter((link) => link['origin'] === 'catalog')
                     .map((link) => {
                     return selectField(selectField(link, '_source'), 'uuid');
                 });
+                const siblingLinks = getAsArray(selectField(related, 'siblings'));
+                const siblings = siblingLinks
+                    .filter((link) => link['origin'] === 'catalog')
+                    .map((link) => ({
+                    uniqueIdentifier: selectField(selectField(link, '_source'), 'uuid'),
+                    associationType: getAssociationTypeFromCode(selectField(selectField(link, 'properties'), 'associationType')),
+                }));
+                const associatedLinks = getAsArray(selectField(related, 'associated'));
+                const associatedIdentifiers = associatedLinks
+                    .filter((link) => link['origin'] === 'catalog')
+                    .map((link) => {
+                    return selectField(selectField(link, '_source'), 'uuid');
+                })
+                    .filter((uuid) => !siblings.some((sibling) => sibling.uniqueIdentifier === uuid));
                 const extraValues = {};
                 if (featureCatalogIdentifier) {
                     extraValues.featureCatalogIdentifier = featureCatalogIdentifier;
@@ -18922,6 +18938,12 @@ class Gn4FieldMapper {
                 if (sourceOfIdentifiers && sourceOfIdentifiers.length > 0) {
                     extraValues.sourceOfIdentifiers = sourceOfIdentifiers;
                 }
+                if (associatedIdentifiers && associatedIdentifiers.length > 0) {
+                    extraValues.associatedIdentifiers = associatedIdentifiers;
+                }
+                if (siblings && siblings.length > 0) {
+                    extraValues.siblings = siblings;
+                }
                 return Object.keys(extraValues).length > 0
                     ? this.addExtra(extraValues, output)
                     : output;
@@ -19447,10 +19469,10 @@ class DateService {
         const dateObj = this.getDateObject(date);
         return { locale, dateObj };
     }
-    async getDateLocale() {
+    async getDateFnsLocale() {
         const lang = this.translateService.getCurrentLang() || DEFAULT_LANGUAGE;
         const locales = await this.dateLocales;
-        return locales[lang];
+        return locales[lang] ?? locales[DEFAULT_LANGUAGE];
     }
     formatDate(date, options) {
         const { locale, dateObj } = this.getLocaleAndDate(date);
@@ -19463,7 +19485,7 @@ class DateService {
     async formatRelativeDateTime(date) {
         const dateObj = this.getDateObject(date);
         const now = new Date();
-        const locale = await this.getDateLocale();
+        const locale = await this.getDateFnsLocale();
         return formatDistance(dateObj, now, {
             addSuffix: true,
             locale: locale,
@@ -19498,6 +19520,18 @@ function propagateToDocumentOnly(event) {
     }, 0);
 }
 
+function isFileExtensionValid(fileName, acceptedExtensions) {
+    return acceptedExtensions.some((ext) => fileName.toLowerCase().endsWith(ext));
+}
+function readFileAsText(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = () => reject(reader.error);
+        reader.readAsText(file);
+    });
+}
+
 function formatUserInfo(userInfo, displayCount = false) {
     const infos = (typeof userInfo === 'string' ? userInfo : '').split('|');
     const count = displayCount ? ` ${infos[3].split(' ')[1]}` : '';
@@ -19557,6 +19591,11 @@ function getGeometryFromGeoJSON(data) {
     }
     return null;
 }
+function isBoundingBox(value) {
+    return (Array.isArray(value) &&
+        value.length === 4 &&
+        value.every((item) => typeof item === 'number'));
+}
 function getGeometryBoundingBox(geometry) {
     // use the bounding box if specified in the GeoJSON object
     if (geometry.bbox) {
@@ -20225,7 +20264,7 @@ function getLinkLabel(link) {
     const label = link.description || ('name' in link ? link.name : '');
     return format ? `${label} (${format})` : label;
 }
-async function getLayers(url, serviceProtocol) {
+async function getLayers(url, serviceProtocol, deep = false) {
     switch (serviceProtocol) {
         case 'ogcFeatures': {
             const layers = await new OgcApiEndpoint(url).allCollections;
@@ -20233,7 +20272,10 @@ async function getLayers(url, serviceProtocol) {
         }
         case 'wfs': {
             const endpointWfs = await new WfsEndpoint(url).isReady();
-            const featureTypes = await endpointWfs.getFeatureTypes();
+            const featureTypes = endpointWfs.getFeatureTypes();
+            if (!deep) {
+                return featureTypes;
+            }
             const layers = (await Promise.allSettled(featureTypes.map((collection) => {
                 return endpointWfs.getFeatureTypeFull(collection.name);
             })))
@@ -20243,12 +20285,14 @@ async function getLayers(url, serviceProtocol) {
         }
         case 'wms': {
             const endpointWms = await new WmsEndpoint(url).isReady();
-            const layers = (await endpointWms
+            const layersSummary = endpointWms
                 .getLayers()
                 .flatMap(wmsLayerFlatten)
-                .filter((l) => l.name)).map((collection) => {
-                return endpointWms.getLayerByName(collection.name);
-            });
+                .filter((l) => l.name);
+            if (!deep) {
+                return layersSummary;
+            }
+            const layers = layersSummary.map((collection) => endpointWms.getLayerByName(collection.name));
             return layers;
         }
         case 'wmts': {
@@ -20342,6 +20386,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 }]
         }] });
 
+class AutofocusDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.injector = inject(Injector);
+    }
+    set autofocus(active) {
+        if (!active)
+            return;
+        afterNextRender(() => this.el.nativeElement.focus(), {
+            injector: this.injector,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.19", type: AutofocusDirective, isStandalone: true, selector: "[gnUiAutofocus]", inputs: { autofocus: ["gnUiAutofocus", "autofocus", booleanAttribute] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AutofocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[gnUiAutofocus]',
+                    standalone: true,
+                }]
+        }], propDecorators: { autofocus: [{
+                type: Input,
+                args: [{ alias: 'gnUiAutofocus', transform: booleanAttribute }]
+            }] } });
+
 class ImageFallbackDirective {
     constructor() {
         this.el = inject(ElementRef);
@@ -20369,7 +20439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
             }] } });
 
 var name = "geonetwork-ui";
-var version = "2.11.0-dev.96d0c6ce2";
+var version = "2.11.0-dev.9bd41a961";
 var engines = {
 	node: ">=24"
 };
@@ -20390,6 +20460,7 @@ var peerDependencies = {
 	"@angular/core": "19.x || 20.x || 21.x",
 	"@angular/forms": "19.x || 20.x || 21.x",
 	"@angular/material": "19.x || 20.x || 21.x",
+	"@angular/material-date-fns-adapter": "19.x || 20.x",
 	"@angular/platform-browser": "19.x || 20.x || 21.x",
 	"@angular/platform-browser-dynamic": "19.x || 20.x || 21.x",
 	"@angular/router": "19.x || 20.x || 21.x",
@@ -20399,20 +20470,21 @@ var peerDependencies = {
 	"@ngrx/store": "19.x || 20.x || 21.x",
 	"@ngrx/store-devtools": "19.x || 20.x || 21.x",
 	"@ngrx/operators": "19.x || 20.x || 21.x",
-	"@ngx-translate/core": "16.x",
-	"@ngx-translate/http-loader": "16.x",
-	"flag-icons": "^7.3.2",
+	"@ngx-translate/core": "17.x",
+	"@ngx-translate/http-loader": "17.x",
+	"flag-icons": "~7.5.0",
 	rxjs: "7.x",
 	"zone.js": "*",
 	tailwindcss: "3.x"
 };
 var dependencies = {
 	"@biesbjerg/ngx-translate-extract-marker": "~1.0.0",
-	"@camptocamp/ogc-client": "1.3.1-dev.bb345f0",
-	"@geospatial-sdk/core": "0.0.5-dev.61",
-	"@geospatial-sdk/geocoding": "0.0.5-dev.61",
-	"@geospatial-sdk/legend": "0.0.5-dev.61",
-	"@geospatial-sdk/openlayers": "0.0.5-dev.61",
+	"@camptocamp/ogc-client": "1.3.1-dev.200c02a",
+	"@duckdb/duckdb-wasm": "~1.32.0",
+	"@geospatial-sdk/core": "0.0.5-dev.78",
+	"@geospatial-sdk/geocoding": "0.0.5-dev.78",
+	"@geospatial-sdk/legend": "0.0.5-dev.78",
+	"@geospatial-sdk/openlayers": "0.0.5-dev.78",
 	"@ltd/j-toml": "~1.38.0",
 	"@messageformat/core": "~3.4.0",
 	"@ng-icons/core": "~32.5.0",
@@ -20420,7 +20492,7 @@ var dependencies = {
 	"@ng-icons/material-icons": "~32.5.0",
 	"@ng-icons/tabler-icons": "~32.4.0",
 	"@rgrove/parse-xml": "4.2.0",
-	alasql: "~4.17.0",
+	"apache-arrow": "~17.0.0",
 	"chart.js": "~4.5.1",
 	"chroma-js": "~3.2.0",
 	"date-fns": "4.1.0",
@@ -20433,7 +20505,6 @@ var dependencies = {
 	"ngx-dropzone": "~3.1.0",
 	"ngx-translate-messageformat-compiler": "~7.2.0",
 	ol: "~10.8.0",
-	papaparse: "~5.5.3",
 	proj4: "~2.20.4",
 	rdflib: "~2.3.5",
 	semver: "~7.7.4",
@@ -20631,8 +20702,8 @@ class ElasticsearchService {
             if (!payload.runtime_mappings)
                 payload.runtime_mappings = {};
             payload.runtime_mappings[fieldName] = {
-                type: 'keyword',
-                script: this.runtimeFields[fieldName],
+                type: this.runtimeFields[fieldName].type,
+                script: this.runtimeFields[fieldName].script,
             };
         };
         const lookForField = (node) => {
@@ -20652,6 +20723,12 @@ class ElasticsearchService {
                     (node[runtimeField] === 'asc' || node[runtimeField] === 'desc')) {
                     addMapping(runtimeField);
                 }
+                if (runtimeField in node &&
+                    typeof node[runtimeField] === 'object' &&
+                    node[runtimeField] !== null &&
+                    ('gte' in node[runtimeField] || 'lte' in node[runtimeField])) {
+                    addMapping(runtimeField);
+                }
                 if ('query' in node &&
                     typeof node.query === 'string' &&
                     node.query.indexOf(runtimeField + ':') > -1) {
@@ -20668,8 +20745,8 @@ class ElasticsearchService {
         lookForField(payload.query);
         return payload;
     }
-    registerRuntimeField(fieldName, expression) {
-        this.runtimeFields[fieldName] = expression;
+    registerRuntimeField(fieldName, expression, type = 'keyword') {
+        this.runtimeFields[fieldName] = { script: expression, type };
     }
     getMetadataByIdsPayload(uuids) {
         return {
@@ -20678,6 +20755,7 @@ class ElasticsearchService {
                     values: uuids,
                 },
             },
+            size: uuids.length,
         };
     }
     getRelatedRecordPayload(record, size = 6, _source = [...ES_SOURCE_SUMMARY, 'createDate']) {
@@ -20728,10 +20806,28 @@ class ElasticsearchService {
         };
     }
     buildPayloadSort(sortBy) {
-        if (sortBy === null)
+        if (!sortBy || sortBy.length === 0)
             return undefined;
-        const fields = Array.isArray(sortBy[0]) ? sortBy : [sortBy];
-        return fields.map((field) => ({ [field[1]]: field[0] }));
+        const fields = Array.isArray(sortBy[0])
+            ? sortBy
+            : [sortBy];
+        return fields.map((field) => {
+            // Sort by nested array of dates only works with the explicit syntax
+            if (field[1].endsWith('.date')) {
+                const nestedPath = field[1].slice(0, field[1].lastIndexOf('.date'));
+                return {
+                    [field[1]]: {
+                        order: field[0],
+                        mode: field[0] === 'desc' ? 'max' : 'min',
+                        missing: '_last',
+                        nested: {
+                            path: nestedPath,
+                        },
+                    },
+                };
+            }
+            return { [field[1]]: field[0] };
+        });
     }
     injectLangInQueryStringFields(queryFieldsPriority) {
         const queryLang = this.getQueryLang();
@@ -20767,7 +20863,49 @@ class ElasticsearchService {
     isCurrentSearchLang() {
         return this.metadataLang === 'current';
     }
-    filtersToQuery(filters) {
+    findSpatialFilterExtent(filters) {
+        if (typeof filters === 'string') {
+            return undefined;
+        }
+        return Object.values(filters).find(isBoundingBox);
+    }
+    // if a field registered min/max runtime fields, its dates form an interval
+    // the record matches if that interval intersects the filter range
+    buildDateRangeQuery(searchField, dateRange) {
+        const minField = `${searchField}Min`;
+        const maxField = `${searchField}Max`;
+        if (minField in this.runtimeFields && maxField in this.runtimeFields) {
+            const filter = [
+                dateRange.start && {
+                    range: {
+                        [maxField]: {
+                            gte: formatDate(dateRange.start),
+                            format: 'yyyy-MM-dd',
+                        },
+                    },
+                },
+                dateRange.end && {
+                    range: {
+                        [minField]: {
+                            lte: formatDate(dateRange.end),
+                            format: 'yyyy-MM-dd',
+                        },
+                    },
+                },
+            ].filter(Boolean);
+            return { bool: { filter } };
+        }
+        return {
+            range: {
+                [searchField]: {
+                    ...(dateRange.start && { gte: formatDate(dateRange.start) }),
+                    ...(dateRange.end && { lte: formatDate(dateRange.end) }),
+                    format: 'yyyy-MM-dd',
+                },
+            },
+        };
+    }
+    filtersToQuery(filters, spatialFilterExtent = this.findSpatialFilterExtent(filters)) {
         const addQuote = (key) => (/^\/.+\/$/.test(key) ? key : `"${key}"`);
         const makeQuery = (filter) => {
             if (typeof filter === 'string') {
@@ -20786,7 +20924,9 @@ class ElasticsearchService {
             ? filters
             : Object.keys(filters)
                 .filter((fieldname) => fieldname !== 'gn-ui-crossFieldFilter')
+                .filter((fieldname) => !isBoundingBox(filters[fieldname]))
                 .filter((fieldname) => !isDateRange(filters[fieldname]))
+                .filter((fieldname) => !Array.isArray(filters[fieldname]))
                 .filter((fieldname) => filters[fieldname] &&
                 JSON.stringify(filters[fieldname]) !== '{}')
                 .map((fieldname) => `${fieldname}:(${makeQuery(filters[fieldname])})`)
@@ -20794,31 +20934,26 @@ class ElasticsearchService {
         if (filters['gn-ui-crossFieldFilter']) {
             queryString = `${queryString} AND (${filters['gn-ui-crossFieldFilter']})`;
         }
-        const queryRange = Object.entries(filters)
-            .filter(([, value]) => isDateRange(value))
-            .map(([searchField, dateRange]) => {
-            return {
-                searchField,
-                dateRange,
-            };
-        })[0];
+        const queryRanges = Object.entries(filters).filter(([, value]) => isDateRange(value));
         const queryParts = [
             queryString && {
                 query_string: {
                     query: queryString,
                 },
             },
-            queryRange &&
-                queryRange.dateRange && {
-                range: {
-                    [queryRange.searchField]: {
-                        ...(queryRange.dateRange.start && {
-                            gte: formatDate(queryRange.dateRange.start),
-                        }),
-                        ...(queryRange.dateRange.end && {
-                            lte: formatDate(queryRange.dateRange.end),
-                        }),
-                        format: 'yyyy-MM-dd',
+            ...queryRanges.map(([searchField, dateRange]) => this.buildDateRangeQuery(searchField, dateRange)),
+            spatialFilterExtent && {
+                geo_shape: {
+                    geom: {
+                        shape: {
+                            type: 'envelope',
+                            // spatialFilterExtent is [minX, minY, maxX, maxY]; envelope coordinates are [top-left, bottom-right]
+                            coordinates: [
+                                [spatialFilterExtent[0], spatialFilterExtent[3]],
+                                [spatialFilterExtent[2], spatialFilterExtent[1]],
+                            ],
+                        },
+                        relation: 'intersects',
                     },
                 },
             },
@@ -20848,7 +20983,9 @@ class ElasticsearchService {
                 },
             });
         }
-        const queryFilters = this.filtersToQuery(fieldSearchFilters);
+        // a spatial extent filter takes precedence over the preference geometry for boosting
+        const spatialFilterExtent = this.findSpatialFilterExtent(fieldSearchFilters);
+        const queryFilters = this.filtersToQuery(fieldSearchFilters, spatialFilterExtent);
         if (queryFilters) {
             filter.push(...queryFilters);
         }
@@ -20859,7 +20996,10 @@ class ElasticsearchService {
                 },
             });
         }
-        if (geometry) {
+        const boostGeometry = spatialFilterExtent
+            ? bboxToPolygon(spatialFilterExtent)
+            : geometry;
+        if (boostGeometry) {
             // boosts applied using the filter geometry:
             // * records completely within the geometry receive a boost of 5
             // * records intersecting the geometry receive a boost of 2
@@ -20868,7 +21008,7 @@ class ElasticsearchService {
             should.push({
                 geo_shape: {
                     geom: {
-                        shape: geometry,
+                        shape: boostGeometry,
                         relation: 'within',
                     },
                     boost: 5.0,
@@ -20876,7 +21016,7 @@ class ElasticsearchService {
             }, {
                 geo_shape: {
                     geom: {
-                        shape: geometry,
+                        shape: boostGeometry,
                         relation: 'intersects',
                     },
                     boost: 2.0,
@@ -20885,7 +21025,7 @@ class ElasticsearchService {
             // this will boost the results variably depending on their distance from the given geometry
             // note: this takes into account the `location` field of a record; this is generally the center of all spatial extents
             // combined, and thus the actual size/coverage of the record spatial extent isn't relevant here
-            const bbox = getGeometryBoundingBox(geometry);
+            const bbox = getGeometryBoundingBox(boostGeometry);
             const center = [(bbox[0] + bbox[2]) / 2, (bbox[1] + bbox[3]) / 2];
             const northToCenter = new LineString([
                 [center[0], bbox[3]],
@@ -21211,7 +21351,7 @@ class Gn4Repository {
     }
     getRecord(uniqueIdentifier) {
         return this.gn4SearchApi
-            .search('bucket', ['fcats', 'hassources'], JSON.stringify(this.gn4SearchHelper.getMetadataByIdsPayload([uniqueIdentifier])))
+            .search('bucket', ['fcats', 'hassources', 'siblings', 'associated'], JSON.stringify(this.gn4SearchHelper.getMetadataByIdsPayload([uniqueIdentifier])))
             .pipe(map$1((results) => results.hits.hits[0]), switchMap((record) => record ? this.gn4Mapper.readRecord(record) : of(null)));
     }
     getMultipleRecords(uniqueIdentifiers) {
@@ -21265,19 +21405,28 @@ class Gn4Repository {
             .search('bucket', null, JSON.stringify(this.gn4SearchHelper.getRelatedRecordPayload(similarTo, 3)))
             .pipe(switchMap((results) => this.gn4Mapper.readRecords(results.hits.hits)));
     }
-    getSources(record) {
-        const sourcesIdentifiers = record.extras?.['sourcesIdentifiers'];
-        if (sourcesIdentifiers && sourcesIdentifiers.length > 0) {
-            return this.getMultipleRecords(sourcesIdentifiers);
-        }
-        return of(null);
-    }
-    getSourceOf(record) {
-        const sourceOfIdentifiers = record.extras?.['sourceOfIdentifiers'];
-        if (sourceOfIdentifiers && sourceOfIdentifiers.length > 0) {
-            return this.getMultipleRecords(sourceOfIdentifiers);
+    getLinkedRecords(record) {
+        const siblings = (record.extras?.['siblings'] ?? []);
+        const relations = [
+            ['source', (record.extras?.['sourcesIdentifiers'] ?? [])],
+            ['sourceOf', (record.extras?.['sourceOfIdentifiers'] ?? [])],
+            ['sibling', siblings.map(({ uniqueIdentifier }) => uniqueIdentifier)],
+            [
+                'associated',
+                (record.extras?.['associatedIdentifiers'] ?? []),
+            ],
+        ];
+        const requested = relations.filter(([, identifiers]) => identifiers.length > 0);
+        if (requested.length === 0) {
+            return of([]);
         }
-        return of(null);
+        return forkJoin(requested.map(([relation, identifiers]) => this.getMultipleRecords(identifiers).pipe(map$1((records) => (records ?? []).map((record) => ({
+            record,
+            relation,
+            associationType: relation === 'sibling'
+                ? siblings.find(({ uniqueIdentifier }) => uniqueIdentifier === record.uniqueIdentifier)?.associationType
+                : undefined,
+        }))), catchError(() => of([]))))).pipe(map$1((groups) => groups.flat()));
     }
     aggregate(params) {
         // if aggregations are empty, return an empty object right away
@@ -22466,48 +22615,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
             type: Injectable
         }] });
 
-const GEOCODING_PROVIDER = new InjectionToken('geocoding-provider');
-class GeocodingService {
-    constructor() {
-        this.provider = inject(GEOCODING_PROVIDER);
-    }
-    query(text) {
-        let queryObservable;
-        switch (this.provider[0]) {
-            case 'geoadmin':
-                queryObservable = from(queryGeoadmin(text, this.provider[1]));
-                break;
-            case 'geonames':
-                queryObservable = from(queryGeonames(text, this.provider[1]));
-                break;
-            case 'data-gouv-fr':
-                queryObservable = from(queryDataGouvFr(text, this.provider[1]));
-                break;
-            default:
-                return throwError(() => new Error(`Unsupported geocoding provider: ${this.provider[0]}`));
-        }
-        return queryObservable.pipe(catchError((error) => throwError(error)));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GeocodingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GeocodingService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GeocodingService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 class FeatureMapModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FeatureMapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: FeatureMapModule, imports: [i1.StoreFeatureModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FeatureMapModule, providers: [
-            MapFacade,
-            {
-                provide: GEOCODING_PROVIDER,
-                useValue: ['geonames', { maxRows: 5 }],
-            },
-        ], imports: [StoreModule.forFeature(MAP_FEATURE_KEY, mapReducer)] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FeatureMapModule, providers: [MapFacade], imports: [StoreModule.forFeature(MAP_FEATURE_KEY, mapReducer)] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FeatureMapModule, decorators: [{
             type: NgModule,
@@ -22515,13 +22626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     imports: [
                         StoreModule.forFeature(MAP_FEATURE_KEY, mapReducer),
                     ],
-                    providers: [
-                        MapFacade,
-                        {
-                            provide: GEOCODING_PROVIDER,
-                            useValue: ['geonames', { maxRows: 5 }],
-                        },
-                    ],
+                    providers: [MapFacade],
                 }]
         }] });
 
@@ -22538,9 +22643,10 @@ const VECTOR_STYLE_DEFAULT = new InjectionToken('vectorStyleDefault', {
 });
 
 const DEFAULT_BASEMAP_LAYER = {
-    type: 'xyz',
-    url: `https://{a-c}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
-    attributions: `<span>© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/">Carto</a></span>`,
+    type: 'maplibre-style',
+    styleUrl: `https://basemaps.cartocdn.com/gl/positron-gl-style/style.json`,
+    clickable: false,
+    hoverable: false,
 };
 const DEFAULT_VIEW = {
     center: [0, 15],
@@ -23255,6 +23361,7 @@ function loadAppConfig(configUrl = 'assets/configuration/default.toml') {
             'search_preset',
             'advanced_filters',
             'limit',
+            'spatial_extent_max_file_size',
         ], warnings, errors);
         const parsedSearchParams = parseMultiConfigSection(parsed, 'search_preset', ['name'], ['sort', 'filters'], warnings, errors);
         searchConfig =
@@ -23272,6 +23379,7 @@ function loadAppConfig(configUrl = 'assets/configuration/default.toml') {
                     })),
                     ADVANCED_FILTERS: parsedSearchSection.advanced_filters,
                     LIMIT: parsedSearchSection.limit,
+                    SPATIAL_EXTENT_MAX_FILE_SIZE: parsedSearchSection.spatial_extent_max_file_size,
                 };
         const parsedMetadataQualitySection = parseConfigSection(parsed, 'metadata-quality', [], ['enabled'], warnings, errors);
         metadataQualityConfig =
@@ -24329,7 +24437,7 @@ class AutocompleteComponent {
         this.enterBtnPosition = event.target['value'].length * 8 + 80;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AutocompleteComponent, isStandalone: true, selector: "gn-ui-autocomplete", inputs: { placeholder: "placeholder", enterButton: "enterButton", action: "action", value: "value", clearOnSelection: "clearOnSelection", preventCompleteOnSelection: "preventCompleteOnSelection", autoFocus: "autoFocus", minCharacterCount: "minCharacterCount", allowSubmit: "allowSubmit", forceTrackPosition: "forceTrackPosition", displayWithFn: "displayWithFn" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted", inputCleared: "inputCleared", isSearchActive: "isSearchActive" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AutocompleteComponent, isStandalone: true, selector: "gn-ui-autocomplete", inputs: { placeholder: "placeholder", enterButton: "enterButton", action: "action", value: "value", clearOnSelection: "clearOnSelection", preventCompleteOnSelection: "preventCompleteOnSelection", autoFocus: "autoFocus", minCharacterCount: "minCharacterCount", allowSubmit: "allowSubmit", forceTrackPosition: "forceTrackPosition", displayWithTemplate: "displayWithTemplate", displayWithFn: "displayWithFn" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted", inputCleared: "inputCleared", isSearchActive: "isSearchActive" }, providers: [
             provideIcons({
                 iconoirSearch,
                 matClose,
@@ -24338,7 +24446,7 @@ class AutocompleteComponent {
             provideNgIconsConfig({
                 size: '1.75rem',
             }),
-        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  @if (!allowSubmit) {\n    <div\n      class=\"absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none\"\n    >\n      <ng-icon name=\"iconoirSearch\" class=\"text-primary search\"></ng-icon>\n    </div>\n  }\n  <div class=\"flex flex-row\">\n    <input\n      #searchInput\n      type=\"text\"\n      class=\"gn-ui-text-input\"\n      (input)=\"handleInput($event)\"\n      [placeholder]=\"placeholder\"\n      [formControl]=\"control\"\n      [matAutocomplete]=\"auto\"\n      (keyup.enter)=\"handleSearch()\"\n      [ngClass]=\"{\n        'text-primary': searchActive && enterButton,\n        'text-gray-900': !searchActive,\n        'px-[--icon-width]': !allowSubmit,\n      }\"\n    />\n    @if (searchInput.value && displayEnterBtn) {\n      <gn-ui-button\n        type=\"gray\"\n        extraClass=\"w-32 h-8 !opacity-100\"\n        [ngStyle]=\"{ left: enterBtnPosition + 'px' }\"\n        class=\"absolute\"\n        disabled=\"true\"\n      >\n        <ng-icon\n          name=\"iconoirLongArrowDownLeft\"\n          class=\"!w-4 text-gray-900 font-bold\"\n        ></ng-icon>\n        <span translate class=\"text-bold text-gray-900 font-bold\">\n          Enter to search\n        </span>\n      </gn-ui-button>\n    }\n  </div>\n  @if (searchInput.value) {\n    <gn-ui-button\n      type=\"primary\"\n      [extraClass]=\"getExtraClass()\"\n      data-test=\"clear-btn\"\n      aria-label=\"Clear\"\n      (buttonClick)=\"clear()\"\n    >\n      <ng-icon class=\"text-white\" name=\"matClose\"></ng-icon>\n    </gn-ui-button>\n  }\n  @if (allowSubmit) {\n    <gn-ui-button\n      type=\"light\"\n      extraClass=\"border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]\"\n      aria-label=\"Trigger search\"\n      data-test=\"autocomplete-submit-btn\"\n      (buttonClick)=\"handleSearch()\"\n    >\n      <ng-icon name=\"iconoirSearch\"></ng-icon>\n    </gn-ui-button>\n  }\n\n  @if (error) {\n    <gn-ui-popup-alert\n      class=\"absolute mt-2 w-full top-[100%] left-0\"\n      icon=\"matErrorOutlineOutline\"\n      position=\"top\"\n      type=\"warning\"\n    >\n      <span translate>search.autocomplete.error</span>\n      {{ error }}\n    </gn-ui-popup-alert>\n  }\n</span>\n\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFnInternal\"\n>\n  @for (suggestion of suggestions$ | async; track suggestion) {\n    <mat-option [value]=\"suggestion\" class=\"p-2 suggestion text-start\">\n      {{ displayWithFnInternal(suggestion) }}\n    </mat-option>\n  }\n</mat-autocomplete>\n", styles: ["span{--icon-padding: var(--gn-ui-text-input-border-size, 2px);--icon-width: calc(var(--gn-ui-text-input-padding, .6em) * 2 + 1.25em)}span>*:not(gn-ui-popup-alert){font-size:var(--gn-ui-text-input-font-size, 1em)}input:placeholder-shown{text-overflow:ellipsis}gn-ui-button{--gn-ui-button-rounded: 0;--gn-ui-button-width: var(--icon-width);--gn-ui-button-padding: 0;font-size:1em}ng-icon.search{margin-top:.6rem;margin-left:.6rem}gn-ui-button:last-of-type{--gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, .25em) var(--gn-ui-text-input-rounded, .25em) 0}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i1$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }, { propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  @if (!allowSubmit) {\n    <div\n      class=\"absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none\"\n    >\n      <ng-icon name=\"iconoirSearch\" class=\"text-primary search\"></ng-icon>\n    </div>\n  }\n  <div class=\"flex flex-row\">\n    <input\n      #searchInput\n      type=\"text\"\n      class=\"gn-ui-text-input\"\n      (input)=\"handleInput($event)\"\n      [placeholder]=\"placeholder\"\n      [formControl]=\"control\"\n      [matAutocomplete]=\"auto\"\n      (keyup.enter)=\"handleSearch()\"\n      [ngClass]=\"{\n        'text-primary': searchActive && enterButton,\n        'text-gray-900': !searchActive,\n        'px-[--icon-width]': !allowSubmit,\n      }\"\n    />\n    @if (searchInput.value && displayEnterBtn) {\n      <gn-ui-button\n        type=\"gray\"\n        extraClass=\"w-32 h-8 !opacity-100\"\n        [ngStyle]=\"{ left: enterBtnPosition + 'px' }\"\n        class=\"absolute\"\n        disabled=\"true\"\n      >\n        <ng-icon\n          name=\"iconoirLongArrowDownLeft\"\n          class=\"!w-4 text-gray-900 font-bold\"\n        ></ng-icon>\n        <span translate class=\"text-bold text-gray-900 font-bold\">\n          Enter to search\n        </span>\n      </gn-ui-button>\n    }\n  </div>\n  @if (searchInput.value) {\n    <gn-ui-button\n      type=\"primary\"\n      [extraClass]=\"getExtraClass()\"\n      data-test=\"clear-btn\"\n      aria-label=\"Clear\"\n      (buttonClick)=\"clear()\"\n    >\n      <ng-icon class=\"text-white\" name=\"matClose\"></ng-icon>\n    </gn-ui-button>\n  }\n  @if (allowSubmit) {\n    <gn-ui-button\n      type=\"light\"\n      extraClass=\"border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]\"\n      aria-label=\"Trigger search\"\n      data-test=\"autocomplete-submit-btn\"\n      (buttonClick)=\"handleSearch()\"\n    >\n      <ng-icon name=\"iconoirSearch\"></ng-icon>\n    </gn-ui-button>\n  }\n\n  @if (error) {\n    <gn-ui-popup-alert\n      class=\"absolute mt-2 w-full top-[100%] left-0\"\n      icon=\"matErrorOutlineOutline\"\n      position=\"top\"\n      type=\"warning\"\n    >\n      <span translate>search.autocomplete.error</span>\n      {{ error }}\n    </gn-ui-popup-alert>\n  }\n</span>\n\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFnInternal\"\n>\n  @for (suggestion of suggestions$ | async; track suggestion) {\n    <mat-option [value]=\"suggestion\" class=\"p-2 suggestion text-start\">\n      @if (displayWithTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            displayWithTemplate;\n            context: { $implicit: suggestion }\n          \"\n        ></ng-container>\n      } @else {\n        {{ displayWithFnInternal(suggestion) }}\n      }\n    </mat-option>\n  }\n</mat-autocomplete>\n", styles: ["span{--icon-padding: var(--gn-ui-text-input-border-size, 2px);--icon-width: calc(var(--gn-ui-text-input-padding, .6em) * 2 + 1.25em)}span>*:not(gn-ui-popup-alert){font-size:var(--gn-ui-text-input-font-size, 1em)}input:placeholder-shown{text-overflow:ellipsis}gn-ui-button{--gn-ui-button-rounded: 0;--gn-ui-button-width: var(--icon-width);--gn-ui-button-padding: 0;font-size:1em}ng-icon.search{margin-top:.6rem;margin-left:.6rem}gn-ui-button:last-of-type{--gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, .25em) var(--gn-ui-text-input-rounded, .25em) 0}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"], dependencies: [{ kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i1$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -24359,7 +24467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         provideNgIconsConfig({
                             size: '1.75rem',
                         }),
-                    ], template: "<span class=\"w-full inline-block relative\">\n  @if (!allowSubmit) {\n    <div\n      class=\"absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none\"\n    >\n      <ng-icon name=\"iconoirSearch\" class=\"text-primary search\"></ng-icon>\n    </div>\n  }\n  <div class=\"flex flex-row\">\n    <input\n      #searchInput\n      type=\"text\"\n      class=\"gn-ui-text-input\"\n      (input)=\"handleInput($event)\"\n      [placeholder]=\"placeholder\"\n      [formControl]=\"control\"\n      [matAutocomplete]=\"auto\"\n      (keyup.enter)=\"handleSearch()\"\n      [ngClass]=\"{\n        'text-primary': searchActive && enterButton,\n        'text-gray-900': !searchActive,\n        'px-[--icon-width]': !allowSubmit,\n      }\"\n    />\n    @if (searchInput.value && displayEnterBtn) {\n      <gn-ui-button\n        type=\"gray\"\n        extraClass=\"w-32 h-8 !opacity-100\"\n        [ngStyle]=\"{ left: enterBtnPosition + 'px' }\"\n        class=\"absolute\"\n        disabled=\"true\"\n      >\n        <ng-icon\n          name=\"iconoirLongArrowDownLeft\"\n          class=\"!w-4 text-gray-900 font-bold\"\n        ></ng-icon>\n        <span translate class=\"text-bold text-gray-900 font-bold\">\n          Enter to search\n        </span>\n      </gn-ui-button>\n    }\n  </div>\n  @if (searchInput.value) {\n    <gn-ui-button\n      type=\"primary\"\n      [extraClass]=\"getExtraClass()\"\n      data-test=\"clear-btn\"\n      aria-label=\"Clear\"\n      (buttonClick)=\"clear()\"\n    >\n      <ng-icon class=\"text-white\" name=\"matClose\"></ng-icon>\n    </gn-ui-button>\n  }\n  @if (allowSubmit) {\n    <gn-ui-button\n      type=\"light\"\n      extraClass=\"border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]\"\n      aria-label=\"Trigger search\"\n      data-test=\"autocomplete-submit-btn\"\n      (buttonClick)=\"handleSearch()\"\n    >\n      <ng-icon name=\"iconoirSearch\"></ng-icon>\n    </gn-ui-button>\n  }\n\n  @if (error) {\n    <gn-ui-popup-alert\n      class=\"absolute mt-2 w-full top-[100%] left-0\"\n      icon=\"matErrorOutlineOutline\"\n      position=\"top\"\n      type=\"warning\"\n    >\n      <span translate>search.autocomplete.error</span>\n      {{ error }}\n    </gn-ui-popup-alert>\n  }\n</span>\n\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFnInternal\"\n>\n  @for (suggestion of suggestions$ | async; track suggestion) {\n    <mat-option [value]=\"suggestion\" class=\"p-2 suggestion text-start\">\n      {{ displayWithFnInternal(suggestion) }}\n    </mat-option>\n  }\n</mat-autocomplete>\n", styles: ["span{--icon-padding: var(--gn-ui-text-input-border-size, 2px);--icon-width: calc(var(--gn-ui-text-input-padding, .6em) * 2 + 1.25em)}span>*:not(gn-ui-popup-alert){font-size:var(--gn-ui-text-input-font-size, 1em)}input:placeholder-shown{text-overflow:ellipsis}gn-ui-button{--gn-ui-button-rounded: 0;--gn-ui-button-width: var(--icon-width);--gn-ui-button-padding: 0;font-size:1em}ng-icon.search{margin-top:.6rem;margin-left:.6rem}gn-ui-button:last-of-type{--gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, .25em) var(--gn-ui-text-input-rounded, .25em) 0}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"] }]
+                    ], template: "<span class=\"w-full inline-block relative\">\n  @if (!allowSubmit) {\n    <div\n      class=\"absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none\"\n    >\n      <ng-icon name=\"iconoirSearch\" class=\"text-primary search\"></ng-icon>\n    </div>\n  }\n  <div class=\"flex flex-row\">\n    <input\n      #searchInput\n      type=\"text\"\n      class=\"gn-ui-text-input\"\n      (input)=\"handleInput($event)\"\n      [placeholder]=\"placeholder\"\n      [formControl]=\"control\"\n      [matAutocomplete]=\"auto\"\n      (keyup.enter)=\"handleSearch()\"\n      [ngClass]=\"{\n        'text-primary': searchActive && enterButton,\n        'text-gray-900': !searchActive,\n        'px-[--icon-width]': !allowSubmit,\n      }\"\n    />\n    @if (searchInput.value && displayEnterBtn) {\n      <gn-ui-button\n        type=\"gray\"\n        extraClass=\"w-32 h-8 !opacity-100\"\n        [ngStyle]=\"{ left: enterBtnPosition + 'px' }\"\n        class=\"absolute\"\n        disabled=\"true\"\n      >\n        <ng-icon\n          name=\"iconoirLongArrowDownLeft\"\n          class=\"!w-4 text-gray-900 font-bold\"\n        ></ng-icon>\n        <span translate class=\"text-bold text-gray-900 font-bold\">\n          Enter to search\n        </span>\n      </gn-ui-button>\n    }\n  </div>\n  @if (searchInput.value) {\n    <gn-ui-button\n      type=\"primary\"\n      [extraClass]=\"getExtraClass()\"\n      data-test=\"clear-btn\"\n      aria-label=\"Clear\"\n      (buttonClick)=\"clear()\"\n    >\n      <ng-icon class=\"text-white\" name=\"matClose\"></ng-icon>\n    </gn-ui-button>\n  }\n  @if (allowSubmit) {\n    <gn-ui-button\n      type=\"light\"\n      extraClass=\"border-0 border-l-[1px] border-gray-300 hover:border-gray-500 text-primary hover:text-primary-darkest focus:text-primary-darkest absolute inset-y-[--icon-padding] right-[--icon-padding]\"\n      aria-label=\"Trigger search\"\n      data-test=\"autocomplete-submit-btn\"\n      (buttonClick)=\"handleSearch()\"\n    >\n      <ng-icon name=\"iconoirSearch\"></ng-icon>\n    </gn-ui-button>\n  }\n\n  @if (error) {\n    <gn-ui-popup-alert\n      class=\"absolute mt-2 w-full top-[100%] left-0\"\n      icon=\"matErrorOutlineOutline\"\n      position=\"top\"\n      type=\"warning\"\n    >\n      <span translate>search.autocomplete.error</span>\n      {{ error }}\n    </gn-ui-popup-alert>\n  }\n</span>\n\n<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  (optionSelected)=\"handleSelection($event)\"\n  [displayWith]=\"displayWithFnInternal\"\n>\n  @for (suggestion of suggestions$ | async; track suggestion) {\n    <mat-option [value]=\"suggestion\" class=\"p-2 suggestion text-start\">\n      @if (displayWithTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            displayWithTemplate;\n            context: { $implicit: suggestion }\n          \"\n        ></ng-container>\n      } @else {\n        {{ displayWithFnInternal(suggestion) }}\n      }\n    </mat-option>\n  }\n</mat-autocomplete>\n", styles: ["span{--icon-padding: var(--gn-ui-text-input-border-size, 2px);--icon-width: calc(var(--gn-ui-text-input-padding, .6em) * 2 + 1.25em)}span>*:not(gn-ui-popup-alert){font-size:var(--gn-ui-text-input-font-size, 1em)}input:placeholder-shown{text-overflow:ellipsis}gn-ui-button{--gn-ui-button-rounded: 0;--gn-ui-button-width: var(--icon-width);--gn-ui-button-padding: 0;font-size:1em}ng-icon.search{margin-top:.6rem;margin-left:.6rem}gn-ui-button:last-of-type{--gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, .25em) var(--gn-ui-text-input-rounded, .25em) 0}.mat-mdc-option.suggestion.mat-mdc-option-active{background-color:var(--color-primary-lightest)}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], enterButton: [{
@@ -24397,6 +24505,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
             }], inputRef: [{
                 type: ViewChild,
                 args: ['searchInput']
+            }], displayWithTemplate: [{
+                type: Input
             }], displayWithFn: [{
                 type: Input
             }] } });
@@ -24529,12 +24639,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Input
             }] } });
 
+function provideLocalizedDateAdapter() {
+    return [
+        { provide: MAT_DATE_LOCALE, useValue: enUS },
+        { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS },
+        {
+            provide: DateAdapter,
+            useFactory: () => {
+                const dateService = inject(DateService);
+                const adapter = new DateFnsAdapter();
+                dateService
+                    .getDateFnsLocale()
+                    .then((locale) => adapter.setLocale(locale));
+                return adapter;
+            },
+        },
+    ];
+}
+
 class DatePickerComponent {
     constructor() {
-        this.dateAdapter = inject(DateAdapter);
-        this.translate = inject(TranslateService);
         this.dateChange = new EventEmitter();
-        this.dateAdapter.setLocale(this.translate.getCurrentLang());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: DatePickerComponent, isStandalone: true, selector: "gn-ui-date-picker", inputs: { date: "date" }, outputs: { dateChange: "dateChange" }, providers: [
@@ -24542,30 +24667,19 @@ class DatePickerComponent {
             provideNgIconsConfig({
                 size: '1.5rem',
             }),
-            {
-                provide: MAT_DATE_LOCALE,
-                useFactory: (locale) => locale,
-            },
-        ], ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <input\n    class=\"gn-ui-text-input pr-[var(--text-padding)]\"\n    [matDatepicker]=\"picker\"\n    [value]=\"date\"\n    (dateChange)=\"dateChange.emit($event.value)\"\n  />\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    data-cy=\"date-picker-button\"\n    extraClass=\"h-full\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-datepicker #picker></mat-datepicker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"], dependencies: [{ kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            provideLocalizedDateAdapter(),
+        ], ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <input\n    class=\"gn-ui-text-input pr-[var(--text-padding)]\"\n    [matDatepicker]=\"picker\"\n    [value]=\"date\"\n    (dateChange)=\"dateChange.emit($event.value)\"\n  />\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    data-cy=\"date-picker-button\"\n    extraClass=\"h-full\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-datepicker #picker></mat-datepicker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatNativeDateModule,
-                        MatDatepickerModule,
-                        ButtonComponent,
-                        NgIconComponent,
-                    ], providers: [
+            args: [{ selector: 'gn-ui-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatDatepickerModule, ButtonComponent, NgIconComponent], providers: [
                         provideIcons({ iconoirCalendar }),
                         provideNgIconsConfig({
                             size: '1.5rem',
                         }),
-                        {
-                            provide: MAT_DATE_LOCALE,
-                            useFactory: (locale) => locale,
-                        },
+                        provideLocalizedDateAdapter(),
                     ], template: "<span class=\"w-full inline-block relative\">\n  <input\n    class=\"gn-ui-text-input pr-[var(--text-padding)]\"\n    [matDatepicker]=\"picker\"\n    [value]=\"date\"\n    (dateChange)=\"dateChange.emit($event.value)\"\n  />\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    data-cy=\"date-picker-button\"\n    extraClass=\"h-full\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-datepicker #picker></mat-datepicker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { date: [{
+        }], propDecorators: { date: [{
                 type: Input
             }], dateChange: [{
                 type: Output
@@ -24573,58 +24687,159 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 
 class DateRangeDropdownComponent {
     constructor() {
-        this.overlayContainer = inject(OverlayContainer);
+        this.scrollStrategies = inject(ScrollStrategyOptions);
+        this.dateAdapter = inject(DateAdapter);
+        this.dateFormats = inject(MAT_DATE_FORMATS);
         this.cdr = inject(ChangeDetectorRef);
-        this.startDateChange = new EventEmitter();
-        this.endDateChange = new EventEmitter();
-        this.isPickerDisplayed = false;
+        this.dateRange = {};
+        this.dateRangeChange = new EventEmitter();
+        this.overlayPositions = [
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 8,
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -8,
+            },
+        ];
+        this.scrollStrategy = this.scrollStrategies.reposition();
+        this.overlayOpen = false;
+        this.expandedBound = 'start';
+        this.invalidBounds = { start: false, end: false };
+        // redraw when the lazily loaded UI locale reaches the adapter
+        this.dateAdapter.localeChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.cdr.markForCheck());
     }
-    ngAfterViewChecked() {
-        this.checkPickerOverlay();
+    get startDate() {
+        return this.dateRange.start;
     }
-    checkPickerOverlay() {
-        const overlayContainerElement = this.overlayContainer.getContainerElement();
-        setTimeout(() => {
-            this.isPickerDisplayed =
-                overlayContainerElement.querySelector('.mat-datepicker-content') !==
-                    null;
-            this.cdr.detectChanges();
-        }, 200); // FIXME: find a better way to deal with animation delay
+    get endDate() {
+        return this.dateRange.end;
+    }
+    get selectedDatesCount() {
+        return (this.startDate ? 1 : 0) + (this.endDate ? 1 : 0);
+    }
+    openOverlay() {
+        this.expandedBound = 'start';
+        this.overlayOpen = true;
+    }
+    closeOverlay() {
+        this.overlayOpen = false;
+    }
+    toggleBound(bound) {
+        this.expandedBound = this.expandedBound === bound ? null : bound;
+    }
+    formatDate(date) {
+        return this.dateAdapter.format(date, this.dateFormats.display.dateInput);
+    }
+    onDateInput(bound, event) {
+        const typedText = event.target.value.trim();
+        const date = typedText
+            ? this.dateAdapter.parse(typedText, this.dateFormats.parse.dateInput)
+            : null;
+        if (!this.isAcceptable(bound, typedText, date)) {
+            // keep the text as typed and flag it; the filter stays on its last value
+            this.invalidBounds = { ...this.invalidBounds, [bound]: true };
+            return;
+        }
+        if (bound === 'start')
+            this.setStartDate(date);
+        else
+            this.setEndDate(date);
+    }
+    normalizeDateInput(bound, event) {
+        if (this.invalidBounds[bound])
+            return;
+        const date = bound === 'start' ? this.startDate : this.endDate;
+        const input = event.target;
+        input.value = date ? this.formatDate(date) : '';
+    }
+    isAcceptable(bound, typedText, date) {
+        if (!typedText)
+            return true;
+        if (!date || !this.dateAdapter.isValid(date))
+            return false;
+        return bound === 'start'
+            ? !this.endDate || date <= this.endDate
+            : !this.startDate || date >= this.startDate;
+    }
+    setStartDate(date) {
+        this.invalidBounds = { ...this.invalidBounds, start: false };
+        this.applyDateRange({ ...this.dateRange, start: date });
+        this.expandedBound = 'end';
+    }
+    setEndDate(date) {
+        this.invalidBounds = { ...this.invalidBounds, end: false };
+        this.applyDateRange({ ...this.dateRange, end: date });
+        this.expandedBound = null;
+    }
+    clearDates(event) {
+        this.invalidBounds = { start: false, end: false };
+        this.expandedBound = 'start';
+        this.applyDateRange({});
+        propagateToDocumentOnly(event);
+    }
+    applyDateRange(dateRange) {
+        this.dateRange = {
+            ...(dateRange.start && { start: dateRange.start }),
+            ...(dateRange.end && { end: dateRange.end }),
+        };
+        this.dateRangeChange.emit(this.dateRange);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DateRangeDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: DateRangeDropdownComponent, isStandalone: true, selector: "gn-ui-date-range-dropdown", inputs: { title: "title", startDate: "startDate", endDate: "endDate" }, outputs: { startDateChange: "startDateChange", endDateChange: "endDateChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: DateRangeDropdownComponent, isStandalone: true, selector: "gn-ui-date-range-dropdown", inputs: { title: "title", dateRange: "dateRange" }, outputs: { dateRangeChange: "dateRangeChange" }, providers: [
             provideIcons({
-                matExpandMore,
+                iconoirCalendar,
+                matClose,
                 matExpandLess,
+                matExpandMore,
+            }),
+            provideNgIconsConfig({
+                size: '1.5rem',
             }),
-        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  (buttonClick)=\"picker.open()\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n  </div>\n  <ng-icon\n    [name]=\"isPickerDisplayed ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n<!--date range input is just present for output events and hidden from the DOM-->\n<mat-date-range-input [rangePicker]=\"picker\">\n  <input\n    matStartDate\n    [value]=\"startDate\"\n    (dateInput)=\"startDateChange.emit($event.value)\"\n  />\n  <input\n    matEndDate\n    [value]=\"endDate\"\n    (dateInput)=\"endDateChange.emit($event.value)\"\n  />\n</mat-date-range-input>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host .mat-date-range-input-container{display:none}\n"], dependencies: [{ kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$6.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$6.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }] }); }
+            provideLocalizedDateAdapter(),
+        ], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  (buttonClick)=\"openOverlay()\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    @if (selectedDatesCount) {\n      <div\n        class=\"gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n      >\n        {{ selectedDatesCount }}\n      </div>\n    }\n  </div>\n  <button\n    class=\"h-6 w-6 flex items-center justify-center\"\n    data-test=\"dropdown-clear\"\n  >\n    @if (selectedDatesCount && !overlayOpen) {\n      <ng-icon\n        class=\"shrink-0 opacity-40 hover:opacity-80 transition-colors clear-btn\"\n        (click)=\"clearDates($event)\"\n        name=\"matClose\"\n      ></ng-icon>\n    }\n  </button>\n  <ng-icon\n    data-test=\"dropdown-toggle\"\n    [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"w-[296px] flex flex-col gap-2 bg-white border border-gray-400 rounded px-4 py-3 shadow-lg text-main text-[16px] leading-[24px]\"\n    data-test=\"date-range-panel\"\n  >\n    <div class=\"flex flex-col justify-center border-b border-gray-300 pb-1\">\n      <ng-container\n        [ngTemplateOutlet]=\"boundRow\"\n        [ngTemplateOutletContext]=\"{\n          bound: 'start',\n          label: 'daterange.filter.from',\n          date: startDate,\n        }\"\n      ></ng-container>\n      @if (expandedBound === 'start') {\n        <div class=\"calendar\" animate.enter=\"expand\" animate.leave=\"collapse\">\n          <mat-calendar\n            data-test=\"start-date-calendar\"\n            [selected]=\"startDate\"\n            [startAt]=\"startDate ?? endDate\"\n            [maxDate]=\"endDate\"\n            (selectedChange)=\"setStartDate($event)\"\n          ></mat-calendar>\n        </div>\n      }\n    </div>\n    <div class=\"flex flex-col justify-center\">\n      <ng-container\n        [ngTemplateOutlet]=\"boundRow\"\n        [ngTemplateOutletContext]=\"{\n          bound: 'end',\n          label: 'daterange.filter.to',\n          date: endDate,\n        }\"\n      ></ng-container>\n      @if (expandedBound === 'end') {\n        <div class=\"calendar\" animate.enter=\"expand\" animate.leave=\"collapse\">\n          <mat-calendar\n            data-test=\"end-date-calendar\"\n            [selected]=\"endDate\"\n            [startAt]=\"endDate ?? startDate\"\n            [minDate]=\"startDate\"\n            (selectedChange)=\"setEndDate($event)\"\n          ></mat-calendar>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #boundRow let-bound=\"bound\" let-label=\"label\" let-date=\"date\">\n  <div class=\"flex items-center gap-1 w-full\">\n    <span class=\"w-[80px] shrink-0\" [translate]=\"label\"></span>\n    <div\n      class=\"flex-1 min-w-0 flex items-center gap-1 border rounded-lg px-2 py-1 transition-colors\"\n      [class]=\"\n        invalidBounds[bound]\n          ? 'border-red-400 text-red-800 focus-within:border-red-800 hover:border-red-800'\n          : 'border-gray-400 focus-within:border-main hover:border-main'\n      \"\n    >\n      <ng-icon\n        name=\"iconoirCalendar\"\n        class=\"shrink-0\"\n        aria-hidden=\"true\"\n      ></ng-icon>\n      <input\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"off\"\n        [gnUiAutofocus]=\"bound === expandedBound\"\n        class=\"min-w-0 grow bg-transparent focus:outline-none\"\n        [value]=\"date ? formatDate(date) : ''\"\n        [placeholder]=\"'daterange.filter.datePlaceholder' | translate\"\n        [attr.aria-label]=\"label | translate\"\n        [attr.aria-invalid]=\"invalidBounds[bound] || null\"\n        [attr.data-test]=\"bound + '-date-input'\"\n        (change)=\"onDateInput(bound, $event)\"\n        (blur)=\"normalizeDateInput(bound, $event)\"\n        (click)=\"expandedBound !== bound && toggleBound(bound)\"\n      />\n    </div>\n    <div class=\"shrink-0 flex items-center justify-end\">\n      <gn-ui-button\n        type=\"light\"\n        [style.--gn-ui-button-padding]=\"0\"\n        [style.--gn-ui-button-width]=\"'24px'\"\n        [style.--gn-ui-button-height]=\"'24px'\"\n        [attr.aria-expanded]=\"expandedBound === bound\"\n        [attr.data-test]=\"bound + '-date-toggle'\"\n        (buttonClick)=\"toggleBound(bound)\"\n      >\n        <ng-icon\n          [name]=\"expandedBound === bound ? 'matExpandLess' : 'matExpandMore'\"\n        ></ng-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["mat-calendar{width:100%}.calendar{display:grid;grid-template-rows:1fr}.calendar>mat-calendar{min-height:0;overflow:hidden}.calendar.expand{animation:open .2s ease-out}.calendar.collapse{animation:open .2s ease-in reverse}@keyframes open{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@media (prefers-reduced-motion: reduce){.calendar.expand,.calendar.collapse{animation-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: AutofocusDirective, selector: "[gnUiAutofocus]", inputs: ["gnUiAutofocus"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$7.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$7.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DateRangeDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gn-ui-date-range-dropdown', standalone: true, imports: [
-                        NgIconComponent,
-                        MatNativeDateModule,
-                        MatDatepickerModule,
+                        AutofocusDirective,
                         ButtonComponent,
+                        MatDatepickerModule,
+                        NgIcon,
+                        NgTemplateOutlet,
+                        OverlayModule,
+                        TranslateDirective,
+                        TranslatePipe,
                     ], providers: [
                         provideIcons({
-                            matExpandMore,
+                            iconoirCalendar,
+                            matClose,
                             matExpandLess,
+                            matExpandMore,
                         }),
-                    ], template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  (buttonClick)=\"picker.open()\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n  </div>\n  <ng-icon\n    [name]=\"isPickerDisplayed ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n<!--date range input is just present for output events and hidden from the DOM-->\n<mat-date-range-input [rangePicker]=\"picker\">\n  <input\n    matStartDate\n    [value]=\"startDate\"\n    (dateInput)=\"startDateChange.emit($event.value)\"\n  />\n  <input\n    matEndDate\n    [value]=\"endDate\"\n    (dateInput)=\"endDateChange.emit($event.value)\"\n  />\n</mat-date-range-input>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host .mat-date-range-input-container{display:none}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], startDate: [{
+                        provideNgIconsConfig({
+                            size: '1.5rem',
+                        }),
+                        provideLocalizedDateAdapter(),
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  (buttonClick)=\"openOverlay()\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    @if (selectedDatesCount) {\n      <div\n        class=\"gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n      >\n        {{ selectedDatesCount }}\n      </div>\n    }\n  </div>\n  <button\n    class=\"h-6 w-6 flex items-center justify-center\"\n    data-test=\"dropdown-clear\"\n  >\n    @if (selectedDatesCount && !overlayOpen) {\n      <ng-icon\n        class=\"shrink-0 opacity-40 hover:opacity-80 transition-colors clear-btn\"\n        (click)=\"clearDates($event)\"\n        name=\"matClose\"\n      ></ng-icon>\n    }\n  </button>\n  <ng-icon\n    data-test=\"dropdown-toggle\"\n    [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"w-[296px] flex flex-col gap-2 bg-white border border-gray-400 rounded px-4 py-3 shadow-lg text-main text-[16px] leading-[24px]\"\n    data-test=\"date-range-panel\"\n  >\n    <div class=\"flex flex-col justify-center border-b border-gray-300 pb-1\">\n      <ng-container\n        [ngTemplateOutlet]=\"boundRow\"\n        [ngTemplateOutletContext]=\"{\n          bound: 'start',\n          label: 'daterange.filter.from',\n          date: startDate,\n        }\"\n      ></ng-container>\n      @if (expandedBound === 'start') {\n        <div class=\"calendar\" animate.enter=\"expand\" animate.leave=\"collapse\">\n          <mat-calendar\n            data-test=\"start-date-calendar\"\n            [selected]=\"startDate\"\n            [startAt]=\"startDate ?? endDate\"\n            [maxDate]=\"endDate\"\n            (selectedChange)=\"setStartDate($event)\"\n          ></mat-calendar>\n        </div>\n      }\n    </div>\n    <div class=\"flex flex-col justify-center\">\n      <ng-container\n        [ngTemplateOutlet]=\"boundRow\"\n        [ngTemplateOutletContext]=\"{\n          bound: 'end',\n          label: 'daterange.filter.to',\n          date: endDate,\n        }\"\n      ></ng-container>\n      @if (expandedBound === 'end') {\n        <div class=\"calendar\" animate.enter=\"expand\" animate.leave=\"collapse\">\n          <mat-calendar\n            data-test=\"end-date-calendar\"\n            [selected]=\"endDate\"\n            [startAt]=\"endDate ?? startDate\"\n            [minDate]=\"startDate\"\n            (selectedChange)=\"setEndDate($event)\"\n          ></mat-calendar>\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #boundRow let-bound=\"bound\" let-label=\"label\" let-date=\"date\">\n  <div class=\"flex items-center gap-1 w-full\">\n    <span class=\"w-[80px] shrink-0\" [translate]=\"label\"></span>\n    <div\n      class=\"flex-1 min-w-0 flex items-center gap-1 border rounded-lg px-2 py-1 transition-colors\"\n      [class]=\"\n        invalidBounds[bound]\n          ? 'border-red-400 text-red-800 focus-within:border-red-800 hover:border-red-800'\n          : 'border-gray-400 focus-within:border-main hover:border-main'\n      \"\n    >\n      <ng-icon\n        name=\"iconoirCalendar\"\n        class=\"shrink-0\"\n        aria-hidden=\"true\"\n      ></ng-icon>\n      <input\n        type=\"text\"\n        inputmode=\"numeric\"\n        autocomplete=\"off\"\n        [gnUiAutofocus]=\"bound === expandedBound\"\n        class=\"min-w-0 grow bg-transparent focus:outline-none\"\n        [value]=\"date ? formatDate(date) : ''\"\n        [placeholder]=\"'daterange.filter.datePlaceholder' | translate\"\n        [attr.aria-label]=\"label | translate\"\n        [attr.aria-invalid]=\"invalidBounds[bound] || null\"\n        [attr.data-test]=\"bound + '-date-input'\"\n        (change)=\"onDateInput(bound, $event)\"\n        (blur)=\"normalizeDateInput(bound, $event)\"\n        (click)=\"expandedBound !== bound && toggleBound(bound)\"\n      />\n    </div>\n    <div class=\"shrink-0 flex items-center justify-end\">\n      <gn-ui-button\n        type=\"light\"\n        [style.--gn-ui-button-padding]=\"0\"\n        [style.--gn-ui-button-width]=\"'24px'\"\n        [style.--gn-ui-button-height]=\"'24px'\"\n        [attr.aria-expanded]=\"expandedBound === bound\"\n        [attr.data-test]=\"bound + '-date-toggle'\"\n        (buttonClick)=\"toggleBound(bound)\"\n      >\n        <ng-icon\n          [name]=\"expandedBound === bound ? 'matExpandLess' : 'matExpandMore'\"\n        ></ng-icon>\n      </gn-ui-button>\n    </div>\n  </div>\n</ng-template>\n", styles: ["mat-calendar{width:100%}.calendar{display:grid;grid-template-rows:1fr}.calendar>mat-calendar{min-height:0;overflow:hidden}.calendar.expand{animation:open .2s ease-out}.calendar.collapse{animation:open .2s ease-in reverse}@keyframes open{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@media (prefers-reduced-motion: reduce){.calendar.expand,.calendar.collapse{animation-duration:1ms}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
-            }], endDate: [{
+            }], dateRange: [{
                 type: Input
-            }], startDateChange: [{
-                type: Output
-            }], endDateChange: [{
+            }], dateRangeChange: [{
                 type: Output
-            }], picker: [{
+            }], overlayOrigin: [{
                 type: ViewChild,
-                args: ['picker']
+                args: ['overlayOrigin']
             }] } });
 
 class DateRangePickerComponent {
@@ -24638,20 +24853,17 @@ class DateRangePickerComponent {
             provideNgIconsConfig({
                 size: '1.5rem',
             }),
-        ], ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <mat-date-range-input [rangePicker]=\"picker\" class=\"gn-ui-text-input\">\n    <input\n      matStartDate\n      placeholder=\"Start date\"\n      [value]=\"startDate\"\n      (dateInput)=\"startDateChange.emit($event.value)\"\n    />\n    <input\n      matEndDate\n      placeholder=\"End date\"\n      [value]=\"endDate\"\n      (dateInput)=\"endDateChange.emit($event.value)\"\n    />\n  </mat-date-range-input>\n\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    extraClass=\"h-full\"\n    data-cy=\"date-picker-button\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"], dependencies: [{ kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$6.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$6.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            provideLocalizedDateAdapter(),
+        ], ngImport: i0, template: "<span class=\"w-full inline-block relative\">\n  <mat-date-range-input [rangePicker]=\"picker\" class=\"gn-ui-text-input\">\n    <input\n      matStartDate\n      placeholder=\"Start date\"\n      [value]=\"startDate\"\n      (dateInput)=\"startDateChange.emit($event.value)\"\n    />\n    <input\n      matEndDate\n      placeholder=\"End date\"\n      [value]=\"endDate\"\n      (dateInput)=\"endDateChange.emit($event.value)\"\n    />\n  </mat-date-range-input>\n\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    extraClass=\"h-full\"\n    data-cy=\"date-picker-button\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$6.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$6.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1$6.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-date-range-picker', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        MatNativeDateModule,
-                        MatDatepickerModule,
-                        ButtonComponent,
-                        NgIconComponent,
-                    ], providers: [
+            args: [{ selector: 'gn-ui-date-range-picker', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatDatepickerModule, ButtonComponent, NgIconComponent], providers: [
                         provideIcons({ iconoirCalendar }),
                         provideNgIconsConfig({
                             size: '1.5rem',
                         }),
+                        provideLocalizedDateAdapter(),
                     ], template: "<span class=\"w-full inline-block relative\">\n  <mat-date-range-input [rangePicker]=\"picker\" class=\"gn-ui-text-input\">\n    <input\n      matStartDate\n      placeholder=\"Start date\"\n      [value]=\"startDate\"\n      (dateInput)=\"startDateChange.emit($event.value)\"\n    />\n    <input\n      matEndDate\n      placeholder=\"End date\"\n      [value]=\"endDate\"\n      (dateInput)=\"endDateChange.emit($event.value)\"\n    />\n  </mat-date-range-input>\n\n  <gn-ui-button\n    type=\"light\"\n    class=\"absolute inset-y-[var(--side-padding)] right-[var(--side-padding)] z-10\"\n    (buttonClick)=\"picker.open()\"\n    extraClass=\"h-full\"\n    data-cy=\"date-picker-button\"\n  >\n    <ng-icon name=\"iconoirCalendar\" class=\"text-primary\"></ng-icon>\n  </gn-ui-button>\n</span>\n<mat-date-range-picker #picker></mat-date-range-picker>\n", styles: [":host{--gn-ui-button-rounded: 8px;--gn-ui-button-width: 32px;--gn-ui-button-padding: 0;--side-padding: calc(var(--gn-ui-text-input-padding, .6em) - 6px);--text-padding: calc(var(--side-padding) + 40px)}\n"] }]
         }], propDecorators: { startDate: [{
                 type: Input
@@ -24669,28 +24881,68 @@ class DragAndDropFileInputComponent {
     constructor() {
         this.placeholder = placeholder;
         this.accept = '*';
+        this.maxFileSizeMb = null;
+        this.icon = null;
+        this.dropzoneBackgroundColor = null;
+        this.textClass = '';
+        this.extraClass = '';
+        this.showFileName = true;
         this.fileChange = new EventEmitter();
+        this.errorChange = new EventEmitter();
         this.selectedFile = null;
     }
     get fileName() {
         return this.selectedFile && this.selectedFile.name;
     }
+    get maxFileSizeBytes() {
+        return typeof this.maxFileSizeMb === 'number'
+            ? megabytesToBytes(this.maxFileSizeMb)
+            : null;
+    }
     selectFile(event) {
+        if (event.rejectedFiles?.length) {
+            const reason = event.rejectedFiles[0].reason;
+            this.errorChange.emit(reason === 'size' ? 'file-too-large' : 'invalid-extension');
+            return;
+        }
         this.selectedFile = event.addedFiles[0];
         this.fileChange.emit(this.selectedFile);
     }
+    openFileSelector() {
+        this.dropzone.showFileSelector();
+    }
+    clear() {
+        this.selectedFile = null;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DragAndDropFileInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: DragAndDropFileInputComponent, isStandalone: true, 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    @if (!fileName) {\n      <div class=\"text-gray-900 pl-2 py-2\" translate=\"\">\n        {{ placeholder }}\n      </div>\n    }\n\n    @if (fileName) {\n      <div class=\"text-gray-900 pl-2 py-2\">{{ fileName }}</div>\n    }\n  </ngx-dropzone>\n</div>\n", styles: ["ngx-dropzone{height:auto;border:none}\n"], dependencies: [{ kind: "ngmodule", type: NgxDropzoneModule }, { kind: "component", type: i1$7.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: "17.0.0", version: "20.3.19", type: DragAndDropFileInputComponent, isStandalone: true, selector: "gn-ui-drag-and-drop-file-input", inputs: { placeholder: "placeholder", accept: "accept", maxFileSizeMb: "maxFileSizeMb", icon: "icon", dropzoneBackgroundColor: "dropzoneBackgroundColor", textClass: "textClass", extraClass: "extraClass", showFileName: "showFileName" }, outputs: { fileChange: "fileChange", errorChange: "errorChange" }, viewQueries: [{ propertyName: "dropzone", first: true, predicate: NgxDropzoneComponent, descendants: true }], ngImport: i0, template: "<div\n  class=\"flex h-full items-center\"\n  [class]=\"extraClass\"\n  (click)=\"openFileSelector()\"\n>\n  <ngx-dropzone\n    class=\"flex-1 overflow-hidden\"\n    [multiple]=\"false\"\n    [disableClick]=\"true\"\n    [accept]=\"accept\"\n    [maxFileSize]=\"maxFileSizeBytes\"\n    [style.background-color]=\"dropzoneBackgroundColor\"\n    (change)=\"selectFile($event)\"\n  >\n    @if (!fileName || !showFileName) {\n      <div [class]=\"textClass\">\n        {{ placeholder }}\n      </div>\n    }\n\n    @if (fileName && showFileName) {\n      <div [class]=\"textClass\">\n        {{ fileName }}\n      </div>\n    }\n  </ngx-dropzone>\n\n  @if (icon) {\n    <ng-icon [name]=\"icon\" class=\"shrink-0 text-gray-950\"></ng-icon>\n  }\n</div>\n", styles: ["ngx-dropzone{height:auto;border:none;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: NgxDropzoneModule }, { kind: "component", type: i1$8.NgxDropzoneComponent, selector: "ngx-dropzone, [ngx-dropzone]", inputs: ["accept", "disabled", "multiple", "maxFileSize", "expandable", "disableClick", "processDirectoryDrop", "id", "aria-label", "aria-labelledby", "aria-describedby"], outputs: ["change"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DragAndDropFileInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-drag-and-drop-file-input', standalone: true, imports: [NgxDropzoneModule], 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    @if (!fileName) {\n      <div class=\"text-gray-900 pl-2 py-2\" translate=\"\">\n        {{ placeholder }}\n      </div>\n    }\n\n    @if (fileName) {\n      <div class=\"text-gray-900 pl-2 py-2\">{{ fileName }}</div>\n    }\n  </ngx-dropzone>\n</div>\n", styles: ["ngx-dropzone{height:auto;border:none}\n"] }]
+            args: [{ selector: 'gn-ui-drag-and-drop-file-input', standalone: true, imports: [NgxDropzoneModule, NgIcon], template: "<div\n  class=\"flex h-full items-center\"\n  [class]=\"extraClass\"\n  (click)=\"openFileSelector()\"\n>\n  <ngx-dropzone\n    class=\"flex-1 overflow-hidden\"\n    [multiple]=\"false\"\n    [disableClick]=\"true\"\n    [accept]=\"accept\"\n    [maxFileSize]=\"maxFileSizeBytes\"\n    [style.background-color]=\"dropzoneBackgroundColor\"\n    (change)=\"selectFile($event)\"\n  >\n    @if (!fileName || !showFileName) {\n      <div [class]=\"textClass\">\n        {{ placeholder }}\n      </div>\n    }\n\n    @if (fileName && showFileName) {\n      <div [class]=\"textClass\">\n        {{ fileName }}\n      </div>\n    }\n  </ngx-dropzone>\n\n  @if (icon) {\n    <ng-icon [name]=\"icon\" class=\"shrink-0 text-gray-950\"></ng-icon>\n  }\n</div>\n", styles: ["ngx-dropzone{height:auto;border:none;overflow:hidden}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], accept: [{
                 type: Input
+            }], maxFileSizeMb: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], dropzoneBackgroundColor: [{
+                type: Input
+            }], textClass: [{
+                type: Input
+            }], extraClass: [{
+                type: Input
+            }], showFileName: [{
+                type: Input
             }], fileChange: [{
                 type: Output
+            }], errorChange: [{
+                type: Output
+            }], dropzone: [{
+                type: ViewChild,
+                args: [NgxDropzoneComponent]
             }] } });
 
 class DropdownMultiselectComponent {
@@ -24739,7 +24991,7 @@ class DropdownMultiselectComponent {
     }
     setFocus() {
         setTimeout(() => {
-            this.searchFieldInput.nativeElement.focus();
+            this.searchFieldInput?.nativeElement.focus();
         }, 0);
     }
     openOverlay() {
@@ -24845,7 +25097,10 @@ class DropdownMultiselectComponent {
                 matExpandMore,
                 matExpandLess,
             }),
-        ], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, read: ElementRef }, { propertyName: "searchFieldInput", first: true, predicate: ["searchFieldInput"], descendants: true }, { propertyName: "checkboxes", predicate: ["checkBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    @if (hasSelectedChoices) {\n      <div\n        class=\"gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n      >\n        {{ selected.length }}\n      </div>\n    }\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    @if (hasSelectedChoices && !overlayOpen) {\n      <ng-icon\n        class=\"shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n        (click)=\"clearSelection($event)\"\n        name=\"matClose\"\n      ></ng-icon>\n    }\n  </button>\n  <ng-icon\n    [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.min-width]=\"overlayMinWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      @for (selected of selectedChoices; track selected) {\n        <button\n          type=\"button\"\n          [title]=\"selected.label\"\n          class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n          (click)=\"select(selected, false)\"\n        >\n          <div class=\"text-sm truncate leading-[26px] px-2\">\n            {{ selected.label }}\n          </div>\n          <div\n            class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n          >\n            <ng-icon\n              name=\"matClose\"\n              class=\"!h-[12px] !w-[11px] text-[12px]\"\n            ></ng-icon>\n          </div>\n        </button>\n      }\n\n      @if (allowSearch) {\n        <div class=\"w-[50%] relative grow shrink\">\n          <input\n            #searchFieldInput\n            class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n            [(ngModel)]=\"searchInputValue\"\n            [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n          />\n          @if (!!searchInputValue) {\n            <button\n              class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n              (click)=\"clearSearchInputValue($event)\"\n            >\n              <ng-icon class=\"!h-[10px] !w-[12px] text-[12px]\" name=\"matClose\">\n              </ng-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    @for (choice of filteredChoicesByText; track choice) {\n      <label\n        [title]=\"choice.label\"\n        class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n      >\n        <input\n          class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n          type=\"checkbox\"\n          #checkBox\n          [checked]=\"isSelected(choice)\"\n          (change)=\"select(choice, checkBox.checked)\"\n        />\n        <span class=\"ml-[8px] text-[14px] truncate\">\n          {{ choice.label }}\n        </span>\n      </label>\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$8.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$8.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+            provideNgIconsConfig({
+                size: '1.5rem',
+            }),
+        ], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true, read: ElementRef }, { propertyName: "searchFieldInput", first: true, predicate: ["searchFieldInput"], descendants: true }, { propertyName: "checkboxes", predicate: ["checkBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    @if (hasSelectedChoices) {\n      <div\n        class=\"gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n      >\n        {{ selected.length }}\n      </div>\n    }\n  </div>\n  <button\n    class=\"h-6 w-6 flex items-center justify-center\"\n    data-test=\"dropdown-clear\"\n  >\n    @if (hasSelectedChoices && !overlayOpen) {\n      <ng-icon\n        class=\"shrink-0 opacity-40 hover:opacity-80 transition-colors clear-btn\"\n        (click)=\"clearSelection($event)\"\n        name=\"matClose\"\n      ></ng-icon>\n    }\n  </button>\n  <ng-icon\n    [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.min-width]=\"overlayMinWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-1 flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      @for (selected of selectedChoices; track selected) {\n        <button\n          type=\"button\"\n          [title]=\"selected.label\"\n          class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity\"\n          (click)=\"select(selected, false)\"\n        >\n          <div class=\"text-sm truncate leading-[26px] px-2\">\n            {{ selected.label }}\n          </div>\n          <div\n            class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n          >\n            <ng-icon\n              name=\"matClose\"\n              class=\"!h-[12px] !w-[11px] text-[12px]\"\n            ></ng-icon>\n          </div>\n        </button>\n      }\n\n      @if (allowSearch) {\n        <div class=\"w-[50%] relative grow shrink\">\n          <input\n            #searchFieldInput\n            class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n            [(ngModel)]=\"searchInputValue\"\n            [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n          />\n          @if (!!searchInputValue) {\n            <button\n              class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n              (click)=\"clearSearchInputValue($event)\"\n            >\n              <ng-icon class=\"!h-[10px] !w-[12px] text-[12px]\" name=\"matClose\">\n              </ng-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    @for (choice of filteredChoicesByText; track choice) {\n      <label\n        [title]=\"choice.label\"\n        class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n      >\n        <input\n          class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n          type=\"checkbox\"\n          #checkBox\n          [checked]=\"isSelected(choice)\"\n          (change)=\"select(choice, checkBox.checked)\"\n        />\n        <span class=\"ml-[8px] text-[14px] truncate\">\n          {{ choice.label }}\n        </span>\n      </label>\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$7.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$7.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DropdownMultiselectComponent, decorators: [{
             type: Component,
@@ -24855,7 +25110,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                             matExpandMore,
                             matExpandLess,
                         }),
-                    ], standalone: true, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    @if (hasSelectedChoices) {\n      <div\n        class=\"gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n      >\n        {{ selected.length }}\n      </div>\n    }\n  </div>\n  <button class=\"h-6 w-6\" data-cy=\"clearSelection\">\n    @if (hasSelectedChoices && !overlayOpen) {\n      <ng-icon\n        class=\"shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n        (click)=\"clearSelection($event)\"\n        name=\"matClose\"\n      ></ng-icon>\n    }\n  </button>\n  <ng-icon\n    [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.min-width]=\"overlayMinWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      @for (selected of selectedChoices; track selected) {\n        <button\n          type=\"button\"\n          [title]=\"selected.label\"\n          class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1\"\n          (click)=\"select(selected, false)\"\n        >\n          <div class=\"text-sm truncate leading-[26px] px-2\">\n            {{ selected.label }}\n          </div>\n          <div\n            class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n          >\n            <ng-icon\n              name=\"matClose\"\n              class=\"!h-[12px] !w-[11px] text-[12px]\"\n            ></ng-icon>\n          </div>\n        </button>\n      }\n\n      @if (allowSearch) {\n        <div class=\"w-[50%] relative grow shrink\">\n          <input\n            #searchFieldInput\n            class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n            [(ngModel)]=\"searchInputValue\"\n            [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n          />\n          @if (!!searchInputValue) {\n            <button\n              class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n              (click)=\"clearSearchInputValue($event)\"\n            >\n              <ng-icon class=\"!h-[10px] !w-[12px] text-[12px]\" name=\"matClose\">\n              </ng-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    @for (choice of filteredChoicesByText; track choice) {\n      <label\n        [title]=\"choice.label\"\n        class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n      >\n        <input\n          class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n          type=\"checkbox\"\n          #checkBox\n          [checked]=\"isSelected(choice)\"\n          (change)=\"select(choice, checkBox.checked)\"\n        />\n        <span class=\"ml-[8px] text-[14px] truncate\">\n          {{ choice.label }}\n        </span>\n      </label>\n    }\n  </div>\n</ng-template>\n" }]
+                        provideNgIconsConfig({
+                            size: '1.5rem',
+                        }),
+                    ], standalone: true, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  [attr.aria-owns]=\"id\"\n  (buttonClick)=\"openOverlay()\"\n  (keydown)=\"handleTriggerKeydown($event)\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    @if (hasSelectedChoices) {\n      <div\n        class=\"gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count\"\n      >\n        {{ selected.length }}\n      </div>\n    }\n  </div>\n  <button\n    class=\"h-6 w-6 flex items-center justify-center\"\n    data-test=\"dropdown-clear\"\n  >\n    @if (hasSelectedChoices && !overlayOpen) {\n      <ng-icon\n        class=\"shrink-0 opacity-40 hover:opacity-80 transition-colors clear-btn\"\n        (click)=\"clearSelection($event)\"\n        name=\"matClose\"\n      ></ng-icon>\n    }\n  </button>\n  <ng-icon\n    [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.min-width]=\"overlayMinWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n    #overlayContainer\n  >\n    <div\n      class=\"border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-1 flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary\"\n    >\n      @for (selected of selectedChoices; track selected) {\n        <button\n          type=\"button\"\n          [title]=\"selected.label\"\n          class=\"max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity\"\n          (click)=\"select(selected, false)\"\n        >\n          <div class=\"text-sm truncate leading-[26px] px-2\">\n            {{ selected.label }}\n          </div>\n          <div\n            class=\"flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0\"\n          >\n            <ng-icon\n              name=\"matClose\"\n              class=\"!h-[12px] !w-[11px] text-[12px]\"\n            ></ng-icon>\n          </div>\n        </button>\n      }\n\n      @if (allowSearch) {\n        <div class=\"w-[50%] relative grow shrink\">\n          <input\n            #searchFieldInput\n            class=\"w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none\"\n            [(ngModel)]=\"searchInputValue\"\n            [placeholder]=\"'multiselect.filter.placeholder' | translate\"\n          />\n          @if (!!searchInputValue) {\n            <button\n              class=\"absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2\"\n              (click)=\"clearSearchInputValue($event)\"\n            >\n              <ng-icon class=\"!h-[10px] !w-[12px] text-[12px]\" name=\"matClose\">\n              </ng-icon>\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    @for (choice of filteredChoicesByText; track choice) {\n      <label\n        [title]=\"choice.label\"\n        class=\"flex px-5 py-1 w-full text-gray-900 cursor-pointer hover:text-primary-darkest hover:bg-gray-50 focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors\"\n      >\n        <input\n          class=\"w-[18px] h-[18px] align-text-top shrink-0\"\n          type=\"checkbox\"\n          #checkBox\n          [checked]=\"isSelected(choice)\"\n          (change)=\"select(choice, checkBox.checked)\"\n        />\n        <span class=\"ml-[8px] text-[14px] truncate\">\n          {{ choice.label }}\n        </span>\n      </label>\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], choices: [{
@@ -25027,7 +25285,7 @@ class DropdownSelectorComponent {
             provideNgIconsConfig({
                 size: '1.5em',
             }),
-        ], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "choiceInputs", predicate: ["choiceInputs"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"flex flex-col sm:flex-row sm:items-center relative w-full\">\n  @if (showTitle) {\n    <span\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  }\n  <gn-ui-button\n    type=\"outline\"\n    class=\"grow min-w-0\"\n    [style.--gn-ui-button-padding]=\"'8px 8px 8px 16px'\"\n    extraClass=\"bg-background flex flex-row w-full {{ extraBtnClass }}\"\n    [title]=\"title\"\n    [attr.aria-owns]=\"id\"\n    (buttonClick)=\"openOverlay()\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n    [disabled]=\"disabled\"\n  >\n    <div class=\"grow truncate py-1 mr-2 text-left\">\n      {{ getChoiceLabel() | translate }}\n    </div>\n    <ng-icon\n      [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n      class=\"shrink-0 opacity-40\"\n    >\n    </ng-icon>\n  </gn-ui-button>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.min-width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n  >\n    @for (choice of choices; track choice) {\n      <button\n        #choiceInputs\n        type=\"button\"\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    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$8.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$8.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "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  @if (showTitle) {\n    <span\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  }\n  <gn-ui-button\n    type=\"outline\"\n    class=\"grow min-w-0\"\n    [style.--gn-ui-button-padding]=\"'8px 8px 8px 16px'\"\n    extraClass=\"bg-background flex flex-row w-full {{ extraBtnClass }}\"\n    [title]=\"title\"\n    [attr.aria-owns]=\"id\"\n    (buttonClick)=\"openOverlay()\"\n    cdkOverlayOrigin\n    #overlayOrigin=\"cdkOverlayOrigin\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n    [disabled]=\"disabled\"\n  >\n    <div class=\"grow truncate py-1 mr-2 text-left\">\n      {{ getChoiceLabel() | translate }}\n    </div>\n    <ng-icon\n      [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n      class=\"shrink-0 opacity-40\"\n    >\n    </ng-icon>\n  </gn-ui-button>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-300 rounded shadow-lg py-2 w-full overflow-x-hidden overflow-y-auto overlay-container\"\n    [style.max-height]=\"overlayMaxHeight\"\n    [style.min-width]=\"overlayWidth\"\n    role=\"listbox\"\n    tabindex=\"-1\"\n    [attr.id]=\"id\"\n    [attr.aria-multiselectable]=\"true\"\n    [attr.aria-label]=\"title\"\n    (keydown)=\"handleOverlayKeydown($event)\"\n  >\n    @for (choice of choices; track choice) {\n      <button\n        #choiceInputs\n        type=\"button\"\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    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$7.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$7.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DropdownSelectorComponent, decorators: [{
             type: Component,
@@ -25767,6 +26025,175 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Output
             }] } });
 
+marker('search.filters.spatialExtent.import');
+marker('search.filters.spatialExtent.helpText');
+marker('search.filters.spatialExtent.error.title');
+const LABEL_FROM_FILE = marker('search.filters.spatialExtent.bboxFromFile');
+const LABEL_FROM_FILE_DELETE = marker('search.filters.spatialExtent.bboxFromFileDelete');
+const LABEL_INITIAL = marker('search.filters.spatialExtent.bboxInitial');
+const LABEL_INITIAL_DELETE = marker('search.filters.spatialExtent.bboxInitialDelete');
+class SpatialExtentDropdownComponent {
+    constructor() {
+        this.cd = inject(ChangeDetectorRef);
+        this.scrollStrategies = inject(ScrollStrategyOptions);
+        this.maxFileSizeMb = null;
+        this.bboxChange = new EventEmitter();
+        this.errorChange = new EventEmitter();
+        this.bbox = null;
+        this.fileName = '';
+        this.overlayPositions = [
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: 8,
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom',
+                offsetY: -8,
+            },
+        ];
+        this.scrollStrategy = this.scrollStrategies.reposition();
+        this.overlayOpen = false;
+        this.overlayMinWidth = 'none';
+        this.errorKey = null;
+    }
+    set initialBbox(value) {
+        if (!this.bbox && value) {
+            this.bbox = value;
+        }
+    }
+    get hasSelection() {
+        return !!this.bbox;
+    }
+    get selectionLabelKey() {
+        return this.fileName ? LABEL_FROM_FILE : LABEL_INITIAL;
+    }
+    get selectionDeleteLabelKey() {
+        return this.fileName ? LABEL_FROM_FILE_DELETE : LABEL_INITIAL_DELETE;
+    }
+    get selectionLabelParams() {
+        return { fileName: this.fileName };
+    }
+    openOverlay() {
+        this.overlayMinWidth =
+            this.overlayOrigin.elementRef.nativeElement.getBoundingClientRect()
+                .width + 'px';
+        this.overlayOpen = true;
+    }
+    closeOverlay() {
+        this.overlayOpen = false;
+    }
+    toggleOverlay() {
+        if (this.overlayOpen) {
+            this.closeOverlay();
+        }
+        else {
+            this.openOverlay();
+        }
+    }
+    async handleFileSelected(file) {
+        this.errorKey = null;
+        let content;
+        try {
+            content = await readFileAsText(file);
+            const parsed = JSON.parse(content);
+            const geometry = getGeometryFromGeoJSON(parsed);
+            if (!geometry) {
+                this.setError(marker('search.filters.spatialExtent.error.noGeometry'));
+                return;
+            }
+            const bbox = getGeometryBoundingBox(geometry);
+            this.bbox = bbox;
+            this.fileName = file.name;
+            this.bboxChange.emit(bbox);
+            this.cd.markForCheck();
+        }
+        catch {
+            this.setError(marker('search.filters.spatialExtent.error.invalidFormat'));
+            return;
+        }
+    }
+    handleFileError(error) {
+        if (error === 'file-too-large') {
+            this.setError(marker('search.filters.spatialExtent.error.fileTooLarge'), {
+                maxSize: this.maxFileSizeMb,
+            });
+        }
+        else {
+            this.setError(marker('search.filters.spatialExtent.error.invalidFormat'));
+        }
+    }
+    setError(errorKey, params) {
+        this.errorKey = errorKey;
+        this.errorChange.emit({ key: errorKey, params });
+        this.cd.markForCheck();
+    }
+    removeSelection(event) {
+        this.bbox = null;
+        this.fileName = '';
+        this.errorKey = null;
+        this.fileInput?.clear();
+        this.bboxChange.emit(null);
+        propagateToDocumentOnly(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SpatialExtentDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SpatialExtentDropdownComponent, isStandalone: true, selector: "gn-ui-spatial-extent-dropdown", inputs: { title: "title", maxFileSizeMb: "maxFileSizeMb", initialBbox: "initialBbox" }, outputs: { bboxChange: "bboxChange", errorChange: "errorChange" }, providers: [
+            provideIcons({
+                iconoirCheckCircle,
+                iconoirImport,
+                iconoirSquareDashed,
+                iconoirTrash,
+                matClose,
+                matExpandLess,
+                matExpandMore,
+            }),
+        ], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true }, { propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "fileInput", first: true, predicate: DragAndDropFileInputComponent, descendants: true }], ngImport: i0, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  (buttonClick)=\"toggleOverlay()\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    @if (hasSelection) {\n      <div\n        class=\"bg-primary-lighter text-white shrink-0 rounded-full font-bold text-[12px] w-[22px] h-[22px] flex items-center justify-center\"\n      >\n        1\n      </div>\n    }\n  </div>\n  <button class=\"h-6 w-6 flex items-center\" data-cy=\"clearSelection\">\n    @if (hasSelection && !overlayOpen) {\n      <ng-icon\n        class=\"shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n        (click)=\"removeSelection($event)\"\n        name=\"matClose\"\n      ></ng-icon>\n    }\n  </button>\n  <ng-icon\n    [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-400 rounded shadow-lg pt-[12px] px-[16px] overlay-container w-[280px] flex flex-col gap-2\"\n    [style.min-width]=\"overlayMinWidth\"\n  >\n    <div class=\"text-xs text-black\">\n      {{ 'search.filters.spatialExtent.helpText' | translate }}\n    </div>\n\n    <div\n      [class]=\"\n        (hasSelection\n          ? 'border-b-[1px] border-gray-400 pb-[20px]'\n          : 'pb-[8px]') + ' text-black'\n      \"\n    >\n      <gn-ui-drag-and-drop-file-input\n        accept=\".json,.geojson\"\n        [placeholder]=\"'search.filters.spatialExtent.import' | translate\"\n        [maxFileSizeMb]=\"maxFileSizeMb\"\n        [showFileName]=\"false\"\n        textClass=\"text-black truncate\"\n        dropzoneBackgroundColor=\"transparent\"\n        icon=\"iconoirImport\"\n        extraClass=\"gn-ui-gray-outline-input w-full !h-[32px] px-[8px] py-[4px] justify-between\"\n        (fileChange)=\"handleFileSelected($event)\"\n        (errorChange)=\"handleFileError($event)\"\n        data-cy=\"importGeojson\"\n      ></gn-ui-drag-and-drop-file-input>\n    </div>\n\n    @if (hasSelection) {\n      <gn-ui-button\n        [type]=\"'primary-light'\"\n        [title]=\"selectionDeleteLabelKey | translate: selectionLabelParams\"\n        (buttonClick)=\"removeSelection($event)\"\n        extraClass=\"group gap-x-2 w-full h-[28px] px-[8px] py-[4px] mb-[12px] bg-primary-lighter text-white\"\n        data-test=\"spatial-extent-selected-item\"\n      >\n        <ng-icon\n          name=\"iconoirSquareDashed\"\n          class=\"shrink-0\"\n          size=\"15px\"\n        ></ng-icon>\n        <span class=\"group-hover:hidden truncate text-sm m-auto\">\n          {{ selectionLabelKey | translate: selectionLabelParams }}\n        </span>\n        <span class=\"hidden group-hover:block truncate text-sm m-auto\">\n          {{ selectionDeleteLabelKey | translate: selectionLabelParams }}\n        </span>\n        <ng-icon\n          name=\"iconoirCheckCircle\"\n          class=\"group-hover:hidden shrink-0\"\n          size=\"14px\"\n        ></ng-icon>\n        <ng-icon\n          name=\"iconoirTrash\"\n          class=\"!hidden group-hover:!block shrink-0\"\n          size=\"15px\"\n        ></ng-icon>\n      </gn-ui-button>\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$7.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$7.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: DragAndDropFileInputComponent, selector: "gn-ui-drag-and-drop-file-input", inputs: ["placeholder", "accept", "maxFileSizeMb", "icon", "dropzoneBackgroundColor", "textClass", "extraClass", "showFileName"], outputs: ["fileChange", "errorChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SpatialExtentDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-spatial-extent-dropdown', standalone: true, imports: [
+                        ButtonComponent,
+                        NgIcon,
+                        OverlayModule,
+                        TranslatePipe,
+                        DragAndDropFileInputComponent,
+                    ], providers: [
+                        provideIcons({
+                            iconoirCheckCircle,
+                            iconoirImport,
+                            iconoirSquareDashed,
+                            iconoirTrash,
+                            matClose,
+                            matExpandLess,
+                            matExpandMore,
+                        }),
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<gn-ui-button\n  type=\"outline\"\n  extraClass=\"bg-background w-full !p-[8px] !pl-[16px]\"\n  [title]=\"title\"\n  (buttonClick)=\"toggleOverlay()\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <div class=\"grow flex items-center mr-2 gap-2 overflow-hidden\">\n    <div class=\"text-left font-medium truncate py-1\">\n      {{ title }}\n    </div>\n    @if (hasSelection) {\n      <div\n        class=\"bg-primary-lighter text-white shrink-0 rounded-full font-bold text-[12px] w-[22px] h-[22px] flex items-center justify-center\"\n      >\n        1\n      </div>\n    }\n  </div>\n  <button class=\"h-6 w-6 flex items-center\" data-cy=\"clearSelection\">\n    @if (hasSelection && !overlayOpen) {\n      <ng-icon\n        class=\"shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn\"\n        (click)=\"removeSelection($event)\"\n        name=\"matClose\"\n      ></ng-icon>\n    }\n  </button>\n  <ng-icon\n    [name]=\"overlayOpen ? 'matExpandLess' : 'matExpandMore'\"\n    class=\"shrink-0 opacity-40\"\n  >\n  </ng-icon>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div\n    class=\"bg-white border border-gray-400 rounded shadow-lg pt-[12px] px-[16px] overlay-container w-[280px] flex flex-col gap-2\"\n    [style.min-width]=\"overlayMinWidth\"\n  >\n    <div class=\"text-xs text-black\">\n      {{ 'search.filters.spatialExtent.helpText' | translate }}\n    </div>\n\n    <div\n      [class]=\"\n        (hasSelection\n          ? 'border-b-[1px] border-gray-400 pb-[20px]'\n          : 'pb-[8px]') + ' text-black'\n      \"\n    >\n      <gn-ui-drag-and-drop-file-input\n        accept=\".json,.geojson\"\n        [placeholder]=\"'search.filters.spatialExtent.import' | translate\"\n        [maxFileSizeMb]=\"maxFileSizeMb\"\n        [showFileName]=\"false\"\n        textClass=\"text-black truncate\"\n        dropzoneBackgroundColor=\"transparent\"\n        icon=\"iconoirImport\"\n        extraClass=\"gn-ui-gray-outline-input w-full !h-[32px] px-[8px] py-[4px] justify-between\"\n        (fileChange)=\"handleFileSelected($event)\"\n        (errorChange)=\"handleFileError($event)\"\n        data-cy=\"importGeojson\"\n      ></gn-ui-drag-and-drop-file-input>\n    </div>\n\n    @if (hasSelection) {\n      <gn-ui-button\n        [type]=\"'primary-light'\"\n        [title]=\"selectionDeleteLabelKey | translate: selectionLabelParams\"\n        (buttonClick)=\"removeSelection($event)\"\n        extraClass=\"group gap-x-2 w-full h-[28px] px-[8px] py-[4px] mb-[12px] bg-primary-lighter text-white\"\n        data-test=\"spatial-extent-selected-item\"\n      >\n        <ng-icon\n          name=\"iconoirSquareDashed\"\n          class=\"shrink-0\"\n          size=\"15px\"\n        ></ng-icon>\n        <span class=\"group-hover:hidden truncate text-sm m-auto\">\n          {{ selectionLabelKey | translate: selectionLabelParams }}\n        </span>\n        <span class=\"hidden group-hover:block truncate text-sm m-auto\">\n          {{ selectionDeleteLabelKey | translate: selectionLabelParams }}\n        </span>\n        <ng-icon\n          name=\"iconoirCheckCircle\"\n          class=\"group-hover:hidden shrink-0\"\n          size=\"14px\"\n        ></ng-icon>\n        <ng-icon\n          name=\"iconoirTrash\"\n          class=\"!hidden group-hover:!block shrink-0\"\n          size=\"15px\"\n        ></ng-icon>\n      </gn-ui-button>\n    }\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], maxFileSizeMb: [{
+                type: Input
+            }], initialBbox: [{
+                type: Input
+            }], bboxChange: [{
+                type: Output
+            }], errorChange: [{
+                type: Output
+            }], overlayOrigin: [{
+                type: ViewChild,
+                args: ['overlayOrigin']
+            }], overlay: [{
+                type: ViewChild,
+                args: [CdkConnectedOverlay]
+            }], fileInput: [{
+                type: ViewChild,
+                args: [DragAndDropFileInputComponent]
+            }] } });
+
 class CellPopinComponent {
     constructor() {
         this.scrollDispatcher = inject(ScrollDispatcher);
@@ -25843,7 +26270,7 @@ class CellPopinComponent {
         this.isOpen = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CellPopinComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: CellPopinComponent, isStandalone: true, selector: "gn-ui-cell-popin", inputs: { extraClass: "extraClass", cdkScrollContainer: "cdkScrollContainer", scrollContainer: "scrollContainer", activePopin: "activePopin" }, providers: [provideIcons({ iconoirReduce })], viewQueries: [{ propertyName: "anchorRef", first: true, predicate: ["anchorRef"], descendants: true }], ngImport: i0, template: "<div\n  class=\"h-full flex items-center justify-center\"\n  cdkOverlayOrigin\n  #anchorRef\n  #trigger=\"cdkOverlayOrigin\"\n  [class]=\"extraClass\"\n  data-cy=\"cell-popin\"\n>\n  <ng-content select=\"[cellContent]\"></ng-content>\n  @if (activePopin) {\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayPush]=\"false\"\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayPositions]=\"overlayPositions\"\n      [cdkConnectedOverlayWidth]=\"'auto'\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n      [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n      (detach)=\"closeOverlay()\"\n    >\n      @if (activePopin && isVisible) {\n        <div\n          class=\"bg-white shadow-lg border border-gray-300 relative\"\n          data-cy=\"cell-popin-content\"\n        >\n          <ng-content select=\"[popinContent]\"></ng-content>\n          <gn-ui-button\n            data-cy=\"cell-popin-close\"\n            [style.--gn-ui-button-background]=\"'bg-transparent'\"\n            class=\"absolute top-2 right-2\"\n            type=\"light\"\n            (buttonClick)=\"closeOverlay()\"\n            extraClass=\"w-10 h-8 px-1\"\n          >\n            <ng-icon name=\"iconoirReduce\" size=\"24\"></ng-icon>\n          </gn-ui-button>\n        </div>\n      }\n    </ng-template>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$8.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$8.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: CellPopinComponent, isStandalone: true, selector: "gn-ui-cell-popin", inputs: { extraClass: "extraClass", cdkScrollContainer: "cdkScrollContainer", scrollContainer: "scrollContainer", activePopin: "activePopin" }, providers: [provideIcons({ iconoirReduce })], viewQueries: [{ propertyName: "anchorRef", first: true, predicate: ["anchorRef"], descendants: true }], ngImport: i0, template: "<div\n  class=\"h-full flex items-center justify-center\"\n  cdkOverlayOrigin\n  #anchorRef\n  #trigger=\"cdkOverlayOrigin\"\n  [class]=\"extraClass\"\n  data-cy=\"cell-popin\"\n>\n  <ng-content select=\"[cellContent]\"></ng-content>\n  @if (activePopin) {\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayPush]=\"false\"\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"isOpen\"\n      [cdkConnectedOverlayPositions]=\"overlayPositions\"\n      [cdkConnectedOverlayWidth]=\"'auto'\"\n      [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n      [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n      (detach)=\"closeOverlay()\"\n    >\n      @if (activePopin && isVisible) {\n        <div\n          class=\"bg-white shadow-lg border border-gray-300 relative\"\n          data-cy=\"cell-popin-content\"\n        >\n          <ng-content select=\"[popinContent]\"></ng-content>\n          <gn-ui-button\n            data-cy=\"cell-popin-close\"\n            [style.--gn-ui-button-background]=\"'bg-transparent'\"\n            class=\"absolute top-2 right-2\"\n            type=\"light\"\n            (buttonClick)=\"closeOverlay()\"\n            extraClass=\"w-10 h-8 px-1\"\n          >\n            <ng-icon name=\"iconoirReduce\" size=\"24\"></ng-icon>\n          </gn-ui-button>\n        </div>\n      }\n    </ng-template>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$7.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$7.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: CellPopinComponent, decorators: [{
             type: Component,
@@ -27465,6 +27892,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 }]
         }] });
 
+const GEOCODING_PROVIDER = new InjectionToken('geocoding-provider', {
+    providedIn: 'root',
+    factory: () => ['geonames', { maxRows: 5 }],
+});
+class GeocodingService {
+    constructor() {
+        this.provider = inject(GEOCODING_PROVIDER);
+    }
+    query(text) {
+        let queryObservable;
+        switch (this.provider[0]) {
+            case 'geoadmin':
+                queryObservable = from(queryGeoadmin(text, this.provider[1]));
+                break;
+            case 'geonames':
+                queryObservable = from(queryGeonames(text, this.provider[1]));
+                break;
+            case 'data-gouv-fr':
+                queryObservable = from(queryDataGouvFr(text, this.provider[1]));
+                break;
+            default:
+                return throwError(() => new Error(`Unsupported geocoding provider: ${this.provider[0]}`));
+        }
+        return queryObservable.pipe(catchError((error) => throwError(error)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GeocodingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GeocodingService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GeocodingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class LocationSearchComponent {
+    constructor() {
+        this.geocodingService = inject(GeocodingService);
+        this.placeholder = '';
+        this.resultSelected = new EventEmitter();
+        this.displayWithFn = (item) => item.label;
+        this.searchAction = (text) => this.geocodingService.query(text);
+    }
+    handleItemSelected(item) {
+        this.resultSelected.emit(item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: LocationSearchComponent, isStandalone: true, selector: "gn-ui-location-search", inputs: { placeholder: "placeholder", displayWithTemplate: "displayWithTemplate" }, outputs: { resultSelected: "resultSelected" }, ngImport: i0, template: "<gn-ui-autocomplete\n  [action]=\"searchAction\"\n  [displayWithFn]=\"displayWithFn\"\n  [placeholder]=\"placeholder\"\n  [displayWithTemplate]=\"displayWithTemplate\"\n  (itemSelected)=\"handleItemSelected($event)\"\n>\n</gn-ui-autocomplete>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithTemplate", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: LocationSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-location-search', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [AutocompleteComponent], template: "<gn-ui-autocomplete\n  [action]=\"searchAction\"\n  [displayWithFn]=\"displayWithFn\"\n  [placeholder]=\"placeholder\"\n  [displayWithTemplate]=\"displayWithTemplate\"\n  (itemSelected)=\"handleItemSelected($event)\"\n>\n</gn-ui-autocomplete>\n" }]
+        }], propDecorators: { placeholder: [{
+                type: Input
+            }], displayWithTemplate: [{
+                type: Input
+            }], resultSelected: [{
+                type: Output
+            }] } });
+
 // expects the replacement key ${uuid}
 const RECORD_DATASET_URL_TOKEN = new InjectionToken('record-dataset-url-token');
 const RECORD_SERVICE_URL_TOKEN = new InjectionToken('record-service-url-token');
@@ -27933,6 +28420,45 @@ class DateRangeSearchField extends SimpleSearchField {
         return 'dateRange';
     }
 }
+// treats a resource's creation/revision dates as an interval (its min and max), so a record matches
+// when that interval intersects the filter range, not just when a single date falls inside it
+class ResourceCreationRevisionDateSearchField extends DateRangeSearchField {
+    constructor(injector, order = 'desc') {
+        super('resourceCreationRevisionDate', injector, order);
+        const dateSourceFields = [
+            'creationDateForResource',
+            'revisionDateForResource',
+        ];
+        const collectSortedDates = dateSourceFields
+            .map((field) => `if (doc.containsKey('${field}')) {
+  for (def date : doc['${field}']) { dates.add(date.millis); }
+}`)
+            .join('\n');
+        this.esService.registerRuntimeField('resourceCreationRevisionDateMin', `def dates = [];
+${collectSortedDates}
+if (dates.length > 0) { dates.sort(null); emit(dates[0]); }`, 'date');
+        this.esService.registerRuntimeField('resourceCreationRevisionDateMax', `def dates = [];
+${collectSortedDates}
+if (dates.length > 0) { dates.sort(null); emit(dates[dates.length - 1]); }`, 'date');
+    }
+}
+class BoundingBoxSearchField extends SimpleSearchField {
+    getAvailableValues() {
+        return of([]);
+    }
+    getFiltersForValues(values) {
+        return of({
+            [this.esFieldName]: values.map(Number),
+        });
+    }
+    getValuesForFilter(filters) {
+        const filter = filters[this.esFieldName];
+        return of(isBoundingBox(filter) ? filter : []);
+    }
+    getType() {
+        return 'spatialExtent';
+    }
+}
 marker('search.filters.availableServices.view');
 marker('search.filters.availableServices.download');
 class AvailableServicesField extends SimpleSearchField {
@@ -28077,6 +28603,8 @@ marker('search.filters.producerOrg');
 marker('search.filters.publisherOrg');
 marker('search.filters.user');
 marker('search.filters.changeDate');
+marker('search.filters.resourceCreationRevisionDate');
+marker('search.filters.spatialExtent');
 class FieldsService {
     constructor() {
         this.injector = inject(Injector);
@@ -28099,7 +28627,9 @@ class FieldsService {
             publisherOrg: new MultilingualSearchField('distributorOrgForResourceObject', this.injector, 'asc', 'key'),
             user: new UserSearchField(this.injector),
             changeDate: new DateRangeSearchField('changeDate', this.injector, 'desc'),
+            resourceCreationRevisionDate: new ResourceCreationRevisionDateSearchField(this.injector, 'desc'),
             availableServices: new AvailableServicesField(this.injector),
+            spatialExtent: new BoundingBoxSearchField('spatialExtent', this.injector),
         };
     }
     get supportedFields() {
@@ -29362,7 +29892,7 @@ class ContactPillComponent {
         this.overlayOpen = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ContactPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ContactPillComponent, isStandalone: true, selector: "gn-ui-contact-pill", inputs: { contact: "contact" }, ngImport: i0, template: "<gn-ui-button\n  [type]=\"overlayOpen ? 'gray-light' : 'primary-light'\"\n  extraClass=\"group w-full min-h-12 gap-3 justify-between py-2 pl-5 pr-4 rounded\"\n  data-test=\"contact-pill\"\n  (buttonClick)=\"toggleOverlay()\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <span\n    class=\"font-title font-medium text-base leading-tight truncate\"\n    [class]=\"!overlayOpen ? 'text-primary-black group-hover:text-white' : ''\"\n    [title]=\"displayName\"\n    >{{ displayName }}</span\n  >\n  <div\n    class=\"gn-ui-card-icon items-center justify-center w-10 h-8\"\n    [class]=\"\n      !overlayOpen ? 'group-hover:border-white group-hover:text-white' : ''\n    \"\n  >\n    @if (overlayOpen) {\n      <ng-icon class=\"!w-6 !h-6 !text-[24px]\" name=\"matClose\"></ng-icon>\n    } @else {\n      <ng-icon class=\"!w-6 !h-6 !text-[24px]\" name=\"matInfoOutline\"></ng-icon>\n    }\n  </div>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayOffsetX]=\"overlayOffsetX\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div [style.width.px]=\"overlayWidth\">\n    <gn-ui-contact-details [contact]=\"contact\"></gn-ui-contact-details>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$8.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$8.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ContactDetailsComponent, selector: "gn-ui-contact-details", inputs: ["contact"] }], viewProviders: [provideIcons({ matClose, matInfoOutline })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ContactPillComponent, isStandalone: true, selector: "gn-ui-contact-pill", inputs: { contact: "contact" }, ngImport: i0, template: "<gn-ui-button\n  [type]=\"overlayOpen ? 'gray-light' : 'primary-light'\"\n  extraClass=\"group w-full min-h-12 gap-3 justify-between py-2 pl-5 pr-4 rounded\"\n  data-test=\"contact-pill\"\n  (buttonClick)=\"toggleOverlay()\"\n  cdkOverlayOrigin\n  #overlayOrigin=\"cdkOverlayOrigin\"\n>\n  <span\n    class=\"font-title font-medium text-base leading-tight truncate\"\n    [class]=\"!overlayOpen ? 'text-primary-black group-hover:text-white' : ''\"\n    [title]=\"displayName\"\n    >{{ displayName }}</span\n  >\n  <div\n    class=\"gn-ui-card-icon items-center justify-center w-10 h-8\"\n    [class]=\"\n      !overlayOpen ? 'group-hover:border-white group-hover:text-white' : ''\n    \"\n  >\n    @if (overlayOpen) {\n      <ng-icon class=\"!w-6 !h-6 !text-[24px]\" name=\"matClose\"></ng-icon>\n    } @else {\n      <ng-icon class=\"!w-6 !h-6 !text-[24px]\" name=\"matInfoOutline\"></ng-icon>\n    }\n  </div>\n</gn-ui-button>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"overlayOpen\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions\"\n  [cdkConnectedOverlayOffsetX]=\"overlayOffsetX\"\n  (overlayOutsideClick)=\"closeOverlay()\"\n  (detach)=\"closeOverlay()\"\n>\n  <div [style.width.px]=\"overlayWidth\">\n    <gn-ui-contact-details [contact]=\"contact\"></gn-ui-contact-details>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$7.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$7.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ContactDetailsComponent, selector: "gn-ui-contact-details", inputs: ["contact"] }], viewProviders: [provideIcons({ matClose, matInfoOutline })], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ContactPillComponent, decorators: [{
             type: Component,
@@ -30088,7 +30618,7 @@ class ServiceCapabilitiesComponent {
         if (this.apiLinks.length > 0 &&
             this.apiLinks[0].accessServiceProtocol !== 'ogcFeatures') {
             this.loading = true;
-            this.availableLayers = await getLayers(this.apiLinks[0].url.href, this.apiLinks[0].accessServiceProtocol);
+            this.availableLayers = await getLayers(this.apiLinks[0].url.href, this.apiLinks[0].accessServiceProtocol, true);
             this.loading = false;
             this.cdr.detectChanges();
             this.filteredLayers = this.availableLayers;
@@ -31284,19 +31814,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 type: Output
             }] } });
 
+class NotificationsService {
+    constructor() {
+        this.notifications$ = new BehaviorSubject([]);
+    }
+    showNotification(content, timeoutMs, error) {
+        error && console.error(error);
+        const id = Math.floor(Math.random() * 1000000);
+        this.notifications$.next([...this.notifications$.value, { ...content, id }]);
+        if (typeof timeoutMs !== 'undefined') {
+            setTimeout(() => {
+                this.removeNotificationById(id);
+            }, timeoutMs);
+        }
+        return id;
+    }
+    removeNotificationById(id) {
+        this.notifications$.next(this.notifications$.value.filter((n) => n.id !== id));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NotificationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NotificationsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NotificationsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class NotificationsContainerComponent {
+    constructor() {
+        this.notificationsService = inject(NotificationsService);
+    }
+    trackById(index, notification) {
+        return notification.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NotificationsContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NotificationsContainerComponent, isStandalone: true, selector: "gn-ui-notifications-container", ngImport: i0, template: "<div class=\"flex flex-col gap-6 p-6 items-start pointer-events-none\">\n  @for (\n    notification of notificationsService.notifications$ | async;\n    track trackById($index, notification)\n  ) {\n    <gn-ui-notification\n      class=\"max-w-full pointer-events-auto\"\n      [text]=\"notification.text\"\n      [type]=\"notification.type\"\n      [title]=\"notification.title\"\n      [closeMessage]=\"notification.closeMessage\"\n      (notificationClose)=\"\n        notificationsService.removeNotificationById(notification.id)\n      \"\n      [@enterExit]\n    ></gn-ui-notification>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NotificationComponent, selector: "gn-ui-notification", inputs: ["type", "title", "text", "closeMessage"], outputs: ["notificationClose"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], animations: [
+            trigger('enterExit', [
+                transition(':enter', [
+                    animate('150ms', keyframes([
+                        style({ transform: 'scale(1)', opacity: 0 }),
+                        style({ transform: 'scale(1.03)', opacity: 0.5 }),
+                        style({ transform: 'scale(1)', opacity: 1 }),
+                    ])),
+                ]),
+                transition(':leave', [
+                    animate('200ms', style({ transform: 'translateX(50px)', opacity: 0 })),
+                ]),
+            ]),
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NotificationsContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gn-ui-notifications-container', standalone: true, imports: [CommonModule, NotificationComponent], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('enterExit', [
+                            transition(':enter', [
+                                animate('150ms', keyframes([
+                                    style({ transform: 'scale(1)', opacity: 0 }),
+                                    style({ transform: 'scale(1.03)', opacity: 0.5 }),
+                                    style({ transform: 'scale(1)', opacity: 1 }),
+                                ])),
+                            ]),
+                            transition(':leave', [
+                                animate('200ms', style({ transform: 'translateX(50px)', opacity: 0 })),
+                            ]),
+                        ]),
+                    ], template: "<div class=\"flex flex-col gap-6 p-6 items-start pointer-events-none\">\n  @for (\n    notification of notificationsService.notifications$ | async;\n    track trackById($index, notification)\n  ) {\n    <gn-ui-notification\n      class=\"max-w-full pointer-events-auto\"\n      [text]=\"notification.text\"\n      [type]=\"notification.type\"\n      [title]=\"notification.title\"\n      [closeMessage]=\"notification.closeMessage\"\n      (notificationClose)=\"\n        notificationsService.removeNotificationById(notification.id)\n      \"\n      [@enterExit]\n    ></gn-ui-notification>\n  }\n</div>\n" }]
+        }] });
+
 class FilterDropdownComponent {
     constructor() {
         this.searchFacade = inject(SearchFacade);
         this.searchService = inject(SearchService);
         this.fieldsService = inject(FieldsService);
+        this.notificationsService = inject(NotificationsService);
+        this.translateService = inject(TranslateService);
+        this.spatialExtentMaxFileSize = getOptionalSearchConfig()?.SPATIAL_EXTENT_MAX_FILE_SIZE;
         this.selected$ = this.searchFacade.searchFilters$.pipe(switchMap((filters) => this.fieldsService.readFieldValuesFromFilters(filters)), map$1((fieldValues) => fieldValues[this.fieldName]), filter$1((selected) => !!selected), startWith$1([]), catchError(() => of([])));
-        this.selectedDateRange$ = this.selected$.pipe(map$1((selectedDateRange) => selectedDateRange));
+        this.selectedDateRange$ = this.selected$.pipe(map$1((selected) => (Array.isArray(selected) ? {} : selected)));
+        this.selectedBoundingBox$ = this.selected$.pipe(map$1((selected) => Array.isArray(selected) && selected.length > 0
+            ? selected
+            : null));
+        this.spatialExtentErrorNotificationId = null;
     }
     onSelectedValues(values) {
         this.fieldsService
             .buildFiltersFromFieldValues({ [this.fieldName]: values })
             .subscribe((filters) => this.searchService.updateFilters(filters));
     }
+    onBboxChange(bbox) {
+        this.fieldsService
+            .buildFiltersFromFieldValues({
+            [this.fieldName]: bbox,
+        })
+            .subscribe((filters) => this.searchService.updateFilters(filters));
+        this.clearSpatialExtentErrorNotification();
+    }
+    onSpatialExtentError(error) {
+        this.clearSpatialExtentErrorNotification();
+        this.spatialExtentErrorNotificationId =
+            this.notificationsService.showNotification({
+                type: 'error',
+                title: this.translateService.instant('search.filters.spatialExtent.error.title'),
+                text: this.translateService.instant(error.key, error.params),
+            });
+    }
+    clearSpatialExtentErrorNotification() {
+        if (this.spatialExtentErrorNotificationId === null)
+            return;
+        this.notificationsService.removeNotificationById(this.spatialExtentErrorNotificationId);
+        this.spatialExtentErrorNotificationId = null;
+    }
     ngOnInit() {
         this.fieldType = this.fieldsService.getFieldType(this.fieldName);
         this.choices$ = this.fieldsService.getAvailableValues(this.fieldName).pipe(startWith$1([]), map$1((values) => values.map((v) => ({
@@ -31304,27 +31933,15 @@ class FilterDropdownComponent {
             value: v.value.toString(), // converting to string for the dropdown
         }))), catchError(() => of([])));
     }
-    onStartDateChange(start) {
-        if (!start)
-            return;
-        this.dateRange = { ...this.dateRange, start };
-    }
-    onEndDateChange(end) {
-        if (!end)
-            return;
-        this.dateRange = { ...this.dateRange, end };
-        if (this.dateRange.start && this.dateRange.end) {
-            this.fieldsService
-                .buildFiltersFromFieldValues({
-                [this.fieldName]: this.dateRange,
-            })
-                .subscribe((filters) => {
-                return this.searchService.updateFilters(filters);
-            });
-        }
+    onDateRangeChange(dateRange) {
+        this.fieldsService
+            .buildFiltersFromFieldValues({
+            [this.fieldName]: dateRange,
+        })
+            .subscribe((filters) => this.searchService.updateFilters(filters));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FilterDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FilterDropdownComponent, isStandalone: true, selector: "gn-ui-filter-dropdown", inputs: { fieldName: "fieldName", title: "title" }, ngImport: i0, template: "@if (fieldType === 'dateRange') {\n  <gn-ui-date-range-dropdown\n    [title]=\"title\"\n    [startDate]=\"(selectedDateRange$ | async)?.start\"\n    [endDate]=\"(selectedDateRange$ | async)?.end\"\n    (startDateChange)=\"onStartDateChange($event)\"\n    (endDateChange)=\"onEndDateChange($event)\"\n  ></gn-ui-date-range-dropdown>\n} @else {\n  <gn-ui-dropdown-multiselect\n    class=\"w-full\"\n    [title]=\"title\"\n    [maxRows]=\"6\"\n    [choices]=\"(choices$ | async) || []\"\n    [selected]=\"selected$ | async\"\n    [allowSearch]=\"true\"\n    (selectValues)=\"onSelectedValues($event)\"\n    [attr.data-cy-field]=\"fieldName\"\n  >\n  </gn-ui-dropdown-multiselect>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DateRangeDropdownComponent, selector: "gn-ui-date-range-dropdown", inputs: ["title", "startDate", "endDate"], outputs: ["startDateChange", "endDateChange"] }, { kind: "component", type: DropdownMultiselectComponent, selector: "gn-ui-dropdown-multiselect", inputs: ["title", "choices", "selected", "allowSearch", "maxRows", "searchInputValue"], outputs: ["selectValues"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FilterDropdownComponent, isStandalone: true, selector: "gn-ui-filter-dropdown", inputs: { fieldName: "fieldName", title: "title" }, ngImport: i0, template: "@if (fieldType === 'dateRange') {\n  <gn-ui-date-range-dropdown\n    [title]=\"title\"\n    [dateRange]=\"(selectedDateRange$ | async) ?? {}\"\n    (dateRangeChange)=\"onDateRangeChange($event)\"\n    [attr.data-cy-field]=\"fieldName\"\n  ></gn-ui-date-range-dropdown>\n} @else if (fieldType === 'spatialExtent') {\n  <gn-ui-spatial-extent-dropdown\n    [title]=\"title\"\n    [initialBbox]=\"(selectedBoundingBox$ | async) ?? null\"\n    [maxFileSizeMb]=\"spatialExtentMaxFileSize\"\n    (bboxChange)=\"onBboxChange($event)\"\n    (errorChange)=\"onSpatialExtentError($event)\"\n    [attr.data-cy-field]=\"fieldName\"\n  ></gn-ui-spatial-extent-dropdown>\n} @else {\n  <gn-ui-dropdown-multiselect\n    class=\"w-full\"\n    [title]=\"title\"\n    [maxRows]=\"6\"\n    [choices]=\"(choices$ | async) || []\"\n    [selected]=\"selected$ | async\"\n    [allowSearch]=\"true\"\n    (selectValues)=\"onSelectedValues($event)\"\n    [attr.data-cy-field]=\"fieldName\"\n  >\n  </gn-ui-dropdown-multiselect>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DateRangeDropdownComponent, selector: "gn-ui-date-range-dropdown", inputs: ["title", "dateRange"], outputs: ["dateRangeChange"] }, { kind: "component", type: DropdownMultiselectComponent, selector: "gn-ui-dropdown-multiselect", inputs: ["title", "choices", "selected", "allowSearch", "maxRows", "searchInputValue"], outputs: ["selectValues"] }, { kind: "component", type: SpatialExtentDropdownComponent, selector: "gn-ui-spatial-extent-dropdown", inputs: ["title", "maxFileSizeMb", "initialBbox"], outputs: ["bboxChange", "errorChange"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FilterDropdownComponent, decorators: [{
             type: Component,
@@ -31332,7 +31949,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         CommonModule,
                         DateRangeDropdownComponent,
                         DropdownMultiselectComponent,
-                    ], template: "@if (fieldType === 'dateRange') {\n  <gn-ui-date-range-dropdown\n    [title]=\"title\"\n    [startDate]=\"(selectedDateRange$ | async)?.start\"\n    [endDate]=\"(selectedDateRange$ | async)?.end\"\n    (startDateChange)=\"onStartDateChange($event)\"\n    (endDateChange)=\"onEndDateChange($event)\"\n  ></gn-ui-date-range-dropdown>\n} @else {\n  <gn-ui-dropdown-multiselect\n    class=\"w-full\"\n    [title]=\"title\"\n    [maxRows]=\"6\"\n    [choices]=\"(choices$ | async) || []\"\n    [selected]=\"selected$ | async\"\n    [allowSearch]=\"true\"\n    (selectValues)=\"onSelectedValues($event)\"\n    [attr.data-cy-field]=\"fieldName\"\n  >\n  </gn-ui-dropdown-multiselect>\n}\n" }]
+                        SpatialExtentDropdownComponent,
+                    ], template: "@if (fieldType === 'dateRange') {\n  <gn-ui-date-range-dropdown\n    [title]=\"title\"\n    [dateRange]=\"(selectedDateRange$ | async) ?? {}\"\n    (dateRangeChange)=\"onDateRangeChange($event)\"\n    [attr.data-cy-field]=\"fieldName\"\n  ></gn-ui-date-range-dropdown>\n} @else if (fieldType === 'spatialExtent') {\n  <gn-ui-spatial-extent-dropdown\n    [title]=\"title\"\n    [initialBbox]=\"(selectedBoundingBox$ | async) ?? null\"\n    [maxFileSizeMb]=\"spatialExtentMaxFileSize\"\n    (bboxChange)=\"onBboxChange($event)\"\n    (errorChange)=\"onSpatialExtentError($event)\"\n    [attr.data-cy-field]=\"fieldName\"\n  ></gn-ui-spatial-extent-dropdown>\n} @else {\n  <gn-ui-dropdown-multiselect\n    class=\"w-full\"\n    [title]=\"title\"\n    [maxRows]=\"6\"\n    [choices]=\"(choices$ | async) || []\"\n    [selected]=\"selected$ | async\"\n    [allowSearch]=\"true\"\n    (selectValues)=\"onSelectedValues($event)\"\n    [attr.data-cy-field]=\"fieldName\"\n  >\n  </gn-ui-dropdown-multiselect>\n}\n" }]
         }], propDecorators: { fieldName: [{
                 type: Input
             }], title: [{
@@ -31393,7 +32011,7 @@ class FuzzySearchComponent {
         this.isSearchActive.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FuzzySearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FuzzySearchComponent, isStandalone: true, selector: "gn-ui-fuzzy-search", inputs: { autoFocus: "autoFocus", forceTrackPosition: "forceTrackPosition", enterButton: "enterButton", placeholder: "placeholder" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted", isSearchActive: "isSearchActive" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: AutocompleteComponent, descendants: true }], ngImport: i0, template: "<gn-ui-autocomplete\n  [placeholder]=\"placeholder ?? ('search.field.any.placeholder' | translate)\"\n  [displayWithFn]=\"displayWithFn\"\n  [action]=\"autoCompleteAction\"\n  (itemSelected)=\"handleItemSelection($event)\"\n  (inputSubmitted)=\"handleInputSubmission($event)\"\n  (inputCleared)=\"handleInputCleared()\"\n  (isSearchActive)=\"handleSearchActive($event)\"\n  [value]=\"searchInputValue$ | async\"\n  [preventCompleteOnSelection]=\"true\"\n  [autoFocus]=\"autoFocus\"\n  [allowSubmit]=\"true\"\n  [forceTrackPosition]=\"forceTrackPosition\"\n  [enterButton]=\"enterButton\"\n></gn-ui-autocomplete>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: FuzzySearchComponent, isStandalone: true, selector: "gn-ui-fuzzy-search", inputs: { autoFocus: "autoFocus", forceTrackPosition: "forceTrackPosition", enterButton: "enterButton", placeholder: "placeholder" }, outputs: { itemSelected: "itemSelected", inputSubmitted: "inputSubmitted", isSearchActive: "isSearchActive" }, viewQueries: [{ propertyName: "autocomplete", first: true, predicate: AutocompleteComponent, descendants: true }], ngImport: i0, template: "<gn-ui-autocomplete\n  [placeholder]=\"placeholder ?? ('search.field.any.placeholder' | translate)\"\n  [displayWithFn]=\"displayWithFn\"\n  [action]=\"autoCompleteAction\"\n  (itemSelected)=\"handleItemSelection($event)\"\n  (inputSubmitted)=\"handleInputSubmission($event)\"\n  (inputCleared)=\"handleInputCleared()\"\n  (isSearchActive)=\"handleSearchActive($event)\"\n  [value]=\"searchInputValue$ | async\"\n  [preventCompleteOnSelection]=\"true\"\n  [autoFocus]=\"autoFocus\"\n  [allowSubmit]=\"true\"\n  [forceTrackPosition]=\"forceTrackPosition\"\n  [enterButton]=\"enterButton\"\n></gn-ui-autocomplete>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithTemplate", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FuzzySearchComponent, decorators: [{
             type: Component,
@@ -31802,11 +32420,7 @@ const SortByEnum = {
     RELEVANCY: ['desc', '_score'],
     QUALITY_SCORE: ['desc', 'qualityScore'],
     CHANGE_DATE: ['desc', 'changeDate'],
-    RESOURCE_DATES: [
-        ['desc', 'revisionDateForResource'],
-        ['desc', 'publicationDateForResource'],
-        ['desc', 'creationDateForResource'],
-    ],
+    RESOURCE_DATE: ['desc', 'resourceDate.date'],
 };
 
 class SortByComponent {
@@ -31820,7 +32434,7 @@ class SortByComponent {
             },
             {
                 label: marker('results.sortBy.dateStamp'),
-                value: SortByEnum.RESOURCE_DATES,
+                value: SortByEnum.RESOURCE_DATE,
             },
             {
                 label: marker('results.sortBy.popularity'),
@@ -31872,74 +32486,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 args: ['gnUiSearchStateContainer']
             }] } });
 
-class NotificationsService {
-    constructor() {
-        this.notifications$ = new BehaviorSubject([]);
-    }
-    showNotification(content, timeoutMs, error) {
-        error && console.error(error);
-        const id = Math.floor(Math.random() * 1000000);
-        this.notifications$.next([...this.notifications$.value, { ...content, id }]);
-        if (typeof timeoutMs === 'undefined')
-            return;
-        setTimeout(() => {
-            this.removeNotificationById(id);
-        }, timeoutMs);
-    }
-    removeNotificationById(id) {
-        this.notifications$.next(this.notifications$.value.filter((n) => n.id !== id));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NotificationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NotificationsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NotificationsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class NotificationsContainerComponent {
-    constructor() {
-        this.notificationsService = inject(NotificationsService);
-    }
-    trackById(index, notification) {
-        return notification.id;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NotificationsContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: NotificationsContainerComponent, isStandalone: true, selector: "gn-ui-notifications-container", ngImport: i0, template: "<div class=\"flex flex-col gap-6 p-6 items-start pointer-events-none\">\n  @for (\n    notification of notificationsService.notifications$ | async;\n    track trackById($index, notification)\n  ) {\n    <gn-ui-notification\n      class=\"max-w-full pointer-events-auto\"\n      [text]=\"notification.text\"\n      [type]=\"notification.type\"\n      [title]=\"notification.title\"\n      [closeMessage]=\"notification.closeMessage\"\n      (notificationClose)=\"\n        notificationsService.removeNotificationById(notification.id)\n      \"\n      [@enterExit]\n    ></gn-ui-notification>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: NotificationComponent, selector: "gn-ui-notification", inputs: ["type", "title", "text", "closeMessage"], outputs: ["notificationClose"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], animations: [
-            trigger('enterExit', [
-                transition(':enter', [
-                    animate('150ms', keyframes([
-                        style({ transform: 'scale(1)', opacity: 0 }),
-                        style({ transform: 'scale(1.03)', opacity: 0.5 }),
-                        style({ transform: 'scale(1)', opacity: 1 }),
-                    ])),
-                ]),
-                transition(':leave', [
-                    animate('200ms', style({ transform: 'translateX(50px)', opacity: 0 })),
-                ]),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NotificationsContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-notifications-container', standalone: true, imports: [CommonModule, NotificationComponent], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        trigger('enterExit', [
-                            transition(':enter', [
-                                animate('150ms', keyframes([
-                                    style({ transform: 'scale(1)', opacity: 0 }),
-                                    style({ transform: 'scale(1.03)', opacity: 0.5 }),
-                                    style({ transform: 'scale(1)', opacity: 1 }),
-                                ])),
-                            ]),
-                            transition(':leave', [
-                                animate('200ms', style({ transform: 'translateX(50px)', opacity: 0 })),
-                            ]),
-                        ]),
-                    ], template: "<div class=\"flex flex-col gap-6 p-6 items-start pointer-events-none\">\n  @for (\n    notification of notificationsService.notifications$ | async;\n    track trackById($index, notification)\n  ) {\n    <gn-ui-notification\n      class=\"max-w-full pointer-events-auto\"\n      [text]=\"notification.text\"\n      [type]=\"notification.type\"\n      [title]=\"notification.title\"\n      [closeMessage]=\"notification.closeMessage\"\n      (notificationClose)=\"\n        notificationsService.removeNotificationById(notification.id)\n      \"\n      [@enterExit]\n    ></gn-ui-notification>\n  }\n</div>\n" }]
-        }] });
-
 class ResultsTableContainerComponent {
     constructor() {
         this.searchFacade = inject(SearchFacade);
@@ -32024,12 +32570,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
 
 marker('search.filters.summaryLabel.user');
 marker('search.filters.summaryLabel.changeDate');
+marker('search.filters.summaryLabel.resourceCreationRevisionDate');
+const OPEN_BOUND = '…';
 class SearchFiltersSummaryItemComponent {
     constructor() {
         this.searchFacade = inject(SearchFacade);
         this.searchService = inject(SearchService);
         this.fieldsService = inject(FieldsService);
-        this.datePipe = inject(DatePipe);
+        this.dateService = inject(DateService);
         this.translate = inject(TranslateService);
         this.fieldValues$ = this.searchFacade.searchFilters$.pipe(switchMap((filters) => this.fieldsService.readFieldValuesFromFilters(filters)), map$2((fieldValues) => Array.isArray(fieldValues[this.fieldName])
             ? fieldValues[this.fieldName]
@@ -32056,9 +32604,10 @@ class SearchFiltersSummaryItemComponent {
     getReadableValues(fieldValues) {
         return fieldValues.map((value) => {
             if (this.fieldType === 'dateRange') {
+                const { start, end } = value;
                 return {
                     value,
-                    label: `${this.datePipe.transform(value.start, 'dd.MM.yyyy')} - ${this.datePipe.transform(value.end, 'dd.MM.yyyy')}`,
+                    label: `${this.formatBound(start)} - ${this.formatBound(end)}`,
                 };
             }
             else if (this.fieldName === 'user') {
@@ -32069,6 +32618,15 @@ class SearchFiltersSummaryItemComponent {
             }
         });
     }
+    formatBound(date) {
+        return date
+            ? this.dateService.formatDate(date, {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric',
+            })
+            : OPEN_BOUND;
+    }
     async removeFilterValue(fieldValue) {
         const currentFieldValues = await firstValueFrom(this.fieldValues$);
         const updatedFieldValues = currentFieldValues
@@ -32081,11 +32639,11 @@ class SearchFiltersSummaryItemComponent {
             .subscribe((filters) => this.searchService.updateFilters(filters));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SearchFiltersSummaryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SearchFiltersSummaryItemComponent, isStandalone: true, selector: "gn-ui-search-filters-summary-item", inputs: { fieldName: "fieldName" }, providers: [DatePipe], ngImport: i0, template: "@if ((fieldValues$ | async)?.length > 0) {\n  <div class=\"flex flex-row items-center gap-2\">\n    <span class=\"text-gray-800\" data-cy=\"filterSummaryLabel\">{{\n      translatedLabel\n    }}</span>\n    @for (fieldValue of fieldValues$ | async; track fieldValue) {\n      <gn-ui-badge\n        class=\"gn-ui-badge\"\n        [style.--gn-ui-badge-rounded]=\"'8px'\"\n        [style.--gn-ui-badge-padding]=\"'3px 4px'\"\n        [style.--gn-ui-badge-text-color]=\"'black'\"\n        [style.--gn-ui-badge-background-color]=\"'#F2F2F2'\"\n        [style.--gn-ui-badge-font-weight]=\"'700'\"\n        [removable]=\"true\"\n        (badgeRemoveClicked)=\"removeFilterValue(fieldValue.value)\"\n        >{{ fieldValue.label }}</gn-ui-badge\n      >\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked", "badgeClicked"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: SearchFiltersSummaryItemComponent, isStandalone: true, selector: "gn-ui-search-filters-summary-item", inputs: { fieldName: "fieldName" }, ngImport: i0, template: "@if ((fieldValues$ | async)?.length > 0) {\n  <div class=\"flex flex-row items-center gap-2\">\n    <span class=\"text-gray-800\" data-cy=\"filterSummaryLabel\">{{\n      translatedLabel\n    }}</span>\n    @for (fieldValue of fieldValues$ | async; track fieldValue) {\n      <gn-ui-badge\n        class=\"gn-ui-badge\"\n        [style.--gn-ui-badge-rounded]=\"'8px'\"\n        [style.--gn-ui-badge-padding]=\"'3px 4px'\"\n        [style.--gn-ui-badge-text-color]=\"'black'\"\n        [style.--gn-ui-badge-background-color]=\"'#F2F2F2'\"\n        [style.--gn-ui-badge-font-weight]=\"'700'\"\n        [removable]=\"true\"\n        (badgeRemoveClicked)=\"removeFilterValue(fieldValue.value)\"\n        >{{ fieldValue.label }}</gn-ui-badge\n      >\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: BadgeComponent, selector: "gn-ui-badge", inputs: ["clickable", "removable"], outputs: ["badgeRemoveClicked", "badgeClicked"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: SearchFiltersSummaryItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-search-filters-summary-item', standalone: true, imports: [CommonModule, BadgeComponent], providers: [DatePipe], template: "@if ((fieldValues$ | async)?.length > 0) {\n  <div class=\"flex flex-row items-center gap-2\">\n    <span class=\"text-gray-800\" data-cy=\"filterSummaryLabel\">{{\n      translatedLabel\n    }}</span>\n    @for (fieldValue of fieldValues$ | async; track fieldValue) {\n      <gn-ui-badge\n        class=\"gn-ui-badge\"\n        [style.--gn-ui-badge-rounded]=\"'8px'\"\n        [style.--gn-ui-badge-padding]=\"'3px 4px'\"\n        [style.--gn-ui-badge-text-color]=\"'black'\"\n        [style.--gn-ui-badge-background-color]=\"'#F2F2F2'\"\n        [style.--gn-ui-badge-font-weight]=\"'700'\"\n        [removable]=\"true\"\n        (badgeRemoveClicked)=\"removeFilterValue(fieldValue.value)\"\n        >{{ fieldValue.label }}</gn-ui-badge\n      >\n    }\n  </div>\n}\n" }]
+            args: [{ selector: 'gn-ui-search-filters-summary-item', standalone: true, imports: [CommonModule, BadgeComponent], template: "@if ((fieldValues$ | async)?.length > 0) {\n  <div class=\"flex flex-row items-center gap-2\">\n    <span class=\"text-gray-800\" data-cy=\"filterSummaryLabel\">{{\n      translatedLabel\n    }}</span>\n    @for (fieldValue of fieldValues$ | async; track fieldValue) {\n      <gn-ui-badge\n        class=\"gn-ui-badge\"\n        [style.--gn-ui-badge-rounded]=\"'8px'\"\n        [style.--gn-ui-badge-padding]=\"'3px 4px'\"\n        [style.--gn-ui-badge-text-color]=\"'black'\"\n        [style.--gn-ui-badge-background-color]=\"'#F2F2F2'\"\n        [style.--gn-ui-badge-font-weight]=\"'700'\"\n        [removable]=\"true\"\n        (badgeRemoveClicked)=\"removeFilterValue(fieldValue.value)\"\n        >{{ fieldValue.label }}</gn-ui-badge\n      >\n    }\n  </div>\n}\n" }]
         }], propDecorators: { fieldName: [{
                 type: Input
             }] } });
@@ -32329,11 +32887,11 @@ class AddLayerFromFileComponent {
         }, 5000);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLayerFromFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AddLayerFromFileComponent, isStandalone: true, selector: "gn-ui-add-layer-from-file", ngImport: i0, template: "<div class=\"flex flex-col gap-2 my-2\">\n  <div class=\"flex items-center gap-4\">\n    <div class=\"grow rounded-md border-2 border-gray-200\">\n      <gn-ui-drag-and-drop-file-input\n        (fileChange)=\"handleFileChange($event)\"\n        [accept]=\"acceptedMimeType.join(',')\"\n        [placeholder]=\"'map.addFromFile.placeholder' | translate\"\n        class=\"placeholder-grey\"\n      ></gn-ui-drag-and-drop-file-input>\n    </div>\n  </div>\n  <p class=\"text-sm text-gray-600\" translate>map.help.addFromFile</p>\n</div>\n\n@if (errorMessage) {\n  <div class=\"text-red-500 mt-2\">\n    {{ errorMessage }}\n  </div>\n}\n\n@if (successMessage) {\n  <div class=\"text-green-500 mt-2\">\n    {{ successMessage }}\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DragAndDropFileInputComponent, selector: "gn-ui-drag-and-drop-file-input", inputs: ["placeholder", "accept"], outputs: ["fileChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AddLayerFromFileComponent, isStandalone: true, selector: "gn-ui-add-layer-from-file", ngImport: i0, template: "<div class=\"flex flex-col gap-2 my-2\">\n  <div class=\"flex items-center gap-4\">\n    <div class=\"grow rounded-md border-2 border-gray-200\">\n      <gn-ui-drag-and-drop-file-input\n        (fileChange)=\"handleFileChange($event)\"\n        [accept]=\"acceptedMimeType.join(',')\"\n        [placeholder]=\"'map.addFromFile.placeholder' | translate\"\n        textClass=\"text-gray-900 pl-2 py-2\"\n        class=\"placeholder-grey\"\n      ></gn-ui-drag-and-drop-file-input>\n    </div>\n  </div>\n  <p class=\"text-sm text-gray-600\" translate>map.help.addFromFile</p>\n</div>\n\n@if (errorMessage) {\n  <div class=\"text-red-500 mt-2\">\n    {{ errorMessage }}\n  </div>\n}\n\n@if (successMessage) {\n  <div class=\"text-green-500 mt-2\">\n    {{ successMessage }}\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: DragAndDropFileInputComponent, selector: "gn-ui-drag-and-drop-file-input", inputs: ["placeholder", "accept", "maxFileSizeMb", "icon", "dropzoneBackgroundColor", "textClass", "extraClass", "showFileName"], outputs: ["fileChange", "errorChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AddLayerFromFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gn-ui-add-layer-from-file', standalone: true, imports: [TranslateDirective, TranslatePipe, DragAndDropFileInputComponent], template: "<div class=\"flex flex-col gap-2 my-2\">\n  <div class=\"flex items-center gap-4\">\n    <div class=\"grow rounded-md border-2 border-gray-200\">\n      <gn-ui-drag-and-drop-file-input\n        (fileChange)=\"handleFileChange($event)\"\n        [accept]=\"acceptedMimeType.join(',')\"\n        [placeholder]=\"'map.addFromFile.placeholder' | translate\"\n        class=\"placeholder-grey\"\n      ></gn-ui-drag-and-drop-file-input>\n    </div>\n  </div>\n  <p class=\"text-sm text-gray-600\" translate>map.help.addFromFile</p>\n</div>\n\n@if (errorMessage) {\n  <div class=\"text-red-500 mt-2\">\n    {{ errorMessage }}\n  </div>\n}\n\n@if (successMessage) {\n  <div class=\"text-green-500 mt-2\">\n    {{ successMessage }}\n  </div>\n}\n" }]
+            args: [{ selector: 'gn-ui-add-layer-from-file', standalone: true, imports: [TranslateDirective, TranslatePipe, DragAndDropFileInputComponent], template: "<div class=\"flex flex-col gap-2 my-2\">\n  <div class=\"flex items-center gap-4\">\n    <div class=\"grow rounded-md border-2 border-gray-200\">\n      <gn-ui-drag-and-drop-file-input\n        (fileChange)=\"handleFileChange($event)\"\n        [accept]=\"acceptedMimeType.join(',')\"\n        [placeholder]=\"'map.addFromFile.placeholder' | translate\"\n        textClass=\"text-gray-900 pl-2 py-2\"\n        class=\"placeholder-grey\"\n      ></gn-ui-drag-and-drop-file-input>\n    </div>\n  </div>\n  <p class=\"text-sm text-gray-600\" translate>map.help.addFromFile</p>\n</div>\n\n@if (errorMessage) {\n  <div class=\"text-red-500 mt-2\">\n    {{ errorMessage }}\n  </div>\n}\n\n@if (successMessage) {\n  <div class=\"text-green-500 mt-2\">\n    {{ successMessage }}\n  </div>\n}\n" }]
         }] });
 
 class LayersPanelComponent {
@@ -32394,95 +32952,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                     ], 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    <ng-icon class=\"mr-2\" name=\"matLayersOutline\"></ng-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    @for (layer of layers$ | async; track layer; let index = $index) {\n      <div class=\"flex flex-row py-3\">\n        <ng-icon class=\"-ml-2 mr-2 shrink-0\" name=\"matChevronRight\"></ng-icon>\n        <span class=\"mr-2 grow\">{{ layer.label }}</span>\n        <a\n          href\n          class=\"underline text-sm text-red-700 hover:text-red-900\"\n          (click)=\"deleteLayer(index); $event.preventDefault()\"\n        >\n          delete\n        </a>\n      </div>\n    }\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  <ng-icon class=\"mr-4\" name=\"matAddCircleOutlineOutline\"> </ng-icon>\n  <span translate>map.add.layer</span>\n</ng-template>\n" }]
         }] });
 
-class GeocodingComponent {
-    constructor() {
-        this.mapFacade = inject(MapFacade);
-        this.geocodingService = inject(GeocodingService);
-        this.searchText = '';
-        this.results = [];
-        this.searchTextChanged = new Subject();
-        this.destroy$ = new Subject();
-        this.errorMessage = null;
-        this.searchTextChanged
-            .pipe(debounceTime(300), switchMap$1((searchText) => {
-            return from(this.geocodingService.query(searchText)).pipe(catchError$1((error) => {
-                this.errorMessage =
-                    'An error occurred while searching. Please try again.';
-                console.error(error);
-                return [];
-            }));
-        }), takeUntil(this.destroy$))
-            .subscribe((results) => {
-            this.results = results;
-        });
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    onSearchChange(searchText) {
-        if (!searchText) {
-            this.clearSearch();
-            return;
-        }
-        else {
-            this.searchTextChanged.next(searchText);
-        }
-    }
-    clearSearch() {
-        this.searchText = '';
-        this.results = [];
-        this.errorMessage = null;
-    }
-    async zoomToLocation(result) {
-        const geometry = result.geom;
-        if (geometry.type === 'Point') {
-            await this.zoomToPoint(geometry.coordinates);
-        }
-        else if (geometry.type === 'Polygon') {
-            await this.zoomToPolygon(geometry.coordinates);
-        }
-        else {
-            console.error(`Unsupported geometry type: ${geometry.type}`);
-        }
-    }
-    async zoomToPoint(pointCoords) {
-        const context = await firstValueFrom(this.mapFacade.context$);
-        const view = {
-            center: pointCoords,
-            zoom: 10,
-        };
-        this.mapFacade.applyContext({
-            ...context,
-            view,
-        });
-    }
-    async zoomToPolygon(polygonCoords) {
-        const context = await firstValueFrom(this.mapFacade.context$);
-        const view = {
-            geometry: {
-                type: 'Polygon',
-                coordinates: polygonCoords,
-            },
-        };
-        this.mapFacade.applyContext({
-            ...context,
-            view,
-        });
-    }
-    onEnterPress() {
-        if (this.results && this.results.length > 0) {
-            this.zoomToLocation(this.results[0]);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GeocodingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: GeocodingComponent, isStandalone: true, selector: "gn-ui-geocoding", ngImport: i0, template: "<gn-ui-search-input\n  [(value)]=\"searchText\"\n  (valueChange)=\"onSearchChange($event)\"\n  (keyup.enter)=\"onEnterPress()\"\n  [placeholder]=\"'map.geocoding.placeholder' | translate\"\n>\n</gn-ui-search-input>\n@if (results && results.length) {\n  <ul\n    class=\"bg-gray-50 border border-gray-200 w-full mt-2 shadow-sm rounded-lg\"\n  >\n    @for (result of results; track result) {\n      <li\n        (click)=\"zoomToLocation(result)\"\n        class=\"flex items-center pl-8 pr-4 py-2 border-b border-gray-200 relative cursor-pointer hover:bg-blue-100 hover:text-gray-800 transition duration-300 ease-in-out\"\n      >\n        <svg\n          class=\"stroke-current text-blue-500 absolute w-5 h-5 left-3 top-3\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n          />\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n          />\n        </svg>\n        <span class=\"font-sans font-semibold ml-4\">{{ result.label }}</span>\n      </li>\n    }\n  </ul>\n}\n", styles: [""], dependencies: [{ kind: "component", type: SearchInputComponent, selector: "gn-ui-search-input", inputs: ["value", "placeholder"], outputs: ["valueChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GeocodingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gn-ui-geocoding', standalone: true, imports: [SearchInputComponent, TranslatePipe], template: "<gn-ui-search-input\n  [(value)]=\"searchText\"\n  (valueChange)=\"onSearchChange($event)\"\n  (keyup.enter)=\"onEnterPress()\"\n  [placeholder]=\"'map.geocoding.placeholder' | translate\"\n>\n</gn-ui-search-input>\n@if (results && results.length) {\n  <ul\n    class=\"bg-gray-50 border border-gray-200 w-full mt-2 shadow-sm rounded-lg\"\n  >\n    @for (result of results; track result) {\n      <li\n        (click)=\"zoomToLocation(result)\"\n        class=\"flex items-center pl-8 pr-4 py-2 border-b border-gray-200 relative cursor-pointer hover:bg-blue-100 hover:text-gray-800 transition duration-300 ease-in-out\"\n      >\n        <svg\n          class=\"stroke-current text-blue-500 absolute w-5 h-5 left-3 top-3\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n          />\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n          />\n        </svg>\n        <span class=\"font-sans font-semibold ml-4\">{{ result.label }}</span>\n      </li>\n    }\n  </ul>\n}\n" }]
-        }], ctorParameters: () => [] });
-
 /*
   Metadata actions
  */
@@ -32498,8 +32967,7 @@ const closeMetadata = createAction('[Metadata view] close');
   Related actions
  */
 const setRelated = createAction('[Metadata view] Set related records', props());
-const setSources = createAction('[Metadata view] Set sources', props());
-const setSourceOf = createAction('[Metadata view] Set has sources', props());
+const setLinkedRecords = createAction('[Metadata view] Set associated records', props());
 /*
   ChartConfig actions
  */
@@ -32531,9 +32999,8 @@ var mdview_actions = /*#__PURE__*/Object.freeze({
     loadUserFeedbacksSuccess: loadUserFeedbacksSuccess,
     setChartConfig: setChartConfig,
     setIncompleteMetadata: setIncompleteMetadata,
-    setRelated: setRelated,
-    setSourceOf: setSourceOf,
-    setSources: setSources
+    setLinkedRecords: setLinkedRecords,
+    setRelated: setRelated
 });
 
 const METADATA_VIEW_FEATURE_STATE_KEY = 'metadataView';
@@ -32576,12 +33043,9 @@ on(loadFullMetadata, (state) => ({
 on(setRelated, (state, { related }) => ({
     ...state,
     related,
-})), on(setSources, (state, { sources }) => ({
-    ...state,
-    sources,
-})), on(setSourceOf, (state, { sourceOf }) => ({
+})), on(setLinkedRecords, (state, { linkedRecords }) => ({
     ...state,
-    sourceOf,
+    linkedRecords,
 })), 
 /*
   ChartConfig reducers
@@ -32643,8 +33107,7 @@ const getMetadataError = createSelector(getMdViewState, (state) => state.error);
   Related selectors
 */
 const getRelated = createSelector(getMdViewState, (state) => state.related);
-const getSources = createSelector(getMdViewState, (state) => state.sources);
-const getSourceOf = createSelector(getMdViewState, (state) => state.sourceOf);
+const getLinkedRecords = createSelector(getMdViewState, (state) => state.linkedRecords);
 /*
   Metadata selectors
 */
@@ -32745,6 +33208,453 @@ function parseHeaders(httpHeaders) {
     return result;
 }
 
+const GEOMETRY_COLUMN_ALIAS = '__geometry__';
+function fieldToSql(name) {
+    return `"${name.replace(/"/g, '""')}"`; // escape double quotes in field names
+}
+function filterToSql(filter) {
+    const operator = filter[0];
+    const args = filter.slice(1);
+    function valueToSql(value) {
+        return typeof value === 'number' ? value : `'${value}'`;
+    }
+    switch (operator) {
+        case '<':
+        case '<=':
+        case '>':
+        case '>=':
+        case '=':
+        case '!=':
+        case 'like':
+            return `${fieldToSql(args[0])} ${operator.toUpperCase()} ${valueToSql(args[1])}`;
+        case 'in': {
+            const values = args.slice(1);
+            return `${fieldToSql(args[0])} IN (${values.map(valueToSql).join(', ')})`;
+        }
+        case 'and':
+        case 'or': {
+            const children = args
+                .map(filterToSql)
+                .join(` ${operator.toUpperCase()} `);
+            return `(${children})`;
+        }
+        case 'not':
+            return `NOT (${filterToSql(args[0])})`;
+    }
+    throw new Error(`Could not generate SQL query, operator not recognized: ${operator}`);
+}
+function aggregationToSql(aggregation) {
+    const operation = aggregation[0];
+    const field = aggregation[1];
+    switch (operation) {
+        case 'average':
+            return `CAST(AVG(${fieldToSql(field)}) AS DOUBLE) as ${fieldToSql(`average(${field})`)}`;
+        case 'sum':
+        case 'max':
+        case 'min':
+            return `CAST(${operation.toUpperCase()}(${fieldToSql(field)}) AS DOUBLE) as ${fieldToSql(`${operation}(${field})`)}`;
+        case 'count':
+            return 'CAST(COUNT(*) AS INTEGER) as "count()"'; // we don't need Bigint precision here
+    }
+}
+/**
+ * Leave arguments at null if not used
+ * @param tableName
+ * @param selected
+ * @param filter
+ * @param sort
+ * @param startIndex
+ * @param count
+ * @param groupBy
+ * @param aggregations
+ */
+function generateSqlQuery(tableName, selected = null, filter = null, sort = null, startIndex = null, count = null, groupBy = null, aggregations = null, geometryColumn = null) {
+    let sqlSelect = 'SELECT *';
+    const sqlFrom = ` FROM ${tableName}`;
+    let sqlOrderBy = '';
+    let sqlWhere = '';
+    let sqlLimit = '';
+    let sqlGroupBy = '';
+    if (selected !== null) {
+        sqlSelect = `SELECT ${selected.map(fieldToSql).join(', ')}`;
+    }
+    if (geometryColumn !== null) {
+        sqlSelect += `, ST_AsGeoJSON(${fieldToSql(geometryColumn)}) as ${GEOMETRY_COLUMN_ALIAS}`;
+    }
+    if (filter !== null) {
+        sqlWhere = ` WHERE ${filterToSql(filter)}`;
+    }
+    if (sort?.length) {
+        sqlOrderBy = ` ORDER BY ${sort
+            .map((sort) => `${fieldToSql(sort[1])} ${sort[0].toUpperCase()}`)
+            .join(', ')}`;
+    }
+    if (startIndex !== null && count !== null) {
+        sqlLimit = ` LIMIT ${count} OFFSET ${startIndex}`;
+    }
+    if (groupBy !== null && aggregations !== null) {
+        sqlSelect = `SELECT ${aggregations.map(aggregationToSql).join(', ')}`;
+        const groupedByDistinct = groupBy.filter((group) => group[0] === 'distinct');
+        const sqlGroupByFields = groupedByDistinct
+            .map((group) => fieldToSql(group[1]))
+            .join(', ');
+        const sqlGroupBySelect = groupedByDistinct
+            .map((group) => `${fieldToSql(group[1])} as ${fieldToSql(`distinct(${group[1]})`)}`)
+            .join(', ');
+        if (sqlGroupByFields && sqlGroupBySelect) {
+            sqlGroupBy = ` GROUP BY ${sqlGroupByFields}`;
+            sqlSelect += `, ${sqlGroupBySelect}`;
+        }
+    }
+    return sqlSelect + sqlFrom + sqlGroupBy + sqlWhere + sqlOrderBy + sqlLimit;
+}
+
+function arrowTableToDataItems(table) {
+    const fields = table.schema.fields;
+    return table.toArray().map((row) => {
+        const rowJson = row.toJSON();
+        const feature = {
+            type: 'Feature',
+            geometry: null,
+            properties: {},
+        };
+        const keys = Object.keys(rowJson);
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            const dataType = fields[i].type;
+            let value = rowJson[key];
+            // this might happen if we get an array inside a field
+            if (value instanceof Vector) {
+                value = Array.from(value);
+            }
+            // cast bigints to ints
+            if (typeof value === 'bigint') {
+                value = Number(value);
+            }
+            // rename columns with empty name
+            if (!key) {
+                feature.properties['unknown'] = value;
+                continue;
+            }
+            // assign properties that look like an id to the geojson `id` field
+            if (/^(object|feature)?_?id$/.test(key.toLowerCase()) &&
+                (typeof value == 'string' || typeof value === 'number')) {
+                feature.id = value;
+            }
+            // if a date is in timestamp (number) format, convert it to native
+            if (typeof value === 'number' &&
+                (DataType.isTimestamp(dataType) || DataType.isDate(dataType))) {
+                value = new Date(value);
+            }
+            // if a binary field (most likely a geometry column): skip
+            if (DataType.isBinary(dataType)) {
+                continue;
+            }
+            // geometry column
+            if (key === GEOMETRY_COLUMN_ALIAS && DataType.isUtf8(dataType)) {
+                feature.geometry = JSON.parse(value);
+                continue;
+            }
+            feature.properties[key] = value;
+        }
+        return feature;
+    });
+}
+
+// init code taken from https://github.com/duckdb/duckdb-wasm/blob/main/packages/duckdb-wasm/README.md
+const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
+// from https://duckdb.org/docs/current/sql/data_types/overview
+const typesMapping = {
+    INTEGER: 'number',
+    SMALLINT: 'number',
+    TINYINT: 'number',
+    BIGINT: 'number',
+    HUGEINT: 'number',
+    UINTEGER: 'number',
+    USMALLINT: 'number',
+    UTINYINT: 'number',
+    UBIGINT: 'number',
+    UHUGEINT: 'number',
+    DOUBLE: 'number',
+    BIGNUM: 'number',
+    DECIMAL: 'number',
+    NUMERIC: 'number',
+    FLOAT: 'number',
+    REAL: 'number',
+    'TIMESTAMP WITH TIME ZONE': 'date',
+    TIMESTAMP: 'date',
+    DATE: 'date',
+    CHAR: 'string',
+    VARCHAR: 'string',
+    TEXT: 'string',
+    UUID: 'string',
+    BLOB: 'string',
+    BIT: 'string',
+    INTERVAL: 'string',
+    LIST: 'string',
+    BOOLEAN: 'boolean',
+};
+class Engine {
+    async makeInit() {
+        const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);
+        let worker_url = bundle.mainWorker;
+        // this is necessary to let browsers execute WASM code coming from a cross-origin host
+        if (worker_url.startsWith('https://')) {
+            worker_url = URL.createObjectURL(new Blob([`importScripts("${worker_url}");`], {
+                type: 'text/javascript',
+            }));
+        }
+        const worker = new Worker(worker_url);
+        const logger = new duckdb.ConsoleLogger(duckdb.LogLevel.WARNING);
+        this.db = new duckdb.AsyncDuckDB(logger, worker);
+        await this.db.instantiate(bundle.mainModule, bundle.pthreadWorker);
+        // setup duckdb options
+        const conn = await this.db.connect();
+        const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        await conn.query(`INSTALL spatial; LOAD spatial;`);
+        await conn.query(`SET TimeZone = '${timezone}';`);
+        await conn.query(`SET threads = 1;`);
+        // await conn.query(`SET memory_limit = '2GB';`) // used for experimenting when we encounter memory issues
+        await conn.query(`SET preserve_insertion_order = false;`); // this reduces memory usage when loading a dataset
+        conn.close();
+        return this;
+    }
+    isReady() {
+        if (!this.init_) {
+            this.init_ = this.makeInit();
+        }
+        return this.init_;
+    }
+    /**
+     * Returns information about a dataset once it's loaded:
+     * - a list of properties description
+     * - the name of the dataset geometry column (null if no geometry present)
+     * @param datasetId name of the table under which the dataset will be stored
+     * @param loadQuery duckdb-specific query for creating a table out of the data
+     * @param forceReload if true, any existing data will be dropped and redownloaded
+     */
+    async loadFile(datasetId, loadQuery, forceReload = false) {
+        const conn = await this.db.connect();
+        let results;
+        // either we want to recreate the table, or we keep it if it already exists
+        const safeLoadQuery = forceReload
+            ? `DROP TABLE IF EXISTS ${datasetId};
+${loadQuery}`
+            : loadQuery.replace(/CREATE TABLE(?! IF NOT EXISTS)/gi, 'CREATE TABLE IF NOT EXISTS');
+        // create the table
+        try {
+            results = await conn.query(safeLoadQuery);
+        }
+        catch (e) {
+            throw new FetchError('parse', `DuckDB encountered an error when loading the data: ${e.message}`);
+        }
+        // read rows count
+        results = await conn.query(`SELECT count(*) FROM ${datasetId}`);
+        const { 'count_star()': recordsCount } = results.toArray()[0].toJSON();
+        // read columns
+        results = await conn.query(`SELECT * FROM information_schema.columns WHERE table_name = '${datasetId}';`);
+        let geometryColumn = null;
+        const properties = results
+            .toArray()
+            .map((row) => {
+            const rowObj = row.toJSON();
+            if (rowObj['data_type'] === 'GEOMETRY') {
+                // the geometry is not part of the properties
+                // note: right now we only keep one geometry column name, but if there are multiple they will
+                // all get discarded
+                geometryColumn = rowObj['column_name'];
+                return null;
+            }
+            return {
+                name: rowObj['column_name'],
+                label: rowObj['column_name'],
+                type: typesMapping[rowObj['data_type']] ?? 'other',
+            };
+        })
+            .filter((prop) => prop !== null);
+        conn.close();
+        return {
+            properties,
+            geometryColumn,
+            rowsCount: Number(recordsCount),
+        };
+    }
+    // register a Uint8 buffer using a handle in the duckdb instance
+    async registerData(name, buffer) {
+        return this.db.registerFileBuffer(name, buffer);
+    }
+    /**
+     * @param query duckdb-specific query for fetching items
+     */
+    async queryItems(query) {
+        const conn = await this.db.connect();
+        const results = await conn.query(query);
+        conn.close();
+        return arrowTableToDataItems(results);
+    }
+    close() {
+        this.db?.terminate();
+    }
+}
+let engine = null;
+async function getEngine() {
+    if (!engine) {
+        engine = new Engine();
+    }
+    return engine.isReady();
+}
+
+class BaseReader {
+    constructor(url) {
+        this.url = url;
+        this.selected = null;
+        this.groupedBy = null;
+        this.aggregations = null;
+        this.filter = null;
+        this.sort = null;
+        this.startIndex = null;
+        this.count = null;
+        this.loadPromise_ = Promise.resolve();
+        this.cacheEnabled = false;
+    }
+    enableCache(enabled) {
+        this.cacheEnabled = enabled;
+    }
+    load() {
+        throw new Error('not implemented');
+    }
+    get isLoaded() {
+        return this.loadPromise_;
+    }
+    get properties() {
+        throw new Error('not implemented');
+    }
+    get info() {
+        throw new Error('not implemented');
+    }
+    read() {
+        throw new Error('not implemented');
+    }
+    selectAll() {
+        this.groupedBy = null;
+        this.aggregations = null;
+        this.selected = null;
+        this.filter = null;
+        this.startIndex = null;
+        this.count = null;
+        return this;
+    }
+    select(...selectedFields) {
+        this.selected = selectedFields;
+        this.aggregations = null; // clear aggregations & groups when selecting fields
+        this.groupedBy = null;
+        return this;
+    }
+    groupBy(...groupBy) {
+        this.groupedBy = groupBy;
+        this.selected = null; // clear normal field selection when aggregating
+        return this;
+    }
+    aggregate(...aggregations) {
+        this.aggregations = aggregations;
+        return this;
+    }
+    where(filter) {
+        this.filter = filter;
+        return this;
+    }
+    orderBy(...fieldSorts) {
+        this.sort = fieldSorts;
+        return this;
+    }
+    limit(startIndex, count) {
+        this.startIndex = startIndex;
+        this.count = count;
+        return this;
+    }
+}
+
+/**
+ * This reader handles file formats supported natively by DuckDB
+ */
+class BaseFileReader extends BaseReader {
+    // a table id should not exceed 63 chars
+    generateDatasetId() {
+        // generate a hash out of the url
+        let hash = 0;
+        for (const char of this.url) {
+            hash = (hash << 5) - hash + char.charCodeAt(0);
+            hash = hash >>> 0; // make it unsigned
+        }
+        return `datafetcher_${hash.toString(16)}`;
+    }
+    async getLoadQuery() {
+        throw new Error('not implemented');
+    }
+    async load() {
+        this.datasetId = this.generateDatasetId();
+        this.loadPromise_ = getEngine()
+            .then((engine) => {
+            this.engine = engine;
+            return this.getLoadQuery();
+        })
+            .then((loadQuery) => this.engine.loadFile(this.datasetId, loadQuery, !this.cacheEnabled))
+            .then((datasetInfo) => {
+            this.properties_ = datasetInfo.properties;
+            this.geometryColumn = datasetInfo.geometryColumn;
+            this.rowsCount = datasetInfo.rowsCount;
+            // returns void for the loaded promise
+        });
+    }
+    get properties() {
+        return this.isLoaded.then(() => this.properties_);
+    }
+    get info() {
+        return this.isLoaded.then(() => ({
+            itemsCount: this.rowsCount,
+            hasGeometry: !!this.geometryColumn,
+        }));
+    }
+    async read() {
+        await this.isLoaded;
+        // if only certain fields are selected, omit the geometry
+        const geometryColumn = this.selected === null ? this.geometryColumn : null;
+        const query = generateSqlQuery(this.datasetId, this.selected, this.filter, this.sort, this.startIndex, this.count, this.groupedBy, this.aggregations, geometryColumn);
+        return this.engine.queryItems(query);
+    }
+}
+
+class CsvReader extends BaseFileReader {
+    async getLoadQuery() {
+        // first we get a list of columns hich have a detected type of VARCHAR
+        // then we make sure that for those columns, we don't cast an empty string to null; instead we want to keep the empty string
+        return `
+SET VARIABLE strColumns = (SELECT list(name) FROM (SELECT unnest(Columns, recursive := true) FROM sniff_csv("${this.url}")) WHERE type = 'VARCHAR');
+CREATE TABLE ${this.datasetId} AS SELECT * FROM read_csv("${this.url}",
+  force_not_null = getvariable('strColumns'),
+  auto_type_candidates = ['NULL', 'BOOLEAN', 'INTEGER', 'DOUBLE', 'DATE', 'VARCHAR']
+);`;
+    }
+}
+
+class JsonReader extends BaseFileReader {
+    async getLoadQuery() {
+        return `
+CREATE TABLE ${this.datasetId} AS SELECT * FROM read_json("${this.url}",
+    maximum_object_size = 536870912 -- 500MB
+);`;
+    }
+}
+
+class GeojsonReader extends BaseFileReader {
+    async getLoadQuery() {
+        return `
+CREATE TABLE ${this.datasetId} AS SELECT * FROM st_read("${this.url}",
+    allowed_drivers = ['GeoJSON']
+);`;
+    }
+}
+
 async function inferDatasetType(url, typeHint) {
     const fileExtensionMatches = new URL(url, typeof window !== 'undefined' ? window.location.toString() : undefined).pathname.match(/\.(.+)$/);
     const fileExtension = fileExtensionMatches && fileExtensionMatches.length
@@ -32809,127 +33719,6 @@ function fetchDataAsArrayBuffer(url, cacheActive) {
         return new Uint8Array(array).buffer;
     });
 }
-function tryParseDate(input) {
-    if (typeof input !== 'string')
-        return null;
-    function tryIso(value) {
-        const parsed = parseISO(value);
-        return isNaN(parsed.getDate()) ? null : parsed;
-    }
-    function tryFormat(value, format) {
-        const parsed = parse$4(value, format, new Date());
-        return isNaN(parsed.getDate()) ? null : parsed;
-    }
-    return (tryIso(input) ||
-        tryFormat(input, 'dd/MM/yyyy') ||
-        tryFormat(input, 'dd.MM.yyyy') ||
-        tryFormat(input, 'MM/dd/yyyy') ||
-        null);
-}
-function tryParseNumber(input) {
-    if (isNaN(input))
-        return null;
-    const parsed = parseFloat(input);
-    return isNaN(parsed) ? null : parsed;
-}
-function jsonToGeojsonFeature(object) {
-    const { id, properties } = Object.keys(object)
-        .map((property) => (property ? property : 'unknown')) //prevent empty strings
-        .reduce((prev, curr) => curr.toLowerCase().endsWith('id')
-        ? {
-            ...prev,
-            id: object[curr],
-        }
-        : {
-            ...prev,
-            properties: { ...prev.properties, [curr]: object[curr] },
-        }, { id: undefined, properties: {} });
-    return {
-        type: 'Feature',
-        geometry: null,
-        properties,
-        ...(id !== undefined && { id }),
-    };
-}
-function mutateProperties(items, mutators) {
-    const mutatorKeys = Object.keys(mutators);
-    for (let i = 0, ii = items.length; i < ii; i++) {
-        const item = items[i];
-        for (const mutatorField of mutatorKeys) {
-            if (!(mutatorField in item.properties))
-                continue;
-            item.properties[mutatorField] = mutators[mutatorField](item.properties[mutatorField]);
-        }
-    }
-    return items;
-}
-const SAMPLE_SIZE = 20;
-/**
- * This will infer field types from a list of data items and cast the values accordingly
- * @param items
- * @param inferTypes
- */
-function processItemProperties(items, inferTypes = false) {
-    const foundFields = {};
-    for (let i = 0, ii = Math.min(SAMPLE_SIZE, items.length); i < ii; i++) {
-        const item = items[i];
-        const fields = Object.keys(item.properties);
-        for (const field of fields) {
-            if (!(field in foundFields)) {
-                foundFields[field] = {
-                    label: field,
-                    name: field,
-                    type: null,
-                };
-            }
-            const value = item.properties[field];
-            const info = foundFields[field];
-            if (value === undefined || value === '' || value === null)
-                continue;
-            if (!inferTypes) {
-                if (info.type === null && typeof value === 'number') {
-                    info.type = 'number';
-                }
-                else if (info.type === 'number' && typeof value !== 'number') {
-                    info.type = 'string';
-                }
-                continue;
-            }
-            const parsedNumber = tryParseNumber(value);
-            if (info.type === null && parsedNumber !== null) {
-                info.type = 'number';
-                continue;
-            }
-            else if (info.type === 'number' && parsedNumber === null) {
-                info.type = 'string';
-                continue;
-            }
-            const parsedDate = tryParseDate(value);
-            if (info.type === null && parsedDate !== null) {
-                info.type = 'date';
-            }
-            else if (info.type === 'date' && parsedDate === null) {
-                info.type = 'string';
-            }
-        }
-    }
-    const properties = [];
-    const mutators = {};
-    for (const field in foundFields) {
-        const info = foundFields[field];
-        if (info.type === 'number') {
-            mutators[field] = tryParseNumber;
-        }
-        else if (info.type === 'date') {
-            mutators[field] = tryParseDate;
-        }
-        properties.push({ ...info, type: info.type || 'string' });
-    }
-    if (inferTypes) {
-        mutateProperties(items, mutators);
-    }
-    return { items, properties };
-}
 /**
  * This creates a Proxy that allows reading and writing to the data item properties
  * as if it was a simple array of JSON objects
@@ -32951,333 +33740,71 @@ function getJsonDataItemsProxy(items) {
     });
 }
 
-function filterToSql(filter) {
-    const operator = filter[0];
-    const args = filter.slice(1);
-    function valueToSql(value) {
-        return typeof value === 'number' ? value : `'${value}'`;
-    }
-    switch (operator) {
-        case '<':
-        case '<=':
-        case '>':
-        case '>=':
-        case '=':
-        case '!=':
-        case 'like':
-            return `[${args[0]}] ${operator.toUpperCase()} ${valueToSql(args[1])}`;
-        case 'in': {
-            const values = args.slice(1);
-            return `[${args[0]}] IN (${values.map(valueToSql).join(', ')})`;
-        }
-        case 'and':
-        case 'or': {
-            const children = args
-                .map(filterToSql)
-                .join(` ${operator.toUpperCase()} `);
-            return `(${children})`;
-        }
-        case 'not':
-            return `NOT (${filterToSql(args[0])})`;
-    }
-    throw new Error(`Could not generate SQL query, operator not recognized: ${operator}`);
-}
-function aggregationToSql(aggregation) {
-    const operation = aggregation[0];
-    const field = aggregation[1];
-    switch (operation) {
-        case 'average':
-            return `AVG([${field}]) as [average(${field})]`;
-        case 'sum':
-        case 'max':
-        case 'min':
-            return `${operation.toUpperCase()}([${field}]) as [${operation}(${field})]`;
-        case 'count':
-            return 'COUNT(*) as [count()]';
-    }
-}
-/**
- * Leave arguments at null if not used
- * @param selected
- * @param filter
- * @param sort
- * @param startIndex
- * @param count
- * @param groupBy
- * @param aggregations
- */
-function generateSqlQuery(selected = null, filter = null, sort = null, startIndex = null, count = null, groupBy = null, aggregations = null) {
-    let sqlSelect = 'SELECT *';
-    const sqlFrom = ' FROM ?';
-    let sqlOrderBy = '';
-    let sqlWhere = '';
-    let sqlLimit = '';
-    let sqlGroupBy = '';
-    if (selected !== null) {
-        sqlSelect = `SELECT ${selected.map((name) => `[${name}]`).join(', ')}`;
-    }
-    if (filter !== null) {
-        sqlWhere = ` WHERE ${filterToSql(filter)}`;
-    }
-    if (sort?.length) {
-        sqlOrderBy = ` ORDER BY ${sort
-            .map((sort) => `[${sort[1]}] ${sort[0].toUpperCase()}`)
-            .join(', ')}`;
-    }
-    if (startIndex !== null && count !== null) {
-        sqlLimit = ` LIMIT ${count} OFFSET ${startIndex}`;
-    }
-    if (groupBy !== null && aggregations !== null) {
-        sqlSelect = `SELECT ${aggregations.map(aggregationToSql).join(', ')}`;
-        const groupedByDistinct = groupBy.filter((group) => group[0] === 'distinct');
-        const sqlGroupByFields = groupedByDistinct
-            .map((group) => `[${group[1]}]`)
-            .join(', ');
-        const sqlGroupBySelect = groupedByDistinct
-            .map((group) => `[${group[1]}] as [distinct(${group[1]})]`)
-            .join(', ');
-        if (sqlGroupByFields && sqlGroupBySelect) {
-            sqlGroupBy = ` GROUP BY ${sqlGroupByFields}`;
-            sqlSelect += `, ${sqlGroupBySelect}`;
+class ExcelReader extends BaseFileReader {
+    async getLoadQuery() {
+        // we download the file as an array buffer first, in order to be able to check if it's an XLS file
+        let buffer = await fetchDataAsArrayBuffer(this.url, this.cacheEnabled);
+        const bufferHandle = `B${this.datasetId}`;
+        // checking against the magic number at the beginning of XLS files, see https://en.wikipedia.org/wiki/List_of_file_signatures
+        const magicNumber = new Uint8Array(buffer, 0, 8); // first 8 bytes
+        const isXls = Array.from(magicNumber)
+            .map((n) => n.toString(16).toUpperCase())
+            .join(' ') === 'D0 CF 11 E0 A1 B1 1A E1';
+        // uh oh, this is an XLS file (not supported by duckdb); convert it to CSV using the xlsx package
+        if (isXls) {
+            buffer = await import('xlsx').then(({ read, utils }) => {
+                const workbook = read(buffer);
+                const json = utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
+                return new TextEncoder().encode(JSON.stringify(json)).buffer;
+            });
         }
-    }
-    return sqlSelect + sqlFrom + sqlGroupBy + sqlOrderBy + sqlWhere + sqlLimit;
-}
-
-class BaseReader {
-    constructor(url) {
-        this.url = url;
-        this.selected = null;
-        this.groupedBy = null;
-        this.aggregations = null;
-        this.filter = null;
-        this.sort = null;
-        this.startIndex = null;
-        this.count = null;
-    }
-    load() {
-        throw new Error('not implemented');
-    }
-    get properties() {
-        throw new Error('not implemented');
-    }
-    get info() {
-        throw new Error('not implemented');
-    }
-    read() {
-        throw new Error('not implemented');
-    }
-    selectAll() {
-        this.groupedBy = null;
-        this.aggregations = null;
-        this.selected = null;
-        this.filter = null;
-        this.startIndex = null;
-        this.count = null;
-        return this;
-    }
-    select(...selectedFields) {
-        this.selected = selectedFields;
-        this.aggregations = null; // clear aggregations & groups when selecting fields
-        this.groupedBy = null;
-        return this;
-    }
-    groupBy(...groupBy) {
-        this.groupedBy = groupBy;
-        this.selected = null; // clear normal field selection when aggregating
-        return this;
-    }
-    aggregate(...aggregations) {
-        this.aggregations = aggregations;
-        return this;
-    }
-    where(filter) {
-        this.filter = filter;
-        return this;
-    }
-    orderBy(...fieldSorts) {
-        this.sort = fieldSorts;
-        return this;
-    }
-    limit(startIndex, count) {
-        this.startIndex = startIndex;
-        this.count = count;
-        return this;
-    }
-}
-
-class BaseCacheReader extends BaseReader {
-    constructor(url, cacheActive = true) {
-        super(url);
-        this.url = url;
-        this.cacheActive = cacheActive;
-    }
-    setCacheActive(value) {
-        this.cacheActive = value;
-    }
-}
-
-class BaseFileReader extends BaseCacheReader {
-    getData() {
-        throw new Error('not implemented');
-    }
-    load() {
-        this.parseResult_ = this.getData();
-    }
-    get properties() {
-        return this.parseResult_.then((result) => result.properties);
-    }
-    get info() {
-        return this.parseResult_.then((result) => ({
-            itemsCount: result.items.length,
-        }));
-    }
-    async read() {
-        const items = (await this.parseResult_).items;
-        // no query defined: return the full results as is
-        if (this.groupedBy == null &&
-            this.aggregations == null &&
-            this.selected == null &&
-            this.sort == null &&
-            this.filter == null &&
-            this.startIndex == null &&
-            this.count == null) {
-            return items;
-        }
-        const jsonItems = getJsonDataItemsProxy(items);
-        const query = generateSqlQuery(this.selected, this.filter, this.sort, this.startIndex, this.count, this.groupedBy, this.aggregations);
-        const result = await import('alasql').then((module) => module.default(query, [jsonItems]));
-        return result.map(jsonToGeojsonFeature);
-    }
-}
-
-function parseCsv(text) {
-    // first parse the header to guess the delimiter
-    // note that we do that to not rely on Papaparse logic for guessing delimiter
-    let delimiter;
-    try {
-        const header = text.split('\n')[0];
-        const result = Papa.parse(header, {
-            header: false,
-        });
-        delimiter = result.meta.delimiter;
-    }
-    catch (e) {
-        throw new Error('CSV parsing failed: the delimiter could not be guessed');
-    }
-    const parsed = Papa.parse(text, {
-        header: true,
-        skipEmptyLines: true,
-        delimiter,
-    });
-    if (parsed.errors.length) {
-        throw new Error('CSV parsing failed for the following reasons:\n' +
-            parsed.errors
-                .map((error) => `* ${error.message} at row ${error.row}, column ${error.index}`)
-                .join('\n'));
-    }
-    const items = parsed.data.map(jsonToGeojsonFeature);
-    return processItemProperties(items, true);
-}
-class CsvReader extends BaseFileReader {
-    getData() {
-        return fetchDataAsText(this.url, this.cacheActive).then(parseCsv);
+        const duckDbFn = isXls ? 'read_json' : 'read_xlsx';
+        await this.engine.registerData(bufferHandle, new Uint8Array(buffer));
+        return `
+CREATE TABLE ${this.datasetId} AS SELECT * FROM ${duckDbFn}("${bufferHandle}", ignore_errors = true);`;
     }
 }
 
-/**
- * This parser only supports arrays of simple flat objects with properties
- * @param text
- */
-function parseJson(text) {
-    const parsed = JSON.parse(text);
-    if (!Array.isArray(parsed)) {
-        throw new Error('Could not parse JSON, expected an array at root level');
-    }
-    return processItemProperties(parsed.map(jsonToGeojsonFeature));
-}
-class JsonReader extends BaseFileReader {
-    getData() {
-        return fetchDataAsText(this.url, this.cacheActive).then(parseJson);
+class GmlReader extends BaseFileReader {
+    async getLoadQuery() {
+        return `
+CREATE TABLE ${this.datasetId} AS SELECT * FROM st_read("${this.url}",
+    allowed_drivers = ['GML']
+);`;
     }
 }
 
-/**
- * This parser supports both Geojson Feature collections or arrays
- * of Features
- * @param text
- */
+const formatGeojson = new GeoJSON$1();
 function parseGeojson(text) {
     const parsed = JSON.parse(text);
     const features = parsed.type === 'FeatureCollection' ? parsed.features : parsed;
     if (!Array.isArray(features)) {
         throw new Error('Could not parse GeoJSON, expected a features collection or an array of features at root level');
     }
-    return processItemProperties(features);
-}
-class GeojsonReader extends BaseFileReader {
-    getData() {
-        return fetchDataAsText(this.url, this.cacheActive).then(parseGeojson);
-    }
-}
-
-/**
- * This will read the first sheet of the excel workbook and expect the first
- * line to contain the properties names
- * @param buffer
- */
-function parseExcel(buffer) {
-    return import('xlsx').then(({ read, utils }) => {
-        const workbook = read(buffer);
-        const sheet = workbook.Sheets[workbook.SheetNames[0]];
-        let json = utils.sheet_to_json(sheet);
-        if (!json.length) {
-            json = [];
-        }
-        return processItemProperties(json.map(jsonToGeojsonFeature), true);
-    });
-}
-class ExcelReader extends BaseFileReader {
-    getData() {
-        return fetchDataAsArrayBuffer(this.url, this.cacheActive).then(parseExcel);
-    }
+    return features;
 }
-
-function parseGml(text, namespace, version) {
-    const splittedNamespace = namespace.split(':');
-    const regex = new RegExp(`xmlns:${splittedNamespace[0]}=["']([^'"]*)["']`);
+function parseGml(text, featureType, version) {
+    const parts = featureType.split(':');
+    const regex = new RegExp(`xmlns:${parts[0]}=["']([^'"]*)["']`);
     const match = regex.exec(text);
     if (match && match.length >= 2) {
-        const wf = new WFS({
+        const wfs = new WFS({
             featureNS: match[1],
-            featureType: splittedNamespace[1],
+            featureType: parts[1],
             version: version,
         });
         let features;
         try {
-            features = wf.readFeatures(text);
+            features = wfs.readFeatures(text);
         }
         catch (e) {
-            throw Error("Couldn't parse WFS with GML features");
+            throw Error(`Couldn't parse WFS with GML features: ${e.message}`);
         }
-        const geojsonItem = new GeoJSON$1().writeFeaturesObject(features);
-        return processItemProperties(geojsonItem.features, true);
+        const geojsonItem = formatGeojson.writeFeaturesObject(features);
+        return geojsonItem.features;
     }
     throw Error("Couldn't retrieve namespace url");
 }
-class GmlReader extends BaseFileReader {
-    constructor(url, namespace, version, cacheActive = true) {
-        super(url);
-        this.url = url;
-        this.namespace = namespace;
-        this.version = version;
-        this.cacheActive = cacheActive;
-    }
-    getData() {
-        return fetchDataAsText(this.url, this.cacheActive).then((text) => parseGml(text, this.namespace, this.version));
-    }
-}
-
 async function getWfsEndpoint(wfsUrl) {
     try {
         return await new WfsEndpoint(wfsUrl).isReady();
@@ -33305,21 +33832,65 @@ async function getWfsEndpoint(wfsUrl) {
         }
     }
 }
-class WfsReader extends BaseCacheReader {
-    constructor(url, wfsEndpoint, featureTypeName, cacheActive) {
-        super(url, cacheActive);
-        this.endpoint = wfsEndpoint;
-        this.featureTypeName = featureTypeName;
-        this.version = this.endpoint.getVersion();
+class WfsReader extends BaseReader {
+    constructor(url, featureTypeName) {
+        super(url);
+        this.endpoint = getWfsEndpoint(url);
+        this.featureType = this.endpoint
+            .then((endpoint) => {
+            const featureTypes = endpoint.getFeatureTypes();
+            return endpoint.getFeatureTypeFull(featureTypes.length === 1 && !featureTypeName
+                ? featureTypes[0].name
+                : featureTypeName);
+        })
+            .then((featureType) => {
+            if (!featureType) {
+                throw new Error('wfs.featuretype.notfound');
+            }
+            return featureType;
+        });
+    }
+    get backupReader() {
+        if (this.backupReader_) {
+            return this.backupReader_;
+        }
+        this.backupReader_ = Promise.all([this.endpoint, this.featureType]).then(([endpoint, featureType]) => {
+            let reader;
+            if (endpoint.supportsJson(featureType.name)) {
+                reader = new GeojsonReader(endpoint.getFeatureUrl(featureType.name, {
+                    asJson: true,
+                    outputCrs: 'EPSG:4326',
+                }));
+            }
+            else {
+                if (featureType.outputFormats.find((f) => f.toLowerCase().includes('gml')) &&
+                    (featureType.defaultCrs === 'EPSG:4326' ||
+                        featureType.otherCrs?.includes('EPSG:4326'))) {
+                    reader = new GmlReader(endpoint.getFeatureUrl(featureType.name, {
+                        outputFormat: featureType.outputFormats.find((f) => f.toLowerCase().includes('gml')),
+                        outputCrs: 'EPSG:4326',
+                    }));
+                }
+            }
+            reader.enableCache(this.cacheEnabled);
+            reader.load();
+            return reader;
+        });
+        return this.backupReader_;
     }
     get properties() {
-        return this.endpoint
-            .getFeatureTypeFull(this.featureTypeName)
-            .then((featureType) => Object.keys(featureType.properties).map((prop) => {
+        return this.featureType.then((featureType) => Object.keys(featureType.properties).map((prop) => {
             const originalType = featureType.properties[prop];
-            const type = originalType === 'float' || originalType === 'integer'
-                ? 'number'
-                : originalType; // FIXME: ogc-client typing is incorrect, should be a string union
+            let type;
+            if (originalType === 'float' || originalType === 'integer') {
+                type = 'number';
+            }
+            else if (originalType === 'boolean') {
+                type = 'string'; // we don't handle booleans yet in the data fetcher
+            }
+            else {
+                type = originalType;
+            }
             return {
                 name: prop,
                 label: prop,
@@ -33328,83 +33899,63 @@ class WfsReader extends BaseCacheReader {
         }));
     }
     get info() {
-        return this.endpoint.getFeatureTypeFull(this.featureTypeName).then((result) => ({
+        return this.featureType.then((result) => ({
             itemsCount: result.objectCount,
+            hasGeometry: !!result.geometryName,
         }));
     }
-    static async createReader(wfsUrlEndpoint, featureTypeName) {
-        const wfsEndpoint = await getWfsEndpoint(wfsUrlEndpoint);
-        const featureTypes = wfsEndpoint.getFeatureTypes();
-        const featureType = wfsEndpoint.getFeatureTypeSummary(featureTypes.length === 1 && !featureTypeName
-            ? featureTypes[0].name
-            : featureTypeName);
-        if (!featureType) {
-            throw new Error('wfs.featuretype.notfound');
-        }
-        if (wfsEndpoint.supportsStartIndex()) {
-            return new WfsReader(wfsUrlEndpoint, wfsEndpoint, featureType.name);
-        }
-        else if (wfsEndpoint.supportsJson(featureType.name)) {
-            return new GeojsonReader(wfsEndpoint.getFeatureUrl(featureType.name, {
-                asJson: true,
-                outputCrs: 'EPSG:4326',
-            }));
-        }
-        else {
-            if (featureType.outputFormats.find((f) => f.toLowerCase().includes('gml')) &&
-                (featureType.defaultCrs === 'EPSG:4326' ||
-                    featureType.otherCrs?.includes('EPSG:4326'))) {
-                return new GmlReader(wfsEndpoint.getFeatureUrl(featureType.name, {
-                    outputFormat: featureType.outputFormats.find((f) => f.toLowerCase().includes('gml')),
-                    outputCrs: 'EPSG:4326',
-                }), featureType.name, wfsEndpoint.getVersion());
-            }
-            throw new Error('wfs.geojsongml.notsupported');
-        }
+    load() {
+        // Nothing to load for Wfs
     }
-    async getData(aggregation, groupedBy) {
-        if (aggregation || groupedBy) {
-            return { items: await this.getQueryData() };
+    async read() {
+        const endpoint = await this.endpoint;
+        const featureType = await this.featureType;
+        // if we can't use the WFS protocol we fall back to the backup reader
+        if (this.aggregations || this.groupedBy || !endpoint.supportsStartIndex()) {
+            const backupReader = await this.backupReader;
+            backupReader.selectAll();
+            if (this.selected) {
+                backupReader.select(...this.selected);
+            }
+            if (this.aggregations) {
+                backupReader.aggregate(...this.aggregations);
+            }
+            if (this.groupedBy) {
+                backupReader.groupBy(...this.groupedBy);
+            }
+            if (this.sort) {
+                backupReader.orderBy(...this.sort);
+            }
+            if (this.startIndex !== null && this.count !== null) {
+                backupReader.limit(this.startIndex, this.count);
+            }
+            return backupReader.read();
         }
-        const asJson = this.endpoint.supportsJson(this.featureTypeName);
+        const asJson = endpoint.supportsJson(featureType.name);
         const attributes = this.selected ?? undefined;
-        let url = this.endpoint.getFeatureUrl(this.featureTypeName, {
+        let sortBy = null;
+        if (this.sort) {
+            const mapSort = (s) => [s[0] === 'desc' ? 'D' : 'A', s[1]];
+            sortBy = Array.isArray(this.sort[0])
+                ? this.sort.map(mapSort)
+                : mapSort(this.sort);
+        }
+        const url = endpoint.getFeatureUrl(featureType.name, {
             ...(this.startIndex !== null && { startIndex: this.startIndex }),
             ...(this.count !== null && { maxFeatures: this.count }),
             asJson,
             outputCrs: 'EPSG:4326',
             attributes,
-            // sortBy: this.sort // TODO: no sort in ogc-client?
+            sortBy,
         });
-        if (Array.isArray(this.sort) && this.sort.length > 0) {
-            const finalUrl = new URL(url);
-            const sorts = this.sort
-                .map((fieldSort) => `${fieldSort[1]}+${fieldSort[0] === 'asc' ? 'A' : 'D'}`)
-                .join(',');
-            // Direct update on string url to prevent encoding of +A and +D
-            url = `${url}${finalUrl.search ? '&' : ''}SORTBY=${sorts}`;
-        }
-        return fetchDataAsText(url, this.cacheActive).then((text) => asJson
+        return fetchDataAsText(url, this.cacheEnabled).then((text) => asJson
             ? parseGeojson(text)
-            : parseGml(text, this.featureTypeName, this.version));
-    }
-    async getQueryData() {
-        const items = (await this.getData()).items;
-        const jsonItems = getJsonDataItemsProxy(items);
-        const query = generateSqlQuery(this.selected, this.filter, this.sort, this.startIndex, this.count, this.groupedBy, this.aggregations);
-        const result = await import('alasql').then((module) => module.default(query, [jsonItems]));
-        return result.map(jsonToGeojsonFeature);
-    }
-    load() {
-        // Nothing to load for Wfs
-    }
-    async read() {
-        return (await this.getData(this.aggregations, this.groupedBy)).items;
+            : parseGml(text, featureType.name, endpoint.getVersion()));
     }
 }
 
-async function openDataset(url, typeHint, options, cacheActive) {
-    const fileType = await inferDatasetType(url, typeHint);
+async function openDataset(url, options) {
+    const fileType = await inferDatasetType(url, options?.typeHint);
     let reader;
     try {
         switch (fileType) {
@@ -33421,18 +33972,18 @@ async function openDataset(url, typeHint, options, cacheActive) {
                 reader = new ExcelReader(url);
                 break;
             case 'gml':
-                reader = new GmlReader(url, options.namespace, options.wfsVersion);
+                reader = new GmlReader(url);
                 break;
             case 'wfs':
-                reader = await WfsReader.createReader(url, options.wfsFeatureType);
+                reader = new WfsReader(url, options?.wfsFeatureType);
                 break;
         }
-        reader.setCacheActive(cacheActive);
+        reader.enableCache(options?.enableCache ?? true);
         reader.load();
         return reader;
     }
     catch (e) {
-        //WfsReader may already raise a FetchError
+        // WfsReader may already raise a FetchError
         if (e instanceof FetchError)
             throw e;
         else
@@ -33443,13 +33994,13 @@ async function openDataset(url, typeHint, options, cacheActive) {
  * This fetches the full dataset at the given URL and parses it according to its mime type.
  * All items in the dataset are converted to GeoJSON features, even if they do not bear any spatial geometry.
  * File type can be either inferred (from the HTTP headers or the URL), or hinted using the 2nd argument
- * File type is determined liked so:
+ * File type is determined like so:
  *  1. if a type hint is given, use it
  *  2. otherwise, look for a Content-Type header in the response with a supported mime type
  *  3. if no valid mime type was found, look for an explicit file extension in the url (.csv, .geojson etc.)
  */
-async function readDataset(url, typeHint, options, cacheActive = true) {
-    const reader = await openDataset(url, typeHint, options, cacheActive);
+async function readDataset(url, options) {
+    const reader = await openDataset(url, options);
     try {
         return await reader.read();
     }
@@ -33680,9 +34231,11 @@ class DataService {
     getDataset(link, cacheActive) {
         if (link.type === 'service' && link.accessServiceProtocol === 'wfs') {
             const wfsUrlEndpoint = this.proxy.getProxiedUrl(link.url.toString());
-            return from(openDataset(wfsUrlEndpoint, 'wfs', {
+            return from(openDataset(wfsUrlEndpoint, {
+                typeHint: 'wfs',
                 wfsFeatureType: link.name,
-            }, cacheActive));
+                enableCache: cacheActive,
+            }));
         }
         else if (link.type === 'download') {
             const linkProxifiedUrl = this.proxy.getProxiedUrl(link.url.toString());
@@ -33690,12 +34243,15 @@ class DataService {
             const supportedType = SupportedTypes.indexOf(format) > -1
                 ? format
                 : undefined;
-            return from(openDataset(linkProxifiedUrl, supportedType, undefined, cacheActive)).pipe();
+            return from(openDataset(linkProxifiedUrl, {
+                typeHint: supportedType,
+                enableCache: cacheActive,
+            })).pipe();
         }
         else if (link.type === 'service' &&
             link.accessServiceProtocol === 'esriRest') {
             const url = this.getDownloadUrlFromEsriRest(link.url.toString(), 'geojson');
-            return from(openDataset(url, 'geojson', undefined, cacheActive)).pipe();
+            return from(openDataset(url, { typeHint: 'geojson', enableCache: cacheActive })).pipe();
         }
         else if (link.type === 'service' &&
             link.accessServiceProtocol === 'ogcFeatures') {
@@ -33709,7 +34265,10 @@ class DataService {
                 }
                 const urlWithoutLimit = new URL(geojsonUrl);
                 urlWithoutLimit.searchParams.delete('limit');
-                return openDataset(urlWithoutLimit.toString(), 'geojson', undefined, cacheActive);
+                return openDataset(urlWithoutLimit.toString(), {
+                    typeHint: 'geojson',
+                    enableCache: cacheActive,
+                });
             }));
         }
         return throwError(() => 'protocol not supported');
@@ -33961,20 +34520,31 @@ class DataTableComponent {
         this.eltRef = inject(ElementRef);
         this.cdr = inject(ChangeDetectorRef);
         this.translateService = inject(TranslateService);
-        this._featureAttributes = [];
+        this.columnsFromFeatureCatalog = null;
+        this.columnsFromDataset = [];
         this.selected = new EventEmitter();
-        this.properties$ = new BehaviorSubject(null);
         this.loading$ = new BehaviorSubject(false);
         this.error = null;
     }
     set featureAttributes(value) {
-        this._featureAttributes = value;
-        this.properties$.next(value.map((attr) => attr.value));
+        this.columnsFromFeatureCatalog = value.map((attrs) => ({
+            name: attrs.value,
+            label: attrs.label,
+        }));
     }
     set dataset(value) {
         this.dataset_ = value;
         this.dataset_.load();
-        this.dataset_.info.then((info) => (this.count = info.itemsCount));
+        this.dataset_.info.then((info) => {
+            this.count = info.itemsCount;
+            this.cdr.detectChanges();
+        });
+    }
+    get columns() {
+        return this.columnsFromFeatureCatalog ?? this.columnsFromDataset;
+    }
+    get columnNames() {
+        return this.columns.map((c) => c.name);
     }
     ngOnInit() {
         this.dataSource = new DataTableDataSource();
@@ -34009,11 +34579,12 @@ class DataTableComponent {
     }
     async readData() {
         this.loading$.next(true);
-        // wait for properties to be read
-        const properties = await firstValueFrom(this.properties$.pipe(filter((p) => !!p)));
-        const propsWithoutGeom = properties.filter((p) => !p.toLowerCase().startsWith('geom'));
-        this.dataset_.select(...propsWithoutGeom);
         try {
+            // wait for properties to be read
+            if (!this.columnsFromFeatureCatalog) {
+                this.columnsFromDataset = await this.dataset_.properties;
+            }
+            this.dataset_.select(...this.columnNames);
             await this.dataSource.showData(this.dataset_.read());
             this.error = null;
         }
@@ -34043,7 +34614,7 @@ class DataTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: DataTableComponent, isStandalone: true, selector: "gn-ui-data-table", inputs: { featureAttributes: "featureAttributes", dataset: "dataset", activeId: "activeId" }, outputs: { selected: "selected" }, providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col border border-gray-300 rounded-lg bg-white h-full\">\n  <div class=\"flex-1 overflow-y-hidden overflow-x-auto rounded-lg relative\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"setSort($event)\"\n      [matSortDisableClear]=\"true\"\n      *ngrxLet=\"properties$ as properties\"\n    >\n      @for (attr of _featureAttributes; track attr) {\n        <ng-container [matColumnDef]=\"attr.value\">\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            mat-sort-header\n            class=\"text-sm text-black bg-white\"\n          >\n            {{ attr.label }}\n          </th>\n          <td\n            mat-cell\n            *matCellDef=\"let element\"\n            class=\"whitespace-nowrap pr-1 truncate\"\n          >\n            {{ element[attr.value] }}\n          </td>\n        </ng-container>\n      }\n\n      <tr mat-header-row *matHeaderRowDef=\"properties; sticky: true\"></tr>\n      <tr\n        [id]=\"getRowEltId(row.id)\"\n        mat-row\n        *matRowDef=\"let row; columns: properties\"\n        (click)=\"selected.emit(row)\"\n        [class.active]=\"\n          activeId !== undefined && activeId !== null && row.id === activeId\n        \"\n      ></tr>\n    </table>\n    @if (loading$ | async) {\n      <gn-ui-loading-mask\n        class=\"sticky inset-0\"\n        [message]=\"'table.loading.data' | translate\"\n      ></gn-ui-loading-mask>\n    }\n    @if (error) {\n      <gn-ui-popup-alert\n        type=\"warning\"\n        icon=\"matErrorOutlineOutline\"\n        class=\"absolute m-2 inset-0 z-[100]\"\n      >\n        <span translate>{{ error }}</span>\n      </gn-ui-popup-alert>\n    }\n  </div>\n  <div class=\"flex justify-between items-center overflow-hidden\">\n    <div class=\"text-gray-900 px-4 py-2 text-sm\">\n      <span class=\"count font-extrabold text-primary\">{{ count }}</span\n      >&nbsp;<span translate>table.object.count</span>.\n    </div>\n\n    <mat-paginator\n      class=\"my-[-16px]\"\n      (page)=\"setPagination()\"\n      [length]=\"count\"\n      [pageSize]=\"10\"\n      [showFirstLastButtons]=\"true\"\n      [hidePageSize]=\"true\"\n    ></mat-paginator>\n  </div>\n</div>\n", styles: ["table{width:100%;background:#fff}th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding-right:20px}tr.mat-mdc-row,tr.mat-mdc-footer-row{height:36px}tr:hover{background:#f5f5f5}tr.mat-mdc-header-row{height:48px}[mat-header-cell]{color:#0000008a;font-size:12px;font-weight:500}tr{cursor:pointer}.active .mat-mdc-cell{color:var(--color-primary)}.mat-mdc-paginator{background:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$b.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$b.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$b.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$b.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$b.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$b.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$b.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$b.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$b.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$b.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: LoadingMaskComponent, selector: "gn-ui-loading-mask", inputs: ["message"] }, { kind: "component", type: PopupAlertComponent, selector: "gn-ui-popup-alert", inputs: ["icon", "type", "position"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: DataTableComponent, isStandalone: true, selector: "gn-ui-data-table", inputs: { featureAttributes: "featureAttributes", dataset: "dataset", activeId: "activeId" }, outputs: { selected: "selected" }, providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }], viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col border border-gray-300 rounded-lg bg-white h-full\">\n  <div class=\"flex-1 overflow-y-hidden overflow-x-auto rounded-lg relative\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"setSort($event)\"\n      [matSortDisableClear]=\"true\"\n    >\n      @for (column of columns; track column) {\n        <ng-container [matColumnDef]=\"column.name\">\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            mat-sort-header\n            class=\"text-sm text-black bg-white\"\n          >\n            {{ column.label }}\n          </th>\n          <td\n            mat-cell\n            *matCellDef=\"let element\"\n            class=\"whitespace-nowrap pr-1 truncate\"\n          >\n            {{ element[column.name] }}\n          </td>\n        </ng-container>\n      }\n\n      <tr mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></tr>\n      <tr\n        [id]=\"getRowEltId(row.id)\"\n        mat-row\n        *matRowDef=\"let row; columns: columnNames\"\n        (click)=\"selected.emit(row)\"\n        [class.active]=\"\n          activeId !== undefined && activeId !== null && row.id === activeId\n        \"\n      ></tr>\n    </table>\n    @if (loading$ | async) {\n      <gn-ui-loading-mask\n        class=\"sticky inset-0\"\n        [message]=\"'table.loading.data' | translate\"\n      ></gn-ui-loading-mask>\n    }\n    @if (error) {\n      <gn-ui-popup-alert\n        type=\"warning\"\n        icon=\"matErrorOutlineOutline\"\n        class=\"absolute m-2 inset-0 z-[100]\"\n      >\n        <span translate>{{ error }}</span>\n      </gn-ui-popup-alert>\n    }\n  </div>\n  <div class=\"flex justify-between items-center overflow-hidden\">\n    <div class=\"text-gray-900 px-4 py-2 text-sm\">\n      <span class=\"count font-extrabold text-primary\">{{ count }}</span\n      >&nbsp;<span translate>table.object.count</span>.\n    </div>\n\n    <mat-paginator\n      class=\"my-[-16px]\"\n      (page)=\"setPagination()\"\n      [length]=\"count\"\n      [pageSize]=\"10\"\n      [showFirstLastButtons]=\"true\"\n      [hidePageSize]=\"true\"\n    ></mat-paginator>\n  </div>\n</div>\n", styles: ["table{width:100%;background:#fff}th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding-right:20px}tr.mat-mdc-row,tr.mat-mdc-footer-row{height:36px}tr:hover{background:#f5f5f5}tr.mat-mdc-header-row{height:48px}[mat-header-cell]{color:#0000008a;font-size:12px;font-weight:500}tr{cursor:pointer}.active .mat-mdc-cell{color:var(--color-primary)}.mat-mdc-paginator{background:none}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$b.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$b.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$b.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$b.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$b.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$b.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$b.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$b.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$b.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$b.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: CommonModule }, { 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: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -34055,10 +34626,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         CommonModule,
                         LoadingMaskComponent,
                         PopupAlertComponent,
-                        LetDirective,
                         TranslatePipe,
                         TranslateDirective,
-                    ], providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }], selector: 'gn-ui-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col border border-gray-300 rounded-lg bg-white h-full\">\n  <div class=\"flex-1 overflow-y-hidden overflow-x-auto rounded-lg relative\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"setSort($event)\"\n      [matSortDisableClear]=\"true\"\n      *ngrxLet=\"properties$ as properties\"\n    >\n      @for (attr of _featureAttributes; track attr) {\n        <ng-container [matColumnDef]=\"attr.value\">\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            mat-sort-header\n            class=\"text-sm text-black bg-white\"\n          >\n            {{ attr.label }}\n          </th>\n          <td\n            mat-cell\n            *matCellDef=\"let element\"\n            class=\"whitespace-nowrap pr-1 truncate\"\n          >\n            {{ element[attr.value] }}\n          </td>\n        </ng-container>\n      }\n\n      <tr mat-header-row *matHeaderRowDef=\"properties; sticky: true\"></tr>\n      <tr\n        [id]=\"getRowEltId(row.id)\"\n        mat-row\n        *matRowDef=\"let row; columns: properties\"\n        (click)=\"selected.emit(row)\"\n        [class.active]=\"\n          activeId !== undefined && activeId !== null && row.id === activeId\n        \"\n      ></tr>\n    </table>\n    @if (loading$ | async) {\n      <gn-ui-loading-mask\n        class=\"sticky inset-0\"\n        [message]=\"'table.loading.data' | translate\"\n      ></gn-ui-loading-mask>\n    }\n    @if (error) {\n      <gn-ui-popup-alert\n        type=\"warning\"\n        icon=\"matErrorOutlineOutline\"\n        class=\"absolute m-2 inset-0 z-[100]\"\n      >\n        <span translate>{{ error }}</span>\n      </gn-ui-popup-alert>\n    }\n  </div>\n  <div class=\"flex justify-between items-center overflow-hidden\">\n    <div class=\"text-gray-900 px-4 py-2 text-sm\">\n      <span class=\"count font-extrabold text-primary\">{{ count }}</span\n      >&nbsp;<span translate>table.object.count</span>.\n    </div>\n\n    <mat-paginator\n      class=\"my-[-16px]\"\n      (page)=\"setPagination()\"\n      [length]=\"count\"\n      [pageSize]=\"10\"\n      [showFirstLastButtons]=\"true\"\n      [hidePageSize]=\"true\"\n    ></mat-paginator>\n  </div>\n</div>\n", styles: ["table{width:100%;background:#fff}th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding-right:20px}tr.mat-mdc-row,tr.mat-mdc-footer-row{height:36px}tr:hover{background:#f5f5f5}tr.mat-mdc-header-row{height:48px}[mat-header-cell]{color:#0000008a;font-size:12px;font-weight:500}tr{cursor:pointer}.active .mat-mdc-cell{color:var(--color-primary)}.mat-mdc-paginator{background:none}\n"] }]
+                    ], providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }], selector: 'gn-ui-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col border border-gray-300 rounded-lg bg-white h-full\">\n  <div class=\"flex-1 overflow-y-hidden overflow-x-auto rounded-lg relative\">\n    <table\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"setSort($event)\"\n      [matSortDisableClear]=\"true\"\n    >\n      @for (column of columns; track column) {\n        <ng-container [matColumnDef]=\"column.name\">\n          <th\n            mat-header-cell\n            *matHeaderCellDef\n            mat-sort-header\n            class=\"text-sm text-black bg-white\"\n          >\n            {{ column.label }}\n          </th>\n          <td\n            mat-cell\n            *matCellDef=\"let element\"\n            class=\"whitespace-nowrap pr-1 truncate\"\n          >\n            {{ element[column.name] }}\n          </td>\n        </ng-container>\n      }\n\n      <tr mat-header-row *matHeaderRowDef=\"columnNames; sticky: true\"></tr>\n      <tr\n        [id]=\"getRowEltId(row.id)\"\n        mat-row\n        *matRowDef=\"let row; columns: columnNames\"\n        (click)=\"selected.emit(row)\"\n        [class.active]=\"\n          activeId !== undefined && activeId !== null && row.id === activeId\n        \"\n      ></tr>\n    </table>\n    @if (loading$ | async) {\n      <gn-ui-loading-mask\n        class=\"sticky inset-0\"\n        [message]=\"'table.loading.data' | translate\"\n      ></gn-ui-loading-mask>\n    }\n    @if (error) {\n      <gn-ui-popup-alert\n        type=\"warning\"\n        icon=\"matErrorOutlineOutline\"\n        class=\"absolute m-2 inset-0 z-[100]\"\n      >\n        <span translate>{{ error }}</span>\n      </gn-ui-popup-alert>\n    }\n  </div>\n  <div class=\"flex justify-between items-center overflow-hidden\">\n    <div class=\"text-gray-900 px-4 py-2 text-sm\">\n      <span class=\"count font-extrabold text-primary\">{{ count }}</span\n      >&nbsp;<span translate>table.object.count</span>.\n    </div>\n\n    <mat-paginator\n      class=\"my-[-16px]\"\n      (page)=\"setPagination()\"\n      [length]=\"count\"\n      [pageSize]=\"10\"\n      [showFirstLastButtons]=\"true\"\n      [hidePageSize]=\"true\"\n    ></mat-paginator>\n  </div>\n</div>\n", styles: ["table{width:100%;background:#fff}th.mat-mdc-header-cell,td.mat-mdc-cell,td.mat-mdc-footer-cell{padding-right:20px}tr.mat-mdc-row,tr.mat-mdc-footer-row{height:36px}tr:hover{background:#f5f5f5}tr.mat-mdc-header-row{height:48px}[mat-header-cell]{color:#0000008a;font-size:12px;font-weight:500}tr{cursor:pointer}.active .mat-mdc-cell{color:var(--color-primary)}.mat-mdc-paginator{background:none}\n"] }]
         }], propDecorators: { featureAttributes: [{
                 type: Input
             }], dataset: [{
@@ -34161,7 +34731,7 @@ class ChartViewComponent {
         }), shareReplay$1(1));
         this.properties$ = combineLatest([this.dataset$, this.featureCatalog$]).pipe(switchMap$1(([dataset, catalog]) => this.setProperties(dataset, catalog)), shareReplay$1(1));
         this.yChoices$ = this.properties$.pipe(map$1((properties) => properties
-            .filter((prop) => prop.type === 'number' || prop.type === 'date')
+            .filter((prop) => prop.type === 'number')
             .map((prop) => ({ value: prop.name, label: prop.label || prop.name }))), tap$1((choices) => {
             if (!choices.find((choice) => choice.value === this.yProperty$.value)) {
                 const newProp = choices[0]?.value || '';
@@ -34188,6 +34758,7 @@ class ChartViewComponent {
             this.aggregation$,
         ]).pipe(filter$1(([_, x, y]) => !!x || !!y), switchMap$1(([dataset, xProp, yProp, aggregation]) => {
             const fieldAgg = aggregation === 'count' ? ['count'] : [aggregation, yProp];
+            this.loading = true;
             return dataset
                 .groupBy(['distinct', xProp])
                 .aggregate(fieldAgg)
@@ -34429,6 +35000,7 @@ class GeoTableViewComponent {
         }));
     }
     async initMapContext() {
+        this.dataset.load();
         this.dataset.selectAll();
         return {
             layers: [
@@ -34602,8 +35174,7 @@ class MdViewFacade {
         }));
         this.error$ = this.store.pipe(select(getMetadataError));
         this.related$ = this.store.pipe(select(getRelated));
-        this.sources$ = this.store.pipe(select(getSources));
-        this.sourceOf$ = this.store.pipe(select(getSourceOf));
+        this.linkedRecords$ = this.store.pipe(select(getLinkedRecords));
         this.chartConfig$ = this.store.pipe(select(getChartConfig));
         this.allLinks$ = this.metadata$.pipe(map$1((record) => 'onlineResources' in record ? record.onlineResources : []), shareReplay$1(1));
         this.resourceDoi$ = this.metadata$.pipe(map$1((record) => {
@@ -34722,12 +35293,9 @@ class MdViewEffects {
         this.loadRelatedRecords$ = createEffect(() => this.actions$.pipe(ofType(loadFullMetadataSuccess), switchMap$1(({ full }) => this.recordsRepository.getSimilarRecords(full)), map$1((related) => {
             return setRelated({ related });
         }), catchError(() => of(setRelated({ related: null })))));
-        this.loadSources$ = createEffect(() => this.actions$.pipe(ofType(loadFullMetadataSuccess), switchMap$1(({ full }) => this.recordsRepository.getSources(full)), map$1((sources) => {
-            return setSources({ sources });
-        }), catchError(() => of(setSources({ sources: null })))));
-        this.loadSourceOf$ = createEffect(() => this.actions$.pipe(ofType(loadFullMetadataSuccess), switchMap$1(({ full }) => this.recordsRepository.getSourceOf(full)), map$1((sourceOf) => {
-            return setSourceOf({ sourceOf });
-        }), catchError(() => of(setSourceOf({ sourceOf: null })))));
+        this.loadLinkedRecords$ = createEffect(() => this.actions$.pipe(ofType(loadFullMetadataSuccess), switchMap$1(({ full }) => this.recordsRepository.getLinkedRecords(full)), map$1((linkedRecords) => {
+            return setLinkedRecords({ linkedRecords });
+        }), catchError(() => of(setLinkedRecords({ linkedRecords: null })))));
         /*
           UserFeedback effects
         */
@@ -37428,7 +37996,7 @@ class GenericKeywordsComponent {
         this.deletedKeyword.emit(keyword);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GenericKeywordsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: GenericKeywordsComponent, isStandalone: true, selector: "gn-ui-generic-keywords", inputs: { keywords: "keywords", keywordTypes: "keywordTypes", placeholder: "placeholder", allowSubmit: "allowSubmit" }, outputs: { changedKeywords: "changedKeywords", addedKeyword: "addedKeyword", deletedKeyword: "deletedKeyword" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <gn-ui-autocomplete\n    [placeholder]=\"placeholder\"\n    [displayWithFn]=\"displayWithFn\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"handleItemSelection($event)\"\n    [preventCompleteOnSelection]=\"false\"\n    [minCharacterCount]=\"1\"\n    [allowSubmit]=\"false\"\n    [clearOnSelection]=\"true\"\n  ></gn-ui-autocomplete>\n  <div class=\"flex gap-2 flex-wrap\">\n    @for (keyword of keywords; track keyword) {\n      <gn-ui-keyword-badge\n        [keyword]=\"keyword\"\n        [editable]=\"true\"\n        (keywordRemove)=\"removeKeyword($event)\"\n      ></gn-ui-keyword-badge>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "component", type: KeywordBadgeComponent, selector: "gn-ui-keyword-badge", inputs: ["keyword", "editable"], outputs: ["keywordClick", "keywordRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: GenericKeywordsComponent, isStandalone: true, selector: "gn-ui-generic-keywords", inputs: { keywords: "keywords", keywordTypes: "keywordTypes", placeholder: "placeholder", allowSubmit: "allowSubmit" }, outputs: { changedKeywords: "changedKeywords", addedKeyword: "addedKeyword", deletedKeyword: "deletedKeyword" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\n  <gn-ui-autocomplete\n    [placeholder]=\"placeholder\"\n    [displayWithFn]=\"displayWithFn\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"handleItemSelection($event)\"\n    [preventCompleteOnSelection]=\"false\"\n    [minCharacterCount]=\"1\"\n    [allowSubmit]=\"false\"\n    [clearOnSelection]=\"true\"\n  ></gn-ui-autocomplete>\n  <div class=\"flex gap-2 flex-wrap\">\n    @for (keyword of keywords; track keyword) {\n      <gn-ui-keyword-badge\n        [keyword]=\"keyword\"\n        [editable]=\"true\"\n        (keywordRemove)=\"removeKeyword($event)\"\n      ></gn-ui-keyword-badge>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithTemplate", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "component", type: KeywordBadgeComponent, selector: "gn-ui-keyword-badge", inputs: ["keyword", "editable"], outputs: ["keywordClick", "keywordRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: GenericKeywordsComponent, decorators: [{
             type: Component,
@@ -38020,7 +38588,7 @@ class FormFieldContactsForResourceComponent {
             provideNgIconsConfig({
                 size: '1.5rem',
             }),
-        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <div class=\"flex flex-row flex-wrap gap-2\" data-test=\"rolesToPick\">\n    @for (role of rolesToPick; track role) {\n      <gn-ui-button type=\"gray\" (buttonClick)=\"addRoleToDisplay(role)\">\n        <ng-icon name=\"iconoirPlus\" class=\"text-primary\"></ng-icon>\n        &nbsp;\n        <span translate>{{ roleToLabel(role) }}</span>\n      </gn-ui-button>\n    }\n  </div>\n  @if (value.length === 0) {\n    <div\n      class=\"p-4 border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contactsForResource.noContact\n    </div>\n  }\n  @if (roleSectionsToDisplay && roleSectionsToDisplay.length > 0) {\n    <div class=\"mt-8\" data-test=\"displayedRoles\">\n      @for (\n        role of roleSectionsToDisplay;\n        track role;\n        let index = $index;\n        let isLast = $last\n      ) {\n        <div class=\"flex flex-col gap-4\">\n          <div class=\"flex flex-row justify-between\">\n            <span class=\"font-bold text-base\" translate>{{\n              roleToLabel(role)\n            }}</span>\n          </div>\n          @if (role !== 'unspecified' && role !== 'other') {\n            <gn-ui-autocomplete\n              [placeholder]=\"\n                'editor.record.form.field.contactsForResource.placeholder'\n                  | translate\n              \"\n              [action]=\"autoCompleteAction\"\n              (itemSelected)=\"addContact($event, role)\"\n              [displayWithFn]=\"displayWithFn\"\n              [minCharacterCount]=\"1\"\n              [clearOnSelection]=\"true\"\n              [allowSubmit]=\"false\"\n            >\n            </gn-ui-autocomplete>\n          }\n          @if (contactsForRessourceByRole.get(role); as contacts) {\n            <gn-ui-sortable-list\n              [items]=\"contacts\"\n              (itemsOrderChange)=\"handleContactsChanged($event, role)\"\n              [elementTemplate]=\"contactTemplate\"\n            ></gn-ui-sortable-list>\n            <ng-template #contactTemplate let-contact>\n              <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n            </ng-template>\n          }\n          @if (!isLast) {\n            <hr class=\"border-t-[#D6D3D1] mt-4 mb-6\" />\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "component", type: ContactCardComponent, selector: "gn-ui-contact-card", inputs: ["contact"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <div class=\"flex flex-row flex-wrap gap-2\" data-test=\"rolesToPick\">\n    @for (role of rolesToPick; track role) {\n      <gn-ui-button type=\"gray\" (buttonClick)=\"addRoleToDisplay(role)\">\n        <ng-icon name=\"iconoirPlus\" class=\"text-primary\"></ng-icon>\n        &nbsp;\n        <span translate>{{ roleToLabel(role) }}</span>\n      </gn-ui-button>\n    }\n  </div>\n  @if (value.length === 0) {\n    <div\n      class=\"p-4 border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contactsForResource.noContact\n    </div>\n  }\n  @if (roleSectionsToDisplay && roleSectionsToDisplay.length > 0) {\n    <div class=\"mt-8\" data-test=\"displayedRoles\">\n      @for (\n        role of roleSectionsToDisplay;\n        track role;\n        let index = $index;\n        let isLast = $last\n      ) {\n        <div class=\"flex flex-col gap-4\">\n          <div class=\"flex flex-row justify-between\">\n            <span class=\"font-bold text-base\" translate>{{\n              roleToLabel(role)\n            }}</span>\n          </div>\n          @if (role !== 'unspecified' && role !== 'other') {\n            <gn-ui-autocomplete\n              [placeholder]=\"\n                'editor.record.form.field.contactsForResource.placeholder'\n                  | translate\n              \"\n              [action]=\"autoCompleteAction\"\n              (itemSelected)=\"addContact($event, role)\"\n              [displayWithFn]=\"displayWithFn\"\n              [minCharacterCount]=\"1\"\n              [clearOnSelection]=\"true\"\n              [allowSubmit]=\"false\"\n            >\n            </gn-ui-autocomplete>\n          }\n          @if (contactsForRessourceByRole.get(role); as contacts) {\n            <gn-ui-sortable-list\n              [items]=\"contacts\"\n              (itemsOrderChange)=\"handleContactsChanged($event, role)\"\n              [elementTemplate]=\"contactTemplate\"\n            ></gn-ui-sortable-list>\n            <ng-template #contactTemplate let-contact>\n              <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n            </ng-template>\n          }\n          @if (!isLast) {\n            <hr class=\"border-t-[#D6D3D1] mt-4 mb-6\" />\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--gn-ui-button-padding: 8px 8px;--gn-ui-button-rounded: 8px}\n"], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithTemplate", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "component", type: ContactCardComponent, selector: "gn-ui-contact-card", inputs: ["contact"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldContactsForResourceComponent, decorators: [{
             type: Component,
@@ -38120,7 +38688,7 @@ class FormFieldContactsComponent {
         this.subscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldContactsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FormFieldContactsComponent, isStandalone: true, selector: "gn-ui-form-field-contacts", inputs: { value: "value", modelSpecifier: "modelSpecifier" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <gn-ui-autocomplete\n    [placeholder]=\"'editor.record.form.field.contacts.placeholder' | translate\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"addContact($event)\"\n    [displayWithFn]=\"displayWithFn\"\n    [minCharacterCount]=\"1\"\n    [clearOnSelection]=\"true\"\n  >\n  </gn-ui-autocomplete>\n\n  @if (contacts.length > 0) {\n    <gn-ui-sortable-list\n      [items]=\"contacts\"\n      (itemsOrderChange)=\"handleContactsChanged($event)\"\n      [elementTemplate]=\"contactTemplate\"\n    ></gn-ui-sortable-list>\n    <ng-template #contactTemplate let-contact let-index=\"index\">\n      @if (modelSpecifier === 'contact:editableDetails') {\n        <gn-ui-contact-details-form\n          [contact]=\"contact\"\n          (contactChange)=\"handleContactChanged($event, index)\"\n        ></gn-ui-contact-details-form>\n      } @else {\n        <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n      }\n    </ng-template>\n  } @else {\n    <div\n      class=\"p-4 text-sm border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contacts.noContact\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ContactCardComponent, selector: "gn-ui-contact-card", inputs: ["contact"] }, { kind: "component", type: ContactDetailsFormComponent, selector: "gn-ui-contact-details-form", inputs: ["contact"], outputs: ["contactChange"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: FormFieldContactsComponent, isStandalone: true, selector: "gn-ui-form-field-contacts", inputs: { value: "value", modelSpecifier: "modelSpecifier" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"flex flex-col gap-3\">\n  <gn-ui-autocomplete\n    [placeholder]=\"'editor.record.form.field.contacts.placeholder' | translate\"\n    [action]=\"autoCompleteAction\"\n    (itemSelected)=\"addContact($event)\"\n    [displayWithFn]=\"displayWithFn\"\n    [minCharacterCount]=\"1\"\n    [clearOnSelection]=\"true\"\n  >\n  </gn-ui-autocomplete>\n\n  @if (contacts.length > 0) {\n    <gn-ui-sortable-list\n      [items]=\"contacts\"\n      (itemsOrderChange)=\"handleContactsChanged($event)\"\n      [elementTemplate]=\"contactTemplate\"\n    ></gn-ui-sortable-list>\n    <ng-template #contactTemplate let-contact let-index=\"index\">\n      @if (modelSpecifier === 'contact:editableDetails') {\n        <gn-ui-contact-details-form\n          [contact]=\"contact\"\n          (contactChange)=\"handleContactChanged($event, index)\"\n        ></gn-ui-contact-details-form>\n      } @else {\n        <gn-ui-contact-card [contact]=\"contact\"></gn-ui-contact-card>\n      }\n    </ng-template>\n  } @else {\n    <div\n      class=\"p-4 text-sm border border-primary bg-primary-lightest rounded-lg\"\n      translate\n    >\n      editor.record.form.field.contacts.noContact\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithTemplate", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ContactCardComponent, selector: "gn-ui-contact-card", inputs: ["contact"] }, { kind: "component", type: ContactDetailsFormComponent, selector: "gn-ui-contact-details-form", inputs: ["contact"], outputs: ["contactChange"] }, { kind: "component", type: SortableListComponent, selector: "gn-ui-sortable-list", inputs: ["elementTemplate", "items"], outputs: ["itemsOrderChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: FormFieldContactsComponent, decorators: [{
             type: Component,
@@ -38473,7 +39041,7 @@ class OnlineServiceResourceInputComponent {
             provideNgIconsConfig({
                 size: '1.5em',
             }),
-        ], ngImport: i0, template: "<div class=\"flex flex-row justify-between\">\n  <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n    editor.record.form.field.onlineResource.edit.protocol\n  </h3>\n  @if (protocolHint) {\n    <ng-icon\n      name=\"matHelpOutline\"\n      size=\"16\"\n      class=\"m-2\"\n      [matTooltip]=\"protocolHint\"\n      matTooltipPosition=\"above\"\n    ></ng-icon>\n  }\n</div>\n<div class=\"flex flex-row items-center gap-4 h-[48px]\">\n  <mat-radio-group\n    aria-labelledby=\"example-radio-group-label\"\n    class=\"flex flex-row gap-[8px]\"\n    [(ngModel)]=\"_service.accessServiceProtocol\"\n    [disabled]=\"disabled\"\n    (change)=\"resetAllFormFields()\"\n  >\n    @for (protocolOption of availableProtocolOptions; track protocolOption) {\n      <mat-radio-button [value]=\"protocolOption.value\">\n        {{ protocolOption.label | translate }}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n  <gn-ui-url-input\n    class=\"w-full\"\n    (uploadClick)=\"handleUploadClick($event)\"\n    (valueChange)=\"handleUrlValueChange($event)\"\n    [disabled]=\"disabled\"\n    [value]=\"_service.url?.toString()\"\n    [showValidateButton]=\"activeLayerSuggestion\"\n    [resetUrlOnChange]=\"resetUrlOnChange\"\n  >\n    @if (activeLayerSuggestion) {\n      <ng-content>\n        <ng-icon name=\"iconoirRefresh\"></ng-icon>\n      </ng-content>\n    }\n  </gn-ui-url-input>\n\n  @if (loading) {\n    <div class=\"flex justify-center w-full py-4\">\n      <gn-ui-spinning-loader></gn-ui-spinning-loader>\n    </div>\n  }\n  @if (errorMessage) {\n    <p class=\"text-sm text-red-500 pl-4\" translate>\n      editor.record.form.field.onlineResource.edit.identifier.error\n    </p>\n  }\n\n  @if (\n    !activeLayerSuggestion ||\n    (_service.url && errorMessage) ||\n    (modifyMode && (layers$ | async).length === 0)\n  ) {\n    <gn-ui-text-input\n      class=\"grow border-b border-gray-300 pb-4\"\n      [(value)]=\"_service.identifierInService\"\n      [placeholder]=\"getIdentifierPlaceholder() | translate\"\n      data-cy=\"identifier-in-service\"\n      [disabled]=\"disabled\"\n    ></gn-ui-text-input>\n  }\n  @if (activeLayerSuggestion && (layers$ | async)?.length > 0) {\n    <gn-ui-autocomplete\n      class=\"border-b border-gray-300 pb-4\"\n      [placeholder]=\"\n        'editor.record.form.field.onlineResource.edit.identifier.select.label'\n          | translate\n      \"\n      [action]=\"autoCompleteAction\"\n      (itemSelected)=\"handleSelectValue($event)\"\n      [displayWithFn]=\"displayWithFn\"\n      [minCharacterCount]=\"0\"\n      [clearOnSelection]=\"false\"\n    >\n    </gn-ui-autocomplete>\n  }\n  @if (\n    !modifyMode &&\n    ((activeLayerSuggestion && (layers$ | async)) ||\n      !activeLayerSuggestion ||\n      (_service.url && errorMessage))\n  ) {\n    <gn-ui-button\n      (buttonClick)=\"submit()\"\n      [disabled]=\"disabled || !_service.identifierInService\"\n      type=\"primary\"\n    >\n      <span class=\"text-white font-bold\" translate>\n        editor.record.form.field.onlineResource.edit.identifier.submit</span\n      >\n    </gn-ui-button>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled", "type"], outputs: ["valueChange"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"flex flex-row justify-between\">\n  <h3 class=\"text-[16px] font-bold text-main mb-[12px]\" translate>\n    editor.record.form.field.onlineResource.edit.protocol\n  </h3>\n  @if (protocolHint) {\n    <ng-icon\n      name=\"matHelpOutline\"\n      size=\"16\"\n      class=\"m-2\"\n      [matTooltip]=\"protocolHint\"\n      matTooltipPosition=\"above\"\n    ></ng-icon>\n  }\n</div>\n<div class=\"flex flex-row items-center gap-4 h-[48px]\">\n  <mat-radio-group\n    aria-labelledby=\"example-radio-group-label\"\n    class=\"flex flex-row gap-[8px]\"\n    [(ngModel)]=\"_service.accessServiceProtocol\"\n    [disabled]=\"disabled\"\n    (change)=\"resetAllFormFields()\"\n  >\n    @for (protocolOption of availableProtocolOptions; track protocolOption) {\n      <mat-radio-button [value]=\"protocolOption.value\">\n        {{ protocolOption.label | translate }}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</div>\n\n<div class=\"flex flex-col gap-4\">\n  <gn-ui-url-input\n    class=\"w-full\"\n    (uploadClick)=\"handleUploadClick($event)\"\n    (valueChange)=\"handleUrlValueChange($event)\"\n    [disabled]=\"disabled\"\n    [value]=\"_service.url?.toString()\"\n    [showValidateButton]=\"activeLayerSuggestion\"\n    [resetUrlOnChange]=\"resetUrlOnChange\"\n  >\n    @if (activeLayerSuggestion) {\n      <ng-content>\n        <ng-icon name=\"iconoirRefresh\"></ng-icon>\n      </ng-content>\n    }\n  </gn-ui-url-input>\n\n  @if (loading) {\n    <div class=\"flex justify-center w-full py-4\">\n      <gn-ui-spinning-loader></gn-ui-spinning-loader>\n    </div>\n  }\n  @if (errorMessage) {\n    <p class=\"text-sm text-red-500 pl-4\" translate>\n      editor.record.form.field.onlineResource.edit.identifier.error\n    </p>\n  }\n\n  @if (\n    !activeLayerSuggestion ||\n    (_service.url && errorMessage) ||\n    (modifyMode && (layers$ | async).length === 0)\n  ) {\n    <gn-ui-text-input\n      class=\"grow border-b border-gray-300 pb-4\"\n      [(value)]=\"_service.identifierInService\"\n      [placeholder]=\"getIdentifierPlaceholder() | translate\"\n      data-cy=\"identifier-in-service\"\n      [disabled]=\"disabled\"\n    ></gn-ui-text-input>\n  }\n  @if (activeLayerSuggestion && (layers$ | async)?.length > 0) {\n    <gn-ui-autocomplete\n      class=\"border-b border-gray-300 pb-4\"\n      [placeholder]=\"\n        'editor.record.form.field.onlineResource.edit.identifier.select.label'\n          | translate\n      \"\n      [action]=\"autoCompleteAction\"\n      (itemSelected)=\"handleSelectValue($event)\"\n      [displayWithFn]=\"displayWithFn\"\n      [minCharacterCount]=\"0\"\n      [clearOnSelection]=\"false\"\n    >\n    </gn-ui-autocomplete>\n  }\n  @if (\n    !modifyMode &&\n    ((activeLayerSuggestion && (layers$ | async)) ||\n      !activeLayerSuggestion ||\n      (_service.url && errorMessage))\n  ) {\n    <gn-ui-button\n      (buttonClick)=\"submit()\"\n      [disabled]=\"disabled || !_service.identifierInService\"\n      type=\"primary\"\n    >\n      <span class=\"text-white font-bold\" translate>\n        editor.record.form.field.onlineResource.edit.identifier.submit</span\n      >\n    </gn-ui-button>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "gn-ui-autocomplete", inputs: ["placeholder", "enterButton", "action", "value", "clearOnSelection", "preventCompleteOnSelection", "autoFocus", "minCharacterCount", "allowSubmit", "forceTrackPosition", "displayWithTemplate", "displayWithFn"], outputs: ["itemSelected", "inputSubmitted", "inputCleared", "isSearchActive"] }, { kind: "component", type: ButtonComponent, selector: "gn-ui-button", inputs: ["type", "disabled", "extraClass"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: SpinningLoaderComponent, selector: "gn-ui-spinning-loader" }, { kind: "component", type: TextInputComponent, selector: "gn-ui-text-input", inputs: ["value", "extraClass", "placeholder", "required", "disabled", "type"], outputs: ["valueChange"] }, { kind: "directive", type: TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: UrlInputComponent, selector: "gn-ui-url-input", inputs: ["value", "extraClass", "placeholder", "disabled", "showValidateButton", "resetUrlOnChange"], outputs: ["valueChange", "uploadClick"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: OnlineServiceResourceInputComponent, decorators: [{
             type: Component,
@@ -39946,7 +40514,7 @@ class RouterService {
         return ROUTER_ROUTE_ORGANIZATION;
     }
     getDefaultSort() {
-        return SortByEnum.RESOURCE_DATES;
+        return SortByEnum.RESOURCE_DATE;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: RouterService, providedIn: 'root' }); }
@@ -40006,7 +40574,7 @@ function flattenQueryParams(params) {
             const start = flattened[key].start;
             const end = flattened[key].end;
             flattened[key] = [
-                `${start ? formatDate(start) : ''}..${formatDate(end) || ''}`,
+                `${start ? formatDate(start) : ''}..${end ? formatDate(end) : ''}`,
             ];
         }
     }
@@ -40363,5 +40931,5 @@ const CHART_TYPE_VALUES = [
  * Generated bundle index. Do not edit.
  */
 
-export { ADD_RESULTS, ADD_SEARCH, AVAILABLE_LICENSES, AbstractAction, AbstractSearchField, ActionMenuComponent, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, ApplicationBannerComponent, AuthService, AutocompleteComponent, AvailableServicesField, AvatarComponent, AvatarServiceInterface, BASEMAP_LAYERS, BadgeComponent, BaseConverter, BaseFileReader, BaseReader, BlockListComponent, ButtonComponent, CHART_TYPE_VALUES, CLEAR_ERROR, CLEAR_RESULTS, CarouselComponent, CatalogTitleComponent, CellPopinComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ClearError, ClearResults, ColorScaleComponent, ConfirmationDialogComponent, ContactDetailsComponent, ContactDetailsFormComponent, ContactPillComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_CONFIGURATION, DEFAULT_GN4_LOGIN_URL, DEFAULT_GN4_LOGOUT_URL, DEFAULT_GN4_SETTINGS_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RECORD_CONVERTER, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DEFAULT_SPATIAL_EXTENT_STYLE, DISABLE_AUTH, DISABLE_DRAFT, DO_NOT_USE_DEFAULT_BASEMAP, DataService, DataTableComponent, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DatePickerComponent, DateRangeDropdownComponent, DateRangeInputsComponent, DateRangePickerComponent, DateRangeSearchField, DateService, DcatApConverter, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EDITOR_FEATURE_KEY, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EXTERNAL_VIEWER_OPEN_NEW_TAB, EXTERNAL_VIEWER_URL_TEMPLATE, EditableLabelDirective, EditorFacade, EditorService, ElasticsearchService, ErrorComponent, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalLinkCardComponent, ExternalViewerButtonComponent, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FILTER_SUMMARY_IGNORE_LIST, FORMATS, FacetBlockComponent, FacetItemComponent, FacetListComponent, FacetsContainerComponent, FavoriteStarComponent, FavoritesService, FeatureCatalogListComponent, FeatureDetailComponent, FeatureEditorModule, FeatureMapModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldFocusDirective, FieldsService, FigureComponent, FigureContainerComponent, FileInputComponent, FileTranslateLoader, FilesDropDirective, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldDateComponent, FormFieldFileComponent, FormFieldKeywordsComponent, FormFieldLicenseComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentsComponent, FormFieldTopicsComponent, FormFieldWrapperComponent, FullTextSearchField, FuzzySearchComponent, GEONETWORK_UI_TAG_NAME, GEONETWORK_UI_VERSION, GeoDataBadgeComponent, GeoTableViewComponent, GeocodingComponent, GeojsonReader, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GnUiHumanizeDateDirective, GpfApiDlComponent, GravatarService, I18nInterceptor, ISO_TOPICS, ImageFallbackDirective, ImageInputComponent, ImageOverlayPreviewComponent, ImportRecordComponent, InlineFilterComponent, InteractiveTableColumnComponent, InteractiveTableComponent, InternalLinkCardComponent, IsSpatialSearchField, Iso191153Converter, Iso19139Converter, KeywordBadgeComponent, KindBadgeComponent, LANGUAGES_LIST, LANGUAGE_NAMES, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LOGIN_URL, LOGOUT_URL, LONLAT_CRS_CODES, LanguageSwitcherComponent, LayersPanelComponent, LicenseSearchField, LinkClassifierService, LinkUsage, LoadingMaskComponent, LogService, MAP_FEATURE_KEY, MAP_VIEW_CONSTRAINTS, MAX_UPLOAD_SIZE_MB, METADATA_LANGUAGE, MapContainerComponent, MapFacade, MapLegendComponent, MapStateContainerComponent, MapStyleService, MapUtilsService, MapViewComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataDoiComponent, MetadataInfoComponent, MetadataLinkType, MetadataMapperContext, MetadataQualityComponent, MetadataQualityItemComponent, MetadataQualityPanelComponent, ModalDialogComponent, MultilingualPanelComponent, MultilingualSearchField, MyOrgService, NAMESPACES, NOT_APPLICABLE_CONSTRAINT, NOT_KNOWN_CONSTRAINT, NotificationComponent, NotificationsContainerComponent, NotificationsService, OPEN_DATA_LICENSE, ORGANIZATIONS_STRATEGY, ORGANIZATION_PAGE_URL_TOKEN, ORGANIZATION_URL_TOKEN, OnlineResourceCardComponent, OnlineServiceResourceInputComponent, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationSearchField, OrganizationsFromGroupsService, OrganizationsFromMetadataService, OrganizationsServiceInterface, OwnerSearchField, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PaginationDotsComponent, PatchResultsAggregations, PlatformServiceInterface, PopoverComponent, PopupAlertComponent, PossibleResourceTypes, PossibleResourceTypesDefinition, PreviousNextButtonsComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_DATASET_URL_TOKEN, RECORD_REUSE_URL_TOKEN, RECORD_SERVICE_URL_TOKEN, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESULTS_LAYOUT_CONFIG, REUSE_LIGHT_CONFIGURATION, ROUTER_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_ORGANIZATION, ROUTER_ROUTE_REUSE, ROUTER_ROUTE_SEARCH, ROUTER_ROUTE_SERVICE, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordKindField, RecordMetaComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordStatusValues, RecordsMetricsComponent, RecordsRepositoryInterface, RecordsService, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResourceTypeLegacyField, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsHitsSearchKindComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, ResultsTableContainerComponent, ReusePresentationForms, RoleLabels, RoleValues, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SETTINGS_URL, SET_CONFIG_AGGREGATIONS, SET_CONFIG_FILTERS, SET_CONFIG_REQUEST_FIELDS, SET_ERROR, SET_FAVORITES_ONLY, SET_FILTERS, SET_INCLUDE_ON_AGGREGATION, SET_PAGE_SIZE, SET_RESULTS_AGGREGATIONS, SET_RESULTS_HITS, SET_RESULTS_LAYOUT, SET_SEARCH, SET_SORT_BY, SET_SPATIAL_FILTER_ENABLED, SPATIAL_SCOPES, SearchEffects, SearchFacade, SearchFeatureCatalogComponent, SearchFiltersSummaryComponent, SearchFiltersSummaryItemComponent, SearchInputComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, ServiceCapabilitiesComponent, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SimpleSearchField, SiteTitleComponent, SortByComponent, SortByEnum, SortableListComponent, SourceLabelComponent, SourcesService, SpatialExtentComponent, SpinningLoaderComponent, StacItemsResultGridComponent, StacViewComponent, StarToggleComponent, StickyHeaderComponent, SupportedTypes, SwitchToggleComponent, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEBUG_CONFIG, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, TranslatedSearchField, TruncatedTextComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UpdateConfigAggregations, UpdateFilters, UrlInputComponent, UserFeedbackItemComponent, UserPreviewComponent, UserSearchField, VECTOR_STYLE_DEFAULT, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, XmlParseError, _reset, allChildrenElement, appConfigWithTranslationFixture, appendChildTree, appendChildren, assertValidXml, associationTypeValues, bboxToPolygon, blockModelFixture, bytesToMegabytes, canEditRecord, checkFileFormat, clearSelectedFeatures, createChild, createDocument, createElement, createFuzzyFilter, createNestedChild, createNestedElement, createSpatialExtentLayer, currentPage, defaultMapStyleFixture, defaultMapStyleHlFixture, downgradeImage, downsizeImage, draftSaveSuccess, dragPanCondition, dropEmptyTranslations, editorReducer, emptyBlockModelFixture, findChildElement, findChildOrCreate, findChildrenElement, findConverterForDocument, findNestedChildOrCreate, findNestedElement, findNestedElements, findParent, firstChildElement, formatDate, formatUserInfo, getAddressLines, getAllKeysValidator, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryBoundingBox, getGeometryFromGeoJSON, getGlobalConfig, getIndividualDisplayName, getIsMobile, getJsonDataItemsProxy, getKeywordHierarchyPath, getLayers, getLinkId, getLinkLabel, getLinkPriority, getMapContext, getMapContextLayerFromConfig, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getNamespace, getOptionalEditorConfig, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getQualityValidators, getResourceType, getReusePresentationForm, getReuseType, getRootElement, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSelectedFeatures, getSpatialFilterEnabled, getTemporalRangeUnion, getThemeConfig, handleScrollOnNavigation, hasRecordChangedSinceDraft, hasRecordChangedSinceDraftSuccess, initSearch, initialEditorState, initialMapState, initialState, isConfigLoaded, isDateRange, isFormatInQueryParam, isPublished, itemModelFixture, kindToCodeListValue, loadAppConfig, malformedConfigFixture, mapConfigFixture, mapContact, mapKeywords, mapLogo, mapOrganization, mapReducer, markRecordAsChanged, matchesNoApplicableConstraint, matchesNoKnownConstraint, megabytesToBytes, mimeTypeToFormat, minimalAppConfigFixture, missingMandatoryConfigFixture, mouseWheelZoomCondition, noDuplicateFileName, okAppConfigFixture, openDataset, openRecord, organizationsServiceFactory, parse, parseXmlString, placeholder, prioritizePageScroll, propagateToDocumentOnly, provideGn4, provideI18n, provideRepositoryUrl, readAttribute, readDataset, readDatasetHeaders, readText, reducer$2 as reducer, reducerSearch, removeAllChildren, removeChildren, removeChildrenByName, removeSearchParams, removeWhitespace, renameElements, saveRecord, saveRecordFailure, saveRecordSuccess, selectCanEditRecord, selectCurrentPage, selectEditorConfig, selectEditorState, selectFallback, selectFallbackFields, selectField, selectHasRecordChanged, selectIsPublished, selectRecord, selectRecordChangedSinceSave, selectRecordSaveError, selectRecordSaving, selectRecordSections, selectRecordSource, selectTranslatedField, selectTranslatedValue, setContext, setCurrentPage, setEditorConfiguration, setFieldVisibility, setFocusedField, setSelectedFeatures, setTextContent, sortByFromString, sortByToString, sortByToStrings, spatialExtentToGeometry, spatialExtentsToFeatureCollection, stripHtml, stripNamespace, toDate, toIndividual, toLang2, toLang3, totalPages, undoRecordDraft, unrecognizedKeysConfigFixture, updateFrequencyCodeValues, updateLanguages, updateRecordField, updateRecordLanguages, wmsLayerFlatten, writeAttribute, wrongLanguageCodeConfigFixture, xmlToString };
+export { ADD_RESULTS, ADD_SEARCH, AVAILABLE_LICENSES, AbstractAction, AbstractSearchField, ActionMenuComponent, AddLayerFromCatalogComponent, AddLayerRecordPreviewComponent, AddResults, AddSearch, AnchorLinkDirective, ApiCardComponent, ApplicationBannerComponent, AuthService, AutocompleteComponent, AutofocusDirective, AvailableServicesField, AvatarComponent, AvatarServiceInterface, BASEMAP_LAYERS, BadgeComponent, BaseConverter, BaseFileReader, BaseReader, BlockListComponent, BoundingBoxSearchField, ButtonComponent, CHART_TYPE_VALUES, CLEAR_ERROR, CLEAR_RESULTS, CarouselComponent, CatalogTitleComponent, CellPopinComponent, ChartComponent, ChartViewComponent, CheckToggleComponent, CheckboxComponent, ClearError, ClearResults, ColorScaleComponent, ConfirmationDialogComponent, ContactDetailsComponent, ContactDetailsFormComponent, ContactPillComponent, ContentGhostComponent, CopyTextButtonComponent, DEFAULT_BASEMAP_LAYER, DEFAULT_CONFIGURATION, DEFAULT_GN4_LOGIN_URL, DEFAULT_GN4_LOGOUT_URL, DEFAULT_GN4_SETTINGS_URL, DEFAULT_LANG, DEFAULT_PAGE_SIZE, DEFAULT_RECORD_CONVERTER, DEFAULT_RESULTS_LAYOUT_CONFIG, DEFAULT_SEARCH_KEY, DEFAULT_SPATIAL_EXTENT_STYLE, DISABLE_AUTH, DISABLE_DRAFT, DO_NOT_USE_DEFAULT_BASEMAP, DataService, DataTableComponent, DataViewComponent, DataViewPermalinkComponent, DataViewShareComponent, DataViewWebComponentComponent, DatePickerComponent, DateRangeDropdownComponent, DateRangeInputsComponent, DateRangePickerComponent, DateRangeSearchField, DateService, DcatApConverter, DefaultRouterModule, DownloadItemComponent, DownloadsListComponent, DragAndDropFileInputComponent, DropdownMultiselectComponent, DropdownSelectorComponent, EDITOR_FEATURE_KEY, ES_QUERY_FIELDS_PRIORITY, ES_RESOURCES_VALUES, ES_SOURCE_SUMMARY, EXTERNAL_VIEWER_OPEN_NEW_TAB, EXTERNAL_VIEWER_URL_TEMPLATE, EditableLabelDirective, EditorFacade, EditorService, ElasticsearchService, ErrorComponent, ErrorType, ExpandablePanelButtonComponent, ExpandablePanelComponent, ExternalLinkCardComponent, ExternalViewerButtonComponent, FIELDS_BRIEF, FIELDS_SUMMARY, FILTER_GEOMETRY, FILTER_SUMMARY_IGNORE_LIST, FORMATS, FacetBlockComponent, FacetItemComponent, FacetListComponent, FacetsContainerComponent, FavoriteStarComponent, FavoritesService, FeatureCatalogListComponent, FeatureDetailComponent, FeatureEditorModule, FeatureMapModule, FeatureRecordModule, FeatureSearchModule, FetchError, FieldFocusDirective, FieldsService, FigureComponent, FigureContainerComponent, FileInputComponent, FileTranslateLoader, FilesDropDirective, FilterDropdownComponent, FormFieldArrayComponent, FormFieldComponent, FormFieldDateComponent, FormFieldFileComponent, FormFieldKeywordsComponent, FormFieldLicenseComponent, FormFieldObjectComponent, FormFieldRichComponent, FormFieldSimpleComponent, FormFieldSpatialExtentComponent, FormFieldTemporalExtentsComponent, FormFieldTopicsComponent, FormFieldWrapperComponent, FullTextSearchField, FuzzySearchComponent, GEOCODING_PROVIDER, GEONETWORK_UI_TAG_NAME, GEONETWORK_UI_VERSION, GeoDataBadgeComponent, GeoTableViewComponent, GeocodingService, GeojsonReader, Gn4Converter, Gn4PlatformMapper, Gn4PlatformService, Gn4Repository, Gn4SettingsService, GnUiHumanizeDateDirective, GpfApiDlComponent, GravatarService, I18nInterceptor, ISO_TOPICS, ImageFallbackDirective, ImageInputComponent, ImageOverlayPreviewComponent, ImportRecordComponent, InlineFilterComponent, InteractiveTableColumnComponent, InteractiveTableComponent, InternalLinkCardComponent, IsSpatialSearchField, Iso191153Converter, Iso19139Converter, KeywordBadgeComponent, KindBadgeComponent, LANGUAGES_LIST, LANGUAGE_NAMES, LANGUAGE_STORAGE_KEY, LANG_2_TO_3_MAPPER, LOGIN_URL, LOGOUT_URL, LONLAT_CRS_CODES, LanguageSwitcherComponent, LayersPanelComponent, LicenseSearchField, LinkClassifierService, LinkUsage, LoadingMaskComponent, LocationSearchComponent, LogService, MAP_FEATURE_KEY, MAP_VIEW_CONSTRAINTS, MAX_UPLOAD_SIZE_MB, METADATA_LANGUAGE, MapContainerComponent, MapFacade, MapLegendComponent, MapStateContainerComponent, MapStyleService, MapUtilsService, MapViewComponent, MarkdownEditorComponent, MarkdownParserComponent, MaxLinesComponent, mdview_actions as MdViewActions, MdViewFacade, MetadataCatalogComponent, MetadataContactComponent, MetadataDoiComponent, MetadataInfoComponent, MetadataLinkType, MetadataMapperContext, MetadataQualityComponent, MetadataQualityItemComponent, MetadataQualityPanelComponent, ModalDialogComponent, MultilingualPanelComponent, MultilingualSearchField, MyOrgService, NAMESPACES, NOT_APPLICABLE_CONSTRAINT, NOT_KNOWN_CONSTRAINT, NotificationComponent, NotificationsContainerComponent, NotificationsService, OPEN_DATA_LICENSE, ORGANIZATIONS_STRATEGY, ORGANIZATION_PAGE_URL_TOKEN, ORGANIZATION_URL_TOKEN, OnlineResourceCardComponent, OnlineServiceResourceInputComponent, OrganisationPreviewComponent, OrganisationsComponent, OrganisationsFilterComponent, OrganisationsResultComponent, OrganizationSearchField, OrganizationsFromGroupsService, OrganizationsFromMetadataService, OrganizationsServiceInterface, OwnerSearchField, PAGINATE, PARSE_DELIMITER, PATCH_RESULTS_AGGREGATIONS, PROXY_PATH, Paginate, PaginationButtonsComponent, PaginationComponent, PaginationDotsComponent, PatchResultsAggregations, PlatformServiceInterface, PopoverComponent, PopupAlertComponent, PossibleResourceTypes, PossibleResourceTypesDefinition, PreviousNextButtonsComponent, ProgressBarComponent, ProxyService, QUERY_FIELDS, RECORD_DATASET_URL_TOKEN, RECORD_REUSE_URL_TOKEN, RECORD_SERVICE_URL_TOKEN, REQUEST_MORE_ON_AGGREGATION, REQUEST_MORE_RESULTS, REQUEST_NEW_RESULTS, RESULTS_LAYOUT_CONFIG, REUSE_LIGHT_CONFIGURATION, ROUTER_CONFIG, ROUTER_ROUTE_DATASET, ROUTER_ROUTE_ORGANIZATION, ROUTER_ROUTE_REUSE, ROUTER_ROUTE_SEARCH, ROUTER_ROUTE_SERVICE, ROUTER_STATE_KEY, ROUTE_PARAMS, RecordApiFormComponent, RecordFormComponent, RecordKindField, RecordMetaComponent, RecordMetricComponent, RecordPreviewCardComponent, RecordPreviewComponent, RecordPreviewFeedComponent, RecordPreviewListComponent, RecordPreviewRowComponent, RecordPreviewTextComponent, RecordPreviewTitleComponent, RecordStatusValues, RecordsMetricsComponent, RecordsRepositoryInterface, RecordsService, RequestMoreOnAggregation, RequestMoreResults, RequestNewResults, ResourceCreationRevisionDateSearchField, ResourceTypeLegacyField, ResultsHitsContainerComponent, ResultsHitsNumberComponent, ResultsHitsSearchKindComponent, ResultsLayoutComponent, ResultsLayoutConfigItem, ResultsListComponent, ResultsListContainerComponent, ResultsListItemComponent, ResultsTableComponent, ResultsTableContainerComponent, ReusePresentationForms, RoleLabels, RoleValues, RouterEffects, RouterFacade, RouterService, SEARCH_FEATURE_KEY, SETTINGS_URL, SET_CONFIG_AGGREGATIONS, SET_CONFIG_FILTERS, SET_CONFIG_REQUEST_FIELDS, SET_ERROR, SET_FAVORITES_ONLY, SET_FILTERS, SET_INCLUDE_ON_AGGREGATION, SET_PAGE_SIZE, SET_RESULTS_AGGREGATIONS, SET_RESULTS_HITS, SET_RESULTS_LAYOUT, SET_SEARCH, SET_SORT_BY, SET_SPATIAL_FILTER_ENABLED, SPATIAL_SCOPES, SearchEffects, SearchFacade, SearchFeatureCatalogComponent, SearchFiltersSummaryComponent, SearchFiltersSummaryItemComponent, SearchInputComponent, SearchRouterContainerDirective, SearchService, SearchStateContainerDirective, SelectionService, ServiceCapabilitiesComponent, SetConfigAggregations, SetConfigFilters, SetConfigRequestFields, SetError, SetFavoritesOnly, SetFilters, SetIncludeOnAggregation, SetPageSize, SetResultsAggregations, SetResultsHits, SetResultsLayout, SetSearch, SetSortBy, SetSpatialFilterEnabled, SimpleSearchField, SiteTitleComponent, SortByComponent, SortByEnum, SortableListComponent, SourceLabelComponent, SourcesService, SpatialExtentComponent, SpatialExtentDropdownComponent, SpinningLoaderComponent, StacItemsResultGridComponent, StacViewComponent, StarToggleComponent, StickyHeaderComponent, SupportedTypes, SwitchToggleComponent, THUMBNAIL_PLACEHOLDER, TRANSLATE_DEBUG_CONFIG, TRANSLATE_DEFAULT_CONFIG, TRANSLATE_WITH_OVERRIDES_CONFIG, TableViewComponent, TextAreaComponent, TextInputComponent, ThemeService, ThumbnailComponent, TranslatedSearchField, TruncatedTextComponent, UPDATE_CONFIG_AGGREGATIONS, UPDATE_FILTERS, UPDATE_REQUEST_AGGREGATION_TERM, UpdateConfigAggregations, UpdateFilters, UrlInputComponent, UserFeedbackItemComponent, UserPreviewComponent, UserSearchField, VECTOR_STYLE_DEFAULT, ViewportIntersectorComponent, WEB_COMPONENT_EMBEDDER_URL, XmlParseError, _reset, allChildrenElement, appConfigWithTranslationFixture, appendChildTree, appendChildren, assertValidXml, associationTypeValues, bboxToPolygon, blockModelFixture, bytesToMegabytes, canEditRecord, checkFileFormat, clearSelectedFeatures, createChild, createDocument, createElement, createFuzzyFilter, createNestedChild, createNestedElement, createSpatialExtentLayer, currentPage, defaultMapStyleFixture, defaultMapStyleHlFixture, downgradeImage, downsizeImage, draftSaveSuccess, dragPanCondition, dropEmptyTranslations, editorReducer, emptyBlockModelFixture, findChildElement, findChildOrCreate, findChildrenElement, findConverterForDocument, findNestedChildOrCreate, findNestedElement, findNestedElements, findParent, firstChildElement, formatDate, formatUserInfo, getAddressLines, getAllKeysValidator, getArrayItem, getAsArray, getAsUrl, getBadgeColor, getCustomTranslations, getError, getFavoritesOnly, getFileFormat, getFileFormatFromServiceOutput, getFirstValue, getFormatPriority, getGeometryBoundingBox, getGeometryFromGeoJSON, getGlobalConfig, getIndividualDisplayName, getIsMobile, getJsonDataItemsProxy, getKeywordHierarchyPath, getLayers, getLinkId, getLinkLabel, getLinkPriority, getMapContext, getMapContextLayerFromConfig, getMapState, getMetadataQualityConfig, getMimeTypeForFormat, getNamespace, getOptionalEditorConfig, getOptionalMapConfig, getOptionalSearchConfig, getPageSize, getQualityValidators, getResourceType, getReusePresentationForm, getReuseType, getRootElement, getSearchConfigAggregations, getSearchFilters, getSearchResults, getSearchResultsAggregations, getSearchResultsHits, getSearchResultsLayout, getSearchResultsLoading, getSearchSortBy, getSearchState, getSearchStateSearch, getSelectedFeatures, getSpatialFilterEnabled, getTemporalRangeUnion, getThemeConfig, handleScrollOnNavigation, hasRecordChangedSinceDraft, hasRecordChangedSinceDraftSuccess, initSearch, initialEditorState, initialMapState, initialState, isBoundingBox, isConfigLoaded, isDateRange, isFileExtensionValid, isFormatInQueryParam, isPublished, itemModelFixture, kindToCodeListValue, loadAppConfig, malformedConfigFixture, mapConfigFixture, mapContact, mapKeywords, mapLogo, mapOrganization, mapReducer, markRecordAsChanged, matchesNoApplicableConstraint, matchesNoKnownConstraint, megabytesToBytes, mimeTypeToFormat, minimalAppConfigFixture, missingMandatoryConfigFixture, mouseWheelZoomCondition, noDuplicateFileName, okAppConfigFixture, openDataset, openRecord, organizationsServiceFactory, parse, parseXmlString, placeholder, prioritizePageScroll, propagateToDocumentOnly, provideGn4, provideI18n, provideLocalizedDateAdapter, provideRepositoryUrl, readAttribute, readDataset, readDatasetHeaders, readFileAsText, readText, reducer$2 as reducer, reducerSearch, removeAllChildren, removeChildren, removeChildrenByName, removeSearchParams, removeWhitespace, renameElements, saveRecord, saveRecordFailure, saveRecordSuccess, selectCanEditRecord, selectCurrentPage, selectEditorConfig, selectEditorState, selectFallback, selectFallbackFields, selectField, selectHasRecordChanged, selectIsPublished, selectRecord, selectRecordChangedSinceSave, selectRecordSaveError, selectRecordSaving, selectRecordSections, selectRecordSource, selectTranslatedField, selectTranslatedValue, setContext, setCurrentPage, setEditorConfiguration, setFieldVisibility, setFocusedField, setSelectedFeatures, setTextContent, sortByFromString, sortByToString, sortByToStrings, spatialExtentToGeometry, spatialExtentsToFeatureCollection, stripHtml, stripNamespace, toDate, toIndividual, toLang2, toLang3, totalPages, undoRecordDraft, unrecognizedKeysConfigFixture, updateFrequencyCodeValues, updateLanguages, updateRecordField, updateRecordLanguages, wmsLayerFlatten, writeAttribute, wrongLanguageCodeConfigFixture, xmlToString };
 //# sourceMappingURL=geonetwork-ui.mjs.map