@sinequa/atomic-angular 1.13.0 → 1.14.1

package/fesm2022/sinequa-atomic-angular.mjs

@@ -2,12 +2,12 @@ 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, 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 { 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, BreakpointObserverService, ListFilterIcon, SheetComponent, SheetHeaderComponent, SheetTitleComponent, 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, filter, getQueryParamsFromUrl, isRedirectPending, info, clearSessionTokens, login, 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 { EngineType, fetchApp, extraColumns, sysLang, fetchPrincipal, globalConfig, filter, getQueryParamsFromUrl, isRedirectPending, info, clearSessionTokens, login, error, setGlobalConfig, initializeAppConfig, notify, addConcepts, queryParamsFromUrl, patchUserSettings, deleteUserSettings, fetchUserSettings, warn, buildPathsAndLevels, escapeExpr, fetchQuery, flattenLegacyFilterValues, 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';
@@ -3526,7 +3526,7 @@ class AggregationsService {
             else {
                 // get current filters for the aggregation
                 const filters = this.queryParamsStore.getFilter({ field: agg.column, name: agg.name });
-                flattenedValues = filters ? this.flattenFilters([filters]) : [];
+                flattenedValues = filters ? flattenLegacyFilterValues([filters]) : [];
             }
             if (agg.isTree) {
                 const selectedAgg = agg.items.map(item => this.selectNode(item, flattenedValues));
@@ -3563,34 +3563,44 @@ class AggregationsService {
      */
     toFilter(item, field, name, isDistribution) {
         if (isDistribution) {
-            const res = item.value.match(/.*:\(?([><=\d\-.AND ]+)\)?/);
-            if (res?.[1]) {
-                const expr = res?.[1].split(" AND ");
-                const filters = expr.map(e => {
-                    const operator = e.indexOf(">=") !== -1 ? "gte" : "lt";
-                    const value = e.substring(e.indexOf(" ") + 1);
-                    return { name, field, operator, value, display: item.display || item.value };
-                });
-                if (filters.length === 2) {
-                    return {
-                        operator: "and",
-                        filters,
-                        display: filters[0].display || filters[0].value,
-                        field,
-                        name
-                    };
-                }
-                else if (filters.length === 1) {
-                    return { ...filters[0], field, name };
-                }
-                throw new Error("Failed to parse distribution expression");
+            // Parsing lives in @sinequa/atomic — `filter.distribution` is the single implementation, and it
+            // recognises all four bounds where this method only ever produced `gte` or `lt`, reading `>` as
+            // `gte` and `<=` as `lt`. What is added here is what the store needs and a `Filter` has no room
+            // for: the aggregation's `name` on every leaf, which is what makes `updateFilter` replace the
+            // entry rather than merge into it, and the human-readable `display`.
+            const parsed = filter.distribution(field, item.value);
+            if (parsed) {
+                return this.nameLeaves(parsed, field, name, item.display || String(item.value ?? ""));
             }
+            throw new Error("Failed to parse distribution expression");
         }
         if (typeof item.value === "string") {
             return { name, field, value: item.value, operator: "contains", display: item.display };
         }
         return { name, field, value: item.value, display: item.display };
     }
+    /**
+     * Stamps the aggregation's `name` and the item's `display` onto a filter parsed by
+     * `filter.distribution`.
+     *
+     * A `Filter` carries neither, and the store needs both: `name` is what
+     * `QueryParamsStore.updateFilter` matches on to **replace** an aggregation's entry instead of merging
+     * into it — the only way a selection can shrink — and `display` is the label the applied-filter chips
+     * render. A combined filter also keeps `field` at its root, which is how the store finds the entry.
+     */
+    nameLeaves(parsed, field, name, display) {
+        const leaves = parsed.filters;
+        if (leaves?.length) {
+            return {
+                ...parsed,
+                field,
+                name,
+                display,
+                filters: leaves.map(leaf => ({ ...leaf, field, name, display }))
+            };
+        }
+        return { ...parsed, field, name, display };
+    }
     findNode(items, path = "") {
         if (!items || items.length === 0) {
             return undefined;
@@ -3638,27 +3648,6 @@ class AggregationsService {
         }
         return node;
     }
-    flattenFilters(filters) {
-        const flattenedValues = [];
-        function extractValues(filters) {
-            for (const filter of filters) {
-                if (filter.value) {
-                    flattenedValues.push(filter.value);
-                    if (filter.display)
-                        flattenedValues.push(filter.display);
-                    // we handle "values" field for trees
-                }
-                else if (filter.values) {
-                    flattenedValues.push(...filter.values);
-                }
-                if (filter.filters) {
-                    extractValues(filter.filters);
-                }
-            }
-        }
-        extractValues(filters);
-        return flattenedValues;
-    }
     /**
      * Recursively opens parent nodes in a tree structure if any of their child nodes are selected or opened.
      *
@@ -5397,6 +5386,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
 
 class UserProfileService {
     API_URL = `${globalConfig.backendUrl}/api/v2/user-profile`;
+    // Keyed by the userId signal's identity rather than its value: every current caller
+    // passes the same PrincipalStore.userId signal, so sharing the resource here collapses
+    // what would otherwise be one httpResource (and one HTTP request) per caller into one
+    // for the whole app -- and lets a `.set()` from one consumer (e.g. the profile edit
+    // form) show up everywhere else that reads this resource.
+    resources = new WeakMap();
     /**
      * Retrieves the user profile by user ID.
      *
@@ -5404,11 +5399,16 @@ class UserProfileService {
      * @returns An Observable that emits an the UserProfile object.
      */
     getUserProfile(userId) {
-        return httpResource(() => (userId() ? `${this.API_URL}/${userId()}` : undefined), {
-            parse: (response) => {
-                return response;
-            }
-        });
+        let resource = this.resources.get(userId);
+        if (!resource) {
+            resource = httpResource(() => (userId() ? `${this.API_URL}/${userId()}` : undefined), {
+                parse: response => {
+                    return response;
+                }
+            });
+            this.resources.set(userId, resource);
+        }
+        return resource;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: UserProfileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: UserProfileService, providedIn: "root" });
@@ -9475,41 +9475,57 @@ function injectAggregationBase(refs) {
     }
     function addCurrentFiltersToItems(aggregation) {
         const currentItems = aggregation?.items || [];
-        if (!aggregation?.isTree && !aggregation?.isDistribution) {
-            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) => {
-                        const found = currentItems.find(item => item.value?.toString().toLocaleLowerCase() === filter.value?.toLocaleLowerCase());
-                        if (!found) {
-                            currentItems.unshift({ value: filter.value, display: filter.display, $selected: true });
-                        }
-                        else {
-                            found.$selected = true;
-                        }
-                    });
-                }
-                else if (Array.isArray(currentFilters.values) && currentFilters.values.length) {
-                    // multiple values stored as a string array, e.g. { values: ["alice_martin", "caroline_dubois"] }
-                    // (no `filters` sub-array and no single `value`) — mark each matching item as selected
-                    currentFilters.values.forEach(value => {
-                        const found = currentItems.find(item => item.value?.toString().toLocaleLowerCase() === value?.toString().toLocaleLowerCase());
-                        if (!found) {
-                            currentItems.unshift({ value, display: value, $selected: true });
-                        }
-                        else {
-                            found.$selected = true;
-                        }
-                    });
+        if (aggregation?.isTree) {
+            return currentItems;
+        }
+        const currentFilters = isControlled() ? selectionAsFilter() : queryParamsStore.getFilter({ field: aggregation?.column, name: aggregation?.name });
+        if (aggregation?.isDistribution) {
+            // A distribution item's `value` is the full backend expression (e.g.
+            // `size`10 Kb to 100 Kb`:(>= 10240 AND < 102400)`), not comparable to what the applied
+            // filter stores — its leaves only ever carry the bucket's numeric thresholds. Flatten the
+            // filter and compare on `display` instead (or `value` when `valuesAreExpressions` is not
+            // set) — same strategy as `AggregationsService.enrichAggregation`.
+            const flattenedValues = currentFilters ? flattenLegacyFilterValues([currentFilters]) : [];
+            currentItems.forEach(item => {
+                const valueToSearch = aggregation.valuesAreExpressions ? item.display : item.value;
+                if (flattenedValues.includes(valueToSearch?.toString() ?? "")) {
+                    item.$selected = true;
                 }
-                else if (currentFilters.value) {
-                    const found = currentItems.find(item => item.value?.toString().toLocaleLowerCase() === currentFilters.value?.toLocaleLowerCase());
+            });
+            return currentItems;
+        }
+        if (currentFilters) {
+            if (Array.isArray(currentFilters.filters) && currentFilters.filters.length) {
+                currentFilters.filters.forEach((filter) => {
+                    const found = currentItems.find(item => item.value?.toString().toLocaleLowerCase() === filter.value?.toLocaleLowerCase());
+                    if (!found) {
+                        currentItems.unshift({ value: filter.value, display: filter.display, $selected: true });
+                    }
+                    else {
+                        found.$selected = true;
+                    }
+                });
+            }
+            else if (Array.isArray(currentFilters.values) && currentFilters.values.length) {
+                // multiple values stored as a string array, e.g. { values: ["alice_martin", "caroline_dubois"] }
+                // (no `filters` sub-array and no single `value`) — mark each matching item as selected
+                currentFilters.values.forEach(value => {
+                    const found = currentItems.find(item => item.value?.toString().toLocaleLowerCase() === value?.toString().toLocaleLowerCase());
                     if (!found) {
-                        currentItems.push({ value: currentFilters.value, display: currentFilters.display, $selected: true });
+                        currentItems.unshift({ value, display: value, $selected: true });
                     }
                     else {
                         found.$selected = true;
                     }
+                });
+            }
+            else if (currentFilters.value) {
+                const found = currentItems.find(item => item.value?.toString().toLocaleLowerCase() === currentFilters.value?.toLocaleLowerCase());
+                if (!found) {
+                    currentItems.push({ value: currentFilters.value, display: currentFilters.display, $selected: true });
+                }
+                else {
+                    found.$selected = true;
                 }
             }
         }
@@ -14500,7 +14516,7 @@ class AggregationPanelComponent {
         this.searchText.set("");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: AggregationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: AggregationPanelComponent, isStandalone: true, selector: "AggregationPanel, aggregation-panel", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, isDate: { classPropertyName: "isDate", publicName: "isDate", isSignal: true, isRequired: false, transformFunction: null }, isEmpty: { classPropertyName: "isEmpty", publicName: "isEmpty", isSignal: true, isRequired: false, transformFunction: null }, aggregation: { classPropertyName: "aggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, hasFilters: { classPropertyName: "hasFilters", publicName: "hasFilters", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, isAllSelected: { classPropertyName: "isAllSelected", publicName: "isAllSelected", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, itemsLength: { classPropertyName: "itemsLength", publicName: "itemsLength", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, searchedItemsLength: { classPropertyName: "searchedItemsLength", publicName: "searchedItemsLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchText: "searchTextChange", cleared: "cleared", applied: "applied", allSelected: "allSelected", allUnselected: "allUnselected", loadedMore: "loadedMore" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<details\r\n  [attr.open]=\"expanded()\"\r\n  [attr.name]=\"id()\"\r\n  class=\"group space-y-2\"\r\n  (toggle)=\"onToggle($event)\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\r\n    [class.text-muted-foreground]=\"isEmpty()\"\r\n    class=\"m-0 mt-1 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\r\n      }\r\n      <span class=\"grow truncate\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (showFiltersCount() && filtersCount() > 0) {\r\n      <Badge size=\"xs\" class=\"ml-1\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    @if (!isCollapsed()) {\r\n      @if (hasFilters()) {\r\n        @let label = \"filters.clearFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); cleared.emit()\">\r\n          <filter-x-icon />\r\n        </button>\r\n      }\r\n      @if (selection()) {\r\n        @let label = \"filters.apply\" | transloco;\r\n        <button\r\n          variant=\"accent\"\r\n          size=\"sm\"\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); applied.emit()\">\r\n          <FilterIcon />\r\n          {{ label }}\r\n        </button>\r\n      }\r\n\r\n      @if (isAllSelected()) {\r\n        @let label = \"filters.unselectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); allUnselected.emit()\">\r\n          <square-check-icon />\r\n        </button>\r\n      } @else {\r\n        @let label = \"filters.selectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); allSelected.emit()\">\r\n          <square-icon />\r\n        </button>\r\n      }\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <icon-button\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n  </summary>\r\n\r\n  @if (aggregation()?.searchable && itemsLength() > 0) {\r\n    <InputGroup class=\"group/item mt-1\">\r\n      <input\r\n        #searchInput\r\n        input-group\r\n        id=\"aggregation-input-{{ aggregation()?.column }}\"\r\n        type=\"text\"\r\n        [attr.aria-label]=\"'search' | transloco\"\r\n        [attr.placeholder]=\"'search' | transloco\"\r\n        [(ngModel)]=\"searchText\"\r\n        class=\"mt-1\" />\r\n      <InputGroupAddon>\r\n        <SearchIcon\r\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\r\n      </InputGroupAddon>\r\n      <InputGroupAddon align=\"inline-end\" class=\"gap-0.5!\">\r\n        <icon-button\r\n          size=\"sm\"\r\n          [class]=\"\r\n            searchText().length > 0\r\n              ? 'rotate-90 cursor-pointer opacity-100 transition-[rotate,opacity] duration-500'\r\n              : 'pointer-events-none rotate-0 opacity-0 transition-[rotate,opacity] duration-500'\r\n          \"\r\n          aria-label=\"Clear search\"\r\n          [tabindex]=\"searchText().length > 0 ? 0 : -1\"\r\n          (keydown.enter)=\"clearSearch($event)\"\r\n          (click)=\"clearSearch($event)\">\r\n          <XMarkIcon />\r\n        </icon-button>\r\n        <ng-content select=\"[search-addon]\" />\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  }\r\n\r\n  <ng-content />\r\n\r\n  @if (hasMore() && searchedItemsLength() === 0) {\r\n    <button\r\n      class=\"mt-1 flex w-full justify-center\"\r\n      [attr.aria-label]=\"'loadMore' | transloco\"\r\n      (click)=\"loadedMore.emit()\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n</details>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size", "aria-label"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "component", type: SquareCheckIcon, selector: "square-check-icon, SquareCheckIcon", inputs: ["class"] }, { kind: "component", type: SquareIcon, selector: "square-icon, SquareIcon", inputs: ["class"] }, { kind: "component", type: XMarkIcon, selector: "XMarkIcon, xmark-icon, x-mark-icon", inputs: ["class"] }, { kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: AggregationPanelComponent, isStandalone: true, selector: "AggregationPanel, aggregation-panel", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, isDate: { classPropertyName: "isDate", publicName: "isDate", isSignal: true, isRequired: false, transformFunction: null }, isEmpty: { classPropertyName: "isEmpty", publicName: "isEmpty", isSignal: true, isRequired: false, transformFunction: null }, aggregation: { classPropertyName: "aggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, hasFilters: { classPropertyName: "hasFilters", publicName: "hasFilters", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, isAllSelected: { classPropertyName: "isAllSelected", publicName: "isAllSelected", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, itemsLength: { classPropertyName: "itemsLength", publicName: "itemsLength", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, searchedItemsLength: { classPropertyName: "searchedItemsLength", publicName: "searchedItemsLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchText: "searchTextChange", cleared: "cleared", applied: "applied", allSelected: "allSelected", allUnselected: "allUnselected", loadedMore: "loadedMore" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<details\n  [attr.open]=\"expanded()\"\n  [attr.name]=\"id()\"\n  class=\"group space-y-2\"\n  (toggle)=\"onToggle($event)\">\n  <summary\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n    [class.text-muted-foreground]=\"isEmpty()\"\n    class=\"m-0 mt-1 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @let icon = aggregation()?.icon;\n      @if (icon) {\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (showFiltersCount() && filtersCount() > 0) {\n      <Badge size=\"xs\" class=\"ml-1\">\n        {{ filtersCount() }}\n      </Badge>\n    }\n    @if (!isCollapsed()) {\n      @if (hasFilters()) {\n        @let label = \"filters.clearFilters\" | transloco;\n        <button\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); cleared.emit()\">\n          <filter-x-icon />\n        </button>\n      }\n      @if (selection()) {\n        @let label = \"filters.apply\" | transloco;\n        <button\n          variant=\"accent\"\n          size=\"sm\"\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); applied.emit()\">\n          <FilterIcon />\n          {{ label }}\n        </button>\n      }\n\n      @if (isAllSelected()) {\n        @let label = \"filters.unselectAllFilters\" | transloco;\n        <button\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); allUnselected.emit()\">\n          <square-check-icon />\n        </button>\n      } @else {\n        @let label = \"filters.selectAllFilters\" | transloco;\n        <button\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); allSelected.emit()\">\n          <square-icon />\n        </button>\n      }\n    }\n\n    @if (collapsible()) {\n      <icon-button\n        title=\"Open/Close\"\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n        <chevronright />\n        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n      </icon-button>\n    }\n  </summary>\n\n  @if (aggregation()?.searchable && itemsLength() > 0) {\n    <InputGroup class=\"group/item mt-3\">\n      <input\n        #searchInput\n        input-group\n        id=\"aggregation-input-{{ aggregation()?.column }}\"\n        type=\"text\"\n        [attr.aria-label]=\"'search' | transloco\"\n        [attr.placeholder]=\"'search' | transloco\"\n        [(ngModel)]=\"searchText\"\n        class=\"mt-1\" />\n      <InputGroupAddon>\n        <SearchIcon\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\n      </InputGroupAddon>\n      <InputGroupAddon align=\"inline-end\" class=\"gap-0.5!\">\n        <icon-button\n          size=\"sm\"\n          [class]=\"\n            searchText().length > 0\n              ? 'rotate-90 cursor-pointer opacity-100 transition-[rotate,opacity] duration-500'\n              : 'pointer-events-none rotate-0 opacity-0 transition-[rotate,opacity] duration-500'\n          \"\n          aria-label=\"Clear search\"\n          [tabindex]=\"searchText().length > 0 ? 0 : -1\"\n          (keydown.enter)=\"clearSearch($event)\"\n          (click)=\"clearSearch($event)\">\n          <XMarkIcon />\n        </icon-button>\n        <ng-content select=\"[search-addon]\" />\n      </InputGroupAddon>\n    </InputGroup>\n  }\n\n  <ng-content />\n\n  @if (hasMore() && searchedItemsLength() === 0) {\n    <button\n      class=\"mt-1 flex w-full justify-center\"\n      [attr.aria-label]=\"'loadMore' | transloco\"\n      (click)=\"loadedMore.emit()\">\n      {{ \"loadMore\" | transloco }}\n    </button>\n  }\n</details>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size", "aria-label"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "component", type: SquareCheckIcon, selector: "square-check-icon, SquareCheckIcon", inputs: ["class"] }, { kind: "component", type: SquareIcon, selector: "square-icon, SquareIcon", inputs: ["class"] }, { kind: "component", type: XMarkIcon, selector: "XMarkIcon, xmark-icon, x-mark-icon", inputs: ["class"] }, { kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: AggregationPanelComponent, decorators: [{
             type: Component,
@@ -14522,7 +14538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                         SquareIcon,
                         XMarkIcon,
                         IconButtonComponent,
-                    ], template: "<details\r\n  [attr.open]=\"expanded()\"\r\n  [attr.name]=\"id()\"\r\n  class=\"group space-y-2\"\r\n  (toggle)=\"onToggle($event)\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\r\n    [class.text-muted-foreground]=\"isEmpty()\"\r\n    class=\"m-0 mt-1 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\r\n      }\r\n      <span class=\"grow truncate\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (showFiltersCount() && filtersCount() > 0) {\r\n      <Badge size=\"xs\" class=\"ml-1\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    @if (!isCollapsed()) {\r\n      @if (hasFilters()) {\r\n        @let label = \"filters.clearFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); cleared.emit()\">\r\n          <filter-x-icon />\r\n        </button>\r\n      }\r\n      @if (selection()) {\r\n        @let label = \"filters.apply\" | transloco;\r\n        <button\r\n          variant=\"accent\"\r\n          size=\"sm\"\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); applied.emit()\">\r\n          <FilterIcon />\r\n          {{ label }}\r\n        </button>\r\n      }\r\n\r\n      @if (isAllSelected()) {\r\n        @let label = \"filters.unselectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); allUnselected.emit()\">\r\n          <square-check-icon />\r\n        </button>\r\n      } @else {\r\n        @let label = \"filters.selectAllFilters\" | transloco;\r\n        <button\r\n          variant=\"none\"\r\n          icon-button\r\n          [aria-label]=\"label\"\r\n          (click)=\"$event.stopPropagation(); allSelected.emit()\">\r\n          <square-icon />\r\n        </button>\r\n      }\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <icon-button\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n  </summary>\r\n\r\n  @if (aggregation()?.searchable && itemsLength() > 0) {\r\n    <InputGroup class=\"group/item mt-1\">\r\n      <input\r\n        #searchInput\r\n        input-group\r\n        id=\"aggregation-input-{{ aggregation()?.column }}\"\r\n        type=\"text\"\r\n        [attr.aria-label]=\"'search' | transloco\"\r\n        [attr.placeholder]=\"'search' | transloco\"\r\n        [(ngModel)]=\"searchText\"\r\n        class=\"mt-1\" />\r\n      <InputGroupAddon>\r\n        <SearchIcon\r\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\r\n      </InputGroupAddon>\r\n      <InputGroupAddon align=\"inline-end\" class=\"gap-0.5!\">\r\n        <icon-button\r\n          size=\"sm\"\r\n          [class]=\"\r\n            searchText().length > 0\r\n              ? 'rotate-90 cursor-pointer opacity-100 transition-[rotate,opacity] duration-500'\r\n              : 'pointer-events-none rotate-0 opacity-0 transition-[rotate,opacity] duration-500'\r\n          \"\r\n          aria-label=\"Clear search\"\r\n          [tabindex]=\"searchText().length > 0 ? 0 : -1\"\r\n          (keydown.enter)=\"clearSearch($event)\"\r\n          (click)=\"clearSearch($event)\">\r\n          <XMarkIcon />\r\n        </icon-button>\r\n        <ng-content select=\"[search-addon]\" />\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  }\r\n\r\n  <ng-content />\r\n\r\n  @if (hasMore() && searchedItemsLength() === 0) {\r\n    <button\r\n      class=\"mt-1 flex w-full justify-center\"\r\n      [attr.aria-label]=\"'loadMore' | transloco\"\r\n      (click)=\"loadedMore.emit()\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n</details>\r\n" }]
+                    ], template: "<details\n  [attr.open]=\"expanded()\"\n  [attr.name]=\"id()\"\n  class=\"group space-y-2\"\n  (toggle)=\"onToggle($event)\">\n  <summary\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n    [class.text-muted-foreground]=\"isEmpty()\"\n    class=\"m-0 mt-1 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @let icon = aggregation()?.icon;\n      @if (icon) {\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (showFiltersCount() && filtersCount() > 0) {\n      <Badge size=\"xs\" class=\"ml-1\">\n        {{ filtersCount() }}\n      </Badge>\n    }\n    @if (!isCollapsed()) {\n      @if (hasFilters()) {\n        @let label = \"filters.clearFilters\" | transloco;\n        <button\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); cleared.emit()\">\n          <filter-x-icon />\n        </button>\n      }\n      @if (selection()) {\n        @let label = \"filters.apply\" | transloco;\n        <button\n          variant=\"accent\"\n          size=\"sm\"\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); applied.emit()\">\n          <FilterIcon />\n          {{ label }}\n        </button>\n      }\n\n      @if (isAllSelected()) {\n        @let label = \"filters.unselectAllFilters\" | transloco;\n        <button\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); allUnselected.emit()\">\n          <square-check-icon />\n        </button>\n      } @else {\n        @let label = \"filters.selectAllFilters\" | transloco;\n        <button\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); allSelected.emit()\">\n          <square-icon />\n        </button>\n      }\n    }\n\n    @if (collapsible()) {\n      <icon-button\n        title=\"Open/Close\"\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n        <chevronright />\n        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n      </icon-button>\n    }\n  </summary>\n\n  @if (aggregation()?.searchable && itemsLength() > 0) {\n    <InputGroup class=\"group/item mt-3\">\n      <input\n        #searchInput\n        input-group\n        id=\"aggregation-input-{{ aggregation()?.column }}\"\n        type=\"text\"\n        [attr.aria-label]=\"'search' | transloco\"\n        [attr.placeholder]=\"'search' | transloco\"\n        [(ngModel)]=\"searchText\"\n        class=\"mt-1\" />\n      <InputGroupAddon>\n        <SearchIcon\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\n      </InputGroupAddon>\n      <InputGroupAddon align=\"inline-end\" class=\"gap-0.5!\">\n        <icon-button\n          size=\"sm\"\n          [class]=\"\n            searchText().length > 0\n              ? 'rotate-90 cursor-pointer opacity-100 transition-[rotate,opacity] duration-500'\n              : 'pointer-events-none rotate-0 opacity-0 transition-[rotate,opacity] duration-500'\n          \"\n          aria-label=\"Clear search\"\n          [tabindex]=\"searchText().length > 0 ? 0 : -1\"\n          (keydown.enter)=\"clearSearch($event)\"\n          (click)=\"clearSearch($event)\">\n          <XMarkIcon />\n        </icon-button>\n        <ng-content select=\"[search-addon]\" />\n      </InputGroupAddon>\n    </InputGroup>\n  }\n\n  <ng-content />\n\n  @if (hasMore() && searchedItemsLength() === 0) {\n    <button\n      class=\"mt-1 flex w-full justify-center\"\n      [attr.aria-label]=\"'loadMore' | transloco\"\n      (click)=\"loadedMore.emit()\">\n      {{ \"loadMore\" | transloco }}\n    </button>\n  }\n</details>\n" }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], isDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDate", required: false }] }], isEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEmpty", required: false }] }], aggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregation", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], filtersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersCount", required: false }] }], hasFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFilters", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], isAllSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAllSelected", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }], itemsLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsLength", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], searchedItemsLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchedItemsLength", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], applied: [{ type: i0.Output, args: ["applied"] }], allSelected: [{ type: i0.Output, args: ["allSelected"] }], allUnselected: [{ type: i0.Output, args: ["allUnselected"] }], loadedMore: [{ type: i0.Output, args: ["loadedMore"] }], searchInput: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }] } });
 
 class AggregationTreeComponent {
@@ -15598,6 +15614,15 @@ class AggregationListComponent {
         const filters = this.queryParamsStore.getFilter({ field: field ?? undefined, name: this.listItemName(item) });
         if (!filters)
             return false;
+        const agg = this.aggregation();
+        if (agg?.isDistribution) {
+            // Same reasoning as `injectAggregationBase.addCurrentFiltersToItems`: a distribution item's
+            // `value` is the full backend expression, not comparable to the applied filter's stored
+            // thresholds — flatten it and compare on `display` (or `value` without `valuesAreExpressions`).
+            const flattenedValues = flattenLegacyFilterValues([filters]);
+            const valueToSearch = agg.valuesAreExpressions ? item.display : item.value;
+            return flattenedValues.includes(valueToSearch?.toString() ?? "");
+        }
         const values = [item.value];
         return values.some(v => v === filters.value) || !!(filters.values?.length && filters.values.some((value) => values.some(v => v === value)));
     }
@@ -16238,6 +16263,13 @@ class FilterButtonComponent {
     column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
     position = input("bottom-start", ...(ngDevMode ? [{ debugName: "position" }] : []));
     offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    /**
+     * When true, forces the popover to stay at the exact `position()` placement,
+     * disabling floating-ui's automatic repositioning based on available viewport space.
+     *
+     * @default false
+     */
+    lockPosition = input(false, ...(ngDevMode ? [{ debugName: "lockPosition", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     expandedLevel = input(undefined, ...(ngDevMode ? [{ debugName: "expandedLevel", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     variant = signal("ghost", ...(ngDevMode ? [{ debugName: "variant" }] : []));
     filter = signal({
@@ -16303,7 +16335,7 @@ class FilterButtonComponent {
         return this.appStore.isDateColumn(column);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: FilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: FilterButtonComponent, isStandalone: true, selector: "filter-button, FilterButton", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class.hidden": "filter().hidden" } }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: FilterButtonComponent, isStandalone: true, selector: "filter-button, FilterButton", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, lockPosition: { classPropertyName: "lockPosition", publicName: "lockPosition", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class.hidden": "filter().hidden" } }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <Popover [disabled]="filter().disabled" class="group">
       <button
         [variant]="variant()"
@@ -16336,13 +16368,14 @@ class FilterButtonComponent {
         class="min-w-fit w-max max-w-[90vw]"
         [position]="position()"
         [offset]="offset()"
+        [lockPosition]="lockPosition()"
       >
       @if(contentRef.isVisible) {
         @let name = filter().name;
         @let column = filter().column;
         @if(name) {
           <Aggregation
-            class="w-60 [--height:19lh]"
+            class="w-60 [--scroll-height:19lh]"
             id="filter-{{ filter().column }}"
             [name]="name"
             [column]="column"
@@ -16358,7 +16391,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", "showCheckbox", "applyOnSelect", "expandedLevel", "syncUrl", "query", "aggregation", "selection", "emitOn", "type", "hideWhenEmpty"], 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" }] });
+  `, 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", "lockPosition"], exportAs: ["popoverContent"] }, { kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "showCheckbox", "applyOnSelect", "expandedLevel", "syncUrl", "query", "aggregation", "selection", "emitOn", "type", "hideWhenEmpty"], 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.29", ngImport: i0, type: FilterButtonComponent, decorators: [{
             type: Component,
@@ -16409,13 +16442,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
         class="min-w-fit w-max max-w-[90vw]"
         [position]="position()"
         [offset]="offset()"
+        [lockPosition]="lockPosition()"
       >
       @if(contentRef.isVisible) {
         @let name = filter().name;
         @let column = filter().column;
         @if(name) {
           <Aggregation
-            class="w-60 [--height:19lh]"
+            class="w-60 [--scroll-height:19lh]"
             id="filter-{{ filter().column }}"
             [name]="name"
             [column]="column"
@@ -16437,11 +16471,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                         role: "listitem"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], lockPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockPosition", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }] } });
 
 const FILTERS_BREAKPOINT = new InjectionToken('FILTERS_BREAKPOINT', { factory: () => 5 });
 
+/**
+ * Below this many overflow filters, the search input adds friction without
+ * helping — scanning a handful of accordion headers is already fast.
+ */
+const SEARCH_THRESHOLD = 6;
 class MoreComponent {
+    SEARCH_THRESHOLD = SEARCH_THRESHOLD;
     count = input(2, ...(ngDevMode ? [{ debugName: "count" }] : []));
     includedFilters = input([], ...(ngDevMode ? [{ debugName: "includedFilters" }] : []));
     excludedFilters = input([], ...(ngDevMode ? [{ debugName: "excludedFilters" }] : []));
@@ -16457,6 +16497,7 @@ class MoreComponent {
      */
     hideWhenEmpty = input(false, ...(ngDevMode ? [{ debugName: "hideWhenEmpty", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     aggregationsService = inject(AggregationsService);
+    searchText = model("", ...(ngDevMode ? [{ debugName: "searchText" }] : []));
     /**
      * The overflow filters rendered as accordions: the authorized filters beyond the
      * first `count` (which are already shown in the bar).
@@ -16469,49 +16510,158 @@ class MoreComponent {
     filters = computed(() => this.aggregationsService
         .getAuthorizedFilters(this.aggregations(), this.includedFilters(), this.excludedFilters(), this.homepage())
         .toSpliced(0, this.count()), ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    /** {@link filters}, narrowed to those matching {@link searchText} (case-insensitive, by name). */
+    filteredFilters = computed(() => {
+        const query = this.searchText().trim().toLowerCase();
+        if (!query)
+            return this.filters();
+        return this.filters().filter(filter => filter.name.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filteredFilters" }] : []));
+    clearSearch(e) {
+        e.stopImmediatePropagation();
+        this.searchText.set("");
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: MoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: MoreComponent, isStandalone: true, selector: "more, More", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, includedFilters: { classPropertyName: "includedFilters", publicName: "includedFilters", isSignal: true, isRequired: false, transformFunction: null }, excludedFilters: { classPropertyName: "excludedFilters", publicName: "excludedFilters", isSignal: true, isRequired: false, transformFunction: null }, aggregations: { classPropertyName: "aggregations", publicName: "aggregations", isSignal: true, isRequired: false, transformFunction: null }, homepage: { classPropertyName: "homepage", publicName: "homepage", isSignal: true, isRequired: false, transformFunction: null }, hideWhenEmpty: { classPropertyName: "hideWhenEmpty", publicName: "hideWhenEmpty", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "divide-y divide-muted-foreground/18" }, ngImport: i0, template: `
-    @for (filter of filters(); track $index) {
-      <Aggregation
-        class="w-60 max-w-80 px-1 [--height:15lh]"
-        id="more-filters"
-        [attr.title]="'filters.openFilter' | transloco: { filter: filter.name }"
-        showFiltersCount
-        [collapsible]="true"
-        [collapsed]="true"
-        [hideWhenEmpty]="hideWhenEmpty()"
-        [name]="filter.name"
-        [column]="filter.column" />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: MoreComponent, isStandalone: true, selector: "more, More", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, includedFilters: { classPropertyName: "includedFilters", publicName: "includedFilters", isSignal: true, isRequired: false, transformFunction: null }, excludedFilters: { classPropertyName: "excludedFilters", publicName: "excludedFilters", isSignal: true, isRequired: false, transformFunction: null }, aggregations: { classPropertyName: "aggregations", publicName: "aggregations", isSignal: true, isRequired: false, transformFunction: null }, homepage: { classPropertyName: "homepage", publicName: "homepage", isSignal: true, isRequired: false, transformFunction: null }, hideWhenEmpty: { classPropertyName: "hideWhenEmpty", publicName: "hideWhenEmpty", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchText: "searchTextChange" }, host: { classAttribute: "scrollbar-thin" }, ngImport: i0, template: `
+    @if (filters().length > SEARCH_THRESHOLD) {
+      <div class="sticky top-0 z-10 bg-menu-bg pb-3 shadow-[0_-1px_0_0_var(--color-menu-bg)]">
+        <InputGroup>
+          <input
+            input-group
+            type="text"
+            [attr.aria-label]="'filters.searchFilters' | transloco"
+            [attr.placeholder]="'filters.searchFilters' | transloco"
+            [(ngModel)]="searchText" />
+          <InputGroupAddon>
+            <SearchIcon class="text-foreground size-4" />
+          </InputGroupAddon>
+          <InputGroupAddon align="inline-end" class="gap-0.5!">
+            <icon-button
+              size="sm"
+              [class]="
+                searchText().length > 0
+                  ? 'opacity-100 transition-opacity duration-500'
+                  : 'pointer-events-none opacity-0 transition-opacity duration-500'
+              "
+              aria-label="Clear search"
+              [tabindex]="searchText().length > 0 ? 0 : -1"
+              (keydown.enter)="clearSearch($event)"
+              (click)="clearSearch($event)">
+              <XMarkIcon />
+            </icon-button>
+          </InputGroupAddon>
+        </InputGroup>
+      </div>
     }
-  `, 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", "applyOnSelect", "expandedLevel", "syncUrl", "query", "aggregation", "selection", "emitOn", "type", "hideWhenEmpty"], outputs: ["onSelect", "onApply", "onClear", "selectionChange", "filtersChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+
+    <div class="divide-y divide-muted-foreground/18">
+      @for (filter of filteredFilters(); track filter.name) {
+        <Aggregation
+          class="w-full min-w-60 px-1 [--scroll-height:15lh]"
+          id="more-filters"
+          [attr.title]="'filters.openFilter' | transloco: { filter: filter.name }"
+          showFiltersCount
+          [collapsible]="true"
+          [collapsed]="true"
+          [hideWhenEmpty]="hideWhenEmpty()"
+          [name]="filter.name"
+          [column]="filter.column" />
+      } @empty {
+        @if (searchText().trim().length > 0) {
+          <p class="text-muted-foreground px-2 py-4 text-center text-sm">{{ "filters.noFilterMatch" | transloco }}</p>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "showCheckbox", "applyOnSelect", "expandedLevel", "syncUrl", "query", "aggregation", "selection", "emitOn", "type", "hideWhenEmpty"], outputs: ["onSelect", "onApply", "onClear", "selectionChange", "filtersChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: XMarkIcon, selector: "XMarkIcon, xmark-icon, x-mark-icon", inputs: ["class"] }, { kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: MoreComponent, decorators: [{
             type: Component,
-            args: [{ selector: "more, More", standalone: true, imports: [AggregationComponent, TranslocoPipe], template: `
-    @for (filter of filters(); track $index) {
-      <Aggregation
-        class="w-60 max-w-80 px-1 [--height:15lh]"
-        id="more-filters"
-        [attr.title]="'filters.openFilter' | transloco: { filter: filter.name }"
-        showFiltersCount
-        [collapsible]="true"
-        [collapsed]="true"
-        [hideWhenEmpty]="hideWhenEmpty()"
-        [name]="filter.name"
-        [column]="filter.column" />
+            args: [{
+                    selector: "more, More",
+                    standalone: true,
+                    imports: [
+                        AggregationComponent,
+                        TranslocoPipe,
+                        FormsModule,
+                        InputGroupComponent,
+                        InputGroupInput,
+                        InputGroupAddonComponent,
+                        SearchIcon,
+                        XMarkIcon,
+                        IconButtonComponent
+                    ],
+                    template: `
+    @if (filters().length > SEARCH_THRESHOLD) {
+      <div class="sticky top-0 z-10 bg-menu-bg pb-3 shadow-[0_-1px_0_0_var(--color-menu-bg)]">
+        <InputGroup>
+          <input
+            input-group
+            type="text"
+            [attr.aria-label]="'filters.searchFilters' | transloco"
+            [attr.placeholder]="'filters.searchFilters' | transloco"
+            [(ngModel)]="searchText" />
+          <InputGroupAddon>
+            <SearchIcon class="text-foreground size-4" />
+          </InputGroupAddon>
+          <InputGroupAddon align="inline-end" class="gap-0.5!">
+            <icon-button
+              size="sm"
+              [class]="
+                searchText().length > 0
+                  ? 'opacity-100 transition-opacity duration-500'
+                  : 'pointer-events-none opacity-0 transition-opacity duration-500'
+              "
+              aria-label="Clear search"
+              [tabindex]="searchText().length > 0 ? 0 : -1"
+              (keydown.enter)="clearSearch($event)"
+              (click)="clearSearch($event)">
+              <XMarkIcon />
+            </icon-button>
+          </InputGroupAddon>
+        </InputGroup>
+      </div>
     }
-  `, host: {
-                        class: "divide-y divide-muted-foreground/18"
-                    }, styles: [":host{scrollbar-width:none}\n"] }]
-        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], includedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "includedFilters", required: false }] }], excludedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedFilters", required: false }] }], aggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregations", required: false }] }], homepage: [{ type: i0.Input, args: [{ isSignal: true, alias: "homepage", required: false }] }], hideWhenEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenEmpty", required: false }] }] } });
+
+    <div class="divide-y divide-muted-foreground/18">
+      @for (filter of filteredFilters(); track filter.name) {
+        <Aggregation
+          class="w-full min-w-60 px-1 [--scroll-height:15lh]"
+          id="more-filters"
+          [attr.title]="'filters.openFilter' | transloco: { filter: filter.name }"
+          showFiltersCount
+          [collapsible]="true"
+          [collapsed]="true"
+          [hideWhenEmpty]="hideWhenEmpty()"
+          [name]="filter.name"
+          [column]="filter.column" />
+      } @empty {
+        @if (searchText().trim().length > 0) {
+          <p class="text-muted-foreground px-2 py-4 text-center text-sm">{{ "filters.noFilterMatch" | transloco }}</p>
+        }
+      }
+    </div>
+  `,
+                    host: {
+                        class: "scrollbar-thin"
+                    }
+                }]
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], includedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "includedFilters", required: false }] }], excludedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedFilters", required: false }] }], aggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregations", required: false }] }], homepage: [{ type: i0.Input, args: [{ isSignal: true, alias: "homepage", required: false }] }], hideWhenEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenEmpty", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
 
 class MoreButtonComponent {
     appStore = inject(AppStore);
     queryParamsStore = inject(QueryParamsStore);
     nativeElement = inject(ElementRef).nativeElement;
+    breakpointObserver = inject(BreakpointObserverService);
     aggregationsService = inject(AggregationsService);
     count = input(2, ...(ngDevMode ? [{ debugName: "count", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     position = input("bottom-end", ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /**
+     * When true, forces the popover to stay at the exact `position()` placement,
+     * disabling floating-ui's automatic repositioning based on available viewport space.
+     *
+     * @default false
+     */
+    lockPosition = input(false, ...(ngDevMode ? [{ debugName: "lockPosition", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     includedFilters = input([], ...(ngDevMode ? [{ debugName: "includedFilters" }] : []));
     excludedFilters = input([], ...(ngDevMode ? [{ debugName: "excludedFilters" }] : []));
     aggregations = input(...(ngDevMode ? [undefined, { debugName: "aggregations" }] : []));
@@ -16524,79 +16674,201 @@ class MoreButtonComponent {
      * @default false
      */
     hideWhenEmpty = input(false, ...(ngDevMode ? [{ debugName: "hideWhenEmpty", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-    totalFiltersCount = computed(() => {
-        const count = this.count();
-        const authorizedFilters = this.aggregationsService
-            .getAuthorizedFilters(this.aggregations(), this.includedFilters(), this.excludedFilters(), this.homepage())
-            .toSpliced(0, count);
-        const total = authorizedFilters.reduce((acc, filter) => {
-            const f = this.queryParamsStore.getFilter(filter);
-            acc += f?.count || 0;
-            return acc;
-        }, 0);
-        return total;
-    }, ...(ngDevMode ? [{ debugName: "totalFiltersCount" }] : []));
+    /**
+     * Above this many overflow filters, the desktop Popover escalates to a modal
+     * Dialog instead of an anchored popover — useful once there are too many facets
+     * to browse comfortably in an anchored popover. Left unset (the default), the
+     * Popover always shows every overflow facet, however many there are, adapting
+     * its own height to the available space (see `PopoverContentComponent`'s
+     * `size()` middleware) rather than escalating. A commonly-used value is `6`.
+     *
+     * @default undefined — never escalate to Dialog
+     */
+    enrichedThreshold = input(...(ngDevMode ? [undefined, { debugName: "enrichedThreshold" }] : []));
+    /** Mobile drawer open state — the desktop Popover/Dialog manage their own. */
+    sheetOpen = signal(false, ...(ngDevMode ? [{ debugName: "sheetOpen" }] : []));
+    /** The inline enriched Dialog — `<dialog #dialogRefEl>` binds a `DialogComponent` instance to the ref by default. */
+    dialogRef = viewChild("dialogRefEl", ...(ngDevMode ? [{ debugName: "dialogRef" }] : []));
+    /** The authorized filters beyond the first `count` already shown in the bar. */
+    overflowFilters = computed(() => this.aggregationsService
+        .getAuthorizedFilters(this.aggregations(), this.includedFilters(), this.excludedFilters(), this.homepage())
+        .toSpliced(0, this.count()), ...(ngDevMode ? [{ debugName: "overflowFilters" }] : []));
+    totalFiltersCount = computed(() => this.overflowFilters().reduce((acc, filter) => {
+        const f = this.queryParamsStore.getFilter(filter);
+        acc += f?.count || 0;
+        return acc;
+    }, 0), ...(ngDevMode ? [{ debugName: "totalFiltersCount" }] : []));
+    /**
+     * Above {@link enrichedThreshold} overflow filters, the popover escalates to a modal
+     * Dialog. Always `false` while `enrichedThreshold` is unset — the Popover then shows
+     * every overflow facet regardless of count.
+     */
+    isEnriched = computed(() => {
+        const threshold = this.enrichedThreshold();
+        return threshold !== undefined && this.overflowFilters().length > threshold;
+    }, ...(ngDevMode ? [{ debugName: "isEnriched" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: MoreButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: MoreButtonComponent, isStandalone: true, selector: "more-button, MoreButton", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, includedFilters: { classPropertyName: "includedFilters", publicName: "includedFilters", isSignal: true, isRequired: false, transformFunction: null }, excludedFilters: { classPropertyName: "excludedFilters", publicName: "excludedFilters", isSignal: true, isRequired: false, transformFunction: null }, aggregations: { classPropertyName: "aggregations", publicName: "aggregations", isSignal: true, isRequired: false, transformFunction: null }, homepage: { classPropertyName: "homepage", publicName: "homepage", isSignal: true, isRequired: false, transformFunction: null }, hideWhenEmpty: { classPropertyName: "hideWhenEmpty", publicName: "hideWhenEmpty", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <Popover class="group/more">
-      <button
-        variant="ghost"
-        class="group-open/more:border-foreground/18 gap-1 truncate font-semibold group-open/more:border"
-        aria-label="more filters">
-        <list-filter-icon aria-hidden="true" />
-        <span sr-only class="hidden sm:inline">{{ 'filters.moreFilters' | transloco }}</span>
-
-        @if (totalFiltersCount() > 0) {
-          <Badge size="xs">
-            {{ totalFiltersCount() }}
-          </Badge>
-        }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: MoreButtonComponent, isStandalone: true, selector: "more-button, MoreButton", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, lockPosition: { classPropertyName: "lockPosition", publicName: "lockPosition", isSignal: true, isRequired: false, transformFunction: null }, includedFilters: { classPropertyName: "includedFilters", publicName: "includedFilters", isSignal: true, isRequired: false, transformFunction: null }, excludedFilters: { classPropertyName: "excludedFilters", publicName: "excludedFilters", isSignal: true, isRequired: false, transformFunction: null }, aggregations: { classPropertyName: "aggregations", publicName: "aggregations", isSignal: true, isRequired: false, transformFunction: null }, homepage: { classPropertyName: "homepage", publicName: "homepage", isSignal: true, isRequired: false, transformFunction: null }, hideWhenEmpty: { classPropertyName: "hideWhenEmpty", publicName: "hideWhenEmpty", isSignal: true, isRequired: false, transformFunction: null }, enrichedThreshold: { classPropertyName: "enrichedThreshold", publicName: "enrichedThreshold", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialogRefEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-template #trigger>
+      <list-filter-icon aria-hidden="true" />
+      <span sr-only class="hidden sm:inline">{{ 'filters.moreFilters' | transloco }}</span>
+
+      @if (totalFiltersCount() > 0) {
+        <Badge size="xs">
+          {{ totalFiltersCount() }}
+        </Badge>
+      }
+    </ng-template>
+
+    @if (breakpointObserver.isMobile()) {
+      <button variant="ghost" class="gap-1 truncate font-semibold" aria-label="more filters" (click)="sheetOpen.set(true)">
+        <ng-container *ngTemplateOutlet="trigger" />
       </button>
 
-      <PopoverContent #contentRef="popoverContent" [position]="position()" class="min-w-max">
-        @if(contentRef.isVisible) {
-        <More [count]="count()" [includedFilters]="includedFilters()" [excludedFilters]="excludedFilters()" [aggregations]="aggregations()" [homepage]="homepage()" [hideWhenEmpty]="hideWhenEmpty()" class="block h-full w-full max-w-80 [--height:55vh] min-w-40 overflow-hidden" />
-        }
-      </PopoverContent>
-    </Popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: PopoverComponent, selector: "popover, Popover", inputs: ["disabled", "closeOnScroll"], outputs: ["closed"] }, { kind: "directive", type: PopoverContentComponent, selector: "popover-content, PopoverContent, popovercontent", inputs: ["class", "position", "keepOpen", "offset", "strategy"], exportAs: ["popoverContent"] }, { kind: "component", type: MoreComponent, selector: "more, More", inputs: ["count", "includedFilters", "excludedFilters", "aggregations", "homepage", "hideWhenEmpty"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size", "aria-label"] }, { kind: "component", type: ListFilterIcon, selector: "list-filter-icon, ListFilterIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+      <sheet [open]="sheetOpen()" (openChange)="sheetOpen.set($event)" side="bottom" class="max-w-none">
+        <sheet-header>
+          <sheet-title>{{ 'filters.moreFilters' | transloco }}</sheet-title>
+        </sheet-header>
+        <div class="max-h-[75vh] overflow-y-auto overscroll-contain">
+          <More [count]="count()" [includedFilters]="includedFilters()" [excludedFilters]="excludedFilters()" [aggregations]="aggregations()" [homepage]="homepage()" [hideWhenEmpty]="hideWhenEmpty()" class="block w-full" />
+        </div>
+      </sheet>
+    } @else if (isEnriched()) {
+      <button variant="ghost" class="gap-1 truncate font-semibold" aria-label="more filters" (click)="dialogRef()?.showModal()">
+        <ng-container *ngTemplateOutlet="trigger" />
+      </button>
+
+      <dialog #dialogRefEl>
+        <DialogContent class="sm:max-w-lg rounded-(--radius-xl,1rem)">
+          <DialogHeader>
+            <DialogTitle>{{ 'filters.moreFilters' | transloco }}</DialogTitle>
+          </DialogHeader>
+          <div class="max-h-[60vh] overflow-y-auto overscroll-contain">
+            <More [count]="count()" [includedFilters]="includedFilters()" [excludedFilters]="excludedFilters()" [aggregations]="aggregations()" [homepage]="homepage()" [hideWhenEmpty]="hideWhenEmpty()" class="block w-full" />
+          </div>
+        </DialogContent>
+      </dialog>
+    } @else {
+      <Popover class="group/more">
+        <button
+          variant="ghost"
+          class="group-open/more:border-foreground/18 gap-1 truncate font-semibold group-open/more:border"
+          aria-label="more filters">
+          <ng-container *ngTemplateOutlet="trigger" />
+        </button>
+
+        <PopoverContent #contentRef="popoverContent" [position]="position()" [lockPosition]="lockPosition()" class="min-w-max max-w-80 min-w-40 rounded-(--radius-xl,1rem) p-5">
+          @if(contentRef.isVisible) {
+          <div class="max-h-[calc(var(--popover-available-height,55vh)_-_2.5rem)] overflow-y-auto overscroll-contain">
+            <More [count]="count()" [includedFilters]="includedFilters()" [excludedFilters]="excludedFilters()" [aggregations]="aggregations()" [homepage]="homepage()" [hideWhenEmpty]="hideWhenEmpty()" class="block w-full" />
+          </div>
+          }
+        </PopoverContent>
+      </Popover>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "lockPosition"], exportAs: ["popoverContent"] }, { kind: "component", type: MoreComponent, selector: "more, More", inputs: ["count", "includedFilters", "excludedFilters", "aggregations", "homepage", "hideWhenEmpty", "searchText"], outputs: ["searchTextChange"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size", "aria-label"] }, { kind: "component", type: ListFilterIcon, selector: "list-filter-icon, ListFilterIcon", inputs: ["class"] }, { kind: "component", type: SheetComponent, selector: "sheet", inputs: ["open", "side", "class", "showCloseButton"], outputs: ["openChange"] }, { kind: "directive", type: SheetHeaderComponent, selector: "sheet-header", inputs: ["class"] }, { kind: "directive", type: SheetTitleComponent, selector: "sheet-title", inputs: ["class"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: MoreButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "more-button, MoreButton",
                     standalone: true,
-                    imports: [ButtonComponent, PopoverComponent, PopoverContentComponent, TranslocoPipe, MoreComponent, BadgeComponent, ListFilterIcon],
+                    imports: [
+                        NgTemplateOutlet,
+                        ButtonComponent,
+                        PopoverComponent,
+                        PopoverContentComponent,
+                        TranslocoPipe,
+                        MoreComponent,
+                        BadgeComponent,
+                        ListFilterIcon,
+                        SheetComponent,
+                        SheetHeaderComponent,
+                        SheetTitleComponent,
+                        DialogComponent,
+                        DialogContentComponent,
+                        DialogHeaderComponent,
+                        DialogTitleComponent
+                    ],
                     template: `
-    <Popover class="group/more">
-      <button
-        variant="ghost"
-        class="group-open/more:border-foreground/18 gap-1 truncate font-semibold group-open/more:border"
-        aria-label="more filters">
-        <list-filter-icon aria-hidden="true" />
-        <span sr-only class="hidden sm:inline">{{ 'filters.moreFilters' | transloco }}</span>
-
-        @if (totalFiltersCount() > 0) {
-          <Badge size="xs">
-            {{ totalFiltersCount() }}
-          </Badge>
-        }
+    <ng-template #trigger>
+      <list-filter-icon aria-hidden="true" />
+      <span sr-only class="hidden sm:inline">{{ 'filters.moreFilters' | transloco }}</span>
+
+      @if (totalFiltersCount() > 0) {
+        <Badge size="xs">
+          {{ totalFiltersCount() }}
+        </Badge>
+      }
+    </ng-template>
+
+    @if (breakpointObserver.isMobile()) {
+      <button variant="ghost" class="gap-1 truncate font-semibold" aria-label="more filters" (click)="sheetOpen.set(true)">
+        <ng-container *ngTemplateOutlet="trigger" />
       </button>
 
-      <PopoverContent #contentRef="popoverContent" [position]="position()" class="min-w-max">
-        @if(contentRef.isVisible) {
-        <More [count]="count()" [includedFilters]="includedFilters()" [excludedFilters]="excludedFilters()" [aggregations]="aggregations()" [homepage]="homepage()" [hideWhenEmpty]="hideWhenEmpty()" class="block h-full w-full max-w-80 [--height:55vh] min-w-40 overflow-hidden" />
-        }
-      </PopoverContent>
-    </Popover>
-  `
+      <sheet [open]="sheetOpen()" (openChange)="sheetOpen.set($event)" side="bottom" class="max-w-none">
+        <sheet-header>
+          <sheet-title>{{ 'filters.moreFilters' | transloco }}</sheet-title>
+        </sheet-header>
+        <div class="max-h-[75vh] overflow-y-auto overscroll-contain">
+          <More [count]="count()" [includedFilters]="includedFilters()" [excludedFilters]="excludedFilters()" [aggregations]="aggregations()" [homepage]="homepage()" [hideWhenEmpty]="hideWhenEmpty()" class="block w-full" />
+        </div>
+      </sheet>
+    } @else if (isEnriched()) {
+      <button variant="ghost" class="gap-1 truncate font-semibold" aria-label="more filters" (click)="dialogRef()?.showModal()">
+        <ng-container *ngTemplateOutlet="trigger" />
+      </button>
+
+      <dialog #dialogRefEl>
+        <DialogContent class="sm:max-w-lg rounded-(--radius-xl,1rem)">
+          <DialogHeader>
+            <DialogTitle>{{ 'filters.moreFilters' | transloco }}</DialogTitle>
+          </DialogHeader>
+          <div class="max-h-[60vh] overflow-y-auto overscroll-contain">
+            <More [count]="count()" [includedFilters]="includedFilters()" [excludedFilters]="excludedFilters()" [aggregations]="aggregations()" [homepage]="homepage()" [hideWhenEmpty]="hideWhenEmpty()" class="block w-full" />
+          </div>
+        </DialogContent>
+      </dialog>
+    } @else {
+      <Popover class="group/more">
+        <button
+          variant="ghost"
+          class="group-open/more:border-foreground/18 gap-1 truncate font-semibold group-open/more:border"
+          aria-label="more filters">
+          <ng-container *ngTemplateOutlet="trigger" />
+        </button>
+
+        <PopoverContent #contentRef="popoverContent" [position]="position()" [lockPosition]="lockPosition()" class="min-w-max max-w-80 min-w-40 rounded-(--radius-xl,1rem) p-5">
+          @if(contentRef.isVisible) {
+          <div class="max-h-[calc(var(--popover-available-height,55vh)_-_2.5rem)] overflow-y-auto overscroll-contain">
+            <More [count]="count()" [includedFilters]="includedFilters()" [excludedFilters]="excludedFilters()" [aggregations]="aggregations()" [homepage]="homepage()" [hideWhenEmpty]="hideWhenEmpty()" class="block w-full" />
+          </div>
+          }
+        </PopoverContent>
+      </Popover>
+    }
+  `,
+                    // Self-registers the scope so <more-button> resolves its own translations when used
+                    // standalone, outside <filters-bar> (which already registers it too — harmless overlap).
+                    providers: [provideTranslocoScope("filters")]
                 }]
-        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], includedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "includedFilters", required: false }] }], excludedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedFilters", required: false }] }], aggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregations", required: false }] }], homepage: [{ type: i0.Input, args: [{ isSignal: true, alias: "homepage", required: false }] }], hideWhenEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenEmpty", required: false }] }] } });
+        }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], lockPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockPosition", required: false }] }], includedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "includedFilters", required: false }] }], excludedFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludedFilters", required: false }] }], aggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregations", required: false }] }], homepage: [{ type: i0.Input, args: [{ isSignal: true, alias: "homepage", required: false }] }], hideWhenEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenEmpty", required: false }] }], enrichedThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "enrichedThreshold", required: false }] }], dialogRef: [{ type: i0.ViewChild, args: ["dialogRefEl", { isSignal: true }] }] } });
 
 class FiltersBarComponent {
     class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
     position = input("bottom-start", ...(ngDevMode ? [{ debugName: "position" }] : []));
     morePosition = input("bottom-end", ...(ngDevMode ? [{ debugName: "morePosition" }] : []));
+    /**
+     * When true, forces every popover (filter buttons and the "more filters"
+     * button) to stay at its exact `position()`/`morePosition()` placement,
+     * disabling floating-ui's automatic repositioning based on available
+     * viewport space. Relayed as-is to each `<FilterButton [lockPosition]>`
+     * and to `<MoreButton [lockPosition]>`.
+     *
+     * @default false
+     */
+    lockPosition = input(false, ...(ngDevMode ? [{ debugName: "lockPosition", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     aggregations = input(...(ngDevMode ? [undefined, { debugName: "aggregations" }] : []));
     /**
      * Filters that should be included from the filters bar.
@@ -16700,7 +16972,7 @@ class FiltersBarComponent {
     allAuthorizedFilters = computed(() => {
         return this.aggregationsService
             .getAuthorizedFilters(this.aggregations(), this.includeFilters(), this.excludeFilters(), this.homepage())
-            .map((f) => ({ name: f.name, column: f.column }));
+            .map(f => ({ name: f.name, column: f.column }));
     }, ...(ngDevMode ? [{ debugName: "allAuthorizedFilters" }] : []));
     /**
      * Computes the list of additional filters that can be displayed in the "more filters" popover.
@@ -16717,7 +16989,7 @@ class FiltersBarComponent {
     hasMoreFilters = computed(() => {
         const moreFiltersAggregations = this.allAuthorizedFilters()
             .toSpliced(0, this.visibleFiltersCount())
-            .map((f) => this.aggregationsStore.getAggregation(f.column, "column"));
+            .map(f => this.aggregationsStore.getAggregation(f.column, "column"));
         return moreFiltersAggregations;
     }, ...(ngDevMode ? [{ debugName: "hasMoreFilters" }] : []));
     /**
@@ -16739,9 +17011,7 @@ class FiltersBarComponent {
      */
     hasCappedFilters = computed(() => this.allAuthorizedFilters().length > this.filtersCount(), ...(ngDevMode ? [{ debugName: "hasCappedFilters" }] : []));
     constructor() {
-        this.transloco.events$
-            .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(100))
-            .subscribe(() => this.overflowManagerRef()?.countItems());
+        this.transloco.events$.pipe(takeUntilDestroyed(this.destroyRef), debounceTime(100)).subscribe(() => this.overflowManagerRef()?.countItems());
         // Recount the overflow whenever the applied filters or basket change (e.g.
         // a filter modified or removed from the "more filters" popover). A
         // FilterButton hidden by the overflow manager (display: none) emits no
@@ -16800,12 +17070,12 @@ class FiltersBarComponent {
      * @param event - The mouse event triggered by the user's click.
      */
     handleClick(event) {
-        this.filterButtonRefs().forEach((ref) => {
+        this.filterButtonRefs().forEach(ref => {
             ref.popoverRef()?.onClick(event);
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: FiltersBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: FiltersBarComponent, isStandalone: true, selector: "filters-bar, FiltersBar, filtersbar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, morePosition: { classPropertyName: "morePosition", publicName: "morePosition", isSignal: true, isRequired: false, transformFunction: null }, aggregations: { classPropertyName: "aggregations", publicName: "aggregations", isSignal: true, isRequired: false, transformFunction: null }, includeFilters: { classPropertyName: "includeFilters", publicName: "includeFilters", isSignal: true, isRequired: false, transformFunction: null }, excludeFilters: { classPropertyName: "excludeFilters", publicName: "excludeFilters", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, showMoreFiltersButton: { classPropertyName: "showMoreFiltersButton", publicName: "showMoreFiltersButton", isSignal: true, isRequired: false, transformFunction: null }, homepage: { classPropertyName: "homepage", publicName: "homepage", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClearFilters: "onClearFilters", onClearBasket: "onClearBasket" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "cn('block relative min-w-0', class())" } }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "moreButtonRef", first: true, predicate: MoreButtonComponent, descendants: true, isSignal: true }, { propertyName: "filterButtonRefs", predicate: FilterButtonComponent, descendants: true, isSignal: true }, { propertyName: "overflowManagerRef", first: true, predicate: OverflowManagerDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: FiltersBarComponent, isStandalone: true, selector: "filters-bar, FiltersBar, filtersbar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, morePosition: { classPropertyName: "morePosition", publicName: "morePosition", isSignal: true, isRequired: false, transformFunction: null }, lockPosition: { classPropertyName: "lockPosition", publicName: "lockPosition", isSignal: true, isRequired: false, transformFunction: null }, aggregations: { classPropertyName: "aggregations", publicName: "aggregations", isSignal: true, isRequired: false, transformFunction: null }, includeFilters: { classPropertyName: "includeFilters", publicName: "includeFilters", isSignal: true, isRequired: false, transformFunction: null }, excludeFilters: { classPropertyName: "excludeFilters", publicName: "excludeFilters", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, showMoreFiltersButton: { classPropertyName: "showMoreFiltersButton", publicName: "showMoreFiltersButton", isSignal: true, isRequired: false, transformFunction: null }, homepage: { classPropertyName: "homepage", publicName: "homepage", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClearFilters: "onClearFilters", onClearBasket: "onClearBasket" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "cn('block relative min-w-0', class())" } }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "moreButtonRef", first: true, predicate: MoreButtonComponent, descendants: true, isSignal: true }, { propertyName: "filterButtonRefs", predicate: FilterButtonComponent, descendants: true, isSignal: true }, { propertyName: "overflowManagerRef", first: true, predicate: OverflowManagerDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div overflowManager [direction]="direction()" [reserveStop]="hasCappedFilters()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
       @if (hasFilters()) {
         <button
@@ -16839,7 +17109,7 @@ class FiltersBarComponent {
         role="list"
         aria-label="Filters list">
         @for (filter of authorizedFilters(); track filter.name) {
-          <FilterButton class="max-w-60" overflowItem [name]="filter.name" [column]="filter.column" [position]="position()" [offset]="offset()" [expandedLevel]="expandedLevel()" />
+          <FilterButton class="max-w-60" overflowItem [name]="filter.name" [column]="filter.column" [position]="position()" [lockPosition]="lockPosition()" [offset]="offset()" [expandedLevel]="expandedLevel()" />
         }
       </div>
 
@@ -16851,6 +17121,7 @@ class FiltersBarComponent {
           role="listitem"
           [count]="visibleFiltersCount()"
           [position]="morePosition()"
+          [lockPosition]="lockPosition()"
           [includedFilters]="includeFilters()"
           [excludedFilters]="excludeFilters()"
           [aggregations]="aggregations()"
@@ -16858,7 +17129,7 @@ class FiltersBarComponent {
       }
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: MoreButtonComponent, selector: "more-button, MoreButton", inputs: ["count", "position", "includedFilters", "excludedFilters", "aggregations", "homepage", "hideWhenEmpty"] }, { kind: "component", type: FilterButtonComponent, selector: "filter-button, FilterButton", inputs: ["name", "column", "position", "offset", "expandedLevel"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction", "reserveStop"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "component", type: TrashCanIcon, selector: "trash-can-icon, TrashCanIcon", inputs: ["class"] }, { kind: "component", type: InboxIcon, selector: "inbox-icon, InboxIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: MoreButtonComponent, selector: "more-button, MoreButton", inputs: ["count", "position", "lockPosition", "includedFilters", "excludedFilters", "aggregations", "homepage", "hideWhenEmpty", "enrichedThreshold"] }, { kind: "component", type: FilterButtonComponent, selector: "filter-button, FilterButton", inputs: ["name", "column", "position", "offset", "lockPosition", "expandedLevel"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction", "reserveStop"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "component", type: TrashCanIcon, selector: "trash-can-icon, TrashCanIcon", inputs: ["class"] }, { kind: "component", type: InboxIcon, selector: "inbox-icon, InboxIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: FiltersBarComponent, decorators: [{
             type: Component,
@@ -16911,7 +17182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
         role="list"
         aria-label="Filters list">
         @for (filter of authorizedFilters(); track filter.name) {
-          <FilterButton class="max-w-60" overflowItem [name]="filter.name" [column]="filter.column" [position]="position()" [offset]="offset()" [expandedLevel]="expandedLevel()" />
+          <FilterButton class="max-w-60" overflowItem [name]="filter.name" [column]="filter.column" [position]="position()" [lockPosition]="lockPosition()" [offset]="offset()" [expandedLevel]="expandedLevel()" />
         }
       </div>
 
@@ -16923,6 +17194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
           role="listitem"
           [count]="visibleFiltersCount()"
           [position]="morePosition()"
+          [lockPosition]="lockPosition()"
           [includedFilters]="includeFilters()"
           [excludedFilters]="excludeFilters()"
           [aggregations]="aggregations()"
@@ -16936,7 +17208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                         "(click)": "handleClick($event)"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], morePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "morePosition", required: false }] }], aggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregations", required: false }] }], includeFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeFilters", required: false }] }], excludeFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeFilters", required: false }] }], filtersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersCount", required: false }] }], showMoreFiltersButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoreFiltersButton", required: false }] }], homepage: [{ type: i0.Input, args: [{ isSignal: true, alias: "homepage", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], onClearFilters: [{ type: i0.Output, args: ["onClearFilters"] }], onClearBasket: [{ type: i0.Output, args: ["onClearBasket"] }], moreButtonRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MoreButtonComponent), { isSignal: true }] }], filterButtonRefs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FilterButtonComponent), { isSignal: true }] }], overflowManagerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OverflowManagerDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], morePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "morePosition", required: false }] }], lockPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockPosition", required: false }] }], aggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregations", required: false }] }], includeFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeFilters", required: false }] }], excludeFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeFilters", required: false }] }], filtersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersCount", required: false }] }], showMoreFiltersButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoreFiltersButton", required: false }] }], homepage: [{ type: i0.Input, args: [{ isSignal: true, alias: "homepage", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], onClearFilters: [{ type: i0.Output, args: ["onClearFilters"] }], onClearBasket: [{ type: i0.Output, args: ["onClearBasket"] }], moreButtonRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MoreButtonComponent), { isSignal: true }] }], filterButtonRefs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FilterButtonComponent), { isSignal: true }] }], overflowManagerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OverflowManagerDirective), { isSignal: true }] }] } });
 
 class LabelService {
     appStore = inject(AppStore);