@sinequa/atomic-angular 1.6.4 → 1.7.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Injectable, inject, HostBinding, Component, Pipe, InjectionToken, computed, ChangeDetectorRef, DestroyRef, LOCALE_ID, Inject, Optional, input, output, signal, effect, assertInInjectionContext, runInInjectionContext, EnvironmentInjector, Injector, EventEmitter, Directive, viewChild, ElementRef, afterNextRender, untracked, linkedSignal, model, TemplateRef, HostListener, Renderer2, contentChildren, contentChild, booleanAttribute, resource, ChangeDetectionStrategy, ViewContainerRef, numberAttribute, viewChildren, afterRenderEffect, afterEveryRender } from '@angular/core';
 import { BehaviorSubject, Subscription, Subject, of, catchError, map, tap, EMPTY, throwError, filter, shareReplay, from, switchMap, firstValueFrom, fromEvent, debounceTime } from 'rxjs';
 import { TranslocoService, TranslocoPipe, provideTranslocoScope } from '@jsverse/transloco';
-import { DropdownComponent, DropdownContentComponent, InputComponent, ButtonComponent, cn, FaIconComponent, EllipsisIcon, ChevronRightIcon, MenuComponent, MenuContentComponent, MenuItemComponent, LinkComponent, CardComponent, CardHeaderComponent, CardContentComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, SquareCheckIcon, SquareMinusIcon, SquareIcon, SwitchComponent, SelectOptionDirective, DialogService, XMarkIcon, InboxIcon, SparklesIcon, FileOutputIcon, TabsComponent, TabsListComponent, TabComponent, SidebarMenuComponent, SidebarMenuItemComponent, SidebarMenuButtonComponent, TooltipDirective, FrownIcon, ChevronLeftIcon, ChevronsLeftIcon, ChevronsRightIcon, ArrowUpAzIcon, ArrowDownZaIcon, ArrowUpRightFromSquareIcon, ToggleRightIcon, ToggleLeftIcon, Separator, SheetCloseDirective, ArrowLeftIcon, SheetService, DateRangePickerDirective, DatepickerDirective, FilterIcon, FilterXIcon, IconButtonComponent, HighlighterIcon, TagsIcon, SpinnerIcon, MagnifyingGlassIcon, LoadingCircleIcon, CircleCheckIcon, PopoverComponent, BellIcon, TrashIcon, BarsIcon, CardFooterComponent, InputGroupInput, InputGroupComponent, InputGroupAddonComponent, EyeSlashIcon, EyeIcon, BookmarkIcon, PopoverContentComponent, UserIcon, FolderIcon, DialogDescriptionComponent, VerticalDividerComponent, CommentIcon, ThumbsUpIcon, ThumbsDownIcon, DropdownDirective, SearchIcon, TriangleAlertIcon, ListFilterIcon, BreakpointObserverService, TrashCanIcon, CircleXIcon, InfoCircleIcon, HorizontalDividerComponent, HistoryIcon, StarIcon, FlagEnglishIcon, FlagFrenchIcon, EditIcon, UndoIcon, SaveIcon, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@sinequa/ui';
+import { DropdownComponent, DropdownContentComponent, InputComponent, ButtonComponent, cn, FaIconComponent, EllipsisIcon, ChevronRightIcon, MenuComponent, MenuContentComponent, MenuItemComponent, LinkComponent, CardComponent, CardHeaderComponent, CardContentComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, SquareCheckIcon, SquareMinusIcon, SquareIcon, SwitchComponent, SelectOptionDirective, DialogService, XMarkIcon, InboxIcon, SparklesIcon, FileOutputIcon, TabsComponent, TabsListComponent, TabComponent, SidebarMenuComponent, SidebarMenuItemComponent, SidebarMenuButtonComponent, TooltipDirective, FrownIcon, ChevronLeftIcon, ChevronsLeftIcon, ChevronsRightIcon, ArrowUpAzIcon, ArrowDownZaIcon, ArrowUpRightFromSquareIcon, ToggleRightIcon, ToggleLeftIcon, Separator, SheetCloseDirective, ArrowLeftIcon, SheetService, DateRangePickerDirective, DatepickerDirective, FilterIcon, FilterXIcon, IconButtonComponent, HighlighterIcon, TagsIcon, SpinnerIcon, MagnifyingGlassIcon, LoadingCircleIcon, CircleCheckIcon, PopoverComponent, BellIcon, TrashIcon, BarsIcon, CardFooterComponent, InputGroupInput, InputGroupComponent, InputGroupAddonComponent, EyeSlashIcon, EyeIcon, BookmarkIcon, PopoverContentComponent, UserIcon, FolderIcon, DialogDescriptionComponent, VerticalDividerComponent, CommentIcon, ThumbsUpIcon, ThumbsDownIcon, DropdownDirective, SearchIcon, TriangleAlertIcon, ListFilterIcon, BreakpointObserverService, TrashCanIcon, CircleXIcon, InfoCircleIcon, HorizontalDividerComponent, HistoryIcon, StarIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, EditIcon, UndoIcon, SaveIcon, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@sinequa/ui';
 import highlightWords from 'highlight-words';
 import { ActivatedRoute, Router, NavigationEnd, RouterLink, RouterLinkActive, RouterModule } from '@angular/router';
 import { withDevtools } from '@angular-architects/ngrx-toolkit';
@@ -1913,7 +1913,7 @@ function withQueryParamsFeatures() {
          * - If the filter's operator is not 'between' and `filters`, `value`, and `values` are all `undefined`, the filter is removed.
          * - If the filter already exists, its values are updated.
          */
-        updateFilter(newFilter, audit) {
+        updateFilter(newFilter, audit, options) {
             patchState(store, (state) => {
                 if (newFilter === undefined)
                     return state;
@@ -1986,7 +1986,9 @@ function withQueryParamsFeatures() {
                         }
                     }
                 }
-                this._updateUrlQueryParams(newState || state, audit);
+                if (options?.syncUrl !== false) {
+                    this._updateUrlQueryParams(newState || state, audit);
+                }
                 return newState || state;
             });
         },
@@ -1995,13 +1997,15 @@ function withQueryParamsFeatures() {
          *
          * @param field - The field of the filter to be removed.
          */
-        removeFilter(field) {
+        removeFilter(field, options) {
             if (!field)
                 return;
             patchState(store, (state) => {
                 const filters = state.filters?.filter((f) => f.field !== field);
                 const newState = { ...state, filters };
-                this._updateUrlQueryParams(newState);
+                if (options?.syncUrl !== false) {
+                    this._updateUrlQueryParams(newState);
+                }
                 return newState;
             });
         },
@@ -2010,18 +2014,20 @@ function withQueryParamsFeatures() {
          *
          * @param name - The name of the filter to be removed.
          */
-        removeFilterByName(name, column) {
+        removeFilterByName(name, column, options) {
             if (!name)
                 return;
             const filters = getState(store).filters || [];
             // if the filter is not found by name, check if it is found by field
             if (filters.some((f) => f.name === name) === false) {
-                return this.removeFilter(column);
+                return this.removeFilter(column, options);
             }
             patchState(store, (state) => {
                 const filters = state.filters?.filter((f) => f.name !== name);
                 const newState = { ...state, filters };
-                this._updateUrlQueryParams(newState);
+                if (options?.syncUrl !== false) {
+                    this._updateUrlQueryParams(newState);
+                }
                 return newState;
             });
         },
@@ -4267,6 +4273,7 @@ class PreviewService {
     currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
     events = signal("idle", ...(ngDevMode ? [{ debugName: "events" }] : []));
     DOMContentLoaded = signal(false, ...(ngDevMode ? [{ debugName: "DOMContentLoaded" }] : []));
+    selectedHighlightId = signal(null, ...(ngDevMode ? [{ debugName: "selectedHighlightId" }] : []));
     // ! worker
     onMessage = new Subject();
     worker;
@@ -8991,6 +8998,7 @@ function injectAggregationBase(refs) {
     }
     function applyFilters(appliedFilters, agg, clearFn) {
         const { name: aggName, column: field } = agg;
+        const syncUrl = refs.syncUrl?.() ?? true;
         if (appliedFilters.length > 1) {
             const display = appliedFilters[0].display;
             if (agg.isDistribution) {
@@ -9000,7 +9008,7 @@ function injectAggregationBase(refs) {
                     name: aggName,
                     field,
                     display,
-                });
+                }, undefined, { syncUrl });
             }
             else {
                 const values = appliedFilters.map((f) => f.value);
@@ -9011,11 +9019,11 @@ function injectAggregationBase(refs) {
                     values,
                     display,
                     filters: appliedFilters,
-                });
+                }, undefined, { syncUrl });
             }
         }
         else if (appliedFilters.length === 1) {
-            queryParamsStore.updateFilter(appliedFilters[0]);
+            queryParamsStore.updateFilter(appliedFilters[0], undefined, { syncUrl });
         }
         else {
             clearFn();
@@ -9078,6 +9086,13 @@ class AggregationDateComponent {
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
     showFiltersCount = input(false, ...(ngDevMode ? [{ debugName: "showFiltersCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * When `false`, applying or clearing filters updates the store without
+     * synchronizing the URL (no browser history entry, not shareable/restorable).
+     *
+     * @default true
+     */
+    syncUrl = input(true, ...(ngDevMode ? [{ debugName: "syncUrl", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     title = input({ label: "Date", icon: "far fa-calendar-day" }, ...(ngDevMode ? [{ debugName: "title" }] : []));
     displayEmptyDistributionIntervals = input(false, ...(ngDevMode ? [{ debugName: "displayEmptyDistributionIntervals" }] : []));
     /* outputs */
@@ -9097,6 +9112,7 @@ class AggregationDateComponent {
         searchText: this.searchText,
         searchInput: this.searchInput,
         expanded: this.expanded,
+        syncUrl: this.syncUrl,
     });
     /* spread from base */
     aggregationsService = this.base.aggregationsService;
@@ -9166,7 +9182,7 @@ class AggregationDateComponent {
     apply() {
         try {
             const filter = this.getFormValueFilter();
-            this.queryParamsStore.updateFilter(filter);
+            this.queryParamsStore.updateFilter(filter, undefined, { syncUrl: this.syncUrl() });
             this.selection.set(false);
             this.onApply.emit();
         }
@@ -9187,7 +9203,7 @@ class AggregationDateComponent {
         });
         const agg = this.aggregation();
         if (agg && notify) {
-            this.queryParamsStore.removeFilterByName(agg.name);
+            this.queryParamsStore.removeFilterByName(agg.name, undefined, { syncUrl: this.syncUrl() });
             this.onClear.emit();
         }
     }
@@ -9325,7 +9341,7 @@ class AggregationDateComponent {
         throw new Error("filters.filterInvalid");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AggregationDateComponent, isStandalone: true, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, displayEmptyDistributionIntervals: { classPropertyName: "displayEmptyDistributionIntervals", publicName: "displayEmptyDistributionIntervals", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear", searchText: "searchTextChange" }, host: { classAttribute: "@container" }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "dateRangeDialog", first: true, predicate: AggregationDateRangeDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible()\"\r\n    class=\"m-0 flex h-8 w-full items-center pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\r\n      }\r\n      <span class=\"grow\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (hasFilters()) {\r\n      <icon-button\r\n        [attr.title]=\"'filters.clearFilters' | transloco\"\r\n        [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n        (click)=\"clear()\"\r\n        (keydown.enter)=\"clear()\">\r\n        <filter-x-icon />\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <icon-button\r\n        [attr.title]=\"'filters.applyFilters' | transloco\"\r\n        [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n        (click)=\"apply()\"\r\n        (keydown.enter)=\"apply()\">\r\n        <filter-icon />\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n    @if (collapsible()) {\r\n      <icon-button\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n      </icon-button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  <form [formGroup]=\"form\">\r\n    <ul\r\n      class=\"scrollbar-thin flex max-h-[var(--scroll-height,20rem)] snap-y snap-start flex-col gap-1 overflow-auto pt-2\"\r\n      role=\"list\">\r\n      @for (option of dateOptions(); track $index) {\r\n        <li\r\n          role=\"listitem\"\r\n          tabindex=\"0\"\r\n          (click)=\"radio.click()\"\r\n          [attr.aria-label]=\"option.display | syslang | transloco\"\r\n          [class]=\"\r\n            cn(\r\n              'flex p-0 px-2 leading-7',\r\n              form.get('option')?.value === option.display && 'bg-accent',\r\n              option.hidden && 'hidden',\r\n              option.disabled && 'disabled pointer-events-none text-neutral-300'\r\n            )\r\n          \"\r\n          [attr.aria-hidden]=\"option.disabled\">\r\n          <input\r\n            #radio\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-{{ option.display }}\"\r\n            [attr.disabled]=\"option.disabled ? true : null\"\r\n            [attr.aria-disabled]=\"option.disabled\"\r\n            (click)=\"select()\"\r\n            value=\"{{ option.display }}\" />\r\n\r\n          <label\r\n            for=\"date-filter-{{ option.display }}\"\r\n            class=\"grow cursor-pointer p-1\">\r\n            {{ option.display | syslang | transloco }}\r\n          </label>\r\n        </li>\r\n      }\r\n\r\n      @if (allowCustomRange) {\r\n        <li\r\n          role=\"listitem\"\r\n          aria-label=\"open date range picker\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-range-dialog\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n          <div\r\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\r\n                \"filters.from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeFrom()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label\r\n                for=\"datepicker-range-end\"\r\n                class=\"min-w-10 truncate text-right\"\r\n                >{{ \"filters.to\" | transloco }}</label\r\n              >\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeTo()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n\r\n<aggregation-date-range-dialog\r\n  [lang]=\"lang()\"\r\n  [useDateRange]=\"false\"\r\n  [min]=\"form.get('customRange.from')?.value || undefined\"\r\n  [max]=\"form.get('customRange.to')?.value || undefined\"\r\n  (rangeSelected)=\"onRangeSelected($event)\" />\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: AggregationDateRangeDialogComponent, selector: "aggregation-date-range-dialog", inputs: ["min", "max", "lang", "useDateRange"], outputs: ["rangeSelected"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AggregationDateComponent, isStandalone: true, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, displayEmptyDistributionIntervals: { classPropertyName: "displayEmptyDistributionIntervals", publicName: "displayEmptyDistributionIntervals", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear", searchText: "searchTextChange" }, host: { classAttribute: "@container" }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "dateRangeDialog", first: true, predicate: AggregationDateRangeDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible()\"\r\n    class=\"m-0 flex h-8 w-full items-center pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\r\n      }\r\n      <span class=\"grow\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (hasFilters()) {\r\n      <icon-button\r\n        [attr.title]=\"'filters.clearFilters' | transloco\"\r\n        [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n        (click)=\"clear()\"\r\n        (keydown.enter)=\"clear()\">\r\n        <filter-x-icon />\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <icon-button\r\n        [attr.title]=\"'filters.applyFilters' | transloco\"\r\n        [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n        (click)=\"apply()\"\r\n        (keydown.enter)=\"apply()\">\r\n        <filter-icon />\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n    @if (collapsible()) {\r\n      <icon-button\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n      </icon-button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  <form [formGroup]=\"form\">\r\n    <ul\r\n      class=\"scrollbar-thin flex max-h-[var(--scroll-height,20rem)] snap-y snap-start flex-col gap-1 overflow-auto pt-2\"\r\n      role=\"list\">\r\n      @for (option of dateOptions(); track $index) {\r\n        <li\r\n          role=\"listitem\"\r\n          tabindex=\"0\"\r\n          (click)=\"radio.click()\"\r\n          [attr.aria-label]=\"option.display | syslang | transloco\"\r\n          [class]=\"\r\n            cn(\r\n              'flex p-0 px-2 leading-7',\r\n              form.get('option')?.value === option.display && 'bg-accent',\r\n              option.hidden && 'hidden',\r\n              option.disabled && 'disabled pointer-events-none text-neutral-300'\r\n            )\r\n          \"\r\n          [attr.aria-hidden]=\"option.disabled\">\r\n          <input\r\n            #radio\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-{{ option.display }}\"\r\n            [attr.disabled]=\"option.disabled ? true : null\"\r\n            [attr.aria-disabled]=\"option.disabled\"\r\n            (click)=\"select()\"\r\n            value=\"{{ option.display }}\" />\r\n\r\n          <label\r\n            for=\"date-filter-{{ option.display }}\"\r\n            class=\"grow cursor-pointer p-1\">\r\n            {{ option.display | syslang | transloco }}\r\n          </label>\r\n        </li>\r\n      }\r\n\r\n      @if (allowCustomRange) {\r\n        <li\r\n          role=\"listitem\"\r\n          aria-label=\"open date range picker\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-range-dialog\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n          <div\r\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\r\n                \"filters.from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeFrom()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label\r\n                for=\"datepicker-range-end\"\r\n                class=\"min-w-10 truncate text-right\"\r\n                >{{ \"filters.to\" | transloco }}</label\r\n              >\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeTo()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n\r\n<aggregation-date-range-dialog\r\n  [lang]=\"lang()\"\r\n  [useDateRange]=\"false\"\r\n  [min]=\"form.get('customRange.from')?.value || undefined\"\r\n  [max]=\"form.get('customRange.to')?.value || undefined\"\r\n  (rangeSelected)=\"onRangeSelected($event)\" />\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: AggregationDateRangeDialogComponent, selector: "aggregation-date-range-dialog", inputs: ["min", "max", "lang", "useDateRange"], outputs: ["rangeSelected"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationDateComponent, decorators: [{
             type: Component,
@@ -9344,7 +9360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     ], host: {
                         class: "@container"
                     }, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible()\"\r\n    class=\"m-0 flex h-8 w-full items-center pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @let icon = aggregation()?.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\r\n      }\r\n      <span class=\"grow\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (hasFilters()) {\r\n      <icon-button\r\n        [attr.title]=\"'filters.clearFilters' | transloco\"\r\n        [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n        (click)=\"clear()\"\r\n        (keydown.enter)=\"clear()\">\r\n        <filter-x-icon />\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <icon-button\r\n        [attr.title]=\"'filters.applyFilters' | transloco\"\r\n        [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n        (click)=\"apply()\"\r\n        (keydown.enter)=\"apply()\">\r\n        <filter-icon />\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </icon-button>\r\n    }\r\n    @if (collapsible()) {\r\n      <icon-button\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n      </icon-button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  <form [formGroup]=\"form\">\r\n    <ul\r\n      class=\"scrollbar-thin flex max-h-[var(--scroll-height,20rem)] snap-y snap-start flex-col gap-1 overflow-auto pt-2\"\r\n      role=\"list\">\r\n      @for (option of dateOptions(); track $index) {\r\n        <li\r\n          role=\"listitem\"\r\n          tabindex=\"0\"\r\n          (click)=\"radio.click()\"\r\n          [attr.aria-label]=\"option.display | syslang | transloco\"\r\n          [class]=\"\r\n            cn(\r\n              'flex p-0 px-2 leading-7',\r\n              form.get('option')?.value === option.display && 'bg-accent',\r\n              option.hidden && 'hidden',\r\n              option.disabled && 'disabled pointer-events-none text-neutral-300'\r\n            )\r\n          \"\r\n          [attr.aria-hidden]=\"option.disabled\">\r\n          <input\r\n            #radio\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-{{ option.display }}\"\r\n            [attr.disabled]=\"option.disabled ? true : null\"\r\n            [attr.aria-disabled]=\"option.disabled\"\r\n            (click)=\"select()\"\r\n            value=\"{{ option.display }}\" />\r\n\r\n          <label\r\n            for=\"date-filter-{{ option.display }}\"\r\n            class=\"grow cursor-pointer p-1\">\r\n            {{ option.display | syslang | transloco }}\r\n          </label>\r\n        </li>\r\n      }\r\n\r\n      @if (allowCustomRange) {\r\n        <li\r\n          role=\"listitem\"\r\n          aria-label=\"open date range picker\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-range-dialog\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n          <div\r\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\r\n                \"filters.from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeFrom()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label\r\n                for=\"datepicker-range-end\"\r\n                class=\"min-w-10 truncate text-right\"\r\n                >{{ \"filters.to\" | transloco }}</label\r\n              >\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                readonly\r\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\r\n                [value]=\"customRangeTo()\"\r\n                (click)=\"selectAndOpenDialog()\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n\r\n<aggregation-date-range-dialog\r\n  [lang]=\"lang()\"\r\n  [useDateRange]=\"false\"\r\n  [min]=\"form.get('customRange.from')?.value || undefined\"\r\n  [max]=\"form.get('customRange.to')?.value || undefined\"\r\n  (rangeSelected)=\"onRangeSelected($event)\" />\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { dateRangeDialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationDateRangeDialogComponent), { isSignal: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], displayEmptyDistributionIntervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayEmptyDistributionIntervals", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { dateRangeDialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationDateRangeDialogComponent), { isSignal: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], syncUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncUrl", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], displayEmptyDistributionIntervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayEmptyDistributionIntervals", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
 
 /**
  * Component that allows users to select a date or a date range for filtering search results.
@@ -9585,6 +9601,7 @@ class ArticleExtracts {
     scrollTo(type, index, usePassageHighlighter = false) {
         // if previewData contains "matchingpassages" then we use the passage highlighter otherwise we use "extractslocations"
         const category = type || this.previewService.highlightCategory;
+        this.previewService.selectedHighlightId.set(`${category}_${index}`);
         this.previewService.events.set("scrollTo");
         this.previewService.sendMessage({ action: "select", id: `${category}_${index}`, usePassageHighlighter });
     }
@@ -13711,6 +13728,13 @@ class AggregationTreeComponent {
                 return Number.isNaN(n) ? undefined : n;
             },
         }]));
+    /**
+     * When `false`, applying or clearing filters updates the store without
+     * synchronizing the URL (no browser history entry, not shareable/restorable).
+     *
+     * @default true
+     */
+    syncUrl = input(true, ...(ngDevMode ? [{ debugName: "syncUrl", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /* outputs */
     onSelect = output();
     onApply = output();
@@ -13728,6 +13752,7 @@ class AggregationTreeComponent {
         name: this.name,
         column: this.column,
         searchText: this.searchText,
+        syncUrl: this.syncUrl,
     });
     /* spread from base */
     aggregationsStore = this.base.aggregationsStore;
@@ -13833,7 +13858,7 @@ class AggregationTreeComponent {
     clear() {
         const agg = this.aggregation();
         if (agg) {
-            this.queryParamsStore.removeFilterByName(agg.name, agg.column);
+            this.queryParamsStore.removeFilterByName(agg.name, agg.column, { syncUrl: this.syncUrl() });
             const unselect = (items) => {
                 items.forEach((item) => {
                     item.$selected = false;
@@ -14084,7 +14109,7 @@ class AggregationTreeComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AggregationTreeComponent, isStandalone: true, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit] w-[inherit]\", class())" } }, viewQueries: [{ propertyName: "virtualItems", predicate: ["virtualItem"], descendants: true, isSignal: true }, { propertyName: "scrollElement", first: true, predicate: ["scrollElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <triangle-alert-icon class=\"mr-1\" />\r\n    The aggregationTree component does not support list aggregations. Please use\r\n    the &lt;Aggregation /&gt; component instead.\r\n  </div>\r\n}\r\n<aggregation-panel\r\n  [id]=\"id()\"\r\n  [collapsible]=\"collapsible()\"\r\n  [collapsed]=\"collapsed()\"\r\n  [isEmpty]=\"isEmpty()\"\r\n  [isDate]=\"isDate()\"\r\n  [aggregation]=\"aggregation()\"\r\n  [showFiltersCount]=\"showFiltersCount()\"\r\n  [filtersCount]=\"filtersCount()\"\r\n  [hasFilters]=\"hasFilters()\"\r\n  [selection]=\"selection()\"\r\n  [isAllSelected]=\"isAllSelected()\"\r\n  [(searchText)]=\"searchText\"\r\n  [itemsLength]=\"items().length\"\r\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\r\n  [searchedItemsLength]=\"searchedItems().length\"\r\n  (cleared)=\"clear()\"\r\n  (applied)=\"apply()\"\r\n  (allSelected)=\"selectAll()\"\r\n  (allUnselected)=\"unselectAll()\"\r\n  (loadedMore)=\"loadMore()\">\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-(--scroll-height,20rem) w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"tree\"\r\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\r\n      <div\r\n        class=\"absolute top-0 left-0 w-full\"\r\n        [style.transform]=\"\r\n          'translateY(' +\r\n          (virtualizer.getVirtualItems()[0]\r\n            ? virtualizer.getVirtualItems()[0].start\r\n            : 0) +\r\n          'px)'\r\n        \">\r\n        @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\r\n          @let item = items()[vItem.index];\r\n          <div #virtualItem [attr.data-index]=\"vItem.index\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"treeItemTpl\"\r\n              [ngTemplateOutletContext]=\"{\r\n                node: item,\r\n                path: [],\r\n                field: aggregation()?.column,\r\n                tpl: treeItemTpl,\r\n                parent: null\r\n              }\">\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</aggregation-panel>\r\n\r\n<ng-template\r\n  #treeItemTpl\r\n  let-node=\"node\"\r\n  let-path=\"path\"\r\n  let-field=\"field\"\r\n  let-tpl=\"tpl\"\r\n  let-parent=\"parent\">\r\n  <div\r\n    role=\"treeitem\"\r\n    [style.--level]=\"treeItemLevel(node)\"\r\n    [attr.aria-selected]=\"node.$selected ?? false\"\r\n    [attr.aria-expanded]=\"\r\n      node.hasChildren !== false ? (node.$opened ?? false) : null\r\n    \"\r\n    [attr.aria-disabled]=\"node.count === 0 ? 'true' : null\"\r\n    [attr.disabled]=\"node.count === 0 ? 'disabled' : null\">\r\n    <a\r\n      [attr.aria-label]=\"treeItemName(node) | syslang\"\r\n      [class]=\"\r\n        cn(\r\n          'flex grow items-center gap-2 p-1 leading-7',\r\n          node.count === 0 && 'disabled pointer-events-none',\r\n          (node.$selected || node.$selectedVisually) && ''\r\n        )\r\n      \"\r\n      (click)=\"selectTreeItem(node, parent, $event, true)\">\r\n      <button\r\n        variant=\"none\"\r\n        [iconOnly]=\"true\"\r\n        (click)=\"toggleTreeNode($event, node)\"\r\n        class=\"transition-transform ease-in hover:scale-125\"\r\n        aria-label=\"Open\">\r\n        <ChevronRight\r\n          [class]=\"\r\n            cn(\r\n              'size-4 translate-x-1',\r\n              node.$opened && 'rotate-90',\r\n              !node.hasChildren && 'hidden'\r\n            )\r\n          \"\r\n          width=\"16\"\r\n          height=\"16\" />\r\n      </button>\r\n      <input\r\n        type=\"checkbox\"\r\n        role=\"checkbox\"\r\n        value=\"{{ node.value }}\"\r\n        [attr.disabled]=\"node.count === 0 ? true : null\"\r\n        [attr.aria-disabled]=\"node.count === 0\"\r\n        (keydown.enter)=\"selectTreeItem(node, parent, $event)\"\r\n        [checked]=\"node.$selected || node.$selectedVisually\" />\r\n      @let icon = node.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\r\n      }\r\n      <span\r\n        [class]=\"\r\n          cn(\r\n            'line-clamp-1 break-all text-ellipsis',\r\n            quickFilter() && 'hover:underline'\r\n          )\r\n        \"\r\n        [title]=\"\r\n          quickFilter()\r\n            ? ((isTreeItemFiltered(node, field)\r\n                ? 'filters.removeFilter'\r\n                : 'filters.addFilter'\r\n              ) | transloco) +\r\n              ': ' +\r\n              (treeItemName(node) | syslang)\r\n            : (treeItemName(node) | syslang)\r\n        \"\r\n        (click)=\"onTreeItemTextClick(node, parent, $event)\">\r\n        @for (\r\n          chunk of (treeItemName(node) | syslang) ?? \"\"\r\n            | highlightWord: searchText() : 10;\r\n          track $index\r\n        ) {\r\n          <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\r\n            chunk.text\r\n          }}</span>\r\n        }\r\n      </span>\r\n      @if (showCount() && node.count > 0) {\r\n        <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\r\n          node.count\r\n        }}</span>\r\n      }\r\n    </a>\r\n    @if (node.hasChildren && node.$opened) {\r\n      <div role=\"group\">\r\n        @for (child of node.items; track $index) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"tpl\"\r\n            [ngTemplateOutletContext]=\"{\r\n              node: child,\r\n              path: treeChildrenPath(node, path),\r\n              field: field,\r\n              tpl: tpl,\r\n              parent: node\r\n            }\">\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["div[role=treeitem]:has(+div[role=treeitem]){margin-bottom:var(--agg-item-gap, 0)}div[role=treeitem]{display:block;-webkit-user-select:none;user-select:none}div[role=treeitem] a{padding-left:calc(var(--agg-tree-indent, .5rem) * var(--level, 0));line-height:var(--agg-item-height, inherit)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: TriangleAlertIcon, selector: "triangle-alert-icon, TriangleAlertIcon", inputs: ["class"] }, { kind: "component", type: AggregationPanelComponent, selector: "AggregationPanel, aggregation-panel", inputs: ["id", "collapsible", "collapsed", "isDate", "isEmpty", "aggregation", "showFiltersCount", "filtersCount", "hasFilters", "selection", "isAllSelected", "searchText", "itemsLength", "hasMore", "searchedItemsLength"], outputs: ["searchTextChange", "cleared", "applied", "allSelected", "allUnselected", "loadedMore"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: HighlightWordPipe, name: "highlightWord" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AggregationTreeComponent, isStandalone: true, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit] w-[inherit]\", class())" } }, viewQueries: [{ propertyName: "virtualItems", predicate: ["virtualItem"], descendants: true, isSignal: true }, { propertyName: "scrollElement", first: true, predicate: ["scrollElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <triangle-alert-icon class=\"mr-1\" />\r\n    The aggregationTree component does not support list aggregations. Please use\r\n    the &lt;Aggregation /&gt; component instead.\r\n  </div>\r\n}\r\n<aggregation-panel\r\n  [id]=\"id()\"\r\n  [collapsible]=\"collapsible()\"\r\n  [collapsed]=\"collapsed()\"\r\n  [isEmpty]=\"isEmpty()\"\r\n  [isDate]=\"isDate()\"\r\n  [aggregation]=\"aggregation()\"\r\n  [showFiltersCount]=\"showFiltersCount()\"\r\n  [filtersCount]=\"filtersCount()\"\r\n  [hasFilters]=\"hasFilters()\"\r\n  [selection]=\"selection()\"\r\n  [isAllSelected]=\"isAllSelected()\"\r\n  [(searchText)]=\"searchText\"\r\n  [itemsLength]=\"items().length\"\r\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\r\n  [searchedItemsLength]=\"searchedItems().length\"\r\n  (cleared)=\"clear()\"\r\n  (applied)=\"apply()\"\r\n  (allSelected)=\"selectAll()\"\r\n  (allUnselected)=\"unselectAll()\"\r\n  (loadedMore)=\"loadMore()\">\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-(--scroll-height,20rem) w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"tree\"\r\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\r\n      <div\r\n        class=\"absolute top-0 left-0 w-full\"\r\n        [style.transform]=\"\r\n          'translateY(' +\r\n          (virtualizer.getVirtualItems()[0]\r\n            ? virtualizer.getVirtualItems()[0].start\r\n            : 0) +\r\n          'px)'\r\n        \">\r\n        @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\r\n          @let item = items()[vItem.index];\r\n          <div #virtualItem [attr.data-index]=\"vItem.index\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"treeItemTpl\"\r\n              [ngTemplateOutletContext]=\"{\r\n                node: item,\r\n                path: [],\r\n                field: aggregation()?.column,\r\n                tpl: treeItemTpl,\r\n                parent: null\r\n              }\">\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</aggregation-panel>\r\n\r\n<ng-template\r\n  #treeItemTpl\r\n  let-node=\"node\"\r\n  let-path=\"path\"\r\n  let-field=\"field\"\r\n  let-tpl=\"tpl\"\r\n  let-parent=\"parent\">\r\n  <div\r\n    role=\"treeitem\"\r\n    [style.--level]=\"treeItemLevel(node)\"\r\n    [attr.aria-selected]=\"node.$selected ?? false\"\r\n    [attr.aria-expanded]=\"\r\n      node.hasChildren !== false ? (node.$opened ?? false) : null\r\n    \"\r\n    [attr.aria-disabled]=\"node.count === 0 ? 'true' : null\"\r\n    [attr.disabled]=\"node.count === 0 ? 'disabled' : null\">\r\n    <a\r\n      [attr.aria-label]=\"treeItemName(node) | syslang\"\r\n      [class]=\"\r\n        cn(\r\n          'flex grow items-center gap-2 p-1 leading-7',\r\n          node.count === 0 && 'disabled pointer-events-none',\r\n          (node.$selected || node.$selectedVisually) && ''\r\n        )\r\n      \"\r\n      (click)=\"selectTreeItem(node, parent, $event, true)\">\r\n      <button\r\n        variant=\"none\"\r\n        [iconOnly]=\"true\"\r\n        (click)=\"toggleTreeNode($event, node)\"\r\n        class=\"transition-transform ease-in hover:scale-125\"\r\n        aria-label=\"Open\">\r\n        <ChevronRight\r\n          [class]=\"\r\n            cn(\r\n              'size-4 translate-x-1',\r\n              node.$opened && 'rotate-90',\r\n              !node.hasChildren && 'hidden'\r\n            )\r\n          \"\r\n          width=\"16\"\r\n          height=\"16\" />\r\n      </button>\r\n      <input\r\n        type=\"checkbox\"\r\n        role=\"checkbox\"\r\n        value=\"{{ node.value }}\"\r\n        [attr.disabled]=\"node.count === 0 ? true : null\"\r\n        [attr.aria-disabled]=\"node.count === 0\"\r\n        (keydown.enter)=\"selectTreeItem(node, parent, $event)\"\r\n        [checked]=\"node.$selected || node.$selectedVisually\" />\r\n      @let icon = node.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\r\n      }\r\n      <span\r\n        [class]=\"\r\n          cn(\r\n            'line-clamp-1 break-all text-ellipsis',\r\n            quickFilter() && 'hover:underline'\r\n          )\r\n        \"\r\n        [title]=\"\r\n          quickFilter()\r\n            ? ((isTreeItemFiltered(node, field)\r\n                ? 'filters.removeFilter'\r\n                : 'filters.addFilter'\r\n              ) | transloco) +\r\n              ': ' +\r\n              (treeItemName(node) | syslang)\r\n            : (treeItemName(node) | syslang)\r\n        \"\r\n        (click)=\"onTreeItemTextClick(node, parent, $event)\">\r\n        @for (\r\n          chunk of (treeItemName(node) | syslang) ?? \"\"\r\n            | highlightWord: searchText() : 10;\r\n          track $index\r\n        ) {\r\n          <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\r\n            chunk.text\r\n          }}</span>\r\n        }\r\n      </span>\r\n      @if (showCount() && node.count > 0) {\r\n        <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\r\n          node.count\r\n        }}</span>\r\n      }\r\n    </a>\r\n    @if (node.hasChildren && node.$opened) {\r\n      <div role=\"group\">\r\n        @for (child of node.items; track $index) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"tpl\"\r\n            [ngTemplateOutletContext]=\"{\r\n              node: child,\r\n              path: treeChildrenPath(node, path),\r\n              field: field,\r\n              tpl: tpl,\r\n              parent: node\r\n            }\">\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["div[role=treeitem]:has(+div[role=treeitem]){margin-bottom:var(--agg-item-gap, 0)}div[role=treeitem]{display:block;-webkit-user-select:none;user-select:none}div[role=treeitem] a{padding-left:calc(var(--agg-tree-indent, .5rem) * var(--level, 0));line-height:var(--agg-item-height, inherit)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: TriangleAlertIcon, selector: "triangle-alert-icon, TriangleAlertIcon", inputs: ["class"] }, { kind: "component", type: AggregationPanelComponent, selector: "AggregationPanel, aggregation-panel", inputs: ["id", "collapsible", "collapsed", "isDate", "isEmpty", "aggregation", "showFiltersCount", "filtersCount", "hasFilters", "selection", "isAllSelected", "searchText", "itemsLength", "hasMore", "searchedItemsLength"], outputs: ["searchTextChange", "cleared", "applied", "allSelected", "allUnselected", "loadedMore"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: HighlightWordPipe, name: "highlightWord" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationTreeComponent, decorators: [{
             type: Component,
@@ -14103,7 +14128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     ], standalone: true, host: {
                         "[class]": 'cn("block h-[inherit] max-h-[inherit] w-[inherit]", class())',
                     }, template: "@if (!aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <triangle-alert-icon class=\"mr-1\" />\r\n    The aggregationTree component does not support list aggregations. Please use\r\n    the &lt;Aggregation /&gt; component instead.\r\n  </div>\r\n}\r\n<aggregation-panel\r\n  [id]=\"id()\"\r\n  [collapsible]=\"collapsible()\"\r\n  [collapsed]=\"collapsed()\"\r\n  [isEmpty]=\"isEmpty()\"\r\n  [isDate]=\"isDate()\"\r\n  [aggregation]=\"aggregation()\"\r\n  [showFiltersCount]=\"showFiltersCount()\"\r\n  [filtersCount]=\"filtersCount()\"\r\n  [hasFilters]=\"hasFilters()\"\r\n  [selection]=\"selection()\"\r\n  [isAllSelected]=\"isAllSelected()\"\r\n  [(searchText)]=\"searchText\"\r\n  [itemsLength]=\"items().length\"\r\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\r\n  [searchedItemsLength]=\"searchedItems().length\"\r\n  (cleared)=\"clear()\"\r\n  (applied)=\"apply()\"\r\n  (allSelected)=\"selectAll()\"\r\n  (allUnselected)=\"unselectAll()\"\r\n  (loadedMore)=\"loadMore()\">\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-(--scroll-height,20rem) w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"tree\"\r\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\r\n      <div\r\n        class=\"absolute top-0 left-0 w-full\"\r\n        [style.transform]=\"\r\n          'translateY(' +\r\n          (virtualizer.getVirtualItems()[0]\r\n            ? virtualizer.getVirtualItems()[0].start\r\n            : 0) +\r\n          'px)'\r\n        \">\r\n        @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\r\n          @let item = items()[vItem.index];\r\n          <div #virtualItem [attr.data-index]=\"vItem.index\">\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"treeItemTpl\"\r\n              [ngTemplateOutletContext]=\"{\r\n                node: item,\r\n                path: [],\r\n                field: aggregation()?.column,\r\n                tpl: treeItemTpl,\r\n                parent: null\r\n              }\">\r\n            </ng-container>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</aggregation-panel>\r\n\r\n<ng-template\r\n  #treeItemTpl\r\n  let-node=\"node\"\r\n  let-path=\"path\"\r\n  let-field=\"field\"\r\n  let-tpl=\"tpl\"\r\n  let-parent=\"parent\">\r\n  <div\r\n    role=\"treeitem\"\r\n    [style.--level]=\"treeItemLevel(node)\"\r\n    [attr.aria-selected]=\"node.$selected ?? false\"\r\n    [attr.aria-expanded]=\"\r\n      node.hasChildren !== false ? (node.$opened ?? false) : null\r\n    \"\r\n    [attr.aria-disabled]=\"node.count === 0 ? 'true' : null\"\r\n    [attr.disabled]=\"node.count === 0 ? 'disabled' : null\">\r\n    <a\r\n      [attr.aria-label]=\"treeItemName(node) | syslang\"\r\n      [class]=\"\r\n        cn(\r\n          'flex grow items-center gap-2 p-1 leading-7',\r\n          node.count === 0 && 'disabled pointer-events-none',\r\n          (node.$selected || node.$selectedVisually) && ''\r\n        )\r\n      \"\r\n      (click)=\"selectTreeItem(node, parent, $event, true)\">\r\n      <button\r\n        variant=\"none\"\r\n        [iconOnly]=\"true\"\r\n        (click)=\"toggleTreeNode($event, node)\"\r\n        class=\"transition-transform ease-in hover:scale-125\"\r\n        aria-label=\"Open\">\r\n        <ChevronRight\r\n          [class]=\"\r\n            cn(\r\n              'size-4 translate-x-1',\r\n              node.$opened && 'rotate-90',\r\n              !node.hasChildren && 'hidden'\r\n            )\r\n          \"\r\n          width=\"16\"\r\n          height=\"16\" />\r\n      </button>\r\n      <input\r\n        type=\"checkbox\"\r\n        role=\"checkbox\"\r\n        value=\"{{ node.value }}\"\r\n        [attr.disabled]=\"node.count === 0 ? true : null\"\r\n        [attr.aria-disabled]=\"node.count === 0\"\r\n        (keydown.enter)=\"selectTreeItem(node, parent, $event)\"\r\n        [checked]=\"node.$selected || node.$selectedVisually\" />\r\n      @let icon = node.icon;\r\n      @if (icon) {\r\n        <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\r\n      }\r\n      <span\r\n        [class]=\"\r\n          cn(\r\n            'line-clamp-1 break-all text-ellipsis',\r\n            quickFilter() && 'hover:underline'\r\n          )\r\n        \"\r\n        [title]=\"\r\n          quickFilter()\r\n            ? ((isTreeItemFiltered(node, field)\r\n                ? 'filters.removeFilter'\r\n                : 'filters.addFilter'\r\n              ) | transloco) +\r\n              ': ' +\r\n              (treeItemName(node) | syslang)\r\n            : (treeItemName(node) | syslang)\r\n        \"\r\n        (click)=\"onTreeItemTextClick(node, parent, $event)\">\r\n        @for (\r\n          chunk of (treeItemName(node) | syslang) ?? \"\"\r\n            | highlightWord: searchText() : 10;\r\n          track $index\r\n        ) {\r\n          <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\r\n            chunk.text\r\n          }}</span>\r\n        }\r\n      </span>\r\n      @if (showCount() && node.count > 0) {\r\n        <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\r\n          node.count\r\n        }}</span>\r\n      }\r\n    </a>\r\n    @if (node.hasChildren && node.$opened) {\r\n      <div role=\"group\">\r\n        @for (child of node.items; track $index) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"tpl\"\r\n            [ngTemplateOutletContext]=\"{\r\n              node: child,\r\n              path: treeChildrenPath(node, path),\r\n              field: field,\r\n              tpl: tpl,\r\n              parent: node\r\n            }\">\r\n          </ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: ["div[role=treeitem]:has(+div[role=treeitem]){margin-bottom:var(--agg-item-gap, 0)}div[role=treeitem]{display:block;-webkit-user-select:none;user-select:none}div[role=treeitem] a{padding-left:calc(var(--agg-tree-indent, .5rem) * var(--level, 0));line-height:var(--agg-item-height, inherit)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], virtualItems: [{ type: i0.ViewChildren, args: ["virtualItem", { isSignal: true }] }], scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], syncUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncUrl", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], virtualItems: [{ type: i0.ViewChildren, args: ["virtualItem", { isSignal: true }] }], scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
 
 class AggregationListComponent {
     cn = cn;
@@ -14116,6 +14141,13 @@ class AggregationListComponent {
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
     showFiltersCount = input(null, ...(ngDevMode ? [{ debugName: "showFiltersCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * When `false`, applying or clearing filters updates the store without
+     * synchronizing the URL (no browser history entry, not shareable/restorable).
+     *
+     * @default true
+     */
+    syncUrl = input(true, ...(ngDevMode ? [{ debugName: "syncUrl", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /* outputs */
     onSelect = output();
     onApply = output();
@@ -14132,6 +14164,7 @@ class AggregationListComponent {
         name: this.name,
         column: this.column,
         searchText: this.searchText,
+        syncUrl: this.syncUrl,
     });
     /* spread from base */
     aggregationsStore = this.base.aggregationsStore;
@@ -14218,7 +14251,7 @@ class AggregationListComponent {
     clear() {
         const agg = this.aggregation();
         if (agg) {
-            this.queryParamsStore.removeFilterByName(agg.name, agg.column);
+            this.queryParamsStore.removeFilterByName(agg.name, agg.column, { syncUrl: this.syncUrl() });
             this.selection.set(false);
             this.isAllSelected.set(false);
         }
@@ -14295,7 +14328,7 @@ class AggregationListComponent {
         return this.base.addCurrentFiltersToItems(this.aggregation());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AggregationListComponent, isStandalone: true, selector: "AggregationList, aggregation-list, aggregationlist", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\", class())" } }, viewQueries: [{ propertyName: "scrollElement", first: true, predicate: ["scrollElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <triangle-alert-icon class=\"mr-1\" />\r\n    The aggregation component no longer supports tree aggregations. Please use\r\n    the &lt;AggregationTree /&gt; component instead.\r\n  </div>\r\n}\r\n<aggregation-panel\r\n  [id]=\"id()\"\r\n  [collapsible]=\"collapsible()\"\r\n  [collapsed]=\"collapsed()\"\r\n  [isEmpty]=\"isEmpty()\"\r\n  [isDate]=\"isDate()\"\r\n  [aggregation]=\"aggregation()\"\r\n  [showFiltersCount]=\"showFiltersCount()\"\r\n  [filtersCount]=\"filtersCount()\"\r\n  [hasFilters]=\"hasFilters()\"\r\n  [selection]=\"selection()\"\r\n  [isAllSelected]=\"isAllSelected()\"\r\n  [(searchText)]=\"searchText\"\r\n  [itemsLength]=\"items().length\"\r\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\r\n  [searchedItemsLength]=\"searchedItems().length\"\r\n  (cleared)=\"clear()\"\r\n  (applied)=\"apply()\"\r\n  (allSelected)=\"selectAll()\"\r\n  (allUnselected)=\"unselectAll()\"\r\n  (loadedMore)=\"loadMore()\">\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-(--scroll-height,20rem) w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"listbox\"\r\n      aria-multiselectable=\"true\"\r\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\r\n      @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\r\n        @let item = items()[vItem.index];\r\n        <div\r\n          class=\"absolute w-full\"\r\n          [style.transform]=\"'translateY(' + vItem.start + 'px)'\"\r\n          role=\"option\"\r\n          [attr.aria-selected]=\"item.$selected ?? false\"\r\n          [attr.aria-disabled]=\"item.count === 0 ? 'true' : null\"\r\n          [attr.disabled]=\"item.count === 0 ? 'disabled' : null\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTpl\"\r\n            [ngTemplateOutletContext]=\"{\r\n              $implicit: item,\r\n              field: aggregation()?.column\r\n            }\">\r\n          </ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</aggregation-panel>\r\n\r\n<ng-template #listItemTpl let-item let-field=\"field\">\r\n  <a\r\n    [attr.aria-label]=\"listItemName(item) | syslang\"\r\n    [class]=\"\r\n      cn(\r\n        'flex grow items-center gap-2 p-1 leading-7',\r\n        item.count === 0 && 'disabled pointer-events-none'\r\n      )\r\n    \"\r\n    (click)=\"selectListItem(item, $event)\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"checkbox\"\r\n      value=\"{{ item.value }}\"\r\n      [attr.disabled]=\"item.count === 0 ? true : null\"\r\n      [attr.aria-disabled]=\"item.count === 0\"\r\n      (keydown.enter)=\"selectListItem(item, $event)\"\r\n      [checked]=\"item.$selected\" />\r\n    @let icon = item.icon;\r\n    @if (icon) {\r\n      <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\r\n    }\r\n    <span\r\n      [class]=\"\r\n        cn(\r\n          'line-clamp-1 break-all text-ellipsis',\r\n          quickFilter() && 'hover:underline'\r\n        )\r\n      \"\r\n      [title]=\"\r\n        quickFilter()\r\n          ? ((isListItemFiltered(item, field)\r\n              ? 'filters.removeFilter'\r\n              : 'filters.addFilter'\r\n            ) | transloco) +\r\n            ': ' +\r\n            (listItemName(item) | syslang)\r\n          : (listItemName(item) | syslang)\r\n      \"\r\n      (click)=\"onListItemTextClick(item, $event)\">\r\n      @for (\r\n        chunk of (listItemName(item) | syslang) ?? \"\"\r\n          | highlightWord: searchText() : 10;\r\n        track $index\r\n      ) {\r\n        <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\r\n          chunk.text\r\n        }}</span>\r\n      }\r\n    </span>\r\n    @if (showCount() && item.count > 0) {\r\n      <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\r\n        item.count\r\n      }}</span>\r\n    }\r\n  </a>\r\n</ng-template>\r\n", styles: ["div[role=option]{display:block;-webkit-user-select:none;user-select:none}div[role=option] a{padding-left:var(--agg-tree-indent, .5rem);line-height:var(--agg-item-height, inherit)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: TriangleAlertIcon, selector: "triangle-alert-icon, TriangleAlertIcon", inputs: ["class"] }, { kind: "component", type: AggregationPanelComponent, selector: "AggregationPanel, aggregation-panel", inputs: ["id", "collapsible", "collapsed", "isDate", "isEmpty", "aggregation", "showFiltersCount", "filtersCount", "hasFilters", "selection", "isAllSelected", "searchText", "itemsLength", "hasMore", "searchedItemsLength"], outputs: ["searchTextChange", "cleared", "applied", "allSelected", "allUnselected", "loadedMore"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: HighlightWordPipe, name: "highlightWord" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AggregationListComponent, isStandalone: true, selector: "AggregationList, aggregation-list, aggregationlist", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\", class())" } }, viewQueries: [{ propertyName: "scrollElement", first: true, predicate: ["scrollElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <triangle-alert-icon class=\"mr-1\" />\r\n    The aggregation component no longer supports tree aggregations. Please use\r\n    the &lt;AggregationTree /&gt; component instead.\r\n  </div>\r\n}\r\n<aggregation-panel\r\n  [id]=\"id()\"\r\n  [collapsible]=\"collapsible()\"\r\n  [collapsed]=\"collapsed()\"\r\n  [isEmpty]=\"isEmpty()\"\r\n  [isDate]=\"isDate()\"\r\n  [aggregation]=\"aggregation()\"\r\n  [showFiltersCount]=\"showFiltersCount()\"\r\n  [filtersCount]=\"filtersCount()\"\r\n  [hasFilters]=\"hasFilters()\"\r\n  [selection]=\"selection()\"\r\n  [isAllSelected]=\"isAllSelected()\"\r\n  [(searchText)]=\"searchText\"\r\n  [itemsLength]=\"items().length\"\r\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\r\n  [searchedItemsLength]=\"searchedItems().length\"\r\n  (cleared)=\"clear()\"\r\n  (applied)=\"apply()\"\r\n  (allSelected)=\"selectAll()\"\r\n  (allUnselected)=\"unselectAll()\"\r\n  (loadedMore)=\"loadMore()\">\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-(--scroll-height,20rem) w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"listbox\"\r\n      aria-multiselectable=\"true\"\r\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\r\n      @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\r\n        @let item = items()[vItem.index];\r\n        <div\r\n          class=\"absolute w-full\"\r\n          [style.transform]=\"'translateY(' + vItem.start + 'px)'\"\r\n          role=\"option\"\r\n          [attr.aria-selected]=\"item.$selected ?? false\"\r\n          [attr.aria-disabled]=\"item.count === 0 ? 'true' : null\"\r\n          [attr.disabled]=\"item.count === 0 ? 'disabled' : null\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTpl\"\r\n            [ngTemplateOutletContext]=\"{\r\n              $implicit: item,\r\n              field: aggregation()?.column\r\n            }\">\r\n          </ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</aggregation-panel>\r\n\r\n<ng-template #listItemTpl let-item let-field=\"field\">\r\n  <a\r\n    [attr.aria-label]=\"listItemName(item) | syslang\"\r\n    [class]=\"\r\n      cn(\r\n        'flex grow items-center gap-2 p-1 leading-7',\r\n        item.count === 0 && 'disabled pointer-events-none'\r\n      )\r\n    \"\r\n    (click)=\"selectListItem(item, $event)\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"checkbox\"\r\n      value=\"{{ item.value }}\"\r\n      [attr.disabled]=\"item.count === 0 ? true : null\"\r\n      [attr.aria-disabled]=\"item.count === 0\"\r\n      (keydown.enter)=\"selectListItem(item, $event)\"\r\n      [checked]=\"item.$selected\" />\r\n    @let icon = item.icon;\r\n    @if (icon) {\r\n      <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\r\n    }\r\n    <span\r\n      [class]=\"\r\n        cn(\r\n          'line-clamp-1 break-all text-ellipsis',\r\n          quickFilter() && 'hover:underline'\r\n        )\r\n      \"\r\n      [title]=\"\r\n        quickFilter()\r\n          ? ((isListItemFiltered(item, field)\r\n              ? 'filters.removeFilter'\r\n              : 'filters.addFilter'\r\n            ) | transloco) +\r\n            ': ' +\r\n            (listItemName(item) | syslang)\r\n          : (listItemName(item) | syslang)\r\n      \"\r\n      (click)=\"onListItemTextClick(item, $event)\">\r\n      @for (\r\n        chunk of (listItemName(item) | syslang) ?? \"\"\r\n          | highlightWord: searchText() : 10;\r\n        track $index\r\n      ) {\r\n        <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\r\n          chunk.text\r\n        }}</span>\r\n      }\r\n    </span>\r\n    @if (showCount() && item.count > 0) {\r\n      <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\r\n        item.count\r\n      }}</span>\r\n    }\r\n  </a>\r\n</ng-template>\r\n", styles: ["div[role=option]{display:block;-webkit-user-select:none;user-select:none}div[role=option] a{padding-left:var(--agg-tree-indent, .5rem);line-height:var(--agg-item-height, inherit)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: TriangleAlertIcon, selector: "triangle-alert-icon, TriangleAlertIcon", inputs: ["class"] }, { kind: "component", type: AggregationPanelComponent, selector: "AggregationPanel, aggregation-panel", inputs: ["id", "collapsible", "collapsed", "isDate", "isEmpty", "aggregation", "showFiltersCount", "filtersCount", "hasFilters", "selection", "isAllSelected", "searchText", "itemsLength", "hasMore", "searchedItemsLength"], outputs: ["searchTextChange", "cleared", "applied", "allSelected", "allUnselected", "loadedMore"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: HighlightWordPipe, name: "highlightWord" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationListComponent, decorators: [{
             type: Component,
@@ -14312,7 +14345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     ], standalone: true, host: {
                         "[class]": 'cn("block h-[inherit] max-h-[inherit]", class())',
                     }, template: "@if (aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <triangle-alert-icon class=\"mr-1\" />\r\n    The aggregation component no longer supports tree aggregations. Please use\r\n    the &lt;AggregationTree /&gt; component instead.\r\n  </div>\r\n}\r\n<aggregation-panel\r\n  [id]=\"id()\"\r\n  [collapsible]=\"collapsible()\"\r\n  [collapsed]=\"collapsed()\"\r\n  [isEmpty]=\"isEmpty()\"\r\n  [isDate]=\"isDate()\"\r\n  [aggregation]=\"aggregation()\"\r\n  [showFiltersCount]=\"showFiltersCount()\"\r\n  [filtersCount]=\"filtersCount()\"\r\n  [hasFilters]=\"hasFilters()\"\r\n  [selection]=\"selection()\"\r\n  [isAllSelected]=\"isAllSelected()\"\r\n  [(searchText)]=\"searchText\"\r\n  [itemsLength]=\"items().length\"\r\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\r\n  [searchedItemsLength]=\"searchedItems().length\"\r\n  (cleared)=\"clear()\"\r\n  (applied)=\"apply()\"\r\n  (allSelected)=\"selectAll()\"\r\n  (allUnselected)=\"unselectAll()\"\r\n  (loadedMore)=\"loadMore()\">\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-(--scroll-height,20rem) w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"listbox\"\r\n      aria-multiselectable=\"true\"\r\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\r\n      @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\r\n        @let item = items()[vItem.index];\r\n        <div\r\n          class=\"absolute w-full\"\r\n          [style.transform]=\"'translateY(' + vItem.start + 'px)'\"\r\n          role=\"option\"\r\n          [attr.aria-selected]=\"item.$selected ?? false\"\r\n          [attr.aria-disabled]=\"item.count === 0 ? 'true' : null\"\r\n          [attr.disabled]=\"item.count === 0 ? 'disabled' : null\">\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"listItemTpl\"\r\n            [ngTemplateOutletContext]=\"{\r\n              $implicit: item,\r\n              field: aggregation()?.column\r\n            }\">\r\n          </ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</aggregation-panel>\r\n\r\n<ng-template #listItemTpl let-item let-field=\"field\">\r\n  <a\r\n    [attr.aria-label]=\"listItemName(item) | syslang\"\r\n    [class]=\"\r\n      cn(\r\n        'flex grow items-center gap-2 p-1 leading-7',\r\n        item.count === 0 && 'disabled pointer-events-none'\r\n      )\r\n    \"\r\n    (click)=\"selectListItem(item, $event)\">\r\n    <input\r\n      type=\"checkbox\"\r\n      role=\"checkbox\"\r\n      value=\"{{ item.value }}\"\r\n      [attr.disabled]=\"item.count === 0 ? true : null\"\r\n      [attr.aria-disabled]=\"item.count === 0\"\r\n      (keydown.enter)=\"selectListItem(item, $event)\"\r\n      [checked]=\"item.$selected\" />\r\n    @let icon = item.icon;\r\n    @if (icon) {\r\n      <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\r\n    }\r\n    <span\r\n      [class]=\"\r\n        cn(\r\n          'line-clamp-1 break-all text-ellipsis',\r\n          quickFilter() && 'hover:underline'\r\n        )\r\n      \"\r\n      [title]=\"\r\n        quickFilter()\r\n          ? ((isListItemFiltered(item, field)\r\n              ? 'filters.removeFilter'\r\n              : 'filters.addFilter'\r\n            ) | transloco) +\r\n            ': ' +\r\n            (listItemName(item) | syslang)\r\n          : (listItemName(item) | syslang)\r\n      \"\r\n      (click)=\"onListItemTextClick(item, $event)\">\r\n      @for (\r\n        chunk of (listItemName(item) | syslang) ?? \"\"\r\n          | highlightWord: searchText() : 10;\r\n        track $index\r\n      ) {\r\n        <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\r\n          chunk.text\r\n        }}</span>\r\n      }\r\n    </span>\r\n    @if (showCount() && item.count > 0) {\r\n      <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\r\n        item.count\r\n      }}</span>\r\n    }\r\n  </a>\r\n</ng-template>\r\n", styles: ["div[role=option]{display:block;-webkit-user-select:none;user-select:none}div[role=option] a{padding-left:var(--agg-tree-indent, .5rem);line-height:var(--agg-item-height, inherit)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], syncUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncUrl", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
 
 /**
  * The `AggregationComponent` is responsible for rendering the appropriate aggregation component based on the type of aggregation (date, tree, or list). It uses the `AggregationsService` to retrieve the aggregation data and determines which component to display based on the column type and whether it is a tree structure. The component also provides inputs for configuring its behavior, such as collapsibility, searchability, and showing filter counts.
@@ -14381,6 +14414,16 @@ class AggregationComponent {
      */
     searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
     expandedLevel = input(undefined, ...(ngDevMode ? [{ debugName: "expandedLevel", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+    /**
+     * Controls whether applying or clearing a filter synchronizes the URL.
+     *
+     * When `true` (default), the applied filters are pushed into the URL query params
+     * (shareable link, browser history, restored on refresh). When `false`, the filter
+     * is applied to the store only — the URL and browser history are left untouched.
+     *
+     * @default true
+     */
+    syncUrl = input(true, ...(ngDevMode ? [{ debugName: "syncUrl", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /**
      * An output event that emits an array of selected `AggregationItem` objects when the user selects items in the aggregation component. This allows parent components to listen for selection changes and react accordingly, such as applying filters or updating the UI based on the selected items.
      */
@@ -14426,7 +14469,7 @@ class AggregationComponent {
         return this.appStore.isDateColumn(column);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AggregationComponent, isStandalone: true, selector: "Aggregation, aggregation", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\",class())" } }, viewQueries: [{ propertyName: "aggregationDate", first: true, predicate: AggregationDateComponent, descendants: true, isSignal: true }, { propertyName: "aggregationTree", first: true, predicate: AggregationTreeComponent, descendants: true, isSignal: true }, { propertyName: "aggregationList", first: true, predicate: AggregationListComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AggregationComponent, isStandalone: true, selector: "Aggregation, aggregation", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\",class())" } }, viewQueries: [{ propertyName: "aggregationDate", first: true, predicate: AggregationDateComponent, descendants: true, isSignal: true }, { propertyName: "aggregationTree", first: true, predicate: AggregationTreeComponent, descendants: true, isSignal: true }, { propertyName: "aggregationList", first: true, predicate: AggregationListComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (isDate(aggregation()?.column)) {
     <AggregationDate
       [id]="id()"
@@ -14436,6 +14479,7 @@ class AggregationComponent {
       [collapsible]="collapsible()"
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
+      [syncUrl]="syncUrl()"
       [title]="{ label: 'Date', icon: 'far fa-calendar-day' }"
       (onApply)="onApply.emit($event)"
       (onClear)="onClear.emit($event)"
@@ -14449,6 +14493,7 @@ class AggregationComponent {
       [collapsible]="collapsible()"
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
+      [syncUrl]="syncUrl()"
       [expandedLevel]="expandedLevel()"
       (onSelect)="onSelect.emit($event)"
       (onApply)="onApply.emit($event)"
@@ -14464,12 +14509,13 @@ class AggregationComponent {
       [collapsible]="collapsible()"
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
+      [syncUrl]="syncUrl()"
       (onSelect)="onSelect.emit($event)"
       (onApply)="onApply.emit($event)"
       (onClear)="onClear.emit($event)"
       />
   }
-  `, isInline: true, dependencies: [{ kind: "component", type: AggregationListComponent, selector: "AggregationList, aggregation-list, aggregationlist", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "searchText"], outputs: ["onSelect", "onApply", "onClear", "searchTextChange"] }, { kind: "component", type: AggregationTreeComponent, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "expandedLevel", "searchText"], outputs: ["onSelect", "onApply", "onClear", "searchTextChange"] }, { kind: "component", type: AggregationDateComponent, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: ["name", "column", "id", "collapsible", "collapsed", "searchable", "showFiltersCount", "title", "displayEmptyDistributionIntervals", "searchText"], outputs: ["onSelect", "onApply", "onClear", "searchTextChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: AggregationListComponent, selector: "AggregationList, aggregation-list, aggregationlist", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "syncUrl", "searchText"], outputs: ["onSelect", "onApply", "onClear", "searchTextChange"] }, { kind: "component", type: AggregationTreeComponent, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "expandedLevel", "syncUrl", "searchText"], outputs: ["onSelect", "onApply", "onClear", "searchTextChange"] }, { kind: "component", type: AggregationDateComponent, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: ["name", "column", "id", "collapsible", "collapsed", "searchable", "showFiltersCount", "syncUrl", "title", "displayEmptyDistributionIntervals", "searchText"], outputs: ["onSelect", "onApply", "onClear", "searchTextChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AggregationComponent, decorators: [{
             type: Component,
@@ -14486,6 +14532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       [collapsible]="collapsible()"
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
+      [syncUrl]="syncUrl()"
       [title]="{ label: 'Date', icon: 'far fa-calendar-day' }"
       (onApply)="onApply.emit($event)"
       (onClear)="onClear.emit($event)"
@@ -14499,6 +14546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       [collapsible]="collapsible()"
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
+      [syncUrl]="syncUrl()"
       [expandedLevel]="expandedLevel()"
       (onSelect)="onSelect.emit($event)"
       (onApply)="onApply.emit($event)"
@@ -14514,6 +14562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
       [collapsible]="collapsible()"
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
+      [syncUrl]="syncUrl()"
       (onSelect)="onSelect.emit($event)"
       (onApply)="onApply.emit($event)"
       (onClear)="onClear.emit($event)"
@@ -14524,7 +14573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         "[class]": 'cn("block h-[inherit] max-h-[inherit]",class())'
                     }
                 }]
-        }], propDecorators: { aggregationDate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationDateComponent), { isSignal: true }] }], aggregationTree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationTreeComponent), { isSignal: true }] }], aggregationList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationListComponent), { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }] } });
+        }], propDecorators: { aggregationDate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationDateComponent), { isSignal: true }] }], aggregationTree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationTreeComponent), { isSignal: true }] }], aggregationList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationListComponent), { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], syncUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncUrl", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }] } });
 
 class AsideFiltersComponent {
     cn = cn;
@@ -14558,7 +14607,7 @@ class AsideFiltersComponent {
         showFiltersCount />
     }
   </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel"], outputs: ["onSelect", "onApply", "onClear"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel", "syncUrl"], outputs: ["onSelect", "onApply", "onClear"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AsideFiltersComponent, decorators: [{
             type: Component,
@@ -14709,7 +14758,7 @@ class FilterButtonComponent {
       }
       </PopoverContent>
     </Popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: PopoverComponent, selector: "popover, Popover", inputs: ["disabled", "closeOnScroll"], outputs: ["closed"] }, { kind: "directive", type: PopoverContentComponent, selector: "popover-content, PopoverContent, popovercontent", inputs: ["class", "position", "keepOpen", "offset", "strategy"], exportAs: ["popoverContent"] }, { kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel"], outputs: ["onSelect", "onApply", "onClear"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size", "aria-label"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "pipe", type: OperatorPipe, name: "operator" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: PopoverComponent, selector: "popover, Popover", inputs: ["disabled", "closeOnScroll"], outputs: ["closed"] }, { kind: "directive", type: PopoverContentComponent, selector: "popover-content, PopoverContent, popovercontent", inputs: ["class", "position", "keepOpen", "offset", "strategy"], exportAs: ["popoverContent"] }, { kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel", "syncUrl"], outputs: ["onSelect", "onApply", "onClear"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size", "aria-label"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "pipe", type: OperatorPipe, name: "operator" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterButtonComponent, decorators: [{
             type: Component,
@@ -14889,7 +14938,7 @@ class MoreComponent {
         [name]="filter.name"
         [column]="filter.column" />
     }
-  `, isInline: true, styles: [":host{scrollbar-width:none}\n"], dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel"], outputs: ["onSelect", "onApply", "onClear"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, styles: [":host{scrollbar-width:none}\n"], dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel", "syncUrl"], outputs: ["onSelect", "onApply", "onClear"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MoreComponent, decorators: [{
             type: Component,
@@ -16275,7 +16324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
   `, styles: [":host ul{scrollbar-width:thin}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
-const SUPPORTED_LANGUAGES = ["en", "fr"];
+const SUPPORTED_LANGUAGES = ["en", "fr", "de"];
 class UserProfileFormComponent {
     principalStore = inject(PrincipalStore);
     userSettingsStore = inject(UserSettingsStore);
@@ -16297,7 +16346,8 @@ class UserProfileFormComponent {
     currentLanguage = model(...(ngDevMode ? [undefined, { debugName: "currentLanguage" }] : []));
     AllLanguages = [
         { code: "en", label: "English", icon: FlagEnglishIcon },
-        { code: "fr", label: "Français", icon: FlagFrenchIcon }
+        { code: "fr", label: "Français", icon: FlagFrenchIcon },
+        { code: "de", label: "Deutsch", icon: FlagGermanIcon }
     ];
     changingPassword = signal(false, ...(ngDevMode ? [{ debugName: "changingPassword" }] : []));
     customData = computed(() => (this.appStore.general()?.features?.userProfile?.customData || [])