@sinequa/atomic-angular 1.0.10 → 1.0.12

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';
@@ -3415,14 +3415,10 @@ function AuthGuard() {
         const { loginPath, useCredentials, useSSO } = globalConfig;
         if (state.url.startsWith("/login"))
             return true;
-        // If the user is not authenticated, navigate to the login page or loading page based on the authentication method
+        // If the user is not authenticated, navigate to the login page.
+        // The login page handles every authentication method (credentials, OAuth, SAML).
         if (!isAuthenticated() && !useSSO) {
-            if (useCredentials) {
-                router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
-            }
-            else {
-                router.navigate(["loading"], { queryParams: { returnUrl: state.url } });
-            }
+            router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
             return false;
         }
         // If the user is authenticated, initialize the principal store if it's in the initial state
@@ -4031,7 +4027,7 @@ class NavigationService {
      * - Maps all router events to `RouterEvent`.
      * - Filters the events to only include instances of `NavigationEnd`.
      * - Taps into the event stream to extract the route name from the URL and notify the audit service of route changes,
-     *   excluding the "loading" route and duplicate navigations.
+     *   excluding duplicate navigations.
      * - Updates the `urlAfterNavigation` property with the current URL after navigation.
      * - Shares the replayed value with a buffer size of 1 to ensure subscribers receive the latest emitted value.
      *
@@ -4039,8 +4035,7 @@ class NavigationService {
      */
     navigationEnd$ = this.router.events.pipe(map((event) => event), filter((event) => event instanceof NavigationEnd), tap((event) => {
         const url = event.url.slice(1).split("?")[0]; // Extract route name
-        // TODO: use a "loading" configuration from globalConfig
-        if (url && url !== "loading" && url !== this.urlAfterNavigation) {
+        if (url && url !== this.urlAfterNavigation) {
             this.auditService.notifyRouteChange(url);
         }
     }), tap((event) => {
@@ -5372,6 +5367,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
+/**
+ * @deprecated This component and its `/loading` route are no longer used.
+ * Authentication is handled at bootstrap by `withBootstrapApp`/`signIn`, and the
+ * `AuthGuard` now redirects unauthenticated users to the login page directly.
+ * Will be removed in a future major release. Do not use in new code.
+ */
 class LoadingComponent {
     state = computed(() => getState(this.application), ...(ngDevMode ? [{ debugName: "state" }] : []));
     application = inject(ApplicationStore);
@@ -6925,8 +6926,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 });
@@ -6940,10 +6942,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.
@@ -6982,10 +6987,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() {
@@ -6997,21 +7018,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.
@@ -7019,19 +7056,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;
@@ -7054,7 +7105,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,
@@ -7062,7 +7113,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.
@@ -7299,7 +7350,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,
@@ -10690,6 +10741,15 @@ class SignInComponent {
     destroyRef;
     cn = cn;
     config = globalConfig;
+    /**
+     * True when authentication is handled outside the credentials form — i.e. by the
+     * browser/proxy (`useSSO`) or by an auto-configured OAuth/SAML provider. In those
+     * modes this screen shows a loader instead of a login form and initiates the
+     * handshake automatically by calling `handleLogin()`.
+     */
+    externalAuth = !!(globalConfig.useSSO ||
+        globalConfig.autoOAuthProvider ||
+        globalConfig.autoSAMLProvider);
     class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
     forgotPassword = output();
     username = model("", ...(ngDevMode ? [{ debugName: "username" }] : []));
@@ -10711,6 +10771,30 @@ class SignInComponent {
     expiresSoonNotified = signal(false, ...(ngDevMode ? [{ debugName: "expiresSoonNotified" }] : []));
     constructor(destroyRef) {
         this.destroyRef = destroyRef;
+        // If the user is already authenticated when landing here (e.g. page refresh on
+        // /login, or an external handshake completed before this screen was created),
+        // don't sit on the loader: go straight to the returnUrl.
+        if (this.authenticated()) {
+            const url = this.route.snapshot.queryParams["returnUrl"] || "/";
+            this.router.navigateByUrl(url);
+        }
+        // When authentication is delegated to the browser/proxy (SSO) or an OAuth/SAML
+        // provider, no credentials form is shown: this screen shows a loader and initiates
+        // the handshake automatically by calling `handleLogin()`. If the handshake never
+        // completes, fall back to /error after 5s; the fallback is cancelled as soon as
+        // the login succeeds (the `authenticated` event then drives navigation).
+        if (this.externalAuth && !this.authenticated()) {
+            const timeout = setTimeout(() => {
+                this.router.navigate(["/error"], {
+                    queryParams: { returnUrl: this.route.snapshot.queryParams["returnUrl"] }
+                });
+            }, 5000);
+            destroyRef.onDestroy(() => clearTimeout(timeout));
+            this.handleLogin().then(result => {
+                if (result)
+                    clearTimeout(timeout);
+            });
+        }
         effect(() => {
             const principal = getState(this.principalStore);
             if (this.authenticated() && principal && !this.expiresSoonNotified()) {
@@ -10756,14 +10840,16 @@ class SignInComponent {
         this.router.navigate(["/login"]);
     }
     async handleLogin() {
-        login().then((result) => {
+        return login().then((result) => {
             if (result) {
                 this.auditService.notifyLogin();
             }
+            return result;
         }).catch(error => {
             warn("An error occurred while logging in", error);
             this.auditService.notify({ type: 'Login_Denied' });
             this.router.navigate(["error"]);
+            return false;
         });
     }
     async handleLoginWithCredentials() {
@@ -10806,7 +10892,7 @@ class SignInComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SignInComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SignInComponent, isStandalone: true, selector: "signIn, signin, sign-in", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { forgotPassword: "forgotPassword", username: "usernameChange", password: "passwordChange" }, host: { properties: { "class": "cn('grid h-dvh w-full place-content-center', class())" } }, providers: [provideTranslocoScope("login")], ngImport: i0, template: `
-    @if (!authenticated()) {
+    @if (!authenticated() && !externalAuth) {
       <Card
         hover="no"
         cdkTrapFocus
@@ -10817,60 +10903,54 @@ class SignInComponent {
         </CardHeader>
 
         <CardContent class="grid gap-4">
-          @let useCredentials =
-            !config.autoOAuthProvider && !config.autoSAMLProvider;
-          @if (useCredentials) {
-            <!-- authentication using credentials -->
-            <div class="grid gap-2">
-              <label class="text-sm font-medium" for="username">{{
-                "login.username" | transloco
-              }}</label>
-              <input
-                id="username"
-                type="text"
-                required
-                [(ngModel)]="username"
-                (keydown.enter)="handleLoginWithCredentials()" />
-            </div>
-
-            <div class="grid gap-2">
-              <label class="text-sm font-medium" for="password">{{
-                "login.password" | transloco
-              }}</label>
-              <input
-                id="password"
-                type="password"
-                required
-                [(ngModel)]="password"
-                (keydown.enter)="handleLoginWithCredentials()" />
-            </div>
-
-            <span
-              class="text-muted-foreground cursor-pointer justify-self-start text-xs hover:underline"
-              role="button"
-              tabindex="0"
-              (click)="forgotPassword.emit()"
-              (keydown.enter)="forgotPassword.emit()">
-              {{ "login.forgotPassword" | transloco }}
-            </span>
-            <button variant="primary"
-              [disabled]="!isValid()"
-              (click)="handleLoginWithCredentials()">
-              {{ "login.connect" | transloco }}
-            </button>
-          }
-          @else {
-            <!-- authentication using OAuth or SAML provider -->
-            <button (click)="handleLogin()">
-              {{ "login.SignInWith" | transloco : { provider: config.autoOAuthProvider ? "OAuth" : "SAML" } }}
-            </button>
-          }
+          <!-- authentication using credentials -->
+          <div class="grid gap-2">
+            <label class="text-sm font-medium" for="username">{{
+              "login.username" | transloco
+            }}</label>
+            <input
+              id="username"
+              type="text"
+              required
+              [(ngModel)]="username"
+              (keydown.enter)="handleLoginWithCredentials()" />
+          </div>
+
+          <div class="grid gap-2">
+            <label class="text-sm font-medium" for="password">{{
+              "login.password" | transloco
+            }}</label>
+            <input
+              id="password"
+              type="password"
+              required
+              [(ngModel)]="password"
+              (keydown.enter)="handleLoginWithCredentials()" />
+          </div>
+
+          <span
+            class="text-muted-foreground cursor-pointer justify-self-start text-xs hover:underline"
+            role="button"
+            tabindex="0"
+            (click)="forgotPassword.emit()"
+            (keydown.enter)="forgotPassword.emit()">
+            {{ "login.forgotPassword" | transloco }}
+          </span>
+          <button variant="primary"
+            [disabled]="!isValid()"
+            (click)="handleLoginWithCredentials()">
+            {{ "login.connect" | transloco }}
+          </button>
         </CardContent>
       </Card>
     } @else {
-      <app-wait />
+      <div class="flex h-dvh w-full items-center justify-center">
+        <div class="flex flex-col items-center space-y-4">
+          <span class="loader"></span>
+        </div>
+      </div>
     }
-  `, isInline: true, styles: ["input{background-color:var(--background)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "component", type: LoadingComponent, selector: "app-wait" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, styles: ["input{background-color:var(--background)}.loader{--w: 96px;--h: 96px;transform:rotate(45deg);perspective:1000px;border-radius:50%;width:var(--w);height:var(--h);color:#0040bf}.loader:before,.loader:after{content:\"\";display:block;position:absolute;top:0;left:0;width:inherit;height:inherit;border-radius:50%;transform:rotateX(70deg);animation:1s spin linear infinite}.loader:after{color:#ff854a;transform:rotateY(70deg);animation-delay:.4s}@keyframes spin{0%,to{box-shadow:.4em 0 0 0 currentcolor}12%{box-shadow:.4em .4em 0 0 currentcolor}25%{box-shadow:0 .4em 0 0 currentcolor}37%{box-shadow:-.4em .4em 0 0 currentcolor}50%{box-shadow:-.4em 0 0 0 currentcolor}62%{box-shadow:-.4em -.4em 0 0 currentcolor}75%{box-shadow:0 -.4em 0 0 currentcolor}87%{box-shadow:.4em -.4em 0 0 currentcolor}}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,
@@ -10883,10 +10963,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         ButtonComponent,
                         CardComponent,
                         CardHeaderComponent,
-                        CardContentComponent,
-                        LoadingComponent
+                        CardContentComponent
                     ], providers: [provideTranslocoScope("login")], template: `
-    @if (!authenticated()) {
+    @if (!authenticated() && !externalAuth) {
       <Card
         hover="no"
         cdkTrapFocus
@@ -10897,62 +10976,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         </CardHeader>
 
         <CardContent class="grid gap-4">
-          @let useCredentials =
-            !config.autoOAuthProvider && !config.autoSAMLProvider;
-          @if (useCredentials) {
-            <!-- authentication using credentials -->
-            <div class="grid gap-2">
-              <label class="text-sm font-medium" for="username">{{
-                "login.username" | transloco
-              }}</label>
-              <input
-                id="username"
-                type="text"
-                required
-                [(ngModel)]="username"
-                (keydown.enter)="handleLoginWithCredentials()" />
-            </div>
-
-            <div class="grid gap-2">
-              <label class="text-sm font-medium" for="password">{{
-                "login.password" | transloco
-              }}</label>
-              <input
-                id="password"
-                type="password"
-                required
-                [(ngModel)]="password"
-                (keydown.enter)="handleLoginWithCredentials()" />
-            </div>
-
-            <span
-              class="text-muted-foreground cursor-pointer justify-self-start text-xs hover:underline"
-              role="button"
-              tabindex="0"
-              (click)="forgotPassword.emit()"
-              (keydown.enter)="forgotPassword.emit()">
-              {{ "login.forgotPassword" | transloco }}
-            </span>
-            <button variant="primary"
-              [disabled]="!isValid()"
-              (click)="handleLoginWithCredentials()">
-              {{ "login.connect" | transloco }}
-            </button>
-          }
-          @else {
-            <!-- authentication using OAuth or SAML provider -->
-            <button (click)="handleLogin()">
-              {{ "login.SignInWith" | transloco : { provider: config.autoOAuthProvider ? "OAuth" : "SAML" } }}
-            </button>
-          }
+          <!-- authentication using credentials -->
+          <div class="grid gap-2">
+            <label class="text-sm font-medium" for="username">{{
+              "login.username" | transloco
+            }}</label>
+            <input
+              id="username"
+              type="text"
+              required
+              [(ngModel)]="username"
+              (keydown.enter)="handleLoginWithCredentials()" />
+          </div>
+
+          <div class="grid gap-2">
+            <label class="text-sm font-medium" for="password">{{
+              "login.password" | transloco
+            }}</label>
+            <input
+              id="password"
+              type="password"
+              required
+              [(ngModel)]="password"
+              (keydown.enter)="handleLoginWithCredentials()" />
+          </div>
+
+          <span
+            class="text-muted-foreground cursor-pointer justify-self-start text-xs hover:underline"
+            role="button"
+            tabindex="0"
+            (click)="forgotPassword.emit()"
+            (keydown.enter)="forgotPassword.emit()">
+            {{ "login.forgotPassword" | transloco }}
+          </span>
+          <button variant="primary"
+            [disabled]="!isValid()"
+            (click)="handleLoginWithCredentials()">
+            {{ "login.connect" | transloco }}
+          </button>
         </CardContent>
       </Card>
     } @else {
-      <app-wait />
+      <div class="flex h-dvh w-full items-center justify-center">
+        <div class="flex flex-col items-center space-y-4">
+          <span class="loader"></span>
+        </div>
+      </div>
     }
   `, host: {
                         "[class]": "cn('grid h-dvh w-full place-content-center', class())"
-                    }, styles: ["input{background-color:var(--background)}\n"] }]
+                    }, styles: ["input{background-color:var(--background)}.loader{--w: 96px;--h: 96px;transform:rotate(45deg);perspective:1000px;border-radius:50%;width:var(--w);height:var(--h);color:#0040bf}.loader:before,.loader:after{content:\"\";display:block;position:absolute;top:0;left:0;width:inherit;height:inherit;border-radius:50%;transform:rotateX(70deg);animation:1s spin linear infinite}.loader:after{color:#ff854a;transform:rotateY(70deg);animation-delay:.4s}@keyframes spin{0%,to{box-shadow:.4em 0 0 0 currentcolor}12%{box-shadow:.4em .4em 0 0 currentcolor}25%{box-shadow:0 .4em 0 0 currentcolor}37%{box-shadow:-.4em .4em 0 0 currentcolor}50%{box-shadow:-.4em 0 0 0 currentcolor}62%{box-shadow:-.4em -.4em 0 0 currentcolor}75%{box-shadow:0 -.4em 0 0 currentcolor}87%{box-shadow:.4em -.4em 0 0 currentcolor}}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], forgotPassword: [{ type: i0.Output, args: ["forgotPassword"] }], username: [{ type: i0.Input, args: [{ isSignal: true, alias: "username", required: false }] }, { type: i0.Output, args: ["usernameChange"] }], password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }, { type: i0.Output, args: ["passwordChange"] }] } });
 
 class AuthPageComponent {
@@ -14610,50 +14683,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.
@@ -14702,8 +14801,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"
@@ -14755,7 +14854,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,
@@ -14773,7 +14872,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"
@@ -14827,7 +14926,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)"
                     }
                 }]