@sinequa/atomic-angular 0.3.33 → 0.4.19-dev.1

package/fesm2022/sinequa-atomic-angular.mjs

@@ -1,20 +1,21 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, HostBinding, Component, Pipe, InjectionToken, computed, ChangeDetectorRef, DestroyRef, LOCALE_ID, Inject, Optional, input, output, signal, effect, assertInInjectionContext, runInInjectionContext, Injector, EventEmitter, Directive, viewChild, ElementRef, afterNextRender, untracked, linkedSignal, model, TemplateRef, HostListener, Renderer2, contentChildren, contentChild, booleanAttribute, resource, ViewContainerRef, numberAttribute, viewChildren, afterEveryRender } from '@angular/core';
+import { Injectable, inject, HostBinding, Component, Pipe, InjectionToken, computed, ChangeDetectorRef, DestroyRef, LOCALE_ID, Inject, Optional, input, output, signal, effect, assertInInjectionContext, runInInjectionContext, Injector, EventEmitter, Directive, viewChild, ElementRef, afterNextRender, untracked, linkedSignal, model, TemplateRef, HostListener, Renderer2, contentChildren, contentChild, booleanAttribute, resource, ViewContainerRef, viewChildren, numberAttribute, afterEveryRender } from '@angular/core';
 import { BehaviorSubject, Subscription, catchError, EMPTY, firstValueFrom, map, Subject, of, tap, throwError, filter, shareReplay, fromEvent, debounceTime, from, switchMap } from 'rxjs';
 import { TranslocoService, TranslocoPipe, provideTranslocoScope } from '@jsverse/transloco';
-import { DropdownComponent, DropdownContentComponent, InputComponent, ButtonComponent, cn, EllipsisIcon, ChevronRightIcon, MenuComponent, MenuContentComponent, MenuItemComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, SwitchComponent, SelectOptionDirective, DialogService, TabsComponent, TabsListComponent, TabComponent, ChevronLeftIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, Separator, SheetCloseDirective, SheetService, LoadingCircleIconComponent, CircleCheckIconComponent, PopoverComponent, HorizontalDividerComponent, CardComponent, CardHeaderComponent, CardContentComponent, CardFooterComponent, InputGroupInput, InputGroupComponent, InputGroupAddonComponent, PopoverContentComponent, BookmarkIcon, UserIcon, TrashIcon, FolderIcon, VerticalDividerComponent, ButtonGroup, SearchIcon, FilterIcon, DateRangePickerDirective, BreakpointObserverService, FlagEnglishIconComponent, FlagFrenchIconComponent, EditIcon, UndoIcon, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@sinequa/ui';
+import { DropdownComponent, DropdownContentComponent, InputComponent, ButtonComponent, cn, EllipsisIcon, ChevronRightIcon, MenuComponent, MenuContentComponent, MenuItemComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, SwitchComponent, SelectOptionDirective, DialogService, TabsComponent, TabsListComponent, TabComponent, ChevronLeftIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, Separator, SheetCloseDirective, SheetService, ButtonGroup, InputGroupInput, InputGroupComponent, InputGroupAddonComponent, SearchIcon, FilterIcon, DateRangePickerDirective, LoadingCircleIconComponent, CircleCheckIconComponent, PopoverComponent, HorizontalDividerComponent, CardComponent, CardHeaderComponent, CardContentComponent, CardFooterComponent, PopoverContentComponent, BookmarkIcon, UserIcon, TrashIcon, FolderIcon, VerticalDividerComponent, BreakpointObserverService, FlagEnglishIconComponent, FlagFrenchIconComponent, EditIcon, UndoIcon, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@sinequa/ui';
 import highlightWords from 'highlight-words';
 import { ActivatedRoute, Router, NavigationEnd, RouterLink, RouterModule } from '@angular/router';
 import { withDevtools } from '@angular-architects/ngrx-toolkit';
 import { signalStore, signalStoreFeature, withState, withMethods, patchState, getState, withComputed } from '@ngrx/signals';
-import { globalConfig, EngineType, extraColumns, sysLang, getQueryParamsFromUrl, logout, login, info, warn, notify, error, setGlobalConfig, addConcepts, queryParamsFromUrl, patchUserSettings, deleteUserSettings, fetchUserSettings, buildPathsAndLevels, escapeExpr, isAuthenticated, isExpired, fetchSuggest, isObject, Audit, getMetadata, bisect, isNotInputEvent, fetchSponsoredLinks, fetchQuery, translateAggregationToDateOptions, aggItemRegex, parseValueAndOperatorFromItem, debug, fetchSimilarDocuments, fetchChangePassword, fetchSendPasswordResetEmail, expiresSoon, suggestionsToTreeAggregationNodes, fetchSuggestField, labels, fetchLabels, guid, getRelativeDate, createUserProfile, patchUserProfile, isJsonable, addAuditAdditionalInfo, getToken, setToken, createHeaders } from '@sinequa/atomic';
-import { HttpClient, HttpParams, httpResource, HttpResponse, HttpHeaders } from '@angular/common/http';
+import { globalConfig, EngineType, extraColumns, sysLang, getQueryParamsFromUrl, logout, login, info, warn, notify, error, setGlobalConfig, addConcepts, queryParamsFromUrl, patchUserSettings, deleteUserSettings, fetchUserSettings, buildPathsAndLevels, escapeExpr, isAuthenticated, isExpired, debug, fetchSuggest, isObject, Audit, getMetadata, bisect, isNotInputEvent, fetchSponsoredLinks, fetchQuery, translateAggregationToDateOptions, aggItemRegex, parseValueAndOperatorFromItem, fetchSuggestField, fetchSimilarDocuments, fetchChangePassword, fetchSendPasswordResetEmail, expiresSoon, suggestionsToTreeAggregationNodes, labels, fetchLabels, guid, getRelativeDate, createUserProfile, deleteUserProfileProperty, patchUserProfile, isJsonable, addAuditAdditionalInfo, getToken, setToken, createHeaders } from '@sinequa/atomic';
+import { HttpClient, HttpParams, httpResource, HttpResponse, HttpHeaders, HttpContextToken } from '@angular/common/http';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DatePipe, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, Location, NgTemplateOutlet, NgStyle, NgClass, NgComponentOutlet } from '@angular/common';
 import { Title, DomSanitizer } from '@angular/platform-browser';
 import { cva } from 'class-variance-authority';
 import * as i1 from '@angular/forms';
 import { FormsModule, NonNullableFormBuilder, ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
+import { injectVirtualizer } from '@tanstack/angular-virtual';
 import * as i1$1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i2 from '@angular/cdk/a11y';
@@ -321,7 +322,7 @@ function withAppFeatures() {
                     }
                 });
                 // Also include columns from the default index "_"
-                const schema = app.indexes._.columns;
+                const schema = app.indexes._?.columns;
                 if (schema) {
                     Object.keys(schema).forEach((schemaKey) => {
                         const col = schema[schemaKey.toLocaleLowerCase()];
@@ -335,29 +336,29 @@ function withAppFeatures() {
                             });
                         }
                     });
+                    // Include columns from all queries
+                    Object.keys(app.queries).forEach((queryKey) => {
+                        const query = app.queries[queryKey];
+                        if (query.columnsInfo?.columns) {
+                            Object.values(query.columnsInfo.columns).forEach((c) => {
+                                const col = schema[c.name.toLocaleLowerCase()];
+                                if (!col)
+                                    return;
+                                columnMap[c.name.toLocaleLowerCase()] = col;
+                                // Add aliases to the map
+                                if (c.aliases) {
+                                    c.aliases
+                                        .split(/[,;|]/)
+                                        .map((a) => a.trim())
+                                        .forEach((alias) => {
+                                        columnMap[alias.toLocaleLowerCase()] = col;
+                                    });
+                                }
+                            });
+                        }
+                    });
+                    patchState(store, { columnMap });
                 }
-                // Include columns from all queries
-                Object.keys(app.queries).forEach((queryKey) => {
-                    const query = app.queries[queryKey];
-                    if (query.columnsInfo?.columns) {
-                        Object.values(query.columnsInfo.columns).forEach((c) => {
-                            const col = schema[c.name.toLocaleLowerCase()];
-                            if (!col)
-                                return;
-                            columnMap[c.name.toLocaleLowerCase()] = col;
-                            // Add aliases to the map
-                            if (c.aliases) {
-                                c.aliases
-                                    .split(/[,;|]/)
-                                    .map((a) => a.trim())
-                                    .forEach((alias) => {
-                                    columnMap[alias.toLocaleLowerCase()] = col;
-                                });
-                            }
-                        });
-                    }
-                });
-                patchState(store, { columnMap });
             })));
         },
         /**
@@ -373,7 +374,7 @@ function withAppFeatures() {
         /**
          * Updates the application state with the provided CCApp object.
          *
-         * @param {CCApp} app - The application object containing the new state values.
+         * @param {Partial<CCAppState>} app - The application object containing the new state values.
          */
         update(app) {
             patchState(store, (state) => {
@@ -631,7 +632,8 @@ function withAppFeatures() {
             sources: computed(() => parseCustomJson("sources", {})),
             filters: computed(() => parseCustomJson("filters", [])),
             general: computed(() => parseCustomJson("general", {})),
-            assistants: computed(() => parseCustomJson("assistants", {}))
+            assistants: computed(() => parseCustomJson("assistants", {})),
+            agents: computed(() => parseCustomJson("agents", {}))
         };
     }), withMethods((store) => ({
         /**
@@ -737,6 +739,12 @@ function withAppFeatures() {
             if (assistants === undefined || Object.keys(assistants).length === 0)
                 return false;
             return !!assistants[assistantName]?.defaultValues?.service_id;
+        },
+        isAgentAllowed(agentName) {
+            const agents = store.agents();
+            if (agents === undefined || Object.keys(agents).length === 0)
+                return false;
+            return !!agents[agentName]?.defaultAgent;
         }
     })));
 }
@@ -1105,7 +1113,7 @@ class DropdownInputComponent {
         }
       </DropdownContent>
     </Dropdown>
-  `, isInline: true, dependencies: [{ kind: "component", type: DropdownComponent, selector: "dropdown, Dropdown", inputs: ["disabled"] }, { kind: "component", type: DropdownListComponent, selector: "dropdown-list, DropdownList", inputs: ["items"], outputs: ["onClick"] }, { kind: "directive", type: DropdownContentComponent, selector: "dropdown-content, dropdowncontent, DropdownContent", inputs: ["class", "position", "strategy", "offset"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: DropdownComponent, selector: "dropdown, Dropdown", inputs: ["disabled"] }, { kind: "component", type: DropdownListComponent, selector: "dropdown-list, DropdownList", inputs: ["items"], outputs: ["onClick"] }, { kind: "directive", type: DropdownContentComponent, selector: "dropdown-content, dropdowncontent, DropdownContent", inputs: ["class", "position", "strategy", "offset"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownInputComponent, decorators: [{
             type: Component,
@@ -1221,82 +1229,81 @@ function withExtractsFeatures() {
     })));
 }
 
-class PrincipalService {
-    http = inject(HttpClient);
-    API_URL = `${globalConfig.backendUrl}/api/v1`;
-    /**
-     * Retrieves the principal information from the server.
-     *
-     * @returns Observable<Principal> An observable that emits the principal information.
-     *
-     * @remarks
-     * This method sends a GET request to the API endpoint to fetch the principal data.
-     * It includes query parameters to specify the action and to indicate that no authentication is required.
-     * In case of an error, it logs the error to the console and returns an empty observable.
-     *
-     * @example
-     * ```typescript
-     * principalService.getPrincipal().subscribe(principal => {
-     *   console.log(principal);
-     * });
-     * ```
-     */
-    getPrincipal() {
-        const params = new HttpParams().set('action', 'get');
-        params.append('noAuthentication', 'true');
-        return this.http.get(this.API_URL + '/principal', { params }).pipe(catchError(error => {
-            console.error('PrincipalService.getPrincipal failure - error: ', error);
-            return EMPTY;
-        }));
+const initialPrincipal = {
+    id: "",
+    id2: "",
+    id3: "",
+    id4: "",
+    id5: "",
+    email: "",
+    name: "",
+    longName: "",
+    userId: "",
+    fullName: "",
+    isAdministrator: false,
+    isDelegatedAdmin: false,
+    description: "",
+    param1: "",
+    param2: "",
+    param3: "",
+    param4: "",
+    param5: "",
+    param6: "",
+    param7: "",
+    param8: "",
+    param9: "",
+    param10: "",
+    userOverrideActive: false,
+    state: 'initial'
+};
+const PrincipalStore = signalStore({ providedIn: 'root' }, withDevtools('Principal'), withState(initialPrincipal), withComputed((store) => ({
+    allowUserOverride: computed(() => store.isAdministrator() && !store.userOverrideActive()),
+    isOverridingUser: computed(() => store.userOverrideActive()),
+    initials: computed(() => {
+        const fullName = store.fullName?.();
+        if (!fullName)
+            return '';
+        return fullName
+            .split(' ')
+            .map(word => word[0]?.toUpperCase())
+            .join('');
+    }),
+})), withMethods((store) => ({
+    /**
+    * @deprecated use getState(PrincipalStore))
+    */
+    principal() {
+        const { userOverrideActive: _, ...rest } = getState(store);
+        // this block cannot be put in a computed due to dynamic construction object with signals, which is not supported in computed.
+        // using a method allows us to construct the principal object on each call, ensuring that the signals are properly evaluated and returned as values.
+        const principal = Object.entries(rest).reduce((acc, [k, v]) => {
+            acc[k] = v;
+            return acc;
+        }, {});
+        return principal;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PrincipalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PrincipalService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PrincipalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-const PrincipalStore = signalStore({ providedIn: 'root' }, withDevtools('Principal'), withState({ principal: {}, userOverrideActive: false }), withComputed(({ principal, userOverrideActive }) => ({
-    allowUserOverride: computed(() => principal().isAdministrator && userOverrideActive() === false),
-    isOverridingUser: computed(() => userOverrideActive() === true)
 })), withPrincipalFeatures());
-/**
- * Enhances the store with principal-related features.
- *
- * This function integrates state, methods, and computed properties related to the principal.
- *
- * @returns A feature that can be added to a signal store.
- *
- * @feature
- * - State:
- *   - `principal`: An object representing the principal.
- *   - `userOverrideActive`: A boolean indicating if user override is active.
- *
- * - Methods:
- *   - `initialize()`: Initializes the principal state by fetching the principal data from the `PrincipalService`.
- *
- * - Computed Properties:
- *   - `allowUserOverride`: A computed boolean indicating if user override is allowed based on the principal's administrator status and the `userOverrideActive` state.
- *   - `isOverridingUser`: A computed boolean indicating if the user override is currently active.
- */
 function withPrincipalFeatures() {
-    return signalStoreFeature(withMethods((store, principalService = inject(PrincipalService)) => ({
-        /**
-         * Initializes the principal store by fetching the principal data from the principal service.
-         * It patches the store with the fetched principal data and a user override active flag from the global configuration.
-         *
-         * @returns A promise that resolves when the principal data has been fetched and the store has been patched.
-         */
-        initialize() {
-            return firstValueFrom(principalService.getPrincipal().pipe(map(principal => {
-                const { userOverrideActive = false } = globalConfig;
-                patchState(store, { principal, userOverrideActive });
-            })));
-        }
-    })));
+    return signalStoreFeature(withMethods((store) => {
+        const http = inject(HttpClient);
+        const API_URL = `${globalConfig.backendUrl}/api/v1`;
+        return {
+            initialize() {
+                patchState(store, { state: 'loading' });
+                const params = new HttpParams()
+                    .set('action', 'get')
+                    .set('noAuthentication', 'true');
+                return firstValueFrom(http.get(`${API_URL}/principal`, { params }).pipe(catchError((error) => {
+                    console.error('Principal fetch failed', error);
+                    patchState(store, { state: 'error' });
+                    throw error;
+                }), map((principal) => {
+                    const { userOverrideActive = false } = globalConfig;
+                    patchState(store, { ...initialPrincipal, ...principal, userOverrideActive, state: 'loaded' });
+                })));
+            }
+        };
+    }));
 }
 
 /**
@@ -1403,7 +1410,7 @@ function getQueryNameFromRoute() {
         const { t, n } = route.snapshot.queryParams;
         // ! This is a workaround for the case where the queryName is not defined in the route data
         // "search" is the parent route of the search results, and "t" is the query parameter for the tab
-        const { queryName } = routes.config.filter(p => p.path === 'search')[0].children?.find(route => route.path === t)?.data || n || {};
+        const { queryName } = routes.config.filter(p => p.path === 'search')[0]?.children?.find(route => route.path === t)?.data || n || {};
         if (queryName)
             return queryName;
         // fallback to queryName from route data
@@ -1766,7 +1773,7 @@ function withQueryParamsFeatures() {
         /**
          * Updates the filter in the store's state.
          *
-         * @param filter - The filter to be updated. If the filter is `undefined`, the state remains unchanged.
+         * @param newFilter - The filter to be updated. If the filter is `undefined`, the state remains unchanged.
          *
          * The function performs the following operations:
          * - Adds the filter to the state if it doesn't already exist and has values.
@@ -1780,66 +1787,75 @@ function withQueryParamsFeatures() {
          * - If the filter's operator is not 'between' and `filters`, `value`, and `values` are all `undefined`, the filter is removed.
          * - If the filter already exists, its values are updated.
          */
-        updateFilter(filter, audit) {
+        updateFilter(newFilter, audit) {
             patchState(store, (state) => {
-                if (filter === undefined)
+                if (newFilter === undefined)
                     return state;
-                const allFilters = state.filters || [];
+                // is filter contains values, check if the operator is set, otherwise set operator to "in" by default
+                if (newFilter.values && !newFilter.operator) {
+                    newFilter.operator = "in";
+                }
+                const currentActiveFilters = state.filters || [];
                 let newState;
-                const existingFilter = allFilters.find((f) => f.field === filter.field);
+                const filterFound = currentActiveFilters.find((f) => f.field === newFilter.field);
                 // if the filter has no name (might be coming from a metadata appliance)
-                if (!filter.name || !existingFilter?.name) {
+                if (!newFilter.name || !filterFound?.name) {
                     // cancel if a filter is found for the current field which contains the value we want to add
-                    if (existingFilter &&
-                        filter.value &&
-                        (existingFilter.value?.toLowerCase() === filter.value?.toLowerCase() ||
-                            existingFilter.values?.some((v) => v?.toLowerCase() === filter.value?.toLowerCase())))
+                    if (filterFound &&
+                        newFilter.value &&
+                        (filterFound.value?.toLowerCase() === newFilter.value?.toLowerCase() ||
+                            filterFound.values?.some((v) => v?.toLowerCase() === newFilter.value?.toLowerCase()))) {
                         return state;
-                    if (existingFilter) {
-                        // if filter found for the field without the value we want to add, merge the filters and values
-                        const values = (existingFilter.values || []).concat(filter.values || []);
-                        if (filter.value)
-                            values.push(filter.value);
-                        if (existingFilter.value)
-                            values.push(existingFilter.value);
+                    }
+                    if (filterFound) {
+                        // if filter found for the field without a value property we want to add, merge the filters and values
+                        // but merge values without duplicates
+                        const values = Array.from(new Set([...(filterFound.values || []), ...(newFilter.values || [])].filter(Boolean)));
+                        // add the new value if it exists and is not already in the existing values
+                        if (newFilter.value)
+                            values.push(newFilter.value);
+                        if (filterFound.value)
+                            values.push(filterFound.value);
                         const filterToApply = {
-                            field: filter.field,
+                            field: newFilter.field,
                             values,
-                            name: existingFilter.name || filter.name
+                            name: filterFound.name || newFilter.name,
+                            operator: newFilter.operator || filterFound.operator || "in"
                         };
-                        const existingIndex = allFilters.findIndex((f) => f.field === filter.field);
-                        const filters = allFilters.toSpliced(existingIndex, 1, filterToApply);
+                        // find the index of the existing filter for the field and replace it with the merged filter
+                        const existingIndex = currentActiveFilters.findIndex((f) => f.field === newFilter.field);
+                        const filters = currentActiveFilters.toSpliced(existingIndex, 1, filterToApply);
                         newState = { ...state, filters };
                     }
                     else {
                         // Add filter if it doesn't exist and has values
-                        if (!existingFilter) {
-                            newState = { ...state, filters: [...(allFilters || []), filter] };
+                        if (!filterFound) {
+                            newState = { ...state, filters: [...(currentActiveFilters || []), newFilter] };
                         }
                     }
                 }
                 else {
                     // search filter by name not by field because many filters can have the same field but different names
-                    const existing = allFilters.findIndex((f) => f.name === filter.name);
+                    const existing = currentActiveFilters.findIndex((f) => f.name === newFilter.name);
                     // Add filter if it doesn't exist and has values
                     if (existing === -1) {
-                        newState = { ...state, filters: [...(allFilters || []), filter] };
+                        newState = { ...state, filters: [...(currentActiveFilters || []), newFilter] };
                     }
                     if (existing >= 0) {
                         // remove filter if between operator is selected but no values are selected
-                        if (filter.operator === "between" && filter.start === undefined && filter.end === undefined) {
-                            newState = { ...state, filters: allFilters.filter((f) => f.name !== filter.name) };
+                        if (newFilter.operator === "between" && newFilter.start === undefined && newFilter.end === undefined) {
+                            newState = { ...state, filters: currentActiveFilters.filter((f) => f.name !== newFilter.name) };
                         }
                         // Remove filter if no values are selected
-                        if (filter.operator !== "between" &&
-                            filter.filters === undefined &&
-                            filter.value === undefined &&
-                            filter.values === undefined) {
-                            newState = { ...state, filters: (allFilters || []).filter((f) => f?.name !== filter.name) };
+                        if (newFilter.operator !== "between" &&
+                            newFilter.filters === undefined &&
+                            newFilter.value === undefined &&
+                            newFilter.values === undefined) {
+                            newState = { ...state, filters: (currentActiveFilters || []).filter((f) => f?.name !== newFilter.name) };
                         }
                         // Update filter values
                         if (existing >= 0) {
-                            const filters = allFilters.toSpliced(existing, 1, filter);
+                            const filters = currentActiveFilters.toSpliced(existing, 1, newFilter);
                             newState = { ...state, filters };
                         }
                     }
@@ -1992,7 +2008,8 @@ function withQueryParamsFeatures() {
             let { name } = getState(store);
             if (!name) {
                 const routeData = route.snapshot.firstChild?.children[0]?.data;
-                name = routeData ? routeData["queryName"] : appStore.getDefaultQuery()?.name || "";
+                const queryName = routeData?.["queryName"];
+                name = queryName || appStore.getDefaultQuery()?.name || "";
             }
             let text = queryText;
             // remove concepts filters from the query to add them in the query expression
@@ -2811,6 +2828,7 @@ class QueryService {
     queryParamsStore = inject(QueryParamsStore);
     transloco = inject(TranslocoService);
     API_URL = `${globalConfig.backendUrl}/api/v1`;
+    API_V2_URL = `${globalConfig.backendUrl}/api/v2`;
     // Represents the last result of a search operation with getResult().
     result = signal({}, ...(ngDevMode ? [{ debugName: "result" }] : []));
     audit;
@@ -2968,6 +2986,34 @@ class QueryService {
         };
         this.queryParamsStore.patch({ page }, audit);
     }
+    /**
+       * Get the pages associated to some text locations.
+       *
+       * @param docs - all documents offsets we want to get the pages from.
+       * @returns An Observable that emits the found pages.
+       */
+    getDocPages(docs) {
+        const queryName = this.appStore.getDefaultQuery()?.name || "_default";
+        const appName = globalConfig.app;
+        return this.http.post(`${this.API_V2_URL}/app/${appName}/query/${queryName}/doc-pages`, { docs }).pipe(map(({ items }) => items), catchError(err => {
+            error('queryService.getDocPages failure - error: ', err);
+            return [];
+        }));
+    }
+    /**
+       * Get the page associated to a single text location.
+       *
+       * @param id - the document id.
+       * @param offset - offset from the passage location.
+       * @param length - length from the passage location.
+       * @returns An Observable that emits the found page.
+       */
+    getDocPage(id, offset, length) {
+        return this.getDocPages([{ id, textLocations: [{ offset, length }] }]).pipe(map((response) => response[0].pages[0].pageNumber), catchError(err => {
+            error('queryService.getDocPage failure - error: ', err);
+            return [];
+        }));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: QueryService, providedIn: "root" });
 }
@@ -3066,11 +3112,14 @@ class AggregationsService {
         const agg = this.getAggregation(name, column);
         if (!agg)
             return null;
-        const { items = [], display = agg.name, icon, hidden, searchable = true } = this.appStore.getAggregationCustomization(agg.column, agg.name) || {};
+        const { items = [], display = agg.name, icon, hidden, expandedLevel, searchable = true } = this.appStore.getAggregationCustomization(agg.column, agg.name) || {};
         agg.display = display;
         agg.icon = icon;
         agg.hidden = hidden;
         agg.searchable = searchable;
+        if (agg.isTree && expandedLevel) {
+            agg.expandedLevel = expandedLevel;
+        }
         // if the aggregation's column is a "concepts", disable the search
         if (this.nonSearchableColumns.some((column) => column === agg.column)) {
             agg.searchable = false;
@@ -3283,6 +3332,7 @@ function AuthGuard() {
         const { loginPath, useCredentials, useSSO } = globalConfig;
         if (state.url.startsWith("/login"))
             return true;
+        // If the user is not authenticated, navigate to the login page or loading page based on the authentication method
         if (!isAuthenticated() && !useSSO) {
             if (useCredentials) {
                 router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
@@ -3292,80 +3342,41 @@ function AuthGuard() {
             }
             return false;
         }
+        // If the user is authenticated, initialize the principal store if it's in the initial state
         try {
-            if (!principalStore.principal?.()) {
+            if (principalStore.state() === "initial") {
                 await principalStore.initialize();
             }
         }
         catch {
+            error("Failed to initialize PrincipalStore. Redirecting to login.");
+            // TODO: we might want to navigate to an error page instead of the login page in SSO mode, as the issue is not related to authentication but rather to fetching user details
             router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
             return false;
         }
-        const p = principalStore.principal?.();
-        if (!p) {
+        // check if the "princiapl" infos are loaded, if not navigate to the login page
+        const { passwordExpirationDate, editablePartition, name, state: principalState } = getState(principalStore);
+        if (principalState !== "loaded") {
+            info("PrincipalStore state is still initial after initialization attempt. Redirecting to login.");
             router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
             return false;
         }
-        const exp = p.passwordExpirationDate;
-        const editable = !!p.editablePartition;
-        if (editable && exp && isExpired(exp)) {
-            sessionStorage.setItem("passwordExpiredFlow", "true");
-            const username = (p.name || "").trim();
-            router.navigate(["/login"], {
-                queryParams: { mode: "changepassword", alert: "passwordExpired", username, returnUrl: state.url }
-            });
-            return false;
-        }
-        return true;
-    };
-}
-
-/**
- * Password-expiry guard: blocks navigation when the password is expired
- * and redirects to the change-password .
- */
-function PasswordExpiryGuard() {
-    return async (_, state) => {
-        const router = inject(Router);
-        const principalStore = inject(PrincipalStore);
-        const { loginPath, useCredentials, useSSO } = globalConfig;
-        if (!isAuthenticated() && !useSSO) {
-            if (useCredentials) {
-                router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
-            }
-            else {
-                router.navigate(["loading"], { queryParams: { returnUrl: state.url } });
-            }
-            return false;
-        }
-        try {
-            if (!principalStore.principal?.()) {
-                await principalStore.initialize();
+        // check if the password is expired and if the partition is editable
+        // changing password is only possible when user use credentials to auhtenticate
+        // only in credentials mode
+        if (useCredentials) {
+            const exp = passwordExpirationDate;
+            const editable = !!editablePartition;
+            if (editable && exp && isExpired(exp)) {
+                sessionStorage.setItem("passwordExpiredFlow", "true");
+                const username = (name || "").trim();
+                router.navigate(["/login"], {
+                    queryParams: { mode: "changepassword", alert: "passwordExpired", username, returnUrl: state.url }
+                });
+                return false;
             }
         }
-        catch {
-            router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
-            return false;
-        }
-        const p = principalStore.principal?.();
-        if (!p) {
-            router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
-            return false;
-        }
-        const exp = p.passwordExpirationDate;
-        const editable = !!p.editablePartition;
-        if (!editable || !exp) {
-            router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
-            return false;
-        }
-        if (isExpired(exp)) {
-            sessionStorage.setItem("passwordExpiredFlow", "true");
-            const username = (p.name || "").trim();
-            router.navigate(["/login"], {
-                queryParams: { mode: "changepassword", alert: "passwordExpired", username, returnUrl: state.url }
-            });
-            return false;
-        }
+        debug("User is authenticated and principal store is initialized. Access granted.");
         return true;
     };
 }
@@ -3547,7 +3558,7 @@ class ApplicationService {
         const searchPath = this.router.config.find((route) => route.path === "search") || {
             path: "search",
             component: this.components.find((c) => c.path === "search")?.component || this.defaultLayoutComponent(),
-            canActivate: [AuthGuard(), PasswordExpiryGuard()],
+            canActivate: [AuthGuard()],
             children: []
         };
         const wildcardPath = searchPath.children?.find((route) => route.path === "**") || {
@@ -4018,6 +4029,7 @@ class PreviewService {
     highlights = inject(HIGHLIGHTS);
     previewData;
     iframe;
+    passageOffset = signal(undefined, ...(ngDevMode ? [{ debugName: "passageOffset" }] : []));
     highlightCategory = "extractslocations";
     extracts = ["matchlocations", "extractslocations", "matchingpassages"];
     entities = ["company", "geo", "person"];
@@ -4135,11 +4147,12 @@ class PreviewService {
     }
     /**
      * Closes the preview with the specified ID and updates the audit log.
-     *
-     * @param id - The ID of the preview to close.
-     * @param query - The partial query object used to retrieve the preview detail.
-     */
+    *
+    * @param id - The ID of the preview to close.
+    * @param query - The partial query object used to retrieve the preview detail.
+    */
     close(id, query) {
+        this.passageOffset.set(undefined);
         const detail = this.getAuditPreviewDetail(id, query);
         const auditEvent = {
             type: "Preview_Close" /* AuditEventType.Preview_Close */,
@@ -4390,6 +4403,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }] });
 
+/**
+ * @deprecated This service is deprecated and should not be used directly. Please use the PrincipalStore instead.
+*/
+class PrincipalService {
+    http = inject(HttpClient);
+    API_URL = `${globalConfig.backendUrl}/api/v1`;
+    /**
+     * Retrieves the principal information from the server.
+     *
+     * @returns Observable<Principal> An observable that emits the principal information.
+     *
+     * @remarks
+     * This method sends a GET request to the API endpoint to fetch the principal data.
+     * It includes query parameters to specify the action and to indicate that no authentication is required.
+     * In case of an error, it logs the error to the console and returns an empty observable.
+     *
+     * @example
+     * ```typescript
+     * principalService.getPrincipal().subscribe(principal => {
+     *   console.log(principal);
+     * });
+     * ```
+     */
+    getPrincipal() {
+        const params = new HttpParams().set('action', 'get');
+        params.append('noAuthentication', 'true');
+        return this.http.get(this.API_URL + '/principal', { params }).pipe(catchError(error => {
+            console.error('PrincipalService.getPrincipal failure - error: ', error);
+            return EMPTY;
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PrincipalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PrincipalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PrincipalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 const SAVED_SEARCHES_MAX_STORAGE = 100;
 class SavedSearchesService {
     userSettingsStore = inject(UserSettingsStore);
@@ -5271,7 +5325,7 @@ class LoadingComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoadingComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LoadingComponent, isStandalone: true, selector: "app-wait", ngImport: i0, template: `
-    <div class="flex h-[100dvh] w-full items-center justify-center">
+    <div class="flex h-dvh w-full items-center justify-center">
       <div class="flex flex-col items-center space-y-4">
         <span class="loader"></span>
       </div>
@@ -5281,7 +5335,7 @@ class LoadingComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-wait', standalone: true, imports: [], template: `
-    <div class="flex h-[100dvh] w-full items-center justify-center">
+    <div class="flex h-dvh w-full items-center justify-center">
       <div class="flex flex-col items-center space-y-4">
         <span class="loader"></span>
       </div>
@@ -5522,7 +5576,7 @@ class CollectionsDialog {
         </DialogFooter>
       </DialogContent>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CollectionsDialog, decorators: [{
             type: Component,
@@ -5730,7 +5784,7 @@ class ExportDialog {
     destroyRef = inject(DestroyRef);
     open(selection) {
         const app = getState(this.appStore);
-        const webservice = app.queryExport;
+        const webservice = app.queryExport.toLocaleLowerCase();
         let queryExport;
         if (selection && selection.length > 0)
             this.selection.set(selection);
@@ -7339,7 +7393,7 @@ class PreviewNavigator {
       [disabled]="isLast()">
       <chevrons-right />
     </button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: ChevronLeftIconComponent, selector: "chevron-left, ChevronLeft, chevronleft", inputs: ["class"] }, { kind: "component", type: ChevronsLeftIconComponent, selector: "chevrons-left, ChevronsLeft, chevronsleft", inputs: ["class"] }, { kind: "component", type: ChevronsRightIconComponent, selector: "chevrons-right, ChevronsRight, chevronsright", inputs: ["class"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: ChevronLeftIconComponent, selector: "chevron-left, ChevronLeft, chevronleft", inputs: ["class"] }, { kind: "component", type: ChevronsLeftIconComponent, selector: "chevrons-left, ChevronsLeft, chevronsleft", inputs: ["class"] }, { kind: "component", type: ChevronsRightIconComponent, selector: "chevrons-right, ChevronsRight, chevronsright", inputs: ["class"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewNavigator, decorators: [{
             type: Component,
@@ -8023,7 +8077,7 @@ class AdvancedFiltersComponent {
         return res;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdvancedFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AdvancedFiltersComponent, isStandalone: true, selector: "advanced-filters", host: { classAttribute: "contents" }, providers: [SyslangPipe, TranslocoPipe, provideTranslocoScope("drawers")], ngImport: i0, template: "<div class=\"flex h-full flex-col overflow-auto\">\n  <sheet-navbar class=\"border-foreground/10 block border-b pb-2\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </sheet-navbar>\n\n  <div class=\"flex h-full grow flex-col overflow-auto p-4\">\n    <section class=\"flex flex-col gap-4\" [formGroup]=\"form\">\n      <!-- FIND IN -->\n      <h1 class=\"text-xl font-bold\">{{ 'drawers.findInContent' | transloco }}</h1>\n      <div class=\"flex items-center gap-4\" formGroupName=\"content\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInContent' | transloco }}</span>\n        <select\n          id=\"content-operator\"\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n          formControlName=\"operator\">\n          @for (data of selectData; track $index) {\n            <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n          }\n        </select>\n        <input\n          [variant]=\"inputVariant()\"\n          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\n      @if (enableFieldedSearch()) {\n        <div class=\"flex items-center gap-4\" formGroupName=\"title\">\n          <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInTitle' | transloco }}</span>\n          <select\n            id=\"title-operator\"\n            class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n            formControlName=\"operator\">\n            @for (data of selectData; track $index) {\n              <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n            }\n          </select>\n          <input id=\"title-value\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [placeholder]=\"getPlaceholder('title.operator')\" formControlName=\"value\" />\n        </div>\n      }\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n\n      <Tabs>\n        <TabsList variant=\"ghost\">\n          @for (tab of tabs(); track $index) {\n            <Tab class=\"w-fit\" [value]=\"tab.path\" [active]=\"tab.path === currentTab()\" (click)=\"onTabChange(tab.path)\">\n              {{ tab.display | syslang | transloco }}\n            </Tab>\n          }\n        </TabsList>\n      </Tabs>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        <DropdownInput\n          [suggestions]=\"suggestions()\"\n          [selected]=\"getItems(filter.column)\"\n          [label]=\"filter.display || filter.alias | syslang | transloco\"\n          [placeholder]=\"'drawers.startTyping' | transloco\"\n          [noResultLabel]=\"'drawers.noResult' | transloco\"\n          (onFocus)=\"setFilterFocus($event, filter)\"\n          (onKeyUp)=\"onInputTyping($event)\"\n          (removeItem)=\"removeItem($event, filter)\"\n          (addItem)=\"addItem($event, filter)\" />\n      } @empty {\n        {{ 'drawers.noFilters' | transloco }}\n      }\n    </section>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: DropdownInputComponent, selector: "dropdown-input, DropdownInput", inputs: ["label", "placeholder", "noResultLabel", "suggestions", "selected"], outputs: ["onFocus", "onKeyUp", "removeItem", "addItem"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "component", type: SheetNavbarComponent, selector: "SheetNavbar, sheetnavbar, sheet-navbar" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AdvancedFiltersComponent, isStandalone: true, selector: "advanced-filters", host: { classAttribute: "contents" }, providers: [SyslangPipe, TranslocoPipe, provideTranslocoScope("drawers")], ngImport: i0, template: "<div class=\"flex h-full flex-col overflow-auto\">\n  <sheet-navbar class=\"border-foreground/10 block border-b pb-2\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </sheet-navbar>\n\n  <div class=\"flex h-full grow flex-col overflow-auto p-4\">\n    <section class=\"flex flex-col gap-4\" [formGroup]=\"form\">\n      <!-- FIND IN -->\n      <h1 class=\"text-xl font-bold\">{{ 'drawers.findInContent' | transloco }}</h1>\n      <div class=\"flex items-center gap-4\" formGroupName=\"content\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInContent' | transloco }}</span>\n        <select\n          id=\"content-operator\"\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n          formControlName=\"operator\">\n          @for (data of selectData; track $index) {\n            <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n          }\n        </select>\n        <input\n          [variant]=\"inputVariant()\"\n          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\n      @if (enableFieldedSearch()) {\n        <div class=\"flex items-center gap-4\" formGroupName=\"title\">\n          <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInTitle' | transloco }}</span>\n          <select\n            id=\"title-operator\"\n            class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n            formControlName=\"operator\">\n            @for (data of selectData; track $index) {\n              <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n            }\n          </select>\n          <input id=\"title-value\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [placeholder]=\"getPlaceholder('title.operator')\" formControlName=\"value\" />\n        </div>\n      }\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n\n      <Tabs>\n        <TabsList variant=\"ghost\">\n          @for (tab of tabs(); track $index) {\n            <Tab class=\"w-fit\" [value]=\"tab.path\" [active]=\"tab.path === currentTab()\" (click)=\"onTabChange(tab.path)\">\n              {{ tab.display | syslang | transloco }}\n            </Tab>\n          }\n        </TabsList>\n      </Tabs>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        <DropdownInput\n          [suggestions]=\"suggestions()\"\n          [selected]=\"getItems(filter.column)\"\n          [label]=\"filter.display || filter.alias | syslang | transloco\"\n          [placeholder]=\"'drawers.startTyping' | transloco\"\n          [noResultLabel]=\"'drawers.noResult' | transloco\"\n          (onFocus)=\"setFilterFocus($event, filter)\"\n          (onKeyUp)=\"onInputTyping($event)\"\n          (removeItem)=\"removeItem($event, filter)\"\n          (addItem)=\"addItem($event, filter)\" />\n      } @empty {\n        {{ 'drawers.noFilters' | transloco }}\n      }\n    </section>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: DropdownInputComponent, selector: "dropdown-input, DropdownInput", inputs: ["label", "placeholder", "noResultLabel", "suggestions", "selected"], outputs: ["onFocus", "onKeyUp", "removeItem", "addItem"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "component", type: SheetNavbarComponent, selector: "SheetNavbar, sheetnavbar, sheet-navbar" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdvancedFiltersComponent, decorators: [{
             type: Component,
@@ -8043,57 +8097,777 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     }, template: "<div class=\"flex h-full flex-col overflow-auto\">\n  <sheet-navbar class=\"border-foreground/10 block border-b pb-2\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </sheet-navbar>\n\n  <div class=\"flex h-full grow flex-col overflow-auto p-4\">\n    <section class=\"flex flex-col gap-4\" [formGroup]=\"form\">\n      <!-- FIND IN -->\n      <h1 class=\"text-xl font-bold\">{{ 'drawers.findInContent' | transloco }}</h1>\n      <div class=\"flex items-center gap-4\" formGroupName=\"content\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInContent' | transloco }}</span>\n        <select\n          id=\"content-operator\"\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n          formControlName=\"operator\">\n          @for (data of selectData; track $index) {\n            <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n          }\n        </select>\n        <input\n          [variant]=\"inputVariant()\"\n          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\n      @if (enableFieldedSearch()) {\n        <div class=\"flex items-center gap-4\" formGroupName=\"title\">\n          <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInTitle' | transloco }}</span>\n          <select\n            id=\"title-operator\"\n            class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n            formControlName=\"operator\">\n            @for (data of selectData; track $index) {\n              <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n            }\n          </select>\n          <input id=\"title-value\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [placeholder]=\"getPlaceholder('title.operator')\" formControlName=\"value\" />\n        </div>\n      }\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n\n      <Tabs>\n        <TabsList variant=\"ghost\">\n          @for (tab of tabs(); track $index) {\n            <Tab class=\"w-fit\" [value]=\"tab.path\" [active]=\"tab.path === currentTab()\" (click)=\"onTabChange(tab.path)\">\n              {{ tab.display | syslang | transloco }}\n            </Tab>\n          }\n        </TabsList>\n      </Tabs>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        <DropdownInput\n          [suggestions]=\"suggestions()\"\n          [selected]=\"getItems(filter.column)\"\n          [label]=\"filter.display || filter.alias | syslang | transloco\"\n          [placeholder]=\"'drawers.startTyping' | transloco\"\n          [noResultLabel]=\"'drawers.noResult' | transloco\"\n          (onFocus)=\"setFilterFocus($event, filter)\"\n          (onKeyUp)=\"onInputTyping($event)\"\n          (removeItem)=\"removeItem($event, filter)\"\n          (addItem)=\"addItem($event, filter)\" />\n      } @empty {\n        {{ 'drawers.noFilters' | transloco }}\n      }\n    </section>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
-class ArticleEntities {
+/**
+ * Injection token that indicates whether custom date ranges are allowed.
+ *
+ * @remarks
+ * This token is used to configure the date component to allow users to select custom date ranges.
+ *
+ * @example
+ * ```typescript
+ * providers: [
+ *   { provide: FILTER_DATE_ALLOW_CUSTOM_RANGE, useValue: false }
+ * ]
+ * ```
+ *
+ * @public
+ */
+const FILTER_DATE_ALLOW_CUSTOM_RANGE = new InjectionToken("date allow custom range", {
+    factory: () => true
+});
+
+class AggregationListItemComponent {
     cn = cn;
-    appStore = inject(AppStore);
-    previewService = inject(PreviewService);
-    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
-    previewHighlights = computed(() => {
-        const highlights = this.appStore.getWebServiceByType("preview")?.highlights
-            ?.split(",")
-            .filter((h) => h !== "extractslocations" && h !== "matchlocations" && h !== "matchingpassages");
-        return highlights?.map((highlight) => ({
-            name: highlight,
-            entity: highlight,
-            metadata: this.getMetadata(this.article(), highlight)
-        }));
-    }, ...(ngDevMode ? [{ debugName: "previewHighlights" }] : []));
-    getMetadata(article, entity) {
-        const m = article[entity];
-        return m ?? [];
+    get disabled() {
+        return this.node().count === 0 ? "disabled" : null;
     }
-    navigation = signal(undefined, ...(ngDevMode ? [{ debugName: "navigation" }] : []));
-    hovering = signal(undefined, ...(ngDevMode ? [{ debugName: "hovering" }] : []));
-    hoverIndex = computed(() => this.navigation()?.value === this.hovering() ? (this.navigation()?.index ?? 0) : 0, ...(ngDevMode ? [{ debugName: "hoverIndex" }] : []));
-    scrollTo(type, index, usePassageHighlighter = false) {
-        // if previewData contains "matchingpassages" then we use the passage highlighter otherwise we use "extractslocations"
-        const category = type || this.previewService.highlightCategory;
-        this.previewService.events.set("scrollTo");
-        this.previewService.sendMessage({ action: "select", id: `${category}_${index}`, usePassageHighlighter });
+    onSelect = output();
+    onOpen = output();
+    onFilter = output();
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
+    field = input(...(ngDevMode ? [undefined, { debugName: "field" }] : []));
+    appStore = inject(AppStore);
+    queryParamsStore = inject(QueryParamsStore);
+    searchText = inject(AggregationListComponent).searchText;
+    // is the count of items displayed, default to false
+    showCount = computed(() => this.appStore.general()?.features?.showAggregationItemCount ?? false, ...(ngDevMode ? [{ debugName: "showCount" }] : []));
+    quickFilter = computed(() => this.appStore.general()?.features?.quickFilter, ...(ngDevMode ? [{ debugName: "quickFilter" }] : []));
+    linkChildren = computed(() => this.appStore.general()?.features?.filterLinkChildren, ...(ngDevMode ? [{ debugName: "linkChildren" }] : []));
+    isFiltered = computed(() => {
+        const filters = this.queryParamsStore.getFilter({ field: this.field(), name: this.name() });
+        if (!filters)
+            return false;
+        const values = [this.node().value]; // to also consider the treepath value
+        return (values.some((v) => v === filters.value) ||
+            (filters.values?.length && filters.values.some((value) => values.some((v) => v === value))));
+    }, ...(ngDevMode ? [{ debugName: "isFiltered" }] : []));
+    name = computed(() => {
+        const value = this.node().display || this.node().value;
+        return typeof value === "string" ? value : `${value}`;
+    }, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    select(item, e) {
+        e?.stopImmediatePropagation();
+        const selected = !item.$selected;
+        item.$selected = selected;
+        this.onSelect.emit(item);
     }
-    navigate(entity, data, direction) {
-        if (!data.count || data.count <= 0) {
-            warn(`Invalid count for entity ${entity}:`, data.count);
-            return;
-        }
-        const currentNavigation = this.navigation();
-        const isCurrentValue = currentNavigation?.value === data.value;
-        let newIndex;
-        if (direction === "next") {
-            newIndex = isCurrentValue && currentNavigation.index < data.count ? currentNavigation.index + 1 : 1;
-        }
-        else {
-            newIndex = isCurrentValue && currentNavigation.index > 1 ? currentNavigation.index - 1 : data.count;
+    onTextClick(event) {
+        if (this.quickFilter()) {
+            this.select(this.node(), event);
+            this.onFilter.emit();
         }
-        this.navigation.set({
-            value: data.value,
-            index: newIndex
-        });
-        const id = this.previewService.getEntityId(entity, data.value, newIndex - 1);
-        if (id !== undefined) {
-            this.scrollTo(entity, id);
-            debug(`${direction} navigation:`, {
-                id,
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AggregationListItemComponent, isStandalone: true, selector: "aggregation-list-item, AggregationListItem, aggregationlistitem", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onOpen: "onOpen", onFilter: "onFilter" }, host: { properties: { "attr.disabled": "this.disabled" } }, ngImport: i0, template: "<a\r\n  role=\"listitem\"\r\n  [attr.aria-selected]=\"node().$selected\"\r\n  [attr.aria-label]=\"name() | syslang\"\r\n  [class]=\"\r\n    cn(\r\n      'flex grow items-center gap-2 p-1 leading-7',\r\n      node().count === 0 && 'disabled pointer-events-none text-neutral-300',\r\n      node().$selected &&\r\n        'bg-primary-100 text-primary dark:text-primary-foreground'\r\n    )\r\n  \"\r\n  (click)=\"select(node(), $event)\">\r\n  <input\r\n    type=\"checkbox\"\r\n    role=\"checkbox\"\r\n    value=\"{{ node().value }}\"\r\n    [attr.disabled]=\"node().count === 0 ? true : null\"\r\n    [attr.aria-disabled]=\"node().count === 0\"\r\n    (keydown.enter)=\"select(node(), $event)\"\r\n    [checked]=\"node().$selected\" />\r\n\r\n  @if (node().icon) {\r\n    <i\r\n      class=\"fa-fw {{ node().icon }} self-center justify-self-center\"\r\n      aria-hidden=\"true\"></i>\r\n  }\r\n  <span\r\n    [class]=\"\r\n      cn(\r\n        'line-clamp-1 break-all text-ellipsis',\r\n        quickFilter() && 'hover:underline'\r\n      )\r\n    \"\r\n    [title]=\"\r\n      quickFilter()\r\n        ? ((isFiltered() ? 'filters.removeFilter' : 'filters.addFilter')\r\n            | transloco) +\r\n          ': ' +\r\n          (name() | syslang)\r\n        : (name() | syslang)\r\n    \"\r\n    (click)=\"onTextClick($event)\">\r\n    @for (\r\n      chunk of (name() | syslang) ?? \"\" | highlightWord: searchText() : 10;\r\n      track $index\r\n    ) {\r\n      <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\r\n        chunk.text\r\n      }}</span>\r\n    }\r\n  </span>\r\n  @if (showCount() && node().count > 0) {\r\n    <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\r\n      node().count\r\n    }}</span>\r\n  }\r\n</a>\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host a{padding-left:var(--agg-tree-indent, .5rem)}a{line-height:var(--agg-item-height, inherit)}\n"], dependencies: [{ kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: HighlightWordPipe, name: "highlightWord" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationListItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "aggregation-list-item, AggregationListItem, aggregationlistitem", standalone: true, imports: [HighlightWordPipe, ListItemComponent, SyslangPipe, TranslocoPipe], template: "<a\r\n  role=\"listitem\"\r\n  [attr.aria-selected]=\"node().$selected\"\r\n  [attr.aria-label]=\"name() | syslang\"\r\n  [class]=\"\r\n    cn(\r\n      'flex grow items-center gap-2 p-1 leading-7',\r\n      node().count === 0 && 'disabled pointer-events-none text-neutral-300',\r\n      node().$selected &&\r\n        'bg-primary-100 text-primary dark:text-primary-foreground'\r\n    )\r\n  \"\r\n  (click)=\"select(node(), $event)\">\r\n  <input\r\n    type=\"checkbox\"\r\n    role=\"checkbox\"\r\n    value=\"{{ node().value }}\"\r\n    [attr.disabled]=\"node().count === 0 ? true : null\"\r\n    [attr.aria-disabled]=\"node().count === 0\"\r\n    (keydown.enter)=\"select(node(), $event)\"\r\n    [checked]=\"node().$selected\" />\r\n\r\n  @if (node().icon) {\r\n    <i\r\n      class=\"fa-fw {{ node().icon }} self-center justify-self-center\"\r\n      aria-hidden=\"true\"></i>\r\n  }\r\n  <span\r\n    [class]=\"\r\n      cn(\r\n        'line-clamp-1 break-all text-ellipsis',\r\n        quickFilter() && 'hover:underline'\r\n      )\r\n    \"\r\n    [title]=\"\r\n      quickFilter()\r\n        ? ((isFiltered() ? 'filters.removeFilter' : 'filters.addFilter')\r\n            | transloco) +\r\n          ': ' +\r\n          (name() | syslang)\r\n        : (name() | syslang)\r\n    \"\r\n    (click)=\"onTextClick($event)\">\r\n    @for (\r\n      chunk of (name() | syslang) ?? \"\" | highlightWord: searchText() : 10;\r\n      track $index\r\n    ) {\r\n      <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\r\n        chunk.text\r\n      }}</span>\r\n    }\r\n  </span>\r\n  @if (showCount() && node().count > 0) {\r\n    <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\r\n      node().count\r\n    }}</span>\r\n  }\r\n</a>\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host a{padding-left:var(--agg-tree-indent, .5rem)}a{line-height:var(--agg-item-height, inherit)}\n"] }]
+        }], propDecorators: { disabled: [{
+                type: HostBinding,
+                args: ["attr.disabled"]
+            }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }] } });
+
+class AggregationListComponent {
+    cn = cn;
+    cdr = inject(ChangeDetectorRef);
+    /* virtualizer */
+    scrollElement = viewChild("scrollElement", ...(ngDevMode ? [{ debugName: "scrollElement" }] : []));
+    virtualizer = injectVirtualizer(() => ({
+        count: this.items().length,
+        estimateSize: () => 32,
+        scrollElement: this.scrollElement()
+    }));
+    searchInput = viewChild("searchInput", ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
+    /* stores */
+    aggregationsStore = inject(AggregationsStore);
+    queryParamsStore = inject(QueryParamsStore);
+    appStore = inject(AppStore);
+    /* services */
+    aggregationsService = inject(AggregationsService);
+    el = inject(ElementRef);
+    injector = inject(Injector);
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    /**
+     * The name of the <details> element. When you provide the same id, the component work as an accordion
+     * @defaultValue null
+     */
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    onSelect = output();
+    /**
+     * Determines whether the aggregation component can be collapsed or expanded.
+     * When true, the component will display collapse/expand controls allowing users
+     * to show or hide the aggregation content.
+     *
+     * @default false
+     */
+    collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+    /**
+     * Controls whether the aggregation component is in a collapsed state.
+     * When true, the component will be visually collapsed/hidden.
+     * When false, the component will be expanded/visible.
+     *
+     * @default false
+     */
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    /**
+     * A computed signal that tracks the collapsed state of the component.
+     * This signal is linked to the `collapsed()` signal and automatically updates
+     * when the collapsed state changes.
+     */
+    isCollapsed = linkedSignal(() => this.collapsed(), ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
+    /**
+     * Computed property that returns an empty string when the component is not collapsed,
+     * or null when the component is collapsed. This is typically used to control
+     * expansion state in UI components with conditional rendering or styling.
+     *
+     * @returns empty string if not collapsed, null if collapsed
+     */
+    expanded = computed(() => (this.isCollapsed() ? null : ""), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    /**
+     * A boolean flag indicating whether the component is searchable.
+     * This property is initialized to `undefined` by default.
+     * "Undefined" and not "false" because this input overrides the custom json settings
+     */
+    searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    selection = signal(false, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    /**
+     * A boolean flag indicating whether we want to see the filters count when some is applied
+     * This property is initialized to `false` by default.
+     */
+    showFiltersCount = input(null, ...(ngDevMode ? [{ debugName: "showFiltersCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /* aggregation */
+    aggregation = computed(() => {
+        // when the aggegation store updates, we need to check if the aggregation is still valid
+        getState(this.aggregationsStore);
+        const name = this.name();
+        const column = this.column();
+        if (name !== null) {
+            const agg = this.aggregationsService.processAggregation(name, column);
+            if (agg) {
+                if (agg.isTree) {
+                    error("The aggregation component does not support tree aggregations. Please use the <AggregationTree /> component instead.");
+                }
+                // overrides "searchable" properties with the input if any
+                agg.searchable = this.searchable() ?? agg.searchable;
+                return agg;
+            }
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "aggregation" }] : []));
+    /* items of the aggregation */
+    items = computed(() => {
+        // when the aggegation store updates, we need to check if the aggregation is still valid
+        getState(this.aggregationsStore);
+        const agg = this.aggregation();
+        const searchedItems = this.searchedItems();
+        if (searchedItems.length > 0) {
+            return searchedItems;
+        }
+        else if (agg?.items) {
+            const res = this.addCurrentFiltersToItems();
+            return res;
+        }
+        return [];
+    }, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /**
+     * Computed signal that determines whether the items collection is empty.
+     * @returns True if the items array has no elements, false otherwise.
+     */
+    isEmpty = computed(() => this.items().length === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
+    /**
+     * A computed property that determines whether there are active filters
+     * for the current aggregation column.
+     *
+     * if True, the clear button is shown.
+     *
+     * @returns {boolean} `true` if the filter count for the aggregation column is greater than 0, otherwise `false`.
+     */
+    hasFilters = computed(() => {
+        const { count = 0 } = this.queryParamsStore.getFilter({ field: this.aggregation()?.column, name: this.aggregation()?.name }) || {};
+        return count > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasFilters" }] : []));
+    /**
+     * A computed property that returns the number of items of this aggregation applied in the active filters
+     *
+     * if more than 0 and the showCount input is set as True, the count number is shown.
+     *
+     * @returns {number} the filters count.
+     */
+    filtersCount = computed(() => {
+        const { count = 0 } = this.queryParamsStore.getFilter({ field: this.aggregation()?.column, name: this.aggregation()?.name }) || {};
+        return count;
+    }, ...(ngDevMode ? [{ debugName: "filtersCount" }] : []));
+    isAllSelected = signal(false, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
+    /* search feature */
+    searchText = model("", ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+    debouncedSearchText = debouncedSignal(this.searchText, 300);
+    normalizedSearchText = computed(() => this.debouncedSearchText()
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, ""), ...(ngDevMode ? [{ debugName: "normalizedSearchText" }] : []));
+    /* suggestions */
+    suggests = signal([], ...(ngDevMode ? [{ debugName: "suggests" }] : []));
+    /* searched items */
+    searchedItems = computed(() => {
+        if (!this.suggests())
+            return [];
+        // if the aggregation is not a tree, we return the suggestions as is
+        return this.suggests()?.map(suggest => {
+            const column = this.appStore.getColumn(suggest.category);
+            const item = {
+                name: this.name(),
+                value: suggest.normalized || suggest.display || "",
+                display: suggest.display,
+                column: column?.name ?? suggest.category,
+                count: Number(suggest.frequency),
+                $selected: false
+            };
+            // if the column is of type boolean, we need to convert the value to a boolean
+            if (column?.eType === EngineType.bool) {
+                item.value = Boolean(item.value);
+            }
+            return item;
+        });
+    }, ...(ngDevMode ? [{ debugName: "searchedItems" }] : []));
+    query;
+    filters = signal([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    constructor() {
+        this.query = buildQuery();
+        effect(() => {
+            // focus the search input when expanded
+            if (this.searchInput()?.nativeElement && this.expanded() !== null) {
+                setTimeout(() => {
+                    this.searchInput()?.nativeElement.focus();
+                }, 0);
+            }
+        });
+        effect(async () => {
+            if (this.debouncedSearchText() === "" || this.aggregation() === null) {
+                this.suggests.set([]);
+                return;
+            }
+            const suggests = (await withFetch(() => fetchSuggestField(this.normalizedSearchText(), [this.aggregation()?.column || ""]), this.injector)) || [];
+            this.suggests.set(suggests);
+        });
+    }
+    /**
+     * Clears the current filter for the aggregation column.
+     *
+     * This method updates the filter in the `queryParamsStore` by setting the display value
+     * of the current aggregation column to an empty string.
+     */
+    clear() {
+        const agg = this.aggregation();
+        if (agg) {
+            this.queryParamsStore.removeFilterByName(agg.name, agg.column);
+            this.selection.set(false);
+            this.isAllSelected.set(false);
+        }
+        this.onSelect.emit([]);
+    }
+    /**
+     * Select all filters for the aggregation column.
+     */
+    selectAll() {
+        if (this.items().length) {
+            this.selectItems(this.items(), true);
+            this.selection.set(true);
+            this.isAllSelected.set(true);
+        }
+    }
+    /**
+     * Unselect all filters for the aggregation column.
+     */
+    unselectAll() {
+        if (this.items().length) {
+            this.selectItems(this.items(), false);
+            this.selection.set(true);
+            this.isAllSelected.set(false);
+        }
+    }
+    /**
+     * Applies the current filters to the query parameters store.
+     *
+     * - If there are multiple filters, they are wrapped in an "or" filter.
+     * - If the aggregation is not a distribution, the filters are merged into a single filter with an "in" operator.
+     * - If there is only one filter, it is directly applied.
+     * - If there are no filters, the current filters are cleared.
+     *
+     * After applying the filters, the search text is reset.
+     */
+    apply() {
+        const filters = this.getFilters();
+        const agg = this.aggregation();
+        if (!agg)
+            return;
+        const { name, column: field } = agg;
+        // if filters length > 1, we need to wrap them in an "or" filter
+        if (filters.length > 1) {
+            const display = filters[0].display;
+            // if aggregation not a distribution, we need to merge the filters into a single filter with an in operator
+            // with the values of the filters
+            if (this.aggregation()?.isDistribution) {
+                this.queryParamsStore.updateFilter({
+                    operator: "or",
+                    filters,
+                    name,
+                    field,
+                    display
+                });
+            }
+            else {
+                const values = filters.map(filter => filter.value);
+                this.queryParamsStore.updateFilter({
+                    operator: "in",
+                    name,
+                    field,
+                    values,
+                    display,
+                    filters
+                });
+            }
+        }
+        else if (filters.length === 1) {
+            this.queryParamsStore.updateFilter(filters[0]);
+        }
+        else {
+            this.clear();
+        }
+        this.searchText.set("");
+        this.selection.set(false);
+    }
+    loadMore() {
+        const q = this.queryParamsStore.getQuery();
+        this.aggregationsService.loadMore(q, this.aggregation()).subscribe(aggregation => {
+            this.aggregationsStore.updateAggregation(aggregation);
+            this.cdr.detectChanges();
+        });
+    }
+    /**
+     * Updates the selected state of the given item in the aggregation list.
+     *
+     * @param item - The item to be selected or deselected.
+     *
+     * This method iterates through the items in the aggregation list and updates
+     * the `$selected` property of the item that matches the value of the given item.
+     *
+     * If the item is selected, the selection count is incremented by 1.
+     * If the item is deselected, the selection count is decremented by 1.
+     */
+    select() {
+        this.onSelect.emit(this.items().filter(item => item.$selected));
+        this.selection.set(true);
+    }
+    /**
+     * Updates the collapsed status on header click if the component is collapsible.
+     */
+    onHeaderClick(event) {
+        event.preventDefault();
+        const isDate = this.aggregationsService.appStore.isDateColumn(this.aggregation()?.column || "");
+        // prevent header click if no items are present
+        if (!isDate && this.isEmpty()) {
+            return;
+        }
+        if (this.collapsible()) {
+            this.isCollapsed.update(value => !value);
+        }
+    }
+    /**
+     * Retrieves a list of filters based on the selected items.
+     *
+     * This method filters the items to include only those that are selected,
+     * and then maps each selected item to a filter using the `toFilter` method.
+     *
+     * @returns {LegacyFilter[]} An array of filters corresponding to the selected items.
+     */
+    getFilters() {
+        const items = this.addCurrentFiltersToItems().filter(item => item.$selected);
+        const searchedItems = this.searchedItems().filter(item => item.$selected);
+        const currentItems = [...items, ...searchedItems];
+        const { column, name, isDistribution = false } = this.aggregation() || {};
+        const selectedItems = currentItems.map(item => this.aggregationsService.toFilter(item, column, name, isDistribution));
+        return selectedItems;
+    }
+    addCurrentFiltersToItems() {
+        const aggItems = (this.aggregation()?.items) || [];
+        // add the current filters to the current items only if they are not already present
+        if (!this.aggregation()?.isTree && (!this.aggregation()?.isDistribution || this.aggregation()?.isDistribution === false)) {
+            // get all active filters for the current aggregation/column
+            const activeFilters = this.queryParamsStore.getFilter({
+                field: this.aggregation()?.column,
+                name: this.aggregation()?.name
+            });
+            // if there are active filters, we need to add them to the current items
+            if (activeFilters) {
+                // multiples filters
+                if (activeFilters.filters) {
+                    activeFilters.filters.forEach((filter) => {
+                        // check if the filter is already present in the current items
+                        // if not, add it to the current items
+                        const found = aggItems.find(item => item.value && item.value.toLocaleString().toLocaleLowerCase() === filter.value?.toLocaleLowerCase());
+                        if (!found) {
+                            // add it to the current items
+                            aggItems.unshift({
+                                value: filter.value,
+                                display: filter.display,
+                                $selected: true
+                            });
+                        }
+                    });
+                }
+                else {
+                    // single filter
+                    const found = aggItems.find(item => item.value?.toString().toLocaleLowerCase() === activeFilters.value?.toLocaleLowerCase());
+                    if (!found) {
+                        // add it to the current items
+                        aggItems.push({
+                            value: activeFilters.value,
+                            display: activeFilters.display,
+                            $selected: true
+                        });
+                    }
+                }
+            }
+        }
+        return aggItems;
+    }
+    /**
+     * Update the $selected property to the selected parameter to all items
+     *
+     * @param items the items to apply to
+     * @param selected the selected status
+     */
+    selectItems(items, selected) {
+        items.forEach(item => {
+            // don't select disabled items
+            if (item.count > 0) {
+                item.$selected = selected;
+            }
+        });
+    }
+    onToggle(event) {
+        const e = event;
+        this.isCollapsed.set(e.newState === "closed");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AggregationListComponent, isStandalone: true, selector: "AggregationList, aggregation-list, aggregationlist", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\",class())" } }, viewQueries: [{ propertyName: "scrollElement", first: true, predicate: ["scrollElement"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <i class=\"fa-fw fas fa-triangle-exclamation mr-1\"></i>\r\n    The aggregation component no longer supports tree aggregations. Please use\r\n    the &lt;AggregationTree /&gt; component instead.\r\n  </div>\r\n}\r\n<details\r\n  [attr.open]=\"expanded()\"\r\n  [attr.name]=\"id()\"\r\n  class=\"group space-y-2\"\r\n  (toggle)=\"onToggle($event)\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\r\n    [class.text-muted-foreground]=\"isEmpty()\"\r\n    class=\"m-0 mt-1 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"grow truncate\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (showFiltersCount() && filtersCount() > 0) {\r\n      <!-- count -->\r\n      <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    <!-- apply filter block -->\r\n    @if (!isCollapsed()) {\r\n      <ButtonGroup>\r\n        @if (hasFilters()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.clearFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); clear()\">\r\n            <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.clearFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n        @if (selection()) {\r\n          <button\r\n            variant=\"primary\"\r\n            size=\"xs\"\r\n            [attr.title]=\"'filters.applyFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); apply()\"\r\n            class=\"h-4 px-1\">\r\n            <FilterIcon class=\"size-4\" />\r\n            {{ \"filters.apply\" | transloco }}\r\n          </button>\r\n        }\r\n\r\n        <!-- select / unselect all -->\r\n        @if (isAllSelected()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.unselectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); unselectAll()\">\r\n            <i class=\"fa-fw far fa-check-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.unselectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        } @else {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.selectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.selectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); selectAll()\">\r\n            <i class=\"fa-fw far fa-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.selectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n      </ButtonGroup>\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\r\n      </button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  @if (aggregation()?.searchable && items().length) {\r\n    <InputGroup class=\"group/item mt-1\">\r\n      <input\r\n        #searchInput\r\n        input-group\r\n        id=\"aggregation-input-{{ column() }}\"\r\n        type=\"text\"\r\n        [attr.placeholder]=\"'search' | transloco\"\r\n        [(ngModel)]=\"searchText\"\r\n        class=\"mt-1\" />\r\n      <InputGroupAddon>\r\n        <SearchIcon\r\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  }\r\n\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"list\"\r\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\r\n      @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\r\n        @let item = items()[vItem.index];\r\n        <div\r\n          class=\"absolute w-full\"\r\n          [style.transform]=\"'translateY(' + vItem.start + 'px)'\"\r\n          role=\"listitem\">\r\n          <AggregationListItem\r\n            [node]=\"item\"\r\n            [field]=\"aggregation()?.column\"\r\n            (onSelect)=\"select()\"\r\n            (onFilter)=\"apply()\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\r\n    <button\r\n      variant=\"link\"\r\n      class=\"mt-1 flex w-full justify-center\"\r\n      [attr.aria-label]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore()\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n</details>\r\n", styles: ["AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, 0)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: AggregationListItemComponent, selector: "aggregation-list-item, AggregationListItem, aggregationlistitem", inputs: ["node", "field"], outputs: ["onSelect", "onOpen", "onFilter"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "directive", type: ButtonGroup, selector: "button-group, ButtonGroup", inputs: ["class", "orientation"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "AggregationList, aggregation-list, aggregationlist", imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        ButtonComponent,
+                        AggregationListItemComponent,
+                        SyslangPipe,
+                        TranslocoPipe,
+                        BadgeComponent,
+                        ChevronRightIcon,
+                        ButtonGroup,
+                        InputGroupInput,
+                        InputGroupComponent,
+                        InputGroupAddonComponent,
+                        SearchIcon,
+                        FilterIcon,
+                        AggregationListItemComponent
+                    ], standalone: true, host: {
+                        "[class]": 'cn("block h-[inherit] max-h-[inherit]",class())'
+                    }, template: "@if (aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <i class=\"fa-fw fas fa-triangle-exclamation mr-1\"></i>\r\n    The aggregation component no longer supports tree aggregations. Please use\r\n    the &lt;AggregationTree /&gt; component instead.\r\n  </div>\r\n}\r\n<details\r\n  [attr.open]=\"expanded()\"\r\n  [attr.name]=\"id()\"\r\n  class=\"group space-y-2\"\r\n  (toggle)=\"onToggle($event)\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\r\n    [class.text-muted-foreground]=\"isEmpty()\"\r\n    class=\"m-0 mt-1 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"grow truncate\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (showFiltersCount() && filtersCount() > 0) {\r\n      <!-- count -->\r\n      <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    <!-- apply filter block -->\r\n    @if (!isCollapsed()) {\r\n      <ButtonGroup>\r\n        @if (hasFilters()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.clearFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); clear()\">\r\n            <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.clearFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n        @if (selection()) {\r\n          <button\r\n            variant=\"primary\"\r\n            size=\"xs\"\r\n            [attr.title]=\"'filters.applyFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); apply()\"\r\n            class=\"h-4 px-1\">\r\n            <FilterIcon class=\"size-4\" />\r\n            {{ \"filters.apply\" | transloco }}\r\n          </button>\r\n        }\r\n\r\n        <!-- select / unselect all -->\r\n        @if (isAllSelected()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.unselectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); unselectAll()\">\r\n            <i class=\"fa-fw far fa-check-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.unselectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        } @else {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.selectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.selectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); selectAll()\">\r\n            <i class=\"fa-fw far fa-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.selectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n      </ButtonGroup>\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\r\n      </button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  @if (aggregation()?.searchable && items().length) {\r\n    <InputGroup class=\"group/item mt-1\">\r\n      <input\r\n        #searchInput\r\n        input-group\r\n        id=\"aggregation-input-{{ column() }}\"\r\n        type=\"text\"\r\n        [attr.placeholder]=\"'search' | transloco\"\r\n        [(ngModel)]=\"searchText\"\r\n        class=\"mt-1\" />\r\n      <InputGroupAddon>\r\n        <SearchIcon\r\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  }\r\n\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"list\"\r\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\r\n      @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\r\n        @let item = items()[vItem.index];\r\n        <div\r\n          class=\"absolute w-full\"\r\n          [style.transform]=\"'translateY(' + vItem.start + 'px)'\"\r\n          role=\"listitem\">\r\n          <AggregationListItem\r\n            [node]=\"item\"\r\n            [field]=\"aggregation()?.column\"\r\n            (onSelect)=\"select()\"\r\n            (onFilter)=\"apply()\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\r\n    <button\r\n      variant=\"link\"\r\n      class=\"mt-1 flex w-full justify-center\"\r\n      [attr.aria-label]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore()\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n</details>\r\n", styles: ["AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, 0)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
+
+class AggregationDateComponent extends AggregationListComponent {
+    destroyRef;
+    datepicker = viewChild(DateRangePickerDirective, ...(ngDevMode ? [{ debugName: "datepicker" }] : []));
+    title = input({ label: "Date", icon: "far fa-calendar-day" }, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    displayEmptyDistributionIntervals = input(false, ...(ngDevMode ? [{ debugName: "displayEmptyDistributionIntervals" }] : []));
+    allowCustomRange = inject(FILTER_DATE_ALLOW_CUSTOM_RANGE);
+    transloco = inject(TranslocoService);
+    dateOptions = computed(() => translateAggregationToDateOptions(this.aggregation(), this.displayEmptyDistributionIntervals()), ...(ngDevMode ? [{ debugName: "dateOptions" }] : []));
+    form = new FormGroup({
+        option: new FormControl(null),
+        customRange: new FormGroup({
+            from: new FormControl(null),
+            to: new FormControl(null)
+        })
+    });
+    today = new Date();
+    lang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "lang" }] : []));
+    validSelection = signal(false, ...(ngDevMode ? [{ debugName: "validSelection" }] : []));
+    constructor(destroyRef) {
+        super();
+        this.destroyRef = destroyRef;
+        this.transloco.langChanges$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((lang) => {
+            this.lang.set(lang);
+            this.datepicker()?.setOptions({ language: lang });
+        });
+        const abortController = new AbortController();
+        addEventListener("changeDate", this.onDateChange.bind(this), {
+            signal: abortController.signal
+        });
+        // apply current date filter from queryParamsStore
+        effect(() => {
+            this.updateForm(this.queryParamsStore.getFilter({
+                field: this.aggregation()?.column,
+                name: this.aggregation()?.name
+            }));
+        });
+        this.form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((changes) => {
+            this.validSelection.set(!!changes.option &&
+                (changes.option !== "custom-range" || changes.customRange?.from !== null || changes.customRange?.to !== null));
+        });
+        destroyRef.onDestroy(() => {
+            abortController.abort();
+        });
+    }
+    aggregation = computed(() => {
+        const name = this.name();
+        if (name !== null) {
+            const agg = this.aggregationsService.processAggregation(name, this.column());
+            return {
+                ...agg,
+                items: agg?.items?.filter((item) => item.display !== "custom-range") ?? []
+            };
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "aggregation" }] : []));
+    apply() {
+        try {
+            const filter = this.getFormValueFilter();
+            this.queryParamsStore.updateFilter(filter);
+            this.selection.set(false);
+        }
+        catch (err) {
+            warn("Error applying date filter:", err);
+            if (err instanceof Error) {
+                notify.error(this.transloco.translate(err.message));
+            }
+        }
+    }
+    clear(notify = true) {
+        this.form.setValue({
+            option: null,
+            customRange: {
+                from: null,
+                to: null
+            }
+        });
+        const agg = this.aggregation();
+        if (agg && notify) {
+            this.queryParamsStore.removeFilterByName(agg.name);
+        }
+    }
+    updateForm(filter) {
+        if (!filter) {
+            this.clear(false);
+            return;
+        }
+        const { operator, value } = filter;
+        const code = this.dateOptions().find((option) => option.operator === operator && option.value === value)
+            ?.display ?? "custom-range";
+        let from = null, to = null;
+        if (code === "custom-range") {
+            switch (operator) {
+                case "lte":
+                    to = filter.value;
+                    break;
+                case "gte":
+                    from = filter.value;
+                    break;
+                case "between":
+                    from = filter.start;
+                    to = filter.end;
+                    break;
+            }
+        }
+        const formValue = {
+            option: code,
+            customRange: {
+                from: code === "custom-range" ? (from ?? null) : null,
+                to: code === "custom-range" ? (to ?? null) : null
+            }
+        };
+        this.form.setValue(formValue);
+        // Update the date range picker
+        const datepicker = this.datepicker();
+        if (datepicker) {
+            const start = new Date(formValue.customRange.from || "");
+            const end = new Date(formValue.customRange.to || "");
+            setTimeout(() => {
+                datepicker.rangeDatepicker?.setDates(start, end);
+            }, 1000);
+        }
+    }
+    getFormValueFilter() {
+        const value = this.form.value;
+        // value.option is null
+        if (!value.option) {
+            throw new Error("filters.selectionInvalid");
+        }
+        if (value.option !== "custom-range") {
+            const dateOption = this.dateOptions().find((option) => option.display === value.option);
+            const aggregation = this.aggregation();
+            if (!aggregation) {
+                throw new Error("filters.aggregationNotFound");
+            }
+            return {
+                name: aggregation.name,
+                operator: dateOption?.operator || "eq",
+                field: aggregation.column,
+                display: dateOption?.display ?? "",
+                filters: dateOption?.filters,
+                value: dateOption?.value
+            };
+        }
+        else if (value.customRange) {
+            // if to is null, operator is gte
+            // if from is null, operator is lte
+            // if both are not null, operator is between
+            const aggregation = this.aggregation();
+            if (!aggregation) {
+                throw new Error("filters.aggregationNotFound");
+            }
+            const filter = {
+                name: aggregation.name,
+                field: aggregation.column,
+                display: value.option
+            };
+            if (value.customRange.from && value.customRange.to) {
+                filter.operator = "between";
+                filter.start = value.customRange.from;
+                filter.end = value.customRange.to;
+            }
+            else if (value.customRange.from) {
+                filter.operator = "gte";
+                filter.value = value.customRange.from;
+            }
+            else if (value.customRange.to) {
+                filter.operator = "lte";
+                filter.value = value.customRange.to;
+            }
+            else {
+                throw new Error("filters.customRangeInvalid");
+            }
+            return filter;
+        }
+        throw new Error("filters.filterInvalid");
+    }
+    onDateChange() {
+        // Get the selected dates
+        const [start, end] = this.datepicker()?.getDates() || [];
+        // If both start and end are not selected, reset the datepicker options
+        if (!start && !end) {
+            this.datepicker()?.setOptions({
+                minDate: undefined,
+                maxDate: this.today
+            });
+        }
+        // Update the form with the selected dates
+        if (start && end) {
+            this.form.patchValue({
+                customRange: {
+                    from: start.toISOString(),
+                    to: end.toISOString()
+                }
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationDateComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AggregationDateComponent, isStandalone: true, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, displayEmptyDistributionIntervals: { classPropertyName: "displayEmptyDistributionIntervals", publicName: "displayEmptyDistributionIntervals", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "@container" }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "datepicker", first: true, predicate: DateRangePickerDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible()\"\r\n    class=\"m-0 flex h-8 w-full items-center pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"grow\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (hasFilters()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        [attr.title]=\"'filters.clearFilters' | transloco\"\r\n        [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n        (click)=\"clear()\"\r\n        (keydown.enter)=\"clear()\">\r\n        <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        [attr.title]=\"'filters.applyFilters' | transloco\"\r\n        [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n        (click)=\"apply()\"\r\n        (keydown.enter)=\"apply()\">\r\n        <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n      </button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  <form [formGroup]=\"form\">\r\n    <ul\r\n      class=\"scrollbar-thin flex max-h-[calc(var(--height,100%)-100px)] snap-y snap-start flex-col gap-1 overflow-auto pt-2\"\r\n      role=\"list\">\r\n      @for (option of dateOptions(); track $index) {\r\n        <li\r\n          role=\"listitem\"\r\n          tabindex=\"0\"\r\n          (click)=\"radio.click()\"\r\n          [attr.aria-label]=\"option.display | syslang | transloco\"\r\n          [class]=\"\r\n            cn(\r\n              'flex p-0 px-2 leading-7',\r\n              form.get('option')?.value === option.display && 'bg-accent',\r\n              option.hidden && 'hidden',\r\n              option.disabled && 'disabled pointer-events-none text-neutral-300'\r\n            )\r\n          \"\r\n          [attr.aria-hidden]=\"option.disabled\">\r\n          <input\r\n            #radio\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-{{ option.display }}\"\r\n            [attr.disabled]=\"option.disabled ? true : null\"\r\n            [attr.aria-disabled]=\"option.disabled\"\r\n            (click)=\"select()\"\r\n            value=\"{{ option.display }}\" />\r\n\r\n          <label\r\n            for=\"date-filter-{{ option.display }}\"\r\n            class=\"grow cursor-pointer p-1\">\r\n            {{ option.display | syslang | transloco }}\r\n          </label>\r\n        </li>\r\n      }\r\n\r\n      @if (allowCustomRange) {\r\n        <li\r\n          role=\"listitem\"\r\n          aria-label=\"custom range\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            #radiorange\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-custom-range\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n\r\n          <div\r\n            class=\"@container flex grow gap-1 p-1 @max-[340px]:flex-wrap\"\r\n            daterangepicker\r\n            datepicker-buttons\r\n            [datepicker-language]=\"lang()\"\r\n            [datepicker-min]=\"form.get('customRange.from')?.value || undefined\"\r\n            [datepicker-max]=\"\r\n              form.get('customRange.to')?.value ?? today.toISOString()\r\n            \"\r\n            (click)=\"radiorange.click()\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10\">{{\r\n                \"from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-end\" class=\"min-w-10 text-right\">{{\r\n                \"to\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DateRangePickerDirective, selector: "[daterangepicker]", inputs: ["datepicker-title", "datepicker-autohide", "datepicker-clear", "datepicker-today", "datepicker-buttons", "datepicker-today-highlight", "datepicker-language", "datepicker-format", "datepicker-max", "datepicker-min", "datepicker-orientation"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "aggregation-date, AggregationDate, aggregationdate", standalone: true, providers: [provideTranslocoScope("filters")], imports: [
+                        InputComponent,
+                        ButtonComponent,
+                        ListItemComponent,
+                        ReactiveFormsModule,
+                        TranslocoPipe,
+                        SyslangPipe,
+                        DateRangePickerDirective,
+                        ChevronRightIcon
+                    ], host: {
+                        class: "@container"
+                    }, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible()\"\r\n    class=\"m-0 flex h-8 w-full items-center pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"grow\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (hasFilters()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        [attr.title]=\"'filters.clearFilters' | transloco\"\r\n        [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n        (click)=\"clear()\"\r\n        (keydown.enter)=\"clear()\">\r\n        <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        [attr.title]=\"'filters.applyFilters' | transloco\"\r\n        [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n        (click)=\"apply()\"\r\n        (keydown.enter)=\"apply()\">\r\n        <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n      </button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  <form [formGroup]=\"form\">\r\n    <ul\r\n      class=\"scrollbar-thin flex max-h-[calc(var(--height,100%)-100px)] snap-y snap-start flex-col gap-1 overflow-auto pt-2\"\r\n      role=\"list\">\r\n      @for (option of dateOptions(); track $index) {\r\n        <li\r\n          role=\"listitem\"\r\n          tabindex=\"0\"\r\n          (click)=\"radio.click()\"\r\n          [attr.aria-label]=\"option.display | syslang | transloco\"\r\n          [class]=\"\r\n            cn(\r\n              'flex p-0 px-2 leading-7',\r\n              form.get('option')?.value === option.display && 'bg-accent',\r\n              option.hidden && 'hidden',\r\n              option.disabled && 'disabled pointer-events-none text-neutral-300'\r\n            )\r\n          \"\r\n          [attr.aria-hidden]=\"option.disabled\">\r\n          <input\r\n            #radio\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-{{ option.display }}\"\r\n            [attr.disabled]=\"option.disabled ? true : null\"\r\n            [attr.aria-disabled]=\"option.disabled\"\r\n            (click)=\"select()\"\r\n            value=\"{{ option.display }}\" />\r\n\r\n          <label\r\n            for=\"date-filter-{{ option.display }}\"\r\n            class=\"grow cursor-pointer p-1\">\r\n            {{ option.display | syslang | transloco }}\r\n          </label>\r\n        </li>\r\n      }\r\n\r\n      @if (allowCustomRange) {\r\n        <li\r\n          role=\"listitem\"\r\n          aria-label=\"custom range\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            #radiorange\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-custom-range\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n\r\n          <div\r\n            class=\"@container flex grow gap-1 p-1 @max-[340px]:flex-wrap\"\r\n            daterangepicker\r\n            datepicker-buttons\r\n            [datepicker-language]=\"lang()\"\r\n            [datepicker-min]=\"form.get('customRange.from')?.value || undefined\"\r\n            [datepicker-max]=\"\r\n              form.get('customRange.to')?.value ?? today.toISOString()\r\n            \"\r\n            (click)=\"radiorange.click()\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10\">{{\r\n                \"from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-end\" class=\"min-w-10 text-right\">{{\r\n                \"to\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"] }]
+        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { datepicker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DateRangePickerDirective), { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], displayEmptyDistributionIntervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayEmptyDistributionIntervals", required: false }] }] } });
+
+/**
+ * Component that allows users to select a date or a date range for filtering search results.
+ *
+ * @deprecated since version 4. Use `AggregationDateComponent` instead.
+ */
+class DateComponent extends AggregationDateComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DateComponent, isStandalone: true, selector: "date-filter,DateFilter", host: { classAttribute: "@container" }, providers: [provideTranslocoScope("filters")], usesInheritance: true, ngImport: i0, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible()\"\r\n    class=\"m-0 flex h-8 w-full items-center pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"grow\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (hasFilters()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        [attr.title]=\"'filters.clearFilters' | transloco\"\r\n        [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n        (click)=\"clear()\"\r\n        (keydown.enter)=\"clear()\">\r\n        <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        [attr.title]=\"'filters.applyFilters' | transloco\"\r\n        [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n        (click)=\"apply()\"\r\n        (keydown.enter)=\"apply()\">\r\n        <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n      </button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  <form [formGroup]=\"form\">\r\n    <ul\r\n      class=\"scrollbar-thin flex max-h-[calc(var(--height,100%)-100px)] snap-y snap-start flex-col gap-1 overflow-auto pt-2\"\r\n      role=\"list\">\r\n      @for (option of dateOptions(); track $index) {\r\n        <li\r\n          role=\"listitem\"\r\n          tabindex=\"0\"\r\n          (click)=\"radio.click()\"\r\n          [attr.aria-label]=\"option.display | syslang | transloco\"\r\n          [class]=\"\r\n            cn(\r\n              'flex p-0 px-2 leading-7',\r\n              form.get('option')?.value === option.display && 'bg-accent',\r\n              option.hidden && 'hidden',\r\n              option.disabled && 'disabled pointer-events-none text-neutral-300'\r\n            )\r\n          \"\r\n          [attr.aria-hidden]=\"option.disabled\">\r\n          <input\r\n            #radio\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-{{ option.display }}\"\r\n            [attr.disabled]=\"option.disabled ? true : null\"\r\n            [attr.aria-disabled]=\"option.disabled\"\r\n            (click)=\"select()\"\r\n            value=\"{{ option.display }}\" />\r\n\r\n          <label\r\n            for=\"date-filter-{{ option.display }}\"\r\n            class=\"grow cursor-pointer p-1\">\r\n            {{ option.display | syslang | transloco }}\r\n          </label>\r\n        </li>\r\n      }\r\n\r\n      @if (allowCustomRange) {\r\n        <li\r\n          role=\"listitem\"\r\n          aria-label=\"custom range\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            #radiorange\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-custom-range\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n\r\n          <div\r\n            class=\"@container flex grow gap-1 p-1 @max-[340px]:flex-wrap\"\r\n            daterangepicker\r\n            datepicker-buttons\r\n            [datepicker-language]=\"lang()\"\r\n            [datepicker-min]=\"form.get('customRange.from')?.value || undefined\"\r\n            [datepicker-max]=\"\r\n              form.get('customRange.to')?.value ?? today.toISOString()\r\n            \"\r\n            (click)=\"radiorange.click()\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10\">{{\r\n                \"from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-end\" class=\"min-w-10 text-right\">{{\r\n                \"to\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DateRangePickerDirective, selector: "[daterangepicker]", inputs: ["datepicker-title", "datepicker-autohide", "datepicker-clear", "datepicker-today", "datepicker-buttons", "datepicker-today-highlight", "datepicker-language", "datepicker-format", "datepicker-max", "datepicker-min", "datepicker-orientation"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "date-filter,DateFilter", standalone: true, providers: [provideTranslocoScope("filters")], imports: [
+                        InputComponent,
+                        ButtonComponent,
+                        ListItemComponent,
+                        ReactiveFormsModule,
+                        TranslocoPipe,
+                        SyslangPipe,
+                        DateRangePickerDirective,
+                        ChevronRightIcon
+                    ], host: {
+                        class: "@container"
+                    }, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible()\"\r\n    class=\"m-0 flex h-8 w-full items-center pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"grow\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (hasFilters()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        [attr.title]=\"'filters.clearFilters' | transloco\"\r\n        [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n        (click)=\"clear()\"\r\n        (keydown.enter)=\"clear()\">\r\n        <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        [attr.title]=\"'filters.applyFilters' | transloco\"\r\n        [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n        (click)=\"apply()\"\r\n        (keydown.enter)=\"apply()\">\r\n        <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n      </button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  <form [formGroup]=\"form\">\r\n    <ul\r\n      class=\"scrollbar-thin flex max-h-[calc(var(--height,100%)-100px)] snap-y snap-start flex-col gap-1 overflow-auto pt-2\"\r\n      role=\"list\">\r\n      @for (option of dateOptions(); track $index) {\r\n        <li\r\n          role=\"listitem\"\r\n          tabindex=\"0\"\r\n          (click)=\"radio.click()\"\r\n          [attr.aria-label]=\"option.display | syslang | transloco\"\r\n          [class]=\"\r\n            cn(\r\n              'flex p-0 px-2 leading-7',\r\n              form.get('option')?.value === option.display && 'bg-accent',\r\n              option.hidden && 'hidden',\r\n              option.disabled && 'disabled pointer-events-none text-neutral-300'\r\n            )\r\n          \"\r\n          [attr.aria-hidden]=\"option.disabled\">\r\n          <input\r\n            #radio\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-{{ option.display }}\"\r\n            [attr.disabled]=\"option.disabled ? true : null\"\r\n            [attr.aria-disabled]=\"option.disabled\"\r\n            (click)=\"select()\"\r\n            value=\"{{ option.display }}\" />\r\n\r\n          <label\r\n            for=\"date-filter-{{ option.display }}\"\r\n            class=\"grow cursor-pointer p-1\">\r\n            {{ option.display | syslang | transloco }}\r\n          </label>\r\n        </li>\r\n      }\r\n\r\n      @if (allowCustomRange) {\r\n        <li\r\n          role=\"listitem\"\r\n          aria-label=\"custom range\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            #radiorange\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-custom-range\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n\r\n          <div\r\n            class=\"@container flex grow gap-1 p-1 @max-[340px]:flex-wrap\"\r\n            daterangepicker\r\n            datepicker-buttons\r\n            [datepicker-language]=\"lang()\"\r\n            [datepicker-min]=\"form.get('customRange.from')?.value || undefined\"\r\n            [datepicker-max]=\"\r\n              form.get('customRange.to')?.value ?? today.toISOString()\r\n            \"\r\n            (click)=\"radiorange.click()\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10\">{{\r\n                \"from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-end\" class=\"min-w-10 text-right\">{{\r\n                \"to\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"] }]
+        }] });
+
+class ArticleEntities {
+    cn = cn;
+    appStore = inject(AppStore);
+    previewService = inject(PreviewService);
+    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
+    previewHighlights = computed(() => {
+        const highlights = this.appStore.getWebServiceByType("preview")?.highlights
+            ?.split(",")
+            .filter((h) => h !== "extractslocations" && h !== "matchlocations" && h !== "matchingpassages");
+        return highlights?.map((highlight) => ({
+            name: highlight,
+            entity: highlight,
+            metadata: this.getMetadata(this.article(), highlight)
+        }));
+    }, ...(ngDevMode ? [{ debugName: "previewHighlights" }] : []));
+    getMetadata(article, entity) {
+        const m = article[entity];
+        return m ?? [];
+    }
+    navigation = signal(undefined, ...(ngDevMode ? [{ debugName: "navigation" }] : []));
+    hovering = signal(undefined, ...(ngDevMode ? [{ debugName: "hovering" }] : []));
+    hoverIndex = computed(() => this.navigation()?.value === this.hovering() ? (this.navigation()?.index ?? 0) : 0, ...(ngDevMode ? [{ debugName: "hoverIndex" }] : []));
+    scrollTo(type, index, usePassageHighlighter = false) {
+        // if previewData contains "matchingpassages" then we use the passage highlighter otherwise we use "extractslocations"
+        const category = type || this.previewService.highlightCategory;
+        this.previewService.events.set("scrollTo");
+        this.previewService.sendMessage({ action: "select", id: `${category}_${index}`, usePassageHighlighter });
+    }
+    navigate(entity, data, direction) {
+        if (!data.count || data.count <= 0) {
+            warn(`Invalid count for entity ${entity}:`, data.count);
+            return;
+        }
+        const currentNavigation = this.navigation();
+        const isCurrentValue = currentNavigation?.value === data.value;
+        let newIndex;
+        if (direction === "next") {
+            newIndex = isCurrentValue && currentNavigation.index < data.count ? currentNavigation.index + 1 : 1;
+        }
+        else {
+            newIndex = isCurrentValue && currentNavigation.index > 1 ? currentNavigation.index - 1 : data.count;
+        }
+        this.navigation.set({
+            value: data.value,
+            index: newIndex
+        });
+        const id = this.previewService.getEntityId(entity, data.value, newIndex - 1);
+        if (id !== undefined) {
+            this.scrollTo(entity, id);
+            debug(`${direction} navigation:`, {
+                id,
                 entity,
                 value: data.value,
                 index: newIndex,
@@ -8798,7 +9572,7 @@ class AlertDialog {
       </DialogFooter>
       </DialogContent>
     </dialog>
-  `, isInline: true, styles: [".weekdays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "component", type: LoadingCircleIconComponent, selector: "loading-circle, LoadingCircle, loadingcircle", inputs: ["class"] }, { kind: "component", type: CircleCheckIconComponent, selector: "circle-check, CircleCheck, circlecheck", inputs: ["class"] }, { kind: "directive", type: SelectOptionDirective, selector: "option", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, styles: [".weekdays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "component", type: LoadingCircleIconComponent, selector: "loading-circle, LoadingCircle, loadingcircle", inputs: ["class"] }, { kind: "component", type: CircleCheckIconComponent, selector: "circle-check, CircleCheck, circlecheck", inputs: ["class"] }, { kind: "directive", type: SelectOptionDirective, selector: "option", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AlertDialog, decorators: [{
             type: Component,
@@ -8987,6 +9761,7 @@ class ChangePasswordComponent {
     username = input(null, ...(ngDevMode ? [{ debugName: "username" }] : []));
     alert = input(undefined, ...(ngDevMode ? [{ debugName: "alert" }] : []));
     redirectAfterSuccess = input(true, ...(ngDevMode ? [{ debugName: "redirectAfterSuccess" }] : []));
+    redirectAfterCancel = input(true, ...(ngDevMode ? [{ debugName: "redirectAfterCancel" }] : []));
     transloco = inject(TranslocoService);
     router = inject(Router);
     principalStore = inject(PrincipalStore);
@@ -9010,8 +9785,8 @@ class ChangePasswordComponent {
         if (fromInput?.trim())
             return fromInput.trim();
         if (isAuthenticated()) {
-            const p = this.principalStore.principal?.();
-            const name = p?.name?.trim();
+            const p = getState(this.principalStore);
+            const name = p.name.trim();
             if (name)
                 return name;
         }
@@ -9046,7 +9821,6 @@ class ChangePasswordComponent {
             if (!username) {
                 notify.info(this.transloco.translate("login.loginAfterPasswordChangeMissingUser"), { duration: 3000 });
                 this.router.navigate(["/login"]);
-                this.success.emit();
                 return;
             }
             await this.clearLocalAuthState();
@@ -9087,10 +9861,12 @@ class ChangePasswordComponent {
         this.pending.set(false);
         this.errorMsg.set(null);
         this.cancel.emit();
-        this.location.back();
+        if (this.redirectAfterCancel()) {
+            this.location.back();
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChangePasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ChangePasswordComponent, isStandalone: true, selector: "change-password, ChangePassword, changepassword", inputs: { username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, alert: { classPropertyName: "alert", publicName: "alert", isSignal: true, isRequired: false, transformFunction: null }, redirectAfterSuccess: { classPropertyName: "redirectAfterSuccess", publicName: "redirectAfterSuccess", isSignal: true, isRequired: false, transformFunction: null }, currentPassword: { classPropertyName: "currentPassword", publicName: "currentPassword", isSignal: true, isRequired: false, transformFunction: null }, newPassword: { classPropertyName: "newPassword", publicName: "newPassword", isSignal: true, isRequired: false, transformFunction: null }, confirmPassword: { classPropertyName: "confirmPassword", publicName: "confirmPassword", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { success: "success", cancel: "cancel", currentPassword: "currentPasswordChange", newPassword: "newPasswordChange", confirmPassword: "confirmPasswordChange" }, providers: [provideTranslocoScope("login")], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ChangePasswordComponent, isStandalone: true, selector: "change-password, ChangePassword, changepassword", inputs: { username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, alert: { classPropertyName: "alert", publicName: "alert", isSignal: true, isRequired: false, transformFunction: null }, redirectAfterSuccess: { classPropertyName: "redirectAfterSuccess", publicName: "redirectAfterSuccess", isSignal: true, isRequired: false, transformFunction: null }, redirectAfterCancel: { classPropertyName: "redirectAfterCancel", publicName: "redirectAfterCancel", isSignal: true, isRequired: false, transformFunction: null }, currentPassword: { classPropertyName: "currentPassword", publicName: "currentPassword", isSignal: true, isRequired: false, transformFunction: null }, newPassword: { classPropertyName: "newPassword", publicName: "newPassword", isSignal: true, isRequired: false, transformFunction: null }, confirmPassword: { classPropertyName: "confirmPassword", publicName: "confirmPassword", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { success: "success", cancel: "cancel", currentPassword: "currentPasswordChange", newPassword: "newPasswordChange", confirmPassword: "confirmPasswordChange" }, providers: [provideTranslocoScope("login")], ngImport: i0, template: `
     <Card hover="no" cdkTrapFocus cdkTrapFocusAutoCapture="true" class="bg-card rounded-xl shadow-sm">
       <CardHeader class="flex flex-col items-center gap-3">
         <img class="h-12 content-(--logo-large)" alt="logo" />
@@ -9198,14 +9974,11 @@ class ChangePasswordComponent {
         </button>
       </CardFooter>
     </Card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "directive", type: CardFooterComponent, selector: ".card-footer, card-footer, CardFooter, cardfooter", inputs: ["class"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, styles: ["input::-ms-reveal{display:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "directive", type: CardFooterComponent, selector: ".card-footer, card-footer, CardFooter, cardfooter", inputs: ["class"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ChangePasswordComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: "change-password, ChangePassword, changepassword",
-                    providers: [provideTranslocoScope("login")],
-                    imports: [
+            args: [{ selector: "change-password, ChangePassword, changepassword", providers: [provideTranslocoScope("login")], imports: [
                         FormsModule,
                         A11yModule,
                         TranslocoPipe,
@@ -9217,8 +9990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         InputGroupInput,
                         InputGroupComponent,
                         InputGroupAddonComponent
-                    ],
-                    template: `
+                    ], template: `
     <Card hover="no" cdkTrapFocus cdkTrapFocusAutoCapture="true" class="bg-card rounded-xl shadow-sm">
       <CardHeader class="flex flex-col items-center gap-3">
         <img class="h-12 content-(--logo-large)" alt="logo" />
@@ -9326,9 +10098,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         </button>
       </CardFooter>
     </Card>
-  `
-                }]
-        }], propDecorators: { success: [{ type: i0.Output, args: ["success"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], username: [{ type: i0.Input, args: [{ isSignal: true, alias: "username", required: false }] }], alert: [{ type: i0.Input, args: [{ isSignal: true, alias: "alert", required: false }] }], redirectAfterSuccess: [{ type: i0.Input, args: [{ isSignal: true, alias: "redirectAfterSuccess", required: false }] }], currentPassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPassword", required: false }] }, { type: i0.Output, args: ["currentPasswordChange"] }], newPassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "newPassword", required: false }] }, { type: i0.Output, args: ["newPasswordChange"] }], confirmPassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmPassword", required: false }] }, { type: i0.Output, args: ["confirmPasswordChange"] }] } });
+  `, styles: ["input::-ms-reveal{display:none}\n"] }]
+        }], propDecorators: { success: [{ type: i0.Output, args: ["success"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], username: [{ type: i0.Input, args: [{ isSignal: true, alias: "username", required: false }] }], alert: [{ type: i0.Input, args: [{ isSignal: true, alias: "alert", required: false }] }], redirectAfterSuccess: [{ type: i0.Input, args: [{ isSignal: true, alias: "redirectAfterSuccess", required: false }] }], redirectAfterCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "redirectAfterCancel", required: false }] }], currentPassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPassword", required: false }] }, { type: i0.Output, args: ["currentPasswordChange"] }], newPassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "newPassword", required: false }] }, { type: i0.Output, args: ["newPasswordChange"] }], confirmPassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmPassword", required: false }] }, { type: i0.Output, args: ["confirmPasswordChange"] }] } });
 
 class ForgotPasswordComponent {
     cancel = output();
@@ -9400,7 +10171,7 @@ class ForgotPasswordComponent {
 
       </CardFooter>
     </Card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "directive", type: CardFooterComponent, selector: ".card-footer, card-footer, CardFooter, cardfooter", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "directive", type: CardFooterComponent, selector: ".card-footer, card-footer, CardFooter, cardfooter", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
             type: Component,
@@ -9475,55 +10246,40 @@ class SignInComponent {
         username: this.username(),
         password: this.password()
     }), ...(ngDevMode ? [{ debugName: "credentials" }] : []));
-    isValid = computed(() => !!this.credentials().username?.length && !!this.credentials().password?.length, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
-    authenticated = signal(isAuthenticated(), ...(ngDevMode ? [{ debugName: "authenticated" }] : []));
-    user = signal(null, ...(ngDevMode ? [{ debugName: "user" }] : []));
-    returnUrl = signal(null, ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
+    isValid = computed(() => !!this.credentials().username?.length &&
+        !!this.credentials().password?.length, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
     router = inject(Router);
     route = inject(ActivatedRoute);
-    principalService = inject(PrincipalService);
     applicationService = inject(ApplicationService);
     principalStore = inject(PrincipalStore);
     transloco = inject(TranslocoService);
+    authenticated = signal(isAuthenticated(), ...(ngDevMode ? [{ debugName: "authenticated" }] : []));
+    user = signal(getState(this.principalStore), ...(ngDevMode ? [{ debugName: "user" }] : []));
+    expiresSoonNotified = signal(false, ...(ngDevMode ? [{ debugName: "expiresSoonNotified" }] : []));
     constructor(destroyRef) {
         this.destroyRef = destroyRef;
         effect(() => {
-            if (this.authenticated()) {
-                this.principalService
-                    .getPrincipal()
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe((principal) => this.user.set(principal));
-            }
-        });
-        effect(() => {
-            const principal = this.user();
-            if (this.authenticated() && principal) {
-                this.checkPasswordExpiresSoon(principal);
-            }
-        });
-        effect(() => {
-            if (this.returnUrl() !== null) {
-                const [url] = this.returnUrl() || ["/"];
-                this.router.navigateByUrl(url);
+            const principal = getState(this.principalStore);
+            if (this.authenticated() && principal && !this.expiresSoonNotified()) {
+                this.checkPasswordExpiresSoon();
             }
         });
         fromEvent(window, "authenticated")
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
+            .subscribe(event => {
             this.authenticated.set(event.detail.authenticated);
             const url = this.route.snapshot.queryParams["returnUrl"] || null;
-            if (url !== null)
-                this.returnUrl.set([url]);
-            if (isAuthenticated()) {
+            if (url !== null) {
                 this.router.navigateByUrl(url ?? "/");
             }
         });
     }
-    checkPasswordExpiresSoon(principal) {
-        if (!principal?.editablePartition || !principal.passwordExpirationDate) {
+    checkPasswordExpiresSoon() {
+        const { editablePartition, passwordExpirationDate } = getState(this.principalStore);
+        if (!editablePartition || !passwordExpirationDate) {
             return;
         }
-        if (expiresSoon(principal.passwordExpirationDate, 7)) {
+        if (expiresSoon(passwordExpirationDate, 7)) {
             notify.warning(this.transloco.translate("login.passwordExpiresSoon"), {
                 duration: Number.POSITIVE_INFINITY,
                 action: {
@@ -9538,17 +10294,16 @@ class SignInComponent {
                     }
                 }
             });
+            this.expiresSoonNotified.set(true);
         }
     }
     async handleLogout() {
         await logout();
         this.authenticated.set(false);
-        this.user.set(null);
-        this.returnUrl.set(null);
         this.router.navigate(["/login"]);
     }
     async handleLogin() {
-        login().catch((error) => {
+        login().catch(error => {
             warn("An error occurred while logging in", error);
             this.router.navigate(["error"]);
         });
@@ -9562,14 +10317,14 @@ class SignInComponent {
                 return;
             const { createRoutes = false } = globalConfig;
             await this.applicationService.initialize(createRoutes);
-            const p = this.principalStore.principal?.();
-            this.checkPasswordExpiresSoon(p ?? null);
+            this.checkPasswordExpiresSoon();
             const url = this.route.snapshot.queryParams["returnUrl"] || "/";
             this.router.navigateByUrl(url);
         }
         catch (err) {
             const { status, errorMessage } = err;
-            if (status === 401 && errorMessage?.toLowerCase().includes("password expired")) {
+            if (status === 401 &&
+                errorMessage?.toLowerCase().includes("password expired")) {
                 sessionStorage.setItem("passwordExpiredFlow", "true");
                 this.router.navigate(["/login"], {
                     queryParams: {
@@ -9582,94 +10337,82 @@ class SignInComponent {
             }
             notify.error("Login", { description: errorMessage });
         }
-    }
-    handleBack() {
-        this.authenticated.set(false);
-        this.user.set(null);
-        this.returnUrl.set(null);
-        this.router.navigate(["/"]);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SignInComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SignInComponent, isStandalone: true, selector: "signIn, signin, sign-in", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { forgotPassword: "forgotPassword", username: "usernameChange", password: "passwordChange" }, host: { properties: { "class": "cn('grid h-dvh w-full place-content-center', class())" } }, providers: [provideTranslocoScope("login")], ngImport: i0, template: `
-    <Card
-      hover="no"
-      cdkTrapFocus
-      cdkTrapFocusAutoCapture="true"
-      class="bg-card rounded-xl shadow-sm"
-    >
-      @if (authenticated()) {
-      <CardHeader class="flex flex-row items-start gap-4">
-        <img class="content-(--logo-large) h-12" alt="logo" />
-        <div class="space-y-1">
-          <h3 class="text-2xl font-semibold leading-tight">
-            {{
-              'login.welcomeBack' | transloco : { name: user()?.fullName ?? '' }
-            }}
-          </h3>
-          <p class="text-muted-foreground text-sm">
-            {{ 'login.youAreLoggedIn' | transloco }}
-          </p>
-        </div>
-      </CardHeader>
-
-      <CardFooter class="grid grid-cols-2 gap-3">
-        <button type="button" (click)="handleLogout()">
-          {{ 'login.disconnect' | transloco }}
-        </button>
-        <button type="button" (click)="handleBack()">{{ 'login.back' | transloco }}</button>
-      </CardFooter>
-      } @else {
-      <CardHeader class="flex flex-col items-center gap-3 text-center">
-        <img class="content-(--logo-large) h-12" alt="logo" />
-      </CardHeader>
-
-      <CardContent class="grid gap-4">
-        @if (!config.autoOAuthProvider && !config.autoSAMLProvider) {
-        <div class="grid gap-2">
-          <label class="text-sm font-medium" for="username">{{
-            'login.username' | transloco
-          }}</label>
-          <input
-            id="username"
-            type="text"
-            required
-            [(ngModel)]="username"
-            (keydown.enter)="handleLoginWithCredentials()"
-          />
-        </div>
+    }
+    handleBack() {
+        this.authenticated.set(false);
+        this.router.navigate(["/"]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SignInComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SignInComponent, isStandalone: true, selector: "signIn, signin, sign-in", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { forgotPassword: "forgotPassword", username: "usernameChange", password: "passwordChange" }, host: { properties: { "class": "cn('grid h-dvh w-full place-content-center', class())" } }, providers: [provideTranslocoScope("login")], ngImport: i0, template: `
+    @if (!authenticated()) {
+      <Card
+        hover="no"
+        cdkTrapFocus
+        cdkTrapFocusAutoCapture="true"
+        class="bg-card rounded-xl shadow-sm">
+        <CardHeader class="flex flex-col items-center gap-3 text-center">
+          <img class="h-12 content-(--logo-large)" alt="logo" />
+        </CardHeader>
+
+        <CardContent class="grid gap-4">
+          @let useCredentials =
+            !config.autoOAuthProvider && !config.autoSAMLProvider;
+          @if (useCredentials) {
+            <!-- authentication using credentials -->
+            <div class="grid gap-2">
+              <label class="text-sm font-medium" for="username">{{
+                "login.username" | transloco
+              }}</label>
+              <input
+                id="username"
+                type="text"
+                required
+                [(ngModel)]="username"
+                (keydown.enter)="handleLoginWithCredentials()" />
+            </div>
 
             <div class="grid gap-2">
-              <label class="text-sm font-medium" for="password">{{ 'login.password' | transloco }}</label>
-              <input id="password" type="password" required [(ngModel)]="password" (keydown.enter)="handleLoginWithCredentials()" />
+              <label class="text-sm font-medium" for="password">{{
+                "login.password" | transloco
+              }}</label>
+              <input
+                id="password"
+                type="password"
+                required
+                [(ngModel)]="password"
+                (keydown.enter)="handleLoginWithCredentials()" />
             </div>
 
-           <span
-               class="cursor-pointer text-xs text-muted-foreground hover:underline justify-self-start"
-                role="button"
-                tabindex="0"
+            <span
+              class="text-muted-foreground cursor-pointer justify-self-start text-xs hover:underline"
+              role="button"
+              tabindex="0"
               (click)="forgotPassword.emit()"
-            (keydown.enter)="forgotPassword.emit()">
-             {{ 'login.forgotPassword' | transloco }}
-                  </span>
-            <button [disabled]="!isValid()" (click)="handleLoginWithCredentials()">
-              {{ 'login.connect' | transloco }}
+              (keydown.enter)="forgotPassword.emit()">
+              {{ "login.forgotPassword" | transloco }}
+            </span>
+            <button
+              [disabled]="!isValid()"
+              (click)="handleLoginWithCredentials()">
+              {{ "login.connect" | transloco }}
             </button>
-
-          } @else {
+          }
+          @else {
+            <!-- authentication using OAuth or SAML provider -->
             <button (click)="handleLogin()">
-              {{ 'login.SignInWith' | transloco: { provider: config.autoOAuthProvider ? 'OAuth' : 'SAML' } }}
+              {{ "login.SignInWith" | transloco : { provider: config.autoOAuthProvider ? "OAuth" : "SAML" } }}
             </button>
           }
         </CardContent>
-      }
-    </Card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "directive", type: CardFooterComponent, selector: ".card-footer, card-footer, CardFooter, cardfooter", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+      </Card>
+    } @else {
+      <app-wait />
+    }
+  `, isInline: true, styles: ["input{background-color:var(--background)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "component", type: LoadingComponent, selector: "app-wait" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: "signIn, signin, sign-in",
-                    imports: [
+            args: [{ selector: "signIn, signin, sign-in", imports: [
                         RouterModule,
                         FormsModule,
                         A11yModule,
@@ -9679,87 +10422,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         CardComponent,
                         CardHeaderComponent,
                         CardContentComponent,
-                        CardFooterComponent
-                    ],
-                    providers: [provideTranslocoScope("login")],
-                    template: `
-    <Card
-      hover="no"
-      cdkTrapFocus
-      cdkTrapFocusAutoCapture="true"
-      class="bg-card rounded-xl shadow-sm"
-    >
-      @if (authenticated()) {
-      <CardHeader class="flex flex-row items-start gap-4">
-        <img class="content-(--logo-large) h-12" alt="logo" />
-        <div class="space-y-1">
-          <h3 class="text-2xl font-semibold leading-tight">
-            {{
-              'login.welcomeBack' | transloco : { name: user()?.fullName ?? '' }
-            }}
-          </h3>
-          <p class="text-muted-foreground text-sm">
-            {{ 'login.youAreLoggedIn' | transloco }}
-          </p>
-        </div>
-      </CardHeader>
-
-      <CardFooter class="grid grid-cols-2 gap-3">
-        <button type="button" (click)="handleLogout()">
-          {{ 'login.disconnect' | transloco }}
-        </button>
-        <button type="button" (click)="handleBack()">{{ 'login.back' | transloco }}</button>
-      </CardFooter>
-      } @else {
-      <CardHeader class="flex flex-col items-center gap-3 text-center">
-        <img class="content-(--logo-large) h-12" alt="logo" />
-      </CardHeader>
-
-      <CardContent class="grid gap-4">
-        @if (!config.autoOAuthProvider && !config.autoSAMLProvider) {
-        <div class="grid gap-2">
-          <label class="text-sm font-medium" for="username">{{
-            'login.username' | transloco
-          }}</label>
-          <input
-            id="username"
-            type="text"
-            required
-            [(ngModel)]="username"
-            (keydown.enter)="handleLoginWithCredentials()"
-          />
-        </div>
+                        LoadingComponent
+                    ], providers: [provideTranslocoScope("login")], template: `
+    @if (!authenticated()) {
+      <Card
+        hover="no"
+        cdkTrapFocus
+        cdkTrapFocusAutoCapture="true"
+        class="bg-card rounded-xl shadow-sm">
+        <CardHeader class="flex flex-col items-center gap-3 text-center">
+          <img class="h-12 content-(--logo-large)" alt="logo" />
+        </CardHeader>
+
+        <CardContent class="grid gap-4">
+          @let useCredentials =
+            !config.autoOAuthProvider && !config.autoSAMLProvider;
+          @if (useCredentials) {
+            <!-- authentication using credentials -->
+            <div class="grid gap-2">
+              <label class="text-sm font-medium" for="username">{{
+                "login.username" | transloco
+              }}</label>
+              <input
+                id="username"
+                type="text"
+                required
+                [(ngModel)]="username"
+                (keydown.enter)="handleLoginWithCredentials()" />
+            </div>
 
             <div class="grid gap-2">
-              <label class="text-sm font-medium" for="password">{{ 'login.password' | transloco }}</label>
-              <input id="password" type="password" required [(ngModel)]="password" (keydown.enter)="handleLoginWithCredentials()" />
+              <label class="text-sm font-medium" for="password">{{
+                "login.password" | transloco
+              }}</label>
+              <input
+                id="password"
+                type="password"
+                required
+                [(ngModel)]="password"
+                (keydown.enter)="handleLoginWithCredentials()" />
             </div>
 
-           <span
-               class="cursor-pointer text-xs text-muted-foreground hover:underline justify-self-start"
-                role="button"
-                tabindex="0"
+            <span
+              class="text-muted-foreground cursor-pointer justify-self-start text-xs hover:underline"
+              role="button"
+              tabindex="0"
               (click)="forgotPassword.emit()"
-            (keydown.enter)="forgotPassword.emit()">
-             {{ 'login.forgotPassword' | transloco }}
-                  </span>
-            <button [disabled]="!isValid()" (click)="handleLoginWithCredentials()">
-              {{ 'login.connect' | transloco }}
+              (keydown.enter)="forgotPassword.emit()">
+              {{ "login.forgotPassword" | transloco }}
+            </span>
+            <button
+              [disabled]="!isValid()"
+              (click)="handleLoginWithCredentials()">
+              {{ "login.connect" | transloco }}
             </button>
-
-          } @else {
+          }
+          @else {
+            <!-- authentication using OAuth or SAML provider -->
             <button (click)="handleLogin()">
-              {{ 'login.SignInWith' | transloco: { provider: config.autoOAuthProvider ? 'OAuth' : 'SAML' } }}
+              {{ "login.SignInWith" | transloco : { provider: config.autoOAuthProvider ? "OAuth" : "SAML" } }}
             </button>
           }
         </CardContent>
-      }
-    </Card>
-  `,
-                    host: {
+      </Card>
+    } @else {
+      <app-wait />
+    }
+  `, host: {
                         "[class]": "cn('grid h-dvh w-full place-content-center', class())"
-                    }
-                }]
+                    }, styles: ["input{background-color:var(--background)}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], forgotPassword: [{ type: i0.Output, args: ["forgotPassword"] }], username: [{ type: i0.Input, args: [{ isSignal: true, alias: "username", required: false }] }, { type: i0.Output, args: ["usernameChange"] }], password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }, { type: i0.Output, args: ["passwordChange"] }] } });
 
 class AuthPageComponent {
@@ -9801,7 +10532,7 @@ class AuthPageComponent {
         />
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: SignInComponent, selector: "signIn, signin, sign-in", inputs: ["class", "username", "password"], outputs: ["forgotPassword", "usernameChange", "passwordChange"] }, { kind: "component", type: ChangePasswordComponent, selector: "change-password, ChangePassword, changepassword", inputs: ["username", "alert", "redirectAfterSuccess", "currentPassword", "newPassword", "confirmPassword"], outputs: ["success", "cancel", "currentPasswordChange", "newPasswordChange", "confirmPasswordChange"] }, { kind: "component", type: ForgotPasswordComponent, selector: "forgot-password, ForgotPassword, forgotpassword", inputs: ["userName"], outputs: ["cancel", "success", "userNameChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: SignInComponent, selector: "signIn, signin, sign-in", inputs: ["class", "username", "password"], outputs: ["forgotPassword", "usernameChange", "passwordChange"] }, { kind: "component", type: ChangePasswordComponent, selector: "change-password, ChangePassword, changepassword", inputs: ["username", "alert", "redirectAfterSuccess", "redirectAfterCancel", "currentPassword", "newPassword", "confirmPassword"], outputs: ["success", "cancel", "currentPasswordChange", "newPasswordChange", "confirmPasswordChange"] }, { kind: "component", type: ForgotPasswordComponent, selector: "forgot-password, ForgotPassword, forgotpassword", inputs: ["userName"], outputs: ["cancel", "success", "userNameChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AuthPageComponent, decorators: [{
             type: Component,
@@ -10154,7 +10885,7 @@ class OverrideUserDialogComponent {
             this.appService
                 .initialize(createRoutes)
                 .then(() => {
-                const { fullName } = getState(this.principalStore).principal;
+                const fullName = this.principalStore.fullName();
                 notify.success(`Welcome back ${fullName}!`, { duration: 2000 });
             })
                 .catch((err) => {
@@ -10170,12 +10901,11 @@ class OverrideUserDialogComponent {
                     this.appService
                         .initialize(createRoutes)
                         .then(() => {
-                        const { fullName } = getState(this.principalStore).principal;
+                        const fullName = this.principalStore.fullName();
                         notify.success(`Welcome back ${fullName}!`, { duration: 2000 });
                     })
                         .catch((err) => {
                         error("An error occured while overriding (initialize)", err);
-                        notify.error("An error occured while overriding (initialize)", { duration: 2000 });
                         setGlobalConfig({ userOverrideActive: false, userOverride: undefined });
                     });
                 }
@@ -10234,7 +10964,7 @@ class OverrideUserDialogComponent {
         </DialogFooter>
       </DialogContent>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OverrideUserDialogComponent, decorators: [{
             type: Component,
@@ -10970,7 +11700,7 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
         return res;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DrawerAdvancedFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DrawerAdvancedFiltersComponent, isStandalone: true, selector: "advanced-filters", host: { classAttribute: "fixed bg-background grid h-full top-0 -right-full justify-end" }, providers: [DrawerService, SyslangPipe, TranslocoPipe, provideTranslocoScope("drawers")], usesInheritance: true, ngImport: i0, template: "<div (click)=\"drawer.toggleExtension()\" (keydown.escape)=\"drawer.toggleExtension()\" [attr.aria-hidden]=\"true\"></div>\n\n<div class=\"flex h-full flex-col overflow-auto\">\n  <DrawerNavbar class=\"border-foreground/10 block border-b\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </DrawerNavbar>\n\n  <div class=\"flex h-full grow flex-col overflow-auto\">\n    <section class=\"flex flex-col gap-4 p-6\" [formGroup]=\"form\">\n      <!-- FIND IN -->\n      <h1 class=\"text-xl font-bold\">{{ 'drawers.findInContent' | transloco }}</h1>\n      <div class=\"flex items-center gap-4\" formGroupName=\"content\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInContent' | transloco }}</span>\n        <select\n          id=\"content-operator\"\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n          formControlName=\"operator\">\n          @for (data of selectData; track $index) {\n            <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n          }\n        </select>\n        <input\n          [variant]=\"inputVariant()\"\n          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\n      @if (enableFieldedSearch()) {\n        <div class=\"flex items-center gap-4\" formGroupName=\"title\">\n          <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInTitle' | transloco }}</span>\n          <select\n            id=\"title-operator\"\n            class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n            formControlName=\"operator\">\n            @for (data of selectData; track $index) {\n              <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n            }\n          </select>\n          <input id=\"title-value\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [placeholder]=\"getPlaceholder('title.operator')\" formControlName=\"value\" />\n        </div>\n      }\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n\n      <Tabs>\n        <TabsList variant=\"ghost\">\n          @for (tab of tabs(); track $index) {\n            <Tab class=\"w-fit\" [value]=\"tab.path\" [active]=\"tab.path === currentTab()\" (click)=\"onTabChange(tab.path)\">\n              {{ tab.display | syslang | transloco }}\n            </Tab>\n          }\n        </TabsList>\n      </Tabs>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        <DropdownInput\n          [suggestions]=\"suggestions()\"\n          [selected]=\"getItems(filter.column)\"\n          [label]=\"filter.display || filter.alias | syslang | transloco\"\n          [placeholder]=\"'drawers.startTyping' | transloco\"\n          [noResultLabel]=\"'drawers.noResult' | transloco\"\n          (onFocus)=\"setFilterFocus($event, filter)\"\n          (onKeyUp)=\"onInputTyping($event)\"\n          (removeItem)=\"removeItem($event, filter)\"\n          (addItem)=\"addItem($event, filter)\" />\n      } @empty {\n        {{ 'drawers.noFilters' | transloco }}\n      }\n    </section>\n  </div>\n</div>\n", styles: [":host{--drawer-width: 46;--drawer-subdrawer-width: 400px;width:calc(100vw / 100 * var(--drawer-width) + var(--drawer-subdrawer-width));z-index:var(--z-drawer);grid-template-columns:0 1fr var(--drawer-subdrawer-width);transition:right .3s ease-in-out,transform .3s ease-in-out}:host[drawer-opened=true]{right:calc(var(--drawer-subdrawer-width) * -1);box-shadow:var(--drawer-box-shadow)}:host[drawer-extended=true]{width:100vw;right:calc(var(--spacing) * 0);grid-template-columns:1fr calc(var(--drawer-width) * 1%) var(--drawer-subdrawer-width);box-shadow:unset}:is() .dropdown{width:100%}:is() .dropdown-content{width:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: DrawerNavbarComponent, selector: "DrawerNavbar, drawernavbar" }, { kind: "component", type: DropdownInputComponent, selector: "dropdown-input, DropdownInput", inputs: ["label", "placeholder", "noResultLabel", "suggestions", "selected"], outputs: ["onFocus", "onKeyUp", "removeItem", "addItem"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DrawerAdvancedFiltersComponent, isStandalone: true, selector: "advanced-filters", host: { classAttribute: "fixed bg-background grid h-full top-0 -right-full justify-end" }, providers: [DrawerService, SyslangPipe, TranslocoPipe, provideTranslocoScope("drawers")], usesInheritance: true, ngImport: i0, template: "<div (click)=\"drawer.toggleExtension()\" (keydown.escape)=\"drawer.toggleExtension()\" [attr.aria-hidden]=\"true\"></div>\n\n<div class=\"flex h-full flex-col overflow-auto\">\n  <DrawerNavbar class=\"border-foreground/10 block border-b\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </DrawerNavbar>\n\n  <div class=\"flex h-full grow flex-col overflow-auto\">\n    <section class=\"flex flex-col gap-4 p-6\" [formGroup]=\"form\">\n      <!-- FIND IN -->\n      <h1 class=\"text-xl font-bold\">{{ 'drawers.findInContent' | transloco }}</h1>\n      <div class=\"flex items-center gap-4\" formGroupName=\"content\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInContent' | transloco }}</span>\n        <select\n          id=\"content-operator\"\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n          formControlName=\"operator\">\n          @for (data of selectData; track $index) {\n            <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n          }\n        </select>\n        <input\n          [variant]=\"inputVariant()\"\n          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\n      @if (enableFieldedSearch()) {\n        <div class=\"flex items-center gap-4\" formGroupName=\"title\">\n          <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInTitle' | transloco }}</span>\n          <select\n            id=\"title-operator\"\n            class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n            formControlName=\"operator\">\n            @for (data of selectData; track $index) {\n              <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n            }\n          </select>\n          <input id=\"title-value\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [placeholder]=\"getPlaceholder('title.operator')\" formControlName=\"value\" />\n        </div>\n      }\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n\n      <Tabs>\n        <TabsList variant=\"ghost\">\n          @for (tab of tabs(); track $index) {\n            <Tab class=\"w-fit\" [value]=\"tab.path\" [active]=\"tab.path === currentTab()\" (click)=\"onTabChange(tab.path)\">\n              {{ tab.display | syslang | transloco }}\n            </Tab>\n          }\n        </TabsList>\n      </Tabs>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        <DropdownInput\n          [suggestions]=\"suggestions()\"\n          [selected]=\"getItems(filter.column)\"\n          [label]=\"filter.display || filter.alias | syslang | transloco\"\n          [placeholder]=\"'drawers.startTyping' | transloco\"\n          [noResultLabel]=\"'drawers.noResult' | transloco\"\n          (onFocus)=\"setFilterFocus($event, filter)\"\n          (onKeyUp)=\"onInputTyping($event)\"\n          (removeItem)=\"removeItem($event, filter)\"\n          (addItem)=\"addItem($event, filter)\" />\n      } @empty {\n        {{ 'drawers.noFilters' | transloco }}\n      }\n    </section>\n  </div>\n</div>\n", styles: [":host{--drawer-width: 46;--drawer-subdrawer-width: 400px;width:calc(100vw / 100 * var(--drawer-width) + var(--drawer-subdrawer-width));z-index:var(--z-drawer);grid-template-columns:0 1fr var(--drawer-subdrawer-width);transition:right .3s ease-in-out,transform .3s ease-in-out}:host[drawer-opened=true]{right:calc(var(--drawer-subdrawer-width) * -1);box-shadow:var(--drawer-box-shadow)}:host[drawer-extended=true]{width:100vw;right:calc(var(--spacing) * 0);grid-template-columns:1fr calc(var(--drawer-width) * 1%) var(--drawer-subdrawer-width);box-shadow:unset}:is() .dropdown{width:100%}:is() .dropdown-content{width:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: DrawerNavbarComponent, selector: "DrawerNavbar, drawernavbar" }, { kind: "component", type: DropdownInputComponent, selector: "dropdown-input, DropdownInput", inputs: ["label", "placeholder", "noResultLabel", "suggestions", "selected"], outputs: ["onFocus", "onKeyUp", "removeItem", "addItem"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DrawerAdvancedFiltersComponent, decorators: [{
             type: Component,
@@ -11868,7 +12598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'feedback, Feedback', standalone: true, imports: [ButtonComponent, MenuComponent, MenuContentComponent, MenuItemComponent, TranslocoPipe, FeedbackDialogComponent], providers: [provideTranslocoScope('feedback')], template: "<menu>\n  <button class=\"border border-foreground/18\" variant=\"outline\" title=\"{{ 'feedback.button' | transloco }}\">\n    <i class=\"fa-fw far fa-commenting\" aria-hidden=\"true\"></i>\n    {{ 'feedback.label' | transloco }}\n    <i class=\"fa-fw fas fa-xmark ms-2\" (click)=\"close($event)\" aria-hidden=\"true\"></i>\n  </button>\n\n  <MenuContent>\n    @if (!disliked()) {\n      <menuitem (click)=\"like()\" [attr.aria-label]=\"'feedback.like' | transloco\">\n        @if (liked()) {\n          <i class=\"fa-fw fas fa-thumbs-up\"></i> {{ 'feedback.liked' | transloco }}\n        } @else {\n          <i class=\"fa-fw far fa-thumbs-up\"></i> {{ 'feedback.like' | transloco }}\n        }\n      </menuitem>\n    }\n    @if (!liked()) {\n      <menuitem (click)=\"dislike()\" [attr.aria-label]=\"'feedback.dislike' | transloco\">\n        @if (disliked()) {\n          <i class=\"fa-fw fas fa-thumbs-down\"></i> {{ 'feedback.disliked' | transloco }}\n        } @else {\n          <i class=\"fa-fw far fa-thumbs-down\"></i> {{ 'feedback.dislike' | transloco }}\n        }\n      </menuitem>\n    }\n    @for (menu of menus; track $index) {\n      <menuitem (click)=\"openFeedbackDialog(menu.type)\" [attr.aria-label]=\"'feedback.' + menu.type + '.title' | transloco\">\n        <i class=\"fa-fw {{ menu.icon }}\"></i> {{ 'feedback.' + menu.type + '.title' | transloco }}\n      </menuitem>\n    }\n  </MenuContent>\n</menu>\n\n<feedback-dialog />\n" }]
         }], propDecorators: { onClose: [{ type: i0.Output, args: ["onClose"] }], feedbackDialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FeedbackDialogComponent), { isSignal: true }] }], pages: [{ type: i0.Input, args: [{ isSignal: true, alias: "pages", required: true }] }] } });
 
-class AggregationItemComponent {
+class AggregationTreeItemComponent {
     cn = cn;
     get disabled() {
         return this.node().count === 0 ? "disabled" : null;
@@ -11881,7 +12611,7 @@ class AggregationItemComponent {
     field = input(...(ngDevMode ? [undefined, { debugName: "field" }] : []));
     appStore = inject(AppStore);
     queryParamsStore = inject(QueryParamsStore);
-    searchText = inject(AggregationComponent).searchText;
+    searchText = inject(AggregationTreeComponent).searchText;
     // is the count of items displayed, default to false
     showCount = computed(() => this.appStore.general()?.features?.showAggregationItemCount ?? false, ...(ngDevMode ? [{ debugName: "showCount" }] : []));
     quickFilter = computed(() => this.appStore.general()?.features?.quickFilter, ...(ngDevMode ? [{ debugName: "quickFilter" }] : []));
@@ -11951,10 +12681,9 @@ class AggregationItemComponent {
         }
     }
     onChildSelect(item) {
-        this.onSelect.emit(undefined);
         // if some items are selected visually, this means all these items got selected visually and if one
         // got changed we need to change their selection status
-        if (item && this.linkChildren() && this.node().items.some((i) => i.$selectedVisually)) {
+        if (item && this.linkChildren() && !item.$selected && this.node().items.some((i) => i.$selectedVisually)) {
             this.node().items.forEach((i) => {
                 if (i !== item) {
                     i.$selectedVisually = false;
@@ -11966,20 +12695,31 @@ class AggregationItemComponent {
             this.node().$selected = false;
             this.node().$selectedVisually = false;
         }
+        this.onSelect.emit(this.node());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AggregationItemComponent, isStandalone: true, selector: "aggregation-item, AggregationItem, aggregationitem", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onOpen: "onOpen", onFilter: "onFilter" }, host: { properties: { "attr.disabled": "this.disabled" } }, ngImport: i0, template: "<a\n  role=\"listitem\"\n  [attr.aria-selected]=\"node().$selected || node().$selectedVisually\"\n  [attr.aria-label]=\"name() | syslang\"\n  [style.--level]=\"level()\"\n  [class]=\"\n    cn(\n      'flex grow items-center gap-2 p-1 leading-7',\n      node().count === 0 && 'disabled pointer-events-none text-neutral-300',\n      (node().$selected || node().$selectedVisually) && 'bg-primary-100 text-primary'\n    )\n  \"\n  (click)=\"select(node(), $event, true)\">\n  <!-- chrevron is visible only if the node has children -->\n  <button (click)=\"open($event, node())\" class=\"transition-transform ease-in hover:scale-125\" aria-label=\"Open\">\n    <ChevronRight [class]=\"cn('size-4 translate-x-1', node().$opened && 'rotate-90', !node().hasChildren && 'hidden')\" width=\"16\" height=\"16\" />\n  </button>\n\n  <input\n    type=\"checkbox\"\n    role=\"checkbox\"\n    value=\"{{ node().value }}\"\n    [attr.disabled]=\"node().count === 0 ? true : null\"\n    [attr.aria-disabled]=\"node().count === 0\"\n    (keydown.enter)=\"select(node(), $event)\"\n    [checked]=\"node().$selected || node().$selectedVisually\" />\n\n  @if (node().icon) {\n    <i class=\"fa-fw {{ node().icon }} self-center justify-self-center\" aria-hidden=\"true\"></i>\n  }\n  <span\n    [class]=\"cn('line-clamp-1 text-ellipsis break-all', quickFilter() && 'hover:underline')\"\n    [title]=\"quickFilter() ? ((isFiltered() ? 'filters.removeFilter' : 'filters.addFilter') | transloco) + ': ' +(name() | syslang) : (name() | syslang)\"\n    (click)=\"onTextClick($event)\">\n    @for (chunk of (name() | syslang) ?? '' | highlightWord: searchText() : 10; track $index) {\n      <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{ chunk.text }}</span>\n    }\n  </span>\n  @if(showCount() && node().count > 0) {\n    <span class=\"ml-auto empty:hidden px-1 text-xs\" aria-hidden=\"true\">{{ node().count }}</span>\n  }\n</a>\n\n@if (node().hasChildren && node().$opened) {\n  @for (item of node().items; track $index) {\n    <AggregationItem\n      [node]=\"item\"\n      [path]=\"childrenPath()\"\n      [field]=\"field()\"\n      (onOpen)=\"onOpen.emit($event)\"\n      (onFilter)=\"onFilter.emit()\"\n      (onSelect)=\"onChildSelect($event)\" />\n  }\n}\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host a{padding-left:calc((var(--agg-tree-indent, .5rem) * var(--level)))}a{line-height:var(--agg-item-height, inherit)}\n"], dependencies: [{ kind: "component", type: AggregationItemComponent, selector: "aggregation-item, AggregationItem, aggregationitem", inputs: ["node", "path", "field"], outputs: ["onSelect", "onOpen", "onFilter"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "pipe", type: HighlightWordPipe, name: "highlightWord" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationTreeItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AggregationTreeItemComponent, isStandalone: true, selector: "aggregation-tree-item, AggregationTreeItem, aggregationtreeitem", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onOpen: "onOpen", onFilter: "onFilter" }, host: { properties: { "attr.disabled": "this.disabled" } }, ngImport: i0, template: "<a\r\n  role=\"listitem\"\r\n  [attr.aria-selected]=\"node().$selected || node().$selectedVisually\"\r\n  [attr.aria-label]=\"name() | syslang\"\r\n  [style.--level]=\"level()\"\r\n  [class]=\"\r\n    cn(\r\n      'flex grow items-center gap-2 p-1 leading-7',\r\n      node().count === 0 && 'disabled pointer-events-none text-neutral-300',\r\n      (node().$selected || node().$selectedVisually) &&\r\n        'bg-primary-100 text-primary dark:text-primary-foreground'\r\n    )\r\n  \"\r\n  (click)=\"select(node(), $event, true)\">\r\n  <!-- chrevron is visible only if the node has children -->\r\n  <button\r\n    (click)=\"open($event, node())\"\r\n    class=\"transition-transform ease-in hover:scale-125\"\r\n    aria-label=\"Open\">\r\n    <ChevronRight\r\n      [class]=\"\r\n        cn(\r\n          'size-4 translate-x-1',\r\n          node().$opened && 'rotate-90',\r\n          !node().hasChildren && 'hidden'\r\n        )\r\n      \"\r\n      width=\"16\"\r\n      height=\"16\" />\r\n  </button>\r\n\r\n  <input\r\n    type=\"checkbox\"\r\n    role=\"checkbox\"\r\n    value=\"{{ node().value }}\"\r\n    [attr.disabled]=\"node().count === 0 ? true : null\"\r\n    [attr.aria-disabled]=\"node().count === 0\"\r\n    (keydown.enter)=\"select(node(), $event)\"\r\n    [checked]=\"node().$selected || node().$selectedVisually\" />\r\n\r\n  @if (node().icon) {\r\n    <i\r\n      class=\"fa-fw {{ node().icon }} self-center justify-self-center\"\r\n      aria-hidden=\"true\"></i>\r\n  }\r\n  <span\r\n    [class]=\"\r\n      cn(\r\n        'line-clamp-1 break-all text-ellipsis',\r\n        quickFilter() && 'hover:underline'\r\n      )\r\n    \"\r\n    [title]=\"\r\n      quickFilter()\r\n        ? ((isFiltered() ? 'filters.removeFilter' : 'filters.addFilter')\r\n            | transloco) +\r\n          ': ' +\r\n          (name() | syslang)\r\n        : (name() | syslang)\r\n    \"\r\n    (click)=\"onTextClick($event)\">\r\n    @for (\r\n      chunk of (name() | syslang) ?? \"\" | highlightWord: searchText() : 10;\r\n      track $index\r\n    ) {\r\n      <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\r\n        chunk.text\r\n      }}</span>\r\n    }\r\n  </span>\r\n  @if (showCount() && node().count > 0) {\r\n    <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\r\n      node().count\r\n    }}</span>\r\n  }\r\n</a>\r\n\r\n@if (node().hasChildren && node().$opened) {\r\n  @for (item of node().items; track $index) {\r\n    <AggregationTreeItem\r\n      [node]=\"item\"\r\n      [path]=\"childrenPath()\"\r\n      [field]=\"field()\"\r\n      (onOpen)=\"onOpen.emit($event)\"\r\n      (onFilter)=\"onFilter.emit()\"\r\n      (onSelect)=\"onChildSelect($event)\" />\r\n  }\r\n}\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host a{padding-left:calc((var(--agg-tree-indent, .5rem) * var(--level)))}a{line-height:var(--agg-item-height, inherit)}\n"], dependencies: [{ kind: "component", type: AggregationTreeItemComponent, selector: "aggregation-tree-item, AggregationTreeItem, aggregationtreeitem", inputs: ["node", "path", "field"], outputs: ["onSelect", "onOpen", "onFilter"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "pipe", type: HighlightWordPipe, name: "highlightWord" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationTreeItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aggregation-item, AggregationItem, aggregationitem", standalone: true, imports: [HighlightWordPipe, ListItemComponent, SyslangPipe, ChevronRightIcon, TranslocoPipe], template: "<a\n  role=\"listitem\"\n  [attr.aria-selected]=\"node().$selected || node().$selectedVisually\"\n  [attr.aria-label]=\"name() | syslang\"\n  [style.--level]=\"level()\"\n  [class]=\"\n    cn(\n      'flex grow items-center gap-2 p-1 leading-7',\n      node().count === 0 && 'disabled pointer-events-none text-neutral-300',\n      (node().$selected || node().$selectedVisually) && 'bg-primary-100 text-primary'\n    )\n  \"\n  (click)=\"select(node(), $event, true)\">\n  <!-- chrevron is visible only if the node has children -->\n  <button (click)=\"open($event, node())\" class=\"transition-transform ease-in hover:scale-125\" aria-label=\"Open\">\n    <ChevronRight [class]=\"cn('size-4 translate-x-1', node().$opened && 'rotate-90', !node().hasChildren && 'hidden')\" width=\"16\" height=\"16\" />\n  </button>\n\n  <input\n    type=\"checkbox\"\n    role=\"checkbox\"\n    value=\"{{ node().value }}\"\n    [attr.disabled]=\"node().count === 0 ? true : null\"\n    [attr.aria-disabled]=\"node().count === 0\"\n    (keydown.enter)=\"select(node(), $event)\"\n    [checked]=\"node().$selected || node().$selectedVisually\" />\n\n  @if (node().icon) {\n    <i class=\"fa-fw {{ node().icon }} self-center justify-self-center\" aria-hidden=\"true\"></i>\n  }\n  <span\n    [class]=\"cn('line-clamp-1 text-ellipsis break-all', quickFilter() && 'hover:underline')\"\n    [title]=\"quickFilter() ? ((isFiltered() ? 'filters.removeFilter' : 'filters.addFilter') | transloco) + ': ' +(name() | syslang) : (name() | syslang)\"\n    (click)=\"onTextClick($event)\">\n    @for (chunk of (name() | syslang) ?? '' | highlightWord: searchText() : 10; track $index) {\n      <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{ chunk.text }}</span>\n    }\n  </span>\n  @if(showCount() && node().count > 0) {\n    <span class=\"ml-auto empty:hidden px-1 text-xs\" aria-hidden=\"true\">{{ node().count }}</span>\n  }\n</a>\n\n@if (node().hasChildren && node().$opened) {\n  @for (item of node().items; track $index) {\n    <AggregationItem\n      [node]=\"item\"\n      [path]=\"childrenPath()\"\n      [field]=\"field()\"\n      (onOpen)=\"onOpen.emit($event)\"\n      (onFilter)=\"onFilter.emit()\"\n      (onSelect)=\"onChildSelect($event)\" />\n  }\n}\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host a{padding-left:calc((var(--agg-tree-indent, .5rem) * var(--level)))}a{line-height:var(--agg-item-height, inherit)}\n"] }]
+            args: [{ selector: "aggregation-tree-item, AggregationTreeItem, aggregationtreeitem", standalone: true, imports: [HighlightWordPipe, ListItemComponent, SyslangPipe, ChevronRightIcon, TranslocoPipe], template: "<a\r\n  role=\"listitem\"\r\n  [attr.aria-selected]=\"node().$selected || node().$selectedVisually\"\r\n  [attr.aria-label]=\"name() | syslang\"\r\n  [style.--level]=\"level()\"\r\n  [class]=\"\r\n    cn(\r\n      'flex grow items-center gap-2 p-1 leading-7',\r\n      node().count === 0 && 'disabled pointer-events-none text-neutral-300',\r\n      (node().$selected || node().$selectedVisually) &&\r\n        'bg-primary-100 text-primary dark:text-primary-foreground'\r\n    )\r\n  \"\r\n  (click)=\"select(node(), $event, true)\">\r\n  <!-- chrevron is visible only if the node has children -->\r\n  <button\r\n    (click)=\"open($event, node())\"\r\n    class=\"transition-transform ease-in hover:scale-125\"\r\n    aria-label=\"Open\">\r\n    <ChevronRight\r\n      [class]=\"\r\n        cn(\r\n          'size-4 translate-x-1',\r\n          node().$opened && 'rotate-90',\r\n          !node().hasChildren && 'hidden'\r\n        )\r\n      \"\r\n      width=\"16\"\r\n      height=\"16\" />\r\n  </button>\r\n\r\n  <input\r\n    type=\"checkbox\"\r\n    role=\"checkbox\"\r\n    value=\"{{ node().value }}\"\r\n    [attr.disabled]=\"node().count === 0 ? true : null\"\r\n    [attr.aria-disabled]=\"node().count === 0\"\r\n    (keydown.enter)=\"select(node(), $event)\"\r\n    [checked]=\"node().$selected || node().$selectedVisually\" />\r\n\r\n  @if (node().icon) {\r\n    <i\r\n      class=\"fa-fw {{ node().icon }} self-center justify-self-center\"\r\n      aria-hidden=\"true\"></i>\r\n  }\r\n  <span\r\n    [class]=\"\r\n      cn(\r\n        'line-clamp-1 break-all text-ellipsis',\r\n        quickFilter() && 'hover:underline'\r\n      )\r\n    \"\r\n    [title]=\"\r\n      quickFilter()\r\n        ? ((isFiltered() ? 'filters.removeFilter' : 'filters.addFilter')\r\n            | transloco) +\r\n          ': ' +\r\n          (name() | syslang)\r\n        : (name() | syslang)\r\n    \"\r\n    (click)=\"onTextClick($event)\">\r\n    @for (\r\n      chunk of (name() | syslang) ?? \"\" | highlightWord: searchText() : 10;\r\n      track $index\r\n    ) {\r\n      <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\r\n        chunk.text\r\n      }}</span>\r\n    }\r\n  </span>\r\n  @if (showCount() && node().count > 0) {\r\n    <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\r\n      node().count\r\n    }}</span>\r\n  }\r\n</a>\r\n\r\n@if (node().hasChildren && node().$opened) {\r\n  @for (item of node().items; track $index) {\r\n    <AggregationTreeItem\r\n      [node]=\"item\"\r\n      [path]=\"childrenPath()\"\r\n      [field]=\"field()\"\r\n      (onOpen)=\"onOpen.emit($event)\"\r\n      (onFilter)=\"onFilter.emit()\"\r\n      (onSelect)=\"onChildSelect($event)\" />\r\n  }\r\n}\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host a{padding-left:calc((var(--agg-tree-indent, .5rem) * var(--level)))}a{line-height:var(--agg-item-height, inherit)}\n"] }]
         }], propDecorators: { disabled: [{
                 type: HostBinding,
                 args: ["attr.disabled"]
             }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onOpen: [{ type: i0.Output, args: ["onOpen"] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }] } });
 
-class AggregationComponent {
+class AggregationTreeComponent {
     cn = cn;
+    virtualItems = viewChildren('virtualItem', ...(ngDevMode ? [{ debugName: "virtualItems" }] : []));
+    scrollElement = viewChild("scrollElement", ...(ngDevMode ? [{ debugName: "scrollElement" }] : []));
+    virtualizer = injectVirtualizer(() => ({
+        count: this.items().length,
+        estimateSize: () => 32,
+        scrollElement: this.scrollElement()
+    }));
+    #measureItems = effect(() => this.virtualItems().forEach((el) => {
+        this.virtualizer.measureElement(el.nativeElement);
+    }), ...(ngDevMode ? [{ debugName: "#measureItems" }] : []));
     searchInput = viewChild("searchInput", ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
     /* stores */
     aggregationsStore = inject(AggregationsStore);
@@ -11997,6 +12737,7 @@ class AggregationComponent {
     id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
     column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    expandedLevel = input(undefined, ...(ngDevMode ? [{ debugName: "expandedLevel", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     onSelect = output();
     /**
      * Determines whether the aggregation component can be collapsed or expanded.
@@ -12005,7 +12746,7 @@ class AggregationComponent {
      *
      * @default false
      */
-    collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
     /**
      * Controls whether the aggregation component is in a collapsed state.
      * When true, the component will be visually collapsed/hidden.
@@ -12013,7 +12754,7 @@ class AggregationComponent {
      *
      * @default false
      */
-    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     /**
      * A computed signal that tracks the collapsed state of the component.
      * This signal is linked to the `collapsed()` signal and automatically updates
@@ -12027,13 +12768,13 @@ class AggregationComponent {
      *
      * @returns Empty string if not collapsed, null if collapsed
      */
-    expanded = computed(() => (this.isCollapsed() ? null : ""), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    expanded = computed(() => (this.isCollapsed() ? null : ''), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
     /**
      * A boolean flag indicating whether the component is searchable.
      * This property is initialized to `undefined` by default.
      * "Undefined" and not "false" because this input overrides the custom json settings
      */
-    searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
     selection = signal(false, ...(ngDevMode ? [{ debugName: "selection" }] : []));
     /**
      * A boolean flag indicating whether we want to see the filters count when some is applied
@@ -12049,6 +12790,12 @@ class AggregationComponent {
         if (name !== null) {
             const agg = this.aggregationsService.processAggregation(name, column);
             if (agg) {
+                if (!agg.isTree) {
+                    error("The aggregation tree component does not support list aggregations. Please use the <Aggregation /> component instead.");
+                }
+                // overrides "expandedLevel" from custom JSON file
+                const expandedLevel = this.expandedLevel() ?? agg.expandedLevel ?? 0;
+                this.expandItems(agg.items, expandedLevel);
                 // overrides "searchable" properties with the input if any
                 agg.searchable = this.searchable() ?? agg.searchable;
                 return agg;
@@ -12121,11 +12868,11 @@ class AggregationComponent {
         }
         // if the aggregation is not a tree, we return the suggestions as is
         return this.suggests()?.map((suggest) => ({
-            name: suggest.category,
+            name: this.name(),
             value: suggest.normalized || suggest.display || "",
             display: suggest.display,
-            column: suggest.id,
-            count: 1,
+            column: suggest.category,
+            count: Number(suggest.frequency),
             $selected: false,
             items: []
         }));
@@ -12196,10 +12943,16 @@ class AggregationComponent {
         const agg = this.aggregation();
         if (agg) {
             this.queryParamsStore.removeFilterByName(agg.name, agg.column);
-            this.items().forEach((item) => {
-                item.$selected = false;
-            });
-            sessionStorage.setItem(`agg-${this.aggregation()?.column}`, JSON.stringify([...this.items()]));
+            const unselect = (items) => {
+                items.forEach((item) => {
+                    item.$selected = false;
+                    item.$selectedVisually = false;
+                    if (item.items)
+                        unselect(item.items);
+                });
+            };
+            unselect(this.items());
+            sessionStorage.removeItem(`agg-${this.aggregation()?.column}`);
             this.selection.set(false);
             this.isAllSelected.set(false);
         }
@@ -12298,7 +13051,7 @@ class AggregationComponent {
      * If the item is deselected, the selection count is decremented by 1.
      */
     select() {
-        this.onSelect.emit(true);
+        this.onSelect.emit(this.getFlattenTreeItems().filter(item => item.$selected));
         this.selection.set(true);
         this.verifySelected();
         sessionStorage.setItem(`agg-${this.aggregation()?.column}`, JSON.stringify([...this.items()]));
@@ -12399,7 +13152,9 @@ class AggregationComponent {
                 return flat.concat(item, item.items ? flattenItems(item.items) : []);
             }, []);
         };
-        const searchItems = flattenItems(this.searchedItems() || []);
+        // we need to flatten both the searched items and the current items to get all the items in the tree
+        const searchedItemsFiltered = (this.searchedItems() || []).filter((item) => "items" in item);
+        const searchItems = flattenItems(searchedItemsFiltered);
         const items = flattenItems(this.aggregation()?.items || []);
         const flattenedTreeItems = [...searchItems, ...items];
         return flattenedTreeItems;
@@ -12491,287 +13246,312 @@ class AggregationComponent {
             if (savedItem) {
                 item.$selected = savedItem.$selected;
                 item.$selectedVisually = savedItem.$selectedVisually;
-                if (item.items?.length && savedItem.items?.length) {
-                    item.items = this.setSelected(item.items, savedItem.items);
-                }
-            }
-            return item;
-        });
-    }
-    processAggregations(items) {
-        if (!this.linkChildren())
-            return items;
-        items.forEach((item) => {
-            if (item.items?.length) {
-                this.selectVisually(item.items, item.$selected || false);
-            }
-        });
-        return items;
-    }
-    selectVisually(items, parentSelected) {
-        items.forEach((item) => {
-            item.$selectedVisually = parentSelected;
-            if (item.items?.length)
-                this.selectVisually(item.items, item.$selected || item.$selectedVisually);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AggregationComponent, isStandalone: true, selector: "Aggregation, aggregation", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\",class())" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary [class.cursor-pointer]=\"collapsible() && !isEmpty()\" [class.text-muted-foreground]=\"isEmpty()\"\n    class=\"m-0 mt-1 flex gap-1 h-8 w-full select-none items-center pl-1 font-semibold\" (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @if (aggregation()?.icon) {\n      <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"grow\">{{ aggregation()?.display | syslang | transloco }}</span>\n    </ng-content>\n\n    @if (showFiltersCount() && filtersCount() > 0) {\n    <!-- count -->\n    <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\n      {{ filtersCount() }}\n    </Badge>\n    }\n    <!-- apply filter block -->\n    @if (!isCollapsed()) {\n      <ButtonGroup>\n      @if (hasFilters()) {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.clearFilters' | transloco\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\" (click)=\"$event.stopPropagation(); clear()\">\n          <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\n        </button>\n        }\n        @if (selection()) {\n        <button variant=\"primary\" size=\"xs\" [attr.title]=\"'filters.applyFilters' | transloco\"\n          [attr.aria-label]=\"'filters.applyFilters' | transloco\" (click)=\"$event.stopPropagation(); apply()\" class=\"px-1 h-4\">\n         <FilterIcon class=\"size-4\"/>\n         {{ 'filters.apply' | transloco }}\n        </button>\n        }\n\n        <!-- select / unselect all -->\n        @if (isAllSelected()) {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.unselectAllFilters' | transloco\"\n          [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\" (click)=\"$event.stopPropagation(); unselectAll()\">\n          <i class=\"fa-fw far fa-check-square\"></i>\n        </button>\n        } @else {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.selectAllFilters' | transloco\"\n          [attr.aria-label]=\"'filters.selectAllFilters' | transloco\" (click)=\"$event.stopPropagation(); selectAll()\">\n          <i class=\"fa-fw far fa-square\"></i>\n        </button>\n        }\n      </ButtonGroup>\n    }\n\n    @if (collapsible()) {\n    <button variant=\"none\" title=\"Open/Close\"\n      class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevronright />\n    </button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  @if (aggregation()?.searchable && items().length) {\n    <InputGroup class=\"group/item mt-1\">\n      <input #searchInput input-group id=\"aggregation-input-{{column()}}\" type=\"text\" [attr.placeholder]=\"'search' | transloco\" [(ngModel)]=\"searchText\" class=\"mt-1\"/>\n      <InputGroupAddon>\n        <SearchIcon class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\n    </InputGroupAddon>\n  </InputGroup>\n  }\n\n  <ul class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] snap-y snap-start overflow-auto\" role=\"list\"\n    [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n    @for (item of items(); track $index) {\n    <AggregationItem [node]=\"item\" [path]=\"[]\" [field]=\"aggregation()?.column\" (onSelect)=\"select()\"\n      (onOpen)=\"open($event)\" (onFilter)=\"apply()\" />\n    }\n  </ul>\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\n  <button variant=\"link\" class=\"mt-1 flex w-full justify-center\" [attr.aria-label]=\"'loadMore' | transloco\"\n    (click)=\"loadMore()\">\n    {{ 'loadMore' | transloco }}\n  </button>\n  }\n</details>\n", styles: ["AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, 0)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: AggregationItemComponent, selector: "aggregation-item, AggregationItem, aggregationitem", inputs: ["node", "path", "field"], outputs: ["onSelect", "onOpen", "onFilter"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "directive", type: ButtonGroup, selector: "button-group, ButtonGroup", inputs: ["class", "orientation"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "Aggregation, aggregation", imports: [
-                        FormsModule,
-                        ReactiveFormsModule,
-                        ButtonComponent,
-                        AggregationItemComponent,
-                        SyslangPipe,
-                        TranslocoPipe,
-                        BadgeComponent,
-                        ChevronRightIcon,
-                        ButtonGroup,
-                        InputGroupInput,
-                        InputGroupComponent,
-                        InputGroupAddonComponent,
-                        SearchIcon,
-                        FilterIcon
-                    ], standalone: true, host: {
-                        "[class]": 'cn("block h-[inherit] max-h-[inherit]",class())'
-                    }, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary [class.cursor-pointer]=\"collapsible() && !isEmpty()\" [class.text-muted-foreground]=\"isEmpty()\"\n    class=\"m-0 mt-1 flex gap-1 h-8 w-full select-none items-center pl-1 font-semibold\" (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @if (aggregation()?.icon) {\n      <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"grow\">{{ aggregation()?.display | syslang | transloco }}</span>\n    </ng-content>\n\n    @if (showFiltersCount() && filtersCount() > 0) {\n    <!-- count -->\n    <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\n      {{ filtersCount() }}\n    </Badge>\n    }\n    <!-- apply filter block -->\n    @if (!isCollapsed()) {\n      <ButtonGroup>\n      @if (hasFilters()) {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.clearFilters' | transloco\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\" (click)=\"$event.stopPropagation(); clear()\">\n          <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\n        </button>\n        }\n        @if (selection()) {\n        <button variant=\"primary\" size=\"xs\" [attr.title]=\"'filters.applyFilters' | transloco\"\n          [attr.aria-label]=\"'filters.applyFilters' | transloco\" (click)=\"$event.stopPropagation(); apply()\" class=\"px-1 h-4\">\n         <FilterIcon class=\"size-4\"/>\n         {{ 'filters.apply' | transloco }}\n        </button>\n        }\n\n        <!-- select / unselect all -->\n        @if (isAllSelected()) {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.unselectAllFilters' | transloco\"\n          [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\" (click)=\"$event.stopPropagation(); unselectAll()\">\n          <i class=\"fa-fw far fa-check-square\"></i>\n        </button>\n        } @else {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.selectAllFilters' | transloco\"\n          [attr.aria-label]=\"'filters.selectAllFilters' | transloco\" (click)=\"$event.stopPropagation(); selectAll()\">\n          <i class=\"fa-fw far fa-square\"></i>\n        </button>\n        }\n      </ButtonGroup>\n    }\n\n    @if (collapsible()) {\n    <button variant=\"none\" title=\"Open/Close\"\n      class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevronright />\n    </button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  @if (aggregation()?.searchable && items().length) {\n    <InputGroup class=\"group/item mt-1\">\n      <input #searchInput input-group id=\"aggregation-input-{{column()}}\" type=\"text\" [attr.placeholder]=\"'search' | transloco\" [(ngModel)]=\"searchText\" class=\"mt-1\"/>\n      <InputGroupAddon>\n        <SearchIcon class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\n    </InputGroupAddon>\n  </InputGroup>\n  }\n\n  <ul class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] snap-y snap-start overflow-auto\" role=\"list\"\n    [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n    @for (item of items(); track $index) {\n    <AggregationItem [node]=\"item\" [path]=\"[]\" [field]=\"aggregation()?.column\" (onSelect)=\"select()\"\n      (onOpen)=\"open($event)\" (onFilter)=\"apply()\" />\n    }\n  </ul>\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\n  <button variant=\"link\" class=\"mt-1 flex w-full justify-center\" [attr.aria-label]=\"'loadMore' | transloco\"\n    (click)=\"loadMore()\">\n    {{ 'loadMore' | transloco }}\n  </button>\n  }\n</details>\n", styles: ["AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, 0)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { searchInput: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
-
-/**
- * Injection token that indicates whether custom date ranges are allowed.
- *
- * @remarks
- * This token is used to configure the date component to allow users to select custom date ranges.
- *
- * @example
- * ```typescript
- * providers: [
- *   { provide: ALLOW_CUSTOM_RANGE, useValue: false }
- * ]
- * ```
- *
- * @public
- */
-const FILTER_DATE_ALLOW_CUSTOM_RANGE = new InjectionToken("date allow custom range", {
-    factory: () => true
-});
-class DateComponent extends AggregationComponent {
-    destroyRef;
-    datepicker = viewChild(DateRangePickerDirective, ...(ngDevMode ? [{ debugName: "datepicker" }] : []));
-    title = input({ label: "Date", icon: "far fa-calendar-day" }, ...(ngDevMode ? [{ debugName: "title" }] : []));
-    displayEmptyDistributionIntervals = input(false, ...(ngDevMode ? [{ debugName: "displayEmptyDistributionIntervals" }] : []));
-    allowCustomRange = inject(FILTER_DATE_ALLOW_CUSTOM_RANGE);
-    transloco = inject(TranslocoService);
-    dateOptions = computed(() => translateAggregationToDateOptions(this.aggregation(), this.displayEmptyDistributionIntervals()), ...(ngDevMode ? [{ debugName: "dateOptions" }] : []));
-    form = new FormGroup({
-        option: new FormControl(null),
-        customRange: new FormGroup({
-            from: new FormControl(null),
-            to: new FormControl(null)
-        })
-    });
-    today = new Date();
-    lang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "lang" }] : []));
-    validSelection = signal(false, ...(ngDevMode ? [{ debugName: "validSelection" }] : []));
-    constructor(destroyRef) {
-        super();
-        this.destroyRef = destroyRef;
-        this.transloco.langChanges$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((lang) => {
-            this.lang.set(lang);
-            this.datepicker()?.setOptions({ language: lang });
-        });
-        const abortController = new AbortController();
-        addEventListener("changeDate", this.onDateChange.bind(this), {
-            signal: abortController.signal
-        });
-        // apply current date filter from queryParamsStore
-        effect(() => {
-            this.updateForm(this.queryParamsStore.getFilter({
-                field: this.aggregation()?.column,
-                name: this.aggregation()?.name
-            }));
-        });
-        this.form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((changes) => {
-            this.validSelection.set(!!changes.option &&
-                (changes.option !== "custom-range" || changes.customRange?.from !== null || changes.customRange?.to !== null));
-        });
-        destroyRef.onDestroy(() => {
-            abortController.abort();
-        });
-    }
-    aggregation = computed(() => {
-        const name = this.name();
-        if (name !== null) {
-            const agg = this.aggregationsService.processAggregation(name, this.column());
-            return {
-                ...agg,
-                items: agg?.items?.filter((item) => item.display !== "custom-range") ?? []
-            };
-        }
-        return null;
-    }, ...(ngDevMode ? [{ debugName: "aggregation" }] : []));
-    apply() {
-        try {
-            const filter = this.getFormValueFilter();
-            this.queryParamsStore.updateFilter(filter);
-            this.selection.set(false);
-        }
-        catch (err) {
-            warn("Error applying date filter:", err);
-            if (err instanceof Error) {
-                notify.error(this.transloco.translate(err.message));
-            }
-        }
-    }
-    clear(notify = true) {
-        this.form.setValue({
-            option: null,
-            customRange: {
-                from: null,
-                to: null
-            }
-        });
-        const agg = this.aggregation();
-        if (agg && notify) {
-            this.queryParamsStore.removeFilterByName(agg.name);
-        }
-    }
-    updateForm(filter) {
-        if (!filter) {
-            this.clear(false);
-            return;
-        }
-        const { operator, value } = filter;
-        const code = this.dateOptions().find((option) => option.operator === operator && option.value === value)
-            ?.display ?? "custom-range";
-        let from = null, to = null;
-        if (code === "custom-range") {
-            switch (operator) {
-                case "lte":
-                    to = filter.value;
-                    break;
-                case "gte":
-                    from = filter.value;
-                    break;
-                case "between":
-                    from = filter.start;
-                    to = filter.end;
-                    break;
-            }
-        }
-        const formValue = {
-            option: code,
-            customRange: {
-                from: code === "custom-range" ? (from ?? null) : null,
-                to: code === "custom-range" ? (to ?? null) : null
-            }
-        };
-        this.form.setValue(formValue);
-        // Update the date range picker
-        const datepicker = this.datepicker();
-        if (datepicker) {
-            const start = new Date(formValue.customRange.from || "");
-            const end = new Date(formValue.customRange.to || "");
-            setTimeout(() => {
-                datepicker.rangeDatepicker?.setDates(start, end);
-            }, 1000);
-        }
-    }
-    getFormValueFilter() {
-        const value = this.form.value;
-        // value.option is null
-        if (!value.option) {
-            throw new Error("filters.selectionInvalid");
-        }
-        if (value.option !== "custom-range") {
-            const dateOption = this.dateOptions().find((option) => option.display === value.option);
-            const aggregation = this.aggregation();
-            if (!aggregation) {
-                throw new Error("filters.aggregationNotFound");
+                if (item.items?.length && savedItem.items?.length) {
+                    item.items = this.setSelected(item.items, savedItem.items);
+                }
             }
-            return {
-                name: aggregation.name,
-                operator: dateOption?.operator || "eq",
-                field: aggregation.column,
-                display: dateOption?.display ?? "",
-                filters: dateOption?.filters,
-                value: dateOption?.value
-            };
-        }
-        else if (value.customRange) {
-            // if to is null, operator is gte
-            // if from is null, operator is lte
-            // if both are not null, operator is between
-            const aggregation = this.aggregation();
-            if (!aggregation) {
-                throw new Error("filters.aggregationNotFound");
+            return item;
+        });
+    }
+    processAggregations(items) {
+        if (!this.linkChildren())
+            return items;
+        items.forEach((item) => {
+            if (item.items?.length) {
+                this.selectVisually(item.items, item.$selected || false);
             }
-            const filter = {
-                name: aggregation.name,
-                field: aggregation.column,
-                display: value.option
-            };
-            if (value.customRange.from && value.customRange.to) {
-                filter.operator = "between";
-                filter.start = value.customRange.from;
-                filter.end = value.customRange.to;
+        });
+        return items;
+    }
+    selectVisually(items, parentSelected) {
+        items.forEach((item) => {
+            item.$selectedVisually = parentSelected;
+            if (item.items?.length)
+                this.selectVisually(item.items, item.$selected || item.$selectedVisually);
+        });
+    }
+    onToggle(event) {
+        const e = event;
+        this.isCollapsed.set(e.newState === "closed");
+    }
+    expandItems(items, expandedLevel) {
+        this.traverse(items, (lineage, node, level) => {
+            if (!node.$opened && node.items?.length >= 0 && level < expandedLevel) {
+                node.$opened = true;
             }
-            else if (value.customRange.from) {
-                filter.operator = "gte";
-                filter.value = value.customRange.from;
+            if (node.$opened && level >= expandedLevel) {
+                node.$opened = false;
             }
-            else if (value.customRange.to) {
-                filter.operator = "lte";
-                filter.value = value.customRange.to;
+            return false;
+        });
+    }
+    /**
+     * Traverses a tree structure, executing a callback function at every node
+     * @param nodes the nodes to traverse
+     * @param callback the callback function
+     */
+    traverse(nodes, callback) {
+        if (!nodes || nodes.length === 0) {
+            return false;
+        }
+        if (!callback) {
+            return false;
+        }
+        const lineage = [];
+        const stack = [];
+        let _i = nodes.length;
+        while (_i--) {
+            stack.push(nodes[_i]);
+        }
+        while (stack.length) {
+            const node = stack.pop();
+            if (!node) {
+                lineage.pop();
             }
             else {
-                throw new Error("filters.customRangeInvalid");
+                lineage.push(node);
+                if (callback(lineage, node, lineage.length - 1)) {
+                    return true;
+                }
+                stack.push(undefined);
+                if (node.items && node.items.length > 0) {
+                    _i = node.items.length;
+                    while (_i--) {
+                        stack.push(node.items[_i]);
+                    }
+                }
             }
-            return filter;
         }
-        throw new Error("filters.filterInvalid");
+        return false;
     }
-    onDateChange() {
-        // Get the selected dates
-        const [start, end] = this.datepicker()?.getDates() || [];
-        // If both start and end are not selected, reset the datepicker options
-        if (!start && !end) {
-            this.datepicker()?.setOptions({
-                minDate: undefined,
-                maxDate: this.today
-            });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AggregationTreeComponent, isStandalone: true, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit] w-[inherit]\",class())" } }, viewQueries: [{ propertyName: "virtualItems", predicate: ["virtualItem"], descendants: true, isSignal: true }, { propertyName: "scrollElement", first: true, predicate: ["scrollElement"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <i class=\"fa-fw fas fa-triangle-exclamation mr-1\"></i>\r\n    The aggregationTree component does not support list aggregations. Please use\r\n    the &lt;Aggregation /&gt; component instead.\r\n  </div>\r\n}\r\n<details\r\n  [attr.open]=\"expanded()\"\r\n  [attr.name]=\"id()\"\r\n  class=\"group space-y-2\"\r\n  (toggle)=\"onToggle($event)\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\r\n    [class.text-muted-foreground]=\"isEmpty()\"\r\n    class=\"m-0 mt-1 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"grow truncate\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (showFiltersCount() && filtersCount() > 0) {\r\n      <!-- count -->\r\n      <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    <!-- apply filter block -->\r\n    @if (!isCollapsed()) {\r\n      <ButtonGroup>\r\n        @if (hasFilters()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.clearFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); clear()\">\r\n            <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.clearFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n        @if (selection()) {\r\n          <button\r\n            variant=\"primary\"\r\n            size=\"xs\"\r\n            [attr.title]=\"'filters.applyFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); apply()\"\r\n            class=\"h-4 px-1\">\r\n            <FilterIcon class=\"size-4\" />\r\n            <span class=\"sr-only\">{{ \"filters.apply\" | transloco }}</span>\r\n          </button>\r\n        }\r\n\r\n        <!-- select / unselect all -->\r\n        @if (isAllSelected()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.unselectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); unselectAll()\">\r\n            <i class=\"fa-fw far fa-check-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.unselectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        } @else {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.selectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.selectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); selectAll()\">\r\n            <i class=\"fa-fw far fa-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.selectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n      </ButtonGroup>\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\r\n      </button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  @if (aggregation()?.searchable && items().length) {\r\n    <InputGroup class=\"group/item mt-1\">\r\n      <input\r\n        #searchInput\r\n        input-group\r\n        id=\"aggregation-input-{{ column() }}\"\r\n        type=\"text\"\r\n        [attr.placeholder]=\"'search' | transloco\"\r\n        [(ngModel)]=\"searchText\"\r\n        class=\"mt-1\" />\r\n      <InputGroupAddon>\r\n        <SearchIcon\r\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  }\r\n\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"list\"\r\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\r\n      <div\r\n        class=\"absolute top-0 left-0 w-full\"\r\n        [style.transform]=\"\r\n          'translateY(' +\r\n          (virtualizer.getVirtualItems()[0]\r\n            ? virtualizer.getVirtualItems()[0].start\r\n            : 0) +\r\n          'px)'\r\n        \"\r\n        role=\"listitem\">\r\n        @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\r\n          @let item = items()[vItem.index];\r\n          <div #virtualItem [attr.data-index]=\"vItem.index\">\r\n            <AggregationTreeItem\r\n              [node]=\"item\"\r\n              [path]=\"[]\"\r\n              [field]=\"aggregation()?.column\"\r\n              (onSelect)=\"select()\"\r\n              (onOpen)=\"open($event)\"\r\n              (onFilter)=\"apply()\" />\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\r\n    <button\r\n      variant=\"link\"\r\n      class=\"mt-1 flex w-full justify-center\"\r\n      [attr.aria-label]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore()\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n</details>\r\n", styles: ["AggregationTreeItem:has(+AggregationTreeItem){margin-bottom:var(--agg-item-gap, 0)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: AggregationTreeItemComponent, selector: "aggregation-tree-item, AggregationTreeItem, aggregationtreeitem", inputs: ["node", "path", "field"], outputs: ["onSelect", "onOpen", "onFilter"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "directive", type: ButtonGroup, selector: "button-group, ButtonGroup", inputs: ["class", "orientation"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "AggregationTree, aggregation-tree, aggregationtree", imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        ButtonComponent,
+                        AggregationTreeItemComponent,
+                        SyslangPipe,
+                        TranslocoPipe,
+                        BadgeComponent,
+                        ChevronRightIcon,
+                        ButtonGroup,
+                        InputGroupInput,
+                        InputGroupComponent,
+                        InputGroupAddonComponent,
+                        SearchIcon,
+                        FilterIcon
+                    ], standalone: true, host: {
+                        "[class]": 'cn("block h-[inherit] max-h-[inherit] w-[inherit]",class())'
+                    }, template: "@if (!aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <i class=\"fa-fw fas fa-triangle-exclamation mr-1\"></i>\r\n    The aggregationTree component does not support list aggregations. Please use\r\n    the &lt;Aggregation /&gt; component instead.\r\n  </div>\r\n}\r\n<details\r\n  [attr.open]=\"expanded()\"\r\n  [attr.name]=\"id()\"\r\n  class=\"group space-y-2\"\r\n  (toggle)=\"onToggle($event)\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\r\n    [class.text-muted-foreground]=\"isEmpty()\"\r\n    class=\"m-0 mt-1 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"grow truncate\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (showFiltersCount() && filtersCount() > 0) {\r\n      <!-- count -->\r\n      <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    <!-- apply filter block -->\r\n    @if (!isCollapsed()) {\r\n      <ButtonGroup>\r\n        @if (hasFilters()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.clearFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); clear()\">\r\n            <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.clearFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n        @if (selection()) {\r\n          <button\r\n            variant=\"primary\"\r\n            size=\"xs\"\r\n            [attr.title]=\"'filters.applyFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); apply()\"\r\n            class=\"h-4 px-1\">\r\n            <FilterIcon class=\"size-4\" />\r\n            <span class=\"sr-only\">{{ \"filters.apply\" | transloco }}</span>\r\n          </button>\r\n        }\r\n\r\n        <!-- select / unselect all -->\r\n        @if (isAllSelected()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.unselectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); unselectAll()\">\r\n            <i class=\"fa-fw far fa-check-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.unselectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        } @else {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.selectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.selectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); selectAll()\">\r\n            <i class=\"fa-fw far fa-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.selectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n      </ButtonGroup>\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\r\n      </button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  @if (aggregation()?.searchable && items().length) {\r\n    <InputGroup class=\"group/item mt-1\">\r\n      <input\r\n        #searchInput\r\n        input-group\r\n        id=\"aggregation-input-{{ column() }}\"\r\n        type=\"text\"\r\n        [attr.placeholder]=\"'search' | transloco\"\r\n        [(ngModel)]=\"searchText\"\r\n        class=\"mt-1\" />\r\n      <InputGroupAddon>\r\n        <SearchIcon\r\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  }\r\n\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"list\"\r\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\r\n      <div\r\n        class=\"absolute top-0 left-0 w-full\"\r\n        [style.transform]=\"\r\n          'translateY(' +\r\n          (virtualizer.getVirtualItems()[0]\r\n            ? virtualizer.getVirtualItems()[0].start\r\n            : 0) +\r\n          'px)'\r\n        \"\r\n        role=\"listitem\">\r\n        @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\r\n          @let item = items()[vItem.index];\r\n          <div #virtualItem [attr.data-index]=\"vItem.index\">\r\n            <AggregationTreeItem\r\n              [node]=\"item\"\r\n              [path]=\"[]\"\r\n              [field]=\"aggregation()?.column\"\r\n              (onSelect)=\"select()\"\r\n              (onOpen)=\"open($event)\"\r\n              (onFilter)=\"apply()\" />\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\r\n    <button\r\n      variant=\"link\"\r\n      class=\"mt-1 flex w-full justify-center\"\r\n      [attr.aria-label]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore()\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n</details>\r\n", styles: ["AggregationTreeItem:has(+AggregationTreeItem){margin-bottom:var(--agg-item-gap, 0)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { virtualItems: [{ type: i0.ViewChildren, args: ['virtualItem', { isSignal: true }] }], scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
+
+/**
+ * The `AggregationComponent` is responsible for rendering the appropriate aggregation component based on the type of aggregation (date, tree, or list). It uses the `AggregationsService` to retrieve the aggregation data and determines which component to display based on the column type and whether it is a tree structure. The component also provides inputs for configuring its behavior, such as collapsibility, searchability, and showing filter counts.
+ *
+ *
+ * @example
+ * <Aggregation
+ *   name="myAggregation"
+ *   column="myColumn"
+ *   [collapsible]="true"
+ *   [collapsed]="false"
+ *   [showFiltersCount]="true"
+ *   [searchable]="true"
+ *   (onSelect)="handleSelect($event)"
+ * />
+ */
+class AggregationComponent {
+    cn = cn;
+    appStore = inject(AppStore);
+    aggregationsStore = inject(AggregationsStore);
+    aggregationsService = inject(AggregationsService);
+    aggregationDate = viewChild(AggregationDateComponent, ...(ngDevMode ? [{ debugName: "aggregationDate" }] : []));
+    aggregationTree = viewChild(AggregationTreeComponent, ...(ngDevMode ? [{ debugName: "aggregationTree" }] : []));
+    aggregationList = viewChild(AggregationListComponent, ...(ngDevMode ? [{ debugName: "aggregationList" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    /**
+     * The name of the <details> element. When you provide the same id, the component work as an accordion
+     * @defaultValue null
+     */
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    /**
+     * The name of the aggregation. This is a required input and must be provided for the component to function correctly.
+     * @defaultValue undefined
+     */
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    /**
+     * The column associated with the aggregation. This is a required input and must be provided for the component to function correctly.
+     * @defaultValue undefined
+     */
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    /**
+     * A boolean flag indicating whether we want to see the filters count when some is applied
+     * This property is initialized to `false` by default.
+     */
+    showFiltersCount = input(null, ...(ngDevMode ? [{ debugName: "showFiltersCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Determines whether the aggregation component can be collapsed or expanded.
+     * When true, the component will display collapse/expand controls allowing users
+     * to show or hide the aggregation content.
+     *
+     * @default false
+     */
+    collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+    /**
+     * Controls whether the aggregation component is in a collapsed state.
+     * When true, the component will be visually collapsed/hidden.
+     * When false, the component will be expanded/visible.
+     *
+     * @default false
+     */
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    /**
+     * A boolean flag indicating whether the component is searchable.
+     * This property is initialized to `undefined` by default.
+     * "Undefined" and not "false" because this input overrides the custom json settings
+     */
+    searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    expandedLevel = input(undefined, ...(ngDevMode ? [{ debugName: "expandedLevel", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /**
+     * An output event that emits an array of selected `AggregationItem` objects when the user selects items in the aggregation component. This allows parent components to listen for selection changes and react accordingly, such as applying filters or updating the UI based on the selected items.
+     */
+    onSelect = output();
+    /**
+     * A computed property that retrieves the items to be displayed in the aggregation component. It checks for the presence of date, tree, or list aggregation components and returns their respective items. If none of these components are present, it returns an empty array. This allows the component to dynamically display the appropriate items based on the type of aggregation being rendered.
+     *
+     * @returns An array of items to be displayed in the aggregation component.
+     */
+    items = computed(() => this.aggregationDate()?.items() ??
+        this.aggregationTree()?.items() ??
+        this.aggregationList()?.items() ??
+        [], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /**
+     * A computed property that filters the items to include only those that are currently selected. It uses the `items` computed property to retrieve all items and then applies a filter to return only those with the `$selected` property set to true. This allows the component to easily access and manage the selected items for further processing, such as applying filters or updating the UI based on user selections.
+     *
+     * @returns An array of selected items from the aggregation component.
+     */
+    selectedItems = computed(() => this.items().filter(item => item.$selected), ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    /* aggregation */
+    aggregation = computed(() => {
+        // when the aggegation store updates, we need to check if the aggregation is still valid
+        getState(this.aggregationsStore);
+        const agg = this.aggregationsService.getAggregation(this.name(), this.column());
+        if (!agg) {
+            warn(`Aggregation with name ${this.name()} and column ${this.column()} not found`);
+            return undefined;
         }
-        // Update the form with the selected dates
-        if (start && end) {
-            this.form.patchValue({
-                customRange: {
-                    from: start.toISOString(),
-                    to: end.toISOString()
-                }
-            });
+        return agg;
+    }, ...(ngDevMode ? [{ debugName: "aggregation" }] : []));
+    /**
+     * Checks if the specified column is a date filter.
+     *
+     * @param column The column name to check.
+     * @returns True if the column is a date filter, false otherwise.
+     */
+    isDate(column) {
+        if (!column) {
+            return false;
         }
+        return this.appStore.isDateColumn(column);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DateComponent, isStandalone: true, selector: "date-filter,DateFilter", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, displayEmptyDistributionIntervals: { classPropertyName: "displayEmptyDistributionIntervals", publicName: "displayEmptyDistributionIntervals", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "@container" }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "datepicker", first: true, predicate: DateRangePickerDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary\n    [class.cursor-pointer]=\"collapsible()\"\n    class=\"m-0 flex h-8 w-full select-none items-center pl-1 font-semibold\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @if (aggregation()?.icon) {\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"grow\">{{ aggregation()?.display | syslang | transloco }}</span>\n    </ng-content>\n\n      @if (hasFilters()) {\n        <button\n          variant=\"ghost\"\n          size=\"icon\"\n          [attr.title]=\"'filters.clearFilters' | transloco\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"clear()\"\n          (keydown.enter)=\"clear()\">\n          <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\n        </button>\n      }\n\n      @if (selection() && validSelection()) {\n        <button\n          variant=\"ghost\"\n          size=\"icon\"\n          [attr.title]=\"'filters.applyFilters' | transloco\"\n          [attr.aria-label]=\"'filters.applyFilters' | transloco\"\n          (click)=\"apply()\"\n          (keydown.enter)=\"apply()\">\n          <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\n        </button>\n      }\n      @if (collapsible()) {\n        <button variant=\"none\" title=\"Open/Close\" class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n          <chevronright />\n        </button>\n      }\n  </summary>\n\n  <!-- content wrapper -->\n  <form [formGroup]=\"form\">\n    <ul class=\"flex flex-col gap-1 pt-2 scrollbar-thin max-h-[calc(var(--height,100%)-100px)] snap-y snap-start overflow-auto\" role=\"list\">\n      @for (option of dateOptions(); track $index) {\n        <li\n          role=\"listitem\"\n          tabindex=\"0\"\n          (click)=\"radio.click()\"\n          [attr.aria-label]=\"option.display | syslang | transloco\"\n          [class]=\"\n            cn(\n              'flex p-0 px-2 leading-7',\n              form.get('option')?.value === option.display && 'bg-accent',\n              option.hidden && 'hidden',\n              option.disabled && 'disabled pointer-events-none text-neutral-300'\n            )\n          \"\n          [attr.aria-hidden]=\"option.disabled\">\n          <input\n            #radio\n            type=\"radio\"\n            formControlName=\"option\"\n            id=\"date-filter-{{ option.display }}\"\n            [attr.disabled]=\"option.disabled ? true : null\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"select()\"\n            value=\"{{ option.display }}\" />\n\n          <label for=\"date-filter-{{ option.display }}\" class=\"grow cursor-pointer p-1\">\n            {{ option.display | syslang | transloco }}\n          </label>\n        </li>\n      }\n\n      @if (allowCustomRange) {\n        <li role=\"listitem\" aria-label=\"custom range\" class=\"flex px-2 leading-7\" [class.select]=\"form.get('option')?.value === 'custom-range'\">\n          <input #radiorange type=\"radio\" formControlName=\"option\" id=\"date-filter-custom-range\" value=\"custom-range\" (click)=\"select()\" />\n\n          <div\n            class=\"flex @max-[340px]:flex-wrap grow gap-1 p-1 @container\"\n            daterangepicker\n            datepicker-buttons\n            [datepicker-language]=\"lang()\"\n            [datepicker-min]=\"form.get('customRange.from')?.value || undefined\"\n            [datepicker-max]=\"form.get('customRange.to')?.value ?? today.toISOString()\"\n            (click)=\"radiorange.click()\">\n            <div class=\"flex gap-1\">\n              <label for=\"datepicker-range-start\" class=\"min-w-10\">{{ 'from' | transloco }}</label>\n              <input id=\"datepicker-range-start\" name=\"start\" type=\"text\" class=\"h-8 min-w-[13ch]\" />\n            </div>\n            <div class=\"flex gap-1\">\n              <label for=\"datepicker-range-end\" class=\"text-right min-w-10\">{{ 'to' | transloco }}</label>\n              <input id=\"datepicker-range-end\" name=\"end\" type=\"text\" class=\"h-8 min-w-[13ch]\" />\n            </div>\n          </div>\n        </li>\n      }\n    </ul>\n  </form>\n</details>\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DateRangePickerDirective, selector: "[daterangepicker]", inputs: ["datepicker-title", "datepicker-autohide", "datepicker-clear", "datepicker-today", "datepicker-buttons", "datepicker-today-highlight", "datepicker-language", "datepicker-format", "datepicker-max", "datepicker-min", "datepicker-orientation"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AggregationComponent, isStandalone: true, selector: "Aggregation, aggregation", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\",class())" } }, viewQueries: [{ propertyName: "aggregationDate", first: true, predicate: AggregationDateComponent, descendants: true, isSignal: true }, { propertyName: "aggregationTree", first: true, predicate: AggregationTreeComponent, descendants: true, isSignal: true }, { propertyName: "aggregationList", first: true, predicate: AggregationListComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (isDate(aggregation()?.column)) {
+    <AggregationDate
+      class="max-w-80"
+      [id]="id()"
+      [name]="name()"
+      [column]="column()"
+      [collapsed]="collapsed()"
+      [collapsible]="collapsible()"
+      [showFiltersCount]="showFiltersCount()"
+      [searchable]="searchable()"
+      [title]="{ label: 'Date', icon: 'far fa-calendar-day' }"
+      />
+  } @else if (aggregation()?.isTree) {
+    <AggregationTree
+      class="max-w-80"
+      [id]="id()"
+      [name]="name()"
+      [column]="column()"
+      [collapsed]="collapsed()"
+      [collapsible]="collapsible()"
+      [showFiltersCount]="showFiltersCount()"
+      [searchable]="searchable()"
+      [expandedLevel]="expandedLevel()"
+      (onSelect)="onSelect.emit($event)"
+      />
+  }
+  @else {
+    <AggregationList
+      class="w-60"
+      [id]="id()"
+      [name]="name()"
+      [column]="column()"
+      [collapsed]="collapsed()"
+      [collapsible]="collapsible()"
+      [showFiltersCount]="showFiltersCount()"
+      [searchable]="searchable()"
+      (onSelect)="onSelect.emit($event)"
+      />
+  }
+  `, isInline: true, dependencies: [{ kind: "component", type: AggregationListComponent, selector: "AggregationList, aggregation-list, aggregationlist", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "searchText"], outputs: ["onSelect", "searchTextChange"] }, { kind: "component", type: AggregationTreeComponent, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: ["class", "id", "name", "column", "expandedLevel", "collapsible", "collapsed", "searchable", "showFiltersCount", "searchText"], outputs: ["onSelect", "searchTextChange"] }, { kind: "component", type: AggregationDateComponent, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: ["title", "displayEmptyDistributionIntervals"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationComponent, decorators: [{
             type: Component,
-            args: [{ selector: "date-filter,DateFilter", standalone: true, providers: [provideTranslocoScope("filters")], imports: [
-                        InputComponent,
-                        ButtonComponent,
-                        ListItemComponent,
-                        ReactiveFormsModule,
-                        TranslocoPipe,
-                        SyslangPipe,
-                        DateRangePickerDirective,
-                        ChevronRightIcon
-                    ], host: {
-                        class: "@container"
-                    }, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary\n    [class.cursor-pointer]=\"collapsible()\"\n    class=\"m-0 flex h-8 w-full select-none items-center pl-1 font-semibold\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @if (aggregation()?.icon) {\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"grow\">{{ aggregation()?.display | syslang | transloco }}</span>\n    </ng-content>\n\n      @if (hasFilters()) {\n        <button\n          variant=\"ghost\"\n          size=\"icon\"\n          [attr.title]=\"'filters.clearFilters' | transloco\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"clear()\"\n          (keydown.enter)=\"clear()\">\n          <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\n        </button>\n      }\n\n      @if (selection() && validSelection()) {\n        <button\n          variant=\"ghost\"\n          size=\"icon\"\n          [attr.title]=\"'filters.applyFilters' | transloco\"\n          [attr.aria-label]=\"'filters.applyFilters' | transloco\"\n          (click)=\"apply()\"\n          (keydown.enter)=\"apply()\">\n          <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\n        </button>\n      }\n      @if (collapsible()) {\n        <button variant=\"none\" title=\"Open/Close\" class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n          <chevronright />\n        </button>\n      }\n  </summary>\n\n  <!-- content wrapper -->\n  <form [formGroup]=\"form\">\n    <ul class=\"flex flex-col gap-1 pt-2 scrollbar-thin max-h-[calc(var(--height,100%)-100px)] snap-y snap-start overflow-auto\" role=\"list\">\n      @for (option of dateOptions(); track $index) {\n        <li\n          role=\"listitem\"\n          tabindex=\"0\"\n          (click)=\"radio.click()\"\n          [attr.aria-label]=\"option.display | syslang | transloco\"\n          [class]=\"\n            cn(\n              'flex p-0 px-2 leading-7',\n              form.get('option')?.value === option.display && 'bg-accent',\n              option.hidden && 'hidden',\n              option.disabled && 'disabled pointer-events-none text-neutral-300'\n            )\n          \"\n          [attr.aria-hidden]=\"option.disabled\">\n          <input\n            #radio\n            type=\"radio\"\n            formControlName=\"option\"\n            id=\"date-filter-{{ option.display }}\"\n            [attr.disabled]=\"option.disabled ? true : null\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"select()\"\n            value=\"{{ option.display }}\" />\n\n          <label for=\"date-filter-{{ option.display }}\" class=\"grow cursor-pointer p-1\">\n            {{ option.display | syslang | transloco }}\n          </label>\n        </li>\n      }\n\n      @if (allowCustomRange) {\n        <li role=\"listitem\" aria-label=\"custom range\" class=\"flex px-2 leading-7\" [class.select]=\"form.get('option')?.value === 'custom-range'\">\n          <input #radiorange type=\"radio\" formControlName=\"option\" id=\"date-filter-custom-range\" value=\"custom-range\" (click)=\"select()\" />\n\n          <div\n            class=\"flex @max-[340px]:flex-wrap grow gap-1 p-1 @container\"\n            daterangepicker\n            datepicker-buttons\n            [datepicker-language]=\"lang()\"\n            [datepicker-min]=\"form.get('customRange.from')?.value || undefined\"\n            [datepicker-max]=\"form.get('customRange.to')?.value ?? today.toISOString()\"\n            (click)=\"radiorange.click()\">\n            <div class=\"flex gap-1\">\n              <label for=\"datepicker-range-start\" class=\"min-w-10\">{{ 'from' | transloco }}</label>\n              <input id=\"datepicker-range-start\" name=\"start\" type=\"text\" class=\"h-8 min-w-[13ch]\" />\n            </div>\n            <div class=\"flex gap-1\">\n              <label for=\"datepicker-range-end\" class=\"text-right min-w-10\">{{ 'to' | transloco }}</label>\n              <input id=\"datepicker-range-end\" name=\"end\" type=\"text\" class=\"h-8 min-w-[13ch]\" />\n            </div>\n          </div>\n        </li>\n      }\n    </ul>\n  </form>\n</details>\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"] }]
-        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { datepicker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DateRangePickerDirective), { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], displayEmptyDistributionIntervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayEmptyDistributionIntervals", required: false }] }] } });
+            args: [{
+                    selector: "Aggregation, aggregation",
+                    imports: [AggregationListComponent, AggregationTreeComponent, AggregationDateComponent],
+                    template: `
+    @if (isDate(aggregation()?.column)) {
+    <AggregationDate
+      class="max-w-80"
+      [id]="id()"
+      [name]="name()"
+      [column]="column()"
+      [collapsed]="collapsed()"
+      [collapsible]="collapsible()"
+      [showFiltersCount]="showFiltersCount()"
+      [searchable]="searchable()"
+      [title]="{ label: 'Date', icon: 'far fa-calendar-day' }"
+      />
+  } @else if (aggregation()?.isTree) {
+    <AggregationTree
+      class="max-w-80"
+      [id]="id()"
+      [name]="name()"
+      [column]="column()"
+      [collapsed]="collapsed()"
+      [collapsible]="collapsible()"
+      [showFiltersCount]="showFiltersCount()"
+      [searchable]="searchable()"
+      [expandedLevel]="expandedLevel()"
+      (onSelect)="onSelect.emit($event)"
+      />
+  }
+  @else {
+    <AggregationList
+      class="w-60"
+      [id]="id()"
+      [name]="name()"
+      [column]="column()"
+      [collapsed]="collapsed()"
+      [collapsible]="collapsible()"
+      [showFiltersCount]="showFiltersCount()"
+      [searchable]="searchable()"
+      (onSelect)="onSelect.emit($event)"
+      />
+  }
+  `,
+                    host: {
+                        "[class]": 'cn("block h-[inherit] max-h-[inherit]",class())'
+                    }
+                }]
+        }], propDecorators: { aggregationDate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationDateComponent), { isSignal: true }] }], aggregationTree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationTreeComponent), { isSignal: true }] }], aggregationList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationListComponent), { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }] } });
 
 class AsideFiltersComponent {
     cn = cn;
@@ -12782,14 +13562,23 @@ class AsideFiltersComponent {
         const asideFilters = this.appStore.filters().filter((f) => f.position === "left");
         return this.appStore.getAuthorized(asideFilters);
     }, ...(ngDevMode ? [{ debugName: "asideFilters" }] : []));
+    /**
+     * Checks if the specified column is a date filter.
+     *
+     * @param column The column name to check.
+     * @returns True if the column is a date filter, false otherwise.
+     */
+    isDate(column) {
+        return this.appStore.isDateColumn(column);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AsideFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AsideFiltersComponent, isStandalone: true, selector: "aside-filters, AsideFilters, asidefilters", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cn('flex flex-col gap-2 overflow-auto', class())" } }, ngImport: i0, template: `
   <div class="flex flex-col gap-2">
     @for (agg of asideFilters(); track agg.name) {
-      <Aggregation [name]="agg.name" [column]="agg.column" showFiltersCount />
+      <Aggregation id="aside-filters" [name]="agg.name" [column]="agg.column" showFiltersCount />
     }
   </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "searchText"], outputs: ["onSelect", "searchTextChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel"], outputs: ["onSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AsideFiltersComponent, decorators: [{
             type: Component,
@@ -12799,7 +13588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     template: `
   <div class="flex flex-col gap-2">
     @for (agg of asideFilters(); track agg.name) {
-      <Aggregation [name]="agg.name" [column]="agg.column" showFiltersCount />
+      <Aggregation id="aside-filters" [name]="agg.name" [column]="agg.column" showFiltersCount />
     }
   </div>
   `,
@@ -12814,6 +13603,7 @@ class FilterButtonComponent {
     column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
     position = input("bottom-start", ...(ngDevMode ? [{ debugName: "position" }] : []));
     offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    expandedLevel = input(undefined, ...(ngDevMode ? [{ debugName: "expandedLevel", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     variant = signal("ghost", ...(ngDevMode ? [{ debugName: "variant" }] : []));
     filter = signal({
         name: "",
@@ -12869,7 +13659,7 @@ class FilterButtonComponent {
         return this.appStore.isDateColumn(column);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FilterButtonComponent, isStandalone: true, selector: "filter-button, FilterButton", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class.hidden": "filter().hidden" } }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FilterButtonComponent, isStandalone: true, selector: "filter-button, FilterButton", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class.hidden": "filter().hidden" } }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <Popover [disabled]="filter().disabled" class="group">
       <button
         [variant]="variant()"
@@ -12906,25 +13696,17 @@ class FilterButtonComponent {
         [offset]="offset()"
       >
       @if(contentRef.isVisible) {
-        @if (isDate(filter().column)) {
-          <DateFilter
-            class="*:details-content:[--height:19lh] w-max max-w-80"
-            [name]="filter().name"
-            [column]="filter().column"
-            id="filter-{{ filter().column }}"
-            [title]="{ label: 'Date', icon: 'far fa-calendar-day' }"
-          />
-        } @else {
           <Aggregation
-            class="*:details-content:[--height:19lh] w-max max-w-80"
+            class="w-60 [--height:19lh]"
+            id="filter-{{ filter().column }}"
             [name]="filter().name"
             [column]="filter().column"
-            id="filter-{{ filter().column }}" />
-        }
+            [expandedLevel]="expandedLevel()"
+          />
       }
       </PopoverContent>
     </Popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: PopoverComponent, selector: "popover, Popover", inputs: ["disabled", "closeOnScroll"], outputs: ["closed"] }, { kind: "directive", type: PopoverContentComponent, selector: "popover-content, PopoverContent, popovercontent", inputs: ["class", "position", "keepOpen", "offset", "strategy"], exportAs: ["popoverContent"] }, { kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "searchText"], outputs: ["onSelect", "searchTextChange"] }, { kind: "component", type: DateComponent, selector: "date-filter,DateFilter", inputs: ["title", "displayEmptyDistributionIntervals"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: OperatorPipe, name: "operator" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: PopoverComponent, selector: "popover, Popover", inputs: ["disabled", "closeOnScroll"], outputs: ["closed"] }, { kind: "directive", type: PopoverContentComponent, selector: "popover-content, PopoverContent, popovercontent", inputs: ["class", "position", "keepOpen", "offset", "strategy"], exportAs: ["popoverContent"] }, { kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel"], outputs: ["onSelect"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: OperatorPipe, name: "operator" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FilterButtonComponent, decorators: [{
             type: Component,
@@ -12939,7 +13721,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         TranslocoPipe,
                         AggregationComponent,
                         SyslangPipe,
-                        DateComponent,
                         BadgeComponent
                     ],
                     template: `
@@ -12979,21 +13760,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         [offset]="offset()"
       >
       @if(contentRef.isVisible) {
-        @if (isDate(filter().column)) {
-          <DateFilter
-            class="*:details-content:[--height:19lh] w-max max-w-80"
-            [name]="filter().name"
-            [column]="filter().column"
-            id="filter-{{ filter().column }}"
-            [title]="{ label: 'Date', icon: 'far fa-calendar-day' }"
-          />
-        } @else {
           <Aggregation
-            class="*:details-content:[--height:19lh] w-max max-w-80"
+            class="w-60 [--height:19lh]"
+            id="filter-{{ filter().column }}"
             [name]="filter().name"
             [column]="filter().column"
-            id="filter-{{ filter().column }}" />
-        }
+            [expandedLevel]="expandedLevel()"
+          />
       }
       </PopoverContent>
     </Popover>
@@ -13003,7 +13776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         role: "listitem"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }] } });
 
 const FILTERS_BREAKPOINT = new InjectionToken('FILTERS_BREAKPOINT', { factory: () => 5 });
 
@@ -13079,17 +13852,6 @@ class MoreComponent {
             });
         });
     }
-    /**
-     * Checks if the specified column is a date filter.
-     *
-     * @param column The column name to check.
-     * @returns True if the column is a date filter, false otherwise.
-     */
-    isDate(column) {
-        if (!column)
-            return false;
-        return this.appStore.isDateColumn(column);
-    }
     /**
      * Checks whether there are active filters for the current aggregation column.
      *
@@ -13104,39 +13866,31 @@ class MoreComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MoreComponent, isStandalone: true, selector: "more, More", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, includedFilters: { classPropertyName: "includedFilters", publicName: "includedFilters", isSignal: true, isRequired: false, transformFunction: null }, excludedFilters: { classPropertyName: "excludedFilters", publicName: "excludedFilters", isSignal: true, isRequired: false, transformFunction: null }, aggregations: { classPropertyName: "aggregations", publicName: "aggregations", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "divide-y divide-muted-foreground/18" }, ngImport: i0, template: `
     @for (filter of visibleFilters(); track $index) {
-      @if (isDate(filter.column)) {
-        <DateFilter class="p-1" id="more-filters" [name]="filter.name" [column]="filter.column" collapsible collapsed />
-      } @else {
-        <Aggregation
-          class="w-full max-w-80"
-          id="more-filters"
-          [attr.title]="'filters.openFilter' | transloco: { filter: filter.display || filter.name }"
-          showFiltersCount
-          collapsible
-          collapsed
-          [name]="filter.name"
-          [column]="filter.column" />
-      }
-    }
-  `, isInline: true, styles: [":host{scrollbar-width:none}\n"], dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "searchText"], outputs: ["onSelect", "searchTextChange"] }, { kind: "component", type: DateComponent, selector: "date-filter,DateFilter", inputs: ["title", "displayEmptyDistributionIntervals"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+      <Aggregation
+        class="w-60 max-w-80 [--height:15lh]"
+        id="more-filters"
+        [attr.title]="'filters.openFilter' | transloco: { filter: filter.display || filter.name }"
+        showFiltersCount
+        [collapsible]="true"
+        [collapsed]="true"
+        [name]="filter.name"
+        [column]="filter.column" />
+    }
+  `, isInline: true, styles: [":host{scrollbar-width:none}\n"], dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel"], outputs: ["onSelect"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MoreComponent, decorators: [{
             type: Component,
-            args: [{ selector: "more, More", standalone: true, imports: [AggregationComponent, DateComponent, TranslocoPipe], template: `
+            args: [{ selector: "more, More", standalone: true, imports: [AggregationComponent, TranslocoPipe], template: `
     @for (filter of visibleFilters(); track $index) {
-      @if (isDate(filter.column)) {
-        <DateFilter class="p-1" id="more-filters" [name]="filter.name" [column]="filter.column" collapsible collapsed />
-      } @else {
-        <Aggregation
-          class="w-full max-w-80"
-          id="more-filters"
-          [attr.title]="'filters.openFilter' | transloco: { filter: filter.display || filter.name }"
-          showFiltersCount
-          collapsible
-          collapsed
-          [name]="filter.name"
-          [column]="filter.column" />
-      }
+      <Aggregation
+        class="w-60 max-w-80 [--height:15lh]"
+        id="more-filters"
+        [attr.title]="'filters.openFilter' | transloco: { filter: filter.display || filter.name }"
+        showFiltersCount
+        [collapsible]="true"
+        [collapsed]="true"
+        [name]="filter.name"
+        [column]="filter.column" />
     }
   `, host: {
                         class: "divide-y divide-muted-foreground/18"
@@ -13265,6 +14019,7 @@ class FiltersBarComponent {
      * @defaultValue 8px
      */
     offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    expandedLevel = input(undefined, ...(ngDevMode ? [{ debugName: "expandedLevel", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     /**
      * Event emitted when the clear filters button is clicked.
      * This event can be used to perform additional actions when filters are cleared.
@@ -13357,6 +14112,9 @@ class FiltersBarComponent {
      */
     clearFilters() {
         this.queryParamsStore.clearFilters();
+        this.aggregationsStore.aggregations().forEach(agg => {
+            sessionStorage.removeItem(`agg-${agg.column}`);
+        });
         this.onClearFilters.emit();
     }
     /**
@@ -13395,7 +14153,7 @@ class FiltersBarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FiltersBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FiltersBarComponent, isStandalone: true, selector: "filters-bar, FiltersBar, filtersbar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, morePosition: { classPropertyName: "morePosition", publicName: "morePosition", isSignal: true, isRequired: false, transformFunction: null }, aggregations: { classPropertyName: "aggregations", publicName: "aggregations", isSignal: true, isRequired: false, transformFunction: null }, includeFilters: { classPropertyName: "includeFilters", publicName: "includeFilters", isSignal: true, isRequired: false, transformFunction: null }, excludeFilters: { classPropertyName: "excludeFilters", publicName: "excludeFilters", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, showMoreFiltersButton: { classPropertyName: "showMoreFiltersButton", publicName: "showMoreFiltersButton", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClearFilters: "onClearFilters", onClearBasket: "onClearBasket" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "cn('block relative', class())" } }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "moreButtonRef", first: true, predicate: MoreButtonComponent, descendants: true, isSignal: true }, { propertyName: "filterButtonRefs", predicate: FilterButtonComponent, descendants: true, isSignal: true }, { propertyName: "overflowManagerRef", first: true, predicate: OverflowManagerDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FiltersBarComponent, isStandalone: true, selector: "filters-bar, FiltersBar, filtersbar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, morePosition: { classPropertyName: "morePosition", publicName: "morePosition", isSignal: true, isRequired: false, transformFunction: null }, aggregations: { classPropertyName: "aggregations", publicName: "aggregations", isSignal: true, isRequired: false, transformFunction: null }, includeFilters: { classPropertyName: "includeFilters", publicName: "includeFilters", isSignal: true, isRequired: false, transformFunction: null }, excludeFilters: { classPropertyName: "excludeFilters", publicName: "excludeFilters", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, showMoreFiltersButton: { classPropertyName: "showMoreFiltersButton", publicName: "showMoreFiltersButton", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClearFilters: "onClearFilters", onClearBasket: "onClearBasket" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "cn('block relative', class())" } }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "moreButtonRef", first: true, predicate: MoreButtonComponent, descendants: true, isSignal: true }, { propertyName: "filterButtonRefs", predicate: FilterButtonComponent, descendants: true, isSignal: true }, { propertyName: "overflowManagerRef", first: true, predicate: OverflowManagerDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-container overflowManager [direction]="direction()" [target]="el.nativeElement" (count)="adjustFiltersCount($event)">
       @if (hasFilters()) {
         <button
@@ -13429,7 +14187,7 @@ class FiltersBarComponent {
         role="list"
         aria-label="Filters list">
         @for (filter of authorizedFilters(); track filter.name) {
-          <FilterButton class="max-w-60" overflowItem [name]="filter.name" [column]="filter.column" [position]="position()" [offset]="offset()" />
+          <FilterButton class="max-w-60" overflowItem [name]="filter.name" [column]="filter.column" [position]="position()" [offset]="offset()" [expandedLevel]="expandedLevel()" />
         }
 
         <!-- More button to show more filters if there are any, it's hidden by default -->
@@ -13447,7 +14205,7 @@ class FiltersBarComponent {
       </div>
       }
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: MoreButtonComponent, selector: "more-button, MoreButton", inputs: ["count", "position", "includedFilters", "excludedFilters", "aggregations"] }, { kind: "component", type: FilterButtonComponent, selector: "filter-button, FilterButton", inputs: ["name", "column", "position", "offset"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: MoreButtonComponent, selector: "more-button, MoreButton", inputs: ["count", "position", "includedFilters", "excludedFilters", "aggregations"] }, { kind: "component", type: FilterButtonComponent, selector: "filter-button, FilterButton", inputs: ["name", "column", "position", "offset", "expandedLevel"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FiltersBarComponent, decorators: [{
             type: Component,
@@ -13498,7 +14256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         role="list"
         aria-label="Filters list">
         @for (filter of authorizedFilters(); track filter.name) {
-          <FilterButton class="max-w-60" overflowItem [name]="filter.name" [column]="filter.column" [position]="position()" [offset]="offset()" />
+          <FilterButton class="max-w-60" overflowItem [name]="filter.name" [column]="filter.column" [position]="position()" [offset]="offset()" [expandedLevel]="expandedLevel()" />
         }
 
         <!-- More button to show more filters if there are any, it's hidden by default -->
@@ -13522,7 +14280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         "(click)": "handleClick($event)"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], morePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "morePosition", required: false }] }], aggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregations", required: false }] }], includeFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeFilters", required: false }] }], excludeFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeFilters", required: false }] }], filtersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersCount", required: false }] }], showMoreFiltersButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoreFiltersButton", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], onClearFilters: [{ type: i0.Output, args: ["onClearFilters"] }], onClearBasket: [{ type: i0.Output, args: ["onClearBasket"] }], moreButtonRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MoreButtonComponent), { isSignal: true }] }], filterButtonRefs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FilterButtonComponent), { isSignal: true }] }], overflowManagerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OverflowManagerDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], morePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "morePosition", required: false }] }], aggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregations", required: false }] }], includeFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeFilters", required: false }] }], excludeFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeFilters", required: false }] }], filtersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersCount", required: false }] }], showMoreFiltersButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoreFiltersButton", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], onClearFilters: [{ type: i0.Output, args: ["onClearFilters"] }], onClearBasket: [{ type: i0.Output, args: ["onClearBasket"] }], moreButtonRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MoreButtonComponent), { isSignal: true }] }], filterButtonRefs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FilterButtonComponent), { isSignal: true }] }], overflowManagerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OverflowManagerDirective), { isSignal: true }] }] } });
 
 class LabelService {
     appStore = inject(AppStore);
@@ -13846,7 +14604,7 @@ class MultiSelectLabelsComponent {
         {{ 'labels.error' | transloco }}
       </div>
     }
-  `, isInline: true, styles: [".anchor:has(.popover:popover-open){z-index:var(--z-menu, 1000);border-radius:var(--radius) var(--radius) 0 0}.anchor .popover::backdrop{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.popover{width:anchor-size(width);top:anchor(bottom);left:anchor(left)}@supports (-moz-appearance: none){.popover{margin:calc(33.3333333333vh + 30px) 25vw;width:50vw}}@supports (background: -webkit-named-image(i)){.popover{margin:calc(33.3333333333vh + 30px) 25vw;width:50vw}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, styles: [".anchor:has(.popover:popover-open){z-index:var(--z-menu, 1000);border-radius:var(--radius) var(--radius) 0 0}.anchor .popover::backdrop{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.popover{width:anchor-size(width);top:anchor(bottom);left:anchor(left)}@supports (-moz-appearance: none){.popover{margin:calc(33.3333333333vh + 30px) 25vw;width:50vw}}@supports (background: -webkit-named-image(i)){.popover{margin:calc(33.3333333333vh + 30px) 25vw;width:50vw}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MultiSelectLabelsComponent, decorators: [{
             type: Component,
@@ -14320,7 +15078,7 @@ class SavedSearchDialog {
           </DialogFooter>
         </DialogContent>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SavedSearchDialog, decorators: [{
             type: Component,
@@ -14443,7 +15201,13 @@ class UserProfileFormComponent {
     appStore = inject(AppStore);
     transloco = inject(TranslocoService);
     createInputElement = viewChild("avatarInput", ...(ngDevMode ? [{ debugName: "createInputElement" }] : []));
-    dataKeys = ["fullName", "mail", "jobTitle", "group", "organisation", "location"];
+    dataKeys = ["fullName", "mail", "jobTitle", "group", "organisation", "location", "skills", "profilePhoto"];
+    keys = computed(() => {
+        const data = this.appStore.general()?.features?.userProfile?.data;
+        return data?.length ? this.dataKeys.filter(key => data.some(k => k === key)) : this.dataKeys;
+    }, ...(ngDevMode ? [{ debugName: "keys" }] : []));
+    formKeys = computed(() => this.keys().filter(k => k !== "profilePhoto"), ...(ngDevMode ? [{ debugName: "formKeys" }] : []));
+    allowProfilePhoto = computed(() => this.keys().some(k => k === "profilePhoto"), ...(ngDevMode ? [{ debugName: "allowProfilePhoto" }] : []));
     initials = computed(() => {
         const fullName = this.userProfile()?.data?.fullName;
         if (!fullName)
@@ -14453,6 +15217,7 @@ class UserProfileFormComponent {
             .map((word) => word[0].toUpperCase())
             .join("");
     }, ...(ngDevMode ? [{ debugName: "initials" }] : []));
+    username = computed(() => this.principalStore.name() || this.principalStore.email() || null, ...(ngDevMode ? [{ debugName: "username" }] : []));
     propertyToEdit = signal(undefined, ...(ngDevMode ? [{ debugName: "propertyToEdit" }] : []));
     value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
     currentLanguage = model(...(ngDevMode ? [undefined, { debugName: "currentLanguage" }] : []));
@@ -14464,11 +15229,15 @@ class UserProfileFormComponent {
     principal = computed(() => this.principalStore.principal?.(), ...(ngDevMode ? [{ debugName: "principal" }] : []));
     customData = computed(() => {
         const customData = this.appStore.general()?.features?.userProfile?.customData;
-        if (customData?.length)
-            return customData;
-        const data = this.userProfile()?.customData;
-        return data ? Object.keys(data) : [];
+        const profileKeys = this.userProfile()?.customData;
+        return (customData?.length ? customData : (profileKeys ? Object.keys(profileKeys) : []))
+            .filter(key => !this.keys().some(k => k.toLowerCase() === key.toLowerCase())); // hide any duplicates in customData keys from data's
     }, ...(ngDevMode ? [{ debugName: "customData" }] : []));
+    allowChangePassword = computed(() => {
+        const { useCredentials } = globalConfig;
+        const { allowChangePassword = false } = this.appStore.general()?.features || {};
+        return allowChangePassword && useCredentials && this.principal().editablePartition;
+    }, ...(ngDevMode ? [{ debugName: "allowChangePassword" }] : []));
     constructor() {
         this.currentLanguage.set(this.transloco.getActiveLang());
         effect(() => {
@@ -14518,14 +15287,17 @@ class UserProfileFormComponent {
      * @param category data or customData
      * @param propertyName property name
      */
-    onDeleteData(category, propertyName) {
-        this.userProfile.update((profile) => {
-            if (profile?.[category]) {
-                profile[category][propertyName] = "";
-            }
-            return profile;
-        });
-        this.onSaveData(category, propertyName);
+    async onDeleteData(category, propertyName) {
+        const response = await deleteUserProfileProperty(this.userProfile(), category, propertyName);
+        if (response) {
+            info("Deleted user profile property", response);
+            const userProfile = JSON.parse(JSON.stringify(this.userProfile()));
+            userProfile[category][propertyName] = undefined;
+            this.userProfileResource.set(userProfile);
+        }
+        else {
+            info("Could not delete user profile property", response);
+        }
     }
     /**
      * Saving a data property
@@ -14545,8 +15317,8 @@ class UserProfileFormComponent {
             this.userProfileResource.set({
                 ...newUserProfile,
                 ...response,
-                data: { ...(category === "data" ? newUserProfile?.data : {}), ...(response.data || {}) },
-                customData: { ...(category === "customData" ? newUserProfile?.customData : {}), ...(response.customData || {}) }
+                data: { ...(newUserProfile?.data || {}), ...(response.data || {}) },
+                customData: { ...(newUserProfile?.customData || {}), ...(response.customData || {}) }
             });
         }
         this.value.set(undefined);
@@ -14594,7 +15366,7 @@ class UserProfileFormComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UserProfileFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: UserProfileFormComponent, isStandalone: true, selector: "user-profile-form, UserProfileForm, userprofileform", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", currentLanguage: "currentLanguageChange" }, providers: [provideTranslocoScope("user-profile", "login")], viewQueries: [{ propertyName: "createInputElement", first: true, predicate: ["avatarInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex flex-col gap-2 p-4\">\n    <div class=\"flex mb-4\">\n      <!-- AVATAR -->\n      <Avatar\n        class=\"bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground/80 cursor-pointer size-14\"\n        (click)=\"avatarInput.click()\">\n        @if (profile?.data?.profilePhoto) {\n          <AvatarImage [src]=\"profile?.data?.profilePhoto!\" width=\"44\" height=\"44\" alt=\"avatar\" />\n        }\n        <AvatarFallback class=\"text-lg\">\n          @if (initials()) {\n            <span>{{ initials() }}</span>\n          }\n          @else {\n            <UserIcon class=\"size-7 p-1\" />\n          }\n        </AvatarFallback>\n      </Avatar>\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE -->\n        <select\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 rounded-md border px-2 hover:outline focus:outline\"\n          [(ngModel)]=\"currentLanguage\" (change)=\"changeLanguage()\">\n          @for (lang of AllLanguages; track lang.code) {\n            <option [value]=\"lang.code\">\n              {{ lang.label }}\n            </option>\n          }\n        </select>\n        <!-- CHANGE PASSWORD -->\n        @if (principal().editablePartition) {\n          <button [disabled]=\"changingPassword()\" (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <ChangePassword\n        [redirectAfterSuccess]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    }\n    @else {\n      @for (key of dataKeys; track key) {\n      <div>\n        <p>{{ `userProfile.data.${key}` | transloco}}</p>\n        <div class=\"flex flex-row group\">\n          <div class=\"grow\" [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n            @if (propertyToEdit() === 'data.'+key) {\n            <input id=\"user-profile-{{key}}\" type=\"text\" [(ngModel)]=\"value\" (keydown.enter)=\"onSaveData('data', key)\" />\n            } @else {\n            {{ getDataValue('data', key) || ('userProfile.notDefined' | transloco) }}\n            }\n          </div>\n          @if (propertyToEdit() === 'data.'+key) {\n          <button variant=\"ghost\" size=\"icon\" class=\"mx-2 cursor-pointer\"\n            title=\"{{ 'userProfile.editProperty' | transloco }}\" [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n            (click)=\"onSaveData('data', key)\">\n            <i class=\"fa-fw fas fa-save\"></i>\n          </button>\n          <button variant=\"ghost\" size=\"icon\" class=\"cursor-pointer\" title=\"{{ 'userProfile.editProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.editProperty' | transloco\" (click)=\"propertyToEdit.set(undefined)\">\n            <UndoIcon />\n          </button>\n          } @else {\n          <button variant=\"ghost\" size=\"icon\" class=\"invisible group-hover:visible mx-2 cursor-pointer\"\n            title=\"{{ 'userProfile.editProperty' | transloco }}\" [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n            (click)=\"onEdit('data', key)\">\n            <EditIcon />\n          </button>\n          <button variant=\"ghost\" size=\"icon\" class=\"text-destructive invisible group-hover:visible cursor-pointer\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\" (click)=\"onDeleteData('data', key)\">\n            <TrashIcon />\n          </button>\n          }\n        </div>\n      </div>\n      }\n      @for (key of customData(); track key) {\n        <div>\n          <p>{{ `userProfile.customData.${key}` | transloco }}</p>\n          <div class=\"flex flex-row group\">\n            <div class=\"grow\" [class.text-muted-foreground]=\"!getDataValue('customData', key)\">\n              @if (propertyToEdit() === 'customData.'+key) {\n              <input id=\"user-profile-{{key}}\" type=\"text\" [(ngModel)]=\"value\" (keydown.enter)=\"onSaveData('customData', key)\" />\n              } @else {\n              {{ getDataValue('customData', key) || ('userProfile.notDefined' | transloco) }}\n              }\n            </div>\n            @if (propertyToEdit() === 'customData.'+key) {\n            <button variant=\"ghost\" size=\"icon\" class=\"mx-2 cursor-pointer\"\n              title=\"{{ 'userProfile.editProperty' | transloco }}\" [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n              (click)=\"onSaveData('customData', key)\">\n              <i class=\"fa-fw fas fa-save\"></i>\n            </button>\n            <button variant=\"ghost\" size=\"icon\" class=\"cursor-pointer\" title=\"{{ 'userProfile.editProperty' | transloco }}\"\n              [attr.aria-label]=\"'userProfile.editProperty' | transloco\" (click)=\"propertyToEdit.set(undefined)\">\n              <UndoIcon />\n            </button>\n            } @else {\n            <button variant=\"ghost\" size=\"icon\" class=\"invisible group-hover:visible mx-2 cursor-pointer\"\n              title=\"{{ 'userProfile.editProperty' | transloco }}\" [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n              (click)=\"onEdit('customData', key)\">\n              <EditIcon />\n            </button>\n            <button variant=\"ghost\" size=\"icon\" class=\"text-destructive invisible group-hover:visible cursor-pointer\"\n              title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n              [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\" (click)=\"onDeleteData('customData', key)\">\n              <TrashIcon />\n            </button>\n            }\n          </div>\n        </div>\n      }\n    }\n  </div>\n}\n@else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n}\n@else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input #avatarInput class=\"hidden\" type=\"file\" accept=\"image/*\" (change)=\"uploadAvatar($event)\" />", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: EditIcon, selector: "edit-icon, EditIcon, editicon", inputs: ["class"] }, { kind: "component", type: UndoIcon, selector: "UndoIcon, undoicon, undo-icon", inputs: ["class"] }, { kind: "component", type: AvatarComponent, selector: "avatar, Avatar", inputs: ["class"] }, { kind: "component", type: AvatarFallbackComponent, selector: "avatar-fallback, avatarfallback, AvatarFallback", inputs: ["class"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: AvatarImageComponent, selector: "avatar-image, AvatarImage, avatarimage", inputs: ["class", "src", "alt", "width", "height", "referrerPolicy", "crossOrigin"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: ChangePasswordComponent, selector: "change-password, ChangePassword, changepassword", inputs: ["username", "alert", "redirectAfterSuccess", "currentPassword", "newPassword", "confirmPassword"], outputs: ["success", "cancel", "currentPasswordChange", "newPasswordChange", "confirmPasswordChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: UserProfileFormComponent, isStandalone: true, selector: "user-profile-form, UserProfileForm, userprofileform", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", currentLanguage: "currentLanguageChange" }, providers: [provideTranslocoScope("user-profile", "login")], viewQueries: [{ propertyName: "createInputElement", first: true, predicate: ["avatarInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground/80 size-14 cursor-pointer\"\n          (click)=\"avatarInput.click()\">\n          @if (profile?.data?.profilePhoto) {\n            <AvatarImage\n              [src]=\"profile?.data?.profilePhoto!\"\n              width=\"44\"\n              height=\"44\"\n              alt=\"avatar\" />\n          }\n          <AvatarFallback class=\"text-lg\">\n            @if (initials()) {\n              <span>{{ initials() }}</span>\n            } @else {\n              <UserIcon class=\"size-7 p-1\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            size=\"icon\"\n            class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE -->\n        <select\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 rounded-md border px-2 hover:outline focus:outline\"\n          [(ngModel)]=\"currentLanguage\"\n          (change)=\"changeLanguage()\">\n          @for (lang of AllLanguages; track lang.code) {\n            <option [value]=\"lang.code\">\n              {{ lang.label }}\n            </option>\n          }\n        </select>\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      @for (key of formKeys(); track key) {\n        <div>\n          <p>{{ `userProfile.data.${key}` | transloco }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n              @if (propertyToEdit() === \"data.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"data\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"data.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('data', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('data', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('data', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n      @for (key of customData(); track key) {\n        <div>\n          <p>{{ key }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('customData', key)\">\n              @if (propertyToEdit() === \"customData.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"customData\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"customData.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('customData', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('customData', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('customData', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n} @else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: EditIcon, selector: "edit-icon, EditIcon, editicon", inputs: ["class"] }, { kind: "component", type: UndoIcon, selector: "UndoIcon, undoicon, undo-icon", inputs: ["class"] }, { kind: "component", type: AvatarComponent, selector: "avatar, Avatar", inputs: ["class"] }, { kind: "component", type: AvatarFallbackComponent, selector: "avatar-fallback, avatarfallback, AvatarFallback", inputs: ["class"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: AvatarImageComponent, selector: "avatar-image, AvatarImage, avatarimage", inputs: ["class", "src", "alt", "width", "height", "referrerPolicy", "crossOrigin"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: ChangePasswordComponent, selector: "change-password, ChangePassword, changepassword", inputs: ["username", "alert", "redirectAfterSuccess", "redirectAfterCancel", "currentPassword", "newPassword", "confirmPassword"], outputs: ["success", "cancel", "currentPasswordChange", "newPasswordChange", "confirmPasswordChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UserProfileFormComponent, decorators: [{
             type: Component,
@@ -14612,7 +15384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         AvatarImageComponent,
                         ButtonComponent,
                         ChangePasswordComponent
-                    ], providers: [provideTranslocoScope("user-profile", "login")], template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex flex-col gap-2 p-4\">\n    <div class=\"flex mb-4\">\n      <!-- AVATAR -->\n      <Avatar\n        class=\"bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground/80 cursor-pointer size-14\"\n        (click)=\"avatarInput.click()\">\n        @if (profile?.data?.profilePhoto) {\n          <AvatarImage [src]=\"profile?.data?.profilePhoto!\" width=\"44\" height=\"44\" alt=\"avatar\" />\n        }\n        <AvatarFallback class=\"text-lg\">\n          @if (initials()) {\n            <span>{{ initials() }}</span>\n          }\n          @else {\n            <UserIcon class=\"size-7 p-1\" />\n          }\n        </AvatarFallback>\n      </Avatar>\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE -->\n        <select\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 rounded-md border px-2 hover:outline focus:outline\"\n          [(ngModel)]=\"currentLanguage\" (change)=\"changeLanguage()\">\n          @for (lang of AllLanguages; track lang.code) {\n            <option [value]=\"lang.code\">\n              {{ lang.label }}\n            </option>\n          }\n        </select>\n        <!-- CHANGE PASSWORD -->\n        @if (principal().editablePartition) {\n          <button [disabled]=\"changingPassword()\" (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <ChangePassword\n        [redirectAfterSuccess]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    }\n    @else {\n      @for (key of dataKeys; track key) {\n      <div>\n        <p>{{ `userProfile.data.${key}` | transloco}}</p>\n        <div class=\"flex flex-row group\">\n          <div class=\"grow\" [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n            @if (propertyToEdit() === 'data.'+key) {\n            <input id=\"user-profile-{{key}}\" type=\"text\" [(ngModel)]=\"value\" (keydown.enter)=\"onSaveData('data', key)\" />\n            } @else {\n            {{ getDataValue('data', key) || ('userProfile.notDefined' | transloco) }}\n            }\n          </div>\n          @if (propertyToEdit() === 'data.'+key) {\n          <button variant=\"ghost\" size=\"icon\" class=\"mx-2 cursor-pointer\"\n            title=\"{{ 'userProfile.editProperty' | transloco }}\" [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n            (click)=\"onSaveData('data', key)\">\n            <i class=\"fa-fw fas fa-save\"></i>\n          </button>\n          <button variant=\"ghost\" size=\"icon\" class=\"cursor-pointer\" title=\"{{ 'userProfile.editProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.editProperty' | transloco\" (click)=\"propertyToEdit.set(undefined)\">\n            <UndoIcon />\n          </button>\n          } @else {\n          <button variant=\"ghost\" size=\"icon\" class=\"invisible group-hover:visible mx-2 cursor-pointer\"\n            title=\"{{ 'userProfile.editProperty' | transloco }}\" [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n            (click)=\"onEdit('data', key)\">\n            <EditIcon />\n          </button>\n          <button variant=\"ghost\" size=\"icon\" class=\"text-destructive invisible group-hover:visible cursor-pointer\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\" (click)=\"onDeleteData('data', key)\">\n            <TrashIcon />\n          </button>\n          }\n        </div>\n      </div>\n      }\n      @for (key of customData(); track key) {\n        <div>\n          <p>{{ `userProfile.customData.${key}` | transloco }}</p>\n          <div class=\"flex flex-row group\">\n            <div class=\"grow\" [class.text-muted-foreground]=\"!getDataValue('customData', key)\">\n              @if (propertyToEdit() === 'customData.'+key) {\n              <input id=\"user-profile-{{key}}\" type=\"text\" [(ngModel)]=\"value\" (keydown.enter)=\"onSaveData('customData', key)\" />\n              } @else {\n              {{ getDataValue('customData', key) || ('userProfile.notDefined' | transloco) }}\n              }\n            </div>\n            @if (propertyToEdit() === 'customData.'+key) {\n            <button variant=\"ghost\" size=\"icon\" class=\"mx-2 cursor-pointer\"\n              title=\"{{ 'userProfile.editProperty' | transloco }}\" [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n              (click)=\"onSaveData('customData', key)\">\n              <i class=\"fa-fw fas fa-save\"></i>\n            </button>\n            <button variant=\"ghost\" size=\"icon\" class=\"cursor-pointer\" title=\"{{ 'userProfile.editProperty' | transloco }}\"\n              [attr.aria-label]=\"'userProfile.editProperty' | transloco\" (click)=\"propertyToEdit.set(undefined)\">\n              <UndoIcon />\n            </button>\n            } @else {\n            <button variant=\"ghost\" size=\"icon\" class=\"invisible group-hover:visible mx-2 cursor-pointer\"\n              title=\"{{ 'userProfile.editProperty' | transloco }}\" [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n              (click)=\"onEdit('customData', key)\">\n              <EditIcon />\n            </button>\n            <button variant=\"ghost\" size=\"icon\" class=\"text-destructive invisible group-hover:visible cursor-pointer\"\n              title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n              [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\" (click)=\"onDeleteData('customData', key)\">\n              <TrashIcon />\n            </button>\n            }\n          </div>\n        </div>\n      }\n    }\n  </div>\n}\n@else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n}\n@else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input #avatarInput class=\"hidden\" type=\"file\" accept=\"image/*\" (change)=\"uploadAvatar($event)\" />" }]
+                    ], providers: [provideTranslocoScope("user-profile", "login")], template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground/80 size-14 cursor-pointer\"\n          (click)=\"avatarInput.click()\">\n          @if (profile?.data?.profilePhoto) {\n            <AvatarImage\n              [src]=\"profile?.data?.profilePhoto!\"\n              width=\"44\"\n              height=\"44\"\n              alt=\"avatar\" />\n          }\n          <AvatarFallback class=\"text-lg\">\n            @if (initials()) {\n              <span>{{ initials() }}</span>\n            } @else {\n              <UserIcon class=\"size-7 p-1\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            size=\"icon\"\n            class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE -->\n        <select\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 rounded-md border px-2 hover:outline focus:outline\"\n          [(ngModel)]=\"currentLanguage\"\n          (change)=\"changeLanguage()\">\n          @for (lang of AllLanguages; track lang.code) {\n            <option [value]=\"lang.code\">\n              {{ lang.label }}\n            </option>\n          }\n        </select>\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      @for (key of formKeys(); track key) {\n        <div>\n          <p>{{ `userProfile.data.${key}` | transloco }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n              @if (propertyToEdit() === \"data.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"data\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"data.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('data', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('data', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('data', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n      @for (key of customData(); track key) {\n        <div>\n          <p>{{ key }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('customData', key)\">\n              @if (propertyToEdit() === \"customData.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"customData\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"customData.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('customData', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('customData', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('customData', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n} @else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n" }]
         }], ctorParameters: () => [], propDecorators: { createInputElement: [{ type: i0.ViewChild, args: ["avatarInput", { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], currentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLanguage", required: false }] }, { type: i0.Output, args: ["currentLanguageChange"] }] } });
 
 class UserProfileDialog {
@@ -14623,11 +15395,11 @@ class UserProfileDialog {
         this.opened.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UserProfileDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: UserProfileDialog, isStandalone: true, selector: "user-profile-dialog, userprofiledialog, UserProfileDialog", viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: UserProfileDialog, isStandalone: true, selector: "user-profile-dialog, userprofiledialog, UserProfileDialog", providers: [provideTranslocoScope("user-profile")], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <dialog #dialog>
       <DialogContent class="max-h-11/12 overflow-auto">
         <DialogHeader>
-          <DialogTitle>User Profile</DialogTitle>
+          <DialogTitle>{{ 'userProfile.title' | transloco }}</DialogTitle>
         </DialogHeader>
 
         @if (opened()) {
@@ -14636,7 +15408,7 @@ class UserProfileDialog {
 
         </DialogContent>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "component", type: UserProfileFormComponent, selector: "user-profile-form, UserProfileForm, userprofileform", inputs: ["value", "currentLanguage"], outputs: ["valueChange", "currentLanguageChange"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "component", type: UserProfileFormComponent, selector: "user-profile-form, UserProfileForm, userprofileform", inputs: ["value", "currentLanguage"], outputs: ["valueChange", "currentLanguageChange"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UserProfileDialog, decorators: [{
             type: Component,
@@ -14648,13 +15420,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         DialogHeaderComponent,
                         DialogContentComponent,
                         UserProfileFormComponent,
-                        DialogTitleComponent
+                        DialogTitleComponent,
+                        TranslocoPipe
                     ],
+                    providers: [provideTranslocoScope("user-profile")],
                     template: `
     <dialog #dialog>
       <DialogContent class="max-h-11/12 overflow-auto">
         <DialogHeader>
-          <DialogTitle>User Profile</DialogTitle>
+          <DialogTitle>{{ 'userProfile.title' | transloco }}</DialogTitle>
         </DialogHeader>
 
         @if (opened()) {
@@ -14797,6 +15571,7 @@ const errorInterceptorFn = (request, next) => {
     }));
 };
 
+const SHOW_ERROR_TOKEN = new HttpContextToken(() => true);
 /**
  * Intercepts HTTP requests and handles errors by displaying toast notifications.
  *
@@ -14814,6 +15589,18 @@ const toastInterceptorFn = (request, next) => {
     }
     return next(request).pipe(catchError$1((err) => {
         const { status, statusText, error, url } = err;
+        if (status === 401 && globalConfig.userOverrideActive && error?.errorCode == 6) {
+            if (request.context.get(SHOW_ERROR_TOKEN)) {
+                const errorMsg = error?.errorMessage || 'The account may be deactivated or inaccessible';
+                notify.error(`Cannot override user: Unauthorized access`, {
+                    description: errorMsg,
+                    closeButton: true,
+                    duration: 5000
+                });
+                request.context.set(SHOW_ERROR_TOKEN, false);
+                return throwError(() => err);
+            }
+        }
         if ([400, 403, 500, 503].includes(status)) {
             // Avoid showing error toasts for preview requests
             if (url.includes("api/v1/preview") === false) {
@@ -14849,5 +15636,5 @@ const queryNameResolver = () => {
  * Generated bundle index. Do not edit.
  */
 
-export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchComponent, AggregationComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertsComponent, AppService, AppStore, ApplicationService, ApplicationStore, ArticleEntities, ArticleExtracts, ArticleLabels, ArticleSimilarDocuments, AsideFiltersComponent, AuditFeedbackType, AuditService, AuthGuard, AuthPageComponent, AutocompleteService, BOOKMARKS_CONFIG, BOOKMARKS_OPTIONS, BackdropComponent, BackdropService, BookmarkButtonComponent, BookmarksComponent, COLLECTIONS_CONFIG, COLLECTIONS_OPTIONS, COMPONENTS_FOR_DOCUMENT_TYPE, ChangePasswordComponent, ChildMarkerDirective, CollectionsComponent, CollectionsDialog, DRAWER_COMPONENT, DRAWER_STACK_MAX_COUNT, DateComponent, DeleteCollectionDialog, DidYouMeanComponent, DocumentLocatorComponent, DrawerAdvancedFiltersComponent, DrawerComponent, DrawerNavbarComponent, DrawerPreviewComponent, DrawerService, DrawerStackComponent, DrawerStackService, DropdownInputComponent, DropdownListComponent, ErrorComponent, ExportDialog, ExportService, FILTERS_BREAKPOINT, FILTER_DATE_ALLOW_CUSTOM_RANGE, FeedbackDialogComponent, FileSizePipe, FilterButtonComponent, FiltersBarComponent, HIGHLIGHTS, HighlightWordPipe, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardNavigatorDirective, LabelService, LabelsEditDialog, LoadingComponent, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUserDialogComponent, PREVIEW_CONFIG, PagerComponent, PasswordExpiryGuard, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, RECENT_SEARCHES_CONFIG, RECENT_SEARCHES_OPTIONS, ROUTE_COMPONENTS, RecentSearchesComponent, ResetUserSettingsDialogComponent, SAVED_SEARCHES_CONFIG, SAVED_SEARCHES_OPTIONS, SavedSearchDialog, SavedSearchesComponent, SavedSearchesService, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectArticleOnClickDirective, SelectionHistoryService, SelectionService, SelectionStore, ShowBookmarkDirective, SignInComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserProfileDialog, UserProfileFormComponent, UserProfileService, UserSettingsStore, applyThemeToNativeElement, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, buildQuery, debouncedSignal, errorInterceptorFn, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, processCssVars, queryNameResolver, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, toastInterceptorFn, withAggregationsFeatures, withAlertsFeatures, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withBootstrapApp, withExtractsFeatures, withFetch, withMultiSelectionFeatures, withPrincipalFeatures, withQueryParamsFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
+export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchComponent, AggregationComponent, AggregationDateComponent, AggregationListComponent, AggregationTreeComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertsComponent, AppService, AppStore, ApplicationService, ApplicationStore, ArticleEntities, ArticleExtracts, ArticleLabels, ArticleSimilarDocuments, AsideFiltersComponent, AuditFeedbackType, AuditService, AuthGuard, AuthPageComponent, AutocompleteService, BOOKMARKS_CONFIG, BOOKMARKS_OPTIONS, BackdropComponent, BackdropService, BookmarkButtonComponent, BookmarksComponent, COLLECTIONS_CONFIG, COLLECTIONS_OPTIONS, COMPONENTS_FOR_DOCUMENT_TYPE, ChangePasswordComponent, ChildMarkerDirective, CollectionsComponent, CollectionsDialog, DRAWER_COMPONENT, DRAWER_STACK_MAX_COUNT, DateComponent, DeleteCollectionDialog, DidYouMeanComponent, DocumentLocatorComponent, DrawerAdvancedFiltersComponent, DrawerComponent, DrawerNavbarComponent, DrawerPreviewComponent, DrawerService, DrawerStackComponent, DrawerStackService, DropdownInputComponent, DropdownListComponent, ErrorComponent, ExportDialog, ExportService, FILTERS_BREAKPOINT, FILTER_DATE_ALLOW_CUSTOM_RANGE, FeedbackDialogComponent, FileSizePipe, FilterButtonComponent, FiltersBarComponent, HIGHLIGHTS, HighlightWordPipe, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardNavigatorDirective, LabelService, LabelsEditDialog, LoadingComponent, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUserDialogComponent, PREVIEW_CONFIG, PagerComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, RECENT_SEARCHES_CONFIG, RECENT_SEARCHES_OPTIONS, ROUTE_COMPONENTS, RecentSearchesComponent, ResetUserSettingsDialogComponent, SAVED_SEARCHES_CONFIG, SAVED_SEARCHES_OPTIONS, SavedSearchDialog, SavedSearchesComponent, SavedSearchesService, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectArticleOnClickDirective, SelectionHistoryService, SelectionService, SelectionStore, ShowBookmarkDirective, SignInComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserProfileDialog, UserProfileFormComponent, UserProfileService, UserSettingsStore, applyThemeToNativeElement, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, buildQuery, debouncedSignal, errorInterceptorFn, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, processCssVars, queryNameResolver, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, toastInterceptorFn, withAggregationsFeatures, withAlertsFeatures, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withBootstrapApp, withExtractsFeatures, withFetch, withMultiSelectionFeatures, withPrincipalFeatures, withQueryParamsFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
 //# sourceMappingURL=sinequa-atomic-angular.mjs.map