@sinequa/atomic-angular 1.0.9 → 1.0.11

package/fesm2022/sinequa-atomic-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, HostBinding, Component, Pipe, InjectionToken, computed, ChangeDetectorRef, DestroyRef, LOCALE_ID, Inject, Optional, input, output, signal, effect, assertInInjectionContext, runInInjectionContext, Injector, EventEmitter, Directive, viewChild, ElementRef, afterNextRender, untracked, linkedSignal, model, TemplateRef, HostListener, Renderer2, contentChildren, contentChild, booleanAttribute, ChangeDetectionStrategy, resource, ViewContainerRef, viewChildren, numberAttribute, afterEveryRender } from '@angular/core';
+import { Injectable, inject, HostBinding, Component, Pipe, InjectionToken, computed, ChangeDetectorRef, DestroyRef, LOCALE_ID, Inject, Optional, input, output, signal, effect, assertInInjectionContext, runInInjectionContext, Injector, EventEmitter, Directive, viewChild, ElementRef, afterNextRender, untracked, linkedSignal, model, TemplateRef, HostListener, Renderer2, contentChildren, contentChild, booleanAttribute, ChangeDetectionStrategy, resource, ViewContainerRef, viewChildren, numberAttribute, afterRenderEffect, afterEveryRender } from '@angular/core';
 import { BehaviorSubject, Subscription, catchError, EMPTY, firstValueFrom, map, Subject, of, tap, throwError, filter, shareReplay, fromEvent, debounceTime, from, switchMap } from 'rxjs';
 import { TranslocoService, TranslocoPipe, provideTranslocoScope } from '@jsverse/transloco';
 import { DropdownComponent, DropdownContentComponent, InputComponent, ButtonComponent, cn, FaIconComponent, EllipsisIcon, ChevronRightIcon, MenuComponent, MenuContentComponent, MenuItemComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, SwitchComponent, SelectOptionDirective, DialogService, TabsComponent, TabsListComponent, TabComponent, ChevronLeftIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, Separator, SheetCloseDirective, SheetService, DateRangePickerDirective, DatepickerDirective, ButtonGroup, InputGroupInput, InputGroupComponent, InputGroupAddonComponent, SearchIcon, FilterIcon, LoadingCircleIconComponent, CircleCheckIconComponent, PopoverComponent, CardComponent, CardHeaderComponent, CardContentComponent, CardFooterComponent, BookmarkIcon, PopoverContentComponent, UserIcon, TrashIcon, FolderIcon, VerticalDividerComponent, BreakpointObserverService, HorizontalDividerComponent, FlagEnglishIconComponent, FlagFrenchIconComponent, EditIcon, UndoIcon, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@sinequa/ui';
@@ -2809,19 +2809,45 @@ function withSavedSearchesFeatures() {
     })));
 }
 
+/**
+ * Canonical default shape of the user settings state.
+ *
+ * Shared between `initialize()` (overlaid under the fetched settings) and `reset()`
+ * (used as the replacement state) so the two cannot drift apart. Keep in sync with
+ * the `UserSettingsState` type.
+ */
+const USER_SETTINGS_DEFAULTS = {
+    bookmarks: [],
+    recentSearches: [],
+    savedSearches: [],
+    baskets: [],
+    alerts: [],
+    assistants: {},
+    language: undefined,
+    collapseAssistant: undefined,
+    userTheme: undefined,
+    agents: { isDebugMode: false }
+};
 function withUserSettingsFeatures() {
     return signalStoreFeature(withState({ language: undefined, collapseAssistant: undefined }), withMethods(store => ({
         /**
          * Initializes the user settings store by fetching the user settings from the backend API
          * and patching the store with the retrieved settings.
          *
+         * The fetched settings are overlaid on top of {@link USER_SETTINGS_DEFAULTS} so that any
+         * key absent from the new user's settings resets to its default instead of retaining the
+         * previous user's in-memory value. This is required because `initialize()` runs both on
+         * first login and on every user override (impersonation): a plain merge would leak the
+         * previous user's data (e.g. `recentSearches`) into the new user's session and backend.
+         *
          * @returns {Promise<void>} A promise that resolves when the initialization is complete.
          */
         async initialize() {
-            // Fetch the user settings from the backend API and patch the store with the result
+            // Fetch the user settings from the backend API and overlay them on the defaults,
+            // so missing keys reset rather than keep the previous user's values.
             try {
                 const settings = await fetchUserSettings();
-                patchState(store, settings);
+                patchState(store, { ...USER_SETTINGS_DEFAULTS, ...settings });
             }
             catch (err) {
                 error('Error fetching user settings:', err);
@@ -2839,17 +2865,7 @@ function withUserSettingsFeatures() {
         async reset() {
             // Reset the user settings to the initial state
             await deleteUserSettings();
-            patchState(store, {
-                bookmarks: [],
-                recentSearches: [],
-                savedSearches: [],
-                baskets: [],
-                alerts: [],
-                assistants: {},
-                language: undefined,
-                collapseAssistant: undefined,
-                agents: { isDebugMode: false }
-            });
+            patchState(store, USER_SETTINGS_DEFAULTS);
         }
     })));
 }
@@ -6909,8 +6925,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 /**
- * Directive to be used on the element that should be considered as the limit
- * for the overflow manager.
+ * Directive to be used on the "more" trigger element. The overflow manager
+ * reserves this element's size when not all items fit, so the last visible
+ * item never overlaps it. Its position is not used for measurement.
  */
 class OverflowStopDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OverflowStopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -6924,10 +6941,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 /**
- * Directive that takes items and a stop element to count the number of items
- * that can fit before the stop element.
- * The directive will apply a `visibility: hidden` on the items that are not
- * visible.
+ * Directive that counts how many items fit inside the container and hides the
+ * overflowing ones. The boundary is the container's own content edge, which
+ * keeps the measurement correct even when the host lives inside a flex layout
+ * (we never depend on a sibling's position). The stop element is used only to
+ * reserve space for the "more" trigger when not all items fit.
+ *
+ * The directive applies `display: none` on the items that do not fit.
  *
  * You can specify a target element to observe for resize events, otherwise the
  * directive will observe the element itself.
@@ -6966,10 +6986,26 @@ class OverflowManagerDirective {
     target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : []));
     margin = input(4, ...(ngDevMode ? [{ debugName: "margin" }] : []));
     direction = input("horizontal", ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    /**
+     * Always reserve the stop element's size, even when every item fits inside
+     * the container. Use it when the stop trigger is permanently visible (e.g.
+     * the "more" button also gives access to items that are never rendered in
+     * the container), so the last item never overlaps it.
+     */
+    reserveStop = input(false, ...(ngDevMode ? [{ debugName: "reserveStop", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     count = output();
     el = inject(ElementRef).nativeElement;
     destroyRef = inject(DestroyRef);
     resizeObserver = new ResizeObserver(() => this.countItems());
+    // Recompute when an individual item's size changes (label update, async
+    // translation, font load…), not only when the container resizes. Items we
+    // hid with `display: none` report a 0×0 size; ignore those notifications so
+    // our own show/hide toggling doesn't trigger redundant recounts.
+    itemsResizeObserver = new ResizeObserver((entries) => {
+        const visibleItemResized = entries.some((entry) => entry.target.style.display !== "none");
+        if (visibleItemResized)
+            this.countItems();
+    });
     countSub;
     _lastCount;
     constructor() {
@@ -6981,21 +7017,37 @@ class OverflowManagerDirective {
                 this.countItems();
             }
         });
+        // (re)observe every item whenever the projected list changes, so that
+        // added/removed items and per-item size changes both trigger a recount
+        effect(() => {
+            const items = this.items();
+            this.itemsResizeObserver.disconnect();
+            items.forEach((item) => this.itemsResizeObserver.observe(item.nativeElement));
+        });
         // listens to the count output and toggles the visibility of the items
         this.countSub = this.count.subscribe((count) => this.toggleToCount(count));
         this.destroyRef.onDestroy(() => {
             this.resizeObserver.disconnect();
+            this.itemsResizeObserver.disconnect();
             this.countSub?.unsubscribe();
             this.countSub = undefined;
         });
     }
     /**
-     * Counts the number of items that can fit before the stop element.
+     * Counts the number of items that can fit inside the container.
+     *
+     * The boundary is the container's own content edge (not the position of the
+     * stop element). This is what makes the measurement robust when the host is
+     * placed inside a flex layout: we never rely on a sibling staying where we
+     * expect it. The stop element is only used for its *size*, to reserve space
+     * for the "more" trigger when not all items fit.
+     *
      * Emits the count if it has changed.
      */
     countItems() {
         if (!this.items() || this.items().length === 0 || !this.stop())
             return;
+        const horizontal = this.direction() === "horizontal";
         // Reset all items to their natural size before measuring so that previously
         // hidden items (display: none) don't corrupt the layout and position of
         // their siblings.
@@ -7003,19 +7055,33 @@ class OverflowManagerDirective {
             item.nativeElement.style.display = "";
         });
         // getBoundingClientRect() forces a synchronous reflow, so positions are
-        // accurate after the reset above.
+        // accurate after the reset above. Using rects (not offsetWidth) means the
+        // inter-item gap is accounted for automatically.
+        const containerRect = this.el.getBoundingClientRect();
         const stopRect = this.stop().nativeElement.getBoundingClientRect();
         const itemsRects = this.items().map((item) => item.nativeElement.getBoundingClientRect());
-        let count = 0;
-        for (const rect of itemsRects) {
-            // if the direction is horizontal, we check the right side of the item
-            if (this.direction() === "horizontal" && rect.right + this.margin() <= stopRect.left)
-                count++;
-            // if the direction is vertical, we check the bottom side of the item
-            else if (this.direction() === "vertical" && rect.bottom + this.margin() <= stopRect.top)
-                count++;
-            else
-                break;
+        // The container's content edge, with a small slack margin.
+        const containerEnd = (horizontal ? containerRect.right : containerRect.bottom) - this.margin();
+        const itemEnd = (rect) => (horizontal ? rect.right : rect.bottom);
+        let count;
+        // If every item fits within the container, no "more" trigger is needed and
+        // we don't reserve any space for it — unless the trigger is permanently
+        // visible (reserveStop), in which case its space is always reserved.
+        if (!this.reserveStop() && itemEnd(itemsRects[itemsRects.length - 1]) <= containerEnd) {
+            count = itemsRects.length;
+        }
+        else {
+            // Otherwise reserve the stop element's own size so the last visible item
+            // never overlaps the "more" trigger.
+            const reserve = horizontal ? stopRect.width : stopRect.height;
+            const limit = containerEnd - reserve;
+            count = 0;
+            for (const rect of itemsRects) {
+                if (itemEnd(rect) <= limit)
+                    count++;
+                else
+                    break;
+            }
         }
         if (this._lastCount !== count) {
             this._lastCount = count;
@@ -7038,7 +7104,7 @@ class OverflowManagerDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OverflowManagerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.18", type: OverflowManagerDirective, isStandalone: true, selector: "[overflowManager]", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { count: "count" }, queries: [{ propertyName: "items", predicate: OverflowItemDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "stop", first: true, predicate: OverflowStopDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.18", type: OverflowManagerDirective, isStandalone: true, selector: "[overflowManager]", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, reserveStop: { classPropertyName: "reserveStop", publicName: "reserveStop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { count: "count" }, queries: [{ propertyName: "items", predicate: OverflowItemDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "stop", first: true, predicate: OverflowStopDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OverflowManagerDirective, decorators: [{
             type: Directive,
@@ -7046,7 +7112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     selector: "[overflowManager]",
                     standalone: true
                 }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OverflowItemDirective), { ...{ descendants: true, read: ElementRef }, isSignal: true }] }], stop: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OverflowStopDirective), { ...{ descendants: true, read: ElementRef }, isSignal: true }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], count: [{ type: i0.Output, args: ["count"] }] } });
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OverflowItemDirective), { ...{ descendants: true, read: ElementRef }, isSignal: true }] }], stop: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OverflowStopDirective), { ...{ descendants: true, read: ElementRef }, isSignal: true }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], reserveStop: [{ type: i0.Input, args: [{ isSignal: true, alias: "reserveStop", required: false }] }], count: [{ type: i0.Output, args: ["count"] }] } });
 
 /**
  * Directive that selects an article on click.
@@ -7283,7 +7349,7 @@ class NavbarTabsComponent {
         </Menu>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "noTruncate", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "component", type: EllipsisIcon, selector: "ellipsis-icon, EllipsisIcon, ellipsisicon", inputs: ["class", "orientation"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "noTruncate", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction", "reserveStop"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "component", type: EllipsisIcon, selector: "ellipsis-icon, EllipsisIcon, ellipsisicon", inputs: ["class", "orientation"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavbarTabsComponent, decorators: [{
             type: Component,
@@ -14594,50 +14660,76 @@ class FiltersBarComponent {
             return this.aggregationsStore.aggregations().length > 0;
         return false;
     }, ...(ngDevMode ? [{ debugName: "hasAggregations" }] : []));
+    /**
+     * The full list of authorized filters, NOT capped by `filtersCount`.
+     *
+     * This computed signal performs the following operations:
+     * 1. Retrieves aggregations from either the component's aggregations input or the app store
+     * 2. Filters aggregations based on the route's filter criteria configuration
+     * 3. Excludes filters specified in the `excludeFilters` list
+     * 4. If `includeFilters` is not empty, only includes filters present in that list
+     * 5. Maps the filtered aggregations to objects containing only `name` and `column` properties
+     */
+    allAuthorizedFilters = computed(() => {
+        return this.aggregationsService
+            .getAuthorizedFilters(this.aggregations(), this.includeFilters(), this.excludeFilters(), this.homepage())
+            .map((f) => ({ name: f.name, column: f.column }));
+    }, ...(ngDevMode ? [{ debugName: "allAuthorizedFilters" }] : []));
     /**
      * Computes the list of additional filters that can be displayed in the "more filters" popover.
      *
-     * This computed property filters the authorized filters from the AppStore, excluding those
-     * specified in the `excludeFilters` input. It then maps these filters to their corresponding
-     * aggregations from the AggregationsStore, limited to the number defined by `moreFilterCount`.
+     * Derived from the FULL authorized list (not the one capped by `filtersCount`), so the
+     * filters beyond `filtersCount` — which are never rendered in the bar — are still counted.
+     * Otherwise, when every rendered filter fits in the container, this list would be empty and
+     * the "more" button would be hidden even though more filters exist beyond the cap.
      *
-     * This property manages the visibility and content of the "more filters" popover in the UI.
+     * This property manages the visibility of the "more filters" button in the UI.
      *
      * @returns An array of Aggregation objects representing the additional filters available.
      */
     hasMoreFilters = computed(() => {
-        const moreFiltersAggregations = this.authorizedFilters()
-            .filter((f) => !this.excludeFilters().includes(f.name)) // filter out the excluded filters
-            .filter((f) => !this.includeFilters().length || this.includeFilters().includes(f.name)) // exclude filters not included in includeFilters if not empty
-            .map((f) => ({ column: f.column, name: f.name }))
+        const moreFiltersAggregations = this.allAuthorizedFilters()
             .toSpliced(0, this.visibleFiltersCount())
             .map((f) => this.aggregationsStore.getAggregation(f.column, "column"));
         return moreFiltersAggregations;
     }, ...(ngDevMode ? [{ debugName: "hasMoreFilters" }] : []));
     /**
-     * Computed property that returns a filtered and processed list of authorized filters.
-     *
-     * This computed signal performs the following operations:
-     * 1. Retrieves aggregations from either the component's aggregations input or the app store
-     * 2. Filters aggregations based on the route's filter criteria configuration
-     * 3. Excludes filters specified in the `excludeFilters` list
-     * 4. If `includeFilters` is not empty, only includes filters present in that list
-     * 5. Maps the filtered aggregations to objects containing only `name` and `column` properties
-     * 6. Limits the result to the number specified by `filtersCount`
+     * The authorized filters rendered as buttons in the bar, limited to the number
+     * specified by `filtersCount`.
      *
      * @returns An array of authorized filter objects, each containing `name` and `column` properties
      */
     authorizedFilters = computed(() => {
-        const authorizedFilters = this.aggregationsService
-            .getAuthorizedFilters(this.aggregations(), this.includeFilters(), this.excludeFilters(), this.homepage())
-            .map((f) => ({ name: f.name, column: f.column }))
-            .toSpliced(this.filtersCount());
-        return authorizedFilters;
+        return this.allAuthorizedFilters().toSpliced(this.filtersCount());
     }, ...(ngDevMode ? [{ debugName: "authorizedFilters" }] : []));
+    /**
+     * Whether some authorized filters exist beyond the `filtersCount` cap.
+     *
+     * Those filters are never rendered in the bar and are only reachable through
+     * the "more" button, which is therefore permanently visible: the overflow
+     * manager must always reserve its space so the last filter button never
+     * overlaps it (`reserveStop`).
+     */
+    hasCappedFilters = computed(() => this.allAuthorizedFilters().length > this.filtersCount(), ...(ngDevMode ? [{ debugName: "hasCappedFilters" }] : []));
     constructor() {
         this.transloco.events$
             .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(100))
             .subscribe(() => this.overflowManagerRef()?.countItems());
+        // Recount the overflow whenever the applied filters or basket change (e.g.
+        // a filter modified or removed from the "more filters" popover). A
+        // FilterButton hidden by the overflow manager (display: none) emits no
+        // resize notification when its natural width changes, so it could fit in
+        // the bar again without the manager knowing. afterRenderEffect guarantees
+        // the DOM already reflects the new state when we measure.
+        afterRenderEffect({
+            read: () => {
+                // track filters and basket changes (getState is reactive here)
+                const { filters, basket } = getState(this.queryParamsStore);
+                void filters;
+                void basket;
+                this.overflowManagerRef()?.countItems();
+            }
+        });
     }
     /**
      * Clears all filters (included baskets) by invoking the clearFilters method on the queryParamsStore.
@@ -14686,8 +14778,8 @@ class FiltersBarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FiltersBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FiltersBarComponent, isStandalone: true, selector: "filters-bar, FiltersBar, filtersbar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, morePosition: { classPropertyName: "morePosition", publicName: "morePosition", isSignal: true, isRequired: false, transformFunction: null }, aggregations: { classPropertyName: "aggregations", publicName: "aggregations", isSignal: true, isRequired: false, transformFunction: null }, includeFilters: { classPropertyName: "includeFilters", publicName: "includeFilters", isSignal: true, isRequired: false, transformFunction: null }, excludeFilters: { classPropertyName: "excludeFilters", publicName: "excludeFilters", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, showMoreFiltersButton: { classPropertyName: "showMoreFiltersButton", publicName: "showMoreFiltersButton", isSignal: true, isRequired: false, transformFunction: null }, 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', class())" } }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "moreButtonRef", first: true, predicate: MoreButtonComponent, descendants: true, isSignal: true }, { propertyName: "filterButtonRefs", predicate: FilterButtonComponent, descendants: true, isSignal: true }, { propertyName: "overflowManagerRef", first: true, predicate: OverflowManagerDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div overflowManager [direction]="direction()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FiltersBarComponent, isStandalone: true, selector: "filters-bar, FiltersBar, filtersbar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, morePosition: { classPropertyName: "morePosition", publicName: "morePosition", isSignal: true, isRequired: false, transformFunction: null }, aggregations: { classPropertyName: "aggregations", publicName: "aggregations", isSignal: true, isRequired: false, transformFunction: null }, includeFilters: { classPropertyName: "includeFilters", publicName: "includeFilters", isSignal: true, isRequired: false, transformFunction: null }, excludeFilters: { classPropertyName: "excludeFilters", publicName: "excludeFilters", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, showMoreFiltersButton: { classPropertyName: "showMoreFiltersButton", publicName: "showMoreFiltersButton", isSignal: true, isRequired: false, transformFunction: null }, homepage: { classPropertyName: "homepage", publicName: "homepage", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClearFilters: "onClearFilters", onClearBasket: "onClearBasket" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "cn('block relative min-w-0', class())" } }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "moreButtonRef", first: true, predicate: MoreButtonComponent, descendants: true, isSignal: true }, { propertyName: "filterButtonRefs", predicate: FilterButtonComponent, descendants: true, isSignal: true }, { propertyName: "overflowManagerRef", first: true, predicate: OverflowManagerDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div overflowManager [direction]="direction()" [reserveStop]="hasCappedFilters()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
       @if (hasFilters()) {
         <button
           variant="destructive"
@@ -14739,7 +14831,7 @@ class FiltersBarComponent {
       }
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: MoreButtonComponent, selector: "more-button, MoreButton", inputs: ["count", "position", "includedFilters", "excludedFilters", "aggregations", "homepage"] }, { kind: "component", type: FilterButtonComponent, selector: "filter-button, FilterButton", inputs: ["name", "column", "position", "offset", "expandedLevel"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: MoreButtonComponent, selector: "more-button, MoreButton", inputs: ["count", "position", "includedFilters", "excludedFilters", "aggregations", "homepage"] }, { kind: "component", type: FilterButtonComponent, selector: "filter-button, FilterButton", inputs: ["name", "column", "position", "offset", "expandedLevel"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction", "reserveStop"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FiltersBarComponent, decorators: [{
             type: Component,
@@ -14757,7 +14849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     ],
                     providers: [provideTranslocoScope("filters")],
                     template: `
-    <div overflowManager [direction]="direction()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
+    <div overflowManager [direction]="direction()" [reserveStop]="hasCappedFilters()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
       @if (hasFilters()) {
         <button
           variant="destructive"
@@ -14811,7 +14903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
     </div>
   `,
                     host: {
-                        "[class]": "cn('block relative', class())",
+                        "[class]": "cn('block relative min-w-0', class())",
                         "(click)": "handleClick($event)"
                     }
                 }]