@sinequa/atomic-angular 1.2.5 → 1.5.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -1,26 +1,26 @@
 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, ChangeDetectionStrategy, resource, ViewContainerRef, viewChildren, numberAttribute, afterEveryRender } from '@angular/core';
-import { BehaviorSubject, Subscription, firstValueFrom, catchError, map, Subject, of, tap, EMPTY, throwError, filter, shareReplay, fromEvent, debounceTime, from, switchMap } from 'rxjs';
+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, ChangeDetectionStrategy, ViewContainerRef, numberAttribute, viewChildren, afterRenderEffect, afterEveryRender } from '@angular/core';
+import { BehaviorSubject, Subscription, firstValueFrom, catchError, map, Subject, of, tap, EMPTY, throwError, filter, shareReplay, switchMap, from, fromEvent, debounceTime } from 'rxjs';
 import { TranslocoService, TranslocoPipe, provideTranslocoScope } from '@jsverse/transloco';
-import { DropdownComponent, DropdownContentComponent, InputComponent, ButtonComponent, cn, FaIconComponent, EllipsisIcon, ChevronRightIcon, MenuComponent, MenuContentComponent, MenuItemComponent, LinkComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, SquareCheckIcon, SquareMinusIcon, SquareIcon, SwitchComponent, SelectOptionDirective, DialogService, XMarkIcon, InboxIcon, SparklesIcon, FileOutputIcon, TabsComponent, TabsListComponent, TabComponent, FrownIcon, ChevronLeftIcon, ChevronsLeftIcon, ChevronsRightIcon, ArrowUpAzIcon, ArrowDownZaIcon, ArrowUpRightFromSquareIcon, ToggleRightIcon, ToggleLeftIcon, Separator, SheetCloseDirective, ArrowLeftIcon, SheetService, DateRangePickerDirective, DatepickerDirective, InputGroupInput, InputGroupComponent, InputGroupAddonComponent, SearchIcon, FilterIcon, TriangleAlertIcon, FilterXIcon, IconButtonComponent, HighlighterIcon, TagsIcon, SpinnerIcon, MagnifyingGlassIcon, LoadingCircleIcon, CircleCheckIcon, PopoverComponent, BellIcon, TrashIcon, BarsIcon, CardComponent, CardHeaderComponent, CardContentComponent, CardFooterComponent, EyeSlashIcon, EyeIcon, BookmarkIcon, PopoverContentComponent, UserIcon, FolderIcon, VerticalDividerComponent, CommentIcon, ThumbsUpIcon, ThumbsDownIcon, ListFilterIcon, BreakpointObserverService, TrashCanIcon, CircleXIcon, InfoCircleIcon, HorizontalDividerComponent, HistoryIcon, StarIcon, FlagEnglishIcon, FlagFrenchIcon, EditIcon, UndoIcon, SaveIcon, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@sinequa/ui';
+import { DropdownComponent, DropdownContentComponent, InputComponent, ButtonComponent, cn, FaIconComponent, EllipsisIcon, ChevronRightIcon, MenuComponent, MenuContentComponent, MenuItemComponent, LinkComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, SquareCheckIcon, SquareMinusIcon, SquareIcon, SwitchComponent, SelectOptionDirective, DialogService, XMarkIcon, InboxIcon, SparklesIcon, FileOutputIcon, TabsComponent, TabsListComponent, TabComponent, SidebarMenuComponent, SidebarMenuItemComponent, SidebarMenuButtonComponent, TooltipDirective, FrownIcon, ChevronLeftIcon, ChevronsLeftIcon, ChevronsRightIcon, ArrowUpAzIcon, ArrowDownZaIcon, ArrowUpRightFromSquareIcon, ToggleRightIcon, ToggleLeftIcon, Separator, SheetCloseDirective, ArrowLeftIcon, SheetService, DateRangePickerDirective, DatepickerDirective, FilterIcon, FilterXIcon, IconButtonComponent, HighlighterIcon, TagsIcon, SpinnerIcon, MagnifyingGlassIcon, LoadingCircleIcon, CircleCheckIcon, PopoverComponent, BellIcon, TrashIcon, BarsIcon, CardComponent, CardHeaderComponent, CardContentComponent, CardFooterComponent, InputGroupInput, InputGroupComponent, InputGroupAddonComponent, EyeSlashIcon, EyeIcon, BookmarkIcon, PopoverContentComponent, UserIcon, FolderIcon, VerticalDividerComponent, CommentIcon, ThumbsUpIcon, ThumbsDownIcon, DropdownDirective, SearchIcon, TriangleAlertIcon, ListFilterIcon, BreakpointObserverService, TrashCanIcon, CircleXIcon, InfoCircleIcon, HorizontalDividerComponent, HistoryIcon, StarIcon, FlagEnglishIcon, FlagFrenchIcon, EditIcon, UndoIcon, SaveIcon, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@sinequa/ui';
 import highlightWords from 'highlight-words';
-import { ActivatedRoute, Router, NavigationEnd, RouterLink, RouterModule } from '@angular/router';
+import { ActivatedRoute, Router, NavigationEnd, RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
 import { withDevtools } from '@angular-architects/ngrx-toolkit';
 import { signalStore, signalStoreFeature, withState, withMethods, patchState, getState, withComputed } from '@ngrx/signals';
 import { EngineType, fetchApp, extraColumns, sysLang, globalConfig, getQueryParamsFromUrl, clearSessionTokens, login, info, warn, error, setGlobalConfig, notify, addConcepts, queryParamsFromUrl, patchUserSettings, deleteUserSettings, fetchUserSettings, buildPathsAndLevels, escapeExpr, isAuthenticated, isExpired, debug, AuditEventType, fetchSuggest, isObject, Audit, getMetadata, bisect, isNotInputEvent, fetchSponsoredLinks, fetchQuery, translateAggregationToDateOptions, aggItemRegex, parseValueAndOperatorFromItem, fetchSuggestField, fetchSimilarDocuments, logout, fetchChangePassword, fetchSendPasswordResetEmail, expiresSoon, suggestionsToTreeAggregationNodes, labels, fetchLabels, guid, getRelativeDate, createUserProfile, deleteUserProfileProperty, patchUserProfile, isJsonable, addAuditAdditionalInfo, getToken, setToken, createHeaders } from '@sinequa/atomic';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
 import { DatePipe, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, Location, NgTemplateOutlet, NgStyle, NgClass, NgComponentOutlet } from '@angular/common';
 import { HttpClient, HttpParams, httpResource, HttpResponse, HttpHeaders, HttpContextToken } from '@angular/common/http';
 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';
 import { A11yModule } from '@angular/cdk/a11y';
 import { Overlay } from '@angular/cdk/overlay';
+import { injectVirtualizer } from '@tanstack/angular-virtual';
 import { catchError as catchError$1, switchMap as switchMap$1 } from 'rxjs/operators';
 
 class BackdropService {
@@ -450,9 +450,13 @@ function withAppFeatures() {
          * @returns The alias of the column if it exists, otherwise the original column name.
          */
         getColumnAlias(column) {
+            if (typeof column !== "string" || column.length === 0) {
+                return column;
+            }
             const state = getState(store);
             const schema = state.indexes._.columns;
-            const col = schema[column.toLocaleLowerCase()];
+            const key = column.toLocaleLowerCase();
+            const col = Object.hasOwn(schema, key) ? schema[key] : undefined;
             if (col) {
                 return col.aliases?.[0] ? `${col.aliases[0].charAt(0).toLowerCase()}${col.aliases[0].slice(1)}` : column;
             }
@@ -465,8 +469,15 @@ function withAppFeatures() {
          * @returns The column definition as a `CCColumn` object if found, or `undefined` if the column does not exist.
          */
         getColumn(columnOrAlias) {
+            if (typeof columnOrAlias !== "string" || columnOrAlias.length === 0) {
+                return undefined;
+            }
             const state = getState(store);
-            return state.columnMap?.[columnOrAlias.toLocaleLowerCase()];
+            const columnMap = state.columnMap;
+            if (!columnMap)
+                return undefined;
+            const key = columnOrAlias.toLocaleLowerCase();
+            return Object.hasOwn(columnMap, key) ? columnMap[key] : undefined;
         },
         /**
          * Determines if the specified column is of a date-related type.
@@ -1513,6 +1524,16 @@ function withThemes(app, themes) {
     return app;
 }
 
+/**
+ * Signs in the user by checking the global configuration for authentication method and acting accordingly.
+ *
+ * This function first clears any existing session tokens to ensure a clean authentication state. It then checks the
+ * global configuration to determine whether to use credentials-based authentication or Single Sign-On (SSO). If
+ * credentials are used, it redirects the user to the login page. If SSO is enabled, it reloads the page to trigger
+ * the SSO login process. If neither method is specified, it attempts a standard login and handles any errors that
+ * may occur during the process.
+ * @returns A promise resolving to a boolean indicating the success of the sign-in operation.
+ */
 async function signIn() {
     assertInInjectionContext(signIn);
     const router = inject(Router);
@@ -1523,23 +1544,24 @@ async function signIn() {
     // If credentials are used, redirect to the login page
     if (useCredentials) {
         router.navigate([loginPath], { queryParams: { returnUrl: lastUrlAfterNavigation } });
-        return; // prevent further execution
+        return false; // prevent further execution
     }
     // SSO is set to true when the browser handles authentication automatically
     // If SSO is used, reload the page to trigger SSO login
     if (useSSO) {
         // reload the page to trigger SSO login
         window.location.reload();
-        return; // prevent further execution
+        return false; // prevent further execution
     }
     // Otherwise, perform a standard login
     try {
         const response = await login();
         if (response) {
             info("Response from login", response);
+            return true;
         }
         else {
-            warn("No response from login", response);
+            warn("Response from login", response);
         }
     }
     catch (err) {
@@ -1550,7 +1572,7 @@ async function signIn() {
         }
         throw err;
     }
-    return; // prevent further execution
+    return false; // prevent further execution
 }
 
 /**
@@ -1571,24 +1593,31 @@ async function withBootstrapApp(applicationService, { createRoutes = true }) {
     return new Promise(resolve => {
         // Check if the user is authenticated
         signIn()
-            .then(() => {
-            info('User authenticated, initializing application...');
-            // Initialize the application
-            applicationService
-                .initialize(createRoutes)
-                .then(() => {
-                info(`Application initialized with routes: ${createRoutes} successfully.`);
-                resolve();
-            })
-                .catch(err => {
-                error(`Error initializing application with routes: ${createRoutes}:`, err);
-                resolve();
-            });
+            .then(async (response) => {
+            if (response) {
+                info('User authenticated, initializing application...');
+                // Initialize the application.
+                // Awaited so the APP_INITIALIZER does not resolve (and bootstrap does not
+                // complete) until initialization is done. Otherwise routed components render
+                // and set their page title before `initialize()` runs `setGeneralApp()`, which
+                // would then overwrite the page title with the bare application name.
+                try {
+                    await applicationService.initialize(createRoutes);
+                    info(`Application initialized with routes: ${createRoutes} successfully.`);
+                }
+                catch (err) {
+                    error(`Error initializing application with routes: ${createRoutes}:`, err);
+                }
+            }
+            else {
+                info('User not authenticated, skipping application initialization.');
+            }
+            ;
         })
             .catch(err => {
             error('Error while signing in:', err);
-            resolve();
-        });
+        })
+            .finally(() => resolve());
     });
 }
 
@@ -2745,19 +2774,45 @@ function withSavedSearchesFeatures() {
     })));
 }
 
+/**
+ * Canonical default shape of the user settings state.
+ *
+ * Shared between `initialize()` (overlaid under the fetched settings) and `reset()`
+ * (used as the replacement state) so the two cannot drift apart. Keep in sync with
+ * the `UserSettingsState` type.
+ */
+const USER_SETTINGS_DEFAULTS = {
+    bookmarks: [],
+    recentSearches: [],
+    savedSearches: [],
+    baskets: [],
+    alerts: [],
+    assistants: {},
+    language: undefined,
+    collapseAssistant: undefined,
+    userTheme: undefined,
+    agents: { isDebugMode: false }
+};
 function withUserSettingsFeatures() {
     return signalStoreFeature(withState({ language: undefined, collapseAssistant: undefined }), withMethods(store => ({
         /**
          * Initializes the user settings store by fetching the user settings from the backend API
          * and patching the store with the retrieved settings.
          *
+         * The fetched settings are overlaid on top of {@link USER_SETTINGS_DEFAULTS} so that any
+         * key absent from the new user's settings resets to its default instead of retaining the
+         * previous user's in-memory value. This is required because `initialize()` runs both on
+         * first login and on every user override (impersonation): a plain merge would leak the
+         * previous user's data (e.g. `recentSearches`) into the new user's session and backend.
+         *
          * @returns {Promise<void>} A promise that resolves when the initialization is complete.
          */
         async initialize() {
-            // Fetch the user settings from the backend API and patch the store with the result
+            // Fetch the user settings from the backend API and overlay them on the defaults,
+            // so missing keys reset rather than keep the previous user's values.
             try {
                 const settings = await fetchUserSettings();
-                patchState(store, settings);
+                patchState(store, { ...USER_SETTINGS_DEFAULTS, ...settings });
             }
             catch (err) {
                 error('Error fetching user settings:', err);
@@ -2775,17 +2830,7 @@ function withUserSettingsFeatures() {
         async reset() {
             // Reset the user settings to the initial state
             await deleteUserSettings();
-            patchState(store, {
-                bookmarks: [],
-                recentSearches: [],
-                savedSearches: [],
-                baskets: [],
-                alerts: [],
-                assistants: {},
-                language: undefined,
-                collapseAssistant: undefined,
-                agents: { isDebugMode: false }
-            });
+            patchState(store, USER_SETTINGS_DEFAULTS);
         }
     })));
 }
@@ -3265,39 +3310,53 @@ class AggregationsService {
         return node;
     }
     /* aggregations helpers fot the filters components */
-    getAuthorizedFilters(aggregations, includedFilters = [], excludedFilters = []) {
+    getAuthorizedFilters(aggregations, includedFilters = [], excludedFilters = [], homepageOnly = false) {
         const agg = aggregations || this.appStore.getAuthorizedFilters();
         const authorizedFilters = agg
             .filter((f) => this.getFilterCriteria()(f)) // filter only the filters present
+            .filter((f) => !homepageOnly || this.getHomepageFilterCriteria()(f)) // when requested, keep only filters flagged `homepage: true`
             .filter((f) => !excludedFilters.includes(f.name))
             .filter((f) => !includedFilters.length || includedFilters.includes(f.name))
             .map((f) => ({ field: f.column, column: f.column, name: f.name })); // field is needed for filters constructions
         return authorizedFilters;
     }
+    /**
+     * Determines whether a custom JSON filter refers to the given aggregation.
+     *
+     * Matches by `name` when it is defined, otherwise falls back to `column`,
+     * resolving column/alias ambiguity through the app store's column map.
+     *
+     * @param filter - The filter object coming from the custom JSON.
+     * @param agg - The aggregation returned by the backend.
+     * @returns `true` if the filter refers to the aggregation.
+     */
+    matchesAggregation(filter, agg) {
+        // if filter.name is defined, use it to compare
+        if (filter.name) {
+            return filter.name.toLocaleLowerCase() === agg.name.toLocaleLowerCase();
+        }
+        // fallback to column comparison
+        // column can be a column's name or an alias
+        // resolve ambiguity between column and alias
+        const { columnMap } = getState(this.appStore);
+        // get the actual column for both filter and f
+        const aggColumn = columnMap?.[agg.column.toLocaleLowerCase()];
+        const filterColumn = columnMap?.[filter?.column?.toLocaleLowerCase() || filter.name.toLocaleLowerCase()];
+        // if either column is not found, fallback to comparing the raw values
+        if (!aggColumn || !filterColumn) {
+            return filter?.column?.toLocaleLowerCase() === agg?.column?.toLocaleLowerCase();
+        }
+        // compare the actual column names coming from the column map
+        return aggColumn?.name === filterColumn?.name;
+    }
     getFilterCriteria = () => {
         // filter: object filter from the custom JSON
         // agg: object aggregation returned by the backend
-        return (agg) => {
-            return this.appStore.filters().some((filter) => {
-                // if filter.name is defined, use it to compare
-                if (filter.name) {
-                    return filter.name.toLocaleLowerCase() === agg.name.toLocaleLowerCase();
-                }
-                // fallback to column comparison
-                // column can be a column's name or an alias
-                // resolve ambiguity between column and alias
-                const { columnMap } = getState(this.appStore);
-                // get the actual column for both filter and f
-                const aggColumn = columnMap?.[agg.column.toLocaleLowerCase()];
-                const filterColumn = columnMap?.[filter?.column?.toLocaleLowerCase() || filter.name.toLocaleLowerCase()];
-                // if either column is not found, fallback to comparing the raw values
-                if (!aggColumn || !filterColumn) {
-                    return filter?.column?.toLocaleLowerCase() === agg?.column?.toLocaleLowerCase();
-                }
-                // compare the actual column names coming from the column map
-                return aggColumn?.name === filterColumn?.name;
-            });
-        };
+        return (agg) => this.appStore.filters().some((filter) => this.matchesAggregation(filter, agg));
+    };
+    getHomepageFilterCriteria = () => {
+        // only consider filters explicitly flagged with `homepage: true` in the custom JSON
+        return (agg) => this.appStore.filters().some((filter) => filter.homepage && this.matchesAggregation(filter, agg));
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationsService, providedIn: "root" });
@@ -3365,14 +3424,10 @@ 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 the user is not authenticated, navigate to the login page.
+        // The login page handles every authentication method (credentials, OAuth, SAML).
         if (!isAuthenticated() && !useSSO) {
-            if (useCredentials) {
-                router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
-            }
-            else {
-                router.navigate(["loading"], { queryParams: { returnUrl: state.url } });
-            }
+            router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
             return false;
         }
         // If the user is authenticated, initialize the principal store if it's in the initial state
@@ -3424,6 +3479,7 @@ class ApplicationService {
     components = inject(ROUTE_COMPONENTS);
     defaultComponent = computed(() => this.components.find((c) => c.path === "all")?.component, ...(ngDevMode ? [{ debugName: "defaultComponent" }] : []));
     defaultLayoutComponent = computed(() => this.components.find((c) => c.isRoot)?.component, ...(ngDevMode ? [{ debugName: "defaultLayoutComponent" }] : []));
+    routerConfig = signal(undefined, ...(ngDevMode ? [{ debugName: "routerConfig" }] : []));
     /**
      * Initializes the application and creates routes if needed.
      *
@@ -3610,6 +3666,7 @@ class ApplicationService {
         searchPath.children = [...children, ...existingChildren, wildcardPath];
         const newConfig = [searchPath, ...currentConfig];
         info("ApplicationService: createRoutes -> newConfig", newConfig);
+        this.routerConfig.set(newConfig);
         // finally we reset the router config with the new routes
         this.router.resetConfig(newConfig);
     }
@@ -3684,10 +3741,10 @@ class ApplicationService {
         // If general is not defined or is an empty object, do nothing
         if (!general || (typeof general === "object" && Object.keys(general).length === 0))
             return;
-        if (general.name) {
-            info("Setting document title to:", general.name);
-            this.titleService.setTitle(general.name);
-        }
+        // NB: the document title is intentionally NOT set here. The page-specific title is
+        // owned by the routed components/layouts via `setTitle()`. Setting it here would
+        // overwrite the page title with the bare application name during bootstrap.
+        // The initial title falls back to the static <title> defined in index.html.
         const { light, dark, alt } = general.logo || {};
         document.documentElement.style.setProperty("--logo-alt-text", `'${alt || general.name}'`);
         // light mode logo configuration
@@ -3981,7 +4038,7 @@ class NavigationService {
      * - Maps all router events to `RouterEvent`.
      * - Filters the events to only include instances of `NavigationEnd`.
      * - Taps into the event stream to extract the route name from the URL and notify the audit service of route changes,
-     *   excluding the "loading" route and duplicate navigations.
+     *   excluding duplicate navigations.
      * - Updates the `urlAfterNavigation` property with the current URL after navigation.
      * - Shares the replayed value with a buffer size of 1 to ensure subscribers receive the latest emitted value.
      *
@@ -3989,8 +4046,7 @@ class NavigationService {
      */
     navigationEnd$ = this.router.events.pipe(map((event) => event), filter((event) => event instanceof NavigationEnd), tap((event) => {
         const url = event.url.slice(1).split("?")[0]; // Extract route name
-        // TODO: use a "loading" configuration from globalConfig
-        if (url && url !== "loading" && url !== this.urlAfterNavigation) {
+        if (url && url !== this.urlAfterNavigation) {
             this.auditService.notifyRouteChange(url);
         }
     }), tap((event) => {
@@ -5321,6 +5377,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
+/**
+ * @deprecated This component and its `/loading` route are no longer used.
+ * Authentication is handled at bootstrap by `withBootstrapApp`/`signIn`, and the
+ * `AuthGuard` now redirects unauthenticated users to the login page directly.
+ * Will be removed in a future major release. Do not use in new code.
+ */
 class LoadingComponent {
     state = computed(() => getState(this.application), ...(ngDevMode ? [{ debugName: "state" }] : []));
     application = inject(ApplicationStore);
@@ -6174,6 +6236,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], updatedCollections: [{ type: i0.Output, args: ["updatedCollections"] }] } });
 
+function injectRouteNavigation(path, showCount) {
+    const router = inject(Router);
+    const route = inject(ActivatedRoute);
+    const queryParamsStore = inject(QueryParamsStore);
+    const queryService = inject(QueryService);
+    const routerConfig = inject(ApplicationService).routerConfig;
+    const searchText = computed(() => getState(queryParamsStore).text || "", ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+    const currentPath = computed(() => {
+        const { tab: currentTab } = getState(queryParamsStore);
+        let current = route.snapshot;
+        while (current.firstChild)
+            current = current.firstChild;
+        const childPath = current.url.map((s) => s.path).join("/");
+        return childPath || currentTab || "all";
+    }, ...(ngDevMode ? [{ debugName: "currentPath" }] : []));
+    const tabs = computed(() => {
+        const result = queryService.result();
+        const config = routerConfig() ?? router.config;
+        return (config
+            .find((item) => item.path === path())
+            ?.children?.filter((c) => c.path !== "**" && !c.redirectTo)
+            .map((child) => {
+            const data = child.data;
+            return {
+                display: data?.display || child.path || "",
+                wsQueryTab: data?.wsQueryTab || child.path || "",
+                path: child.path || "",
+                routerLink: `/${path()}/${child.path}`,
+                icon: data?.icon || "",
+                queryName: data?.queryName,
+                count: showCount()
+                    ? result.queryName === data?.queryName
+                        ? result.tabs?.find((t) => t.name === (data?.wsQueryTab || child.path))?.count
+                        : undefined
+                    : undefined
+            };
+        }) ?? []);
+    }, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    return { tabs, currentPath, searchText };
+}
+
 /**
  * Directive to mark a child element for special processing.
  * This can be used to apply specific styles or behaviors to child elements.
@@ -6877,8 +6980,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 /**
- * Directive to be used on the element that should be considered as the limit
- * for the overflow manager.
+ * Directive to be used on the "more" trigger element. The overflow manager
+ * reserves this element's size when not all items fit, so the last visible
+ * item never overlaps it. Its position is not used for measurement.
  */
 class OverflowStopDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OverflowStopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -6892,10 +6996,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 /**
- * Directive that takes items and a stop element to count the number of items
- * that can fit before the stop element.
- * The directive will apply a `visibility: hidden` on the items that are not
- * visible.
+ * Directive that counts how many items fit inside the container and hides the
+ * overflowing ones. The boundary is the container's own content edge, which
+ * keeps the measurement correct even when the host lives inside a flex layout
+ * (we never depend on a sibling's position). The stop element is used only to
+ * reserve space for the "more" trigger when not all items fit.
+ *
+ * The directive applies `display: none` on the items that do not fit.
  *
  * You can specify a target element to observe for resize events, otherwise the
  * directive will observe the element itself.
@@ -6934,10 +7041,26 @@ class OverflowManagerDirective {
     target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : []));
     margin = input(4, ...(ngDevMode ? [{ debugName: "margin" }] : []));
     direction = input("horizontal", ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    /**
+     * Always reserve the stop element's size, even when every item fits inside
+     * the container. Use it when the stop trigger is permanently visible (e.g.
+     * the "more" button also gives access to items that are never rendered in
+     * the container), so the last item never overlaps it.
+     */
+    reserveStop = input(false, ...(ngDevMode ? [{ debugName: "reserveStop", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     count = output();
     el = inject(ElementRef).nativeElement;
     destroyRef = inject(DestroyRef);
     resizeObserver = new ResizeObserver(() => this.countItems());
+    // Recompute when an individual item's size changes (label update, async
+    // translation, font load…), not only when the container resizes. Items we
+    // hid with `display: none` report a 0×0 size; ignore those notifications so
+    // our own show/hide toggling doesn't trigger redundant recounts.
+    itemsResizeObserver = new ResizeObserver((entries) => {
+        const visibleItemResized = entries.some((entry) => entry.target.style.display !== "none");
+        if (visibleItemResized)
+            this.countItems();
+    });
     countSub;
     _lastCount;
     constructor() {
@@ -6949,21 +7072,37 @@ class OverflowManagerDirective {
                 this.countItems();
             }
         });
+        // (re)observe every item whenever the projected list changes, so that
+        // added/removed items and per-item size changes both trigger a recount
+        effect(() => {
+            const items = this.items();
+            this.itemsResizeObserver.disconnect();
+            items.forEach((item) => this.itemsResizeObserver.observe(item.nativeElement));
+        });
         // listens to the count output and toggles the visibility of the items
         this.countSub = this.count.subscribe((count) => this.toggleToCount(count));
         this.destroyRef.onDestroy(() => {
             this.resizeObserver.disconnect();
+            this.itemsResizeObserver.disconnect();
             this.countSub?.unsubscribe();
             this.countSub = undefined;
         });
     }
     /**
-     * Counts the number of items that can fit before the stop element.
+     * Counts the number of items that can fit inside the container.
+     *
+     * The boundary is the container's own content edge (not the position of the
+     * stop element). This is what makes the measurement robust when the host is
+     * placed inside a flex layout: we never rely on a sibling staying where we
+     * expect it. The stop element is only used for its *size*, to reserve space
+     * for the "more" trigger when not all items fit.
+     *
      * Emits the count if it has changed.
      */
     countItems() {
         if (!this.items() || this.items().length === 0 || !this.stop())
             return;
+        const horizontal = this.direction() === "horizontal";
         // Reset all items to their natural size before measuring so that previously
         // hidden items (display: none) don't corrupt the layout and position of
         // their siblings.
@@ -6971,19 +7110,33 @@ class OverflowManagerDirective {
             item.nativeElement.style.display = "";
         });
         // getBoundingClientRect() forces a synchronous reflow, so positions are
-        // accurate after the reset above.
+        // accurate after the reset above. Using rects (not offsetWidth) means the
+        // inter-item gap is accounted for automatically.
+        const containerRect = this.el.getBoundingClientRect();
         const stopRect = this.stop().nativeElement.getBoundingClientRect();
         const itemsRects = this.items().map((item) => item.nativeElement.getBoundingClientRect());
-        let count = 0;
-        for (const rect of itemsRects) {
-            // if the direction is horizontal, we check the right side of the item
-            if (this.direction() === "horizontal" && rect.right + this.margin() <= stopRect.left)
-                count++;
-            // if the direction is vertical, we check the bottom side of the item
-            else if (this.direction() === "vertical" && rect.bottom + this.margin() <= stopRect.top)
-                count++;
-            else
-                break;
+        // The container's content edge, with a small slack margin.
+        const containerEnd = (horizontal ? containerRect.right : containerRect.bottom) - this.margin();
+        const itemEnd = (rect) => (horizontal ? rect.right : rect.bottom);
+        let count;
+        // If every item fits within the container, no "more" trigger is needed and
+        // we don't reserve any space for it — unless the trigger is permanently
+        // visible (reserveStop), in which case its space is always reserved.
+        if (!this.reserveStop() && itemEnd(itemsRects[itemsRects.length - 1]) <= containerEnd) {
+            count = itemsRects.length;
+        }
+        else {
+            // Otherwise reserve the stop element's own size so the last visible item
+            // never overlaps the "more" trigger.
+            const reserve = horizontal ? stopRect.width : stopRect.height;
+            const limit = containerEnd - reserve;
+            count = 0;
+            for (const rect of itemsRects) {
+                if (itemEnd(rect) <= limit)
+                    count++;
+                else
+                    break;
+            }
         }
         if (this._lastCount !== count) {
             this._lastCount = count;
@@ -7006,7 +7159,7 @@ class OverflowManagerDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OverflowManagerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.18", type: OverflowManagerDirective, isStandalone: true, selector: "[overflowManager]", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { count: "count" }, queries: [{ propertyName: "items", predicate: OverflowItemDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "stop", first: true, predicate: OverflowStopDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.18", type: OverflowManagerDirective, isStandalone: true, selector: "[overflowManager]", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, reserveStop: { classPropertyName: "reserveStop", publicName: "reserveStop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { count: "count" }, queries: [{ propertyName: "items", predicate: OverflowItemDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "stop", first: true, predicate: OverflowStopDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OverflowManagerDirective, decorators: [{
             type: Directive,
@@ -7014,7 +7167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     selector: "[overflowManager]",
                     standalone: true
                 }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OverflowItemDirective), { ...{ descendants: true, read: ElementRef }, isSignal: true }] }], stop: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OverflowStopDirective), { ...{ descendants: true, read: ElementRef }, isSignal: true }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], count: [{ type: i0.Output, args: ["count"] }] } });
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OverflowItemDirective), { ...{ descendants: true, read: ElementRef }, isSignal: true }] }], stop: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OverflowStopDirective), { ...{ descendants: true, read: ElementRef }, isSignal: true }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], reserveStop: [{ type: i0.Input, args: [{ isSignal: true, alias: "reserveStop", required: false }] }], count: [{ type: i0.Output, args: ["count"] }] } });
 
 /**
  * Directive that selects an article on click.
@@ -7113,102 +7266,69 @@ class NavbarTabsComponent {
     cn = cn;
     class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
     router = inject(Router);
-    route = inject(ActivatedRoute);
-    queryParamsStore = inject(QueryParamsStore);
-    // Injecting the QueryService to access last search results
-    queryService = inject(QueryService);
+    showCount = input(true, ...(ngDevMode ? [{ debugName: "showCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
-     * Determines whether the count should be displayed in the navbar tabs component.
-     * This value is provided as an input property.
+     * When enabled (default), tab labels are never clipped: tabs that do not fit
+     * collapse into the ellipsis dropdown instead. Set to `false` to truncate
+     * overflowing labels with an ellipsis inside their slot.
      *
-     * @remarks
-     * This works only if tabSearch is enabled in the administration panel.
+     * @default true
      */
-    showCount = input(true, ...(ngDevMode ? [{ debugName: "showCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    noTruncate = input(false, ...(ngDevMode ? [{ debugName: "noTruncate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    noTruncate = input(true, ...(ngDevMode ? [{ debugName: "noTruncate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     minTabWidth = input(...(ngDevMode ? [undefined, { debugName: "minTabWidth" }] : []));
+    path = input("search", ...(ngDevMode ? [{ debugName: "path" }] : []));
+    nav = injectRouteNavigation(this.path, this.showCount);
+    visibleTabCount = signal(undefined, ...(ngDevMode ? [{ debugName: "visibleTabCount" }] : []));
+    moreTabs = computed(() => this.nav.tabs().slice(this.visibleTabCount()), ...(ngDevMode ? [{ debugName: "moreTabs" }] : []));
     /**
-     * The base path for the search routes.
-     * This value is provided as an input property and defaults to "search".
+     * Minimum width applied to a tab (through the `--tab-min-width` CSS variable)
+     * when labels are truncated (`noTruncate` is `false`), so a tab never shrinks
+     * into an unusable sliver. An explicit `minTabWidth` input always wins.
      *
-     * @remarks
-     * This path is used to find the corresponding route configuration and its children
-     * to populate the tabs in the navbar.
+     * - tab with an icon: the icon (16px) plus the tab's horizontal padding (1.5rem)
+     * - text-only tab: enough room for a few characters and the ellipsis
      */
-    path = input("search", ...(ngDevMode ? [{ debugName: "path" }] : []));
-    searchText = computed(() => {
-        const state = getState(this.queryParamsStore);
-        return state.text || "";
-    }, ...(ngDevMode ? [{ debugName: "searchText" }] : []));
-    visibleTabCount = signal(undefined, ...(ngDevMode ? [{ debugName: "visibleTabCount" }] : []));
-    currentPath = computed(() => {
-        // get current tab from the query params store
-        const { tab: currentTab } = getState(this.queryParamsStore);
-        // navigate to the deepest child route
-        let current = this.route.snapshot;
-        while (current.firstChild) {
-            current = current.firstChild;
-        }
-        // childPath exists when we click on a tab, otherwise it's an empty string
-        const childPath = current.url.map((segment) => segment.path).join("/");
-        // return the child path if present, otherwise the current tab from the query params, or 'all' as a fallback
-        return childPath || currentTab || "all";
-    }, ...(ngDevMode ? [{ debugName: "currentPath" }] : []));
-    // create tabs from the search routes
-    tabs = computed(() => {
-        const result = this.queryService.result();
-        const r = this.router.config
-            .find((item) => item.path === this.path())
-            ?.children?.filter((c) => c.path !== "**")
-            .map((child) => {
-            const data = child.data;
-            return {
-                display: data?.display || child.path || "",
-                wsQueryTab: data?.wsQueryTab || child.path || "",
-                path: child.path || "",
-                routerLink: `/${this.path()}/${child.path}`,
-                icon: data?.icon || "",
-                queryName: data?.queryName,
-                // get the count from the last search result if showCount is true and queryName matches
-                count: this.showCount()
-                    ? result.queryName === data?.queryName
-                        ? result.tabs?.find((tab) => tab.name === (data?.wsQueryTab || child.path))?.count
-                        : undefined
-                    : undefined
-            };
-        }) ?? [];
-        return r;
-    }, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
-    moreTabs = computed(() => this.tabs().slice(this.visibleTabCount()), ...(ngDevMode ? [{ debugName: "moreTabs" }] : []));
+    tabMinWidth(hasIcon) {
+        if (this.minTabWidth())
+            return this.minTabWidth();
+        if (this.noTruncate())
+            return undefined;
+        return hasIcon ? "calc(1.5rem + 16px)" : "calc(1.5rem + 4ch)";
+    }
     changeTab() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavbarTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: NavbarTabsComponent, isStandalone: true, selector: "navbar-tabs", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, noTruncate: { classPropertyName: "noTruncate", publicName: "noTruncate", isSignal: true, isRequired: false, transformFunction: null }, minTabWidth: { classPropertyName: "minTabWidth", publicName: "minTabWidth", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cn('block', class())" } }, ngImport: i0, template: `
     <!-- do not display the tabs if there are no tabs -->
-    @if (tabs().length > 0) {
+    @if (nav.tabs().length > 0) {
       <div overflowManager (count)="visibleTabCount.set($event)" class="flex items-end rounded-[inherit] bg-inherit">
         <Tabs class="flex-1 min-w-0 overflow-hidden">
           <TabsList class="w-full">
-          @for (tab of tabs(); track $index) {
+          @for (tab of nav.tabs(); track $index) {
             <Tab
-              class="group"
+              [class]="cn('group', !noTruncate() && 'basis-[12.5rem]')"
               title="{{ tab.display | syslang | transloco }}"
               value="{{ tab.display }}"
               overflowItem
               [noTruncate]="noTruncate()"
-              [style.--tab-min-width]="minTabWidth()"
-              [attr.aria-selected]="this.currentPath() === tab.path"
+              [style.--tab-min-width]="tabMinWidth(!!tab.icon)"
+              [attr.aria-selected]="nav.currentPath() === tab.path"
               [attr.disabled]="showCount() && tab.count === 0 ? '' : null"
-              [active]="this.currentPath() === tab.path"
+              [active]="nav.currentPath() === tab.path"
               [routerLink]="[tab.routerLink]"
-              [queryParams]="{ n: tab.queryName, q: searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }"
+              [queryParams]="{ n: tab.queryName, q: nav.searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }"
               (click)="changeTab()"
-              (keydown.enter)="router.navigate([tab.routerLink], { queryParams: { n: tab.queryName, q: searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined } })"
+              (keydown.enter)="router.navigate([tab.routerLink], { queryParams: { n: tab.queryName, q: nav.searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined } })"
               >
-              <div [class]="cn('flex items-center content-start w-full gap-1', !noTruncate() && 'overflow-hidden min-w-0')">
+              <div [class]="cn('flex items-center content-start w-full gap-1', !noTruncate() && '@container overflow-hidden min-w-0')">
               @if (tab.icon) {
-                <FaIcon [faClass]="tab.icon" aria-hidden="true" />
+                <!-- the icon never shrinks: the label truncates first -->
+                <FaIcon [faClass]="tab.icon" class="shrink-0" aria-hidden="true" />
               }
-              <span [class]="noTruncate() ? '' : 'truncate'">{{ tab.display | syslang | transloco }}</span>
+              <!-- when the tab gets too narrow to show anything meaningful next to
+                   the icon, hide the label entirely instead of a clipped sliver.
+                   w-0 + invisible (not display: none) keeps the label's line box,
+                   so the tab height doesn't collapse to the icon's height -->
+              <span [class]="cn(!noTruncate() && 'truncate', !noTruncate() && tab.icon && '@max-[3rem]:w-0 @max-[3rem]:invisible')">{{ tab.display | syslang | transloco }}</span>
               <!-- Show count badge only if count is > 0 -->
               @if((tab.count ?? 0) > 0) {
                 <Badge size="sm">{{ tab.count }}</Badge>
@@ -7235,8 +7355,8 @@ class NavbarTabsComponent {
               <MenuItem>
                 <a class="inline-flex items-center gap-1 whitespace-nowrap first-letter:capitalize"
                   [routerLink]="[tab.routerLink]"
-                  [queryParams]="{ n: tab.queryName, q: searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }"
-                  [attr.aria-selected]="this.currentPath() === tab.path"
+                  [queryParams]="{ n: tab.queryName, q: nav.searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }"
+                  [attr.aria-selected]="nav.currentPath() === tab.path"
                   [attr.aria-label]="tab.display | syslang | transloco"
                   (click)="changeTab()">
                   @if (tab.icon) {
@@ -7250,7 +7370,7 @@ class NavbarTabsComponent {
         </Menu>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "noTruncate", "value", "active"], outputs: ["clicked"] }, { 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: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size"] }, { kind: "component", type: EllipsisIcon, selector: "ellipsis-icon, EllipsisIcon, ellipsisicon", inputs: ["class", "orientation"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "noTruncate", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction", "reserveStop"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size"] }, { kind: "component", type: EllipsisIcon, selector: "ellipsis-icon, EllipsisIcon, ellipsisicon", inputs: ["class", "orientation"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavbarTabsComponent, decorators: [{
             type: Component,
@@ -7277,31 +7397,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     ],
                     template: `
     <!-- do not display the tabs if there are no tabs -->
-    @if (tabs().length > 0) {
+    @if (nav.tabs().length > 0) {
       <div overflowManager (count)="visibleTabCount.set($event)" class="flex items-end rounded-[inherit] bg-inherit">
         <Tabs class="flex-1 min-w-0 overflow-hidden">
           <TabsList class="w-full">
-          @for (tab of tabs(); track $index) {
+          @for (tab of nav.tabs(); track $index) {
             <Tab
-              class="group"
+              [class]="cn('group', !noTruncate() && 'basis-[12.5rem]')"
               title="{{ tab.display | syslang | transloco }}"
               value="{{ tab.display }}"
               overflowItem
               [noTruncate]="noTruncate()"
-              [style.--tab-min-width]="minTabWidth()"
-              [attr.aria-selected]="this.currentPath() === tab.path"
+              [style.--tab-min-width]="tabMinWidth(!!tab.icon)"
+              [attr.aria-selected]="nav.currentPath() === tab.path"
               [attr.disabled]="showCount() && tab.count === 0 ? '' : null"
-              [active]="this.currentPath() === tab.path"
+              [active]="nav.currentPath() === tab.path"
               [routerLink]="[tab.routerLink]"
-              [queryParams]="{ n: tab.queryName, q: searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }"
+              [queryParams]="{ n: tab.queryName, q: nav.searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }"
               (click)="changeTab()"
-              (keydown.enter)="router.navigate([tab.routerLink], { queryParams: { n: tab.queryName, q: searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined } })"
+              (keydown.enter)="router.navigate([tab.routerLink], { queryParams: { n: tab.queryName, q: nav.searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined } })"
               >
-              <div [class]="cn('flex items-center content-start w-full gap-1', !noTruncate() && 'overflow-hidden min-w-0')">
+              <div [class]="cn('flex items-center content-start w-full gap-1', !noTruncate() && '@container overflow-hidden min-w-0')">
               @if (tab.icon) {
-                <FaIcon [faClass]="tab.icon" aria-hidden="true" />
+                <!-- the icon never shrinks: the label truncates first -->
+                <FaIcon [faClass]="tab.icon" class="shrink-0" aria-hidden="true" />
               }
-              <span [class]="noTruncate() ? '' : 'truncate'">{{ tab.display | syslang | transloco }}</span>
+              <!-- when the tab gets too narrow to show anything meaningful next to
+                   the icon, hide the label entirely instead of a clipped sliver.
+                   w-0 + invisible (not display: none) keeps the label's line box,
+                   so the tab height doesn't collapse to the icon's height -->
+              <span [class]="cn(!noTruncate() && 'truncate', !noTruncate() && tab.icon && '@max-[3rem]:w-0 @max-[3rem]:invisible')">{{ tab.display | syslang | transloco }}</span>
               <!-- Show count badge only if count is > 0 -->
               @if((tab.count ?? 0) > 0) {
                 <Badge size="sm">{{ tab.count }}</Badge>
@@ -7328,8 +7453,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
               <MenuItem>
                 <a class="inline-flex items-center gap-1 whitespace-nowrap first-letter:capitalize"
                   [routerLink]="[tab.routerLink]"
-                  [queryParams]="{ n: tab.queryName, q: searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }"
-                  [attr.aria-selected]="this.currentPath() === tab.path"
+                  [queryParams]="{ n: tab.queryName, q: nav.searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }"
+                  [attr.aria-selected]="nav.currentPath() === tab.path"
                   [attr.aria-label]="tab.display | syslang | transloco"
                   (click)="changeTab()">
                   @if (tab.icon) {
@@ -7350,6 +7475,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], noTruncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noTruncate", required: false }] }], minTabWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTabWidth", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }] } });
 
+class SidebarNavComponent {
+    path = input("search", ...(ngDevMode ? [{ debugName: "path" }] : []));
+    showCount = input(false, ...(ngDevMode ? [{ debugName: "showCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    nav = injectRouteNavigation(this.path, this.showCount);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SidebarNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SidebarNavComponent, isStandalone: true, selector: "sidebar-nav", inputs: { path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <sidebar-menu>
+      @for (tab of nav.tabs(); track tab.path) {
+        @let label = tab.display | syslang | transloco;
+        <sidebar-menu-item>
+          <sidebar-menu-button
+            [tooltip]="label" tooltip-position="right"
+            [routerLink]="tab.routerLink"
+            routerLinkActive="active"
+            #rla="routerLinkActive"
+            [attr.data-active]="rla.isActive || null"
+            [queryParams]="{ n: tab.queryName, q: nav.searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }">
+            @if (tab.icon) {
+              <FaIcon [faClass]="tab.icon" aria-hidden="true" />
+            }
+            <span>{{ label }}</span>
+          </sidebar-menu-button>
+        </sidebar-menu-item>
+      }
+    </sidebar-menu>
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "directive", type: SidebarMenuComponent, selector: "sidebar-menu", inputs: ["class"] }, { kind: "directive", type: SidebarMenuItemComponent, selector: "sidebar-menu-item", inputs: ["class"] }, { kind: "directive", type: SidebarMenuButtonComponent, selector: "sidebar-menu-button", inputs: ["isActive", "variant", "size", "class"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "strategy", "tooltip-position", "tooltip-delay", "tooltip-duration", "tooltip-offset"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SidebarNavComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "sidebar-nav",
+                    standalone: true,
+                    imports: [
+                        RouterLink,
+                        TranslocoPipe,
+                        SyslangPipe,
+                        FaIconComponent,
+                        SidebarMenuComponent,
+                        SidebarMenuItemComponent,
+                        SidebarMenuButtonComponent,
+                        RouterLinkActive,
+                        TooltipDirective
+                    ],
+                    template: `
+    <sidebar-menu>
+      @for (tab of nav.tabs(); track tab.path) {
+        @let label = tab.display | syslang | transloco;
+        <sidebar-menu-item>
+          <sidebar-menu-button
+            [tooltip]="label" tooltip-position="right"
+            [routerLink]="tab.routerLink"
+            routerLinkActive="active"
+            #rla="routerLinkActive"
+            [attr.data-active]="rla.isActive || null"
+            [queryParams]="{ n: tab.queryName, q: nav.searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }">
+            @if (tab.icon) {
+              <FaIcon [faClass]="tab.icon" aria-hidden="true" />
+            }
+            <span>{{ label }}</span>
+          </sidebar-menu-button>
+        </sidebar-menu-item>
+      }
+    </sidebar-menu>
+  `
+                }]
+        }], propDecorators: { path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }] } });
+
 class NoResultComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NoResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: NoResultComponent, isStandalone: true, selector: "NoResult", host: { classAttribute: "p-4 flex flex-col gap-2 rounded-md" }, providers: [provideTranslocoScope("no-result")], ngImport: i0, template: `
@@ -7608,21 +7800,21 @@ class SponsoredResultsComponent {
         const { sponsoredLinks } = getState(this.appStore);
         return sponsoredLinks;
     }, ...(ngDevMode ? [{ debugName: "sponsoredLinks" }] : []));
-    sponsoredResults = signal(undefined, ...(ngDevMode ? [{ debugName: "sponsoredResults" }] : []));
-    constructor() {
-        afterNextRender(async () => {
-            if (this.sponsoredLinks()) {
-                const query = this.queryParamStore.getQuery();
-                const links = await withFetch(() => fetchSponsoredLinks(this.sponsoredLinks(), query), this.injector);
-                if (links) {
-                    this.sponsoredResults.set(links?.slice(0, this.slice()));
-                }
-            }
-        });
-    }
+    sponsoredResults = resource({
+        params: () => ({
+            query: this.queryParamStore.getQuery(),
+            links: this.sponsoredLinks(),
+            slice: this.slice(),
+        }),
+        loader: async ({ params: { query, links, slice } }) => {
+            const results = await withFetch(() => fetchSponsoredLinks(links, query), this.injector);
+            return results?.slice(0, slice) ?? [];
+        },
+        defaultValue: [],
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SponsoredResultsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SponsoredResultsComponent, isStandalone: true, selector: "sponsored-results, SponsoredResults, sponsoredresults", inputs: { slice: { classPropertyName: "slice", publicName: "slice", isSignal: true, isRequired: false, transformFunction: null }, displayPromoted: { classPropertyName: "displayPromoted", publicName: "displayPromoted", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" } }, queries: [{ propertyName: "childElement", first: true, predicate: ChildMarkerDirective, descendants: true, isSignal: true }], ngImport: i0, template: ` @if (sponsoredResults()?.length) {
-    @for (link of sponsoredResults(); track $index) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SponsoredResultsComponent, isStandalone: true, selector: "sponsored-results, SponsoredResults, sponsoredresults", inputs: { slice: { classPropertyName: "slice", publicName: "slice", isSignal: true, isRequired: false, transformFunction: null }, displayPromoted: { classPropertyName: "displayPromoted", publicName: "displayPromoted", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" } }, queries: [{ propertyName: "childElement", first: true, predicate: ChildMarkerDirective, descendants: true, isSignal: true }], ngImport: i0, template: ` @if (sponsoredResults.value().length) {
+    @for (link of sponsoredResults.value(); track $index) {
       <li role="listitem" class="text-primary flex items-center gap-2 rounded px-3 py-2 font-bold">
         <a href="{{ link.url }}" target="_blank" rel="noopener" title="{{ link.tooltip }}" class="result-link peer flex items-center gap-2 hover:underline">
           <arrow-up-right-from-square-icon />
@@ -7645,8 +7837,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     selector: 'sponsored-results, SponsoredResults, sponsoredresults',
                     imports: [NgTemplateOutlet, ArrowUpRightFromSquareIcon],
                     standalone: true,
-                    template: ` @if (sponsoredResults()?.length) {
-    @for (link of sponsoredResults(); track $index) {
+                    template: ` @if (sponsoredResults.value().length) {
+    @for (link of sponsoredResults.value(); track $index) {
       <li role="listitem" class="text-primary flex items-center gap-2 rounded px-3 py-2 font-bold">
         <a href="{{ link.url }}" target="_blank" rel="noopener" title="{{ link.tooltip }}" class="result-link peer flex items-center gap-2 hover:underline">
           <arrow-up-right-from-square-icon />
@@ -7666,7 +7858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         role: 'list'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { childElement: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChildMarkerDirective), { isSignal: true }] }], slice: [{ type: i0.Input, args: [{ isSignal: true, alias: "slice", required: false }] }], displayPromoted: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayPromoted", required: false }] }] } });
+        }], propDecorators: { childElement: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ChildMarkerDirective), { isSignal: true }] }], slice: [{ type: i0.Input, args: [{ isSignal: true, alias: "slice", required: false }] }], displayPromoted: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayPromoted", required: false }] }] } });
 
 class ThemeSelectorComponent {
     scope = input.required(...(ngDevMode ? [{ debugName: "scope" }] : []));
@@ -7905,11 +8097,16 @@ class AdvancedFiltersComponent {
     }, ...(ngDevMode ? [{ debugName: "allowEmptySearch" }] : []));
     text = "";
     constructor() {
-        this.getFirstPageQuery();
+        effect(() => {
+            getState(this.appStore);
+            const query = this.appStore.getDefaultQuery();
+            if (query?.name) {
+                this.getFirstPageQuery(query?.name);
+            }
+        });
     }
-    async getFirstPageQuery() {
-        const query = this.appStore.getDefaultQuery() || { name: "_default" };
-        const response = await fetchQuery({ isFirstPage: true, name: query.name });
+    async getFirstPageQuery(queryName) {
+        const response = await fetchQuery({ isFirstPage: true, name: queryName });
         this.aggregations.set(response.aggregations);
     }
     onTabChange(tab) {
@@ -8447,6 +8644,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], propDecorators: { dialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DialogComponent), { isSignal: true }] }], customRange: [{ type: i0.ViewChild, args: ['customRange', { isSignal: true }] }], dualPickers: [{ type: i0.ViewChild, args: ['dualPickers', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], useDateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "useDateRange", required: false }] }], rangeSelected: [{ type: i0.Output, args: ["rangeSelected"] }] } });
 
+function injectAggregationBase(refs) {
+    const aggregationsStore = inject(AggregationsStore);
+    const queryParamsStore = inject(QueryParamsStore);
+    const appStore = inject(AppStore);
+    const aggregationsService = inject(AggregationsService);
+    const injector = inject(Injector);
+    const destroyRef = inject(DestroyRef);
+    const debouncedSearchText = debouncedSignal(refs.searchText, 300);
+    const normalizedSearchText = computed(() => debouncedSearchText()
+        .normalize("NFD")
+        .replace(/[̀-ͯ]/g, ""), ...(ngDevMode ? [{ debugName: "normalizedSearchText" }] : []));
+    const suggests = signal([], ...(ngDevMode ? [{ debugName: "suggests" }] : []));
+    const _filterCount = computed(() => {
+        getState(aggregationsStore);
+        const { count = 0 } = queryParamsStore.getFilter({ field: refs.column() ?? undefined, name: refs.name() ?? undefined }) || {};
+        return count;
+    }, ...(ngDevMode ? [{ debugName: "_filterCount" }] : []));
+    const hasFilters = computed(() => _filterCount() > 0, ...(ngDevMode ? [{ debugName: "hasFilters" }] : []));
+    const filtersCount = _filterCount;
+    const query = buildQuery();
+    const filters = signal([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    if (refs.searchInput && refs.expanded) {
+        effect(() => {
+            if (refs.searchInput()?.nativeElement && refs.expanded() !== null) {
+                setTimeout(() => refs.searchInput()?.nativeElement.focus(), 0);
+            }
+        });
+    }
+    // Track both debounced text and column so a column change also resets suggestions.
+    // switchMap cancels the in-flight fetch when a new value arrives, avoiding race conditions.
+    const searchTrigger = computed(() => ({ text: debouncedSearchText(), column: refs.column() }), ...(ngDevMode ? [{ debugName: "searchTrigger" }] : []));
+    toObservable(searchTrigger)
+        .pipe(takeUntilDestroyed(destroyRef), switchMap(({ text, column }) => {
+        if (text === "" || column === null)
+            return of([]);
+        const q = queryParamsStore.getQuery();
+        return from(withFetch(() => fetchSuggestField(normalizedSearchText(), [column || ""], q), injector));
+    }))
+        .subscribe((result) => suggests.set(result || []));
+    function clearSearch(e) {
+        e.stopImmediatePropagation();
+        refs.searchText.set("");
+    }
+    function selectItems(items, selected, recursive = false) {
+        items.forEach((item) => {
+            if (item.count > 0)
+                item.$selected = selected;
+            if (recursive && item.items?.length)
+                selectItems(item.items, selected, true);
+        });
+    }
+    function addCurrentFiltersToItems(aggregation) {
+        const currentItems = aggregation?.items || [];
+        if (!aggregation?.isTree && !aggregation?.isDistribution) {
+            const currentFilters = queryParamsStore.getFilter({ field: aggregation?.column, name: aggregation?.name });
+            if (currentFilters) {
+                if (Array.isArray(currentFilters.filters) && currentFilters.filters.length) {
+                    currentFilters.filters.forEach((filter) => {
+                        const found = currentItems.find((item) => item.value?.toString().toLocaleLowerCase() === filter.value?.toLocaleLowerCase());
+                        if (!found) {
+                            currentItems.unshift({ value: filter.value, display: filter.display, $selected: true });
+                        }
+                        else {
+                            found.$selected = true;
+                        }
+                    });
+                }
+                else if (currentFilters.value) {
+                    const found = currentItems.find((item) => item.value?.toString().toLocaleLowerCase() === currentFilters.value?.toLocaleLowerCase());
+                    if (!found) {
+                        currentItems.push({ value: currentFilters.value, display: currentFilters.display, $selected: true });
+                    }
+                    else {
+                        found.$selected = true;
+                    }
+                }
+            }
+        }
+        return currentItems;
+    }
+    function applyFilters(appliedFilters, agg, clearFn) {
+        const { name: aggName, column: field } = agg;
+        if (appliedFilters.length > 1) {
+            const display = appliedFilters[0].display;
+            if (agg.isDistribution) {
+                queryParamsStore.updateFilter({
+                    operator: "or",
+                    filters: appliedFilters,
+                    name: aggName,
+                    field,
+                    display,
+                });
+            }
+            else {
+                const values = appliedFilters.map((f) => f.value);
+                queryParamsStore.updateFilter({
+                    operator: "in",
+                    name: aggName,
+                    field,
+                    values,
+                    display,
+                    filters: appliedFilters,
+                });
+            }
+        }
+        else if (appliedFilters.length === 1) {
+            queryParamsStore.updateFilter(appliedFilters[0]);
+        }
+        else {
+            clearFn();
+        }
+    }
+    return {
+        aggregationsStore,
+        queryParamsStore,
+        appStore,
+        aggregationsService,
+        injector,
+        destroyRef,
+        debouncedSearchText,
+        normalizedSearchText,
+        suggests,
+        hasFilters,
+        filtersCount,
+        query,
+        filters,
+        clearSearch,
+        selectItems,
+        addCurrentFiltersToItems,
+        applyFilters,
+    };
+}
+
 /**
  * Injection token that indicates whether custom date ranges are allowed.
  *
@@ -8466,507 +8796,67 @@ const FILTER_DATE_ALLOW_CUSTOM_RANGE = new InjectionToken("date allow custom ran
     factory: () => true
 });
 
-class AggregationListItemComponent {
+const options = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+};
+class AggregationDateComponent {
     cn = cn;
-    get disabled() {
-        return this.node().count === 0 ? "disabled" : null;
-    }
+    /* view queries */
+    dateRangeDialog = viewChild(AggregationDateRangeDialogComponent, ...(ngDevMode ? [{ debugName: "dateRangeDialog" }] : []));
+    /* inputs */
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    showFiltersCount = input(false, ...(ngDevMode ? [{ debugName: "showFiltersCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    title = input({ label: "Date", icon: "far fa-calendar-day" }, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    displayEmptyDistributionIntervals = input(false, ...(ngDevMode ? [{ debugName: "displayEmptyDistributionIntervals" }] : []));
+    /* outputs */
     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);
-    }
-    onTextClick(event) {
-        if (this.quickFilter()) {
-            this.select(this.node(), event);
-            this.onFilter.emit();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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',\r\n      node().$selected && ''\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  @let icon = node().icon;\r\n  @if (icon) {\r\n    <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\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: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "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.18", ngImport: i0, type: AggregationListItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "aggregation-list-item, AggregationListItem, aggregationlistitem", standalone: true, imports: [HighlightWordPipe, ListItemComponent, SyslangPipe, TranslocoPipe, FaIconComponent], 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',\r\n      node().$selected && ''\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  @let icon = node().icon;\r\n  @if (icon) {\r\n    <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\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);
-    destroyRef = inject(DestroyRef);
-    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();
-    onApply = output();
-    onClear = 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;
-            }
+    onApply = output();
+    onClear = output();
+    /* collapse state */
+    isCollapsed = linkedSignal(() => this.collapsed(), ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
+    expanded = computed(() => (this.isCollapsed() ? null : ""), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    /* search state — unused by date component but required by AggregationBaseRefs */
+    searchText = model("", ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+    searchInput = signal(undefined, ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
+    /* composable — injects stores/services, wires search effects, provides shared methods */
+    base = injectAggregationBase({
+        name: this.name,
+        column: this.column,
+        searchText: this.searchText,
+        searchInput: this.searchInput,
+        expanded: this.expanded,
+    });
+    /* spread from base */
+    aggregationsService = this.base.aggregationsService;
+    queryParamsStore = this.base.queryParamsStore;
+    hasFilters = this.base.hasFilters;
+    destroyRef = this.base.destroyRef;
+    /* injected services */
+    allowCustomRange = inject(FILTER_DATE_ALLOW_CUSTOM_RANGE);
+    transloco = inject(TranslocoService);
+    /* state */
+    selection = signal(false, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    validSelection = signal(false, ...(ngDevMode ? [{ debugName: "validSelection" }] : []));
+    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" }] : []));
-    /* 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 query = this.queryParamsStore.getQuery();
-            const suggests = (await withFetch(() => fetchSuggestField(this.normalizedSearchText(), [this.aggregation()?.column || ""], query), this.injector)) || [];
-            this.suggests.set(suggests);
-        });
-        this.destroyRef.onDestroy(() => {
-            // If the popover is closed with unapplied selections, reset $selected to undefined
-            // so that processAggregation can recompute it from active filters on next open
-            if (this.selection()) {
-                this.aggregation()?.items?.forEach(item => {
-                    item.$selected = undefined;
-                });
-            }
-        });
-    }
-    /**
-     * 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([]);
-        this.onClear.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.select();
-            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);
-        this.onApply.emit();
-    }
-    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() {
-        const selectedItems = this.items().filter(item => item.$selected);
-        this.onSelect.emit(selectedItems);
-        // Keep apply visible if items are selected, or if active filters exist (user may be deselecting to clear)
-        this.selection.set(selectedItems.length > 0 || this.hasFilters());
-    }
-    /**
-     * 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");
-    }
-    clearSearch(e) {
-        e.stopImmediatePropagation();
-        this.searchText.set("");
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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", onApply: "onApply", onClear: "onClear", 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    <triangle-alert-icon class=\"mr-1\" />\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      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\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\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    <!-- apply filter block -->\r\n    @if (!isCollapsed()) {\r\n      @if (hasFilters()) {\r\n        @let label = \"filters.clearFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); clear()\">\r\n          <filter-x-icon />\r\n        </button>\r\n      }\r\n      @if (selection()) {\r\n        @let label = \"filters.apply\" | transloco;\r\n        <button\r\n          variant=\"accent\"\r\n          size=\"sm\"\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); apply()\">\r\n          <FilterIcon />\r\n          {{ label }}\r\n        </button>\r\n      }\r\n\r\n      <!-- select / unselect all -->\r\n      @if (isAllSelected()) {\r\n        @let label = \"filters.unselectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); unselectAll()\">\r\n          <square-check-icon />\r\n        </button>\r\n      } @else {\r\n        @let label = \"filters.selectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); selectAll()\">\r\n          <square-icon />\r\n        </button>\r\n      }\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <icon-button\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      </icon-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      <InputGroupAddon align=\"inline-end\" class=\"gap-0.5!\">\r\n        <icon-button\r\n          size=\"sm\"\r\n          [class]=\"\r\n            searchText().length > 0\r\n              ? 'rotate-90 cursor-pointer opacity-100 transition-[rotate,opacity] duration-500'\r\n              : 'pointer-events-none rotate-0 opacity-0 transition-[rotate,opacity] duration-500'\r\n          \"\r\n          aria-label=\"Clear search\"\r\n          [tabindex]=\"searchText().length > 0 ? 0 : -1\"\r\n          (keydown.enter)=\"clearSearch($event)\"\r\n          (click)=\"clearSearch($event)\">\r\n          <XMarkIcon />\r\n        </icon-button>\r\n        <ng-content />\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      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", "scheme", "iconOnly", "size", "solid"] }, { 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", "scheme", "size"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", 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: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: TriangleAlertIcon, selector: "triangle-alert-icon, TriangleAlertIcon", inputs: ["class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "component", type: SquareCheckIcon, selector: "square-check-icon, SquareCheckIcon", inputs: ["class"] }, { kind: "component", type: SquareIcon, selector: "square-icon, SquareIcon", inputs: ["class"] }, { kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "component", type: XMarkIcon, selector: "XMarkIcon, xmark-icon, x-mark-icon", inputs: ["class"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "AggregationList, aggregation-list, aggregationlist", imports: [
-                        FormsModule,
-                        ReactiveFormsModule,
-                        ButtonComponent,
-                        AggregationListItemComponent,
-                        SyslangPipe,
-                        TranslocoPipe,
-                        BadgeComponent,
-                        ChevronRightIcon,
-                        InputGroupInput,
-                        InputGroupComponent,
-                        InputGroupAddonComponent,
-                        SearchIcon,
-                        FilterIcon,
-                        AggregationListItemComponent,
-                        FaIconComponent,
-                        TriangleAlertIcon,
-                        FilterIcon,
-                        FilterXIcon,
-                        SquareCheckIcon,
-                        SquareIcon,
-                        IconButtonComponent,
-                        XMarkIcon
-                    ], 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    <triangle-alert-icon class=\"mr-1\" />\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      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\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\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    <!-- apply filter block -->\r\n    @if (!isCollapsed()) {\r\n      @if (hasFilters()) {\r\n        @let label = \"filters.clearFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); clear()\">\r\n          <filter-x-icon />\r\n        </button>\r\n      }\r\n      @if (selection()) {\r\n        @let label = \"filters.apply\" | transloco;\r\n        <button\r\n          variant=\"accent\"\r\n          size=\"sm\"\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); apply()\">\r\n          <FilterIcon />\r\n          {{ label }}\r\n        </button>\r\n      }\r\n\r\n      <!-- select / unselect all -->\r\n      @if (isAllSelected()) {\r\n        @let label = \"filters.unselectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); unselectAll()\">\r\n          <square-check-icon />\r\n        </button>\r\n      } @else {\r\n        @let label = \"filters.selectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); selectAll()\">\r\n          <square-icon />\r\n        </button>\r\n      }\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <icon-button\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      </icon-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      <InputGroupAddon align=\"inline-end\" class=\"gap-0.5!\">\r\n        <icon-button\r\n          size=\"sm\"\r\n          [class]=\"\r\n            searchText().length > 0\r\n              ? 'rotate-90 cursor-pointer opacity-100 transition-[rotate,opacity] duration-500'\r\n              : 'pointer-events-none rotate-0 opacity-0 transition-[rotate,opacity] duration-500'\r\n          \"\r\n          aria-label=\"Clear search\"\r\n          [tabindex]=\"searchText().length > 0 ? 0 : -1\"\r\n          (keydown.enter)=\"clearSearch($event)\"\r\n          (click)=\"clearSearch($event)\">\r\n          <XMarkIcon />\r\n        </icon-button>\r\n        <ng-content />\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      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"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], 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"] }] } });
-
-const options = {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit'
-};
-class AggregationDateComponent extends AggregationListComponent {
-    dateRangeDialog = viewChild(AggregationDateRangeDialogComponent, ...(ngDevMode ? [{ debugName: "dateRangeDialog" }] : []));
-    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);
-    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    isEmpty = computed(() => this.aggregation() === null, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
+    items = computed(() => this.aggregation()?.items ?? [], ...(ngDevMode ? [{ debugName: "items" }] : []));
     dateOptions = computed(() => translateAggregationToDateOptions(this.aggregation(), this.displayEmptyDistributionIntervals()), ...(ngDevMode ? [{ debugName: "dateOptions" }] : []));
     form = new FormGroup({
         option: new FormControl(null),
@@ -8977,7 +8867,6 @@ class AggregationDateComponent extends AggregationListComponent {
     });
     today = new Date();
     lang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "lang" }] : []));
-    validSelection = signal(false, ...(ngDevMode ? [{ debugName: "validSelection" }] : []));
     formValue = toSignal(this.form.valueChanges, { initialValue: this.form.value });
     customRangeFrom = computed(() => {
         const from = this.formValue().customRange?.from;
@@ -8988,7 +8877,6 @@ class AggregationDateComponent extends AggregationListComponent {
         return to ? new Date(to).toLocaleDateString(this.lang()) : "";
     }, ...(ngDevMode ? [{ debugName: "customRangeTo" }] : []));
     constructor() {
-        super();
         this.transloco.langChanges$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((lang) => {
             this.lang.set(lang);
         });
@@ -9007,17 +8895,6 @@ class AggregationDateComponent extends AggregationListComponent {
                 (changes.option !== "custom-range" || changes.customRange?.from !== null || changes.customRange?.to !== null));
         });
     }
-    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" }] : []));
     select() {
         this.selection.set(true);
     }
@@ -9049,6 +8926,15 @@ class AggregationDateComponent extends AggregationListComponent {
             this.onClear.emit();
         }
     }
+    onHeaderClick(event) {
+        event.preventDefault();
+        const isDate = this.aggregationsService.appStore.isDateColumn(this.aggregation()?.column || "");
+        if (!isDate && this.isEmpty())
+            return;
+        if (this.collapsible()) {
+            this.isCollapsed.update((value) => !value);
+        }
+    }
     selectAndOpenDialog() {
         this.select();
         this.dateRangeDialog()?.open();
@@ -9174,7 +9060,7 @@ class AggregationDateComponent extends AggregationListComponent {
         throw new Error("filters.filterInvalid");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "@container" }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "dateRangeDialog", first: true, predicate: AggregationDateRangeDialogComponent, 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      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\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      <icon-button\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        <filter-x-icon />\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <icon-button\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        <filter-icon />\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n    @if (collapsible()) {\r\n      <icon-button\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      </icon-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=\"open date range picker\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-range-dialog\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n          <div\r\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\r\n                \"filters.from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeFrom()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label\r\n                for=\"datepicker-range-end\"\r\n                class=\"min-w-10 truncate text-right\"\r\n                >{{ \"filters.to\" | transloco }}</label\r\n              >\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeTo()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n\r\n<aggregation-date-range-dialog\r\n  [lang]=\"lang()\"\r\n  [useDateRange]=\"false\"\r\n  [min]=\"form.get('customRange.from')?.value || undefined\"\r\n  [max]=\"form.get('customRange.to')?.value || undefined\"\r\n  (rangeSelected)=\"onRangeSelected($event)\" />\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: 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: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: AggregationDateRangeDialogComponent, selector: "aggregation-date-range-dialog", inputs: ["min", "max", "lang", "useDateRange"], outputs: ["rangeSelected"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AggregationDateComponent, isStandalone: true, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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 }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, displayEmptyDistributionIntervals: { classPropertyName: "displayEmptyDistributionIntervals", publicName: "displayEmptyDistributionIntervals", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear", searchText: "searchTextChange" }, host: { classAttribute: "@container" }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "dateRangeDialog", first: true, predicate: AggregationDateRangeDialogComponent, descendants: true, isSignal: 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      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\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      <icon-button\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        <filter-x-icon />\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <icon-button\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        <filter-icon />\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n    @if (collapsible()) {\r\n      <icon-button\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      </icon-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-[var(--scroll-height,20rem)] 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=\"open date range picker\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-range-dialog\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n          <div\r\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\r\n                \"filters.from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeFrom()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label\r\n                for=\"datepicker-range-end\"\r\n                class=\"min-w-10 truncate text-right\"\r\n                >{{ \"filters.to\" | transloco }}</label\r\n              >\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeTo()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n\r\n<aggregation-date-range-dialog\r\n  [lang]=\"lang()\"\r\n  [useDateRange]=\"false\"\r\n  [min]=\"form.get('customRange.from')?.value || undefined\"\r\n  [max]=\"form.get('customRange.to')?.value || undefined\"\r\n  (rangeSelected)=\"onRangeSelected($event)\" />\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: 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: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: AggregationDateRangeDialogComponent, selector: "aggregation-date-range-dialog", inputs: ["min", "max", "lang", "useDateRange"], outputs: ["rangeSelected"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationDateComponent, decorators: [{
             type: Component,
@@ -9192,8 +9078,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         IconButtonComponent
                     ], 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      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\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      <icon-button\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        <filter-x-icon />\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <icon-button\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        <filter-icon />\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n    @if (collapsible()) {\r\n      <icon-button\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      </icon-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=\"open date range picker\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-range-dialog\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n          <div\r\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\r\n                \"filters.from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeFrom()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label\r\n                for=\"datepicker-range-end\"\r\n                class=\"min-w-10 truncate text-right\"\r\n                >{{ \"filters.to\" | transloco }}</label\r\n              >\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeTo()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n\r\n<aggregation-date-range-dialog\r\n  [lang]=\"lang()\"\r\n  [useDateRange]=\"false\"\r\n  [min]=\"form.get('customRange.from')?.value || undefined\"\r\n  [max]=\"form.get('customRange.to')?.value || undefined\"\r\n  (rangeSelected)=\"onRangeSelected($event)\" />\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dateRangeDialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationDateRangeDialogComponent), { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], displayEmptyDistributionIntervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayEmptyDistributionIntervals", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
+                    }, 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      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\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      <icon-button\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        <filter-x-icon />\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <icon-button\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        <filter-icon />\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n    @if (collapsible()) {\r\n      <icon-button\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      </icon-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-[var(--scroll-height,20rem)] 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=\"open date range picker\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-range-dialog\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n          <div\r\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\r\n                \"filters.from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeFrom()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label\r\n                for=\"datepicker-range-end\"\r\n                class=\"min-w-10 truncate text-right\"\r\n                >{{ \"filters.to\" | transloco }}</label\r\n              >\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeTo()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n\r\n<aggregation-date-range-dialog\r\n  [lang]=\"lang()\"\r\n  [useDateRange]=\"false\"\r\n  [min]=\"form.get('customRange.from')?.value || undefined\"\r\n  [max]=\"form.get('customRange.to')?.value || undefined\"\r\n  (rangeSelected)=\"onRangeSelected($event)\" />\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dateRangeDialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationDateRangeDialogComponent), { isSignal: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", 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 }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], displayEmptyDistributionIntervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayEmptyDistributionIntervals", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
 
 /**
  * Component that allows users to select a date or a date range for filtering search results.
@@ -9202,7 +9088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  */
 class DateComponent extends AggregationDateComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\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      <icon-button\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        <filter-x-icon />\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <icon-button\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        <filter-icon />\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n    @if (collapsible()) {\r\n      <icon-button\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      </icon-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=\"open date range picker\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-range-dialog\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n          <div\r\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\r\n                \"filters.from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeFrom()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label\r\n                for=\"datepicker-range-end\"\r\n                class=\"min-w-10 truncate text-right\"\r\n                >{{ \"filters.to\" | transloco }}</label\r\n              >\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeTo()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n\r\n<aggregation-date-range-dialog\r\n  [lang]=\"lang()\"\r\n  [useDateRange]=\"false\"\r\n  [min]=\"form.get('customRange.from')?.value || undefined\"\r\n  [max]=\"form.get('customRange.to')?.value || undefined\"\r\n  (rangeSelected)=\"onRangeSelected($event)\" />\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "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: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: AggregationDateRangeDialogComponent, selector: "aggregation-date-range-dialog", inputs: ["min", "max", "lang", "useDateRange"], outputs: ["rangeSelected"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\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      <icon-button\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        <filter-x-icon />\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <icon-button\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        <filter-icon />\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n    @if (collapsible()) {\r\n      <icon-button\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      </icon-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-[var(--scroll-height,20rem)] 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=\"open date range picker\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-range-dialog\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n          <div\r\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\r\n                \"filters.from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeFrom()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label\r\n                for=\"datepicker-range-end\"\r\n                class=\"min-w-10 truncate text-right\"\r\n                >{{ \"filters.to\" | transloco }}</label\r\n              >\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeTo()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n\r\n<aggregation-date-range-dialog\r\n  [lang]=\"lang()\"\r\n  [useDateRange]=\"false\"\r\n  [min]=\"form.get('customRange.from')?.value || undefined\"\r\n  [max]=\"form.get('customRange.to')?.value || undefined\"\r\n  (rangeSelected)=\"onRangeSelected($event)\" />\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "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: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: AggregationDateRangeDialogComponent, selector: "aggregation-date-range-dialog", inputs: ["min", "max", "lang", "useDateRange"], outputs: ["rangeSelected"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
@@ -9219,7 +9105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         FilterXIcon
                     ], 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      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\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      <icon-button\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        <filter-x-icon />\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <icon-button\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        <filter-icon />\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n    @if (collapsible()) {\r\n      <icon-button\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      </icon-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=\"open date range picker\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-range-dialog\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n          <div\r\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\r\n                \"filters.from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeFrom()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label\r\n                for=\"datepicker-range-end\"\r\n                class=\"min-w-10 truncate text-right\"\r\n                >{{ \"filters.to\" | transloco }}</label\r\n              >\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeTo()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n\r\n<aggregation-date-range-dialog\r\n  [lang]=\"lang()\"\r\n  [useDateRange]=\"false\"\r\n  [min]=\"form.get('customRange.from')?.value || undefined\"\r\n  [max]=\"form.get('customRange.to')?.value || undefined\"\r\n  (rangeSelected)=\"onRangeSelected($event)\" />\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"] }]
+                    }, 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      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\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      <icon-button\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        <filter-x-icon />\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <icon-button\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        <filter-icon />\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n    @if (collapsible()) {\r\n      <icon-button\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      </icon-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-[var(--scroll-height,20rem)] 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=\"open date range picker\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-range-dialog\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n          <div\r\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\r\n                \"filters.from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeFrom()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label\r\n                for=\"datepicker-range-end\"\r\n                class=\"min-w-10 truncate text-right\"\r\n                >{{ \"filters.to\" | transloco }}</label\r\n              >\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeTo()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n\r\n<aggregation-date-range-dialog\r\n  [lang]=\"lang()\"\r\n  [useDateRange]=\"false\"\r\n  [min]=\"form.get('customRange.from')?.value || undefined\"\r\n  [max]=\"form.get('customRange.to')?.value || undefined\"\r\n  (rangeSelected)=\"onRangeSelected($event)\" />\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"] }]
         }] });
 
 class ArticleEntities {
@@ -9862,6 +9748,8 @@ class AlertDialog {
         if (!this.alert)
             return;
         const q = this.alert.query;
+        // `q.filters` widened to `Filter[] | LegacyFilter[]` upstream, but the
+        // query-params store deliberately deals in `LegacyFilter[]` only.
         const filters = Array.isArray(q.filters) ? q.filters : undefined;
         this.queryParamsStore.patch({ text: q.text, tab: q.tab, basket: q.basket, sort: q.sort, filters, name: q.name });
         this.dialog()?.close();
@@ -10654,6 +10542,15 @@ class SignInComponent {
     destroyRef;
     cn = cn;
     config = globalConfig;
+    /**
+     * True when authentication is handled outside the credentials form — i.e. by the
+     * browser/proxy (`useSSO`) or by an auto-configured OAuth/SAML provider. In those
+     * modes this screen shows a loader instead of a login form and initiates the
+     * handshake automatically by calling `handleLogin()`.
+     */
+    externalAuth = !!(globalConfig.useSSO ||
+        globalConfig.autoOAuthProvider ||
+        globalConfig.autoSAMLProvider);
     class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
     forgotPassword = output();
     username = model("", ...(ngDevMode ? [{ debugName: "username" }] : []));
@@ -10675,6 +10572,30 @@ class SignInComponent {
     expiresSoonNotified = signal(false, ...(ngDevMode ? [{ debugName: "expiresSoonNotified" }] : []));
     constructor(destroyRef) {
         this.destroyRef = destroyRef;
+        // If the user is already authenticated when landing here (e.g. page refresh on
+        // /login, or an external handshake completed before this screen was created),
+        // don't sit on the loader: go straight to the returnUrl.
+        if (this.authenticated()) {
+            const url = this.route.snapshot.queryParams["returnUrl"] || "/";
+            this.router.navigateByUrl(url);
+        }
+        // When authentication is delegated to the browser/proxy (SSO) or an OAuth/SAML
+        // provider, no credentials form is shown: this screen shows a loader and initiates
+        // the handshake automatically by calling `handleLogin()`. If the handshake never
+        // completes, fall back to /error after 5s; the fallback is cancelled as soon as
+        // the login succeeds (the `authenticated` event then drives navigation).
+        if (this.externalAuth && !this.authenticated()) {
+            const timeout = setTimeout(() => {
+                this.router.navigate(["/error"], {
+                    queryParams: { returnUrl: this.route.snapshot.queryParams["returnUrl"] }
+                });
+            }, 5000);
+            destroyRef.onDestroy(() => clearTimeout(timeout));
+            this.handleLogin().then(result => {
+                if (result)
+                    clearTimeout(timeout);
+            });
+        }
         effect(() => {
             const principal = getState(this.principalStore);
             if (this.authenticated() && principal && !this.expiresSoonNotified()) {
@@ -10720,14 +10641,16 @@ class SignInComponent {
         this.router.navigate(["/login"]);
     }
     async handleLogin() {
-        login().then((result) => {
+        return login().then((result) => {
             if (result) {
                 this.auditService.notifyLogin();
             }
+            return result;
         }).catch(error => {
             warn("An error occurred while logging in", error);
             this.auditService.notify({ type: 'Login_Denied' });
             this.router.navigate(["error"]);
+            return false;
         });
     }
     async handleLoginWithCredentials() {
@@ -10770,7 +10693,7 @@ class SignInComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SignInComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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()) {
+    @if (!authenticated() && !externalAuth) {
       <Card
         hover="no"
         cdkTrapFocus
@@ -10781,60 +10704,54 @@ class SignInComponent {
         </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()" />
-            </div>
-
-            <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 variant="primary"
-              [disabled]="!isValid()"
-              (click)="handleLoginWithCredentials()">
-              {{ "login.connect" | transloco }}
-            </button>
-          }
-          @else {
-            <!-- authentication using OAuth or SAML provider -->
-            <button (click)="handleLogin()">
-              {{ "login.SignInWith" | transloco : { provider: config.autoOAuthProvider ? "OAuth" : "SAML" } }}
-            </button>
-          }
+          <!-- 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()" />
+          </div>
+
+          <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 variant="primary"
+            [disabled]="!isValid()"
+            (click)="handleLoginWithCredentials()">
+            {{ "login.connect" | transloco }}
+          </button>
         </CardContent>
       </Card>
     } @else {
-      <app-wait />
+      <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>
+      </div>
     }
-  `, 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", "scheme", "iconOnly", "size", "solid"] }, { 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" }] });
+  `, isInline: true, styles: ["input{background-color:var(--background)}.loader{--w: 96px;--h: 96px;transform:rotate(45deg);perspective:1000px;border-radius:50%;width:var(--w);height:var(--h);color:#0040bf}.loader:before,.loader:after{content:\"\";display:block;position:absolute;top:0;left:0;width:inherit;height:inherit;border-radius:50%;transform:rotateX(70deg);animation:1s spin linear infinite}.loader:after{color:#ff854a;transform:rotateY(70deg);animation-delay:.4s}@keyframes spin{0%,to{box-shadow:.4em 0 0 0 currentcolor}12%{box-shadow:.4em .4em 0 0 currentcolor}25%{box-shadow:0 .4em 0 0 currentcolor}37%{box-shadow:-.4em .4em 0 0 currentcolor}50%{box-shadow:-.4em 0 0 0 currentcolor}62%{box-shadow:-.4em -.4em 0 0 currentcolor}75%{box-shadow:0 -.4em 0 0 currentcolor}87%{box-shadow:.4em -.4em 0 0 currentcolor}}\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", "scheme", "iconOnly", "size", "solid"] }, { 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: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,
@@ -10847,10 +10764,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         ButtonComponent,
                         CardComponent,
                         CardHeaderComponent,
-                        CardContentComponent,
-                        LoadingComponent
+                        CardContentComponent
                     ], providers: [provideTranslocoScope("login")], template: `
-    @if (!authenticated()) {
+    @if (!authenticated() && !externalAuth) {
       <Card
         hover="no"
         cdkTrapFocus
@@ -10861,62 +10777,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         </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()" />
-            </div>
-
-            <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 variant="primary"
-              [disabled]="!isValid()"
-              (click)="handleLoginWithCredentials()">
-              {{ "login.connect" | transloco }}
-            </button>
-          }
-          @else {
-            <!-- authentication using OAuth or SAML provider -->
-            <button (click)="handleLogin()">
-              {{ "login.SignInWith" | transloco : { provider: config.autoOAuthProvider ? "OAuth" : "SAML" } }}
-            </button>
-          }
+          <!-- 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()" />
+          </div>
+
+          <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 variant="primary"
+            [disabled]="!isValid()"
+            (click)="handleLoginWithCredentials()">
+            {{ "login.connect" | transloco }}
+          </button>
         </CardContent>
       </Card>
     } @else {
-      <app-wait />
+      <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>
+      </div>
     }
   `, host: {
                         "[class]": "cn('grid h-dvh w-full place-content-center', class())"
-                    }, styles: ["input{background-color:var(--background)}\n"] }]
+                    }, styles: ["input{background-color:var(--background)}.loader{--w: 96px;--h: 96px;transform:rotate(45deg);perspective:1000px;border-radius:50%;width:var(--w);height:var(--h);color:#0040bf}.loader:before,.loader:after{content:\"\";display:block;position:absolute;top:0;left:0;width:inherit;height:inherit;border-radius:50%;transform:rotateX(70deg);animation:1s spin linear infinite}.loader:after{color:#ff854a;transform:rotateY(70deg);animation-delay:.4s}@keyframes spin{0%,to{box-shadow:.4em 0 0 0 currentcolor}12%{box-shadow:.4em .4em 0 0 currentcolor}25%{box-shadow:0 .4em 0 0 currentcolor}37%{box-shadow:-.4em .4em 0 0 currentcolor}50%{box-shadow:-.4em 0 0 0 currentcolor}62%{box-shadow:-.4em -.4em 0 0 currentcolor}75%{box-shadow:0 -.4em 0 0 currentcolor}87%{box-shadow:.4em -.4em 0 0 currentcolor}}\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 {
@@ -11308,7 +11218,7 @@ class OverrideUserDialogComponent {
         }
     }
     handleOverrideUser(username, domain) {
-        const { useSSO, createRoutes } = globalConfig;
+        const { useSSO, createRoutes, useCredentials } = globalConfig;
         if (username === undefined || domain === undefined) {
             setGlobalConfig({ userOverrideActive: false, userOverride: undefined });
         }
@@ -11316,7 +11226,7 @@ class OverrideUserDialogComponent {
             setGlobalConfig({ userOverrideActive: true, userOverride: { username, domain } });
         }
         // Login with the new user
-        if (useSSO) {
+        if (useSSO && !useCredentials) {
             this.appService
                 .initialize(createRoutes)
                 .then(() => {
@@ -11341,6 +11251,7 @@ class OverrideUserDialogComponent {
                     })
                         .catch((err) => {
                         error("An error occured while overriding (initialize)", err);
+                        notify.error(err.message, { duration: 2000 });
                         setGlobalConfig({ userOverrideActive: false, userOverride: undefined });
                     });
                 }
@@ -11898,11 +11809,16 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
     text = "";
     constructor() {
         super();
-        this.getFirstPageQuery();
+        effect(() => {
+            getState(this.appStore);
+            const query = this.appStore.getDefaultQuery();
+            if (query?.name) {
+                this.getFirstPageQuery(query?.name);
+            }
+        });
     }
-    async getFirstPageQuery() {
-        const query = this.appStore.getDefaultQuery() || { name: "_default" };
-        const response = await fetchQuery({ isFirstPage: true, name: query.name });
+    async getFirstPageQuery(queryName) {
+        const response = await fetchQuery({ isFirstPage: true, name: queryName });
         this.aggregations.set(response.aggregations);
     }
     onTabChange(tab) {
@@ -13037,201 +12953,156 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             args: [{ selector: 'feedback, Feedback', standalone: true, imports: [ButtonComponent, MenuComponent, MenuContentComponent, MenuItemComponent, TranslocoPipe, FeedbackDialogComponent, CommentIcon, XMarkIcon, ThumbsUpIcon, ThumbsDownIcon, FaIconComponent], providers: [provideTranslocoScope('feedback')], template: "<menu>\r\n  @let feedback = \"feedback.label\" | transloco;\r\n  <button [variant]=\"variant()\" [solid]=\"solid()\" [aria-label]=\"feedback\">\r\n    <comment-icon />\r\n    <span>{{ feedback }}</span>\r\n    <x-mark-icon class=\"ms-2\" (click)=\"close($event)\" />\r\n  </button>\r\n\r\n  <MenuContent>\r\n    @if (!disliked()) {\r\n      @let feedbackLike = \"feedback.like\" | transloco;\r\n      @let feedbackLiked = \"feedback.liked\" | transloco;\r\n      <menuitem (click)=\"like()\" aria-label=\"feedback\">\r\n        @if (liked()) {\r\n          <thumbs-up-icon [fill]=\"true\" />\r\n          {{ feedbackLiked }}\r\n        } @else {\r\n          <thumbs-up-icon />\r\n          {{ feedbackLike }}\r\n        }\r\n      </menuitem>\r\n    }\r\n    @if (!liked()) {\r\n      <menuitem\r\n        (click)=\"dislike()\"\r\n        [aria-label]=\"'feedback.dislike' | transloco\">\r\n        @if (disliked()) {\r\n          <thumbs-down-icon [fill]=\"true\" />\r\n          {{ \"feedback.disliked\" | transloco }}\r\n        } @else {\r\n          <thumbs-down-icon />\r\n          {{ \"feedback.dislike\" | transloco }}\r\n        }\r\n      </menuitem>\r\n    }\r\n    @for (menu of menus; track $index) {\r\n      @let feedbackTitle = \"feedback.\" + menu.type + \".title\" | transloco;\r\n      <menuitem\r\n        (click)=\"openFeedbackDialog(menu.type)\"\r\n        [aria-label]=\"feedbackTitle\">\r\n        <fa-icon [faClass]=\"menu.icon\" />\r\n        {{ feedbackTitle }}\r\n      </menuitem>\r\n    }\r\n  </MenuContent>\r\n</menu>\r\n\r\n<feedback-dialog />\r\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 }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }] } });
 
-class AggregationTreeItemComponent {
-    cn = cn;
-    get disabled() {
-        return this.node().count === 0 ? "disabled" : null;
-    }
-    onSelect = output();
-    onOpen = output();
-    onFilter = output();
-    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
-    path = input.required(...(ngDevMode ? [{ debugName: "path" }] : []));
-    field = input(...(ngDevMode ? [undefined, { debugName: "field" }] : []));
-    appStore = inject(AppStore);
-    queryParamsStore = inject(QueryParamsStore);
-    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" }] : []));
-    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, `/${this.node().$path}/*`]; // 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" }] : []));
-    childrenPath = computed(() => this.path().concat(`/${this.node().$path}/*`), ...(ngDevMode ? [{ debugName: "childrenPath" }] : []));
-    name = computed(() => {
-        const value = this.node().display || this.node().value;
-        return typeof value === "string" ? value : `${value}`;
-    }, ...(ngDevMode ? [{ debugName: "name" }] : []));
-    level = computed(() => {
-        const level = (this.node().$level ?? 0) - 1 + (!this.node().hasChildren ? 1 : 0);
-        if (this.node().hasChildren === false) {
-            return level + 1;
-        }
-        return level;
-    }, ...(ngDevMode ? [{ debugName: "level" }] : []));
-    select(item, e, updateChildren) {
-        e?.stopImmediatePropagation();
-        const selected = !item.$selected && !item.$selectedVisually;
-        item.$selected = selected;
-        item.$selectedVisually = false;
-        if (updateChildren) {
-            // apply selection to chilren when selected
-            this.selectChildren(item.items, item.$selected);
-        }
-        this.onSelect.emit(item);
-    }
-    selectChildren(items, select = true) {
-        if (!this.linkChildren() || !items?.length || select === undefined)
-            return;
-        items.forEach((item) => {
-            item.$selectedVisually = select;
-            if (select) {
-                item.$selected = false;
-            }
-            if (item.items?.length) {
-                this.selectChildren(item.items, select);
+class AggregationPanelComponent {
+    /* collapse */
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    isDate = input(false, ...(ngDevMode ? [{ debugName: "isDate" }] : []));
+    isEmpty = input(false, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
+    /* aggregation data — used for label, search input id and load-more condition */
+    aggregation = input(null, ...(ngDevMode ? [{ debugName: "aggregation" }] : []));
+    /* header button state (driven by parent) */
+    showFiltersCount = input(false, ...(ngDevMode ? [{ debugName: "showFiltersCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    filtersCount = input(0, ...(ngDevMode ? [{ debugName: "filtersCount" }] : []));
+    hasFilters = input(false, ...(ngDevMode ? [{ debugName: "hasFilters" }] : []));
+    selection = input(false, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    isAllSelected = input(false, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
+    /* search */
+    searchText = model("", ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+    itemsLength = input(0, ...(ngDevMode ? [{ debugName: "itemsLength" }] : []));
+    /* load more */
+    hasMore = input(false, ...(ngDevMode ? [{ debugName: "hasMore" }] : []));
+    searchedItemsLength = input(0, ...(ngDevMode ? [{ debugName: "searchedItemsLength" }] : []));
+    /* outputs — parent reacts to user actions */
+    cleared = output();
+    applied = output();
+    allSelected = output();
+    allUnselected = output();
+    loadedMore = output();
+    /* internal collapse state */
+    isCollapsed = linkedSignal(() => this.collapsed(), ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
+    expanded = computed(() => (this.isCollapsed() ? null : ""), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    searchInput = viewChild("searchInput", ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
+    isInPopover = !!(inject(PopoverContentComponent, { optional: true }) ||
+        inject(DropdownContentComponent, { optional: true }) ||
+        inject(DropdownDirective, { optional: true }));
+    constructor() {
+        effect(() => {
+            if (this.isInPopover && this.searchInput()?.nativeElement && this.expanded() !== null) {
+                setTimeout(() => this.searchInput()?.nativeElement.focus(), 0);
             }
         });
     }
-    open(e, node) {
-        // fetch aggregation items
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        if (node.items && node.$opened === true) {
-            node.$opened = false;
-            return;
-        }
-        if (node.items && !node.$opened) {
-            node.$opened = true;
+    onHeaderClick(event) {
+        if (!this.isDate() && this.isEmpty()) {
+            event.preventDefault();
             return;
         }
-        this.onOpen.emit(node);
-    }
-    onTextClick(event) {
-        if (this.quickFilter()) {
-            this.select(this.node(), event, true);
-            this.onFilter.emit();
+        if (this.collapsible()) {
+            this.isCollapsed.update((v) => !v);
         }
+        event.preventDefault();
     }
-    onChildSelect(item) {
-        // 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() && !item.$selected && this.node().items.some((i) => i.$selectedVisually)) {
-            this.node().items.forEach((i) => {
-                if (i !== item) {
-                    i.$selectedVisually = false;
-                    i.$selected = true;
-                }
-            });
-        }
-        if (this.linkChildren() && this.node().items.some((i) => !i.$selectedVisually && !i.$selected)) {
-            this.node().$selected = false;
-            this.node().$selectedVisually = false;
-        }
-        this.onSelect.emit(this.node());
+    onToggle(event) {
+        const e = event;
+        this.isCollapsed.set(e.newState === "closed");
+    }
+    clearSearch(e) {
+        e.stopImmediatePropagation();
+        this.searchText.set("");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationTreeItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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',\r\n      (node().$selected || node().$selectedVisually) && ''\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  @let icon = node().icon;\r\n  @if (icon) {\r\n    <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\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, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "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.18", ngImport: i0, type: AggregationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AggregationPanelComponent, isStandalone: true, selector: "AggregationPanel, aggregation-panel", inputs: { id: { classPropertyName: "id", publicName: "id", 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 }, isDate: { classPropertyName: "isDate", publicName: "isDate", isSignal: true, isRequired: false, transformFunction: null }, isEmpty: { classPropertyName: "isEmpty", publicName: "isEmpty", isSignal: true, isRequired: false, transformFunction: null }, aggregation: { classPropertyName: "aggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, hasFilters: { classPropertyName: "hasFilters", publicName: "hasFilters", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, isAllSelected: { classPropertyName: "isAllSelected", publicName: "isAllSelected", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, itemsLength: { classPropertyName: "itemsLength", publicName: "itemsLength", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, searchedItemsLength: { classPropertyName: "searchedItemsLength", publicName: "searchedItemsLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchText: "searchTextChange", cleared: "cleared", applied: "applied", allSelected: "allSelected", allUnselected: "allUnselected", loadedMore: "loadedMore" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<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      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\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      <Badge size=\"xs\" class=\"ml-1\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    @if (!isCollapsed()) {\r\n      @if (hasFilters()) {\r\n        @let label = \"filters.clearFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); cleared.emit()\">\r\n          <filter-x-icon />\r\n        </button>\r\n      }\r\n      @if (selection()) {\r\n        @let label = \"filters.apply\" | transloco;\r\n        <button\r\n          variant=\"accent\"\r\n          size=\"sm\"\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); applied.emit()\">\r\n          <FilterIcon />\r\n          {{ label }}\r\n        </button>\r\n      }\r\n\r\n      @if (isAllSelected()) {\r\n        @let label = \"filters.unselectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); allUnselected.emit()\">\r\n          <square-check-icon />\r\n        </button>\r\n      } @else {\r\n        @let label = \"filters.selectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); allSelected.emit()\">\r\n          <square-icon />\r\n        </button>\r\n      }\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <icon-button\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      </icon-button>\r\n    }\r\n  </summary>\r\n\r\n  @if (aggregation()?.searchable && itemsLength() > 0) {\r\n    <InputGroup class=\"group/item mt-1\">\r\n      <input\r\n        #searchInput\r\n        input-group\r\n        id=\"aggregation-input-{{ aggregation()?.column }}\"\r\n        type=\"text\"\r\n        [attr.aria-label]=\"'search' | transloco\"\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      <InputGroupAddon align=\"inline-end\" class=\"gap-0.5!\">\r\n        <icon-button\r\n          size=\"sm\"\r\n          [class]=\"\r\n            searchText().length > 0\r\n              ? 'rotate-90 cursor-pointer opacity-100 transition-[rotate,opacity] duration-500'\r\n              : 'pointer-events-none rotate-0 opacity-0 transition-[rotate,opacity] duration-500'\r\n          \"\r\n          aria-label=\"Clear search\"\r\n          [tabindex]=\"searchText().length > 0 ? 0 : -1\"\r\n          (keydown.enter)=\"clearSearch($event)\"\r\n          (click)=\"clearSearch($event)\">\r\n          <XMarkIcon />\r\n        </icon-button>\r\n        <ng-content select=\"[search-addon]\" />\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  }\r\n\r\n  <ng-content />\r\n\r\n  @if (hasMore() && searchedItemsLength() === 0) {\r\n    <button\r\n      class=\"mt-1 flex w-full justify-center\"\r\n      [attr.aria-label]=\"'loadMore' | transloco\"\r\n      (click)=\"loadedMore.emit()\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n</details>\r\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: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", 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: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "component", type: SquareCheckIcon, selector: "square-check-icon, SquareCheckIcon", inputs: ["class"] }, { kind: "component", type: SquareIcon, selector: "square-icon, SquareIcon", inputs: ["class"] }, { kind: "component", type: XMarkIcon, selector: "XMarkIcon, xmark-icon, x-mark-icon", inputs: ["class"] }, { kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationTreeItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: "aggregation-tree-item, AggregationTreeItem, aggregationtreeitem", standalone: true, imports: [HighlightWordPipe, ListItemComponent, SyslangPipe, ChevronRightIcon, TranslocoPipe, FaIconComponent], 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',\r\n      (node().$selected || node().$selectedVisually) && ''\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  @let icon = node().icon;\r\n  @if (icon) {\r\n    <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\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 }] }] } });
+            args: [{ selector: "AggregationPanel, aggregation-panel", standalone: true, imports: [
+                        FormsModule,
+                        ButtonComponent,
+                        SyslangPipe,
+                        TranslocoPipe,
+                        BadgeComponent,
+                        ChevronRightIcon,
+                        InputGroupInput,
+                        InputGroupComponent,
+                        InputGroupAddonComponent,
+                        SearchIcon,
+                        FilterIcon,
+                        FaIconComponent,
+                        FilterXIcon,
+                        SquareCheckIcon,
+                        SquareIcon,
+                        XMarkIcon,
+                        IconButtonComponent,
+                    ], template: "<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      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\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      <Badge size=\"xs\" class=\"ml-1\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    @if (!isCollapsed()) {\r\n      @if (hasFilters()) {\r\n        @let label = \"filters.clearFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); cleared.emit()\">\r\n          <filter-x-icon />\r\n        </button>\r\n      }\r\n      @if (selection()) {\r\n        @let label = \"filters.apply\" | transloco;\r\n        <button\r\n          variant=\"accent\"\r\n          size=\"sm\"\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); applied.emit()\">\r\n          <FilterIcon />\r\n          {{ label }}\r\n        </button>\r\n      }\r\n\r\n      @if (isAllSelected()) {\r\n        @let label = \"filters.unselectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); allUnselected.emit()\">\r\n          <square-check-icon />\r\n        </button>\r\n      } @else {\r\n        @let label = \"filters.selectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); allSelected.emit()\">\r\n          <square-icon />\r\n        </button>\r\n      }\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <icon-button\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      </icon-button>\r\n    }\r\n  </summary>\r\n\r\n  @if (aggregation()?.searchable && itemsLength() > 0) {\r\n    <InputGroup class=\"group/item mt-1\">\r\n      <input\r\n        #searchInput\r\n        input-group\r\n        id=\"aggregation-input-{{ aggregation()?.column }}\"\r\n        type=\"text\"\r\n        [attr.aria-label]=\"'search' | transloco\"\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      <InputGroupAddon align=\"inline-end\" class=\"gap-0.5!\">\r\n        <icon-button\r\n          size=\"sm\"\r\n          [class]=\"\r\n            searchText().length > 0\r\n              ? 'rotate-90 cursor-pointer opacity-100 transition-[rotate,opacity] duration-500'\r\n              : 'pointer-events-none rotate-0 opacity-0 transition-[rotate,opacity] duration-500'\r\n          \"\r\n          aria-label=\"Clear search\"\r\n          [tabindex]=\"searchText().length > 0 ? 0 : -1\"\r\n          (keydown.enter)=\"clearSearch($event)\"\r\n          (click)=\"clearSearch($event)\">\r\n          <XMarkIcon />\r\n        </icon-button>\r\n        <ng-content select=\"[search-addon]\" />\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  }\r\n\r\n  <ng-content />\r\n\r\n  @if (hasMore() && searchedItemsLength() === 0) {\r\n    <button\r\n      class=\"mt-1 flex w-full justify-center\"\r\n      [attr.aria-label]=\"'loadMore' | transloco\"\r\n      (click)=\"loadedMore.emit()\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n</details>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], isDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDate", required: false }] }], isEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEmpty", required: false }] }], aggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregation", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], filtersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersCount", required: false }] }], hasFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFilters", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], isAllSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAllSelected", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }], itemsLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsLength", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], searchedItemsLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchedItemsLength", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], applied: [{ type: i0.Output, args: ["applied"] }], allSelected: [{ type: i0.Output, args: ["allSelected"] }], allUnselected: [{ type: i0.Output, args: ["allUnselected"] }], loadedMore: [{ type: i0.Output, args: ["loadedMore"] }], searchInput: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }] } });
 
 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);
-    queryParamsStore = inject(QueryParamsStore);
-    appStore = inject(AppStore);
-    /* services */
-    aggregationsService = inject(AggregationsService);
-    el = inject(ElementRef);
-    injector = inject(Injector);
-    destroyRef = inject(DestroyRef);
+    /* inputs */
     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" }] : []));
+    collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    showFiltersCount = input(false, ...(ngDevMode ? [{ debugName: "showFiltersCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     expandedLevel = input(undefined, ...(ngDevMode ? [{ debugName: "expandedLevel", transform: (v) => {
                 const n = numberAttribute(v);
                 return Number.isNaN(n) ? undefined : n;
-            } }] : [{ transform: (v) => {
+            } }] : [{
+            transform: (v) => {
                 const n = numberAttribute(v);
                 return Number.isNaN(n) ? undefined : n;
-            } }]));
+            },
+        }]));
+    /* outputs */
     onSelect = output();
     onApply = output();
     onClear = 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" }] : []));
+    /* view queries */
+    virtualItems = viewChildren("virtualItem", ...(ngDevMode ? [{ debugName: "virtualItems" }] : []));
+    scrollElement = viewChild("scrollElement", ...(ngDevMode ? [{ debugName: "scrollElement" }] : []));
+    /* selection state */
     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(false, ...(ngDevMode ? [{ debugName: "showFiltersCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    /* aggregation */
+    isAllSelected = signal(false, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
+    /* search state */
+    searchText = model("", ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+    /* composable — injects stores/services, wires search effects, provides shared methods */
+    base = injectAggregationBase({
+        name: this.name,
+        column: this.column,
+        searchText: this.searchText,
+    });
+    /* spread from base */
+    aggregationsStore = this.base.aggregationsStore;
+    queryParamsStore = this.base.queryParamsStore;
+    appStore = this.base.appStore;
+    aggregationsService = this.base.aggregationsService;
+    injector = this.base.injector;
+    destroyRef = this.base.destroyRef;
+    debouncedSearchText = this.base.debouncedSearchText;
+    normalizedSearchText = this.base.normalizedSearchText;
+    suggests = this.base.suggests;
+    hasFilters = this.base.hasFilters;
+    filtersCount = this.base.filtersCount;
+    query = this.base.query;
+    filters = this.base.filters;
+    /* features from appStore */
+    showCount = computed(() => this.appStore.general()?.features?.showAggregationItemCount ?? false, ...(ngDevMode ? [{ debugName: "showCount" }] : []));
+    quickFilter = computed(() => this.appStore.general()?.features?.quickFilter, ...(ngDevMode ? [{ debugName: "quickFilter" }] : []));
+    isDate = computed(() => this.appStore.isDateColumn(this.aggregation()?.column || ""), ...(ngDevMode ? [{ debugName: "isDate" }] : []));
+    /* virtualizer */
+    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" }] : []));
+    linkChildren = computed(() => this.appStore.general()?.features?.filterLinkChildren, ...(ngDevMode ? [{ debugName: "linkChildren" }] : []));
     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();
@@ -13241,21 +13112,17 @@ class AggregationTreeComponent {
                 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;
                 if (expandedLevel) {
                     this.expandItems(agg.items, expandedLevel);
                 }
-                // 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();
@@ -13266,57 +13133,17 @@ class AggregationTreeComponent {
         else if (agg?.items) {
             res = this.addCurrentFiltersToItems();
         }
-        // use session storage to keep the selected statuses
         const sessionAggItem = sessionStorage.getItem(`agg-${agg?.column}`);
         const sessionAgg = JSON.parse(sessionAggItem || "[]");
         return this.processAggregations(sessionAgg.length ? this.setSelected(res, sessionAgg) : res);
     }, ...(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 a tree, we transform the suggestions into tree nodes
         if (this.aggregation()?.isTree) {
             return suggestionsToTreeAggregationNodes(this.suggests(), this.searchText());
         }
-        // if the aggregation is not a tree, we return the suggestions as is
         return this.suggests()?.map((suggest) => ({
             name: this.name(),
             value: suggest.normalized || suggest.display || "",
@@ -13324,41 +13151,18 @@ class AggregationTreeComponent {
             column: suggest.category,
             count: Number(suggest.frequency),
             $selected: false,
-            items: []
+            items: [],
         }));
     }, ...(ngDevMode ? [{ debugName: "searchedItems" }] : []));
-    linkChildren = computed(() => this.appStore.general()?.features?.filterLinkChildren, ...(ngDevMode ? [{ debugName: "linkChildren" }] : []));
-    query;
-    filters = signal([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
     constructor() {
-        this.query = buildQuery();
         effect(() => {
-            // if the aggregation store changes, remove previous session storage
             getState(this.aggregationsStore);
             sessionStorage.removeItem(`agg-${this.column()}`);
         });
-        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 query = this.queryParamsStore.getQuery();
-            const suggests = (await withFetch(() => fetchSuggestField(this.normalizedSearchText(), [this.aggregation()?.column || ""], query), this.injector)) || [];
-            this.suggests.set(suggests);
-        });
         effect(() => {
             this.filters.set(this.getFilters());
         });
         this.destroyRef.onDestroy(() => {
-            // If the popover is closed with unapplied selections, reset state so it doesn't persist when reopening
             sessionStorage.removeItem(`agg-${this.aggregation()?.column}`);
             if (this.selection()) {
                 const unselect = (items) => {
@@ -13373,40 +13177,6 @@ class AggregationTreeComponent {
             }
         });
     }
-    // compare currentItems and updatedItems to add the new sub items
-    // from updatedItems into currentItems to not alter the already loaded items
-    addNewItems(currentItems, updatedItems, selectedParent) {
-        updatedItems.forEach((item) => {
-            const currentItem = currentItems.find((i) => i.value === item.value || i.value === `/${item.$path}/*`);
-            if (currentItem) {
-                if (currentItem.items?.length) {
-                    this.addNewItems(currentItem.items, item.items, item.$selected);
-                }
-                else {
-                    if (selectedParent || currentItem.$selected) {
-                        // select children
-                        const selectedItems = (items) => items.map((item) => {
-                            item.$selected = true;
-                            if (item.items)
-                                item.items = selectedItems(item.items);
-                            return item;
-                        });
-                        if (item.items)
-                            currentItem.items = selectedItems(item.items);
-                    }
-                    else {
-                        currentItem.items = item.items;
-                    }
-                }
-            }
-        });
-    }
-    /**
-     * 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) {
@@ -13426,72 +13196,25 @@ class AggregationTreeComponent {
             this.onClear.emit();
         }
     }
-    /**
-     * Select all filters for the aggregation column.
-     */
     selectAll() {
         if (this.items().length) {
-            this.selectItems(this.items(), true);
+            this.base.selectItems(this.items(), true, 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.base.selectItems(this.items(), false, true);
             this.select();
             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(overrideFilters) {
         sessionStorage.setItem(`agg-${this.aggregation()?.column}`, JSON.stringify([...this.items()]));
         const filters = overrideFilters || this.getFilters();
-        const { name, column: field } = this.aggregation();
-        // 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();
-        }
+        const agg = this.aggregation();
+        this.base.applyFilters(filters, agg, () => this.clear());
         this.searchText.set("");
         this.selection.set(false);
         this.onApply.emit();
@@ -13504,214 +13227,118 @@ class AggregationTreeComponent {
     }
     async open(node) {
         const q = this.queryParamsStore.getQuery();
-        delete q.filters; // remove filters to get all items
+        delete q.filters;
         const agg = await firstValueFrom(this.aggregationsService.open(q, this.aggregation(), node));
         node.$opened = true;
         this.aggregationsStore.updateAggregation(agg);
     }
-    /**
-     * 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() {
-        const selectedItems = this.getFlattenTreeItems().filter(item => item.$selected);
+        const selectedItems = this.getFlattenTreeItems().filter((item) => item.$selected);
         this.onSelect.emit(selectedItems);
-        // Keep apply visible if items are selected, or if active filters exist (user may be deselecting to clear)
         this.selection.set(selectedItems.length > 0 || this.hasFilters());
         this.verifySelected();
         sessionStorage.setItem(`agg-${this.aggregation()?.column}`, JSON.stringify([...this.items()]));
     }
-    /**
-     * Updates the collapsed status on header click if the component is collapsible.
-     */
-    onHeaderClick(event) {
-        const isDate = this.aggregationsService.appStore.isDateColumn(this.aggregation()?.column || "");
-        // prevent header click if no items are present
-        if (!isDate && this.isEmpty()) {
-            event.preventDefault();
+    /* item-level methods — called from the ng-template */
+    treeItemName(item) {
+        const value = item.display || item.value;
+        return typeof value === "string" ? value : `${value}`;
+    }
+    isTreeItemFiltered(item, field) {
+        const filters = this.queryParamsStore.getFilter({ field: field ?? undefined, name: this.treeItemName(item) });
+        if (!filters)
+            return false;
+        const values = [item.value, `/${item.$path}/*`];
+        return (values.some((v) => v === filters.value) ||
+            !!(filters.values?.length && filters.values.some((value) => values.some((v) => v === value))));
+    }
+    treeItemLevel(item) {
+        const level = (item.$level ?? 0) - 1 + (!item.hasChildren ? 1 : 0);
+        return item.hasChildren === false ? level + 1 : level;
+    }
+    treeChildrenPath(item, parentPath) {
+        return parentPath.concat(`/${item.$path}/*`);
+    }
+    selectTreeItem(node, parent, e, updateChildren = false) {
+        e?.stopImmediatePropagation();
+        const selected = !node.$selected && !node.$selectedVisually;
+        node.$selected = selected;
+        node.$selectedVisually = false;
+        if (updateChildren)
+            this.selectTreeItemChildren(node.items, node.$selected);
+        if (parent)
+            this.handleTreeChildSelect(parent, node);
+        this.select();
+    }
+    toggleTreeNode(e, node) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        if (node.items && node.$opened) {
+            node.$opened = false;
             return;
         }
-        if (this.collapsible()) {
-            this.isCollapsed.update((value) => !value);
+        if (node.items && !node.$opened) {
+            node.$opened = true;
+            return;
+        }
+        this.open(node);
+    }
+    onTreeItemTextClick(node, parent, event) {
+        if (this.quickFilter()) {
+            this.selectTreeItem(node, parent, event, true);
+            this.apply();
         }
-        event.preventDefault();
     }
-    /**
-     * Retrieves the appropriate filters based on the aggregation type.
-     *
-     * If the aggregation is a tree structure, it returns filters specific to trees.
-     * Otherwise, it returns filters for a list structure.
-     *
-     * @returns Filters for either a tree or list aggregation.
-     */
     getFilters() {
         if (this.aggregation()?.isTree) {
             return this.getFiltersForTree();
         }
         return this.getFiltersForList();
     }
-    /**
-     * Retrieves the filters for the tree structure.
-     *
-     * This method collects the selected items from the tree, constructs their paths,
-     * and creates a filter object based on these paths. If no items are selected,
-     * it returns an empty array.
-     *
-     * @returns {LegacyFilter[]} An array of filters for the tree structure.
-     */
     getFiltersForTree() {
         const { name, column: field } = this.aggregation() || {};
-        if (!name || !field) {
+        if (!name || !field)
             return [];
-        }
         const items = this.getFlattenTreeItems()
             .filter((item) => item.$selected)
-            .map((item) => (item.$path ? `/${item.$path}/*` : ""));
-        const notSelectedItems = this.getFlattenTreeItems()
-            .filter((item) => !item.$selected)
-            .map((item) => (item.$path ? `/${item.$path}/*` : ""));
-        // add the current filters to the current items
-        const currentFilters = this.queryParamsStore.getFilter({ field, name })?.values || [];
-        // if there are current filters, we need to add them to the current items
-        if (currentFilters) {
-            // remove filters that are not selected
-            const filteredCurrentFilters = currentFilters.filter((filter) => !notSelectedItems.includes(filter));
-            // if the current filters are not selected, we need to add them to the items
-            if (filteredCurrentFilters.length > 0) {
-                // if the current filters are not selected, we need to add them to the items
-                items.push(...filteredCurrentFilters);
-            }
-        }
-        // remove duplicates
-        const uniqueItems = Array.from(new Set(items));
-        // if no items are selected, return an empty array
-        if (uniqueItems.length === 0)
-            return [];
-        const filter = { operator: "in", name, field, values: uniqueItems, display: uniqueItems[0] };
-        return [filter];
-    }
-    /**
-     * 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.
-     */
-    getFiltersForList() {
-        const items = this.addCurrentFiltersToItems().filter((item) => item.$selected); // this.items().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;
-    }
-    /**
-     * Recursively flattens a tree structure of `TreeAggregationNode` items into a single array.
-     *
-     * @returns {TreeAggregationNode[]} An array containing all nodes from the tree structure, flattened.
-     */
-    getFlattenTreeItems() {
-        const flattenItems = (items) => {
-            return items.reduce((flat, item) => {
-                return flat.concat(item, item.items ? flattenItems(item.items) : []);
-            }, []);
-        };
-        // 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;
-    }
-    addCurrentFiltersToItems() {
-        const currentItems = 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 the current filters for the current aggregation
-            const currentFilters = this.queryParamsStore.getFilter({
-                field: this.aggregation()?.column,
-                name: this.aggregation()?.name
-            });
-            // if there are current filters, we need to add them to the current items
-            if (currentFilters) {
-                // multiples filters
-                if (currentFilters.filters) {
-                    currentFilters.filters.forEach((filter) => {
-                        // check if the filter is already present in the current items
-                        // if not, add it to the current items
-                        const found = currentItems.find((item) => item.value.toLocaleLowerCase() === filter.value?.toLocaleLowerCase());
-                        if (!found) {
-                            // add it to the current items
-                            currentItems.unshift({
-                                value: filter.value,
-                                display: filter.display,
-                                $selected: true
-                            });
-                        }
-                        else {
-                            // mark as selected the existing item
-                            found.$selected = true;
-                        }
-                    });
-                }
-                else {
-                    // single filter
-                    const found = currentItems.find((item) => item.value.toLocaleLowerCase() === currentFilters.value?.toLocaleLowerCase());
-                    if (!found) {
-                        // add it to the current items
-                        currentItems.push({
-                            value: currentFilters.value,
-                            display: currentFilters.display,
-                            $selected: true
-                        });
-                    }
-                    else {
-                        // mark as selected the existing item
-                        found.$selected = true;
-                    }
-                }
+            .map((item) => (item.$path ? `/${item.$path}/*` : ""));
+        const notSelectedItems = this.getFlattenTreeItems()
+            .filter((item) => !item.$selected)
+            .map((item) => (item.$path ? `/${item.$path}/*` : ""));
+        const currentFilters = this.queryParamsStore.getFilter({ field, name })?.values || [];
+        if (currentFilters) {
+            const filteredCurrentFilters = currentFilters.filter((filter) => !notSelectedItems.includes(filter));
+            if (filteredCurrentFilters.length > 0) {
+                items.push(...filteredCurrentFilters);
             }
         }
-        return currentItems;
+        const uniqueItems = Array.from(new Set(items));
+        if (uniqueItems.length === 0)
+            return [];
+        return [{ operator: "in", name, field, values: uniqueItems, display: uniqueItems[0] }];
     }
-    /**
-     * 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) => {
-            if (item.count > 0) {
-                // don't select disabled items
-                item.$selected = selected;
-            }
-            if (item.items?.length) {
-                this.selectItems(item.items, selected);
-            }
-        });
+    getFiltersForList() {
+        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() || {};
+        return currentItems.map((item) => this.aggregationsService.toFilter(item, column, name, isDistribution));
+    }
+    getFlattenTreeItems() {
+        const flattenItems = (items) => items.reduce((flat, item) => flat.concat(item, item.items ? flattenItems(item.items) : []), []);
+        const searchedItemsFiltered = (this.searchedItems() || []).filter((item) => "items" in item);
+        return [
+            ...flattenItems(searchedItemsFiltered),
+            ...flattenItems(this.aggregation()?.items || []),
+        ];
+    }
+    addCurrentFiltersToItems() {
+        return this.base.addCurrentFiltersToItems(this.aggregation());
     }
-    /**
-     * Check whether all items are selected and update isAllSelected accordingly
-     */
     verifySelected() {
-        const someItemsUnselected = (items) => {
-            return items.some((item) => !item.$selected || (item.items?.length && someItemsUnselected(item.items)));
-        };
+        const someItemsUnselected = (items) => items.some((item) => !item.$selected || (item.items?.length && someItemsUnselected(item.items)));
         this.isAllSelected.set(!someItemsUnselected(this.items()));
     }
-    /**
-     * set @items $selected and $selectedVisually to the values from @savedItems
-     */
     setSelected(items, savedItems) {
         return items.map((item) => {
             const savedItem = savedItems.find((i) => i.value === item.value);
@@ -13729,9 +13356,8 @@ class AggregationTreeComponent {
         if (!this.linkChildren())
             return items;
         items.forEach((item) => {
-            if (item.items?.length) {
+            if (item.items?.length)
                 this.selectVisually(item.items, item.$selected || false);
-            }
         });
         return items;
     }
@@ -13742,39 +13368,49 @@ class AggregationTreeComponent {
                 this.selectVisually(item.items, item.$selected || item.$selectedVisually);
         });
     }
-    onToggle(event) {
-        const e = event;
-        this.isCollapsed.set(e.newState === "closed");
+    selectTreeItemChildren(items, select) {
+        if (!this.linkChildren() || !items?.length)
+            return;
+        items.forEach((item) => {
+            item.$selectedVisually = select;
+            if (select)
+                item.$selected = false;
+            if (item.items?.length)
+                this.selectTreeItemChildren(item.items, select);
+        });
+    }
+    handleTreeChildSelect(parent, child) {
+        if (this.linkChildren() && !child.$selected && parent.items.some((i) => i.$selectedVisually)) {
+            parent.items.forEach((i) => {
+                if (i !== child) {
+                    i.$selectedVisually = false;
+                    i.$selected = true;
+                }
+            });
+        }
+        if (this.linkChildren() && parent.items.some((i) => !i.$selectedVisually && !i.$selected)) {
+            parent.$selected = false;
+            parent.$selectedVisually = false;
+        }
     }
     expandItems(items, expandedLevel) {
-        this.traverse(items, (lineage, node, level) => {
-            if (!node.$opened && node.items?.length >= 0 && level < expandedLevel) {
+        this.traverse(items, (_lineage, node, level) => {
+            if (!node.$opened && node.items?.length > 0 && level < expandedLevel) {
                 node.$opened = true;
             }
-            // if(node.$opened && level >= expandedLevel) {
-            //   node.$opened = false;
-            // }
             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) {
+        if (!nodes || nodes.length === 0)
             return false;
-        }
-        if (!callback) {
+        if (!callback)
             return false;
-        }
         const lineage = [];
         const stack = [];
         let _i = nodes.length;
-        while (_i--) {
+        while (_i--)
             stack.push(nodes[_i]);
-        }
         while (stack.length) {
             const node = stack.pop();
             if (!node) {
@@ -13782,54 +13418,248 @@ class AggregationTreeComponent {
             }
             else {
                 lineage.push(node);
-                if (callback(lineage, node, lineage.length - 1)) {
+                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--) {
+                    while (_i--)
                         stack.push(node.items[_i]);
-                    }
                 }
             }
         }
         return false;
     }
-    clearSearch(e) {
-        e.stopImmediatePropagation();
-        this.searchText.set("");
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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", onApply: "onApply", onClear: "onClear", 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    <triangle-alert-icon class=\"mr-1\" />\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      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <fa-icon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\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\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    <!-- apply filter block -->\r\n    @if (!isCollapsed()) {\r\n      @if (hasFilters()) {\r\n        @let label = \"filters.clearFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); clear()\">\r\n          <filter-x-icon />\r\n        </button>\r\n      }\r\n      @if (selection()) {\r\n        @let label = \"filters.apply\" | transloco;\r\n        <button\r\n          variant=\"accent\"\r\n          size=\"sm\"\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); apply()\">\r\n          <FilterIcon />\r\n          {{ label }}\r\n        </button>\r\n      }\r\n\r\n      <!-- select / unselect all -->\r\n      @if (isAllSelected()) {\r\n        @let label = \"filters.unselectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); unselectAll()\">\r\n          <square-check-icon />\r\n        </button>\r\n      } @else {\r\n        @let label = \"filters.selectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); selectAll()\">\r\n          <square-icon />\r\n        </button>\r\n      }\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <icon-button\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      </icon-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      <InputGroupAddon align=\"inline-end\" class=\"gap-0.5!\">\r\n        <icon-button\r\n          size=\"sm\"\r\n          [class]=\"\r\n            searchText().length > 0\r\n              ? 'rotate-90 cursor-pointer opacity-100 transition-[rotate,opacity] duration-500'\r\n              : 'pointer-events-none rotate-0 opacity-0 transition-[rotate,opacity] duration-500'\r\n          \"\r\n          aria-label=\"Clear search\"\r\n          [tabindex]=\"searchText().length > 0 ? 0 : -1\"\r\n          (keydown.enter)=\"clearSearch($event)\"\r\n          (click)=\"clearSearch($event)\">\r\n          <XMarkIcon />\r\n        </icon-button>\r\n        <ng-content />\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      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", "scheme", "iconOnly", "size", "solid"] }, { 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", "scheme", "size"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", 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: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: TriangleAlertIcon, selector: "triangle-alert-icon, TriangleAlertIcon", inputs: ["class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "component", type: SquareCheckIcon, selector: "square-check-icon, SquareCheckIcon", inputs: ["class"] }, { kind: "component", type: SquareIcon, selector: "square-icon, SquareIcon", inputs: ["class"] }, { kind: "component", type: XMarkIcon, selector: "XMarkIcon, xmark-icon, x-mark-icon", inputs: ["class"] }, { kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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 }, 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 }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear", 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 }], ngImport: i0, template: "@if (!aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <triangle-alert-icon class=\"mr-1\" />\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<aggregation-panel\r\n  [id]=\"id()\"\r\n  [collapsible]=\"collapsible()\"\r\n  [collapsed]=\"collapsed()\"\r\n  [isEmpty]=\"isEmpty()\"\r\n  [isDate]=\"isDate()\"\r\n  [aggregation]=\"aggregation()\"\r\n  [showFiltersCount]=\"showFiltersCount()\"\r\n  [filtersCount]=\"filtersCount()\"\r\n  [hasFilters]=\"hasFilters()\"\r\n  [selection]=\"selection()\"\r\n  [isAllSelected]=\"isAllSelected()\"\r\n  [(searchText)]=\"searchText\"\r\n  [itemsLength]=\"items().length\"\r\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\r\n  [searchedItemsLength]=\"searchedItems().length\"\r\n  (cleared)=\"clear()\"\r\n  (applied)=\"apply()\"\r\n  (allSelected)=\"selectAll()\"\r\n  (allUnselected)=\"unselectAll()\"\r\n  (loadedMore)=\"loadMore()\">\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-(--scroll-height,20rem) w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"tree\"\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        @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            <ng-container\r\n              [ngTemplateOutlet]=\"treeItemTpl\"\r\n              [ngTemplateOutletContext]=\"{\r\n                node: item,\r\n                path: [],\r\n                field: aggregation()?.column,\r\n                tpl: treeItemTpl,\r\n                parent: null\r\n              }\">\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</aggregation-panel>\r\n\r\n<ng-template\r\n  #treeItemTpl\r\n  let-node=\"node\"\r\n  let-path=\"path\"\r\n  let-field=\"field\"\r\n  let-tpl=\"tpl\"\r\n  let-parent=\"parent\">\r\n  <div\r\n    role=\"treeitem\"\r\n    [style.--level]=\"treeItemLevel(node)\"\r\n    [attr.aria-selected]=\"node.$selected ?? false\"\r\n    [attr.aria-expanded]=\"\r\n      node.hasChildren !== false ? (node.$opened ?? false) : null\r\n    \"\r\n    [attr.aria-disabled]=\"node.count === 0 ? 'true' : null\"\r\n    [attr.disabled]=\"node.count === 0 ? 'disabled' : null\">\r\n    <a\r\n      [attr.aria-label]=\"treeItemName(node) | 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',\r\n          (node.$selected || node.$selectedVisually) && ''\r\n        )\r\n      \"\r\n      (click)=\"selectTreeItem(node, parent, $event, true)\">\r\n      <button\r\n        variant=\"none\"\r\n        [iconOnly]=\"true\"\r\n        (click)=\"toggleTreeNode($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      <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)=\"selectTreeItem(node, parent, $event)\"\r\n        [checked]=\"node.$selected || node.$selectedVisually\" />\r\n      @let icon = node.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\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            ? ((isTreeItemFiltered(node, field)\r\n                ? 'filters.removeFilter'\r\n                : 'filters.addFilter'\r\n              ) | transloco) +\r\n              ': ' +\r\n              (treeItemName(node) | syslang)\r\n            : (treeItemName(node) | syslang)\r\n        \"\r\n        (click)=\"onTreeItemTextClick(node, parent, $event)\">\r\n        @for (\r\n          chunk of (treeItemName(node) | syslang) ?? \"\"\r\n            | 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    @if (node.hasChildren && node.$opened) {\r\n      <div role=\"group\">\r\n        @for (child of node.items; track $index) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"tpl\"\r\n            [ngTemplateOutletContext]=\"{\r\n              node: child,\r\n              path: treeChildrenPath(node, path),\r\n              field: field,\r\n              tpl: tpl,\r\n              parent: node\r\n            }\">\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["div[role=treeitem]:has(+div[role=treeitem]){margin-bottom:var(--agg-item-gap, 0)}div[role=treeitem]{display:block;-webkit-user-select:none;user-select:none}div[role=treeitem] a{padding-left:calc(var(--agg-tree-indent, .5rem) * var(--level, 0));line-height:var(--agg-item-height, inherit)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: TriangleAlertIcon, selector: "triangle-alert-icon, TriangleAlertIcon", inputs: ["class"] }, { kind: "component", type: AggregationPanelComponent, selector: "AggregationPanel, aggregation-panel", inputs: ["id", "collapsible", "collapsed", "isDate", "isEmpty", "aggregation", "showFiltersCount", "filtersCount", "hasFilters", "selection", "isAllSelected", "searchText", "itemsLength", "hasMore", "searchedItemsLength"], outputs: ["searchTextChange", "cleared", "applied", "allSelected", "allUnselected", "loadedMore"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: HighlightWordPipe, name: "highlightWord" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: "AggregationTree, aggregation-tree, aggregationtree", imports: [
+                        NgTemplateOutlet,
                         FormsModule,
                         ReactiveFormsModule,
                         ButtonComponent,
-                        AggregationTreeItemComponent,
+                        ChevronRightIcon,
                         SyslangPipe,
                         TranslocoPipe,
-                        BadgeComponent,
-                        ChevronRightIcon,
-                        InputGroupInput,
-                        InputGroupComponent,
-                        InputGroupAddonComponent,
-                        SearchIcon,
-                        FilterIcon,
                         FaIconComponent,
                         TriangleAlertIcon,
-                        FilterXIcon,
-                        SquareCheckIcon,
-                        SquareIcon,
-                        XMarkIcon,
-                        IconButtonComponent
+                        HighlightWordPipe,
+                        AggregationPanelComponent,
+                    ], 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    <triangle-alert-icon class=\"mr-1\" />\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<aggregation-panel\r\n  [id]=\"id()\"\r\n  [collapsible]=\"collapsible()\"\r\n  [collapsed]=\"collapsed()\"\r\n  [isEmpty]=\"isEmpty()\"\r\n  [isDate]=\"isDate()\"\r\n  [aggregation]=\"aggregation()\"\r\n  [showFiltersCount]=\"showFiltersCount()\"\r\n  [filtersCount]=\"filtersCount()\"\r\n  [hasFilters]=\"hasFilters()\"\r\n  [selection]=\"selection()\"\r\n  [isAllSelected]=\"isAllSelected()\"\r\n  [(searchText)]=\"searchText\"\r\n  [itemsLength]=\"items().length\"\r\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\r\n  [searchedItemsLength]=\"searchedItems().length\"\r\n  (cleared)=\"clear()\"\r\n  (applied)=\"apply()\"\r\n  (allSelected)=\"selectAll()\"\r\n  (allUnselected)=\"unselectAll()\"\r\n  (loadedMore)=\"loadMore()\">\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-(--scroll-height,20rem) w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"tree\"\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        @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            <ng-container\r\n              [ngTemplateOutlet]=\"treeItemTpl\"\r\n              [ngTemplateOutletContext]=\"{\r\n                node: item,\r\n                path: [],\r\n                field: aggregation()?.column,\r\n                tpl: treeItemTpl,\r\n                parent: null\r\n              }\">\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</aggregation-panel>\r\n\r\n<ng-template\r\n  #treeItemTpl\r\n  let-node=\"node\"\r\n  let-path=\"path\"\r\n  let-field=\"field\"\r\n  let-tpl=\"tpl\"\r\n  let-parent=\"parent\">\r\n  <div\r\n    role=\"treeitem\"\r\n    [style.--level]=\"treeItemLevel(node)\"\r\n    [attr.aria-selected]=\"node.$selected ?? false\"\r\n    [attr.aria-expanded]=\"\r\n      node.hasChildren !== false ? (node.$opened ?? false) : null\r\n    \"\r\n    [attr.aria-disabled]=\"node.count === 0 ? 'true' : null\"\r\n    [attr.disabled]=\"node.count === 0 ? 'disabled' : null\">\r\n    <a\r\n      [attr.aria-label]=\"treeItemName(node) | 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',\r\n          (node.$selected || node.$selectedVisually) && ''\r\n        )\r\n      \"\r\n      (click)=\"selectTreeItem(node, parent, $event, true)\">\r\n      <button\r\n        variant=\"none\"\r\n        [iconOnly]=\"true\"\r\n        (click)=\"toggleTreeNode($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      <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)=\"selectTreeItem(node, parent, $event)\"\r\n        [checked]=\"node.$selected || node.$selectedVisually\" />\r\n      @let icon = node.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\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            ? ((isTreeItemFiltered(node, field)\r\n                ? 'filters.removeFilter'\r\n                : 'filters.addFilter'\r\n              ) | transloco) +\r\n              ': ' +\r\n              (treeItemName(node) | syslang)\r\n            : (treeItemName(node) | syslang)\r\n        \"\r\n        (click)=\"onTreeItemTextClick(node, parent, $event)\">\r\n        @for (\r\n          chunk of (treeItemName(node) | syslang) ?? \"\"\r\n            | 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    @if (node.hasChildren && node.$opened) {\r\n      <div role=\"group\">\r\n        @for (child of node.items; track $index) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"tpl\"\r\n            [ngTemplateOutletContext]=\"{\r\n              node: child,\r\n              path: treeChildrenPath(node, path),\r\n              field: field,\r\n              tpl: tpl,\r\n              parent: node\r\n            }\">\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["div[role=treeitem]:has(+div[role=treeitem]){margin-bottom:var(--agg-item-gap, 0)}div[role=treeitem]{display:block;-webkit-user-select:none;user-select:none}div[role=treeitem] a{padding-left:calc(var(--agg-tree-indent, .5rem) * var(--level, 0));line-height:var(--agg-item-height, inherit)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { 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 }] }], 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 }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], virtualItems: [{ type: i0.ViewChildren, args: ["virtualItem", { isSignal: true }] }], scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
+
+class AggregationListComponent {
+    cn = cn;
+    /* inputs */
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    collapsible = input(false, ...(ngDevMode ? [{ debugName: "collapsible" }] : []));
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    showFiltersCount = input(null, ...(ngDevMode ? [{ debugName: "showFiltersCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /* outputs */
+    onSelect = output();
+    onApply = output();
+    onClear = output();
+    /* view queries */
+    scrollElement = viewChild("scrollElement", ...(ngDevMode ? [{ debugName: "scrollElement" }] : []));
+    /* selection state */
+    selection = signal(false, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    isAllSelected = signal(false, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
+    /* search state */
+    searchText = model("", ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+    /* composable — injects stores/services, wires search effects, provides shared methods */
+    base = injectAggregationBase({
+        name: this.name,
+        column: this.column,
+        searchText: this.searchText,
+    });
+    /* spread from base */
+    aggregationsStore = this.base.aggregationsStore;
+    queryParamsStore = this.base.queryParamsStore;
+    appStore = this.base.appStore;
+    aggregationsService = this.base.aggregationsService;
+    injector = this.base.injector;
+    destroyRef = this.base.destroyRef;
+    suggests = this.base.suggests;
+    hasFilters = this.base.hasFilters;
+    filtersCount = this.base.filtersCount;
+    query = this.base.query;
+    filters = this.base.filters;
+    /* features from appStore */
+    showCount = computed(() => this.appStore.general()?.features?.showAggregationItemCount ?? false, ...(ngDevMode ? [{ debugName: "showCount" }] : []));
+    quickFilter = computed(() => this.appStore.general()?.features?.quickFilter, ...(ngDevMode ? [{ debugName: "quickFilter" }] : []));
+    isDate = computed(() => this.appStore.isDateColumn(this.aggregation()?.column || ""), ...(ngDevMode ? [{ debugName: "isDate" }] : []));
+    /* virtualizer */
+    cdr = inject(ChangeDetectorRef);
+    virtualizer = injectVirtualizer(() => ({
+        count: this.items().length,
+        estimateSize: () => 32,
+        scrollElement: this.scrollElement(),
+    }));
+    aggregation = computed(() => {
+        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.");
+                }
+                agg.searchable = this.searchable() ?? agg.searchable;
+                return agg;
+            }
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "aggregation" }] : []));
+    items = computed(() => {
+        getState(this.aggregationsStore);
+        const agg = this.aggregation();
+        const searchedItems = this.searchedItems();
+        if (searchedItems.length > 0)
+            return searchedItems;
+        if (!agg?.items)
+            return [];
+        // Reset $selected so items removed from the filter are deselected.
+        // Then return a new array reference so Angular's signal equality check
+        // detects the change and re-renders all component instances.
+        agg.items.forEach(item => { item.$selected = false; });
+        return [...this.addCurrentFiltersToItems()];
+    }, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    isEmpty = computed(() => this.items().length === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
+    searchedItems = computed(() => {
+        if (!this.suggests())
+            return [];
+        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 (column?.eType === EngineType.bool) {
+                item.value = Boolean(item.value);
+            }
+            return item;
+        });
+    }, ...(ngDevMode ? [{ debugName: "searchedItems" }] : []));
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            if (this.selection()) {
+                this.aggregation()?.items?.forEach((item) => {
+                    item.$selected = undefined;
+                });
+            }
+        });
+    }
+    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([]);
+        this.onClear.emit();
+    }
+    selectAll() {
+        if (this.items().length) {
+            this.base.selectItems(this.items(), true);
+            this.selection.set(true);
+            this.isAllSelected.set(true);
+        }
+    }
+    unselectAll() {
+        if (this.items().length) {
+            this.base.selectItems(this.items(), false);
+            this.select();
+            this.isAllSelected.set(false);
+        }
+    }
+    apply() {
+        const agg = this.aggregation();
+        if (!agg)
+            return;
+        this.base.applyFilters(this.getFilters(), agg, () => this.clear());
+        this.searchText.set("");
+        this.selection.set(false);
+        this.onApply.emit();
+    }
+    loadMore() {
+        const q = this.queryParamsStore.getQuery();
+        this.aggregationsService.loadMore(q, this.aggregation()).subscribe((aggregation) => {
+            this.aggregationsStore.updateAggregation(aggregation);
+            this.cdr.detectChanges();
+        });
+    }
+    select() {
+        const selectedItems = this.items().filter((item) => item.$selected);
+        this.onSelect.emit(selectedItems);
+        this.selection.set(selectedItems.length > 0 || this.hasFilters());
+    }
+    /* item-level methods — called from the ng-template */
+    listItemName(item) {
+        const value = item.display || item.value;
+        return typeof value === "string" ? value : `${value}`;
+    }
+    isListItemFiltered(item, field) {
+        const filters = this.queryParamsStore.getFilter({ field: field ?? undefined, name: this.listItemName(item) });
+        if (!filters)
+            return false;
+        const values = [item.value];
+        return (values.some((v) => v === filters.value) ||
+            !!(filters.values?.length && filters.values.some((value) => values.some((v) => v === value))));
+    }
+    selectListItem(item, e) {
+        e?.stopImmediatePropagation();
+        item.$selected = !item.$selected;
+        this.select();
+    }
+    onListItemTextClick(item, event) {
+        if (this.quickFilter()) {
+            this.selectListItem(item, event);
+            this.apply();
+        }
+    }
+    getFilters() {
+        const items = this.items().filter((item) => item.$selected);
+        const searchedItems = this.searchedItems().filter((item) => item.$selected);
+        const currentItems = [...items, ...searchedItems];
+        const { column, name, isDistribution = false } = this.aggregation() || {};
+        return currentItems.map((item) => this.aggregationsService.toFilter(item, column, name, isDistribution));
+    }
+    addCurrentFiltersToItems() {
+        return this.base.addCurrentFiltersToItems(this.aggregation());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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", onApply: "onApply", onClear: "onClear", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\", class())" } }, viewQueries: [{ propertyName: "scrollElement", first: true, predicate: ["scrollElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <triangle-alert-icon class=\"mr-1\" />\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<aggregation-panel\r\n  [id]=\"id()\"\r\n  [collapsible]=\"collapsible()\"\r\n  [collapsed]=\"collapsed()\"\r\n  [isEmpty]=\"isEmpty()\"\r\n  [isDate]=\"isDate()\"\r\n  [aggregation]=\"aggregation()\"\r\n  [showFiltersCount]=\"showFiltersCount()\"\r\n  [filtersCount]=\"filtersCount()\"\r\n  [hasFilters]=\"hasFilters()\"\r\n  [selection]=\"selection()\"\r\n  [isAllSelected]=\"isAllSelected()\"\r\n  [(searchText)]=\"searchText\"\r\n  [itemsLength]=\"items().length\"\r\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\r\n  [searchedItemsLength]=\"searchedItems().length\"\r\n  (cleared)=\"clear()\"\r\n  (applied)=\"apply()\"\r\n  (allSelected)=\"selectAll()\"\r\n  (allUnselected)=\"unselectAll()\"\r\n  (loadedMore)=\"loadMore()\">\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-(--scroll-height,20rem) w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"listbox\"\r\n      aria-multiselectable=\"true\"\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=\"option\"\r\n          [attr.aria-selected]=\"item.$selected ?? false\"\r\n          [attr.aria-disabled]=\"item.count === 0 ? 'true' : null\"\r\n          [attr.disabled]=\"item.count === 0 ? 'disabled' : null\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTpl\"\r\n            [ngTemplateOutletContext]=\"{\r\n              $implicit: item,\r\n              field: aggregation()?.column\r\n            }\">\r\n          </ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</aggregation-panel>\r\n\r\n<ng-template #listItemTpl let-item let-field=\"field\">\r\n  <a\r\n    [attr.aria-label]=\"listItemName(item) | syslang\"\r\n    [class]=\"\r\n      cn(\r\n        'flex grow items-center gap-2 p-1 leading-7',\r\n        item.count === 0 && 'disabled pointer-events-none'\r\n      )\r\n    \"\r\n    (click)=\"selectListItem(item, $event)\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"checkbox\"\r\n      value=\"{{ item.value }}\"\r\n      [attr.disabled]=\"item.count === 0 ? true : null\"\r\n      [attr.aria-disabled]=\"item.count === 0\"\r\n      (keydown.enter)=\"selectListItem(item, $event)\"\r\n      [checked]=\"item.$selected\" />\r\n    @let icon = item.icon;\r\n    @if (icon) {\r\n      <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\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          ? ((isListItemFiltered(item, field)\r\n              ? 'filters.removeFilter'\r\n              : 'filters.addFilter'\r\n            ) | transloco) +\r\n            ': ' +\r\n            (listItemName(item) | syslang)\r\n          : (listItemName(item) | syslang)\r\n      \"\r\n      (click)=\"onListItemTextClick(item, $event)\">\r\n      @for (\r\n        chunk of (listItemName(item) | syslang) ?? \"\"\r\n          | 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() && item.count > 0) {\r\n      <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\r\n        item.count\r\n      }}</span>\r\n    }\r\n  </a>\r\n</ng-template>\r\n", styles: ["div[role=option]{display:block;-webkit-user-select:none;user-select:none}div[role=option] a{padding-left:var(--agg-tree-indent, .5rem);line-height:var(--agg-item-height, inherit)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: TriangleAlertIcon, selector: "triangle-alert-icon, TriangleAlertIcon", inputs: ["class"] }, { kind: "component", type: AggregationPanelComponent, selector: "AggregationPanel, aggregation-panel", inputs: ["id", "collapsible", "collapsed", "isDate", "isEmpty", "aggregation", "showFiltersCount", "filtersCount", "hasFilters", "selection", "isAllSelected", "searchText", "itemsLength", "hasMore", "searchedItemsLength"], outputs: ["searchTextChange", "cleared", "applied", "allSelected", "allUnselected", "loadedMore"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: HighlightWordPipe, name: "highlightWord" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "AggregationList, aggregation-list, aggregationlist", imports: [
+                        NgTemplateOutlet,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SyslangPipe,
+                        TranslocoPipe,
+                        FaIconComponent,
+                        TriangleAlertIcon,
+                        HighlightWordPipe,
+                        AggregationPanelComponent,
                     ], 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    <triangle-alert-icon class=\"mr-1\" />\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      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <fa-icon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\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\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    <!-- apply filter block -->\r\n    @if (!isCollapsed()) {\r\n      @if (hasFilters()) {\r\n        @let label = \"filters.clearFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); clear()\">\r\n          <filter-x-icon />\r\n        </button>\r\n      }\r\n      @if (selection()) {\r\n        @let label = \"filters.apply\" | transloco;\r\n        <button\r\n          variant=\"accent\"\r\n          size=\"sm\"\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); apply()\">\r\n          <FilterIcon />\r\n          {{ label }}\r\n        </button>\r\n      }\r\n\r\n      <!-- select / unselect all -->\r\n      @if (isAllSelected()) {\r\n        @let label = \"filters.unselectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); unselectAll()\">\r\n          <square-check-icon />\r\n        </button>\r\n      } @else {\r\n        @let label = \"filters.selectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); selectAll()\">\r\n          <square-icon />\r\n        </button>\r\n      }\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <icon-button\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      </icon-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      <InputGroupAddon align=\"inline-end\" class=\"gap-0.5!\">\r\n        <icon-button\r\n          size=\"sm\"\r\n          [class]=\"\r\n            searchText().length > 0\r\n              ? 'rotate-90 cursor-pointer opacity-100 transition-[rotate,opacity] duration-500'\r\n              : 'pointer-events-none rotate-0 opacity-0 transition-[rotate,opacity] duration-500'\r\n          \"\r\n          aria-label=\"Clear search\"\r\n          [tabindex]=\"searchText().length > 0 ? 0 : -1\"\r\n          (keydown.enter)=\"clearSearch($event)\"\r\n          (click)=\"clearSearch($event)\">\r\n          <XMarkIcon />\r\n        </icon-button>\r\n        <ng-content />\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      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"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], 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]": '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    <triangle-alert-icon class=\"mr-1\" />\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<aggregation-panel\r\n  [id]=\"id()\"\r\n  [collapsible]=\"collapsible()\"\r\n  [collapsed]=\"collapsed()\"\r\n  [isEmpty]=\"isEmpty()\"\r\n  [isDate]=\"isDate()\"\r\n  [aggregation]=\"aggregation()\"\r\n  [showFiltersCount]=\"showFiltersCount()\"\r\n  [filtersCount]=\"filtersCount()\"\r\n  [hasFilters]=\"hasFilters()\"\r\n  [selection]=\"selection()\"\r\n  [isAllSelected]=\"isAllSelected()\"\r\n  [(searchText)]=\"searchText\"\r\n  [itemsLength]=\"items().length\"\r\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\r\n  [searchedItemsLength]=\"searchedItems().length\"\r\n  (cleared)=\"clear()\"\r\n  (applied)=\"apply()\"\r\n  (allSelected)=\"selectAll()\"\r\n  (allUnselected)=\"unselectAll()\"\r\n  (loadedMore)=\"loadMore()\">\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-(--scroll-height,20rem) w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"listbox\"\r\n      aria-multiselectable=\"true\"\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=\"option\"\r\n          [attr.aria-selected]=\"item.$selected ?? false\"\r\n          [attr.aria-disabled]=\"item.count === 0 ? 'true' : null\"\r\n          [attr.disabled]=\"item.count === 0 ? 'disabled' : null\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTpl\"\r\n            [ngTemplateOutletContext]=\"{\r\n              $implicit: item,\r\n              field: aggregation()?.column\r\n            }\">\r\n          </ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</aggregation-panel>\r\n\r\n<ng-template #listItemTpl let-item let-field=\"field\">\r\n  <a\r\n    [attr.aria-label]=\"listItemName(item) | syslang\"\r\n    [class]=\"\r\n      cn(\r\n        'flex grow items-center gap-2 p-1 leading-7',\r\n        item.count === 0 && 'disabled pointer-events-none'\r\n      )\r\n    \"\r\n    (click)=\"selectListItem(item, $event)\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"checkbox\"\r\n      value=\"{{ item.value }}\"\r\n      [attr.disabled]=\"item.count === 0 ? true : null\"\r\n      [attr.aria-disabled]=\"item.count === 0\"\r\n      (keydown.enter)=\"selectListItem(item, $event)\"\r\n      [checked]=\"item.$selected\" />\r\n    @let icon = item.icon;\r\n    @if (icon) {\r\n      <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\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          ? ((isListItemFiltered(item, field)\r\n              ? 'filters.removeFilter'\r\n              : 'filters.addFilter'\r\n            ) | transloco) +\r\n            ': ' +\r\n            (listItemName(item) | syslang)\r\n          : (listItemName(item) | syslang)\r\n      \"\r\n      (click)=\"onListItemTextClick(item, $event)\">\r\n      @for (\r\n        chunk of (listItemName(item) | syslang) ?? \"\"\r\n          | 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() && item.count > 0) {\r\n      <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\r\n        item.count\r\n      }}</span>\r\n    }\r\n  </a>\r\n</ng-template>\r\n", styles: ["div[role=option]{display:block;-webkit-user-select:none;user-select:none}div[role=option] a{padding-left:var(--agg-tree-indent, .5rem);line-height:var(--agg-item-height, inherit)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { 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 }] }], 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 }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], 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.
@@ -13986,7 +13816,7 @@ class AggregationComponent {
       (onClear)="onClear.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", "onApply", "onClear", "searchTextChange"] }, { kind: "component", type: AggregationTreeComponent, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: ["class", "id", "name", "column", "expandedLevel", "collapsible", "collapsed", "searchable", "showFiltersCount", "searchText"], outputs: ["onSelect", "onApply", "onClear", "searchTextChange"] }, { kind: "component", type: AggregationDateComponent, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: ["title", "displayEmptyDistributionIntervals", "name"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: AggregationListComponent, selector: "AggregationList, aggregation-list, aggregationlist", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "searchText"], outputs: ["onSelect", "onApply", "onClear", "searchTextChange"] }, { kind: "component", type: AggregationTreeComponent, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "expandedLevel", "searchText"], outputs: ["onSelect", "onApply", "onClear", "searchTextChange"] }, { kind: "component", type: AggregationDateComponent, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: ["name", "column", "id", "collapsible", "collapsed", "searchable", "showFiltersCount", "title", "displayEmptyDistributionIntervals", "searchText"], outputs: ["onSelect", "onApply", "onClear", "searchTextChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationComponent, decorators: [{
             type: Component,
@@ -14302,6 +14132,7 @@ class MoreComponent {
     includedFilters = input([], ...(ngDevMode ? [{ debugName: "includedFilters" }] : []));
     excludedFilters = input([], ...(ngDevMode ? [{ debugName: "excludedFilters" }] : []));
     aggregations = input(...(ngDevMode ? [undefined, { debugName: "aggregations" }] : []));
+    homepage = input(false, ...(ngDevMode ? [{ debugName: "homepage", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     appStore = inject(AppStore);
     aggregationsStore = inject(AggregationsStore);
     queryParamsStore = inject(QueryParamsStore);
@@ -14329,7 +14160,7 @@ class MoreComponent {
         effect(() => {
             const count = this.count();
             const authorizedFilters = this.aggregationsService
-                .getAuthorizedFilters(this.aggregations(), this.includedFilters(), this.excludedFilters())
+                .getAuthorizedFilters(this.aggregations(), this.includedFilters(), this.excludedFilters(), this.homepage())
                 .toSpliced(0, count);
             const f = authorizedFilters.map((agg) => {
                 const { icon = "far fa-list", hidden = false } = this.appStore.getAggregationCustomization(agg.column, agg.name) || {};
@@ -14380,7 +14211,7 @@ class MoreComponent {
         return count > 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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 }, homepage: { classPropertyName: "homepage", publicName: "homepage", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "divide-y divide-muted-foreground/18" }, ngImport: i0, template: `
     @for (filter of visibleFilters(); track $index) {
       <Aggregation
         class="w-60 max-w-80 px-1 [--height:15lh]"
@@ -14411,7 +14242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
   `, host: {
                         class: "divide-y divide-muted-foreground/18"
                     }, styles: [":host{scrollbar-width:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], includedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "includedFilters", required: false }] }], excludedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedFilters", required: false }] }], aggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregations", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], includedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "includedFilters", required: false }] }], excludedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedFilters", required: false }] }], aggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregations", required: false }] }], homepage: [{ type: i0.Input, args: [{ isSignal: true, alias: "homepage", required: false }] }] } });
 
 class MoreButtonComponent {
     appStore = inject(AppStore);
@@ -14423,10 +14254,11 @@ class MoreButtonComponent {
     includedFilters = input([], ...(ngDevMode ? [{ debugName: "includedFilters" }] : []));
     excludedFilters = input([], ...(ngDevMode ? [{ debugName: "excludedFilters" }] : []));
     aggregations = input(...(ngDevMode ? [undefined, { debugName: "aggregations" }] : []));
+    homepage = input(false, ...(ngDevMode ? [{ debugName: "homepage", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     totalFiltersCount = computed(() => {
         const count = this.count();
         const authorizedFilters = this.aggregationsService
-            .getAuthorizedFilters(this.aggregations(), this.includedFilters(), this.excludedFilters())
+            .getAuthorizedFilters(this.aggregations(), this.includedFilters(), this.excludedFilters(), this.homepage())
             .toSpliced(0, count);
         const total = authorizedFilters.reduce((acc, filter) => {
             const f = this.queryParamsStore.getFilter(filter);
@@ -14436,7 +14268,7 @@ class MoreButtonComponent {
         return total;
     }, ...(ngDevMode ? [{ debugName: "totalFiltersCount" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MoreButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MoreButtonComponent, isStandalone: true, selector: "more-button, MoreButton", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", 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 } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: MoreButtonComponent, isStandalone: true, selector: "more-button, MoreButton", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", 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 }, homepage: { classPropertyName: "homepage", publicName: "homepage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <Popover class="group/more">
       <button
         variant="ghost"
@@ -14454,11 +14286,11 @@ class MoreButtonComponent {
 
       <PopoverContent #contentRef="popoverContent" [position]="position()" class="min-w-max">
         @if(contentRef.isVisible) {
-        <More [count]="count()" [includedFilters]="includedFilters()" [excludedFilters]="excludedFilters()" [aggregations]="aggregations()" class="block h-full w-full max-w-80 [--height:55vh] min-w-40 overflow-hidden" />
+        <More [count]="count()" [includedFilters]="includedFilters()" [excludedFilters]="excludedFilters()" [aggregations]="aggregations()" [homepage]="homepage()" class="block h-full w-full max-w-80 [--height:55vh] min-w-40 overflow-hidden" />
         }
       </PopoverContent>
     </Popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { 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: MoreComponent, selector: "more, More", inputs: ["count", "includedFilters", "excludedFilters", "aggregations"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size"] }, { kind: "component", type: ListFilterIcon, selector: "list-filter-icon, ListFilterIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { 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: MoreComponent, selector: "more, More", inputs: ["count", "includedFilters", "excludedFilters", "aggregations", "homepage"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size"] }, { kind: "component", type: ListFilterIcon, selector: "list-filter-icon, ListFilterIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MoreButtonComponent, decorators: [{
             type: Component,
@@ -14484,13 +14316,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
       <PopoverContent #contentRef="popoverContent" [position]="position()" class="min-w-max">
         @if(contentRef.isVisible) {
-        <More [count]="count()" [includedFilters]="includedFilters()" [excludedFilters]="excludedFilters()" [aggregations]="aggregations()" class="block h-full w-full max-w-80 [--height:55vh] min-w-40 overflow-hidden" />
+        <More [count]="count()" [includedFilters]="includedFilters()" [excludedFilters]="excludedFilters()" [aggregations]="aggregations()" [homepage]="homepage()" class="block h-full w-full max-w-80 [--height:55vh] min-w-40 overflow-hidden" />
         }
       </PopoverContent>
     </Popover>
   `
                 }]
-        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], includedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "includedFilters", required: false }] }], excludedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedFilters", required: false }] }], aggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregations", required: false }] }] } });
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], includedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "includedFilters", required: false }] }], excludedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedFilters", required: false }] }], aggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregations", required: false }] }], homepage: [{ type: i0.Input, args: [{ isSignal: true, alias: "homepage", required: false }] }] } });
 
 class FiltersBarComponent {
     class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
@@ -14528,6 +14360,15 @@ class FiltersBarComponent {
      * @default true
      */
     showMoreFiltersButton = input(true, ...(ngDevMode ? [{ debugName: "showMoreFiltersButton", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * When enabled, only the filters flagged with `homepage: true` in the "filters" custom JSON
+     * are displayed. If no filter is flagged, the bar shows no filters.
+     *
+     * Accepts a boolean value or a string that can be transformed to a boolean.
+     *
+     * @default false
+     */
+    homepage = input(false, ...(ngDevMode ? [{ debugName: "homepage", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     direction = input("horizontal", ...(ngDevMode ? [{ debugName: "direction" }] : []));
     /**
      * The distance in pixels between the popover and its trigger element.
@@ -14577,50 +14418,76 @@ class FiltersBarComponent {
             return this.aggregationsStore.aggregations().length > 0;
         return false;
     }, ...(ngDevMode ? [{ debugName: "hasAggregations" }] : []));
+    /**
+     * The full list of authorized filters, NOT capped by `filtersCount`.
+     *
+     * This computed signal performs the following operations:
+     * 1. Retrieves aggregations from either the component's aggregations input or the app store
+     * 2. Filters aggregations based on the route's filter criteria configuration
+     * 3. Excludes filters specified in the `excludeFilters` list
+     * 4. If `includeFilters` is not empty, only includes filters present in that list
+     * 5. Maps the filtered aggregations to objects containing only `name` and `column` properties
+     */
+    allAuthorizedFilters = computed(() => {
+        return this.aggregationsService
+            .getAuthorizedFilters(this.aggregations(), this.includeFilters(), this.excludeFilters(), this.homepage())
+            .map((f) => ({ name: f.name, column: f.column }));
+    }, ...(ngDevMode ? [{ debugName: "allAuthorizedFilters" }] : []));
     /**
      * Computes the list of additional filters that can be displayed in the "more filters" popover.
      *
-     * This computed property filters the authorized filters from the AppStore, excluding those
-     * specified in the `excludeFilters` input. It then maps these filters to their corresponding
-     * aggregations from the AggregationsStore, limited to the number defined by `moreFilterCount`.
+     * Derived from the FULL authorized list (not the one capped by `filtersCount`), so the
+     * filters beyond `filtersCount` — which are never rendered in the bar — are still counted.
+     * Otherwise, when every rendered filter fits in the container, this list would be empty and
+     * the "more" button would be hidden even though more filters exist beyond the cap.
      *
-     * This property manages the visibility and content of the "more filters" popover in the UI.
+     * This property manages the visibility of the "more filters" button in the UI.
      *
      * @returns An array of Aggregation objects representing the additional filters available.
      */
     hasMoreFilters = computed(() => {
-        const moreFiltersAggregations = this.authorizedFilters()
-            .filter((f) => !this.excludeFilters().includes(f.name)) // filter out the excluded filters
-            .filter((f) => !this.includeFilters().length || this.includeFilters().includes(f.name)) // exclude filters not included in includeFilters if not empty
-            .map((f) => ({ column: f.column, name: f.name }))
+        const moreFiltersAggregations = this.allAuthorizedFilters()
             .toSpliced(0, this.visibleFiltersCount())
             .map((f) => this.aggregationsStore.getAggregation(f.column, "column"));
         return moreFiltersAggregations;
     }, ...(ngDevMode ? [{ debugName: "hasMoreFilters" }] : []));
     /**
-     * Computed property that returns a filtered and processed list of authorized filters.
-     *
-     * This computed signal performs the following operations:
-     * 1. Retrieves aggregations from either the component's aggregations input or the app store
-     * 2. Filters aggregations based on the route's filter criteria configuration
-     * 3. Excludes filters specified in the `excludeFilters` list
-     * 4. If `includeFilters` is not empty, only includes filters present in that list
-     * 5. Maps the filtered aggregations to objects containing only `name` and `column` properties
-     * 6. Limits the result to the number specified by `filtersCount`
+     * The authorized filters rendered as buttons in the bar, limited to the number
+     * specified by `filtersCount`.
      *
      * @returns An array of authorized filter objects, each containing `name` and `column` properties
      */
     authorizedFilters = computed(() => {
-        const authorizedFilters = this.aggregationsService
-            .getAuthorizedFilters(this.aggregations(), this.includeFilters(), this.excludeFilters())
-            .map((f) => ({ name: f.name, column: f.column }))
-            .toSpliced(this.filtersCount());
-        return authorizedFilters;
+        return this.allAuthorizedFilters().toSpliced(this.filtersCount());
     }, ...(ngDevMode ? [{ debugName: "authorizedFilters" }] : []));
+    /**
+     * Whether some authorized filters exist beyond the `filtersCount` cap.
+     *
+     * Those filters are never rendered in the bar and are only reachable through
+     * the "more" button, which is therefore permanently visible: the overflow
+     * manager must always reserve its space so the last filter button never
+     * overlaps it (`reserveStop`).
+     */
+    hasCappedFilters = computed(() => this.allAuthorizedFilters().length > this.filtersCount(), ...(ngDevMode ? [{ debugName: "hasCappedFilters" }] : []));
     constructor() {
         this.transloco.events$
             .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(100))
             .subscribe(() => this.overflowManagerRef()?.countItems());
+        // Recount the overflow whenever the applied filters or basket change (e.g.
+        // a filter modified or removed from the "more filters" popover). A
+        // FilterButton hidden by the overflow manager (display: none) emits no
+        // resize notification when its natural width changes, so it could fit in
+        // the bar again without the manager knowing. afterRenderEffect guarantees
+        // the DOM already reflects the new state when we measure.
+        afterRenderEffect({
+            read: () => {
+                // track filters and basket changes (getState is reactive here)
+                const { filters, basket } = getState(this.queryParamsStore);
+                void filters;
+                void basket;
+                this.overflowManagerRef()?.countItems();
+            }
+        });
     }
     /**
      * Clears all filters (included baskets) by invoking the clearFilters method on the queryParamsStore.
@@ -14669,8 +14536,8 @@ class FiltersBarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FiltersBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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: `
-    <div overflowManager [direction]="direction()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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 }, homepage: { classPropertyName: "homepage", publicName: "homepage", 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 min-w-0', 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: `
+    <div overflowManager [direction]="direction()" [reserveStop]="hasCappedFilters()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
       @if (hasFilters()) {
         <button
           variant="destructive"
@@ -14717,11 +14584,12 @@ class FiltersBarComponent {
           [position]="morePosition()"
           [includedFilters]="includeFilters()"
           [excludedFilters]="excludeFilters()"
-          [aggregations]="aggregations()" />
+          [aggregations]="aggregations()"
+          [homepage]="homepage()" />
       }
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { 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: "component", type: TrashCanIcon, selector: "trash-can-icon, TrashCanIcon", inputs: ["class"] }, { kind: "component", type: InboxIcon, selector: "inbox-icon, InboxIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: MoreButtonComponent, selector: "more-button, MoreButton", inputs: ["count", "position", "includedFilters", "excludedFilters", "aggregations", "homepage"] }, { kind: "component", type: FilterButtonComponent, selector: "filter-button, FilterButton", inputs: ["name", "column", "position", "offset", "expandedLevel"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction", "reserveStop"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "component", type: TrashCanIcon, selector: "trash-can-icon, TrashCanIcon", inputs: ["class"] }, { kind: "component", type: InboxIcon, selector: "inbox-icon, InboxIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FiltersBarComponent, decorators: [{
             type: Component,
@@ -14741,7 +14609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     ],
                     providers: [provideTranslocoScope("filters")],
                     template: `
-    <div overflowManager [direction]="direction()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
+    <div overflowManager [direction]="direction()" [reserveStop]="hasCappedFilters()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
       @if (hasFilters()) {
         <button
           variant="destructive"
@@ -14788,17 +14656,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           [position]="morePosition()"
           [includedFilters]="includeFilters()"
           [excludedFilters]="excludeFilters()"
-          [aggregations]="aggregations()" />
+          [aggregations]="aggregations()"
+          [homepage]="homepage()" />
       }
       }
     </div>
   `,
                     host: {
-                        "[class]": "cn('block relative', class())",
+                        "[class]": "cn('block relative min-w-0', class())",
                         "(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 }] }], 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 }] }] } });
+        }], 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 }] }], homepage: [{ type: i0.Input, args: [{ isSignal: true, alias: "homepage", 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);
@@ -16187,5 +16056,5 @@ const queryNameResolver = () => {
  * Generated bundle index. Do not edit.
  */
 
-export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchComponent, AggregationComponent, AggregationDateComponent, AggregationDateRangeDialogComponent, 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 };
+export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchComponent, AggregationComponent, AggregationDateComponent, AggregationDateRangeDialogComponent, AggregationListComponent, AggregationPanelComponent, 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, SidebarNavComponent, 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, injectRouteNavigation, 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