@sinequa/atomic-angular 2.11.0 → 2.12.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Inject, Injectable, InjectionToken, Injector, LOCALE_ID, Optional, Pipe, Service, TemplateRef, ViewEncapsulation, afterNextRender, afterRenderEffect, assertInInjectionContext, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, resource, runInInjectionContext, signal, untracked, viewChild, viewChildren } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Inject, Injectable, InjectionToken, Injector, LOCALE_ID, Optional, Pipe, Service, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, assertInInjectionContext, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, resource, runInInjectionContext, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { BehaviorSubject, EMPTY, Subject, Subscription, catchError, debounceTime, filter, firstValueFrom, from, fromEvent, map, of, scan, shareReplay, switchMap, tap, throwError } from "rxjs";
 import { TranslocoPipe, TranslocoService, provideTranslocoScope } from "@jsverse/transloco";
 import { ArrowDownIcon, ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BellSlashIcon, BookmarkIcon, BreakpointObserverService, BuildingIcon, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, ClockIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, FilterIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, FlashlightIcon, FolderIcon, FolderOpenIcon, FrownIcon, GearIcon, GitForkIcon, GlobeIcon, GripVerticalIcon, HighlighterIcon, HistoryIcon, HomeIcon, ImageIcon, InboxIcon, InfoCircleIcon, InputComponent, InputControlDirective, InputIconRightDirective, KbdComponent, KbdGroupComponent, KeyIcon, KeyboardIcon, LanguageIcon, LightbulbIcon, LightbulbSlashIcon, LinkComponent, ListComponent, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemIconDirective, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, LockIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MapPinIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PopoverResizeHandleComponent, PresentationIcon, QuestionCircleIcon, QuickFilterIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchBarSuggestionsComponent, SearchIcon, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SidebarInsetDirective, SlashIcon, SlidersIcon, SortableDirective, SortableItemDirective, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagInputComponent, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleComponent, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, TruncatedDirective, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, injectFloatingPanel, isApplePlatform } from "@sinequa/galactik";
@@ -23101,6 +23101,8 @@ var SearchFeedbackComponent = class SearchFeedbackComponent {
 	injector = inject(Injector);
 	pages = input.required(...ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []);
 	variant = input("secondary", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	dismissible = input(true, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
 	auditService = inject(AuditService);
 	queryParamsStore = inject(QueryParamsStore);
 	transloco = inject(TranslocoService);
@@ -23220,12 +23222,26 @@ var SearchFeedbackComponent = class SearchFeedbackComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissible: {
+				classPropertyName: "dismissible",
+				publicName: "dismissible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: { onClose: "onClose" },
 		providers: [provideTranslocoScope("feedback")],
 		ngImport: i0,
-		template: "@if (showButton()) {\n  @let feedback = \"feedback.label\" | transloco;\n  <button\n    [menuTrigger]=\"feedbackMenu\"\n    [variant]=\"variant()\"\n    [aria-label]=\"feedback\">\n    <comment-icon />\n    <span>{{ feedback }}</span>\n    <x-mark-icon class=\"ms-2\" (click)=\"close($event)\" />\n  </button>\n\n  <menu #feedbackMenu=\"menu\" (itemSelected)=\"onMenuItemSelected($event)\">\n    <MenuContent>\n      @if (showLike() && !disliked()) {\n        @let feedbackLike = \"feedback.like\" | transloco;\n        @let feedbackLiked = \"feedback.liked\" | transloco;\n        <MenuItem value=\"like\" aria-label=\"feedback\">\n          @if (liked()) {\n            <thumbs-up-icon [solid]=\"true\" />\n            {{ feedbackLiked }}\n          } @else {\n            <thumbs-up-icon />\n            {{ feedbackLike }}\n          }\n        </MenuItem>\n      }\n      @if (showDislike() && !liked()) {\n        <MenuItem value=\"dislike\" [aria-label]=\"'feedback.dislike' | transloco\">\n          @if (disliked()) {\n            <thumbs-down-icon [solid]=\"true\" />\n            {{ \"feedback.disliked\" | transloco }}\n          } @else {\n            <thumbs-down-icon />\n            {{ \"feedback.dislike\" | transloco }}\n          }\n        </MenuItem>\n      }\n      @for (menu of visibleMenus(); track menu.type) {\n        @let feedbackTitle = \"feedback.\" + menu.type + \".title\" | transloco;\n        <MenuItem [value]=\"menu.type\" [aria-label]=\"feedbackTitle\">\n          <fa-icon [faClass]=\"menu.icon\" />\n          {{ feedbackTitle }}\n        </MenuItem>\n      }\n    </MenuContent>\n  </menu>\n}\n",
+		template: "@if (showButton()) {\n  @let feedback = \"feedback.label\" | transloco;\n  <button\n    [menuTrigger]=\"feedbackMenu\"\n    [variant]=\"variant()\"\n    [size]=\"size()\"\n    [aria-label]=\"feedback\">\n    <comment-icon />\n    <span>{{ feedback }}</span>\n    @if (dismissible()) {\n      <x-mark-icon class=\"ms-2\" (click)=\"close($event)\" />\n    }\n  </button>\n\n  <menu #feedbackMenu=\"menu\" (itemSelected)=\"onMenuItemSelected($event)\">\n    <MenuContent>\n      @if (showLike() && !disliked()) {\n        @let feedbackLike = \"feedback.like\" | transloco;\n        @let feedbackLiked = \"feedback.liked\" | transloco;\n        <MenuItem value=\"like\" aria-label=\"feedback\">\n          @if (liked()) {\n            <thumbs-up-icon [solid]=\"true\" />\n            {{ feedbackLiked }}\n          } @else {\n            <thumbs-up-icon />\n            {{ feedbackLike }}\n          }\n        </MenuItem>\n      }\n      @if (showDislike() && !liked()) {\n        <MenuItem value=\"dislike\" [aria-label]=\"'feedback.dislike' | transloco\">\n          @if (disliked()) {\n            <thumbs-down-icon [solid]=\"true\" />\n            {{ \"feedback.disliked\" | transloco }}\n          } @else {\n            <thumbs-down-icon />\n            {{ \"feedback.dislike\" | transloco }}\n          }\n        </MenuItem>\n      }\n      @for (menu of visibleMenus(); track menu.type) {\n        @let feedbackTitle = \"feedback.\" + menu.type + \".title\" | transloco;\n        <MenuItem [value]=\"menu.type\" [aria-label]=\"feedbackTitle\">\n          <fa-icon [faClass]=\"menu.icon\" />\n          {{ feedbackTitle }}\n        </MenuItem>\n      }\n    </MenuContent>\n  </menu>\n}\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -23332,7 +23348,7 @@ i0.ɵɵngDeclareClassMetadata({
 				A11yModule
 			],
 			providers: [provideTranslocoScope("feedback")],
-			template: "@if (showButton()) {\n  @let feedback = \"feedback.label\" | transloco;\n  <button\n    [menuTrigger]=\"feedbackMenu\"\n    [variant]=\"variant()\"\n    [aria-label]=\"feedback\">\n    <comment-icon />\n    <span>{{ feedback }}</span>\n    <x-mark-icon class=\"ms-2\" (click)=\"close($event)\" />\n  </button>\n\n  <menu #feedbackMenu=\"menu\" (itemSelected)=\"onMenuItemSelected($event)\">\n    <MenuContent>\n      @if (showLike() && !disliked()) {\n        @let feedbackLike = \"feedback.like\" | transloco;\n        @let feedbackLiked = \"feedback.liked\" | transloco;\n        <MenuItem value=\"like\" aria-label=\"feedback\">\n          @if (liked()) {\n            <thumbs-up-icon [solid]=\"true\" />\n            {{ feedbackLiked }}\n          } @else {\n            <thumbs-up-icon />\n            {{ feedbackLike }}\n          }\n        </MenuItem>\n      }\n      @if (showDislike() && !liked()) {\n        <MenuItem value=\"dislike\" [aria-label]=\"'feedback.dislike' | transloco\">\n          @if (disliked()) {\n            <thumbs-down-icon [solid]=\"true\" />\n            {{ \"feedback.disliked\" | transloco }}\n          } @else {\n            <thumbs-down-icon />\n            {{ \"feedback.dislike\" | transloco }}\n          }\n        </MenuItem>\n      }\n      @for (menu of visibleMenus(); track menu.type) {\n        @let feedbackTitle = \"feedback.\" + menu.type + \".title\" | transloco;\n        <MenuItem [value]=\"menu.type\" [aria-label]=\"feedbackTitle\">\n          <fa-icon [faClass]=\"menu.icon\" />\n          {{ feedbackTitle }}\n        </MenuItem>\n      }\n    </MenuContent>\n  </menu>\n}\n"
+			template: "@if (showButton()) {\n  @let feedback = \"feedback.label\" | transloco;\n  <button\n    [menuTrigger]=\"feedbackMenu\"\n    [variant]=\"variant()\"\n    [size]=\"size()\"\n    [aria-label]=\"feedback\">\n    <comment-icon />\n    <span>{{ feedback }}</span>\n    @if (dismissible()) {\n      <x-mark-icon class=\"ms-2\" (click)=\"close($event)\" />\n    }\n  </button>\n\n  <menu #feedbackMenu=\"menu\" (itemSelected)=\"onMenuItemSelected($event)\">\n    <MenuContent>\n      @if (showLike() && !disliked()) {\n        @let feedbackLike = \"feedback.like\" | transloco;\n        @let feedbackLiked = \"feedback.liked\" | transloco;\n        <MenuItem value=\"like\" aria-label=\"feedback\">\n          @if (liked()) {\n            <thumbs-up-icon [solid]=\"true\" />\n            {{ feedbackLiked }}\n          } @else {\n            <thumbs-up-icon />\n            {{ feedbackLike }}\n          }\n        </MenuItem>\n      }\n      @if (showDislike() && !liked()) {\n        <MenuItem value=\"dislike\" [aria-label]=\"'feedback.dislike' | transloco\">\n          @if (disliked()) {\n            <thumbs-down-icon [solid]=\"true\" />\n            {{ \"feedback.disliked\" | transloco }}\n          } @else {\n            <thumbs-down-icon />\n            {{ \"feedback.dislike\" | transloco }}\n          }\n        </MenuItem>\n      }\n      @for (menu of visibleMenus(); track menu.type) {\n        @let feedbackTitle = \"feedback.\" + menu.type + \".title\" | transloco;\n        <MenuItem [value]=\"menu.type\" [aria-label]=\"feedbackTitle\">\n          <fa-icon [faClass]=\"menu.icon\" />\n          {{ feedbackTitle }}\n        </MenuItem>\n      }\n    </MenuContent>\n  </menu>\n}\n"
 		}]
 	}],
 	propDecorators: {
@@ -23355,6 +23371,22 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "variant",
 				required: false
 			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		dismissible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissible",
+				required: false
+			}]
 		}]
 	}
 });
@@ -25125,7 +25157,7 @@ var AggregationPanelComponent = class AggregationPanelComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion): a facet is\n     a disclosure, not a grid row. They used to sit in an `@angular/aria` grid so ArrowUp/ArrowDown could\n     jump from one facet header to the next, but a grid without headers reads as a layout table\n     (RGAA 5.3). The `<summary>` itself is `tabindex=\"-1\"`: Tab walks the header's chevron, never the header row, and the\n     chevron is the keyboard way to collapse. Select all, clear and apply are not in the header: they are in the body, in a\n     bar under the search field. Label, header actions (the count and the chevron) and body are `<ng-template>`s: `<ng-content select=\"…\">` can only be\n     declared once, and the body is projected content. -->\n\n<ng-template #searchToggleSlot>\n  <button\n    #searchToggle\n    type=\"button\"\n    variant=\"tertiary\"\n    [iconOnly]=\"true\"\n    size=\"sm\"\n    class=\"shrink-0 cursor-pointer\"\n    [attr.aria-expanded]=\"showSearch()\"\n    [attr.aria-controls]=\"searchId\"\n    [tooltip]=\"\n      'filters.searchInFacet'\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    \"\n    (click)=\"toggleSearch($event)\">\n    <search-icon class=\"shrink-0\" />\n    <span class=\"sr-only\">{{\n      \"filters.searchInFacet\"\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    }}</span>\n  </button>\n</ng-template>\n\n<ng-template #labelSlot>\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</ng-template>\n\n<ng-template #headerActionsSlot>\n  @if (showFiltersCount() && filtersCount() > 0) {\n    <Badge variant=\"number\" fill=\"primary\" scheme=\"sage\" size=\"xs\" class=\"ml-1\">\n      {{ filtersCount() }}\n    </Badge>\n  }\n  @if (canSearch() && !isCollapsed()) {\n    <!-- The magnifier opens the search field of the facet (and closes it): the field is not on screen until then. It is\n         in the header, next to the chevron, and only while the facet is open — there is nothing to search in a closed\n         one. Interactive content in a summary does not toggle the details by itself, and the click is stopped anyway. -->\n    <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n  }\n  @if (collapsible()) {\n    <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n         collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n         exposes `aria-expanded`. -->\n    <button\n      type=\"button\"\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      [attr.aria-expanded]=\"!isCollapsed()\"\n      [tooltip]=\"'filters.toggle' | transloco\"\n      class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevron-right class=\"shrink-0\" />\n      <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n    </button>\n  }\n</ng-template>\n\n<ng-template #bodySlot>\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    @if (canSearch()) {\n      <!-- The field is always in the DOM and folded to nothing until it is asked for: a grid row that goes from 0fr to 1fr is\n           the one height animation that needs no measuring. `inert` takes the folded field out of the tab order and of the\n           accessibility tree. The margins live in the inner box: a padding on the folded element itself would keep it\n           from reaching zero.\n\n           No `hotkey`: this field is one of many facet search boxes on the page, so it must not advertise a global shortcut.\n           A placeholder is not a label (RGAA 11.1): the name says WHICH facet this box filters — the one thing that tells a\n           dozen identical fields apart. SearchInput hands its class to its inner field, so a margin on it would count twice,\n           which is one more reason for the padding on the box around it. -->\n      <div\n        [id]=\"searchId\"\n        class=\"grid shrink-0 transition-[grid-template-rows,opacity] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none\"\n        [class]=\"\n          showSearch()\n            ? 'grid-rows-[1fr] opacity-100'\n            : 'grid-rows-[0fr] opacity-0'\n        \"\n        [inert]=\"!showSearch()\">\n        <!-- `-mx-1 px-1`: the box clips what is outside it, and the focus ring of the field is drawn outside the field,\n             so it needs a few pixels of room on each side — taken back by the negative margin so nothing moves. -->\n        <div class=\"-mx-1 min-h-0 overflow-hidden px-1\">\n          <div [class]=\"headless() ? 'pt-0.5 pb-1' : 'pt-2 pb-1'\">\n            <SearchInput\n              [placeholder]=\"'search' | transloco\"\n              [clearLabel]=\"'filters.clearSearch' | transloco\"\n              [aria-label]=\"\n                'filters.searchInFacet'\n                  | transloco\n                    : { facet: (aggregation()?.display | syslang | transloco) }\n              \"\n              [(value)]=\"searchText\"\n              (keydown.escape)=\"onSearchEscape($event)\">\n              <ng-content select=\"[search-addon]\" />\n            </SearchInput>\n          </div>\n        </div>\n      </div>\n    }\n\n    @if (itemsLength() > 0 || hasFilters() || selection()) {\n      <!-- The bar under the search field, in a popover and in the filters drawer alike: select all (the count of selected items in its tooltip), then clear and apply. Clear is a button\n           with a text, not an icon, and stays in place (disabled) when there is nothing to clear. Apply only shows once\n           something is pending, as it always did, and sits at the same level. The checkbox keeps its own name: the text\n           beside it is a count, not the label of what it does. -->\n      <div class=\"mb-1 flex shrink-0 items-center gap-1 pl-1.5\">\n        <!-- How many are selected is in the tooltip of the checkbox, not written beside it: that room is what clear and apply need.\n             Screen readers keep it as text (the tooltip only shows on hover and focus, and describes). -->\n        <span\n          class=\"inline-flex shrink-0\"\n          [tooltip]=\"\n            'filters.selectedCount' | transloco: { count: selectedCount() }\n          \"\n          tooltipPosition=\"bottom\">\n          <checkbox\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"selectedCount() > 0 && !isAllSelected()\"\n            [aria-label]=\"'filters.selectAllFilters' | transloco\"\n            (checkedChange)=\"\n              $event ? allSelected.emit() : allUnselected.emit()\n            \" />\n        </span>\n        <span class=\"sr-only\" aria-live=\"polite\">{{\n          \"filters.selectedCount\" | transloco: { count: selectedCount() }\n        }}</span>\n        <span class=\"flex-1\" aria-hidden=\"true\"></span>\n        @if (headless() && canSearch()) {\n          <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n        }\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"sm\"\n          class=\"shrink-0\"\n          [disabled]=\"!hasFilters() && selectedCount() === 0\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"cleared.emit()\">\n          {{ \"filters.clearAll\" | transloco }}\n        </button>\n        @if (selection()) {\n          <!-- No icon: the room is short, and the word says it. -->\n          <button\n            type=\"button\"\n            variant=\"accent\"\n            size=\"sm\"\n            class=\"shrink-0 overflow-hidden\"\n            (click)=\"applied.emit()\">\n            <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n          </button>\n        }\n      </div>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <button\n        type=\"button\"\n        class=\"mt-1 flex w-full shrink-0 justify-center\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        (click)=\"loadedMore.emit()\">\n        {{ \"loadMore\" | transloco }}\n      </button>\n    }\n  </div>\n</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col p-0.5\">\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </div>\n} @else {\n  <details\n    [attr.open]=\"expanded()\"\n    [attr.name]=\"id()\"\n    class=\"group flex min-h-0 flex-1 flex-col p-0.5 details-content:flex details-content:min-h-0 details-content:flex-col\"\n    (toggle)=\"onToggle($event)\">\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n      [class]=\"\n        (isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\n      \"\n      class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n      (click)=\"onHeaderClick($event)\">\n      <ng-container [ngTemplateOutlet]=\"labelSlot\" />\n      <ng-container [ngTemplateOutlet]=\"headerActionsSlot\" />\n    </summary>\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </details>\n}\n",
+		template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion): a facet is\n     a disclosure, not a grid row. They used to sit in an `@angular/aria` grid so ArrowUp/ArrowDown could\n     jump from one facet header to the next, but a grid without headers reads as a layout table\n     (RGAA 5.3). The `<summary>` itself is `tabindex=\"-1\"`: Tab walks the header's chevron, never the header row, and the\n     chevron is the keyboard way to collapse. Select all, clear and apply are not in the header: they are in the body, in a\n     bar under the search field. Label, header actions (the count and the chevron) and body are `<ng-template>`s: `<ng-content select=\"…\">` can only be\n     declared once, and the body is projected content. -->\n\n<ng-template #searchToggleSlot>\n  <button\n    #searchToggle\n    type=\"button\"\n    variant=\"tertiary\"\n    [iconOnly]=\"true\"\n    size=\"sm\"\n    class=\"shrink-0 cursor-pointer\"\n    [attr.aria-expanded]=\"showSearch()\"\n    [attr.aria-controls]=\"searchId\"\n    [tooltip]=\"\n      'filters.searchInFacet'\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    \"\n    (click)=\"toggleSearch($event)\">\n    <search-icon class=\"shrink-0\" />\n    <span class=\"sr-only\">{{\n      \"filters.searchInFacet\"\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    }}</span>\n  </button>\n</ng-template>\n\n<ng-template #labelSlot>\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</ng-template>\n\n<ng-template #headerActionsSlot>\n  @if (showFiltersCount() && filtersCount() > 0) {\n    <Badge variant=\"number\" fill=\"primary\" scheme=\"sage\" size=\"xs\" class=\"ml-1\">\n      {{ filtersCount() }}\n    </Badge>\n  }\n  @if (canSearch() && !isCollapsed()) {\n    <!-- The magnifier opens the search field of the facet (and closes it): the field is not on screen until then. It is\n         in the header, next to the chevron, and only while the facet is open — there is nothing to search in a closed\n         one. Interactive content in a summary does not toggle the details by itself, and the click is stopped anyway. -->\n    <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n  }\n  @if (collapsible()) {\n    <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n         collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n         exposes `aria-expanded`. -->\n    <button\n      type=\"button\"\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      [attr.aria-expanded]=\"!isCollapsed()\"\n      [tooltip]=\"'filters.toggle' | transloco\"\n      class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevron-right class=\"shrink-0\" />\n      <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n    </button>\n  }\n</ng-template>\n\n<ng-template #bodySlot>\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    @if (canSearch()) {\n      <!-- The field is always in the DOM and folded to nothing until it is asked for: a grid row that goes from 0fr to 1fr is\n           the one height animation that needs no measuring. `inert` takes the folded field out of the tab order and of the\n           accessibility tree. The margins live in the inner box: a padding on the folded element itself would keep it\n           from reaching zero.\n\n           No `hotkey`: this field is one of many facet search boxes on the page, so it must not advertise a global shortcut.\n           A placeholder is not a label (RGAA 11.1): the name says WHICH facet this box filters — the one thing that tells a\n           dozen identical fields apart. SearchInput hands its class to its inner field, so a margin on it would count twice,\n           which is one more reason for the padding on the box around it. -->\n      <div\n        [id]=\"searchId\"\n        class=\"grid shrink-0 transition-[grid-template-rows,opacity] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none\"\n        [class]=\"\n          showSearch()\n            ? 'grid-rows-[1fr] opacity-100'\n            : 'grid-rows-[0fr] opacity-0'\n        \"\n        [inert]=\"!showSearch()\">\n        <!-- `-mx-1 px-1`: the box clips what is outside it, and the focus ring of the field is drawn outside the field,\n             so it needs a few pixels of room on each side — taken back by the negative margin so nothing moves. -->\n        <div class=\"-mx-1 min-h-0 overflow-hidden px-1\">\n          <div [class]=\"headless() ? 'pt-0.5 pb-1' : 'pt-2 pb-1'\">\n            <SearchInput\n              [placeholder]=\"'search' | transloco\"\n              [clearLabel]=\"'filters.clearSearch' | transloco\"\n              [aria-label]=\"\n                'filters.searchInFacet'\n                  | transloco\n                    : { facet: (aggregation()?.display | syslang | transloco) }\n              \"\n              [(value)]=\"searchText\"\n              (keydown.escape)=\"onSearchEscape($event)\">\n              <ng-content select=\"[search-addon]\" />\n            </SearchInput>\n          </div>\n        </div>\n      </div>\n    }\n\n    @if (itemsLength() > 0 || hasFilters() || selection()) {\n      <!-- The bar under the search field, in a popover and in the filters drawer alike: clear and apply, and nothing else, so\n           both keep their full text in the little room there is. Clear is a button with a text, not an icon, and stays in\n           place (disabled) when there is nothing to clear. Apply only shows once something is pending, as it always did, and\n           sits at the same level. -->\n      <div\n        data-bar=\"actions\"\n        class=\"mb-1 flex shrink-0 items-center justify-end gap-1\">\n        @if (headless() && canSearch()) {\n          <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n        }\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"sm\"\n          class=\"shrink-0\"\n          [disabled]=\"!hasFilters() && selectedCount() === 0\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"cleared.emit()\">\n          {{ \"filters.clearAll\" | transloco }}\n        </button>\n        @if (selection()) {\n          <!-- No icon: the room is short, and the word says it. -->\n          <button\n            type=\"button\"\n            variant=\"accent\"\n            size=\"sm\"\n            class=\"shrink-0 overflow-hidden\"\n            (click)=\"applied.emit()\">\n            <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n          </button>\n        }\n      </div>\n    }\n\n    @if (itemsLength() > 0) {\n      <!-- Select all is the first row of the list, written like one: the box lines up with the boxes of the items it drives and\n           carries its own text, which a bare box next to two buttons never did. The whole row is the label, so it is as easy\n           to hit as an item. The count of checked items is part of that same label (\"Select all (3)\"), so the two can never\n           overlap: when the room is short the label is cut with an ellipsis as a whole. It stays out of the scroller of the list, so it does not scroll away with the items. -->\n      <div\n        data-bar=\"select-all\"\n        class=\"mb-1 flex shrink-0 items-center pr-3 pl-1.5 text-sm\">\n        <checkbox\n          class=\"min-w-0 flex-1 items-center py-1 [&_.checkbox-label]:truncate [&_.checkbox-text-block]:min-w-0\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedCount() > 0 && !isAllSelected()\"\n          (checkedChange)=\"$event ? allSelected.emit() : allUnselected.emit()\">\n          {{\n            (isAllSelected() ? \"filters.unselectAll\" : \"filters.selectAll\")\n              | transloco\n          }}\n          @if (selectedCount() > 0) {\n            <span class=\"text-(--font-primary-muted)\"\n              >({{ selectedCount() }})</span\n            >\n          }\n        </checkbox>\n        <span class=\"sr-only\" aria-live=\"polite\">{{\n          \"filters.selectedCount\" | transloco: { count: selectedCount() }\n        }}</span>\n      </div>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <button\n        type=\"button\"\n        class=\"mt-1 flex w-full shrink-0 justify-center\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        (click)=\"loadedMore.emit()\">\n        {{ \"loadMore\" | transloco }}\n      </button>\n    }\n  </div>\n</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col p-0.5\">\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </div>\n} @else {\n  <details\n    [attr.open]=\"expanded()\"\n    [attr.name]=\"id()\"\n    class=\"group flex min-h-0 flex-1 flex-col p-0.5 details-content:flex details-content:min-h-0 details-content:flex-col\"\n    (toggle)=\"onToggle($event)\">\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n      [class]=\"\n        (isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\n      \"\n      class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n      (click)=\"onHeaderClick($event)\">\n      <ng-container [ngTemplateOutlet]=\"labelSlot\" />\n      <ng-container [ngTemplateOutlet]=\"headerActionsSlot\" />\n    </summary>\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </details>\n}\n",
 		styles: [":host{interpolate-size:allow-keywords}details::details-content{flex:1 1 auto;block-size:0;overflow:clip;overflow-clip-margin:.25rem;transition:block-size .2s cubic-bezier(.32,.72,0,1),content-visibility .2s allow-discrete}details[open]::details-content{block-size:auto}@media(prefers-reduced-motion:reduce){details::details-content{transition:none}}\n"],
 		dependencies: [
 			{
@@ -25263,7 +25295,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			providers: [provideTranslocoScope("filters")],
 			host: { class: "flex min-h-0 flex-1 flex-col" },
-			template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion): a facet is\n     a disclosure, not a grid row. They used to sit in an `@angular/aria` grid so ArrowUp/ArrowDown could\n     jump from one facet header to the next, but a grid without headers reads as a layout table\n     (RGAA 5.3). The `<summary>` itself is `tabindex=\"-1\"`: Tab walks the header's chevron, never the header row, and the\n     chevron is the keyboard way to collapse. Select all, clear and apply are not in the header: they are in the body, in a\n     bar under the search field. Label, header actions (the count and the chevron) and body are `<ng-template>`s: `<ng-content select=\"…\">` can only be\n     declared once, and the body is projected content. -->\n\n<ng-template #searchToggleSlot>\n  <button\n    #searchToggle\n    type=\"button\"\n    variant=\"tertiary\"\n    [iconOnly]=\"true\"\n    size=\"sm\"\n    class=\"shrink-0 cursor-pointer\"\n    [attr.aria-expanded]=\"showSearch()\"\n    [attr.aria-controls]=\"searchId\"\n    [tooltip]=\"\n      'filters.searchInFacet'\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    \"\n    (click)=\"toggleSearch($event)\">\n    <search-icon class=\"shrink-0\" />\n    <span class=\"sr-only\">{{\n      \"filters.searchInFacet\"\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    }}</span>\n  </button>\n</ng-template>\n\n<ng-template #labelSlot>\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</ng-template>\n\n<ng-template #headerActionsSlot>\n  @if (showFiltersCount() && filtersCount() > 0) {\n    <Badge variant=\"number\" fill=\"primary\" scheme=\"sage\" size=\"xs\" class=\"ml-1\">\n      {{ filtersCount() }}\n    </Badge>\n  }\n  @if (canSearch() && !isCollapsed()) {\n    <!-- The magnifier opens the search field of the facet (and closes it): the field is not on screen until then. It is\n         in the header, next to the chevron, and only while the facet is open — there is nothing to search in a closed\n         one. Interactive content in a summary does not toggle the details by itself, and the click is stopped anyway. -->\n    <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n  }\n  @if (collapsible()) {\n    <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n         collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n         exposes `aria-expanded`. -->\n    <button\n      type=\"button\"\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      [attr.aria-expanded]=\"!isCollapsed()\"\n      [tooltip]=\"'filters.toggle' | transloco\"\n      class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevron-right class=\"shrink-0\" />\n      <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n    </button>\n  }\n</ng-template>\n\n<ng-template #bodySlot>\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    @if (canSearch()) {\n      <!-- The field is always in the DOM and folded to nothing until it is asked for: a grid row that goes from 0fr to 1fr is\n           the one height animation that needs no measuring. `inert` takes the folded field out of the tab order and of the\n           accessibility tree. The margins live in the inner box: a padding on the folded element itself would keep it\n           from reaching zero.\n\n           No `hotkey`: this field is one of many facet search boxes on the page, so it must not advertise a global shortcut.\n           A placeholder is not a label (RGAA 11.1): the name says WHICH facet this box filters — the one thing that tells a\n           dozen identical fields apart. SearchInput hands its class to its inner field, so a margin on it would count twice,\n           which is one more reason for the padding on the box around it. -->\n      <div\n        [id]=\"searchId\"\n        class=\"grid shrink-0 transition-[grid-template-rows,opacity] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none\"\n        [class]=\"\n          showSearch()\n            ? 'grid-rows-[1fr] opacity-100'\n            : 'grid-rows-[0fr] opacity-0'\n        \"\n        [inert]=\"!showSearch()\">\n        <!-- `-mx-1 px-1`: the box clips what is outside it, and the focus ring of the field is drawn outside the field,\n             so it needs a few pixels of room on each side — taken back by the negative margin so nothing moves. -->\n        <div class=\"-mx-1 min-h-0 overflow-hidden px-1\">\n          <div [class]=\"headless() ? 'pt-0.5 pb-1' : 'pt-2 pb-1'\">\n            <SearchInput\n              [placeholder]=\"'search' | transloco\"\n              [clearLabel]=\"'filters.clearSearch' | transloco\"\n              [aria-label]=\"\n                'filters.searchInFacet'\n                  | transloco\n                    : { facet: (aggregation()?.display | syslang | transloco) }\n              \"\n              [(value)]=\"searchText\"\n              (keydown.escape)=\"onSearchEscape($event)\">\n              <ng-content select=\"[search-addon]\" />\n            </SearchInput>\n          </div>\n        </div>\n      </div>\n    }\n\n    @if (itemsLength() > 0 || hasFilters() || selection()) {\n      <!-- The bar under the search field, in a popover and in the filters drawer alike: select all (the count of selected items in its tooltip), then clear and apply. Clear is a button\n           with a text, not an icon, and stays in place (disabled) when there is nothing to clear. Apply only shows once\n           something is pending, as it always did, and sits at the same level. The checkbox keeps its own name: the text\n           beside it is a count, not the label of what it does. -->\n      <div class=\"mb-1 flex shrink-0 items-center gap-1 pl-1.5\">\n        <!-- How many are selected is in the tooltip of the checkbox, not written beside it: that room is what clear and apply need.\n             Screen readers keep it as text (the tooltip only shows on hover and focus, and describes). -->\n        <span\n          class=\"inline-flex shrink-0\"\n          [tooltip]=\"\n            'filters.selectedCount' | transloco: { count: selectedCount() }\n          \"\n          tooltipPosition=\"bottom\">\n          <checkbox\n            [checked]=\"isAllSelected()\"\n            [indeterminate]=\"selectedCount() > 0 && !isAllSelected()\"\n            [aria-label]=\"'filters.selectAllFilters' | transloco\"\n            (checkedChange)=\"\n              $event ? allSelected.emit() : allUnselected.emit()\n            \" />\n        </span>\n        <span class=\"sr-only\" aria-live=\"polite\">{{\n          \"filters.selectedCount\" | transloco: { count: selectedCount() }\n        }}</span>\n        <span class=\"flex-1\" aria-hidden=\"true\"></span>\n        @if (headless() && canSearch()) {\n          <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n        }\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"sm\"\n          class=\"shrink-0\"\n          [disabled]=\"!hasFilters() && selectedCount() === 0\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"cleared.emit()\">\n          {{ \"filters.clearAll\" | transloco }}\n        </button>\n        @if (selection()) {\n          <!-- No icon: the room is short, and the word says it. -->\n          <button\n            type=\"button\"\n            variant=\"accent\"\n            size=\"sm\"\n            class=\"shrink-0 overflow-hidden\"\n            (click)=\"applied.emit()\">\n            <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n          </button>\n        }\n      </div>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <button\n        type=\"button\"\n        class=\"mt-1 flex w-full shrink-0 justify-center\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        (click)=\"loadedMore.emit()\">\n        {{ \"loadMore\" | transloco }}\n      </button>\n    }\n  </div>\n</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col p-0.5\">\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </div>\n} @else {\n  <details\n    [attr.open]=\"expanded()\"\n    [attr.name]=\"id()\"\n    class=\"group flex min-h-0 flex-1 flex-col p-0.5 details-content:flex details-content:min-h-0 details-content:flex-col\"\n    (toggle)=\"onToggle($event)\">\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n      [class]=\"\n        (isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\n      \"\n      class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n      (click)=\"onHeaderClick($event)\">\n      <ng-container [ngTemplateOutlet]=\"labelSlot\" />\n      <ng-container [ngTemplateOutlet]=\"headerActionsSlot\" />\n    </summary>\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </details>\n}\n",
+			template: "<!-- `<details>`/`<summary>` stay native (open/close, the `name`-based exclusive accordion): a facet is\n     a disclosure, not a grid row. They used to sit in an `@angular/aria` grid so ArrowUp/ArrowDown could\n     jump from one facet header to the next, but a grid without headers reads as a layout table\n     (RGAA 5.3). The `<summary>` itself is `tabindex=\"-1\"`: Tab walks the header's chevron, never the header row, and the\n     chevron is the keyboard way to collapse. Select all, clear and apply are not in the header: they are in the body, in a\n     bar under the search field. Label, header actions (the count and the chevron) and body are `<ng-template>`s: `<ng-content select=\"…\">` can only be\n     declared once, and the body is projected content. -->\n\n<ng-template #searchToggleSlot>\n  <button\n    #searchToggle\n    type=\"button\"\n    variant=\"tertiary\"\n    [iconOnly]=\"true\"\n    size=\"sm\"\n    class=\"shrink-0 cursor-pointer\"\n    [attr.aria-expanded]=\"showSearch()\"\n    [attr.aria-controls]=\"searchId\"\n    [tooltip]=\"\n      'filters.searchInFacet'\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    \"\n    (click)=\"toggleSearch($event)\">\n    <search-icon class=\"shrink-0\" />\n    <span class=\"sr-only\">{{\n      \"filters.searchInFacet\"\n        | transloco: { facet: (aggregation()?.display | syslang | transloco) }\n    }}</span>\n  </button>\n</ng-template>\n\n<ng-template #labelSlot>\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</ng-template>\n\n<ng-template #headerActionsSlot>\n  @if (showFiltersCount() && filtersCount() > 0) {\n    <Badge variant=\"number\" fill=\"primary\" scheme=\"sage\" size=\"xs\" class=\"ml-1\">\n      {{ filtersCount() }}\n    </Badge>\n  }\n  @if (canSearch() && !isCollapsed()) {\n    <!-- The magnifier opens the search field of the facet (and closes it): the field is not on screen until then. It is\n         in the header, next to the chevron, and only while the facet is open — there is nothing to search in a closed\n         one. Interactive content in a summary does not toggle the details by itself, and the click is stopped anyway. -->\n    <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n  }\n  @if (collapsible()) {\n    <!-- The `<summary>` is out of the tab order (`tabindex=\"-1\"`), so this button is the keyboard way to\n         collapse the facet. Its click bubbles to the `<summary>`, whose handler does the toggle, and it\n         exposes `aria-expanded`. -->\n    <button\n      type=\"button\"\n      variant=\"tertiary\"\n      [iconOnly]=\"true\"\n      size=\"sm\"\n      [attr.aria-expanded]=\"!isCollapsed()\"\n      [tooltip]=\"'filters.toggle' | transloco\"\n      class=\"shrink-0 cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevron-right class=\"shrink-0\" />\n      <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n    </button>\n  }\n</ng-template>\n\n<ng-template #bodySlot>\n  <div class=\"flex min-h-0 flex-1 flex-col\">\n    @if (canSearch()) {\n      <!-- The field is always in the DOM and folded to nothing until it is asked for: a grid row that goes from 0fr to 1fr is\n           the one height animation that needs no measuring. `inert` takes the folded field out of the tab order and of the\n           accessibility tree. The margins live in the inner box: a padding on the folded element itself would keep it\n           from reaching zero.\n\n           No `hotkey`: this field is one of many facet search boxes on the page, so it must not advertise a global shortcut.\n           A placeholder is not a label (RGAA 11.1): the name says WHICH facet this box filters — the one thing that tells a\n           dozen identical fields apart. SearchInput hands its class to its inner field, so a margin on it would count twice,\n           which is one more reason for the padding on the box around it. -->\n      <div\n        [id]=\"searchId\"\n        class=\"grid shrink-0 transition-[grid-template-rows,opacity] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none\"\n        [class]=\"\n          showSearch()\n            ? 'grid-rows-[1fr] opacity-100'\n            : 'grid-rows-[0fr] opacity-0'\n        \"\n        [inert]=\"!showSearch()\">\n        <!-- `-mx-1 px-1`: the box clips what is outside it, and the focus ring of the field is drawn outside the field,\n             so it needs a few pixels of room on each side — taken back by the negative margin so nothing moves. -->\n        <div class=\"-mx-1 min-h-0 overflow-hidden px-1\">\n          <div [class]=\"headless() ? 'pt-0.5 pb-1' : 'pt-2 pb-1'\">\n            <SearchInput\n              [placeholder]=\"'search' | transloco\"\n              [clearLabel]=\"'filters.clearSearch' | transloco\"\n              [aria-label]=\"\n                'filters.searchInFacet'\n                  | transloco\n                    : { facet: (aggregation()?.display | syslang | transloco) }\n              \"\n              [(value)]=\"searchText\"\n              (keydown.escape)=\"onSearchEscape($event)\">\n              <ng-content select=\"[search-addon]\" />\n            </SearchInput>\n          </div>\n        </div>\n      </div>\n    }\n\n    @if (itemsLength() > 0 || hasFilters() || selection()) {\n      <!-- The bar under the search field, in a popover and in the filters drawer alike: clear and apply, and nothing else, so\n           both keep their full text in the little room there is. Clear is a button with a text, not an icon, and stays in\n           place (disabled) when there is nothing to clear. Apply only shows once something is pending, as it always did, and\n           sits at the same level. -->\n      <div\n        data-bar=\"actions\"\n        class=\"mb-1 flex shrink-0 items-center justify-end gap-1\">\n        @if (headless() && canSearch()) {\n          <ng-container [ngTemplateOutlet]=\"searchToggleSlot\" />\n        }\n        <button\n          type=\"button\"\n          variant=\"tertiary\"\n          size=\"sm\"\n          class=\"shrink-0\"\n          [disabled]=\"!hasFilters() && selectedCount() === 0\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"cleared.emit()\">\n          {{ \"filters.clearAll\" | transloco }}\n        </button>\n        @if (selection()) {\n          <!-- No icon: the room is short, and the word says it. -->\n          <button\n            type=\"button\"\n            variant=\"accent\"\n            size=\"sm\"\n            class=\"shrink-0 overflow-hidden\"\n            (click)=\"applied.emit()\">\n            <span class=\"truncate\">{{ \"filters.apply\" | transloco }}</span>\n          </button>\n        }\n      </div>\n    }\n\n    @if (itemsLength() > 0) {\n      <!-- Select all is the first row of the list, written like one: the box lines up with the boxes of the items it drives and\n           carries its own text, which a bare box next to two buttons never did. The whole row is the label, so it is as easy\n           to hit as an item. The count of checked items is part of that same label (\"Select all (3)\"), so the two can never\n           overlap: when the room is short the label is cut with an ellipsis as a whole. It stays out of the scroller of the list, so it does not scroll away with the items. -->\n      <div\n        data-bar=\"select-all\"\n        class=\"mb-1 flex shrink-0 items-center pr-3 pl-1.5 text-sm\">\n        <checkbox\n          class=\"min-w-0 flex-1 items-center py-1 [&_.checkbox-label]:truncate [&_.checkbox-text-block]:min-w-0\"\n          [checked]=\"isAllSelected()\"\n          [indeterminate]=\"selectedCount() > 0 && !isAllSelected()\"\n          (checkedChange)=\"$event ? allSelected.emit() : allUnselected.emit()\">\n          {{\n            (isAllSelected() ? \"filters.unselectAll\" : \"filters.selectAll\")\n              | transloco\n          }}\n          @if (selectedCount() > 0) {\n            <span class=\"text-(--font-primary-muted)\"\n              >({{ selectedCount() }})</span\n            >\n          }\n        </checkbox>\n        <span class=\"sr-only\" aria-live=\"polite\">{{\n          \"filters.selectedCount\" | transloco: { count: selectedCount() }\n        }}</span>\n      </div>\n    }\n\n    <ng-content />\n\n    @if (hasMore() && searchedItemsLength() === 0) {\n      <button\n        type=\"button\"\n        class=\"mt-1 flex w-full shrink-0 justify-center\"\n        [attr.aria-label]=\"'loadMore' | transloco\"\n        (click)=\"loadedMore.emit()\">\n        {{ \"loadMore\" | transloco }}\n      </button>\n    }\n  </div>\n</ng-template>\n\n@if (headless()) {\n  <div class=\"flex min-h-0 flex-1 flex-col p-0.5\">\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </div>\n} @else {\n  <details\n    [attr.open]=\"expanded()\"\n    [attr.name]=\"id()\"\n    class=\"group flex min-h-0 flex-1 flex-col p-0.5 details-content:flex details-content:min-h-0 details-content:flex-col\"\n    (toggle)=\"onToggle($event)\">\n    <summary\n      tabindex=\"-1\"\n      [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n      [class]=\"\n        (isEmpty() ? 'text-(--font-neutral-muted) ' : '') + rowStateClass\n      \"\n      class=\"m-0 flex h-8 w-full shrink-0 scroll-mt-16 scroll-mb-3 items-center gap-1 pl-1 font-semibold select-none\"\n      (click)=\"onHeaderClick($event)\">\n      <ng-container [ngTemplateOutlet]=\"labelSlot\" />\n      <ng-container [ngTemplateOutlet]=\"headerActionsSlot\" />\n    </summary>\n    <ng-container [ngTemplateOutlet]=\"bodySlot\" />\n  </details>\n}\n",
 			styles: [":host{interpolate-size:allow-keywords}details::details-content{flex:1 1 auto;block-size:0;overflow:clip;overflow-clip-margin:.25rem;transition:block-size .2s cubic-bezier(.32,.72,0,1),content-visibility .2s allow-discrete}details[open]::details-content{block-size:auto}@media(prefers-reduced-motion:reduce){details::details-content{transition:none}}\n"]
 		}]
 	}],
@@ -35043,6 +35075,115 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+var PopupContentOutlet = class PopupContentOutlet {
+	container = inject(ViewContainerRef);
+	injector = inject(Injector);
+	popupContentOutlet = input.required(...ngDevMode ? [{ debugName: "popupContentOutlet" }] : /* istanbul ignore next */ []);
+	popupContentContext = input.required(...ngDevMode ? [{ debugName: "popupContentContext" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const template = this.popupContentOutlet();
+			const context = this.popupContentContext();
+			untracked(() => {
+				this.container.clear();
+				this.container.createEmbeddedView(template, context, { injector: this.injector });
+			});
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: PopupContentOutlet,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: PopupContentOutlet,
+		isStandalone: true,
+		selector: "[popupContentOutlet]",
+		inputs: {
+			popupContentOutlet: {
+				classPropertyName: "popupContentOutlet",
+				publicName: "popupContentOutlet",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			popupContentContext: {
+				classPropertyName: "popupContentContext",
+				publicName: "popupContentContext",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: PopupContentOutlet,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[popupContentOutlet]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		popupContentOutlet: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popupContentOutlet",
+				required: true
+			}]
+		}],
+		popupContentContext: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popupContentContext",
+				required: true
+			}]
+		}]
+	}
+});
+var SearchBoxPopupDirective = class SearchBoxPopupDirective {
+	template = inject(TemplateRef);
+	static ngTemplateContextGuard(_dir, _ctx) {
+		return true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SearchBoxPopupDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: SearchBoxPopupDirective,
+		isStandalone: true,
+		selector: "ng-template[searchBoxPopup]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SearchBoxPopupDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[searchBoxPopup]" }]
+	}]
+});
 let nextHintId = 0;
 const SEARCH_BOX_CATEGORIES_SORT = new InjectionToken("Order by preference for the categories of the suggestions", { factory: () => [
 	"full-text",
@@ -35076,10 +35217,20 @@ var SearchBoxComponent = class SearchBoxComponent {
 		...ngDevMode ? { debugName: "popupOffset" } : /* istanbul ignore next */ {},
 		transform: numberAttribute
 	});
+	popupFitScreen = input(void 0, {
+		...ngDevMode ? { debugName: "popupFitScreen" } : /* istanbul ignore next */ {},
+		transform: (value) => value === void 0 ? void 0 : booleanAttribute(value)
+	});
+	popupFlip = input(void 0, {
+		...ngDevMode ? { debugName: "popupFlip" } : /* istanbul ignore next */ {},
+		transform: (value) => value === void 0 ? void 0 : booleanAttribute(value)
+	});
 	placeholderOverride = input(void 0, {
 		...ngDevMode ? { debugName: "placeholderOverride" } : /* istanbul ignore next */ {},
 		alias: "placeholder"
 	});
+	suggestionsProvider = input(void 0, ...ngDevMode ? [{ debugName: "suggestionsProvider" }] : /* istanbul ignore next */ []);
+	customPopup = contentChild(SearchBoxPopupDirective, ...ngDevMode ? [{ debugName: "customPopup" }] : /* istanbul ignore next */ []);
 	searched = output();
 	debounced = output();
 	saved = output();
@@ -35121,9 +35272,12 @@ var SearchBoxComponent = class SearchBoxComponent {
 	savedSearches = computed(() => this.userSettingsStore.savedSearches() ?? [], ...ngDevMode ? [{ debugName: "savedSearches" }] : /* istanbul ignore next */ []);
 	savedTexts = computed(() => new Set(this.savedSearches().map((s) => s.display || s.label)), ...ngDevMode ? [{ debugName: "savedTexts" }] : /* istanbul ignore next */ []);
 	inline = computed(() => this.popup() === "inline", ...ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []);
+	fitScreen = computed(() => this.popupFitScreen() ?? (this.inline() && this.size() === "hero"), ...ngDevMode ? [{ debugName: "fitScreen" }] : /* istanbul ignore next */ []);
+	flip = computed(() => this.popupFlip() ?? this.size() !== "hero", ...ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []);
+	floating = computed(() => !this.inline() || this.fitScreen(), ...ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []);
 	barClass = computed(() => this.size() === "hero" ? "w-full" : "w-full gap-(--spacing-3xs)! pe-(--spacing-3xs)", ...ngDevMode ? [{ debugName: "barClass" }] : /* istanbul ignore next */ []);
-	popupClass = computed(() => cn("flex flex-col transition-[opacity,translate] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] starting:-translate-y-1.5 starting:opacity-0 motion-reduce:transition-none", this.inline() ? "absolute inset-x-0 top-full z-20 mx-auto mt-(--spacing-2xs) w-[calc(100%-74px)] gap-(--spacing-3xs)" : "fixed z-20 gap-(--spacing-2xs) overflow-hidden rounded-(--radius-xl) border border-solid border-(--stroke-neutral-white) bg-(--bg-neutral-white) p-(--spacing-xs) shadow-(--shadow-2)"), ...ngDevMode ? [{ debugName: "popupClass" }] : /* istanbul ignore next */ []);
-	listClass = computed(() => cn("h-68 scroll-pt-8 overflow-auto overscroll-contain text-(--font-primary-base) focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus)", this.inline() ? "bg-transparent" : "bg-(--bg-neutral-white)"), ...ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []);
+	popupClass = computed(() => cn("flex flex-col transition-[opacity,translate] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] starting:-translate-y-1.5 starting:opacity-0 motion-reduce:transition-none", this.inline() ? this.fitScreen() ? "fixed z-20 max-h-(--search-box-max-h) w-[calc(var(--search-box-w,100vw)-74px)] gap-(--spacing-3xs)" : "absolute inset-x-0 top-full z-20 mx-auto mt-(--spacing-2xs) w-[calc(100%-74px)] gap-(--spacing-3xs)" : "fixed z-20 gap-(--spacing-2xs) overflow-hidden rounded-(--radius-xl) border border-solid border-(--stroke-neutral-white) bg-(--bg-neutral-white) p-(--spacing-xs) shadow-(--shadow-2)", !this.inline() && this.fitScreen() && "max-h-(--search-box-max-h)"), ...ngDevMode ? [{ debugName: "popupClass" }] : /* istanbul ignore next */ []);
+	listClass = computed(() => cn("h-68 scroll-pt-8 overflow-auto overscroll-contain text-(--font-primary-base) focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus)", this.fitScreen() && "min-h-0 shrink", this.inline() ? "bg-transparent" : "bg-(--bg-neutral-white)"), ...ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []);
 	rowClass = computed(() => cn("group/row data-list-item flex min-h-9 w-full cursor-pointer items-center gap-(--spacing-2xs) rounded-(--radius-sm) px-(--spacing-2xs) py-(--spacing-3xs) text-left text-(length:--size-base) text-(--font-primary-muted) transition-[background-color] duration-100 ease-[ease] hover:bg-(--bg-primary-lighter) hover:outline-none focus-visible:bg-(--bg-primary-lighter) aria-selected:text-(--font-primary-dark) data-[active=true]:bg-(--bg-primary-lighter) motion-reduce:transition-none"), ...ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []);
 	titleClass = computed(() => cn("sticky top-0 px-(--spacing-2xs) pt-(--spacing-xs) pb-(--spacing-3xs) text-(length:--size-xs) font-semibold tracking-wider text-(--font-primary-muted) uppercase", this.inline() ? "bg-(--layer-page-layer,var(--bg-neutral-base))" : "bg-(--bg-neutral-white)"), ...ngDevMode ? [{ debugName: "titleClass" }] : /* istanbul ignore next */ []);
 	hasFilters = computed(() => {
@@ -35142,9 +35296,10 @@ var SearchBoxComponent = class SearchBoxComponent {
 		params: () => ({
 			text: this.text(),
 			wasSearchClicked: this.wasSearchClicked(),
-			autocomplete: this.autocomplete()
+			autocomplete: this.autocomplete(),
+			provider: this.suggestionsProvider()
 		}),
-		loader: async ({ params: { text, autocomplete } }) => this.fetchSuggestions({
+		loader: async ({ params: { text, autocomplete, provider } }) => provider ? this.fetchFromProvider(provider, text) : this.fetchSuggestions({
 			text,
 			autocomplete
 		})
@@ -35159,14 +35314,33 @@ var SearchBoxComponent = class SearchBoxComponent {
 		}
 		return isLoading ? this.previousSuggestions : [];
 	}, ...ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []);
+	popupTemplateContext = { $implicit: {
+		text: this.text,
+		typed: this.typed,
+		suggestions: this.suggestions,
+		loading: this.suggestionsResource.isLoading,
+		savedSearches: this.savedSearches,
+		navigatedSinceTyping: this.navigatedSinceTyping,
+		commit: (text) => this.commitText(text),
+		preview: (text) => this.previewSuggestion(text),
+		openSaved: (saved) => this.openSaved(saved),
+		isSaved: (text) => this.savedTexts().has(text),
+		toggleSaved: (text) => this.toggleSavedText(text),
+		collapse: () => this.collapse(),
+		focusField: () => this.focusField()
+	} };
 	inputListenersAttached = false;
 	constructor() {
 		this.destroyRef.onDestroy(() => this.field().reset());
 		injectFloatingPanel({
-			panel: () => this.inline() ? null : this.popupCard()?.nativeElement,
+			panel: () => this.floating() ? this.popupCard()?.nativeElement : null,
 			anchor: () => this.barElement()?.nativeElement,
-			offset: () => this.popupOffset(),
-			matchAnchorWidth: true
+			placement: () => this.inline() ? "bottom" : "bottom-start",
+			offset: () => this.inline() ? 8 : this.popupOffset(),
+			flip: () => this.flip(),
+			matchAnchorWidth: () => !this.inline(),
+			anchorWidthVariable: "--search-box-w",
+			maxHeightVariable: "--search-box-max-h"
 		});
 		this.eventManager.addEventListener(this.host.nativeElement, "click", () => this.wasSearchClicked.set(true));
 		let firstText = true;
@@ -35213,7 +35387,15 @@ var SearchBoxComponent = class SearchBoxComponent {
 			const onInput = () => this.navigatedSinceTyping.set(false);
 			element.addEventListener("keydown", onKeydown);
 			element.addEventListener("input", onInput);
+			const activeObserver = new MutationObserver(() => {
+				if (this.customPopup()) this.revealActiveOption();
+			});
+			activeObserver.observe(element, {
+				attributes: true,
+				attributeFilter: ["aria-activedescendant"]
+			});
 			this.destroyRef.onDestroy(() => {
+				activeObserver.disconnect();
 				element.removeEventListener("keydown", onKeydown);
 				element.removeEventListener("input", onInput);
 			});
@@ -35244,6 +35426,10 @@ var SearchBoxComponent = class SearchBoxComponent {
 		if (this.host.nativeElement.contains(next)) return;
 		this.collapse();
 	}
+	revealActiveOption() {
+		const id = this.inputComponent()?.searchInput().nativeElement.getAttribute("aria-activedescendant");
+		if (id) document.getElementById(id)?.scrollIntoView({ block: "nearest" });
+	}
 	collapse() {
 		this.combobox()?.expanded.set(false);
 	}
@@ -35272,9 +35458,12 @@ var SearchBoxComponent = class SearchBoxComponent {
 	commitSuggestion(suggestion, event) {
 		if (!suggestion.display) return;
 		const text = suggestion.display;
+		this.commitText(text, event.currentTarget?.getAttribute("data-text") || text);
+	}
+	commitText(text, searched = text) {
 		this.searchInputText.set(text);
 		this.collapse();
-		this.runSearch(event.currentTarget?.getAttribute("data-text") || text);
+		this.runSearch(searched);
 	}
 	openSaved(saved) {
 		const queryParams = savedSearchQueryParams(saved);
@@ -35406,6 +35595,14 @@ var SearchBoxComponent = class SearchBoxComponent {
 		}
 		return category;
 	}
+	async fetchFromProvider(provider, text) {
+		try {
+			return await provider(text);
+		} catch (err) {
+			error("Error getting suggestions from the suggestions provider", err);
+			return [];
+		}
+	}
 	fetchSuggestions = async ({ text, autocomplete = 3 }) => {
 		const fromUserSettings = this.autocompleteService.getFromUserSettingsForText(text, autocomplete);
 		if (!text) return fromUserSettings;
@@ -35483,6 +35680,20 @@ var SearchBoxComponent = class SearchBoxComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			popupFitScreen: {
+				classPropertyName: "popupFitScreen",
+				publicName: "popupFitScreen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			popupFlip: {
+				classPropertyName: "popupFlip",
+				publicName: "popupFlip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			placeholderOverride: {
 				classPropertyName: "placeholderOverride",
 				publicName: "placeholder",
@@ -35490,6 +35701,13 @@ var SearchBoxComponent = class SearchBoxComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			suggestionsProvider: {
+				classPropertyName: "suggestionsProvider",
+				publicName: "suggestionsProvider",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			searchInputText: {
 				classPropertyName: "searchInputText",
 				publicName: "searchInputText",
@@ -35514,6 +35732,13 @@ var SearchBoxComponent = class SearchBoxComponent {
 			classAttribute: "relative block"
 		},
 		providers: [provideTranslocoScope("search-box"), provideTranslocoScope("searches")],
+		queries: [{
+			propertyName: "customPopup",
+			first: true,
+			predicate: SearchBoxPopupDirective,
+			descendants: true,
+			isSignal: true
+		}],
 		viewQueries: [
 			{
 				propertyName: "inputComponent",
@@ -35595,6 +35820,10 @@ var SearchBoxComponent = class SearchBoxComponent {
                page, where it takes the place of the filters) or a floating card (the results header). It fades and slides in
                once, when the popup opens (starting: gives the transition its first frame). -->
           <div #popupCard [class]="popupClass()" (mousedown)="$event.preventDefault()">
+            @if (customPopup(); as custom) {
+              <!-- The application's own content (searchBoxPopup): the card, its placement and its opening stay the search box's. -->
+              <ng-container [popupContentOutlet]="custom.template" [popupContentContext]="popupTemplateContext" />
+            } @else {
             <!-- The tabs hold no panel of their own: only one list exists at a time, since two listboxes would both
                  register with the combobox. The div below is the one tabpanel, named by the selected tab. -->
             <Tabs
@@ -35618,7 +35847,9 @@ var SearchBoxComponent = class SearchBoxComponent {
               </TabList>
             </Tabs>
 
-            <div role="tabpanel" [attr.aria-label]="(tab() === 'saved' ? 'searchBox.tabs.saved' : 'searchBox.tabs.suggestions') | transloco">
+            <!-- A flex column with min-h-0, so that the list inside can shrink and scroll when the popup is capped (popupFitScreen):
+                 a plain block would keep the height of its list as its minimum, and the card would only cut the bottom off. -->
+            <div role="tabpanel" class="flex min-h-0 flex-col" [attr.aria-label]="(tab() === 'saved' ? 'searchBox.tabs.saved' : 'searchBox.tabs.suggestions') | transloco">
               @if (tab() === "saved") {
                 <ul
                   #savedList
@@ -35649,7 +35880,14 @@ var SearchBoxComponent = class SearchBoxComponent {
                         (click)="removeSaved(saved, $event)">
                         <star-icon solid class="size-(--icon-sm)" />
                       </span>
-                      <p class="min-w-0 flex-1 truncate text-(--font-primary-base)">{{ saved.display || saved.label }}</p>
+                      <p
+                        class="min-w-0 flex-1 truncate text-(--font-primary-base)"
+                        truncated
+                        #cutSaved="truncated"
+                        [tooltip]="saved.display || saved.label || ''"
+                        [tooltipDisabled]="!cutSaved.isTruncated()">
+                        {{ saved.display || saved.label }}
+                      </p>
                     </li>
                   } @empty {
                     <!-- The empty-state rule of the list features: the feature's icon on a coloured tile, a title, one hint. -->
@@ -35720,7 +35958,12 @@ var SearchBoxComponent = class SearchBoxComponent {
                           </span>
                         </span>
 
-                        <p class="min-w-0 flex-1 truncate text-(--font-primary-base)">
+                        <p
+                          class="min-w-0 flex-1 truncate text-(--font-primary-base)"
+                          truncated
+                          #cutSuggest="truncated"
+                          [tooltip]="suggest.display ?? ''"
+                          [tooltipDisabled]="!cutSuggest.isTruncated()">
                           @for (chunk of suggest.display! | highlightWord: text() : 10; track $index) {
                             <span [class]="{ 'font-semibold': chunk.match }">{{ chunk.text }}</span>
                           }
@@ -35741,6 +35984,7 @@ var SearchBoxComponent = class SearchBoxComponent {
                 </ul>
               }
             </div>
+            }
           </div>
         </ng-template>
       }
@@ -35763,6 +36007,12 @@ var SearchBoxComponent = class SearchBoxComponent {
 				],
 				exportAs: ["ngComponentOutlet"]
 			},
+			{
+				kind: "directive",
+				type: PopupContentOutlet,
+				selector: "[popupContentOutlet]",
+				inputs: ["popupContentOutlet", "popupContentContext"]
+			},
 			{
 				kind: "directive",
 				type: FormField,
@@ -35883,6 +36133,13 @@ var SearchBoxComponent = class SearchBoxComponent {
 				],
 				exportAs: ["tooltip"]
 			},
+			{
+				kind: "directive",
+				type: TruncatedDirective,
+				selector: "[truncated]",
+				inputs: ["truncated"],
+				exportAs: ["truncated"]
+			},
 			{
 				kind: "component",
 				type: SavedSearchPopover,
@@ -35914,6 +36171,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "SearchBox, search-box",
 			imports: [
 				NgComponentOutlet,
+				PopupContentOutlet,
 				FormField,
 				FormRoot,
 				ComboboxPopup,
@@ -35928,6 +36186,7 @@ i0.ɵɵngDeclareClassMetadata({
 				TabListComponent,
 				TabComponent,
 				TooltipDirective,
+				TruncatedDirective,
 				SavedSearchPopover
 			],
 			providers: [provideTranslocoScope("search-box"), provideTranslocoScope("searches")],
@@ -35979,6 +36238,10 @@ i0.ɵɵngDeclareClassMetadata({
                page, where it takes the place of the filters) or a floating card (the results header). It fades and slides in
                once, when the popup opens (starting: gives the transition its first frame). -->
           <div #popupCard [class]="popupClass()" (mousedown)="$event.preventDefault()">
+            @if (customPopup(); as custom) {
+              <!-- The application's own content (searchBoxPopup): the card, its placement and its opening stay the search box's. -->
+              <ng-container [popupContentOutlet]="custom.template" [popupContentContext]="popupTemplateContext" />
+            } @else {
             <!-- The tabs hold no panel of their own: only one list exists at a time, since two listboxes would both
                  register with the combobox. The div below is the one tabpanel, named by the selected tab. -->
             <Tabs
@@ -36002,7 +36265,9 @@ i0.ɵɵngDeclareClassMetadata({
               </TabList>
             </Tabs>
 
-            <div role="tabpanel" [attr.aria-label]="(tab() === 'saved' ? 'searchBox.tabs.saved' : 'searchBox.tabs.suggestions') | transloco">
+            <!-- A flex column with min-h-0, so that the list inside can shrink and scroll when the popup is capped (popupFitScreen):
+                 a plain block would keep the height of its list as its minimum, and the card would only cut the bottom off. -->
+            <div role="tabpanel" class="flex min-h-0 flex-col" [attr.aria-label]="(tab() === 'saved' ? 'searchBox.tabs.saved' : 'searchBox.tabs.suggestions') | transloco">
               @if (tab() === "saved") {
                 <ul
                   #savedList
@@ -36033,7 +36298,14 @@ i0.ɵɵngDeclareClassMetadata({
                         (click)="removeSaved(saved, $event)">
                         <star-icon solid class="size-(--icon-sm)" />
                       </span>
-                      <p class="min-w-0 flex-1 truncate text-(--font-primary-base)">{{ saved.display || saved.label }}</p>
+                      <p
+                        class="min-w-0 flex-1 truncate text-(--font-primary-base)"
+                        truncated
+                        #cutSaved="truncated"
+                        [tooltip]="saved.display || saved.label || ''"
+                        [tooltipDisabled]="!cutSaved.isTruncated()">
+                        {{ saved.display || saved.label }}
+                      </p>
                     </li>
                   } @empty {
                     <!-- The empty-state rule of the list features: the feature's icon on a coloured tile, a title, one hint. -->
@@ -36104,7 +36376,12 @@ i0.ɵɵngDeclareClassMetadata({
                           </span>
                         </span>
 
-                        <p class="min-w-0 flex-1 truncate text-(--font-primary-base)">
+                        <p
+                          class="min-w-0 flex-1 truncate text-(--font-primary-base)"
+                          truncated
+                          #cutSuggest="truncated"
+                          [tooltip]="suggest.display ?? ''"
+                          [tooltipDisabled]="!cutSuggest.isTruncated()">
                           @for (chunk of suggest.display! | highlightWord: text() : 10; track $index) {
                             <span [class]="{ 'font-semibold': chunk.match }">{{ chunk.text }}</span>
                           }
@@ -36125,6 +36402,7 @@ i0.ɵɵngDeclareClassMetadata({
                 </ul>
               }
             </div>
+            }
           </div>
         </ng-template>
       }
@@ -36175,6 +36453,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		popupFitScreen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popupFitScreen",
+				required: false
+			}]
+		}],
+		popupFlip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "popupFlip",
+				required: false
+			}]
+		}],
 		placeholderOverride: [{
 			type: i0.Input,
 			args: [{
@@ -36183,6 +36477,18 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		suggestionsProvider: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "suggestionsProvider",
+				required: false
+			}]
+		}],
+		customPopup: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => SearchBoxPopupDirective), { isSignal: true }]
+		}],
 		searched: [{
 			type: i0.Output,
 			args: ["searched"]
@@ -38861,6 +39167,6 @@ function provideSessionExpiry(options = {}) {
 const queryNameResolver = () => {
 	return inject(AppStore).getDefaultQuery()?.name || "";
 };
-export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, ATOMIC_CLIENT, ATOMIC_SCOPED_PROVIDERS, AddToCollection, AdvancedFiltersBodyComponent, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchTabs, AggregationComponent, AggregationDateComponent, AggregationDateRange, AggregationItemDirective, AggregationListComponent, AggregationPanelComponent, AggregationTreeComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertForm, AlertFormComponent, AlertsComponent, AppService, AppStore, ApplicationService, ApplicationStore, AppliedFiltersComponent, ArticleEntities, ArticleEntitiesTabPanel, ArticleExtracts, ArticleExtractsTabPanel, ArticleHighlights, ArticleLabels, ArticleLabelsTabPanel, ArticleMatchLocations, ArticleMatchLocationsTabPanel, ArticleSimilarDocuments, ArticleSimilarDocumentsTabPanel, AsideFiltersComponent, AuditFeedbackType, AuditService, AuthGuard, AuthPageComponent, AutocompleteService, BOOKMARKS_CONFIG, BOOKMARKS_OPTIONS, BackdropComponent, BackdropService, BookmarkButtonComponent, BookmarksComponent, COLLECTIONS_CONFIG, COLLECTIONS_OPTIONS, COMPONENTS_FOR_DOCUMENT_TYPE, ChangePasswordComponent, ChildMarkerDirective, CollectionsComponent, CollectionsDialog, ConverterSelectComponent, DeleteCollection, DeleteCollectionDialog, DidYouMeanComponent, DocumentLocatorComponent, EditLabels, ErrorComponent, Export, ExportDialog, ExportService, FILTERS_BREAKPOINT, FILTER_DATE_ALLOW_CUSTOM_RANGE, FORM_ALERT_CLASS, FORM_BARE_CLASS, FORM_ERROR_CLASS, FORM_FIELD_CLASS, FORM_FOOTER_CLASS, FORM_LABEL_CLASS, FORM_SURFACE_CLASS, FaIconComponent, FeatureFlags, FeatureFlagsDialogComponent, Feedback, FeedbackDialogComponent, FileSizePipe, FilterButtonComponent, FiltersBarComponent, FiltersPanelComponent, FloatingToolbarComponent, ForgotPasswordComponent, HIGHLIGHTS, HeatmapComponent, HighlightWordPipe, HistoryPanelComponent, HistoryTitleMarqueeDirective, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardShortcutsDialog, KeyboardShortcutsDialogComponent, KeyboardShortcutsListComponent, KeyboardShortcutsService, LabelService, LabelsEditDialog, ListPanelItemDirective, LoadingComponent, LocalizedNumberPipe, MarkdownPipe, MarkdownRendererService, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUser, OverrideUserDialogComponent, PREVIEW_ASSISTANT_COMPONENT, PREVIEW_CONFIG, PagerComponent, PreviewActionsComponent, PreviewContentComponent, PreviewHeaderComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, QuickFiltersComponent, QuickFiltersListComponent, RECENT_SEARCHES_CONFIG, RECENT_SEARCHES_OPTIONS, ROUTE_COMPONENTS, RecentSearchesComponent, ResetUserSettings, ResetUserSettingsDialogComponent, SAVED_SEARCHES_CONFIG, SAVED_SEARCHES_OPTIONS, SEARCH_BOX_CATEGORIES_SORT, SEARCH_BOX_CATEGORY_ICONS, STARTUP_DATA_SOURCE, SavedSearch, SavedSearchDialog, SavedSearchPopover, SavedSearchesComponent, SavedSearchesService, SearchBoxComponent, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectionService, SelectionStore, Settings, SettingsAccountPanelComponent, SettingsAlertsPanelComponent, SettingsAppearancePanelComponent, SettingsDialogComponent, SettingsShortcutsPanelComponent, ShortcutDirective, ShowBookmarkDirective, SignInComponent, SignedOutComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TagCloudComponent, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserOverrideService, UserProfileFormComponent, UserProfileService, UserSettingsPersistence, UserSettingsStore, WEIGHT_STEPS, WordCloudComponent, ZoomControlsComponent, __resetSignInMutexForTests, activateShortcutTarget, applyThemeToNativeElement, atomicClientProvider, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, bootstrapApp, buildHeatmap, buildQuery, buildTagCloud, candidatesFor, canonicalize, debouncedSignal, errorInterceptorFn, fieldErrorKey, fieldShowsError, filterKey, filterLeaves, filterValues, findAggregation, flagsFromWeekdays, focusWhenReady, galactikPrimitive, galactikSemantic, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, groupSearchesByDate, injectAdvancedFilters, injectAtomicClient, injectRouteNavigation, injectUserSettingsPatch, isAuthRoute, isSignInInFlight, itemLabel, layoutWordCloud, legacyFilterToFilter, makeWeightScale, multiSelectionToolbarVariants, paletteColor, processCssVars, provideAtomicClient, provideAtomicNotifications, provideAtomicScope, provideDocumentLang, provideKeyboardShortcuts, provideSessionExpiry, provideStartupAggregation, quantileScale, queryNameResolver, rebuildWithout, searchItemKey, seriesPalette, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, timelinePalette, toAriaKeyshortcuts, toDisplayParts, toPercentages, toSeries, toastInterceptorFn, weekdaysFromFlags, withAggregationsFeatures, withAlertsFeatures, withAlpha, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withBootstrapApp, withExtractsFeatures, withFavoriteSearchesFeatures, withFetch, withMultiSelectionFeatures, withQueryParamsFeatures, withQuickFiltersFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
+export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, ATOMIC_CLIENT, ATOMIC_SCOPED_PROVIDERS, AddToCollection, AdvancedFiltersBodyComponent, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchTabs, AggregationComponent, AggregationDateComponent, AggregationDateRange, AggregationItemDirective, AggregationListComponent, AggregationPanelComponent, AggregationTreeComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertForm, AlertFormComponent, AlertsComponent, AppService, AppStore, ApplicationService, ApplicationStore, AppliedFiltersComponent, ArticleEntities, ArticleEntitiesTabPanel, ArticleExtracts, ArticleExtractsTabPanel, ArticleHighlights, ArticleLabels, ArticleLabelsTabPanel, ArticleMatchLocations, ArticleMatchLocationsTabPanel, ArticleSimilarDocuments, ArticleSimilarDocumentsTabPanel, AsideFiltersComponent, AuditFeedbackType, AuditService, AuthGuard, AuthPageComponent, AutocompleteService, BOOKMARKS_CONFIG, BOOKMARKS_OPTIONS, BackdropComponent, BackdropService, BookmarkButtonComponent, BookmarksComponent, COLLECTIONS_CONFIG, COLLECTIONS_OPTIONS, COMPONENTS_FOR_DOCUMENT_TYPE, ChangePasswordComponent, ChildMarkerDirective, CollectionsComponent, CollectionsDialog, ConverterSelectComponent, DeleteCollection, DeleteCollectionDialog, DidYouMeanComponent, DocumentLocatorComponent, EditLabels, ErrorComponent, Export, ExportDialog, ExportService, FILTERS_BREAKPOINT, FILTER_DATE_ALLOW_CUSTOM_RANGE, FORM_ALERT_CLASS, FORM_BARE_CLASS, FORM_ERROR_CLASS, FORM_FIELD_CLASS, FORM_FOOTER_CLASS, FORM_LABEL_CLASS, FORM_SURFACE_CLASS, FaIconComponent, FeatureFlags, FeatureFlagsDialogComponent, Feedback, FeedbackDialogComponent, FileSizePipe, FilterButtonComponent, FiltersBarComponent, FiltersPanelComponent, FloatingToolbarComponent, ForgotPasswordComponent, HIGHLIGHTS, HeatmapComponent, HighlightWordPipe, HistoryPanelComponent, HistoryTitleMarqueeDirective, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardShortcutsDialog, KeyboardShortcutsDialogComponent, KeyboardShortcutsListComponent, KeyboardShortcutsService, LabelService, LabelsEditDialog, ListPanelItemDirective, LoadingComponent, LocalizedNumberPipe, MarkdownPipe, MarkdownRendererService, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUser, OverrideUserDialogComponent, PREVIEW_ASSISTANT_COMPONENT, PREVIEW_CONFIG, PagerComponent, PreviewActionsComponent, PreviewContentComponent, PreviewHeaderComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, QuickFiltersComponent, QuickFiltersListComponent, RECENT_SEARCHES_CONFIG, RECENT_SEARCHES_OPTIONS, ROUTE_COMPONENTS, RecentSearchesComponent, ResetUserSettings, ResetUserSettingsDialogComponent, SAVED_SEARCHES_CONFIG, SAVED_SEARCHES_OPTIONS, SEARCH_BOX_CATEGORIES_SORT, SEARCH_BOX_CATEGORY_ICONS, STARTUP_DATA_SOURCE, SavedSearch, SavedSearchDialog, SavedSearchPopover, SavedSearchesComponent, SavedSearchesService, SearchBoxComponent, SearchBoxPopupDirective, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectionService, SelectionStore, Settings, SettingsAccountPanelComponent, SettingsAlertsPanelComponent, SettingsAppearancePanelComponent, SettingsDialogComponent, SettingsShortcutsPanelComponent, ShortcutDirective, ShowBookmarkDirective, SignInComponent, SignedOutComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TagCloudComponent, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserOverrideService, UserProfileFormComponent, UserProfileService, UserSettingsPersistence, UserSettingsStore, WEIGHT_STEPS, WordCloudComponent, ZoomControlsComponent, __resetSignInMutexForTests, activateShortcutTarget, applyThemeToNativeElement, atomicClientProvider, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, bootstrapApp, buildHeatmap, buildQuery, buildTagCloud, candidatesFor, canonicalize, debouncedSignal, errorInterceptorFn, fieldErrorKey, fieldShowsError, filterKey, filterLeaves, filterValues, findAggregation, flagsFromWeekdays, focusWhenReady, galactikPrimitive, galactikSemantic, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, groupSearchesByDate, injectAdvancedFilters, injectAtomicClient, injectRouteNavigation, injectUserSettingsPatch, isAuthRoute, isSignInInFlight, itemLabel, layoutWordCloud, legacyFilterToFilter, makeWeightScale, multiSelectionToolbarVariants, paletteColor, processCssVars, provideAtomicClient, provideAtomicNotifications, provideAtomicScope, provideDocumentLang, provideKeyboardShortcuts, provideSessionExpiry, provideStartupAggregation, quantileScale, queryNameResolver, rebuildWithout, searchItemKey, seriesPalette, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, timelinePalette, toAriaKeyshortcuts, toDisplayParts, toPercentages, toSeries, toastInterceptorFn, weekdaysFromFlags, withAggregationsFeatures, withAlertsFeatures, withAlpha, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withBootstrapApp, withExtractsFeatures, withFavoriteSearchesFeatures, withFetch, withMultiSelectionFeatures, withQueryParamsFeatures, withQuickFiltersFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
 
 //# sourceMappingURL=sinequa-atomic-angular.mjs.map