@sinequa/atomic-angular 1.7.1 → 1.8.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -1,13 +1,13 @@
 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, EnvironmentInjector, 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, Subject, of, catchError, map, tap, EMPTY, throwError, filter, shareReplay, from, switchMap, firstValueFrom, fromEvent, debounceTime } from 'rxjs';
+import { BehaviorSubject, Subscription, Subject, of, catchError, map, tap, EMPTY, throwError, from, filter as filter$1, shareReplay, switchMap, firstValueFrom, fromEvent, debounceTime } from 'rxjs';
 import { TranslocoService, TranslocoPipe, provideTranslocoScope } from '@jsverse/transloco';
 import { DropdownComponent, DropdownContentComponent, InputComponent, ButtonComponent, cn, FaIconComponent, EllipsisIcon, ChevronRightIcon, MenuComponent, MenuContentComponent, MenuItemComponent, LinkComponent, CardComponent, CardHeaderComponent, CardContentComponent, 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, CardFooterComponent, InputGroupInput, InputGroupComponent, InputGroupAddonComponent, EyeSlashIcon, EyeIcon, BookmarkIcon, PopoverContentComponent, UserIcon, FolderIcon, DialogDescriptionComponent, VerticalDividerComponent, CommentIcon, ThumbsUpIcon, ThumbsDownIcon, DropdownDirective, SearchIcon, TriangleAlertIcon, ListFilterIcon, BreakpointObserverService, TrashCanIcon, CircleXIcon, InfoCircleIcon, HorizontalDividerComponent, HistoryIcon, StarIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, EditIcon, UndoIcon, SaveIcon, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@sinequa/ui';
 import highlightWords from 'highlight-words';
 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, fetchPrincipal, globalConfig, getQueryParamsFromUrl, clearSessionTokens, login, info, error, setGlobalConfig, initializeAppConfig, notify, addConcepts, queryParamsFromUrl, patchUserSettings, deleteUserSettings, fetchUserSettings, warn, 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 { EngineType, fetchApp, extraColumns, sysLang, fetchPrincipal, globalConfig, filter, getQueryParamsFromUrl, clearSessionTokens, login, info, error, setGlobalConfig, initializeAppConfig, notify, addConcepts, queryParamsFromUrl, patchUserSettings, deleteUserSettings, fetchUserSettings, warn, buildPathsAndLevels, escapeExpr, fetchQuery, isAuthenticated, isExpired, debug, AuditEventType, fetchSuggest, isObject, Audit, getMetadata, bisect, isNotInputEvent, fetchSponsoredLinks, 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, 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, HttpContextToken, HttpHeaders } from '@angular/common/http';
@@ -1365,6 +1365,64 @@ class InlineWorker {
     }
 }
 
+/**
+ * Converts a `LegacyFilter` to the structured `Filter` model, built with the
+ * `filter.*` helpers of `@sinequa/atomic`. The result is assignable as-is to
+ * `query.filters` / `fetchQuery({ filters })`.
+ *
+ * Covers the shapes produced by the aggregation components when applying
+ * filters (`toFilter`, `getFiltersForTree`, `getFormValueFilter`,
+ * `buildAppliedFilter`): `in` values, `and`/`or` expression trees, `between`
+ * ranges, scalar leaves (`eq`/`contains`/`gte`/`lte`/…) and the operator-less
+ * `{ field, value }` form (treated as `eq`).
+ *
+ * Returns `undefined` for an absent filter or a degenerate shape (leaf without
+ * `field`/`value`, empty combinator) — consistent with the `filter.and`/`or`
+ * collapsing rules and with an absent `query.filters`.
+ */
+function legacyFilterToFilter(legacy) {
+    if (!legacy)
+        return undefined;
+    const { operator, field } = legacy;
+    switch (operator) {
+        case "and":
+        case "or": {
+            const children = (legacy.filters ?? []).map((f) => legacyFilterToFilter(f));
+            return operator === "and" ? filter.and(...children) : filter.or(...children);
+        }
+        case "not": {
+            const children = (legacy.filters ?? []).map((f) => legacyFilterToFilter(f));
+            return filter.not(...children);
+        }
+        case "in":
+            return field && legacy.values?.length ? filter.in(field, legacy.values) : undefined;
+        case "between":
+            return field && legacy.start !== undefined && legacy.end !== undefined
+                ? filter.between(field, legacy.start, legacy.end)
+                : undefined;
+        case "null":
+            return field ? filter.isNull(field) : undefined;
+        case "notnull":
+            return field ? filter.isNotNull(field) : undefined;
+        case "eq":
+        case "neq":
+        case "gt":
+        case "gte":
+        case "lt":
+        case "lte":
+        case "like":
+        case "contains":
+        case "regex":
+            return field && legacy.value !== undefined ? filter[operator](field, legacy.value) : undefined;
+        case undefined:
+            // operator-less leaf ({ field, value }) — the `toFilter` form for
+            // non-string values; semantically an equality
+            return field && legacy.value !== undefined ? filter.eq(field, legacy.value) : undefined;
+        default:
+            return undefined;
+    }
+}
+
 /**
  * Retrieves the query name from the current route.
  *
@@ -3209,11 +3267,13 @@ class AggregationsService {
     queryParamsStore = inject(QueryParamsStore);
     nonSearchableColumns = inject(NON_SEARCHABLE_COLUMNS);
     API_URL = `${globalConfig.backendUrl}/api/v1`;
-    loadMore(query, aggregation, audit) {
+    loadMore(query, aggregation, audit, options) {
         const { app } = globalConfig;
         // skip cached items for computation
         const skip = aggregation.items?.filter((i) => !i.$cached)?.length || 0;
-        const count = this.appStore.getAggregationCount(query.name, aggregation.name) || 10;
+        // options.count carries the page size of a controlled (non-attached) query —
+        // getAggregationCount only knows queries attached to the current app
+        const count = options?.count ?? (this.appStore.getAggregationCount(query.name, aggregation.name) || 10);
         const aggregations = { [aggregation.name]: { skip, count } };
         const q = { ...query, action: "aggregate", aggregations };
         // add audit record if available
@@ -3242,7 +3302,7 @@ class AggregationsService {
             info("aggregation.loadMore success - data: ", response);
         }));
     }
-    open(query, aggregation, item) {
+    open(query, aggregation, item, options) {
         const value = `/${item.$path}/*`;
         const expression = `${aggregation.column}:${escapeExpr(value)}`;
         const q = {
@@ -3252,7 +3312,18 @@ class AggregationsService {
             open: [{ expression, aggregation: aggregation.name }]
         };
         // we dont' want to use the query params (filters) when opening nodes
-        return this.queryService.search(q, false).pipe(map((results) => {
+        // Guard-free mode calls fetchQuery directly: QueryService.search reads the shared
+        // QueryParamsStore and publishes into its app-wide `result` signal, which a
+        // controlled (per-instance) aggregation must not touch.
+        const results$ = options?.guardFree
+            ? from(fetchQuery(q)).pipe(tap((results) => {
+                results.aggregations?.forEach((agg) => {
+                    if (agg.isTree)
+                        buildPathsAndLevels(agg);
+                });
+            }))
+            : this.queryService.search(q, false);
+        return results$.pipe(map((results) => {
             // find the node in the tree and replace it with the new one
             const items = results.aggregations[0].items;
             // if the open call returns no items, we need to update the node to indicate it has no children
@@ -3285,6 +3356,19 @@ class AggregationsService {
         const agg = this.getAggregation(name, column);
         if (!agg)
             return null;
+        return this.enrichAggregation(agg);
+    }
+    /**
+     * Applies the app-level customization (custom JSON display/icon/hidden/searchable,
+     * non-searchable columns) and marks the `$selected` items on the given aggregation.
+     *
+     * @param agg - The aggregation to enrich (mutated in place and returned).
+     * @param selectionValues - Controlled selection: the selected values (list) or
+     * `"/A/B/*"` paths (tree). When `undefined`, the selection is derived from the
+     * shared `QueryParamsStore` filters (default behavior). An empty array means
+     * "nothing selected" and skips the store read entirely.
+     */
+    enrichAggregation(agg, selectionValues) {
         const { items = [], display = agg.name, icon, hidden, expandedLevel, searchable = true } = this.appStore.getAggregationCustomization(agg.column, agg.name) || {};
         agg.display = display;
         agg.icon = icon;
@@ -3298,9 +3382,15 @@ class AggregationsService {
             agg.searchable = false;
         }
         if (agg.items) {
-            // get current filters for the aggregation
-            const filters = this.queryParamsStore.getFilter({ field: agg.column, name: agg.name });
-            const flattenedValues = filters ? this.flattenFilters([filters]) : [];
+            let flattenedValues;
+            if (selectionValues !== undefined) {
+                flattenedValues = selectionValues;
+            }
+            else {
+                // get current filters for the aggregation
+                const filters = this.queryParamsStore.getFilter({ field: agg.column, name: agg.name });
+                flattenedValues = filters ? this.flattenFilters([filters]) : [];
+            }
             if (agg.isTree) {
                 const selectedAgg = agg.items.map((item) => this.selectNode(item, flattenedValues));
                 const openedAgg = selectedAgg.map((item) => this.openParentNodes(item, flattenedValues));
@@ -4201,7 +4291,7 @@ class NavigationService {
      *
      * @type Observable<RouterEvent>
      */
-    navigationEnd$ = this.router.events.pipe(map((event) => event), filter((event) => event instanceof NavigationEnd), tap((event) => {
+    navigationEnd$ = this.router.events.pipe(map((event) => event), filter$1((event) => event instanceof NavigationEnd), tap((event) => {
         const url = event.url.slice(1).split("?")[0]; // Extract route name
         if (url && url !== this.urlAfterNavigation) {
             this.auditService.notifyRouteChange(url);
@@ -5741,9 +5831,7 @@ class CollectionsDialog {
     closed = output();
     createInputElement = viewChild("createInput", ...(ngDevMode ? [{ debugName: "createInputElement" }] : []));
     dialogElement = viewChild(DialogComponent, ...(ngDevMode ? [{ debugName: "dialogElement" }] : []));
-    queryParamStore = inject(QueryParamsStore);
     userSettingsStore = inject(UserSettingsStore);
-    collection = signal(undefined, ...(ngDevMode ? [{ debugName: "collection" }] : []));
     article = signal([], ...(ngDevMode ? [{ debugName: "article" }] : []));
     newCollectionName = signal("", ...(ngDevMode ? [{ debugName: "newCollectionName" }] : []));
     creating = signal(false, ...(ngDevMode ? [{ debugName: "creating" }] : []));
@@ -5760,8 +5848,6 @@ class CollectionsDialog {
             this.article.set([article]);
         else
             this.article.set(article);
-        const { basket } = getState(this.queryParamStore);
-        this.collection.set(basket);
         this.dialogElement()?.showModal();
     }
     containsArticleByName(collectionName) {
@@ -5810,6 +5896,7 @@ class CollectionsDialog {
             // remove it
             const articleIds = this.article().map((a) => a.id);
             collection.ids = collection.ids?.filter((id) => !articleIds.includes(id)) ?? [];
+            this.removedFromCollection.set(true);
         }
         else {
             // add it
@@ -5821,8 +5908,6 @@ class CollectionsDialog {
         }
         try {
             await this.userSettingsStore.updateBasket(collection, collectionIndex);
-            const currentCollection = this.collection();
-            this.removedFromCollection.set(!!currentCollection && !this.containsArticleByName(currentCollection));
         }
         catch (e) {
             error("Error updating collection:", e);
@@ -6493,6 +6578,43 @@ function injectRouteNavigation(path, showCount) {
     return { tabs, currentPath, searchText };
 }
 
+/**
+ * Marker directive: project a custom template for the content/label region of
+ * each aggregation item. Put it on an `<ng-template>` inside `<aggregation-list>`
+ * or `<aggregation-tree>`:
+ *
+ * ```html
+ * <aggregation-list name="Languages" column="language" [aggregation]="agg">
+ *   <ng-template aggregationItem let-item let-count="count" let-selected="selected">
+ *     <span>{{ item.display }}</span>
+ *     <span class="badge">{{ count }}</span>
+ *   </ng-template>
+ * </aggregation-list>
+ * ```
+ *
+ * When no template is projected, the component renders its default row content.
+ * The `let-*` variables are typed under `strictTemplates` via
+ * {@link AggregationItemDirective.ngTemplateContextGuard}; the host must import
+ * this directive in its component `imports`.
+ */
+class AggregationItemDirective {
+    template = inject(TemplateRef);
+    /**
+     * Narrows the `let-*` of `<ng-template aggregationItem>` under `strictTemplates`.
+     * Tree-only fields (`level`/`expanded`/`hasChildren`) are typed as optional; a tree
+     * template can re-annotate them via {@link AggregationTreeItemContext} if desired.
+     */
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: AggregationItemDirective, isStandalone: true, selector: "[aggregationItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationItemDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[aggregationItem]" }]
+        }] });
+
 /**
  * Directive to mark a child element for special processing.
  * This can be used to apply specific styles or behaviors to child elements.
@@ -8917,12 +9039,98 @@ function injectAggregationBase(refs) {
     const aggregationsService = inject(AggregationsService);
     const injector = inject(Injector);
     const destroyRef = inject(DestroyRef);
+    /* controlled mode — each axis is controlled when its input is provided.
+       Writes (store/URL/sessionStorage) are gated by the global `isControlled` flag. */
+    const isQueryControlled = computed(() => refs.query?.() !== undefined, ...(ngDevMode ? [{ debugName: "isQueryControlled" }] : []));
+    const isDataControlled = computed(() => refs.aggregation?.() !== undefined, ...(ngDevMode ? [{ debugName: "isDataControlled" }] : []));
+    const isSelectionControlled = computed(() => refs.selection?.() !== undefined, ...(ngDevMode ? [{ debugName: "isSelectionControlled" }] : []));
+    const isControlled = computed(() => isQueryControlled() || isDataControlled() || isSelectionControlled(), ...(ngDevMode ? [{ debugName: "isControlled" }] : []));
+    /** The query the aggregation's own operations run against. */
+    function resolvedQuery() {
+        return refs.query?.() ?? queryParamsStore.getQuery();
+    }
+    /**
+     * Load-more page size when the query axis is controlled: the host's query
+     * carries its own aggregation counts (`query.aggregations[name].count`), since
+     * `AppStore.getAggregationCount` only knows queries attached to the current app.
+     * Returns `undefined` in default mode — the service then resolves the count
+     * from the app configuration, as today.
+     */
+    function resolvedAggregationCount(agg) {
+        const q = refs.query?.();
+        if (!q)
+            return undefined;
+        const aggregations = q.aggregations;
+        if (aggregations && !Array.isArray(aggregations)) {
+            return aggregations[agg.name]?.count ?? 10;
+        }
+        return 10;
+    }
+    /**
+     * Local aggregation state in controlled mode, seeded from the `aggregation`
+     * input (or the shared store when only the query/selection axis is controlled).
+     * `loadMore`/`open` write their results here instead of the shared store.
+     *
+     * The seed is deep-cloned: items are mutated in place (`$selected`, `$opened`),
+     * so working on the host's (or the store's) objects would leak state across
+     * instances and mutate the host's data. Any reference change of the input
+     * reseeds the signal and discards local enrichments (loaded pages, opened nodes).
+     */
+    const controlledAggregation = linkedSignal(() => {
+        if (!isControlled())
+            return null;
+        const source = refs.aggregation?.() ??
+            (getState(aggregationsStore), aggregationsService.getAggregation(refs.name() ?? "", refs.column()));
+        return source ? structuredClone(source) : null;
+    }, ...(ngDevMode ? [{ debugName: "controlledAggregation" }] : []));
     const debouncedSearchText = debouncedSignal(refs.searchText, 300);
     const normalizedSearchText = computed(() => debouncedSearchText()
         .normalize("NFD")
         .replace(/[̀-ͯ]/g, ""), ...(ngDevMode ? [{ debugName: "normalizedSearchText" }] : []));
     const suggests = signal([], ...(ngDevMode ? [{ debugName: "suggests" }] : []));
+    /**
+     * The selected values (list) or `"/A/B/*"` paths (tree) in controlled mode.
+     * `undefined` in default mode — the selection is then derived from the shared
+     * `QueryParamsStore` filters. In controlled mode without a `selection` input,
+     * this is an empty array: the store filters belong to the shared query, not to
+     * the host's, and must never leak into a controlled instance.
+     */
+    const selectionValues = computed(() => {
+        const sel = refs.selection?.();
+        if (sel) {
+            switch (sel.kind) {
+                case "values":
+                    return sel.values;
+                case "paths":
+                    return sel.paths;
+                case "option":
+                case "range":
+                    return [];
+            }
+        }
+        return isControlled() ? [] : undefined;
+    }, ...(ngDevMode ? [{ debugName: "selectionValues" }] : []));
+    /** The controlled selection expressed in the shape `getFilter()` returns. */
+    const selectionAsFilter = computed(() => {
+        const sel = refs.selection?.();
+        return sel?.kind === "values" && sel.values.length ? { values: sel.values } : null;
+    }, ...(ngDevMode ? [{ debugName: "selectionAsFilter" }] : []));
     const _filterCount = computed(() => {
+        if (isControlled()) {
+            const sel = refs.selection?.();
+            if (!sel)
+                return 0;
+            switch (sel.kind) {
+                case "values":
+                    return sel.values.length;
+                case "paths":
+                    return sel.paths.length;
+                case "option":
+                    return sel.option ? 1 : 0;
+                case "range":
+                    return sel.from || sel.to ? 1 : 0;
+            }
+        }
         getState(aggregationsStore);
         const { count = 0 } = queryParamsStore.getFilter({ field: refs.column() ?? undefined, name: refs.name() ?? undefined }) || {};
         return count;
@@ -8945,7 +9153,7 @@ function injectAggregationBase(refs) {
         .pipe(takeUntilDestroyed(destroyRef), switchMap(({ text, column }) => {
         if (text === "" || column === null)
             return of([]);
-        const q = queryParamsStore.getQuery();
+        const q = resolvedQuery();
         return from(withFetch(() => fetchSuggestField(normalizedSearchText(), [column || ""], q), injector));
     }))
         .subscribe((result) => suggests.set(result || []));
@@ -8964,7 +9172,9 @@ function injectAggregationBase(refs) {
     function addCurrentFiltersToItems(aggregation) {
         const currentItems = aggregation?.items || [];
         if (!aggregation?.isTree && !aggregation?.isDistribution) {
-            const currentFilters = queryParamsStore.getFilter({ field: aggregation?.column, name: aggregation?.name });
+            const currentFilters = isControlled()
+                ? selectionAsFilter()
+                : queryParamsStore.getFilter({ field: aggregation?.column, name: aggregation?.name });
             if (currentFilters) {
                 if (Array.isArray(currentFilters.filters) && currentFilters.filters.length) {
                     currentFilters.filters.forEach((filter) => {
@@ -9003,34 +9213,45 @@ function injectAggregationBase(refs) {
         }
         return currentItems;
     }
-    function applyFilters(appliedFilters, agg, clearFn) {
+    /**
+     * Aggregates the applied item filters into the single `LegacyFilter` that
+     * `applyFilters` writes to the store. Also used by the controlled mode to
+     * build the emitted structured filter, so both modes stay strictly
+     * consistent. Returns `undefined` when nothing is applied (the clear case).
+     */
+    function buildAppliedFilter(appliedFilters, agg) {
         const { name: aggName, column: field } = agg;
-        const syncUrl = refs.syncUrl?.() ?? true;
         if (appliedFilters.length > 1) {
             const display = appliedFilters[0].display;
             if (agg.isDistribution) {
-                queryParamsStore.updateFilter({
+                return {
                     operator: "or",
                     filters: appliedFilters,
                     name: aggName,
                     field,
                     display,
-                }, undefined, { syncUrl });
-            }
-            else {
-                const values = appliedFilters.map((f) => f.value);
-                queryParamsStore.updateFilter({
-                    operator: "in",
-                    name: aggName,
-                    field,
-                    values,
-                    display,
-                    filters: appliedFilters,
-                }, undefined, { syncUrl });
+                };
             }
+            const values = appliedFilters.map((f) => f.value);
+            return {
+                operator: "in",
+                name: aggName,
+                field,
+                values,
+                display,
+                filters: appliedFilters,
+            };
+        }
+        if (appliedFilters.length === 1) {
+            return appliedFilters[0];
         }
-        else if (appliedFilters.length === 1) {
-            queryParamsStore.updateFilter(appliedFilters[0], undefined, { syncUrl });
+        return undefined;
+    }
+    function applyFilters(appliedFilters, agg, clearFn) {
+        const syncUrl = refs.syncUrl?.() ?? true;
+        const combined = buildAppliedFilter(appliedFilters, agg);
+        if (combined) {
+            queryParamsStore.updateFilter(combined, undefined, { syncUrl });
         }
         else {
             clearFn();
@@ -9043,6 +9264,14 @@ function injectAggregationBase(refs) {
         aggregationsService,
         injector,
         destroyRef,
+        isControlled,
+        isQueryControlled,
+        isDataControlled,
+        isSelectionControlled,
+        resolvedQuery,
+        resolvedAggregationCount,
+        controlledAggregation,
+        selectionValues,
         debouncedSearchText,
         normalizedSearchText,
         suggests,
@@ -9053,6 +9282,7 @@ function injectAggregationBase(refs) {
         clearSearch,
         selectItems,
         addCurrentFiltersToItems,
+        buildAppliedFilter,
         applyFilters,
     };
 }
@@ -9100,12 +9330,56 @@ class AggregationDateComponent {
      * @default true
      */
     syncUrl = input(true, ...(ngDevMode ? [{ debugName: "syncUrl", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Controlled query. When set, the component's own operations run against this
+     * query instead of reading the shared `QueryParamsStore`. Use to target a query
+     * not tied to the current app, without mutating the shared store or the URL.
+     *
+     * @default undefined — read `QueryParamsStore.getQuery()` (current behavior)
+     */
+    controlledQuery = input(undefined, ...(ngDevMode ? [{ debugName: "controlledQuery", alias: "query" }] : [{ alias: "query" }]));
+    /**
+     * Controlled data. When set, the component renders this aggregation object
+     * instead of reading it from the shared `AggregationsStore`.
+     *
+     * @default undefined — read `AggregationsStore` (current behavior)
+     */
+    controlledAggregation = input(undefined, ...(ngDevMode ? [{ debugName: "controlledAggregation", alias: "aggregation" }] : [{ alias: "aggregation" }]));
+    /**
+     * Controlled selection. When set, the date form is derived from this value
+     * instead of the shared `QueryParamsStore` filters:
+     * `{ kind: "option", option }` re-selects the date option whose aggregation
+     * item `value` matches (the real filter value, never the `display`);
+     * `{ kind: "range", from, to }` fills the custom range from the bounds.
+     * The two kinds are mutually exclusive — a date selection is either a preset
+     * or a custom range.
+     *
+     * @default undefined — derive from `QueryParamsStore` filters (current behavior)
+     */
+    controlledSelection = input(undefined, ...(ngDevMode ? [{ debugName: "controlledSelection", alias: "selection" }] : [{ alias: "selection" }]));
     title = input({ label: "Date", icon: "far fa-calendar-day" }, ...(ngDevMode ? [{ debugName: "title" }] : []));
     displayEmptyDistributionIntervals = input(false, ...(ngDevMode ? [{ debugName: "displayEmptyDistributionIntervals" }] : []));
     /* outputs */
     onSelect = output();
     onApply = output();
     onClear = output();
+    /**
+     * Emits the new selection (`{ kind: "option" }` preset or `{ kind: "range" }`
+     * custom range) in controlled mode. The counterpart of the `[selection]` input,
+     * emitted before `filtersChange`. Date is a radio list, so this fires **live at
+     * selection time** — picking a preset radio, or confirming a date in the custom
+     * range picker — not on an apply click (the custom-range radio alone, with no
+     * date picked, emits nothing). Also emitted on clear. In controlled mode this is
+     * the only way changes surface: nothing is written to the shared stores or the URL.
+     */
+    selectionChange = output();
+    /**
+     * Emits the selection as a structured `Filter` (the exact filter the default
+     * mode would write to the store), ready for `fetchQuery({ filters })`.
+     * `undefined` on clear. Controlled mode only — emitted right after
+     * `selectionChange` (see its live-emission timing).
+     */
+    filtersChange = output();
     /* collapse state */
     isCollapsed = linkedSignal(() => this.collapsed(), ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
     expanded = computed(() => (this.isCollapsed() ? null : ""), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
@@ -9120,8 +9394,12 @@ class AggregationDateComponent {
         searchInput: this.searchInput,
         expanded: this.expanded,
         syncUrl: this.syncUrl,
+        query: this.controlledQuery,
+        aggregation: this.controlledAggregation,
+        selection: this.controlledSelection,
     });
     /* spread from base */
+    isControlled = this.base.isControlled;
     aggregationsService = this.base.aggregationsService;
     queryParamsStore = this.base.queryParamsStore;
     hasFilters = this.base.hasFilters;
@@ -9132,7 +9410,24 @@ class AggregationDateComponent {
     /* state */
     selection = signal(false, ...(ngDevMode ? [{ debugName: "selection" }] : []));
     validSelection = signal(false, ...(ngDevMode ? [{ debugName: "validSelection" }] : []));
+    /**
+     * Guards live emission while the form is seeded programmatically from the
+     * `[selection]` input (see the seeding effect below). `form.setValue`/`patchValue`
+     * emit `valueChanges` synchronously; without this flag a controlled host that
+     * re-feeds `[selection]` from `selectionChange` would loop indefinitely.
+     */
+    seedingForm = false;
     aggregation = computed(() => {
+        if (this.isControlled()) {
+            const controlled = this.base.controlledAggregation();
+            if (!controlled)
+                return null;
+            const agg = this.aggregationsService.enrichAggregation(controlled, []);
+            return {
+                ...agg,
+                items: agg.items?.filter((item) => item.display !== "custom-range") ?? []
+            };
+        }
         const name = this.name();
         if (name !== null) {
             const agg = this.aggregationsService.processAggregation(name, this.column());
@@ -9168,28 +9463,75 @@ class AggregationDateComponent {
         this.transloco.langChanges$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((lang) => {
             this.lang.set(lang);
         });
-        // apply current date filter from queryParamsStore
+        // apply current date filter from the selection input (controlled) or the queryParamsStore
         effect(() => {
             const agg = this.aggregation();
-            if (agg) {
+            if (!agg)
+                return;
+            // seeding the form from an input must not re-emit through valueChanges
+            this.seedingForm = true;
+            try {
+                if (this.isControlled()) {
+                    this.updateFormFromSelection(this.controlledSelection());
+                    return;
+                }
                 this.updateForm(this.queryParamsStore.getFilter({
                     field: agg.column,
                     name: agg.name
                 }));
             }
+            finally {
+                this.seedingForm = false;
+            }
         });
         this.form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((changes) => {
             this.validSelection.set(!!changes.option &&
                 (changes.option !== "custom-range" || changes.customRange?.from !== null || changes.customRange?.to !== null));
+            // controlled date is a radio list: emit the selection live, without waiting
+            // for an apply click. Presets are complete as soon as the radio is picked;
+            // the custom range is emitted only once a real date is chosen (see
+            // `onRangeSelected`), never on toggling the "custom-range" radio, so a stale
+            // range left in the form is not surfaced.
+            if (!this.seedingForm &&
+                this.isControlled() &&
+                changes.option &&
+                changes.option !== "custom-range") {
+                try {
+                    this.emitCurrentSelection();
+                }
+                catch (err) {
+                    warn("Error emitting date selection:", err);
+                }
+            }
         });
     }
+    /**
+     * Emits the current form selection through `selectionChange` then `filtersChange`
+     * (controlled mode). Shared by `apply()` and the live emission paths so both
+     * produce identical payloads. Throws if the form is not a valid selection
+     * (`getFormValueFilter`) — callers decide how to surface it.
+     */
+    emitCurrentSelection() {
+        const filter = this.getFormValueFilter();
+        const option = this.form.value.option;
+        // a date selection is either a preset (the item's value — the real filter
+        // value, robust across days) or a custom range (its bounds) — never both
+        this.selectionChange.emit(option && option !== "custom-range"
+            ? { kind: "option", option: this.optionToItemValue(option) ?? option }
+            : this.toRangeSelection(filter));
+        this.filtersChange.emit(legacyFilterToFilter(filter));
+    }
     select() {
         this.selection.set(true);
     }
     apply() {
         try {
-            const filter = this.getFormValueFilter();
-            this.queryParamsStore.updateFilter(filter, undefined, { syncUrl: this.syncUrl() });
+            if (this.isControlled()) {
+                this.emitCurrentSelection();
+            }
+            else {
+                this.queryParamsStore.updateFilter(this.getFormValueFilter(), undefined, { syncUrl: this.syncUrl() });
+            }
             this.selection.set(false);
             this.onApply.emit();
         }
@@ -9210,7 +9552,13 @@ class AggregationDateComponent {
         });
         const agg = this.aggregation();
         if (agg && notify) {
-            this.queryParamsStore.removeFilterByName(agg.name, undefined, { syncUrl: this.syncUrl() });
+            if (this.isControlled()) {
+                this.selectionChange.emit({ kind: "range" });
+                this.filtersChange.emit(undefined);
+            }
+            else {
+                this.queryParamsStore.removeFilterByName(agg.name, undefined, { syncUrl: this.syncUrl() });
+            }
             this.onClear.emit();
         }
     }
@@ -9228,12 +9576,22 @@ class AggregationDateComponent {
         this.dateRangeDialog()?.open();
     }
     onRangeSelected(range) {
-        console.log("Selected range:", range);
         this.form.patchValue({
             option: "custom-range",
             customRange: { from: range.from, to: range.to }
         });
         this.select();
+        // a real date was picked in the picker: emit the custom range live in
+        // controlled mode (the only place a custom range is emitted — never on
+        // toggling the "custom-range" radio)
+        if (this.isControlled()) {
+            try {
+                this.emitCurrentSelection();
+            }
+            catch (err) {
+                warn("Error emitting date selection:", err);
+            }
+        }
     }
     updateForm(filter) {
         if (!filter) {
@@ -9273,6 +9631,90 @@ class AggregationDateComponent {
         };
         this.form.setValue(formValue);
     }
+    /**
+     * Derives the form from a controlled selection.
+     * `{ kind: "option" }` re-selects the date option whose item `value` matches —
+     * no operator/value matching, so presets whose bounds are computed relative to
+     * today survive a round-trip across days; a value unknown to the aggregation
+     * resets the form. `{ kind: "range" }` fills the custom range from the bounds.
+     */
+    updateFormFromSelection(sel) {
+        if (sel?.kind === "option") {
+            const code = this.itemValueToOption(sel.option);
+            if (code && code !== "custom-range") {
+                this.form.setValue({ option: code, customRange: { from: null, to: null } });
+            }
+            else {
+                this.clear(false);
+            }
+            return;
+        }
+        this.updateForm(this.rangeToLegacyFilter(sel));
+    }
+    /**
+     * The date option codes (what `form.option` holds) are the items' `display`
+     * with a fallback on their `value` (see `translateAggregationToDateOptions`).
+     * The controlled selection persists the item `value` — the real filter value —
+     * so these two helpers convert between the option code and the item value.
+     */
+    optionToItemValue(option) {
+        const item = this.items().find((it) => (it.display || String(it.value)) === option);
+        return item ? String(item.value) : undefined;
+    }
+    itemValueToOption(value) {
+        const item = this.items().find((it) => String(it.value) === value);
+        return item ? item.display || String(item.value) : undefined;
+    }
+    /**
+     * Converts a controlled `{ kind: "range" }` selection to the `LegacyFilter`
+     * shape `updateForm` expects (which only reads `operator`/`value`/`filters`).
+     * Returns `undefined` for an empty or non-range selection, which resets the form.
+     */
+    rangeToLegacyFilter(sel) {
+        if (!sel || sel.kind !== "range")
+            return undefined;
+        const { from, to } = sel;
+        if (from && to) {
+            return {
+                operator: "and",
+                filters: [
+                    { operator: "gte", value: from },
+                    { operator: "lte", value: to }
+                ]
+            };
+        }
+        if (from)
+            return { operator: "gte", value: from };
+        if (to)
+            return { operator: "lte", value: to };
+        return undefined;
+    }
+    /**
+     * Converts the applied `LegacyFilter` to a `{ kind: "range" }` selection
+     * (the shape emitted through `selectionChange` in controlled mode).
+     * Mirrors the operator handling of `updateForm`. Presets whose operator is not
+     * a range operator (e.g. `eq`) collapse to `from = to = value`.
+     */
+    toRangeSelection(filter) {
+        switch (filter.operator) {
+            case "gte":
+                return { kind: "range", from: filter.value };
+            case "lte":
+                return { kind: "range", to: filter.value };
+            case "between":
+                return { kind: "range", from: filter.start, to: filter.end };
+            case "and": {
+                const filters = filter.filters ?? [];
+                return {
+                    kind: "range",
+                    from: filters.find((f) => f.operator === "gte")?.value,
+                    to: filters.find((f) => f.operator === "lte")?.value
+                };
+            }
+            default:
+                return { kind: "range", from: filter.value, to: filter.value };
+        }
+    }
     toEndOfDay(dateStr) {
         return `${new Date(dateStr).toLocaleDateString("en-CA", options)} 23:59:59`;
     }
@@ -9348,7 +9790,7 @@ class AggregationDateComponent {
         throw new Error("filters.filterInvalid");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", 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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", isSignal: true, isRequired: false, transformFunction: null }, controlledQuery: { classPropertyName: "controlledQuery", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, controlledAggregation: { classPropertyName: "controlledAggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null }, controlledSelection: { classPropertyName: "controlledSelection", publicName: "selection", 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", selectionChange: "selectionChange", filtersChange: "filtersChange", 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 (!isControlled() && 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=\"flex max-h-[var(--scroll-height,20rem)] snap-y snap-start scrollbar-thin 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.25", ngImport: i0, type: AggregationDateComponent, decorators: [{
             type: Component,
@@ -9366,8 +9808,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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-[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 }] }], syncUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncUrl", 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"] }] } });
+                    }, 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 (!isControlled() && 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=\"flex max-h-[var(--scroll-height,20rem)] snap-y snap-start scrollbar-thin 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 }] }], syncUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncUrl", required: false }] }], controlledQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], controlledAggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregation", required: false }] }], controlledSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", 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"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], 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.
@@ -9376,7 +9818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  */
 class DateComponent extends AggregationDateComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 (!isControlled() && 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=\"flex max-h-[var(--scroll-height,20rem)] snap-y snap-start scrollbar-thin 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.25", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
@@ -9393,7 +9835,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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-[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"] }]
+                    }, 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 (!isControlled() && 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=\"flex max-h-[var(--scroll-height,20rem)] snap-y snap-start scrollbar-thin 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 {
@@ -13726,6 +14168,14 @@ class AggregationTreeComponent {
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
     showFiltersCount = input(false, ...(ngDevMode ? [{ debugName: "showFiltersCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Whether to render the per-node checkbox. When `false`, the checkbox is hidden
+     * but selection still toggles on row click — pair it with a custom `aggregationItem`
+     * template that reflects the `selected` context to convey selection.
+     *
+     * @default true
+     */
+    showCheckbox = input(true, ...(ngDevMode ? [{ debugName: "showCheckbox", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     expandedLevel = input(undefined, ...(ngDevMode ? [{ debugName: "expandedLevel", transform: (v) => {
                 const n = numberAttribute(v);
                 return Number.isNaN(n) ? undefined : n;
@@ -13742,13 +14192,63 @@ class AggregationTreeComponent {
      * @default true
      */
     syncUrl = input(true, ...(ngDevMode ? [{ debugName: "syncUrl", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Controlled query. When set, the component's own operations (load-more,
+     * search-within-facet, tree-expand) run against this query instead of reading
+     * the shared `QueryParamsStore`. Use to target a query not tied to the current
+     * app, without mutating the shared store or the URL.
+     *
+     * @default undefined — read `QueryParamsStore.getQuery()` (current behavior)
+     */
+    controlledQuery = input(undefined, ...(ngDevMode ? [{ debugName: "controlledQuery", alias: "query" }] : [{ alias: "query" }]));
+    /**
+     * Controlled data. When set, the component renders this aggregation object
+     * instead of reading it from the shared `AggregationsStore`.
+     *
+     * @default undefined — read `AggregationsStore` (current behavior)
+     */
+    controlledAggregation = input(undefined, ...(ngDevMode ? [{ debugName: "controlledAggregation", alias: "aggregation" }] : [{ alias: "aggregation" }]));
+    /**
+     * Controlled selection. When set, item `$selected` state is derived from this
+     * value (`paths` in the `"/A/B/*"` format) instead of the shared
+     * `QueryParamsStore` filters.
+     *
+     * @default undefined — derive from `QueryParamsStore` filters (current behavior)
+     */
+    controlledSelection = input(undefined, ...(ngDevMode ? [{ debugName: "controlledSelection", alias: "selection" }] : [{ alias: "selection" }]));
     /* outputs */
     onSelect = output();
     onApply = output();
     onClear = output();
+    /**
+     * Emits the new selection (`"/A/B/*"` paths) when the user applies or clears
+     * filters in controlled mode. The counterpart of the `[selection]` input —
+     * emitted before `filtersChange` and `onApply`/`onClear`. In controlled mode
+     * this is the only way changes surface: nothing is written to the shared
+     * stores or the URL.
+     */
+    selectionChange = output();
+    /**
+     * Emits the applied selection as a structured `Filter` (the exact filter the
+     * default mode would write to the store), ready for `fetchQuery({ filters })`.
+     * `undefined` on clear. Controlled mode only — emitted after `selectionChange`,
+     * before `onApply`/`onClear`.
+     */
+    filtersChange = output();
     /* view queries */
     virtualItems = viewChildren("virtualItem", ...(ngDevMode ? [{ debugName: "virtualItems" }] : []));
     scrollElement = viewChild("scrollElement", ...(ngDevMode ? [{ debugName: "scrollElement" }] : []));
+    /* optional host-provided template for the node content/label region */
+    itemDirective = contentChild(AggregationItemDirective, ...(ngDevMode ? [{ debugName: "itemDirective" }] : []));
+    /**
+     * Item content template relayed by the `<Aggregation>` wrapper (which cannot
+     * project content into this component). Also usable directly as a `TemplateRef`
+     * input. A directive projected straight onto this component takes precedence.
+     */
+    itemTemplateInput = input(undefined, ...(ngDevMode ? [{ debugName: "itemTemplateInput", alias: "itemTemplate" }] : [{
+            alias: "itemTemplate",
+        }]));
+    resolvedItemTemplate = computed(() => this.itemDirective()?.template ?? this.itemTemplateInput(), ...(ngDevMode ? [{ debugName: "resolvedItemTemplate" }] : []));
     /* selection state */
     selection = signal(false, ...(ngDevMode ? [{ debugName: "selection" }] : []));
     isAllSelected = signal(false, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
@@ -13760,8 +14260,12 @@ class AggregationTreeComponent {
         column: this.column,
         searchText: this.searchText,
         syncUrl: this.syncUrl,
+        query: this.controlledQuery,
+        aggregation: this.controlledAggregation,
+        selection: this.controlledSelection,
     });
     /* spread from base */
+    isControlled = this.base.isControlled;
     aggregationsStore = this.base.aggregationsStore;
     queryParamsStore = this.base.queryParamsStore;
     appStore = this.base.appStore;
@@ -13788,6 +14292,21 @@ class AggregationTreeComponent {
     #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(() => {
+        if (this.isControlled()) {
+            const agg = this.base.controlledAggregation();
+            if (!agg)
+                return null;
+            if (!agg.isTree) {
+                error("The aggregation tree component does not support list aggregations. Please use the <Aggregation /> component instead.");
+            }
+            const enriched = this.aggregationsService.enrichAggregation(agg, this.base.selectionValues() ?? []);
+            const expandedLevel = this.expandedLevel() ?? enriched.expandedLevel;
+            if (expandedLevel) {
+                this.expandItems(enriched.items, expandedLevel);
+            }
+            enriched.searchable = this.searchable() ?? enriched.searchable;
+            return enriched;
+        }
         getState(this.aggregationsStore);
         const name = this.name();
         const column = this.column();
@@ -13818,7 +14337,10 @@ class AggregationTreeComponent {
         else if (agg?.items) {
             res = this.addCurrentFiltersToItems();
         }
-        const sessionAggItem = sessionStorage.getItem(`agg-${agg?.column}`);
+        // Controlled mode never touches sessionStorage: selection persistence is the
+        // host's responsibility via the `selection` input, and the `agg-${column}` key
+        // is shared with any default-mode instance on the same column.
+        const sessionAggItem = this.isControlled() ? null : sessionStorage.getItem(`agg-${agg?.column}`);
         const sessionAgg = JSON.parse(sessionAggItem || "[]");
         return this.processAggregations(sessionAgg.length ? this.setSelected(res, sessionAgg) : res);
     }, ...(ngDevMode ? [{ debugName: "items" }] : []));
@@ -13842,13 +14364,16 @@ class AggregationTreeComponent {
     constructor() {
         effect(() => {
             getState(this.aggregationsStore);
+            if (this.isControlled())
+                return;
             sessionStorage.removeItem(`agg-${this.column()}`);
         });
         effect(() => {
             this.filters.set(this.getFilters());
         });
         this.destroyRef.onDestroy(() => {
-            sessionStorage.removeItem(`agg-${this.aggregation()?.column}`);
+            if (!this.isControlled())
+                sessionStorage.removeItem(`agg-${this.aggregation()?.column}`);
             if (this.selection()) {
                 const unselect = (items) => {
                     items.forEach((item) => {
@@ -13865,7 +14390,13 @@ class AggregationTreeComponent {
     clear() {
         const agg = this.aggregation();
         if (agg) {
-            this.queryParamsStore.removeFilterByName(agg.name, agg.column, { syncUrl: this.syncUrl() });
+            if (this.isControlled()) {
+                this.selectionChange.emit({ kind: "paths", paths: [] });
+                this.filtersChange.emit(undefined);
+            }
+            else {
+                this.queryParamsStore.removeFilterByName(agg.name, agg.column, { syncUrl: this.syncUrl() });
+            }
             const unselect = (items) => {
                 items.forEach((item) => {
                     item.$selected = false;
@@ -13875,7 +14406,8 @@ class AggregationTreeComponent {
                 });
             };
             unselect(this.items());
-            sessionStorage.removeItem(`agg-${this.aggregation()?.column}`);
+            if (!this.isControlled())
+                sessionStorage.removeItem(`agg-${this.aggregation()?.column}`);
             this.selection.set(false);
             this.isAllSelected.set(false);
             this.onClear.emit();
@@ -13896,21 +14428,57 @@ class AggregationTreeComponent {
         }
     }
     apply(overrideFilters) {
-        sessionStorage.setItem(`agg-${this.aggregation()?.column}`, JSON.stringify([...this.items()]));
         const filters = overrideFilters || this.getFilters();
         const agg = this.aggregation();
-        this.base.applyFilters(filters, agg, () => this.clear());
+        if (this.isControlled()) {
+            const paths = filters[0]?.values ?? [];
+            this.selectionChange.emit({ kind: "paths", paths });
+            this.filtersChange.emit(legacyFilterToFilter(this.base.buildAppliedFilter(filters, agg)));
+        }
+        else {
+            sessionStorage.setItem(`agg-${agg?.column}`, JSON.stringify([...this.items()]));
+            this.base.applyFilters(filters, agg, () => this.clear());
+        }
         this.searchText.set("");
         this.selection.set(false);
         this.onApply.emit();
     }
     loadMore() {
+        // Controlled mode loads into the local state — never the shared AggregationsStore.
+        if (this.isControlled()) {
+            const agg = this.base.controlledAggregation();
+            if (!agg)
+                return;
+            this.aggregationsService
+                .loadMore(this.base.resolvedQuery(), agg, undefined, { count: this.base.resolvedAggregationCount(agg) })
+                .subscribe((aggregation) => {
+                this.base.controlledAggregation.set(aggregation);
+            });
+            return;
+        }
         const q = this.queryParamsStore.getQuery();
         this.aggregationsService.loadMore(q, this.aggregation()).subscribe((aggregation) => {
             this.aggregationsStore.updateAggregation(aggregation);
         });
     }
     async open(node) {
+        // Controlled mode expands into the local state via the guard-free fetch —
+        // never the shared AggregationsStore, never QueryService's global result signal.
+        if (this.isControlled()) {
+            const controlled = this.base.controlledAggregation();
+            if (!controlled)
+                return;
+            // Spread before mutating: resolvedQuery() may return the host's query object.
+            const q = { ...this.base.resolvedQuery() };
+            delete q.filters;
+            const agg = await firstValueFrom(this.aggregationsService.open(q, controlled, node, {
+                guardFree: true,
+            }));
+            node.$opened = true;
+            // replaceInTree mutates and returns the same reference — spread so the signal notifies.
+            this.base.controlledAggregation.set({ ...agg });
+            return;
+        }
         const q = this.queryParamsStore.getQuery();
         delete q.filters;
         const agg = await firstValueFrom(this.aggregationsService.open(q, this.aggregation(), node));
@@ -13922,7 +14490,9 @@ class AggregationTreeComponent {
         this.onSelect.emit(selectedItems);
         this.selection.set(selectedItems.length > 0 || this.hasFilters());
         this.verifySelected();
-        sessionStorage.setItem(`agg-${this.aggregation()?.column}`, JSON.stringify([...this.items()]));
+        if (!this.isControlled()) {
+            sessionStorage.setItem(`agg-${this.aggregation()?.column}`, JSON.stringify([...this.items()]));
+        }
     }
     /* item-level methods — called from the ng-template */
     treeItemName(item) {
@@ -13930,6 +14500,10 @@ class AggregationTreeComponent {
         return typeof value === "string" ? value : `${value}`;
     }
     isTreeItemFiltered(item, field) {
+        if (this.isControlled()) {
+            const values = [item.value, `/${item.$path}/*`];
+            return (this.base.selectionValues() ?? []).some((value) => values.some((v) => v === value));
+        }
         const filters = this.queryParamsStore.getFilter({ field: field ?? undefined, name: this.treeItemName(item) });
         if (!filters)
             return false;
@@ -13990,7 +14564,10 @@ class AggregationTreeComponent {
         const notSelectedItems = this.getFlattenTreeItems()
             .filter((item) => !item.$selected)
             .map((item) => (item.$path ? `/${item.$path}/*` : ""));
-        const currentFilters = this.queryParamsStore.getFilter({ field, name })?.values || [];
+        const sel = this.controlledSelection();
+        const currentFilters = this.isControlled()
+            ? (sel?.kind === "paths" ? sel.paths : [])
+            : this.queryParamsStore.getFilter({ field, name })?.values || [];
         if (currentFilters) {
             const filteredCurrentFilters = currentFilters.filter((filter) => !notSelectedItems.includes(filter));
             if (filteredCurrentFilters.length > 0) {
@@ -14116,7 +14693,7 @@ class AggregationTreeComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", 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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", isSignal: true, isRequired: false, transformFunction: null }, controlledQuery: { classPropertyName: "controlledQuery", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, controlledAggregation: { classPropertyName: "controlledAggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null }, controlledSelection: { classPropertyName: "controlledSelection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear", selectionChange: "selectionChange", filtersChange: "filtersChange", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit] w-[inherit]\", class())" } }, queries: [{ propertyName: "itemDirective", first: true, predicate: AggregationItemDirective, descendants: true, isSignal: true }], 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=\"max-h-(--scroll-height,20rem) w-full scrollbar-thin 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      @if (showCheckbox()) {\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      }\r\n      @if (resolvedItemTemplate(); as tpl) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"tpl\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: node,\r\n            field: field,\r\n            selected: node.$selected || node.$selectedVisually || false,\r\n            count: node.count,\r\n            name: (treeItemName(node) | syslang) ?? '',\r\n            searchText: searchText(),\r\n            level: treeItemLevel(node),\r\n            expanded: node.$opened ?? false,\r\n            hasChildren: node.hasChildren ?? false\r\n          }\" />\r\n      } @else {\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      }\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.25", ngImport: i0, type: AggregationTreeComponent, decorators: [{
             type: Component,
@@ -14134,8 +14711,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         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 }] }], syncUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncUrl", 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"] }] } });
+                    }, 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=\"max-h-(--scroll-height,20rem) w-full scrollbar-thin 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      @if (showCheckbox()) {\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      }\r\n      @if (resolvedItemTemplate(); as tpl) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"tpl\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: node,\r\n            field: field,\r\n            selected: node.$selected || node.$selectedVisually || false,\r\n            count: node.count,\r\n            name: (treeItemName(node) | syslang) ?? '',\r\n            searchText: searchText(),\r\n            level: treeItemLevel(node),\r\n            expanded: node.$opened ?? false,\r\n            hasChildren: node.hasChildren ?? false\r\n          }\" />\r\n      } @else {\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      }\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 }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], syncUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncUrl", required: false }] }], controlledQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], controlledAggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregation", required: false }] }], controlledSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], virtualItems: [{ type: i0.ViewChildren, args: ["virtualItem", { isSignal: true }] }], scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], itemDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AggregationItemDirective), { isSignal: true }] }], itemTemplateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
 
 class AggregationListComponent {
     cn = cn;
@@ -14148,6 +14725,14 @@ class AggregationListComponent {
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
     showFiltersCount = input(null, ...(ngDevMode ? [{ debugName: "showFiltersCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Whether to render the per-item checkbox. When `false`, the checkbox is hidden
+     * but selection still toggles on row click — pair it with a custom `aggregationItem`
+     * template that reflects the `selected` context to convey selection.
+     *
+     * @default true
+     */
+    showCheckbox = input(true, ...(ngDevMode ? [{ debugName: "showCheckbox", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
      * When `false`, applying or clearing filters updates the store without
      * synchronizing the URL (no browser history entry, not shareable/restorable).
@@ -14155,12 +14740,61 @@ class AggregationListComponent {
      * @default true
      */
     syncUrl = input(true, ...(ngDevMode ? [{ debugName: "syncUrl", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Controlled query. When set, the component's own operations (load-more,
+     * search-within-facet) run against this query instead of reading the shared
+     * `QueryParamsStore`. Use to target a query not tied to the current app,
+     * without mutating the shared store or the URL.
+     *
+     * @default undefined — read `QueryParamsStore.getQuery()` (current behavior)
+     */
+    controlledQuery = input(undefined, ...(ngDevMode ? [{ debugName: "controlledQuery", alias: "query" }] : [{ alias: "query" }]));
+    /**
+     * Controlled data. When set, the component renders this aggregation object
+     * instead of reading it from the shared `AggregationsStore`.
+     *
+     * @default undefined — read `AggregationsStore` (current behavior)
+     */
+    controlledAggregation = input(undefined, ...(ngDevMode ? [{ debugName: "controlledAggregation", alias: "aggregation" }] : [{ alias: "aggregation" }]));
+    /**
+     * Controlled selection. When set, item `$selected` state is derived from this
+     * value instead of the shared `QueryParamsStore` filters.
+     *
+     * @default undefined — derive from `QueryParamsStore` filters (current behavior)
+     */
+    controlledSelection = input(undefined, ...(ngDevMode ? [{ debugName: "controlledSelection", alias: "selection" }] : [{ alias: "selection" }]));
     /* outputs */
     onSelect = output();
     onApply = output();
     onClear = output();
+    /**
+     * Emits the new selection (item values) when the user applies or clears
+     * filters in controlled mode. The counterpart of the `[selection]` input —
+     * emitted before `filtersChange` and `onApply`/`onClear`. In controlled mode
+     * this is the only way changes surface: nothing is written to the shared
+     * stores or the URL.
+     */
+    selectionChange = output();
+    /**
+     * Emits the applied selection as a structured `Filter` (the exact filter the
+     * default mode would write to the store), ready for `fetchQuery({ filters })`.
+     * `undefined` on clear. Controlled mode only — emitted after `selectionChange`,
+     * before `onApply`/`onClear`.
+     */
+    filtersChange = output();
     /* view queries */
     scrollElement = viewChild("scrollElement", ...(ngDevMode ? [{ debugName: "scrollElement" }] : []));
+    /* optional host-provided template for the item content/label region */
+    itemDirective = contentChild(AggregationItemDirective, ...(ngDevMode ? [{ debugName: "itemDirective" }] : []));
+    /**
+     * Item content template relayed by the `<Aggregation>` wrapper (which cannot
+     * project content into this component). Also usable directly as a `TemplateRef`
+     * input. A directive projected straight onto this component takes precedence.
+     */
+    itemTemplateInput = input(undefined, ...(ngDevMode ? [{ debugName: "itemTemplateInput", alias: "itemTemplate" }] : [{
+            alias: "itemTemplate",
+        }]));
+    resolvedItemTemplate = computed(() => this.itemDirective()?.template ?? this.itemTemplateInput(), ...(ngDevMode ? [{ debugName: "resolvedItemTemplate" }] : []));
     /* selection state */
     selection = signal(false, ...(ngDevMode ? [{ debugName: "selection" }] : []));
     isAllSelected = signal(false, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
@@ -14172,8 +14806,12 @@ class AggregationListComponent {
         column: this.column,
         searchText: this.searchText,
         syncUrl: this.syncUrl,
+        query: this.controlledQuery,
+        aggregation: this.controlledAggregation,
+        selection: this.controlledSelection,
     });
     /* spread from base */
+    isControlled = this.base.isControlled;
     aggregationsStore = this.base.aggregationsStore;
     queryParamsStore = this.base.queryParamsStore;
     appStore = this.base.appStore;
@@ -14197,6 +14835,17 @@ class AggregationListComponent {
         scrollElement: this.scrollElement(),
     }));
     aggregation = computed(() => {
+        if (this.isControlled()) {
+            const agg = this.base.controlledAggregation();
+            if (!agg)
+                return null;
+            if (agg.isTree) {
+                error("The aggregation component does not support tree aggregations. Please use the <AggregationTree /> component instead.");
+            }
+            const enriched = this.aggregationsService.enrichAggregation(agg, this.base.selectionValues() ?? []);
+            enriched.searchable = this.searchable() ?? enriched.searchable;
+            return enriched;
+        }
         getState(this.aggregationsStore);
         const name = this.name();
         const column = this.column();
@@ -14258,7 +14907,13 @@ class AggregationListComponent {
     clear() {
         const agg = this.aggregation();
         if (agg) {
-            this.queryParamsStore.removeFilterByName(agg.name, agg.column, { syncUrl: this.syncUrl() });
+            if (this.isControlled()) {
+                this.selectionChange.emit({ kind: "values", values: [] });
+                this.filtersChange.emit(undefined);
+            }
+            else {
+                this.queryParamsStore.removeFilterByName(agg.name, agg.column, { syncUrl: this.syncUrl() });
+            }
             this.selection.set(false);
             this.isAllSelected.set(false);
         }
@@ -14283,12 +14938,34 @@ class AggregationListComponent {
         const agg = this.aggregation();
         if (!agg)
             return;
-        this.base.applyFilters(this.getFilters(), agg, () => this.clear());
+        if (this.isControlled()) {
+            const values = [...this.items(), ...this.searchedItems()]
+                .filter((item) => item.$selected)
+                .map((item) => String(item.value));
+            this.selectionChange.emit({ kind: "values", values: Array.from(new Set(values)) });
+            this.filtersChange.emit(legacyFilterToFilter(this.base.buildAppliedFilter(this.getFilters(), agg)));
+        }
+        else {
+            this.base.applyFilters(this.getFilters(), agg, () => this.clear());
+        }
         this.searchText.set("");
         this.selection.set(false);
         this.onApply.emit();
     }
     loadMore() {
+        // Controlled mode loads into the local state — never the shared AggregationsStore.
+        if (this.isControlled()) {
+            const agg = this.base.controlledAggregation();
+            if (!agg)
+                return;
+            this.aggregationsService
+                .loadMore(this.base.resolvedQuery(), agg, undefined, { count: this.base.resolvedAggregationCount(agg) })
+                .subscribe((aggregation) => {
+                this.base.controlledAggregation.set(aggregation);
+                this.cdr.detectChanges();
+            });
+            return;
+        }
         const q = this.queryParamsStore.getQuery();
         this.aggregationsService.loadMore(q, this.aggregation()).subscribe((aggregation) => {
             this.aggregationsStore.updateAggregation(aggregation);
@@ -14306,6 +14983,9 @@ class AggregationListComponent {
         return typeof value === "string" ? value : `${value}`;
     }
     isListItemFiltered(item, field) {
+        if (this.isControlled()) {
+            return (this.base.selectionValues() ?? []).some((value) => value === item.value);
+        }
         const filters = this.queryParamsStore.getFilter({ field: field ?? undefined, name: this.listItemName(item) });
         if (!filters)
             return false;
@@ -14335,7 +15015,7 @@ class AggregationListComponent {
         return this.base.addCurrentFiltersToItems(this.aggregation());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", 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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", isSignal: true, isRequired: false, transformFunction: null }, controlledQuery: { classPropertyName: "controlledQuery", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, controlledAggregation: { classPropertyName: "controlledAggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null }, controlledSelection: { classPropertyName: "controlledSelection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear", selectionChange: "selectionChange", filtersChange: "filtersChange", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\", class())" } }, queries: [{ propertyName: "itemDirective", first: true, predicate: AggregationItemDirective, descendants: true, isSignal: true }], 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=\"max-h-(--scroll-height,20rem) w-full scrollbar-thin 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    @if (showCheckbox()) {\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    }\r\n    @if (resolvedItemTemplate(); as tpl) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"tpl\"\r\n        [ngTemplateOutletContext]=\"{\r\n          $implicit: item,\r\n          field: field,\r\n          selected: item.$selected ?? false,\r\n          count: item.count,\r\n          name: (listItemName(item) | syslang) ?? '',\r\n          searchText: searchText()\r\n        }\" />\r\n    } @else {\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    }\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.25", ngImport: i0, type: AggregationListComponent, decorators: [{
             type: Component,
@@ -14351,8 +15031,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         AggregationPanelComponent,
                     ], 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<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 }] }], syncUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncUrl", 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"] }] } });
+                    }, 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=\"max-h-(--scroll-height,20rem) w-full scrollbar-thin 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    @if (showCheckbox()) {\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    }\r\n    @if (resolvedItemTemplate(); as tpl) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"tpl\"\r\n        [ngTemplateOutletContext]=\"{\r\n          $implicit: item,\r\n          field: field,\r\n          selected: item.$selected ?? false,\r\n          count: item.count,\r\n          name: (listItemName(item) | syslang) ?? '',\r\n          searchText: searchText()\r\n        }\" />\r\n    } @else {\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    }\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 }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], syncUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncUrl", required: false }] }], controlledQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], controlledAggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregation", required: false }] }], controlledSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], itemDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AggregationItemDirective), { isSignal: true }] }], itemTemplateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
 
 /**
  * The `AggregationComponent` is responsible for rendering the appropriate aggregation component based on the type of aggregation (date, tree, or list). It uses the `AggregationsService` to retrieve the aggregation data and determines which component to display based on the column type and whether it is a tree structure. The component also provides inputs for configuring its behavior, such as collapsibility, searchability, and showing filter counts.
@@ -14377,6 +15057,12 @@ class AggregationComponent {
     aggregationDate = viewChild(AggregationDateComponent, ...(ngDevMode ? [{ debugName: "aggregationDate" }] : []));
     aggregationTree = viewChild(AggregationTreeComponent, ...(ngDevMode ? [{ debugName: "aggregationTree" }] : []));
     aggregationList = viewChild(AggregationListComponent, ...(ngDevMode ? [{ debugName: "aggregationList" }] : []));
+    /**
+     * Host-projected `<ng-template aggregationItem>`, relayed to the active list/tree
+     * sub-component (the wrapper has no `<ng-content>`, so the sub-component's own
+     * `contentChild` cannot see it). See {@link AggregationItemDirective}.
+     */
+    itemDirective = contentChild(AggregationItemDirective, ...(ngDevMode ? [{ debugName: "itemDirective" }] : []));
     class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
     /**
      * The name of the <details> element. When you provide the same id, the component work as an accordion
@@ -14420,6 +15106,13 @@ class AggregationComponent {
      * "Undefined" and not "false" because this input overrides the custom json settings
      */
     searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    /**
+     * Whether to render the per-item checkbox (list/tree). When `false`, the checkbox
+     * is hidden but selection still toggles on row click. Ignored by the date variant.
+     *
+     * @default true
+     */
+    showCheckbox = input(true, ...(ngDevMode ? [{ debugName: "showCheckbox", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     expandedLevel = input(undefined, ...(ngDevMode ? [{ debugName: "expandedLevel", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     /**
      * Controls whether applying or clearing a filter synchronizes the URL.
@@ -14431,12 +15124,64 @@ class AggregationComponent {
      * @default true
      */
     syncUrl = input(true, ...(ngDevMode ? [{ debugName: "syncUrl", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * Controlled query. When set, the aggregation's own operations (load-more,
+     * search-within-facet, tree-expand) run against this query instead of reading
+     * the shared `QueryParamsStore`. Use to target a query not tied to the current
+     * app, without mutating the shared store or the URL.
+     *
+     * @default undefined — read `QueryParamsStore.getQuery()` (current behavior)
+     */
+    controlledQuery = input(undefined, ...(ngDevMode ? [{ debugName: "controlledQuery", alias: "query" }] : [{ alias: "query" }]));
+    /**
+     * Controlled data. When set, the component renders this aggregation object
+     * (name/column/items) instead of reading it from the shared `AggregationsStore`.
+     *
+     * @default undefined — read `AggregationsStore` (current behavior)
+     */
+    controlledAggregation = input(undefined, ...(ngDevMode ? [{ debugName: "controlledAggregation", alias: "aggregation" }] : [{ alias: "aggregation" }]));
+    /**
+     * Controlled selection. When set, item `$selected` state is derived from this
+     * value (list: item values; tree: `"/A/B/*"` paths; date: the range) instead
+     * of the shared `QueryParamsStore` filters.
+     *
+     * @default undefined — derive from `QueryParamsStore` filters (current behavior)
+     */
+    controlledSelection = input(undefined, ...(ngDevMode ? [{ debugName: "controlledSelection", alias: "selection" }] : [{ alias: "selection" }]));
+    /**
+     * Which sub-component renders the aggregation.
+     *
+     * `"auto"` (default) keeps the current heuristic: a date column of the app
+     * (`AppStore.isDateColumn`) renders `<AggregationDate>`, a tree aggregation
+     * renders `<AggregationTree>`, anything else `<AggregationList>`. Set an
+     * explicit value in controlled mode when the heuristic cannot apply — e.g. a
+     * date facet of a query not attached to the current app, whose column is
+     * unknown to the app's column map.
+     *
+     * @default "auto"
+     */
+    type = input("auto", ...(ngDevMode ? [{ debugName: "type" }] : []));
     /**
      * An output event that emits an array of selected `AggregationItem` objects when the user selects items in the aggregation component. This allows parent components to listen for selection changes and react accordingly, such as applying filters or updating the UI based on the selected items.
      */
     onSelect = output();
     onApply = output();
     onClear = output();
+    /**
+     * Emits the new selection when the user applies or clears filters in
+     * controlled mode (list: item values; tree: `"/A/B/*"` paths; date: option or
+     * range). The counterpart of the `[selection]` input — emitted before
+     * `filtersChange` and `onApply`/`onClear`. In controlled mode this is the only
+     * way changes surface: nothing is written to the shared stores or the URL.
+     */
+    selectionChange = output();
+    /**
+     * Emits the applied selection as a structured `Filter` (the exact filter the
+     * default mode would write to the store), ready for `fetchQuery({ filters })`.
+     * `undefined` on clear. Controlled mode only — emitted after `selectionChange`,
+     * before `onApply`/`onClear`.
+     */
+    filtersChange = output();
     /**
      * A computed property that retrieves the items to be displayed in the aggregation component. It checks for the presence of date, tree, or list aggregation components and returns their respective items. If none of these components are present, it returns an empty array. This allows the component to dynamically display the appropriate items based on the type of aggregation being rendered.
      *
@@ -14454,6 +15199,10 @@ class AggregationComponent {
     selectedItems = computed(() => this.items().filter(item => item.$selected), ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
     /* aggregation */
     aggregation = computed(() => {
+        // controlled mode: the input is the data source — the store is not read
+        const controlled = this.controlledAggregation();
+        if (controlled)
+            return controlled;
         // when the aggegation store updates, we need to check if the aggregation is still valid
         getState(this.aggregationsStore);
         const agg = this.aggregationsService.getAggregation(this.name(), this.column());
@@ -14463,6 +15212,20 @@ class AggregationComponent {
         }
         return agg;
     }, ...(ngDevMode ? [{ debugName: "aggregation" }] : []));
+    /**
+     * The sub-component to render: the explicit `type` input, or the current
+     * date/tree/list heuristic when `type` is `"auto"`.
+     */
+    resolvedType = computed(() => {
+        const type = this.type();
+        if (type !== "auto")
+            return type;
+        if (this.isDate(this.aggregation()?.column))
+            return "date";
+        if (this.aggregation()?.isTree)
+            return "tree";
+        return "list";
+    }, ...(ngDevMode ? [{ debugName: "resolvedType" }] : []));
     /**
      * Checks if the specified column is a date filter.
      *
@@ -14476,8 +15239,9 @@ class AggregationComponent {
         return this.appStore.isDateColumn(column);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AggregationComponent, isStandalone: true, selector: "Aggregation, aggregation", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\",class())" } }, viewQueries: [{ propertyName: "aggregationDate", first: true, predicate: AggregationDateComponent, descendants: true, isSignal: true }, { propertyName: "aggregationTree", first: true, predicate: AggregationTreeComponent, descendants: true, isSignal: true }, { propertyName: "aggregationList", first: true, predicate: AggregationListComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
-    @if (isDate(aggregation()?.column)) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AggregationComponent, isStandalone: true, selector: "Aggregation, aggregation", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", isSignal: true, isRequired: false, transformFunction: null }, controlledQuery: { classPropertyName: "controlledQuery", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, controlledAggregation: { classPropertyName: "controlledAggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null }, controlledSelection: { classPropertyName: "controlledSelection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear", selectionChange: "selectionChange", filtersChange: "filtersChange" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\",class())" } }, queries: [{ propertyName: "itemDirective", first: true, predicate: AggregationItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "aggregationDate", first: true, predicate: AggregationDateComponent, descendants: true, isSignal: true }, { propertyName: "aggregationTree", first: true, predicate: AggregationTreeComponent, descendants: true, isSignal: true }, { propertyName: "aggregationList", first: true, predicate: AggregationListComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @switch (resolvedType()) {
+    @case ("date") {
     <AggregationDate
       [id]="id()"
       [name]="name()"
@@ -14487,11 +15251,17 @@ class AggregationComponent {
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
       [syncUrl]="syncUrl()"
+      [query]="controlledQuery()"
+      [aggregation]="controlledAggregation()"
+      [selection]="controlledSelection()"
       [title]="{ label: 'Date', icon: 'far fa-calendar-day' }"
       (onApply)="onApply.emit($event)"
       (onClear)="onClear.emit($event)"
+      (selectionChange)="selectionChange.emit($event)"
+      (filtersChange)="filtersChange.emit($event)"
       />
-  } @else if (aggregation()?.isTree) {
+    }
+    @case ("tree") {
     <AggregationTree
       [id]="id()"
       [name]="name()"
@@ -14501,13 +15271,20 @@ class AggregationComponent {
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
       [syncUrl]="syncUrl()"
+      [query]="controlledQuery()"
+      [aggregation]="controlledAggregation()"
+      [selection]="controlledSelection()"
+      [itemTemplate]="itemDirective()?.template"
+      [showCheckbox]="showCheckbox()"
       [expandedLevel]="expandedLevel()"
       (onSelect)="onSelect.emit($event)"
       (onApply)="onApply.emit($event)"
       (onClear)="onClear.emit($event)"
+      (selectionChange)="selectionChange.emit($event)"
+      (filtersChange)="filtersChange.emit($event)"
       />
-  }
-  @else {
+    }
+    @default {
     <AggregationList
       [id]="id()"
       [name]="name()"
@@ -14517,12 +15294,20 @@ class AggregationComponent {
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
       [syncUrl]="syncUrl()"
+      [query]="controlledQuery()"
+      [aggregation]="controlledAggregation()"
+      [selection]="controlledSelection()"
+      [itemTemplate]="itemDirective()?.template"
+      [showCheckbox]="showCheckbox()"
       (onSelect)="onSelect.emit($event)"
       (onApply)="onApply.emit($event)"
       (onClear)="onClear.emit($event)"
+      (selectionChange)="selectionChange.emit($event)"
+      (filtersChange)="filtersChange.emit($event)"
       />
-  }
-  `, isInline: true, dependencies: [{ kind: "component", type: AggregationListComponent, selector: "AggregationList, aggregation-list, aggregationlist", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "syncUrl", "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", "syncUrl", "searchText"], outputs: ["onSelect", "onApply", "onClear", "searchTextChange"] }, { kind: "component", type: AggregationDateComponent, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: ["name", "column", "id", "collapsible", "collapsed", "searchable", "showFiltersCount", "syncUrl", "title", "displayEmptyDistributionIntervals", "searchText"], outputs: ["onSelect", "onApply", "onClear", "searchTextChange"] }] });
+    }
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: AggregationListComponent, selector: "AggregationList, aggregation-list, aggregationlist", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "showCheckbox", "syncUrl", "query", "aggregation", "selection", "itemTemplate", "searchText"], outputs: ["onSelect", "onApply", "onClear", "selectionChange", "filtersChange", "searchTextChange"] }, { kind: "component", type: AggregationTreeComponent, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "showCheckbox", "expandedLevel", "syncUrl", "query", "aggregation", "selection", "itemTemplate", "searchText"], outputs: ["onSelect", "onApply", "onClear", "selectionChange", "filtersChange", "searchTextChange"] }, { kind: "component", type: AggregationDateComponent, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: ["name", "column", "id", "collapsible", "collapsed", "searchable", "showFiltersCount", "syncUrl", "query", "aggregation", "selection", "title", "displayEmptyDistributionIntervals", "searchText"], outputs: ["onSelect", "onApply", "onClear", "selectionChange", "filtersChange", "searchTextChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationComponent, decorators: [{
             type: Component,
@@ -14530,7 +15315,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     selector: "Aggregation, aggregation",
                     imports: [AggregationListComponent, AggregationTreeComponent, AggregationDateComponent],
                     template: `
-    @if (isDate(aggregation()?.column)) {
+    @switch (resolvedType()) {
+    @case ("date") {
     <AggregationDate
       [id]="id()"
       [name]="name()"
@@ -14540,11 +15326,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
       [syncUrl]="syncUrl()"
+      [query]="controlledQuery()"
+      [aggregation]="controlledAggregation()"
+      [selection]="controlledSelection()"
       [title]="{ label: 'Date', icon: 'far fa-calendar-day' }"
       (onApply)="onApply.emit($event)"
       (onClear)="onClear.emit($event)"
+      (selectionChange)="selectionChange.emit($event)"
+      (filtersChange)="filtersChange.emit($event)"
       />
-  } @else if (aggregation()?.isTree) {
+    }
+    @case ("tree") {
     <AggregationTree
       [id]="id()"
       [name]="name()"
@@ -14554,13 +15346,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
       [syncUrl]="syncUrl()"
+      [query]="controlledQuery()"
+      [aggregation]="controlledAggregation()"
+      [selection]="controlledSelection()"
+      [itemTemplate]="itemDirective()?.template"
+      [showCheckbox]="showCheckbox()"
       [expandedLevel]="expandedLevel()"
       (onSelect)="onSelect.emit($event)"
       (onApply)="onApply.emit($event)"
       (onClear)="onClear.emit($event)"
+      (selectionChange)="selectionChange.emit($event)"
+      (filtersChange)="filtersChange.emit($event)"
       />
-  }
-  @else {
+    }
+    @default {
     <AggregationList
       [id]="id()"
       [name]="name()"
@@ -14570,17 +15369,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
       [syncUrl]="syncUrl()"
+      [query]="controlledQuery()"
+      [aggregation]="controlledAggregation()"
+      [selection]="controlledSelection()"
+      [itemTemplate]="itemDirective()?.template"
+      [showCheckbox]="showCheckbox()"
       (onSelect)="onSelect.emit($event)"
       (onApply)="onApply.emit($event)"
       (onClear)="onClear.emit($event)"
+      (selectionChange)="selectionChange.emit($event)"
+      (filtersChange)="filtersChange.emit($event)"
       />
-  }
+    }
+    }
   `,
                     host: {
                         "[class]": 'cn("block h-[inherit] max-h-[inherit]",class())'
                     }
                 }]
-        }], propDecorators: { aggregationDate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationDateComponent), { isSignal: true }] }], aggregationTree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationTreeComponent), { isSignal: true }] }], aggregationList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationListComponent), { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], syncUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncUrl", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }] } });
+        }], propDecorators: { aggregationDate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationDateComponent), { isSignal: true }] }], aggregationTree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationTreeComponent), { isSignal: true }] }], aggregationList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationListComponent), { isSignal: true }] }], itemDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AggregationItemDirective), { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], syncUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncUrl", required: false }] }], controlledQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], controlledAggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregation", required: false }] }], controlledSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }] } });
 
 class AsideFiltersComponent {
     cn = cn;
@@ -14614,7 +15421,7 @@ class AsideFiltersComponent {
         showFiltersCount />
     }
   </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel", "syncUrl"], outputs: ["onSelect", "onApply", "onClear"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "showCheckbox", "expandedLevel", "syncUrl", "query", "aggregation", "selection", "type"], outputs: ["onSelect", "onApply", "onClear", "selectionChange", "filtersChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AsideFiltersComponent, decorators: [{
             type: Component,
@@ -14765,7 +15572,7 @@ class FilterButtonComponent {
       }
       </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: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel", "syncUrl"], outputs: ["onSelect", "onApply", "onClear"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size", "aria-label"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "pipe", type: OperatorPipe, name: "operator" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "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: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "showCheckbox", "expandedLevel", "syncUrl", "query", "aggregation", "selection", "type"], outputs: ["onSelect", "onApply", "onClear", "selectionChange", "filtersChange"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size", "aria-label"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "pipe", type: OperatorPipe, name: "operator" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterButtonComponent, decorators: [{
             type: Component,
@@ -14945,7 +15752,7 @@ class MoreComponent {
         [name]="filter.name"
         [column]="filter.column" />
     }
-  `, isInline: true, styles: [":host{scrollbar-width:none}\n"], dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel", "syncUrl"], outputs: ["onSelect", "onApply", "onClear"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, styles: [":host{scrollbar-width:none}\n"], dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "showCheckbox", "expandedLevel", "syncUrl", "query", "aggregation", "selection", "type"], outputs: ["onSelect", "onApply", "onClear", "selectionChange", "filtersChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MoreComponent, decorators: [{
             type: Component,
@@ -15276,7 +16083,7 @@ class FiltersBarComponent {
       @if (currentBasket()) {
         <button
           variant="destructive"
-          class="max-w-40 size-9"
+          class="max-w-40 h-9"
           role="listitem"
           [title]="'filters.clearBasket' | transloco"
           (click)="clearBasket()"
@@ -15348,7 +16155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       @if (currentBasket()) {
         <button
           variant="destructive"
-          class="max-w-40 size-9"
+          class="max-w-40 h-9"
           role="listitem"
           [title]="'filters.clearBasket' | transloco"
           (click)="clearBasket()"
@@ -16803,5 +17610,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, 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, FeatureFlagsDialogComponent, 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, SignedOutComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserProfileDialog, UserProfileFormComponent, UserProfileService, UserSettingsStore, applyThemeToNativeElement, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, bootstrapApp, 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 };
+export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchComponent, AggregationComponent, AggregationDateComponent, AggregationDateRangeDialogComponent, AggregationItemDirective, 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, FeatureFlagsDialogComponent, 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, SignedOutComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserProfileDialog, UserProfileFormComponent, UserProfileService, UserSettingsStore, applyThemeToNativeElement, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, bootstrapApp, buildQuery, debouncedSignal, errorInterceptorFn, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, injectRouteNavigation, legacyFilterToFilter, 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