@provoly/dashboard 1.4.8 → 1.4.10

package/fesm2022/provoly-dashboard.mjs

@@ -12,7 +12,7 @@ import * as i1$3 from '@ngrx/effects';
 import { createEffect, ofType, EffectsModule } from '@ngrx/effects';
 import * as i1 from '@ngrx/store';
 import { createAction, props, createReducer, on, createFeatureSelector, createSelector, StoreModule } from '@ngrx/store';
-import { of, Subscription, filter, combineLatest, debounceTime, BehaviorSubject, map, Subject, windowTime, switchMap, mergeMap, from as from$1, forkJoin, catchError as catchError$1, startWith, throwError, tap as tap$1, withLatestFrom as withLatestFrom$1, share, merge, ReplaySubject, combineLatestWith, distinctUntilChanged as distinctUntilChanged$1, delay, fromEvent, auditTime, interval } from 'rxjs';
+import { of, Subscription, filter, combineLatest, debounceTime, BehaviorSubject, map, Subject, windowTime, switchMap, mergeMap, from as from$1, forkJoin, catchError as catchError$1, startWith, throwError, tap as tap$1, combineLatestWith, merge, distinctUntilChanged as distinctUntilChanged$1, withLatestFrom as withLatestFrom$1, EMPTY, share, ReplaySubject, delay, fromEvent, auditTime, interval } from 'rxjs';
 import * as i3$1 from '@angular/platform-browser';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i3$2 from '@angular/cdk/a11y';
@@ -3833,6 +3833,7 @@ const DashboardActions = {
     setRefreshRate: createAction('[Dashboard] (bus) setting refreshRate', props()),
     updateManifestsList: createAction('[Dashboard] (bus) received manifests list', props()),
     fetchStaticManifest: createAction('[Dashboard] (bus) fetching staticManifest', props()),
+    fetchMoreItems: createAction('[Dashboard] (bus) fetching more items', props()),
     endLoading: createAction('[Dashboard] end loading'),
     updateStaticManifest: createAction('[Dashboard] (bus) received staticManifest', props()),
     loadManifest: createAction('[Dashboard] (bus) load manifest', props()),
@@ -3887,10 +3888,7 @@ const DashboardActions = {
     addManifestMetadata: createAction('[Dashboard] Add manifest metadata', props()),
     deleteManifestMetadata: createAction('[Dashboard] Delete manifest metadata', props()),
     triggerAggregate: createAction('[Dashboard] (bus) Triggering aggregates for datasource', props()),
-    loadPresentation: createAction('[Dashboard] load presentation', props()),
-    initDefaultLayerGroup: createAction('[Dashboard] init default layer group', props()),
-    updateLayerVisibility: createAction('[Dashboard] update visible layers on the layer group', props()),
-    updateLayerGroups: createAction('[Dashboard] update all layer groups', props())
+    loadPresentation: createAction('[Dashboard] load presentation', props())
 };
 
 var DashboardGridLayout;
@@ -4080,7 +4078,6 @@ const wmsFeatures = (componentId) => {
 };
 const displayOptions = createSelector(feature$5, (state) => state?.display ?? BASE_DISPLAY_OPTIONS);
 const capabilities = createSelector(feature$5, (state) => state?.capabilities);
-const layerGroups = createSelector(feature$5, (state) => state?.manifests.manifest.layerGroups ?? []);
 const DashboardSelectors = {
     feature: feature$5,
     rank,
@@ -4117,8 +4114,7 @@ const DashboardSelectors = {
     datasourceFilters,
     wmsFeatures,
     displayOptions,
-    capabilities,
-    layerGroups
+    capabilities
 };
 
 const SearchActions = {
@@ -4204,20 +4200,31 @@ class SearchService {
         this.transformations = [];
         this.filters = {};
         this.limits = {};
+        this.datasources = [];
         store.select(DashboardSelectors.datasourceFilters).subscribe((filters) => {
             this.filters = filters;
         });
         store.select(ConfigSelectors.limits).subscribe((limits) => {
             this.limits = limits;
         });
+        store.select(DataSourceSelectors.getDataSources).subscribe((datasources) => {
+            this.datasources = datasources;
+        });
     }
-    getItems(id, quickOrder, excludeGeo) {
-        const params = this.getItemsFilter(id, this.getOrder(quickOrder)).append('excludeGeo', excludeGeo ?? false);
+    getItems(id, quickOrder, excludeGeo, searchAfter) {
+        const params = this.getItemsFilter(id, this.getOrder(quickOrder));
         if (!id) {
             console.warn('Not sending items request with no datasource attached.');
             return of({ items: {}, relations: [] });
         }
-        return this.store.select(ConfigSelectors.dataUrl).pipe(mergeMap((url) => this.httpClient.get(encodeURI(`${url}/data-sources/id/${id}/items`), { params })), map((rs) => this.applyTransformations('current', rs)));
+        return this.store.select(ConfigSelectors.dataUrl).pipe(mergeMap((url) => {
+            const ds = this.datasources.find((d) => d.id === id);
+            return this.httpClient.post(encodeURI(`${url}/data-sources/id/${id}/items`), {
+                type: ds?.sourceType === 'namedQuery' ? ds.request.type : NamedQueryTypes.MONO_CLASS,
+                excludeGeo: excludeGeo ?? false,
+                searchAfter: searchAfter ?? undefined
+            }, { params });
+        }), map((rs) => this.applyTransformations('current', rs)));
     }
     getItemsSerializedParams(id, quickOrder = {}) {
         return '|' + this.getItemsFilter(id, this.getOrder(quickOrder[id])).toString() + '|';
@@ -4248,8 +4255,10 @@ class SearchService {
             });
         }
         if (includeLimit) {
-            const limit = this.limits[id] ?? this.limits['default'];
-            params = params.append('limit', limit);
+            const limit = this.limits[id];
+            if (limit) {
+                params = params.append('limit', limit);
+            }
         }
         return params;
     }
@@ -4258,6 +4267,9 @@ class SearchService {
         if (quickOrder) {
             params = params.append('order', `${quickOrder.attribute},${quickOrder.asc ?? ''}`);
         }
+        else {
+            params = params.append('order', 'true,asc');
+        }
         return params;
     }
     /**
@@ -5011,32 +5023,283 @@ const relationTypeReducer = createReducer(initialRelationTypeState, on(RelationT
     openModal: false
 })));
 
+class BaseWidgetComponent extends SubscriptionnerDirective {
+    set widgetIndex(index) {
+        this.widgetIndex$.next(index);
+    }
+    set staticManifest(manifest) {
+        this.staticManifest$.next(manifest);
+    }
+    set _manifest$(manifest) {
+        this.manifest$ = manifest;
+        this.sub?.unsubscribe();
+        this.observableList$.next([manifest]);
+    }
+    get widgetIndex() {
+        return this.widgetIndex$.getValue();
+    }
+    constructor(store, el) {
+        super();
+        this.store = store;
+        this.el = el;
+        this.widgetIndex$ = new BehaviorSubject(0);
+        this.manifest = { type: 'placeholder' };
+        this.observableList$ = new BehaviorSubject([]);
+        this.staticManifest$ = new BehaviorSubject(null);
+        this._widgetSize$ = new BehaviorSubject({ width: 300, height: 300 });
+        this.open$ = new Subject();
+        this.manifestModified = new EventEmitter();
+        this.manifest$ = this.observableList$.pipe(combineLatestWith(this.staticManifest$), switchMap(([observables, staticManifest]) => (!staticManifest ? merge(...observables) : of(staticManifest))), distinctUntilChanged$1((p, v) => equal(p, v)));
+        this.subscriptions.add(this.manifest$.subscribe((manifest) => (this.manifest = manifest)));
+        this.displayHeader$ = this.manifest$.pipe(map((manifest) => manifest.header === undefined || manifest.header));
+        this.widgetSize$ = this._widgetSize$.pipe(startWith({
+            width: 300,
+            height: 300
+        }), distinctUntilChanged$1((p, c) => p.width === c.width && p.height === c.height), debounceTime(100), distinctUntilChanged$1((p, c) => p.width === c.width && p.height === c.height));
+    }
+    ngAfterViewChecked() {
+        const boundingRect = this.el.nativeElement.getBoundingClientRect();
+        this._widgetSize$.next({ width: boundingRect.width, height: boundingRect.height });
+    }
+    toImage() {
+        return Promise.reject('Not yet implemented');
+    }
+    changeWidgetTitle($event) {
+        this.manifest.title = $event;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseWidgetComponent, deps: [{ token: i1.Store }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: BaseWidgetComponent, selector: "pry-base-widget", inputs: { open$: "open$", widgetIndex: "widgetIndex", staticManifest: "staticManifest" }, outputs: { manifestModified: "manifestModified" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-base-widget', template: '' }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ElementRef }], propDecorators: { open$: [{
+                type: Input
+            }], manifestModified: [{
+                type: Output
+            }], widgetIndex: [{
+                type: Input
+            }], staticManifest: [{
+                type: Input
+            }] } });
+
+class WidgetFillerComponent extends BaseWidgetComponent {
+    constructor(store, el) {
+        super(store, el);
+    }
+    get index() {
+        // @ts-ignore
+        return this.manifest.options?.index ?? 0;
+    }
+    moveToPlace() {
+        // @ts-ignore
+        const startLayout = this.manifest.options?.sourcePlace;
+        // @ts-ignore
+        const targetLayout = this.manifest.options?.targetPlace;
+        // @ts-ignore
+        if (startLayout && targetLayout && this.manifest.options?.windowManifest && this.index !== '-') {
+            // @ts-ignore
+            const newWindowManifest = JSON.parse(JSON.stringify(this.manifest.options?.windowManifest));
+            const targetWidgetIndex = newWindowManifest.widgets.findIndex((w) => w.layout.x === targetLayout.x &&
+                w.layout.y === targetLayout.y &&
+                w.layout.width === targetLayout.width &&
+                w.layout.height === targetLayout.height);
+            const startWidgetIndex = newWindowManifest.widgets.findIndex((w) => w.layout.x === startLayout.x &&
+                w.layout.y === startLayout.y &&
+                w.layout.width === startLayout.width &&
+                w.layout.height === startLayout.height);
+            if (targetWidgetIndex !== -1) {
+                newWindowManifest.widgets[targetWidgetIndex].layout = startLayout;
+            }
+            newWindowManifest.widgets[startWidgetIndex].layout = targetLayout;
+            this.store.dispatch(DashboardActions.updateDashboardManifest({ manifest: newWindowManifest }));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetFillerComponent, deps: [{ token: i1.Store }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: WidgetFillerComponent, selector: "pry-widget-filler", usesInheritance: true, ngImport: i0, template: "<div class=\"filler-backdrop\" (click)=\"moveToPlace()\">\n  <div class=\"a-indicator-block\">\n    <p>{{ index === -1 ? '-' : index + 1 }}</p>\n  </div>\n</div>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetFillerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-widget-filler', template: "<div class=\"filler-backdrop\" (click)=\"moveToPlace()\">\n  <div class=\"a-indicator-block\">\n    <p>{{ index === -1 ? '-' : index + 1 }}</p>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ElementRef }] });
+
+class WidgetPlaceholderComponent extends BaseWidgetComponent {
+    constructor(store, el) {
+        super(store, el);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetPlaceholderComponent, deps: [{ token: i1.Store }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: WidgetPlaceholderComponent, selector: "pry-widget-placeholder", usesInheritance: true, ngImport: i0, template: "<p>{{ '@pry.widget.unrecognized' | i18n: { type: manifest ? manifest.type : 'placeholder' } }}</p>\n", dependencies: [{ kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetPlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pry-widget-placeholder', template: "<p>{{ '@pry.widget.unrecognized' | i18n: { type: manifest ? manifest.type : 'placeholder' } }}</p>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ElementRef }] });
+
+const WIDGET_DEFINITION = new InjectionToken('Widgets definition');
+const NON_EXCLUDE_GEO_WIDGET_TYPES = {
+    values: ['map', 'tile']
+};
+class WidgetFactoryService {
+    constructor(injector, reference, store) {
+        this.injector = injector;
+        this.store = store;
+        this.reference$ = new BehaviorSubject({
+            placeholder: { name: 'placeholder', component: WidgetPlaceholderComponent },
+            filler: { name: 'filler', component: WidgetFillerComponent }
+        });
+        this.moduleRefCache = {};
+        this.datasources = [];
+        this.putDefinitions(reference);
+        this.store.select(DataSourceSelectors.getDataSources).subscribe((datasources) => (this.datasources = datasources));
+    }
+    resolveComponent(manifest) {
+        if (this.moduleRefCache[manifest.type]) {
+            return of(this.moduleRefCache[manifest.type]);
+        }
+        if (!!manifest && this.reference$.getValue()[manifest.type]) {
+            // @ts-ignore
+            if (this.reference$.getValue()[manifest.type].load === undefined) {
+                this.moduleRefCache[manifest.type] = this.reference$.getValue()[manifest.type].component;
+                return of(this.moduleRefCache[manifest.type]);
+            }
+            else {
+                return from$1(this.reference$.getValue()[manifest.type].load().then((fn) => {
+                    this.moduleRefCache[manifest.type] = fn(this.injector);
+                    return this.moduleRefCache[manifest.type];
+                }));
+            }
+        }
+        else {
+            this.moduleRefCache[manifest.type] = this.reference$.getValue()['placeholder'].component;
+            return of(this.moduleRefCache[manifest.type]);
+        }
+    }
+    putDefinitions(definitions) {
+        this.reference$.next({
+            ...this.reference$.getValue(),
+            ...definitions
+        });
+    }
+    isModuleLoaded(type) {
+        return this.reference$.pipe(map((componentDefs) => !!componentDefs[type]));
+    }
+    datasourcesToAutoLoad(manifest) {
+        const widgetDefinition = this.reference$.getValue()[manifest.type];
+        const datasourcesArray = Array.isArray(manifest.datasource ?? [])
+            ? (manifest.datasource ?? [])
+            : [manifest.datasource];
+        return datasourcesArray
+            .filter((datasource) => {
+            const matching = this.datasources.find((ds) => ds.id === datasource);
+            return (!!matching &&
+                (widgetDefinition.autoLoadDatasource === undefined ||
+                    widgetDefinition.autoLoadDatasource === 'all' ||
+                    (widgetDefinition.autoLoadDatasource === 'geo' && DatasourceUtils.isGeo(matching)) ||
+                    (widgetDefinition.autoLoadDatasource === 'not-geo' && !DatasourceUtils.isGeo(matching))));
+        })
+            .map((datasetId) => {
+            const matching = this.datasources.find((ds) => ds.id === datasetId);
+            return { datasetId: datasetId, excludeGeo: this.calculateExcludeGeo(manifest, matching) };
+        });
+    }
+    calculateExcludeGeo(manifest, matching) {
+        if (manifest.excludeGeo === undefined || manifest.excludeGeo === 'widget-type-based') {
+            return !NON_EXCLUDE_GEO_WIDGET_TYPES.values.includes(manifest.type);
+        }
+        switch (manifest.excludeGeo) {
+            case 'exclude-all':
+                return true;
+            case 'exclude-none':
+                return false;
+            case 'exclude-geo':
+                return DatasourceUtils.isGeo(matching);
+            case 'exclude-not-geo':
+                return !DatasourceUtils.isGeo(matching);
+        }
+    }
+    aggregatesToAutoLoad(manifest) {
+        const widgetDefinition = this.reference$.getValue()[manifest.type];
+        const datasourcesArray = Array.isArray(manifest.datasource ?? [])
+            ? (manifest.datasource ?? [])
+            : [manifest.datasource];
+        return datasourcesArray.filter(() => widgetDefinition.autoLoadDatasource === undefined || widgetDefinition.autoLoadDatasource === 'aggregate');
+    }
+    getObjectsToAutoLoad(manifest) {
+        const datasources = [];
+        const aggregates = [];
+        manifest.windows.forEach((windowManifest) => {
+            (windowManifest.widgets ?? []).forEach((widgetManifest) => {
+                this.datasourcesToAutoLoad(widgetManifest).forEach((res) => {
+                    if (res.datasetId) {
+                        datasources.push(res);
+                    }
+                });
+                this.aggregatesToAutoLoad(widgetManifest).forEach((ds) => aggregates.push(ds));
+            });
+        });
+        return { datasources, aggregates };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetFactoryService, deps: [{ token: i0.Injector }, { token: WIDGET_DEFINITION }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetFactoryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetFactoryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WIDGET_DEFINITION]
+                }] }, { type: i1.Store }] });
+
 class SearchEffects {
-    constructor(actions$, searchService, store) {
+    constructor(actions$, searchService, store, widgetFactoryService) {
         this.actions$ = actions$;
         this.searchService = searchService;
         this.store = store;
-        this.searchNamed$ = createEffect(() => this.actions$.pipe(ofType(SearchActions.getDatasourceItems), withLatestFrom$1(this.store.select(DashboardSelectors.rank), this.store.select(DashboardSelectors.quickOrder)), filter(([_, rank]) => rank === 0), filter(([props, rank]) => props.id !== DEFAULT_NAMED_QUERY_ID && props.id !== EXPLORE_NAMED_QUERY_ID), mergeMap(([props, rank, quickOrder]) => this.searchService.getItems(props.id, quickOrder[props.id], props.excludeGeo).pipe(map((resultSet) => SearchActions.searchSuccess({
+        this.widgetFactoryService = widgetFactoryService;
+        this.searchNamed$ = createEffect(() => this.actions$.pipe(ofType(SearchActions.getDatasourceItems), withLatestFrom$1(this.store.select(DashboardSelectors.rank), this.store.select(DashboardSelectors.quickOrder), this.store.select(DashboardSelectors.resultSets)), filter(([_, rank]) => rank === 0), filter(([props, rank]) => props.id !== DEFAULT_NAMED_QUERY_ID && props.id !== EXPLORE_NAMED_QUERY_ID), distinctUntilChanged((p, c) => equal(p, c)), debounceTime(100), mergeMap(([props, rank, quickOrder, rs]) => this.searchService
+            .getItems(props.id, quickOrder[props.id], props.excludeGeo, props.next ? rs[props.id].searchAfter : undefined)
+            .pipe(map((resultSet) => SearchActions.searchSuccess({
             resultSet,
             id: props.id,
-            params: this.searchService.getItemsSerializedParams(props.id, quickOrder)
+            params: this.searchService.getItemsSerializedParams(props.id, quickOrder),
+            next: props.next
         })), catchError$1((error) => [SearchActions.searchFailure({ error, id: props.id })])))));
+        this.fetchMore$ = createEffect(() => this.actions$.pipe(ofType(DashboardActions.fetchMoreItems), withLatestFrom$1(this.store.select(DashboardSelectors.rank), this.store.select(DashboardSelectors.resultSets)), filter(([props, rank, rs]) => rank === 0 && !!rs[props.id].searchAfter), debounceTime(300), mergeMap(([props]) => {
+            const ds = this.widgetFactoryService.datasourcesToAutoLoad({
+                type: props.widgetType,
+                datasource: [props.id]
+            })[0];
+            if (!!ds) {
+                return of(SearchActions.getDatasourceItems({
+                    id: ds.datasetId,
+                    excludeGeo: ds.excludeGeo,
+                    from: 'fetchMore',
+                    next: true
+                }));
+            }
+            else {
+                return EMPTY;
+            }
+        })));
         this.search$ = createEffect(() => this.actions$.pipe(ofType(SearchActions.search), mergeMap((props) => this.searchService.search(props.payload).pipe(map((resultSet) => SearchActions.searchSuccess({ resultSet, id: props.id })), catchError$1((error) => [SearchActions.searchFailure({ error, id: props.id })])))));
         this.searchSuccess$ = createEffect(() => this.actions$.pipe(ofType(SearchActions.searchSuccess), map((action) => DashboardActions.updateResultSet({
             id: action.id ?? DEFAULT_NAMED_QUERY_ID,
             resultSet: action.resultSet,
-            params: action.params
+            params: action.params,
+            next: action.next
         }))));
         this.getPossibleFilterValues$ = createEffect(() => this.actions$.pipe(ofType(SearchActions.getPossibleFilterValues), mergeMap((action) => this.searchService
             .autocomplete(action.attributes, '', action.limit)
             .pipe(map((values) => SearchActions.setPossibleFilterValues({ filterId: action.filterId, values }))))));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SearchEffects, deps: [{ token: i1$3.Actions }, { token: SearchService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SearchEffects, deps: [{ token: i1$3.Actions }, { token: SearchService }, { token: i1.Store }, { token: WidgetFactoryService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SearchEffects }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: SearchEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: SearchService }, { type: i1.Store }] });
+        }], ctorParameters: () => [{ type: i1$3.Actions }, { type: SearchService }, { type: i1.Store }, { type: WidgetFactoryService }] });
 
 const searchFeatureKey = '@pry/search';
 const initialSearchState = {
@@ -7366,7 +7629,7 @@ class PrySelectComponent extends SubscriptionnerDirective {
                 multi: true
             },
             SelectA11yService
-        ], viewQueries: [{ propertyName: "optionsModal", first: true, predicate: ["optionsModal"], descendants: true, read: TemplateRef }, { propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"handleClick()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n  tabindex=\"0\"\n  cdkMonitorElementFocus\n  (cdkFocusChange)=\"onFocusChange($event)\"\n  (keydown)=\"onKeydownSelect($event)\"\n>\n  <div class=\"a-pry-select__content\">\n    @if (autocomplete) {\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event, true)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydownAutocompleteInput($event)\"\n        [placeholder]=\"placeholder ?? ''\"\n        (keydown.enter)=\"enterPressed($event)\"\n        #input\n      />\n    } @else if ((valueItems$ | async).length === 0) {\n      <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      <div class=\"a-pry-select__filler\"></div>\n    } @else {\n      @for (item of valueItems$ | async; track !!item.id ? item.id : item) {\n        <div\n          class=\"a-pry-select__value\"\n          [class.pry-select-form]=\"isForm\"\n          [class.-multiple]=\"multiple\"\n          [ngClass]=\"item ? item[bindClasses ?? ''] ?? {} : {}\"\n        >\n          @if (template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          } @else {\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            @if (bindLabel ? item?.[bindLabel] : item; as value) {\n              {{ (i18nPrefix ?? '') + value | i18n: { warn: false } }}\n              <span\n                *ngIf=\"multiple && clearable\"\n                class=\"a-pry-select__clear\"\n                (click)=\"clear($event, item)\"\n                aria-hidden=\"true\"\n                >\u00D7</span\n              >\n            }\n          }\n        </div>\n      }\n      <div class=\"a-pry-select__filler\"></div>\n    }\n  </div>\n  <div class=\"a-pry-select__actions\">\n    <div class=\"a-pry-select__actions__clear-button\">\n      @if (clearable && (search$ | async)) {\n        <span class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n      }\n    </div>\n    <pry-icon\n      class=\"a-pry-select__toggle\"\n      [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n      [width]=\"iconSize[0]\"\n      [height]=\"iconSize[1]\"\n    ></pry-icon>\n  </div>\n</div>\n<ng-template #optionsModal>\n  <div\n    role=\"listbox\"\n    [attr.aria-label]=\"'@pry.select.label' | i18n\"\n    [id]=\"modalId\"\n    [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.required]=\"required\"\n    [attr.aria-readonly]=\"disabled\"\n    cdkTrapFocus=\"!autocomplete\"\n    [cdkTrapFocusAutoCapture]=\"!autocomplete\"\n  >\n    @if (loading) {\n      <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n        <div class=\"no-widget no-widget__loader\">\n          <pry-page-loader></pry-page-loader>\n        </div>\n        <p>{{ '@pry.select.loading' | i18n }}...</p>\n      </div>\n    } @else {\n      @for (\n        item of matchingItems$ | async;\n        track !!item.id ? item.id : item;\n        let index = $index;\n        let first = $first;\n        let last = $last\n      ) {\n        <div\n          class=\"a-pry-select__options__option\"\n          [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-disabled]=\"disabled\"\n          (click)=\"select($event, item, index)\"\n          (keydown)=\"onKeydownOption($event, item, index, optionDivRef, first, last)\"\n          [style.width.px]=\"modalWidth\"\n          role=\"option\"\n          [id]=\"'select-option-' + index\"\n          tabindex=\"0\"\n          #optionDivRef\n        >\n          @if (template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          } @else {\n            @if (multiple) {\n              <pry-checkbox\n                (click)=\"$event.preventDefault()\"\n                [ngModel]=\"(valueItems$ | async).includes(item)\"\n              ></pry-checkbox>\n            }\n            @if (bindIcon) {\n              <pry-icon [iconSvg]=\"item[bindIcon]\" [width]=\"iconSize[0]\" [height]=\"iconSize[1]\"></pry-icon>\n            }\n            @if (bindLabel ? item?.[bindLabel] : item; as value) {\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n: { warn: false } }}\n            }\n          }\n        </div>\n      } @empty {\n        <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n          <p>{{ '@pry.select.empty' | i18n }}</p>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$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: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i7.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i8.PryPageLoaderComponent, selector: "pry-page-loader", inputs: ["image", "imageAltText"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+        ], viewQueries: [{ propertyName: "optionsModal", first: true, predicate: ["optionsModal"], descendants: true, read: TemplateRef }, { propertyName: "selectElement", first: true, predicate: ["selectElement"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"handleClick()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n  tabindex=\"0\"\n  cdkMonitorElementFocus\n  (cdkFocusChange)=\"onFocusChange($event)\"\n  (keydown)=\"onKeydownSelect($event)\"\n>\n  <div class=\"a-pry-select__content\">\n    @if (autocomplete) {\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event, true)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydownAutocompleteInput($event)\"\n        [placeholder]=\"placeholder ?? ''\"\n        (keydown.enter)=\"enterPressed($event)\"\n        #input\n      />\n    } @else if ((valueItems$ | async).length === 0) {\n      <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      <div class=\"a-pry-select__filler\"></div>\n    } @else {\n      @for (item of valueItems$ | async; track !!item && !!item.id ? item.id : item) {\n        <div\n          class=\"a-pry-select__value\"\n          [class.pry-select-form]=\"isForm\"\n          [class.-multiple]=\"multiple\"\n          [ngClass]=\"item ? item[bindClasses ?? ''] ?? {} : {}\"\n        >\n          @if (template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          } @else {\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            @if (bindLabel ? item?.[bindLabel] : item; as value) {\n              {{ (i18nPrefix ?? '') + value | i18n: { warn: false } }}\n              <span\n                *ngIf=\"multiple && clearable\"\n                class=\"a-pry-select__clear\"\n                (click)=\"clear($event, item)\"\n                aria-hidden=\"true\"\n                >\u00D7</span\n              >\n            }\n          }\n        </div>\n      }\n      <div class=\"a-pry-select__filler\"></div>\n    }\n  </div>\n  <div class=\"a-pry-select__actions\">\n    <div class=\"a-pry-select__actions__clear-button\">\n      @if (clearable && (search$ | async)) {\n        <span class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n      }\n    </div>\n    <pry-icon\n      class=\"a-pry-select__toggle\"\n      [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n      [width]=\"iconSize[0]\"\n      [height]=\"iconSize[1]\"\n    ></pry-icon>\n  </div>\n</div>\n<ng-template #optionsModal>\n  <div\n    role=\"listbox\"\n    [attr.aria-label]=\"'@pry.select.label' | i18n\"\n    [id]=\"modalId\"\n    [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.required]=\"required\"\n    [attr.aria-readonly]=\"disabled\"\n    cdkTrapFocus=\"!autocomplete\"\n    [cdkTrapFocusAutoCapture]=\"!autocomplete\"\n  >\n    @if (loading) {\n      <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n        <div class=\"no-widget no-widget__loader\">\n          <pry-page-loader></pry-page-loader>\n        </div>\n        <p>{{ '@pry.select.loading' | i18n }}...</p>\n      </div>\n    } @else {\n      @for (\n        item of matchingItems$ | async;\n        track !!item && !!item.id ? item.id : item;\n        let index = $index;\n        let first = $first;\n        let last = $last\n      ) {\n        <div\n          class=\"a-pry-select__options__option\"\n          [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-disabled]=\"disabled\"\n          (click)=\"select($event, item, index)\"\n          (keydown)=\"onKeydownOption($event, item, index, optionDivRef, first, last)\"\n          [style.width.px]=\"modalWidth\"\n          role=\"option\"\n          [id]=\"'select-option-' + index\"\n          tabindex=\"0\"\n          #optionDivRef\n        >\n          @if (template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          } @else {\n            @if (multiple) {\n              <pry-checkbox\n                (click)=\"$event.preventDefault()\"\n                [ngModel]=\"(valueItems$ | async).includes(item)\"\n              ></pry-checkbox>\n            }\n            @if (bindIcon) {\n              <pry-icon [iconSvg]=\"item[bindIcon]\" [width]=\"iconSize[0]\" [height]=\"iconSize[1]\"></pry-icon>\n            }\n            @if (bindLabel ? item?.[bindLabel] : item; as value) {\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n: { warn: false } }}\n            }\n          }\n        </div>\n      } @empty {\n        <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n          <p>{{ '@pry.select.empty' | i18n }}</p>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$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: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: i7.PryCheckboxComponent, selector: "pry-checkbox", inputs: ["circle", "name", "inputId", "inhibit"] }, { kind: "component", type: i8.PryPageLoaderComponent, selector: "pry-page-loader", inputs: ["image", "imageAltText"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySelectComponent, decorators: [{
             type: Component,
@@ -7377,7 +7640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                             multi: true
                         },
                         SelectA11yService
-                    ], template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"handleClick()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n  tabindex=\"0\"\n  cdkMonitorElementFocus\n  (cdkFocusChange)=\"onFocusChange($event)\"\n  (keydown)=\"onKeydownSelect($event)\"\n>\n  <div class=\"a-pry-select__content\">\n    @if (autocomplete) {\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event, true)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydownAutocompleteInput($event)\"\n        [placeholder]=\"placeholder ?? ''\"\n        (keydown.enter)=\"enterPressed($event)\"\n        #input\n      />\n    } @else if ((valueItems$ | async).length === 0) {\n      <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      <div class=\"a-pry-select__filler\"></div>\n    } @else {\n      @for (item of valueItems$ | async; track !!item.id ? item.id : item) {\n        <div\n          class=\"a-pry-select__value\"\n          [class.pry-select-form]=\"isForm\"\n          [class.-multiple]=\"multiple\"\n          [ngClass]=\"item ? item[bindClasses ?? ''] ?? {} : {}\"\n        >\n          @if (template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          } @else {\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            @if (bindLabel ? item?.[bindLabel] : item; as value) {\n              {{ (i18nPrefix ?? '') + value | i18n: { warn: false } }}\n              <span\n                *ngIf=\"multiple && clearable\"\n                class=\"a-pry-select__clear\"\n                (click)=\"clear($event, item)\"\n                aria-hidden=\"true\"\n                >\u00D7</span\n              >\n            }\n          }\n        </div>\n      }\n      <div class=\"a-pry-select__filler\"></div>\n    }\n  </div>\n  <div class=\"a-pry-select__actions\">\n    <div class=\"a-pry-select__actions__clear-button\">\n      @if (clearable && (search$ | async)) {\n        <span class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n      }\n    </div>\n    <pry-icon\n      class=\"a-pry-select__toggle\"\n      [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n      [width]=\"iconSize[0]\"\n      [height]=\"iconSize[1]\"\n    ></pry-icon>\n  </div>\n</div>\n<ng-template #optionsModal>\n  <div\n    role=\"listbox\"\n    [attr.aria-label]=\"'@pry.select.label' | i18n\"\n    [id]=\"modalId\"\n    [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.required]=\"required\"\n    [attr.aria-readonly]=\"disabled\"\n    cdkTrapFocus=\"!autocomplete\"\n    [cdkTrapFocusAutoCapture]=\"!autocomplete\"\n  >\n    @if (loading) {\n      <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n        <div class=\"no-widget no-widget__loader\">\n          <pry-page-loader></pry-page-loader>\n        </div>\n        <p>{{ '@pry.select.loading' | i18n }}...</p>\n      </div>\n    } @else {\n      @for (\n        item of matchingItems$ | async;\n        track !!item.id ? item.id : item;\n        let index = $index;\n        let first = $first;\n        let last = $last\n      ) {\n        <div\n          class=\"a-pry-select__options__option\"\n          [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-disabled]=\"disabled\"\n          (click)=\"select($event, item, index)\"\n          (keydown)=\"onKeydownOption($event, item, index, optionDivRef, first, last)\"\n          [style.width.px]=\"modalWidth\"\n          role=\"option\"\n          [id]=\"'select-option-' + index\"\n          tabindex=\"0\"\n          #optionDivRef\n        >\n          @if (template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          } @else {\n            @if (multiple) {\n              <pry-checkbox\n                (click)=\"$event.preventDefault()\"\n                [ngModel]=\"(valueItems$ | async).includes(item)\"\n              ></pry-checkbox>\n            }\n            @if (bindIcon) {\n              <pry-icon [iconSvg]=\"item[bindIcon]\" [width]=\"iconSize[0]\" [height]=\"iconSize[1]\"></pry-icon>\n            }\n            @if (bindLabel ? item?.[bindLabel] : item; as value) {\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n: { warn: false } }}\n            }\n          }\n        </div>\n      } @empty {\n        <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n          <p>{{ '@pry.select.empty' | i18n }}</p>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n" }]
+                    ], template: "<div\n  class=\"a-pry-select\"\n  [attr.aria-disabled]=\"disabled\"\n  #selectElement\n  [class.-focused]=\"focused\"\n  (click)=\"handleClick()\"\n  role=\"combobox\"\n  [attr.aria-expanded]=\"open\"\n  [attr.aria-owns]=\"open ? modalId : null\"\n  aria-haspopup=\"listbox\"\n  tabindex=\"0\"\n  cdkMonitorElementFocus\n  (cdkFocusChange)=\"onFocusChange($event)\"\n  (keydown)=\"onKeydownSelect($event)\"\n>\n  <div class=\"a-pry-select__content\">\n    @if (autocomplete) {\n      <input\n        type=\"text\"\n        class=\"a-pry-select__search\"\n        [ngModel]=\"search$.getValue()\"\n        (ngModelChange)=\"search($event, true)\"\n        aria-autocomplete=\"list\"\n        [attr.aria-controls]=\"open ? modalId : null\"\n        [attr.aria-disabled]=\"disabled\"\n        [disabled]=\"disabled\"\n        (keydown)=\"onKeydownAutocompleteInput($event)\"\n        [placeholder]=\"placeholder ?? ''\"\n        (keydown.enter)=\"enterPressed($event)\"\n        #input\n      />\n    } @else if ((valueItems$ | async).length === 0) {\n      <span class=\"a-pry-select__placeholder\">{{ placeholder }}</span>\n      <div class=\"a-pry-select__filler\"></div>\n    } @else {\n      @for (item of valueItems$ | async; track !!item && !!item.id ? item.id : item) {\n        <div\n          class=\"a-pry-select__value\"\n          [class.pry-select-form]=\"isForm\"\n          [class.-multiple]=\"multiple\"\n          [ngClass]=\"item ? item[bindClasses ?? ''] ?? {} : {}\"\n        >\n          @if (template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          } @else {\n            <pry-icon\n              *ngIf=\"bindIcon\"\n              [iconSvg]=\"item[bindIcon]\"\n              [width]=\"iconSize[0]\"\n              [height]=\"iconSize[1]\"\n            ></pry-icon>\n            @if (bindLabel ? item?.[bindLabel] : item; as value) {\n              {{ (i18nPrefix ?? '') + value | i18n: { warn: false } }}\n              <span\n                *ngIf=\"multiple && clearable\"\n                class=\"a-pry-select__clear\"\n                (click)=\"clear($event, item)\"\n                aria-hidden=\"true\"\n                >\u00D7</span\n              >\n            }\n          }\n        </div>\n      }\n      <div class=\"a-pry-select__filler\"></div>\n    }\n  </div>\n  <div class=\"a-pry-select__actions\">\n    <div class=\"a-pry-select__actions__clear-button\">\n      @if (clearable && (search$ | async)) {\n        <span class=\"a-pry-select__clear\" (click)=\"clearAll($event)\" aria-hidden=\"true\">\u00D7</span>\n      }\n    </div>\n    <pry-icon\n      class=\"a-pry-select__toggle\"\n      [iconSvg]=\"open ? 'chevron_top' : 'chevron_bottom'\"\n      [width]=\"iconSize[0]\"\n      [height]=\"iconSize[1]\"\n    ></pry-icon>\n  </div>\n</div>\n<ng-template #optionsModal>\n  <div\n    role=\"listbox\"\n    [attr.aria-label]=\"'@pry.select.label' | i18n\"\n    [id]=\"modalId\"\n    [attr.aria-activedescendant]=\"'select-option-' + activeDescendant\"\n    [attr.aria-multiselectable]=\"multiple\"\n    [attr.required]=\"required\"\n    [attr.aria-readonly]=\"disabled\"\n    cdkTrapFocus=\"!autocomplete\"\n    [cdkTrapFocusAutoCapture]=\"!autocomplete\"\n  >\n    @if (loading) {\n      <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n        <div class=\"no-widget no-widget__loader\">\n          <pry-page-loader></pry-page-loader>\n        </div>\n        <p>{{ '@pry.select.loading' | i18n }}...</p>\n      </div>\n    } @else {\n      @for (\n        item of matchingItems$ | async;\n        track !!item && !!item.id ? item.id : item;\n        let index = $index;\n        let first = $first;\n        let last = $last\n      ) {\n        <div\n          class=\"a-pry-select__options__option\"\n          [attr.aria-selected]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-checked]=\"(valueItems$ | async).includes(item)\"\n          [attr.aria-disabled]=\"disabled\"\n          (click)=\"select($event, item, index)\"\n          (keydown)=\"onKeydownOption($event, item, index, optionDivRef, first, last)\"\n          [style.width.px]=\"modalWidth\"\n          role=\"option\"\n          [id]=\"'select-option-' + index\"\n          tabindex=\"0\"\n          #optionDivRef\n        >\n          @if (template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item, clear }\"></ng-container>\n          } @else {\n            @if (multiple) {\n              <pry-checkbox\n                (click)=\"$event.preventDefault()\"\n                [ngModel]=\"(valueItems$ | async).includes(item)\"\n              ></pry-checkbox>\n            }\n            @if (bindIcon) {\n              <pry-icon [iconSvg]=\"item[bindIcon]\" [width]=\"iconSize[0]\" [height]=\"iconSize[1]\"></pry-icon>\n            }\n            @if (bindLabel ? item?.[bindLabel] : item; as value) {\n              {{ (i18nPrefix ? i18nPrefix : '') + value | i18n: { warn: false } }}\n            }\n          }\n        </div>\n      } @empty {\n        <div class=\"a-pry-select__options__option -hint\" [style.width.px]=\"modalWidth\">\n          <p>{{ '@pry.select.empty' | i18n }}</p>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2.Overlay }, { type: i0.ViewContainerRef }, { type: SelectA11yService }], propDecorators: { items: [{
                 type: Input
             }], clearable: [{
@@ -8615,217 +8878,6 @@ function solveCollisions(candidateWidget, initialWidgetManifestList, dashboardMa
     return newOverlaps.length > 0 ? dashboardManifest : result;
 }
 
-class BaseWidgetComponent extends SubscriptionnerDirective {
-    set widgetIndex(index) {
-        this.widgetIndex$.next(index);
-    }
-    set staticManifest(manifest) {
-        this.staticManifest$.next(manifest);
-    }
-    set _manifest$(manifest) {
-        this.manifest$ = manifest;
-        this.sub?.unsubscribe();
-        this.observableList$.next([manifest]);
-    }
-    get widgetIndex() {
-        return this.widgetIndex$.getValue();
-    }
-    constructor(store, el) {
-        super();
-        this.store = store;
-        this.el = el;
-        this.widgetIndex$ = new BehaviorSubject(0);
-        this.manifest = { type: 'placeholder' };
-        this.observableList$ = new BehaviorSubject([]);
-        this.staticManifest$ = new BehaviorSubject(null);
-        this._widgetSize$ = new BehaviorSubject({ width: 300, height: 300 });
-        this.open$ = new Subject();
-        this.manifestModified = new EventEmitter();
-        this.manifest$ = this.observableList$.pipe(combineLatestWith(this.staticManifest$), switchMap(([observables, staticManifest]) => (!staticManifest ? merge(...observables) : of(staticManifest))), distinctUntilChanged$1((p, v) => equal(p, v)));
-        this.subscriptions.add(this.manifest$.subscribe((manifest) => (this.manifest = manifest)));
-        this.displayHeader$ = this.manifest$.pipe(map((manifest) => manifest.header === undefined || manifest.header));
-        this.widgetSize$ = this._widgetSize$.pipe(startWith({
-            width: 300,
-            height: 300
-        }), distinctUntilChanged$1((p, c) => p.width === c.width && p.height === c.height), debounceTime(100), distinctUntilChanged$1((p, c) => p.width === c.width && p.height === c.height));
-    }
-    ngAfterViewChecked() {
-        const boundingRect = this.el.nativeElement.getBoundingClientRect();
-        this._widgetSize$.next({ width: boundingRect.width, height: boundingRect.height });
-    }
-    toImage() {
-        return Promise.reject('Not yet implemented');
-    }
-    changeWidgetTitle($event) {
-        this.manifest.title = $event;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseWidgetComponent, deps: [{ token: i1.Store }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: BaseWidgetComponent, selector: "pry-base-widget", inputs: { open$: "open$", widgetIndex: "widgetIndex", staticManifest: "staticManifest" }, outputs: { manifestModified: "manifestModified" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseWidgetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pry-base-widget', template: '' }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ElementRef }], propDecorators: { open$: [{
-                type: Input
-            }], manifestModified: [{
-                type: Output
-            }], widgetIndex: [{
-                type: Input
-            }], staticManifest: [{
-                type: Input
-            }] } });
-
-class WidgetPlaceholderComponent extends BaseWidgetComponent {
-    constructor(store, el) {
-        super(store, el);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetPlaceholderComponent, deps: [{ token: i1.Store }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: WidgetPlaceholderComponent, selector: "pry-widget-placeholder", usesInheritance: true, ngImport: i0, template: "<p>{{ '@pry.widget.unrecognized' | i18n: { type: manifest ? manifest.type : 'placeholder' } }}</p>\n", dependencies: [{ kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetPlaceholderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pry-widget-placeholder', template: "<p>{{ '@pry.widget.unrecognized' | i18n: { type: manifest ? manifest.type : 'placeholder' } }}</p>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ElementRef }] });
-
-class WidgetFillerComponent extends BaseWidgetComponent {
-    constructor(store, el) {
-        super(store, el);
-    }
-    get index() {
-        // @ts-ignore
-        return this.manifest.options?.index ?? 0;
-    }
-    moveToPlace() {
-        // @ts-ignore
-        const startLayout = this.manifest.options?.sourcePlace;
-        // @ts-ignore
-        const targetLayout = this.manifest.options?.targetPlace;
-        // @ts-ignore
-        if (startLayout && targetLayout && this.manifest.options?.windowManifest && this.index !== '-') {
-            // @ts-ignore
-            const newWindowManifest = JSON.parse(JSON.stringify(this.manifest.options?.windowManifest));
-            const targetWidgetIndex = newWindowManifest.widgets.findIndex((w) => w.layout.x === targetLayout.x &&
-                w.layout.y === targetLayout.y &&
-                w.layout.width === targetLayout.width &&
-                w.layout.height === targetLayout.height);
-            const startWidgetIndex = newWindowManifest.widgets.findIndex((w) => w.layout.x === startLayout.x &&
-                w.layout.y === startLayout.y &&
-                w.layout.width === startLayout.width &&
-                w.layout.height === startLayout.height);
-            if (targetWidgetIndex !== -1) {
-                newWindowManifest.widgets[targetWidgetIndex].layout = startLayout;
-            }
-            newWindowManifest.widgets[startWidgetIndex].layout = targetLayout;
-            this.store.dispatch(DashboardActions.updateDashboardManifest({ manifest: newWindowManifest }));
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetFillerComponent, deps: [{ token: i1.Store }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: WidgetFillerComponent, selector: "pry-widget-filler", usesInheritance: true, ngImport: i0, template: "<div class=\"filler-backdrop\" (click)=\"moveToPlace()\">\n  <div class=\"a-indicator-block\">\n    <p>{{ index === -1 ? '-' : index + 1 }}</p>\n  </div>\n</div>\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetFillerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pry-widget-filler', template: "<div class=\"filler-backdrop\" (click)=\"moveToPlace()\">\n  <div class=\"a-indicator-block\">\n    <p>{{ index === -1 ? '-' : index + 1 }}</p>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1.Store }, { type: i0.ElementRef }] });
-
-const WIDGET_DEFINITION = new InjectionToken('Widgets definition');
-const NON_EXCLUDE_GEO_WIDGET_TYPES = {
-    values: ['map', 'tile']
-};
-class WidgetFactoryService {
-    constructor(injector, reference, store) {
-        this.injector = injector;
-        this.store = store;
-        this.reference$ = new BehaviorSubject({
-            placeholder: { name: 'placeholder', component: WidgetPlaceholderComponent },
-            filler: { name: 'filler', component: WidgetFillerComponent }
-        });
-        this.moduleRefCache = {};
-        this.datasources = [];
-        this.putDefinitions(reference);
-        this.store.select(DataSourceSelectors.getDataSources).subscribe((datasources) => (this.datasources = datasources));
-    }
-    resolveComponent(manifest) {
-        if (this.moduleRefCache[manifest.type]) {
-            return of(this.moduleRefCache[manifest.type]);
-        }
-        if (!!manifest && this.reference$.getValue()[manifest.type]) {
-            // @ts-ignore
-            if (this.reference$.getValue()[manifest.type].load === undefined) {
-                this.moduleRefCache[manifest.type] = this.reference$.getValue()[manifest.type].component;
-                return of(this.moduleRefCache[manifest.type]);
-            }
-            else {
-                return from$1(this.reference$.getValue()[manifest.type].load().then((fn) => {
-                    this.moduleRefCache[manifest.type] = fn(this.injector);
-                    return this.moduleRefCache[manifest.type];
-                }));
-            }
-        }
-        else {
-            this.moduleRefCache[manifest.type] = this.reference$.getValue()['placeholder'].component;
-            return of(this.moduleRefCache[manifest.type]);
-        }
-    }
-    putDefinitions(definitions) {
-        this.reference$.next({
-            ...this.reference$.getValue(),
-            ...definitions
-        });
-    }
-    isModuleLoaded(type) {
-        return this.reference$.pipe(map((componentDefs) => !!componentDefs[type]));
-    }
-    datasourcesToAutoLoad(manifest) {
-        const widgetDefinition = this.reference$.getValue()[manifest.type];
-        const datasourcesArray = Array.isArray(manifest.datasource ?? [])
-            ? (manifest.datasource ?? [])
-            : [manifest.datasource];
-        return datasourcesArray
-            .filter((datasource) => {
-            const matching = this.datasources.find((ds) => ds.id === datasource);
-            return (!!matching &&
-                (widgetDefinition.autoLoadDatasource === undefined ||
-                    widgetDefinition.autoLoadDatasource === 'all' ||
-                    (widgetDefinition.autoLoadDatasource === 'geo' && DatasourceUtils.isGeo(matching)) ||
-                    (widgetDefinition.autoLoadDatasource === 'not-geo' && !DatasourceUtils.isGeo(matching))));
-        })
-            .map((ds) => ({ datasetId: ds, excludeGeo: !NON_EXCLUDE_GEO_WIDGET_TYPES.values.includes(manifest.type) }));
-    }
-    aggregatesToAutoLoad(manifest) {
-        const widgetDefinition = this.reference$.getValue()[manifest.type];
-        const datasourcesArray = Array.isArray(manifest.datasource ?? [])
-            ? (manifest.datasource ?? [])
-            : [manifest.datasource];
-        return datasourcesArray.filter(() => widgetDefinition.autoLoadDatasource === undefined || widgetDefinition.autoLoadDatasource === 'aggregate');
-    }
-    getObjectsToAutoLoad(manifest) {
-        const datasources = [];
-        const aggregates = [];
-        manifest.windows.forEach((windowManifest) => {
-            (windowManifest.widgets ?? []).forEach((widgetManifest) => {
-                this.datasourcesToAutoLoad(widgetManifest).forEach((res) => {
-                    if (res.datasetId) {
-                        datasources.push(res);
-                    }
-                });
-                this.aggregatesToAutoLoad(widgetManifest).forEach((ds) => aggregates.push(ds));
-            });
-        });
-        return { datasources, aggregates };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetFactoryService, deps: [{ token: i0.Injector }, { token: WIDGET_DEFINITION }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetFactoryService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: WidgetFactoryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [WIDGET_DEFINITION]
-                }] }, { type: i1.Store }] });
-
 class WidgetInstanciatorComponent extends SubscriptionnerDirective {
     set widgetIndex(manifest) {
         this._widgetIndex$.next(manifest);
@@ -11492,6 +11544,7 @@ class BaseFilterComponent extends SubscriptionnerDirective {
         this.store = store;
         this.valueUpdated = new EventEmitter();
         this.pressedEnter = new EventEmitter();
+        this.cleared = new EventEmitter();
         this.type = 'base';
     }
     ngOnInit() {
@@ -11513,7 +11566,7 @@ class BaseFilterComponent extends SubscriptionnerDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseFilterComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: BaseFilterComponent, selector: "pry-base-filter", inputs: { filter: "filter" }, outputs: { valueUpdated: "valueUpdated", pressedEnter: "pressedEnter" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: BaseFilterComponent, selector: "pry-base-filter", inputs: { filter: "filter" }, outputs: { valueUpdated: "valueUpdated", pressedEnter: "pressedEnter", cleared: "cleared" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: BaseFilterComponent, decorators: [{
             type: Component,
@@ -11524,6 +11577,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Output
             }], pressedEnter: [{
                 type: Output
+            }], cleared: [{
+                type: Output
             }] } });
 
 const FILTER_DEFINITION = new InjectionToken('Filter definition');
@@ -11606,6 +11661,7 @@ class FilterInstanciatorComponent extends SubscriptionnerDirective {
         this.changeDetector = changeDetector;
         this.filter$ = new BehaviorSubject(null);
         this.pressedEnter = new EventEmitter();
+        this.cleared = new EventEmitter();
     }
     ngAfterViewInit() {
         this.subscriptions.add(this.filter$.subscribe((filter) => {
@@ -11619,6 +11675,7 @@ class FilterInstanciatorComponent extends SubscriptionnerDirective {
                     this.currentInstance = component.instance;
                     this.currentInstance.filter = filter;
                     this.currentInstance.pressedEnter = this.pressedEnter;
+                    this.currentInstance.cleared = this.cleared;
                     this.changeDetector.detectChanges();
                 });
             }
@@ -11629,13 +11686,15 @@ class FilterInstanciatorComponent extends SubscriptionnerDirective {
         this.applySub?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterInstanciatorComponent, deps: [{ token: i1.Store }, { token: i0.Injector }, { token: FilterFactoryService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FilterInstanciatorComponent, selector: "pry-filter-instanciator", inputs: { filter: "filter", applyFilter$: "applyFilter$" }, outputs: { pressedEnter: "pressedEnter" }, viewQueries: [{ propertyName: "filterContainerRef", first: true, predicate: ["filters"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #filters></ng-template>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FilterInstanciatorComponent, selector: "pry-filter-instanciator", inputs: { filter: "filter", applyFilter$: "applyFilter$" }, outputs: { pressedEnter: "pressedEnter", cleared: "cleared" }, viewQueries: [{ propertyName: "filterContainerRef", first: true, predicate: ["filters"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: "<ng-template #filters></ng-template>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterInstanciatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pry-filter-instanciator', template: "<ng-template #filters></ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i0.Injector }, { type: FilterFactoryService }, { type: i0.ChangeDetectorRef }], propDecorators: { pressedEnter: [{
                 type: Output
+            }], cleared: [{
+                type: Output
             }], filter: [{
                 type: Input
             }], filterContainerRef: [{
@@ -11661,6 +11720,7 @@ class FilterGroupComponent {
         this.apply$ = new BehaviorSubject(undefined);
         this.isSelectOpen = false;
         this.enterTriggerFilter = false;
+        this.clearTriggerFilter = false;
         this.globalManifest$ = this.store.select(DashboardSelectors.globalManifest);
     }
     filter() {
@@ -11676,17 +11736,29 @@ class FilterGroupComponent {
                 .querySelector('.o-container__filter-container')
                 ?.contains(document.querySelector('ng-dropdown-panel.ng-dropdown-panel')) || false;
     }
+    enterPressed() {
+        if (this.enterTriggerFilter) {
+            this.filter();
+        }
+    }
+    cleared() {
+        if (this.clearTriggerFilter) {
+            this.filter();
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterGroupComponent, deps: [{ token: i1.Store }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FilterGroupComponent, selector: "pry-filter-group", inputs: { enterTriggerFilter: "enterTriggerFilter" }, ngImport: i0, template: "<pry-filter-group-css></pry-filter-group-css>\n<ng-container *ngIf=\"globalManifest$ | async as manifest\">\n  <div class=\"o-container__filters\" *ngIf=\"manifest.filters && manifest.filters.length > 0\">\n    <div class=\"o-container__filter-container\" (click)=\"openSelect()\">\n      @for (filterDescription of manifest.filters; track filterDescription.id) {\n        <pry-filter-instanciator\n          [filter]=\"filterDescription\"\n          [applyFilter$]=\"apply$\"\n          (pressedEnter)=\"filter()\"\n        ></pry-filter-instanciator>\n      }\n    </div>\n    <div class=\"o-container__filter-actions\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"clearFilters()\">\n        <pry-icon iconSvg=\"clear_filter\" [width]=\"30\" [height]=\"30\"></pry-icon>\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"filter()\">\n        {{ '@pry.toolbox.apply' | i18n }}\n        <pry-icon iconSvg=\"refresh_filter\" [width]=\"18\" [height]=\"18\"></pry-icon>\n      </button>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: FilterInstanciatorComponent, selector: "pry-filter-instanciator", inputs: ["filter", "applyFilter$"], outputs: ["pressedEnter"] }, { kind: "component", type: PryFilterGroupCssComponent, selector: "pry-filter-group-css" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FilterGroupComponent, selector: "pry-filter-group", inputs: { enterTriggerFilter: "enterTriggerFilter", clearTriggerFilter: "clearTriggerFilter" }, ngImport: i0, template: "<pry-filter-group-css></pry-filter-group-css>\n<ng-container *ngIf=\"globalManifest$ | async as manifest\">\n  <div class=\"o-container__filters\" *ngIf=\"manifest.filters && manifest.filters.length > 0\">\n    <div class=\"o-container__filter-container\" (click)=\"openSelect()\">\n      @for (filterDescription of manifest.filters; track filterDescription.id) {\n        <pry-filter-instanciator\n          [filter]=\"filterDescription\"\n          [applyFilter$]=\"apply$\"\n          (pressedEnter)=\"enterPressed()\"\n          (cleared)=\"cleared()\"\n        ></pry-filter-instanciator>\n      }\n    </div>\n    <div class=\"o-container__filter-actions\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"clearFilters()\">\n        <pry-icon iconSvg=\"clear_filter\" [width]=\"30\" [height]=\"30\"></pry-icon>\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"filter()\">\n        {{ '@pry.toolbox.apply' | i18n }}\n        <pry-icon iconSvg=\"refresh_filter\" [width]=\"18\" [height]=\"18\"></pry-icon>\n      </button>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }, { kind: "component", type: FilterInstanciatorComponent, selector: "pry-filter-instanciator", inputs: ["filter", "applyFilter$"], outputs: ["pressedEnter", "cleared"] }, { kind: "component", type: PryFilterGroupCssComponent, selector: "pry-filter-group-css" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: I18nPipe, name: "i18n" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pry-filter-group', template: "<pry-filter-group-css></pry-filter-group-css>\n<ng-container *ngIf=\"globalManifest$ | async as manifest\">\n  <div class=\"o-container__filters\" *ngIf=\"manifest.filters && manifest.filters.length > 0\">\n    <div class=\"o-container__filter-container\" (click)=\"openSelect()\">\n      @for (filterDescription of manifest.filters; track filterDescription.id) {\n        <pry-filter-instanciator\n          [filter]=\"filterDescription\"\n          [applyFilter$]=\"apply$\"\n          (pressedEnter)=\"filter()\"\n        ></pry-filter-instanciator>\n      }\n    </div>\n    <div class=\"o-container__filter-actions\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"clearFilters()\">\n        <pry-icon iconSvg=\"clear_filter\" [width]=\"30\" [height]=\"30\"></pry-icon>\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"filter()\">\n        {{ '@pry.toolbox.apply' | i18n }}\n        <pry-icon iconSvg=\"refresh_filter\" [width]=\"18\" [height]=\"18\"></pry-icon>\n      </button>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'pry-filter-group', template: "<pry-filter-group-css></pry-filter-group-css>\n<ng-container *ngIf=\"globalManifest$ | async as manifest\">\n  <div class=\"o-container__filters\" *ngIf=\"manifest.filters && manifest.filters.length > 0\">\n    <div class=\"o-container__filter-container\" (click)=\"openSelect()\">\n      @for (filterDescription of manifest.filters; track filterDescription.id) {\n        <pry-filter-instanciator\n          [filter]=\"filterDescription\"\n          [applyFilter$]=\"apply$\"\n          (pressedEnter)=\"enterPressed()\"\n          (cleared)=\"cleared()\"\n        ></pry-filter-instanciator>\n      }\n    </div>\n    <div class=\"o-container__filter-actions\">\n      <button type=\"button\" class=\"a-btn a-btn--icon-only\" (click)=\"clearFilters()\">\n        <pry-icon iconSvg=\"clear_filter\" [width]=\"30\" [height]=\"30\"></pry-icon>\n      </button>\n      <button type=\"button\" class=\"a-btn a-btn--primary\" (click)=\"filter()\">\n        {{ '@pry.toolbox.apply' | i18n }}\n        <pry-icon iconSvg=\"refresh_filter\" [width]=\"18\" [height]=\"18\"></pry-icon>\n      </button>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }], propDecorators: { enterTriggerFilter: [{
                 type: Input
+            }], clearTriggerFilter: [{
+                type: Input
             }] } });
 
 const BASE_CONFIG = new InjectionToken('base config');
@@ -12619,7 +12691,21 @@ const internalReducer = createReducer(dashboardInitialState, on(DashboardActions
         ...state.results,
         resultSets: {
             ...state.results.resultSets,
-            [action.id]: action.resultSet
+            [action.id]: !action.next
+                ? action.resultSet
+                : {
+                    items: [
+                        ...new Set(Object.keys(action.resultSet.items).concat(Object.keys(state.results.resultSets[action.id].items)))
+                    ]
+                        .map((key) => ({
+                        [key]: [...action.resultSet.items[key], ...state.results.resultSets[action.id].items[key]]
+                    }))
+                        .reduce((p, c) => ({ ...p, ...c }), {}),
+                    count: action.resultSet.count,
+                    relations: [...state.results.resultSets[action.id].relations, ...action.resultSet.relations],
+                    autoRefreshInterval: action.resultSet.autoRefreshInterval,
+                    searchAfter: action.resultSet.searchAfter
+                }
         },
         resultSetsParams: {
             ...state.results.resultSetsParams,
@@ -13092,53 +13178,6 @@ const internalReducer = createReducer(dashboardInitialState, on(DashboardActions
         ...state.manifests,
         loading: true
     }
-})), on(DashboardActions.initDefaultLayerGroup, (state, action) => ({
-    ...state,
-    manifests: {
-        ...state.manifests,
-        manifest: {
-            ...state.manifests.manifest,
-            layerGroups: state.manifests.manifest.layerGroups?.some((group) => group.name === 'DEFAULT')
-                ? state.manifests.manifest.layerGroups.map((group) => action.layers ? { ...group, visibleLayers: action.layers } : group)
-                : [
-                    ...(state.manifests.manifest.layerGroups ?? []),
-                    {
-                        name: 'DEFAULT',
-                        singleLayer: false,
-                        visibleLayers: action.layers ? action.layers : []
-                    }
-                ]
-        }
-    }
-})), on(DashboardActions.updateLayerVisibility, (state, action) => ({
-    ...state,
-    manifests: {
-        ...state.manifests,
-        manifest: {
-            ...state.manifests.manifest,
-            layerGroups: [
-                ...(state.manifests.manifest.layerGroups ?? []).map((group) => group.name === action.name
-                    ? {
-                        ...group,
-                        visibleLayers: action.visibleLayers
-                            ? typeof action.visibleLayers === 'string'
-                                ? [...group.visibleLayers, action.visibleLayers]
-                                : action.visibleLayers
-                            : group.visibleLayers
-                    }
-                    : group)
-            ]
-        }
-    }
-})), on(DashboardActions.updateLayerGroups, (state, { layerGroups }) => ({
-    ...state,
-    manifests: {
-        ...state.manifests,
-        manifest: {
-            ...state.manifests.manifest,
-            layerGroups
-        }
-    }
 })));
 function dashboardReducer(state, action) {
     return internalReducer(state, action);