@sinequa/atomic-angular 0.4.28 → 0.4.45

package/fesm2022/sinequa-atomic-angular.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, HostBinding, Component, Pipe, InjectionToken, computed, ChangeDetectorRef, DestroyRef, LOCALE_ID, Inject, Optional, input, output, signal, effect, assertInInjectionContext, runInInjectionContext, Injector, EventEmitter, Directive, viewChild, ElementRef, afterNextRender, untracked, linkedSignal, model, TemplateRef, HostListener, Renderer2, contentChildren, contentChild, booleanAttribute, resource, ViewContainerRef, viewChildren, numberAttribute, afterEveryRender } from '@angular/core';
+import { Injectable, inject, HostBinding, Component, Pipe, InjectionToken, computed, ChangeDetectorRef, DestroyRef, LOCALE_ID, Inject, Optional, input, output, signal, effect, assertInInjectionContext, runInInjectionContext, Injector, EventEmitter, Directive, viewChild, ElementRef, afterNextRender, untracked, linkedSignal, model, TemplateRef, HostListener, Renderer2, contentChildren, contentChild, booleanAttribute, ChangeDetectionStrategy, resource, ViewContainerRef, viewChildren, numberAttribute, afterEveryRender } from '@angular/core';
 import { BehaviorSubject, Subscription, catchError, EMPTY, firstValueFrom, map, Subject, of, tap, throwError, filter, shareReplay, fromEvent, debounceTime, from, switchMap } from 'rxjs';
 import { TranslocoService, TranslocoPipe, provideTranslocoScope } from '@jsverse/transloco';
-import { DropdownComponent, DropdownContentComponent, InputComponent, ButtonComponent, cn, EllipsisIcon, ChevronRightIcon, MenuComponent, MenuContentComponent, MenuItemComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, SwitchComponent, SelectOptionDirective, DialogService, TabsComponent, TabsListComponent, TabComponent, ChevronLeftIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, Separator, SheetCloseDirective, SheetService, ButtonGroup, InputGroupInput, InputGroupComponent, InputGroupAddonComponent, SearchIcon, FilterIcon, DateRangePickerDirective, LoadingCircleIconComponent, CircleCheckIconComponent, PopoverComponent, CardComponent, CardHeaderComponent, CardContentComponent, CardFooterComponent, PopoverContentComponent, BookmarkIcon, UserIcon, TrashIcon, FolderIcon, VerticalDividerComponent, BreakpointObserverService, HorizontalDividerComponent, FlagEnglishIconComponent, FlagFrenchIconComponent, EditIcon, UndoIcon, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@sinequa/ui';
+import { DropdownComponent, DropdownContentComponent, InputComponent, ButtonComponent, cn, EllipsisIcon, ChevronRightIcon, MenuComponent, MenuContentComponent, MenuItemComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, SwitchComponent, SelectOptionDirective, DialogService, TabsComponent, TabsListComponent, TabComponent, ChevronLeftIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, Separator, SheetCloseDirective, SheetService, DateRangePickerDirective, DatepickerDirective, ButtonGroup, InputGroupInput, InputGroupComponent, InputGroupAddonComponent, SearchIcon, FilterIcon, LoadingCircleIconComponent, CircleCheckIconComponent, PopoverComponent, CardComponent, CardHeaderComponent, CardContentComponent, CardFooterComponent, PopoverContentComponent, BookmarkIcon, UserIcon, TrashIcon, FolderIcon, VerticalDividerComponent, BreakpointObserverService, HorizontalDividerComponent, FlagEnglishIconComponent, FlagFrenchIconComponent, EditIcon, UndoIcon, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent } from '@sinequa/ui';
 import highlightWords from 'highlight-words';
 import { ActivatedRoute, Router, NavigationEnd, RouterLink, RouterModule } from '@angular/router';
 import { withDevtools } from '@angular-architects/ngrx-toolkit';
 import { signalStore, signalStoreFeature, withState, withMethods, patchState, getState, withComputed } from '@ngrx/signals';
 import { globalConfig, EngineType, extraColumns, sysLang, getQueryParamsFromUrl, logout, login, info, warn, error, setGlobalConfig, notify, addConcepts, queryParamsFromUrl, patchUserSettings, deleteUserSettings, fetchUserSettings, buildPathsAndLevels, escapeExpr, isAuthenticated, isExpired, debug, fetchSuggest, isObject, Audit, getMetadata, bisect, isNotInputEvent, fetchSponsoredLinks, fetchQuery, translateAggregationToDateOptions, aggItemRegex, parseValueAndOperatorFromItem, fetchSuggestField, fetchSimilarDocuments, fetchChangePassword, fetchSendPasswordResetEmail, expiresSoon, suggestionsToTreeAggregationNodes, labels, fetchLabels, guid, getRelativeDate, createUserProfile, deleteUserProfileProperty, patchUserProfile, isJsonable, addAuditAdditionalInfo, getToken, setToken, createHeaders } from '@sinequa/atomic';
 import { HttpClient, HttpParams, httpResource, HttpResponse, HttpHeaders, HttpContextToken } from '@angular/common/http';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { DatePipe, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, Location, NgTemplateOutlet, NgStyle, NgClass, NgComponentOutlet } from '@angular/common';
 import { Title, DomSanitizer } from '@angular/platform-browser';
 import { cva } from 'class-variance-authority';
@@ -812,14 +812,19 @@ class OperatorPipe {
             return `> ${new Intl.DateTimeFormat(locale).format(new Date(start))} ≤ ${new Intl.DateTimeFormat(locale).format(new Date(end))}`;
         }
         if (filter?.operator === 'and') {
-            const value = filter?.display ?? filter?.value ?? '';
-            const date = new Date(value);
-            if (isNaN(date.getTime())) {
-                return value;
+            const filters = filter.filters;
+            const from = filters?.find((f) => f.operator === 'gte')?.value;
+            const to = filters?.find((f) => f.operator === 'lte')?.value;
+            if (from && to) {
+                return `≥ ${new Intl.DateTimeFormat(locale).format(new Date(from))} ≤ ${new Intl.DateTimeFormat(locale).format(new Date(to))}`;
             }
-            else {
-                return new Intl.DateTimeFormat(locale).format(date);
+            if (from) {
+                return `≥ ${new Intl.DateTimeFormat(locale).format(new Date(from))}`;
             }
+            if (to) {
+                return `≤ ${new Intl.DateTimeFormat(locale).format(new Date(to))}`;
+            }
+            return filter?.display ?? filter?.value ?? '';
         }
         const date = new Date(filter?.value || '');
         if (isNaN(date.getTime())) {
@@ -2814,13 +2819,34 @@ function withUserSettingsFeatures() {
                 alerts: [],
                 assistants: {},
                 language: undefined,
-                collapseAssistant: undefined
+                collapseAssistant: undefined,
+                agents: { isDebugMode: false }
             });
         }
     })));
 }
 
-const UserSettingsStore = signalStore({ providedIn: 'root' }, withDevtools('UserSettings'), withBookmarkFeatures(), withRecentSearchesFeatures(), withSavedSearchesFeatures(), withBasketsFeatures(), withAssistantFeatures(), withUserSettingsFeatures(), withAlertsFeatures(), withDarkModeFeatures());
+function withAgentsFeatures() {
+    return signalStoreFeature(withState({
+        agents: { isDebugMode: false }
+    }), withComputed((store) => ({
+        isDebugMode: computed(() => store.agents()?.isDebugMode ?? false)
+    })), withMethods((store) => ({
+        async setDebugMode(value) {
+            try {
+                await patchUserSettings({ agents: { ...store.agents(), isDebugMode: value } }, { type: 'Agent_DebugMode_Toggle' });
+                patchState(store, (state) => ({
+                    agents: { ...state.agents, isDebugMode: value }
+                }));
+            }
+            catch (e) {
+                error('setDebugMode failed', e);
+            }
+        }
+    })));
+}
+
+const UserSettingsStore = signalStore({ providedIn: 'root' }, withDevtools('UserSettings'), withBookmarkFeatures(), withRecentSearchesFeatures(), withSavedSearchesFeatures(), withBasketsFeatures(), withAssistantFeatures(), withUserSettingsFeatures(), withAlertsFeatures(), withAgentsFeatures(), withDarkModeFeatures());
 
 class QueryService {
     http = inject(HttpClient);
@@ -3656,18 +3682,26 @@ class ApplicationService {
         }
         const { light, dark, alt } = general.logo || {};
         document.documentElement.style.setProperty("--logo-alt-text", `'${alt || general.name}'`);
+        // light mode logo configuration
         if (light?.small) {
             document.documentElement.style.setProperty("--logo-light-small", `url('${light.small}')`);
         }
         if (light?.large) {
             document.documentElement.style.setProperty("--logo-light-large", `url('${light.large}')`);
         }
+        if (light?.sidebar) {
+            document.documentElement.style.setProperty("--logo-light-sidebar", `url('${light.sidebar}')`);
+        }
+        // dark mode logo configuration
         if (dark?.small) {
             document.documentElement.style.setProperty("--logo-dark-small", `url('${dark.small}')`);
         }
         if (dark?.large) {
             document.documentElement.style.setProperty("--logo-dark-large", `url('${dark.large}')`);
         }
+        if (dark?.sidebar) {
+            document.documentElement.style.setProperty("--logo-dark-sidebar", `url('${dark.sidebar}')`);
+        }
     }
     /**
      * Sets the document title with optional application name prefix.
@@ -4140,9 +4174,10 @@ class PreviewService {
         };
         // reset preview data
         this.previewData = undefined;
+        this.events.set("loading");
         return this.http
             .post(`${this.API_URL}/preview`, body)
-            .pipe(tap((data) => this.setPreviewData(data)));
+            .pipe(tap((data) => this.setPreviewData(data)), tap(() => this.events.set("loaded")));
     }
     /**
      * Closes the preview with the specified ID and updates the audit log.
@@ -4885,7 +4920,7 @@ class PagerComponent {
         </button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
@@ -5106,7 +5141,7 @@ class DocumentLocatorComponent {
         </menu>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: EllipsisIcon, selector: "ellipsis-icon, EllipsisIcon, ellipsisicon", inputs: ["class", "orientation"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "component", type: SourceComponent, selector: "source, Source", inputs: ["collection", "connector"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: EllipsisIcon, selector: "ellipsis-icon, EllipsisIcon, ellipsisicon", inputs: ["class", "orientation"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "component", type: SourceComponent, selector: "source, Source", inputs: ["collection", "connector"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DocumentLocatorComponent, decorators: [{
             type: Component,
@@ -5396,10 +5431,13 @@ class MissingTermsComponent {
         return this.article()
             .termspresence?.filter(tp => tp.presence === 'missing')
             .map(tp => {
-            const text = (query.text || '').replace(new RegExp(`\\b${tp.term}\\b`, 'gi'), '');
+            const bracketMatch = tp.term.match(/^\[(.+)\]$/);
+            const cleanTerm = bracketMatch ? bracketMatch[1] : tp.term;
+            const escapedTerm = cleanTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const text = (query.text || '').replace(new RegExp(`\\b${escapedTerm}\\b`, 'gi'), '').replace(/\s+/g, ' ').trim();
             return {
-                value: tp.term,
-                queryParams: { q: `${text} +[${tp.term}]` }
+                value: cleanTerm,
+                queryParams: { q: `${text} +[${cleanTerm}]` }
             };
         });
     }, ...(ngDevMode ? [{ debugName: "missingTerms" }] : []));
@@ -5531,7 +5569,7 @@ class CollectionsDialog {
                 {{ collection.name }}
               </li>
             } @empty {
-              <li class="py-4 text-center text-neutral-500">
+              <li class="list-none py-4 text-center text-neutral-500">
                 {{ 'collections.noCollections' | transloco }}
               </li>
             }
@@ -5575,7 +5613,7 @@ class CollectionsDialog {
         </DialogFooter>
       </DialogContent>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { 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: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { 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: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CollectionsDialog, decorators: [{
             type: Component,
@@ -5615,7 +5653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 {{ collection.name }}
               </li>
             } @empty {
-              <li class="py-4 text-center text-neutral-500">
+              <li class="list-none py-4 text-center text-neutral-500">
                 {{ 'collections.noCollections' | transloco }}
               </li>
             }
@@ -5901,7 +5939,7 @@ class ExportDialog {
         </DialogFooter>
       </DialogContent>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "component", type: SwitchComponent, selector: "switch, Switch", inputs: ["toggled", "disabled", "class", "variant", "size"], outputs: ["toggledChange"] }, { kind: "directive", type: SelectOptionDirective, selector: "option", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "component", type: SwitchComponent, selector: "switch, Switch", inputs: ["toggled", "disabled", "class", "variant", "size"], outputs: ["toggledChange"] }, { kind: "directive", type: SelectOptionDirective, selector: "option", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ExportDialog, decorators: [{
             type: Component,
@@ -6909,11 +6947,18 @@ class OverflowManagerDirective {
     /**
      * Counts the number of items that can fit before the stop element.
      * Emits the count if it has changed.
-     * Debounces the count to avoid multiple updates.
      */
     countItems() {
         if (!this.items() || this.items().length === 0 || !this.stop())
             return;
+        // Reset all items to their natural size before measuring so that previously
+        // hidden items (display: none) don't corrupt the layout and position of
+        // their siblings.
+        this.items().forEach((item) => {
+            item.nativeElement.style.display = "";
+        });
+        // getBoundingClientRect() forces a synchronous reflow, so positions are
+        // accurate after the reset above.
         const stopRect = this.stop().nativeElement.getBoundingClientRect();
         const itemsRects = this.items().map((item) => item.nativeElement.getBoundingClientRect());
         let count = 0;
@@ -6927,10 +6972,14 @@ class OverflowManagerDirective {
             else
                 break;
         }
-        if (this._lastCount === count)
-            return;
-        this._lastCount = count;
-        this.count.emit(count);
+        if (this._lastCount !== count) {
+            this._lastCount = count;
+            this.count.emit(count);
+        }
+        else {
+            // Count unchanged but items were reset above — re-apply the hidden state.
+            this.toggleToCount(count);
+        }
     }
     /**
      * Toggles the visibility of the items based on the count.
@@ -6938,11 +6987,9 @@ class OverflowManagerDirective {
      */
     toggleToCount(count) {
         this.items().forEach((item, index) => {
-            const state = index < count ? "visible" : "hidden";
-            // apply equivalent of tailwind invisible class
-            item.nativeElement.style.visibility = state;
-            item.nativeElement.style.height = state === "hidden" ? "0px" : "";
-            item.nativeElement.style.width = state === "hidden" ? "0px" : "";
+            // display: none removes the item from the flex flow entirely, including
+            // its gap contribution, which keeps sibling positions accurate.
+            item.nativeElement.style.display = index < count ? "" : "none";
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OverflowManagerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -7054,8 +7101,6 @@ class NavbarTabsComponent {
     class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
     router = inject(Router);
     route = inject(ActivatedRoute);
-    drawerStack = inject(DrawerStackService);
-    drawerOpened = computed(() => this.drawerStack.isOpened(), ...(ngDevMode ? [{ debugName: "drawerOpened" }] : []));
     queryParamsStore = inject(QueryParamsStore);
     // Injecting the QueryService to access last search results
     queryService = inject(QueryService);
@@ -7067,6 +7112,8 @@ class NavbarTabsComponent {
      * This works only if tabSearch is enabled in the administration panel.
      */
     showCount = input(true, ...(ngDevMode ? [{ debugName: "showCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    noTruncate = input(false, ...(ngDevMode ? [{ debugName: "noTruncate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    minTabWidth = input(...(ngDevMode ? [undefined, { debugName: "minTabWidth" }] : []));
     /**
      * The base path for the search routes.
      * This value is provided as an input property and defaults to "search".
@@ -7120,37 +7167,37 @@ class NavbarTabsComponent {
         return r;
     }, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
     moreTabs = computed(() => this.tabs().slice(this.visibleTabCount()), ...(ngDevMode ? [{ debugName: "moreTabs" }] : []));
-    changeTab() {
-        // we use the routerlink to navigate, so just close the drawer and remove the id parameter from the query params
-        this.drawerStack.closeAll();
-    }
+    changeTab() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavbarTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: NavbarTabsComponent, isStandalone: true, selector: "navbar-tabs", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cn('block', class())" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: NavbarTabsComponent, isStandalone: true, selector: "navbar-tabs", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, noTruncate: { classPropertyName: "noTruncate", publicName: "noTruncate", isSignal: true, isRequired: false, transformFunction: null }, minTabWidth: { classPropertyName: "minTabWidth", publicName: "minTabWidth", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cn('block', class())" } }, ngImport: i0, template: `
     <!-- do not display the tabs if there are no tabs -->
     @if (tabs().length > 0) {
-      <div overflowManager (count)="visibleTabCount.set($event)" class="relative flex rounded-[inherit] bg-inherit">
-        <Tabs class="w-full overflow-hidden">
+      <div overflowManager (count)="visibleTabCount.set($event)" class="flex items-end rounded-[inherit] bg-inherit">
+        <Tabs class="flex-1 min-w-0 overflow-hidden">
           <TabsList class="w-full">
           @for (tab of tabs(); track $index) {
             <Tab
-              class="group min-w-20"
+              class="group"
               title="{{ tab.display | syslang | transloco }}"
               value="{{ tab.display }}"
               overflowItem
+              [noTruncate]="noTruncate()"
+              [style.--tab-min-width]="minTabWidth()"
               [attr.aria-selected]="this.currentPath() === tab.path"
+              [attr.disabled]="showCount() && tab.count === 0 ? '' : null"
               [active]="this.currentPath() === tab.path"
               [routerLink]="[tab.routerLink]"
               [queryParams]="{ n: tab.queryName, q: searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }"
               (click)="changeTab()"
               (keydown.enter)="router.navigate([tab.routerLink], { queryParams: { n: tab.queryName, q: searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined } })"
               >
-              <div class="flex items-center content-start w-full overflow-hidden gap-1 min-w-0">
+              <div [class]="cn('flex items-center content-start w-full gap-1', !noTruncate() && 'overflow-hidden min-w-0')">
               @if (tab.icon) {
                 <i class="fa-fw {{ tab.icon }} " aria-hidden="true"></i>
               }
-              <span class="truncate">{{ tab.display | syslang | transloco }}</span>
+              <span [class]="noTruncate() ? '' : 'truncate'">{{ tab.display | syslang | transloco }}</span>
               <!-- Show count badge only if count is > 0 -->
-              @if(tab.count || 0 > 0) {
+              @if((tab.count ?? 0) > 0) {
                 <Badge class="empty:hidden ml-auto px-1 group-[[variant=secondary]]:bg-primary group-[[variant=secondary]]:text-[#fff] bg-sage-200 text-primary group-[[disabled]]:bg-gray-800 group-[[disabled]]:text-[#fff] text-2xs">{{ tab.count }}</Badge>
               }
               </div>
@@ -7159,37 +7206,39 @@ class NavbarTabsComponent {
           </TabsList>
         </Tabs>
 
-        @if (moreTabs().length > 0) {
-          <Menu class="absolute right-0 top-1" overflowStop>
-            <button variant="ghost" size="icon" class="mb-1 truncate me-1" aria-label="more tabs">
-              <EllipsisIcon orientation="vertical"></EllipsisIcon>
-            </button>
+        <!-- Always mounted so the stop position is stable; hidden when all tabs fit -->
+        <Menu
+          overflowStop
+          class="shrink-0 top-1"
+          [class.invisible]="moreTabs().length === 0"
+          [class.pointer-events-none]="moreTabs().length === 0"
+        >
+          <button variant="ghost" size="icon" class="mb-1 truncate me-1" aria-label="more tabs">
+            <EllipsisIcon orientation="vertical"></EllipsisIcon>
+          </button>
 
-            <MenuContent class="z-500 w-fit" position="bottom-end">
-              @for (tab of moreTabs(); track $index) {
-                <MenuItem>
-                  <a
-                    class="inline-block whitespace-nowrap first-letter:capitalize"
-                    [routerLink]="[tab.routerLink]"
-                    [queryParams]="{ n: tab.queryName, q: searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }"
-                    [attr.aria-selected]="this.currentPath() === tab.path"
-                    [attr.aria-label]="tab.display | syslang | transloco"
-                    (click)="changeTab()">
-                    @if (tab.icon) {
-                      <i class="fa-fw {{ tab.icon }} " aria-hidden="true"></i>
-                    }
-                    {{ tab.display | syslang | transloco }}
-                  </a>
-                </MenuItem>
-              }
-            </MenuContent>
-          </Menu>
-        } @else {
-          <div class="absolute right-0" overflowStop></div>
-        }
+          <MenuContent class="z-500 w-fit" position="bottom-end">
+            @for (tab of moreTabs(); track $index) {
+              <MenuItem>
+                <a
+                  class="inline-block whitespace-nowrap first-letter:capitalize"
+                  [routerLink]="[tab.routerLink]"
+                  [queryParams]="{ n: tab.queryName, q: searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }"
+                  [attr.aria-selected]="this.currentPath() === tab.path"
+                  [attr.aria-label]="tab.display | syslang | transloco"
+                  (click)="changeTab()">
+                  @if (tab.icon) {
+                    <i class="fa-fw {{ tab.icon }} " aria-hidden="true"></i>
+                  }
+                  {{ tab.display | syslang | transloco }}
+                </a>
+              </MenuItem>
+            }
+          </MenuContent>
+        </Menu>
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "component", type: EllipsisIcon, selector: "ellipsis-icon, EllipsisIcon, ellipsisicon", inputs: ["class", "orientation"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "noTruncate", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "component", type: EllipsisIcon, selector: "ellipsis-icon, EllipsisIcon, ellipsisicon", inputs: ["class", "orientation"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NavbarTabsComponent, decorators: [{
             type: Component,
@@ -7216,29 +7265,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     template: `
     <!-- do not display the tabs if there are no tabs -->
     @if (tabs().length > 0) {
-      <div overflowManager (count)="visibleTabCount.set($event)" class="relative flex rounded-[inherit] bg-inherit">
-        <Tabs class="w-full overflow-hidden">
+      <div overflowManager (count)="visibleTabCount.set($event)" class="flex items-end rounded-[inherit] bg-inherit">
+        <Tabs class="flex-1 min-w-0 overflow-hidden">
           <TabsList class="w-full">
           @for (tab of tabs(); track $index) {
             <Tab
-              class="group min-w-20"
+              class="group"
               title="{{ tab.display | syslang | transloco }}"
               value="{{ tab.display }}"
               overflowItem
+              [noTruncate]="noTruncate()"
+              [style.--tab-min-width]="minTabWidth()"
               [attr.aria-selected]="this.currentPath() === tab.path"
+              [attr.disabled]="showCount() && tab.count === 0 ? '' : null"
               [active]="this.currentPath() === tab.path"
               [routerLink]="[tab.routerLink]"
               [queryParams]="{ n: tab.queryName, q: searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }"
               (click)="changeTab()"
               (keydown.enter)="router.navigate([tab.routerLink], { queryParams: { n: tab.queryName, q: searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined } })"
               >
-              <div class="flex items-center content-start w-full overflow-hidden gap-1 min-w-0">
+              <div [class]="cn('flex items-center content-start w-full gap-1', !noTruncate() && 'overflow-hidden min-w-0')">
               @if (tab.icon) {
                 <i class="fa-fw {{ tab.icon }} " aria-hidden="true"></i>
               }
-              <span class="truncate">{{ tab.display | syslang | transloco }}</span>
+              <span [class]="noTruncate() ? '' : 'truncate'">{{ tab.display | syslang | transloco }}</span>
               <!-- Show count badge only if count is > 0 -->
-              @if(tab.count || 0 > 0) {
+              @if((tab.count ?? 0) > 0) {
                 <Badge class="empty:hidden ml-auto px-1 group-[[variant=secondary]]:bg-primary group-[[variant=secondary]]:text-[#fff] bg-sage-200 text-primary group-[[disabled]]:bg-gray-800 group-[[disabled]]:text-[#fff] text-2xs">{{ tab.count }}</Badge>
               }
               </div>
@@ -7247,34 +7299,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           </TabsList>
         </Tabs>
 
-        @if (moreTabs().length > 0) {
-          <Menu class="absolute right-0 top-1" overflowStop>
-            <button variant="ghost" size="icon" class="mb-1 truncate me-1" aria-label="more tabs">
-              <EllipsisIcon orientation="vertical"></EllipsisIcon>
-            </button>
+        <!-- Always mounted so the stop position is stable; hidden when all tabs fit -->
+        <Menu
+          overflowStop
+          class="shrink-0 top-1"
+          [class.invisible]="moreTabs().length === 0"
+          [class.pointer-events-none]="moreTabs().length === 0"
+        >
+          <button variant="ghost" size="icon" class="mb-1 truncate me-1" aria-label="more tabs">
+            <EllipsisIcon orientation="vertical"></EllipsisIcon>
+          </button>
 
-            <MenuContent class="z-500 w-fit" position="bottom-end">
-              @for (tab of moreTabs(); track $index) {
-                <MenuItem>
-                  <a
-                    class="inline-block whitespace-nowrap first-letter:capitalize"
-                    [routerLink]="[tab.routerLink]"
-                    [queryParams]="{ n: tab.queryName, q: searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }"
-                    [attr.aria-selected]="this.currentPath() === tab.path"
-                    [attr.aria-label]="tab.display | syslang | transloco"
-                    (click)="changeTab()">
-                    @if (tab.icon) {
-                      <i class="fa-fw {{ tab.icon }} " aria-hidden="true"></i>
-                    }
-                    {{ tab.display | syslang | transloco }}
-                  </a>
-                </MenuItem>
-              }
-            </MenuContent>
-          </Menu>
-        } @else {
-          <div class="absolute right-0" overflowStop></div>
-        }
+          <MenuContent class="z-500 w-fit" position="bottom-end">
+            @for (tab of moreTabs(); track $index) {
+              <MenuItem>
+                <a
+                  class="inline-block whitespace-nowrap first-letter:capitalize"
+                  [routerLink]="[tab.routerLink]"
+                  [queryParams]="{ n: tab.queryName, q: searchText(), t: tab.wsQueryTab, f: undefined, sort: undefined, id: undefined, page: undefined }"
+                  [attr.aria-selected]="this.currentPath() === tab.path"
+                  [attr.aria-label]="tab.display | syslang | transloco"
+                  (click)="changeTab()">
+                  @if (tab.icon) {
+                    <i class="fa-fw {{ tab.icon }} " aria-hidden="true"></i>
+                  }
+                  {{ tab.display | syslang | transloco }}
+                </a>
+              </MenuItem>
+            }
+          </MenuContent>
+        </Menu>
       </div>
     }
   `,
@@ -7282,7 +7336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         "[class]": "cn('block', class())"
                     }
                 }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }] } });
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], noTruncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "noTruncate", required: false }] }], minTabWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTabWidth", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }] } });
 
 class NoResultComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: NoResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -7392,7 +7446,7 @@ class PreviewNavigator {
       [disabled]="isLast()">
       <chevrons-right />
     </button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { 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: "component", type: ChevronLeftIconComponent, selector: "chevron-left, ChevronLeft, chevronleft", inputs: ["class"] }, { kind: "component", type: ChevronsLeftIconComponent, selector: "chevrons-left, ChevronsLeft, chevronsleft", inputs: ["class"] }, { kind: "component", type: ChevronsRightIconComponent, selector: "chevrons-right, ChevronsRight, chevronsright", inputs: ["class"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { 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: "component", type: ChevronLeftIconComponent, selector: "chevron-left, ChevronLeft, chevronleft", inputs: ["class"] }, { kind: "component", type: ChevronsLeftIconComponent, selector: "chevrons-left, ChevronsLeft, chevronsleft", inputs: ["class"] }, { kind: "component", type: ChevronsRightIconComponent, selector: "chevrons-right, ChevronsRight, chevronsright", inputs: ["class"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: PreviewNavigator, decorators: [{
             type: Component,
@@ -7512,7 +7566,7 @@ class SortSelectorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SortSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SortSelectorComponent, isStandalone: true, selector: "sort-selector, sortselector, SortSelector", inputs: { result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort" }, providers: [provideTranslocoScope('sort-selector')], viewQueries: [{ propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<menu>\n  <button tabindex=\"0\" variant=\"ghost\" [attr.title]=\"'sortSelector.selectSort' | transloco\">\n    <i class=\"fa-fw fa-regular fa-arrow-{{ sort()?.$isDesc ? 'down' : 'up' }}-big-small me-1\"></i>\n    <span class=\"min-w-10 hidden sm:inline truncate\">{{ sort()?.display | transloco }}</span>\n  </button>\n\n  <MenuContent [position]=\"position()\" class=\"min-w-max\">\n    @if (sortOptions().length > 0) {\n      @for (option of sortOptions(); track $index) {\n        <menu-item (click)=\"onSortOptionClicked(option)\" class=\"justify-between\">\n          <span>{{ option.display | transloco }}</span>\n          <i class=\"fa-fw fa-regular fa-arrow-{{ option.$isDesc ? 'down' : 'up' }}-big-small\"></i>\n        </menu-item>\n      }\n    }\n  </MenuContent>\n</menu>\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SortSelectorComponent, isStandalone: true, selector: "sort-selector, sortselector, SortSelector", inputs: { result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort" }, providers: [provideTranslocoScope('sort-selector')], viewQueries: [{ propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<menu>\n  <button tabindex=\"0\" variant=\"ghost\" [attr.title]=\"'sortSelector.selectSort' | transloco\">\n    <i class=\"fa-fw fa-regular fa-arrow-{{ sort()?.$isDesc ? 'down' : 'up' }}-big-small me-1\"></i>\n    <span class=\"min-w-10 hidden sm:inline truncate\">{{ sort()?.display | transloco }}</span>\n  </button>\n\n  <MenuContent [position]=\"position()\" class=\"min-w-max\">\n    @if (sortOptions().length > 0) {\n      @for (option of sortOptions(); track $index) {\n        <menu-item (click)=\"onSortOptionClicked(option)\" class=\"justify-between\">\n          <span>{{ option.display | transloco }}</span>\n          <i class=\"fa-fw fa-regular fa-arrow-{{ option.$isDesc ? 'down' : 'up' }}-big-small\"></i>\n        </menu-item>\n      }\n    }\n  </MenuContent>\n</menu>\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SortSelectorComponent, decorators: [{
             type: Component,
@@ -7740,7 +7794,7 @@ class SheetNavbarComponent {
 
       <ng-content></ng-content>
     </menu>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: Separator, selector: "separator, Separator", inputs: ["class", "orientation"] }, { kind: "directive", type: SheetCloseDirective, selector: "[sheetClose]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "directive", type: Separator, selector: "separator, Separator", inputs: ["class", "orientation"] }, { kind: "directive", type: SheetCloseDirective, selector: "[sheetClose]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SheetNavbarComponent, decorators: [{
             type: Component,
@@ -8076,7 +8130,7 @@ class AdvancedFiltersComponent {
         return res;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AdvancedFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AdvancedFiltersComponent, isStandalone: true, selector: "advanced-filters", host: { classAttribute: "contents" }, providers: [SyslangPipe, TranslocoPipe, provideTranslocoScope("drawers")], ngImport: i0, template: "<div class=\"flex h-full flex-col overflow-auto\">\n  <sheet-navbar class=\"border-foreground/10 block border-b pb-2\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </sheet-navbar>\n\n  <div class=\"flex h-full grow flex-col overflow-auto p-4\">\n    <section class=\"flex flex-col gap-4\" [formGroup]=\"form\">\n      <!-- FIND IN -->\n      <h1 class=\"text-xl font-bold\">{{ 'drawers.findInContent' | transloco }}</h1>\n      <div class=\"flex items-center gap-4\" formGroupName=\"content\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInContent' | transloco }}</span>\n        <select\n          id=\"content-operator\"\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n          formControlName=\"operator\">\n          @for (data of selectData; track $index) {\n            <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n          }\n        </select>\n        <input\n          [variant]=\"inputVariant()\"\n          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\n      @if (enableFieldedSearch()) {\n        <div class=\"flex items-center gap-4\" formGroupName=\"title\">\n          <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInTitle' | transloco }}</span>\n          <select\n            id=\"title-operator\"\n            class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n            formControlName=\"operator\">\n            @for (data of selectData; track $index) {\n              <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n            }\n          </select>\n          <input id=\"title-value\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [placeholder]=\"getPlaceholder('title.operator')\" formControlName=\"value\" />\n        </div>\n      }\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n\n      <Tabs>\n        <TabsList variant=\"ghost\">\n          @for (tab of tabs(); track $index) {\n            <Tab class=\"w-fit\" [value]=\"tab.path\" [active]=\"tab.path === currentTab()\" (click)=\"onTabChange(tab.path)\">\n              {{ tab.display | syslang | transloco }}\n            </Tab>\n          }\n        </TabsList>\n      </Tabs>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        <DropdownInput\n          [suggestions]=\"suggestions()\"\n          [selected]=\"getItems(filter.column)\"\n          [label]=\"filter.display || filter.alias | syslang | transloco\"\n          [placeholder]=\"'drawers.startTyping' | transloco\"\n          [noResultLabel]=\"'drawers.noResult' | transloco\"\n          (onFocus)=\"setFilterFocus($event, filter)\"\n          (onKeyUp)=\"onInputTyping($event)\"\n          (removeItem)=\"removeItem($event, filter)\"\n          (addItem)=\"addItem($event, filter)\" />\n      } @empty {\n        {{ 'drawers.noFilters' | transloco }}\n      }\n    </section>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: DropdownInputComponent, selector: "dropdown-input, DropdownInput", inputs: ["label", "placeholder", "noResultLabel", "suggestions", "selected"], outputs: ["onFocus", "onKeyUp", "removeItem", "addItem"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { 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: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "component", type: SheetNavbarComponent, selector: "SheetNavbar, sheetnavbar, sheet-navbar" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AdvancedFiltersComponent, isStandalone: true, selector: "advanced-filters", host: { classAttribute: "contents" }, providers: [SyslangPipe, TranslocoPipe, provideTranslocoScope("drawers")], ngImport: i0, template: "<div class=\"flex h-full flex-col overflow-auto\">\n  <sheet-navbar class=\"border-foreground/10 block border-b pb-2\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </sheet-navbar>\n\n  <div class=\"flex h-full grow flex-col overflow-auto p-4\">\n    <section class=\"flex flex-col gap-4\" [formGroup]=\"form\">\n      <!-- FIND IN -->\n      <h1 class=\"text-xl font-bold\">{{ 'drawers.findInContent' | transloco }}</h1>\n      <div class=\"flex items-center gap-4\" formGroupName=\"content\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInContent' | transloco }}</span>\n        <select\n          id=\"content-operator\"\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n          formControlName=\"operator\">\n          @for (data of selectData; track $index) {\n            <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n          }\n        </select>\n        <input\n          [variant]=\"inputVariant()\"\n          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\n      @if (enableFieldedSearch()) {\n        <div class=\"flex items-center gap-4\" formGroupName=\"title\">\n          <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInTitle' | transloco }}</span>\n          <select\n            id=\"title-operator\"\n            class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n            formControlName=\"operator\">\n            @for (data of selectData; track $index) {\n              <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n            }\n          </select>\n          <input id=\"title-value\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [placeholder]=\"getPlaceholder('title.operator')\" formControlName=\"value\" />\n        </div>\n      }\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n\n      <Tabs>\n        <TabsList variant=\"ghost\">\n          @for (tab of tabs(); track $index) {\n            <Tab class=\"w-fit\" [value]=\"tab.path\" [active]=\"tab.path === currentTab()\" (click)=\"onTabChange(tab.path)\">\n              {{ tab.display | syslang | transloco }}\n            </Tab>\n          }\n        </TabsList>\n      </Tabs>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        <DropdownInput\n          [suggestions]=\"suggestions()\"\n          [selected]=\"getItems(filter.column)\"\n          [label]=\"filter.display || filter.alias | syslang | transloco\"\n          [placeholder]=\"'drawers.startTyping' | transloco\"\n          [noResultLabel]=\"'drawers.noResult' | transloco\"\n          (onFocus)=\"setFilterFocus($event, filter)\"\n          (onKeyUp)=\"onInputTyping($event)\"\n          (removeItem)=\"removeItem($event, filter)\"\n          (addItem)=\"addItem($event, filter)\" />\n      } @empty {\n        {{ 'drawers.noFilters' | transloco }}\n      }\n    </section>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: DropdownInputComponent, selector: "dropdown-input, DropdownInput", inputs: ["label", "placeholder", "noResultLabel", "suggestions", "selected"], outputs: ["onFocus", "onKeyUp", "removeItem", "addItem"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { 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: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "noTruncate", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "component", type: SheetNavbarComponent, selector: "SheetNavbar, sheetnavbar, sheet-navbar" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AdvancedFiltersComponent, decorators: [{
             type: Component,
@@ -8096,6 +8150,291 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     }, template: "<div class=\"flex h-full flex-col overflow-auto\">\n  <sheet-navbar class=\"border-foreground/10 block border-b pb-2\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </sheet-navbar>\n\n  <div class=\"flex h-full grow flex-col overflow-auto p-4\">\n    <section class=\"flex flex-col gap-4\" [formGroup]=\"form\">\n      <!-- FIND IN -->\n      <h1 class=\"text-xl font-bold\">{{ 'drawers.findInContent' | transloco }}</h1>\n      <div class=\"flex items-center gap-4\" formGroupName=\"content\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInContent' | transloco }}</span>\n        <select\n          id=\"content-operator\"\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n          formControlName=\"operator\">\n          @for (data of selectData; track $index) {\n            <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n          }\n        </select>\n        <input\n          [variant]=\"inputVariant()\"\n          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\n      @if (enableFieldedSearch()) {\n        <div class=\"flex items-center gap-4\" formGroupName=\"title\">\n          <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInTitle' | transloco }}</span>\n          <select\n            id=\"title-operator\"\n            class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n            formControlName=\"operator\">\n            @for (data of selectData; track $index) {\n              <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n            }\n          </select>\n          <input id=\"title-value\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [placeholder]=\"getPlaceholder('title.operator')\" formControlName=\"value\" />\n        </div>\n      }\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n\n      <Tabs>\n        <TabsList variant=\"ghost\">\n          @for (tab of tabs(); track $index) {\n            <Tab class=\"w-fit\" [value]=\"tab.path\" [active]=\"tab.path === currentTab()\" (click)=\"onTabChange(tab.path)\">\n              {{ tab.display | syslang | transloco }}\n            </Tab>\n          }\n        </TabsList>\n      </Tabs>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        <DropdownInput\n          [suggestions]=\"suggestions()\"\n          [selected]=\"getItems(filter.column)\"\n          [label]=\"filter.display || filter.alias | syslang | transloco\"\n          [placeholder]=\"'drawers.startTyping' | transloco\"\n          [noResultLabel]=\"'drawers.noResult' | transloco\"\n          (onFocus)=\"setFilterFocus($event, filter)\"\n          (onKeyUp)=\"onInputTyping($event)\"\n          (removeItem)=\"removeItem($event, filter)\"\n          (addItem)=\"addItem($event, filter)\" />\n      } @empty {\n        {{ 'drawers.noFilters' | transloco }}\n      }\n    </section>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
+class AggregationDateCustomRangeComponent {
+    el = inject(ElementRef);
+    lang = input("en", ...(ngDevMode ? [{ debugName: "lang" }] : []));
+    min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    datepicker = viewChild(DateRangePickerDirective, ...(ngDevMode ? [{ debugName: "datepicker" }] : []));
+    dateSelected = output();
+    constructor(destroyRef) {
+        afterNextRender(() => {
+            const dmin = this.min() ? new Date(this.min()) : undefined;
+            const dmax = this.max() ? new Date(this.max()) : undefined;
+            if (dmin && dmax)
+                this.datepicker()?.setDates(dmin, dmax);
+            const onChangeDate = () => this.dateSelected.emit();
+            this.el.nativeElement.addEventListener('changeDate', onChangeDate);
+            destroyRef.onDestroy(() => this.el.nativeElement.removeEventListener('changeDate', onChangeDate));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationDateCustomRangeComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.18", type: AggregationDateCustomRangeComponent, isStandalone: true, selector: "aggregation-date-custom-range", inputs: { lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: DateRangePickerDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+  <div
+    class="@container flex grow gap-1 p-1"
+    daterangepicker
+    [datepicker-language]="lang()"
+    [datepicker-min]="min()"
+    [datepicker-max]="max()">
+    <div class="flex gap-1">
+      <label for="datepicker-range-start" class="min-w-10">{{
+        "from" | transloco
+      }}</label>
+      <input
+        id="datepicker-range-start"
+        name="start"
+        type="text"
+        class="h-8 min-w-[13ch]" />
+    </div>
+    <div class="flex gap-1">
+      <label for="datepicker-range-end" class="min-w-10 text-right">{{
+        "to" | transloco
+      }}</label>
+      <input
+        id="datepicker-range-end"
+        name="end"
+        type="text"
+        class="h-8 min-w-[13ch]" />
+    </div>
+  </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: DateRangePickerDirective, selector: "[daterangepicker]", inputs: ["datepicker-title", "datepicker-autohide", "datepicker-clear", "datepicker-today", "datepicker-buttons", "datepicker-today-highlight", "datepicker-language", "datepicker-format", "datepicker-max", "datepicker-min", "datepicker-orientation", "datepicker-container"] }, { 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: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationDateCustomRangeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "aggregation-date-custom-range",
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [TranslocoPipe, DateRangePickerDirective, InputComponent],
+                    template: `
+  <div
+    class="@container flex grow gap-1 p-1"
+    daterangepicker
+    [datepicker-language]="lang()"
+    [datepicker-min]="min()"
+    [datepicker-max]="max()">
+    <div class="flex gap-1">
+      <label for="datepicker-range-start" class="min-w-10">{{
+        "from" | transloco
+      }}</label>
+      <input
+        id="datepicker-range-start"
+        name="start"
+        type="text"
+        class="h-8 min-w-[13ch]" />
+    </div>
+    <div class="flex gap-1">
+      <label for="datepicker-range-end" class="min-w-10 text-right">{{
+        "to" | transloco
+      }}</label>
+      <input
+        id="datepicker-range-end"
+        name="end"
+        type="text"
+        class="h-8 min-w-[13ch]" />
+    </div>
+  </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], datepicker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DateRangePickerDirective), { isSignal: true }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }] } });
+
+class AggregationDateDualPickersComponent {
+    el = inject(ElementRef);
+    lang = input("en", ...(ngDevMode ? [{ debugName: "lang" }] : []));
+    min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    datepickerStart = viewChild('datepickerStart', ...(ngDevMode ? [{ debugName: "datepickerStart" }] : []));
+    datepickerEnd = viewChild('datepickerEnd', ...(ngDevMode ? [{ debugName: "datepickerEnd" }] : []));
+    dateSelected = output();
+    constructor(destroyRef) {
+        afterNextRender(() => {
+            const dmin = this.min() ? new Date(this.min()) : undefined;
+            const dmax = this.max() ? new Date(this.max()) : undefined;
+            if (dmin)
+                this.datepickerStart()?.setDate(dmin);
+            if (dmax)
+                this.datepickerEnd()?.setDate(dmax);
+            const onChangeDate = () => this.dateSelected.emit();
+            this.el.nativeElement.addEventListener('changeDate', onChangeDate);
+            destroyRef.onDestroy(() => this.el.nativeElement.removeEventListener('changeDate', onChangeDate));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationDateDualPickersComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.18", type: AggregationDateDualPickersComponent, isStandalone: true, selector: "aggregation-date-dual-pickers", inputs: { lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelected: "dateSelected" }, viewQueries: [{ propertyName: "datepickerStart", first: true, predicate: ["datepickerStart"], descendants: true, isSignal: true }, { propertyName: "datepickerEnd", first: true, predicate: ["datepickerEnd"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="flex">
+      <div class="flex flex-col gap-1">
+        <span class="m-auto font-bold">{{ 'from' | transloco }}</span>
+        <div
+          datepicker #datepickerStart="datepicker"
+          [datepicker-min]="min()"
+          [datepicker-max]="max()"
+          [datepicker-language]="lang()"></div>
+      </div>
+      <div class="flex flex-col gap-1">
+        <span class="m-auto font-bold">{{ 'to' | transloco }}</span>
+        <div
+          datepicker #datepickerEnd="datepicker"
+          [datepicker-min]="min()"
+          [datepicker-max]="max()"
+          [datepicker-language]="lang()"></div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: DatepickerDirective, selector: "[datepicker]", inputs: ["datepicker-title", "datepicker-autohide", "datepicker-clear", "datepicker-today", "datepicker-buttons", "datepicker-today-highlight", "datepicker-language", "datepicker-format", "datepicker-max", "datepicker-min"], exportAs: ["datepicker"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationDateDualPickersComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "aggregation-date-dual-pickers",
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [TranslocoPipe, DatepickerDirective],
+                    template: `
+    <div class="flex">
+      <div class="flex flex-col gap-1">
+        <span class="m-auto font-bold">{{ 'from' | transloco }}</span>
+        <div
+          datepicker #datepickerStart="datepicker"
+          [datepicker-min]="min()"
+          [datepicker-max]="max()"
+          [datepicker-language]="lang()"></div>
+      </div>
+      <div class="flex flex-col gap-1">
+        <span class="m-auto font-bold">{{ 'to' | transloco }}</span>
+        <div
+          datepicker #datepickerEnd="datepicker"
+          [datepicker-min]="min()"
+          [datepicker-max]="max()"
+          [datepicker-language]="lang()"></div>
+      </div>
+    </div>
+  `
+                }]
+        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], datepickerStart: [{ type: i0.ViewChild, args: ['datepickerStart', { isSignal: true }] }], datepickerEnd: [{ type: i0.ViewChild, args: ['datepickerEnd', { isSignal: true }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }] } });
+
+class AggregationDateRangeDialogComponent {
+    cn = cn;
+    hasSelection = signal(false, ...(ngDevMode ? [{ debugName: "hasSelection" }] : []));
+    dialog = viewChild(DialogComponent, ...(ngDevMode ? [{ debugName: "dialog" }] : []));
+    customRange = viewChild('customRange', ...(ngDevMode ? [{ debugName: "customRange" }] : []));
+    dualPickers = viewChild('dualPickers', ...(ngDevMode ? [{ debugName: "dualPickers" }] : []));
+    min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    lang = input("en", ...(ngDevMode ? [{ debugName: "lang" }] : []));
+    /**
+     * Whether to use the date range picker or two separate date pickers for start and end dates.
+     * The date range picker is used when the user can select a range of dates, while the separate date pickers are used when the user can only select a single
+     * date (e.g., for "last week" or "last month" options).
+     *
+     * @defaultValue false
+     */
+    useDateRange = input(false, ...(ngDevMode ? [{ debugName: "useDateRange", transform: Boolean }] : [{ transform: Boolean }]));
+    rangeSelected = output();
+    open() {
+        this.hasSelection.set(false);
+        this.dialog()?.open();
+    }
+    confirm() {
+        const customRange = this.customRange();
+        const dualPickers = this.dualPickers();
+        if (customRange) {
+            const [start, end] = customRange.datepicker()?.getDates() ?? [];
+            if (!start && !end)
+                return;
+            this.rangeSelected.emit({
+                from: start?.toISOString() ?? null,
+                to: end?.toISOString() ?? null
+            });
+        }
+        if (dualPickers) {
+            const start = dualPickers.datepickerStart()?.getDate();
+            const end = dualPickers.datepickerEnd()?.getDate();
+            if (!start && !end)
+                return;
+            this.rangeSelected.emit({
+                from: start?.toISOString() ?? null,
+                to: end?.toISOString() ?? null
+            });
+        }
+        this.dialog()?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationDateRangeDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AggregationDateRangeDialogComponent, isStandalone: true, selector: "aggregation-date-range-dialog", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null }, useDateRange: { classPropertyName: "useDateRange", publicName: "useDateRange", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeSelected: "rangeSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }, { propertyName: "customRange", first: true, predicate: ["customRange"], descendants: true, isSignal: true }, { propertyName: "dualPickers", first: true, predicate: ["dualPickers"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div dialog #dialog="dialog">
+      <DialogContent [class]="cn(!useDateRange() && 'max-w-fit!')">
+        <DialogHeader>
+          <DialogTitle>{{ 'filters.customRange' | transloco }}</DialogTitle>
+        </DialogHeader>
+
+        @if(!useDateRange()) {
+          <aggregation-date-dual-pickers #dualPickers
+            [min]="min()"
+            [max]="max()"
+            [lang]="lang()"
+            (dateSelected)="hasSelection.set(true)" />
+        } @else {
+          <aggregation-date-custom-range #customRange
+            [min]="min()"
+            [max]="max()"
+            [lang]="lang()"
+            (dateSelected)="hasSelection.set(true)" />
+        }
+
+        <DialogFooter>
+          <button variant="outline" (click)="dialog.cancel()">{{ 'cancel' | transloco }}</button>
+          <button [disabled]="!hasSelection()" (click)="confirm()">{{ 'filters.validate' | transloco }}</button>
+        </DialogFooter>
+      </DialogContent>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "component", type: AggregationDateCustomRangeComponent, selector: "aggregation-date-custom-range", inputs: ["lang", "min", "max"], outputs: ["dateSelected"] }, { kind: "component", type: AggregationDateDualPickersComponent, selector: "aggregation-date-dual-pickers", inputs: ["lang", "min", "max"], outputs: ["dateSelected"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationDateRangeDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "aggregation-date-range-dialog",
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        TranslocoPipe,
+                        ButtonComponent,
+                        DialogComponent,
+                        DialogContentComponent,
+                        DialogHeaderComponent,
+                        DialogTitleComponent,
+                        DialogFooterComponent,
+                        AggregationDateCustomRangeComponent,
+                        AggregationDateDualPickersComponent
+                    ],
+                    template: `
+    <div dialog #dialog="dialog">
+      <DialogContent [class]="cn(!useDateRange() && 'max-w-fit!')">
+        <DialogHeader>
+          <DialogTitle>{{ 'filters.customRange' | transloco }}</DialogTitle>
+        </DialogHeader>
+
+        @if(!useDateRange()) {
+          <aggregation-date-dual-pickers #dualPickers
+            [min]="min()"
+            [max]="max()"
+            [lang]="lang()"
+            (dateSelected)="hasSelection.set(true)" />
+        } @else {
+          <aggregation-date-custom-range #customRange
+            [min]="min()"
+            [max]="max()"
+            [lang]="lang()"
+            (dateSelected)="hasSelection.set(true)" />
+        }
+
+        <DialogFooter>
+          <button variant="outline" (click)="dialog.cancel()">{{ 'cancel' | transloco }}</button>
+          <button [disabled]="!hasSelection()" (click)="confirm()">{{ 'filters.validate' | transloco }}</button>
+        </DialogFooter>
+      </DialogContent>
+    </div>
+  `
+                }]
+        }], propDecorators: { dialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DialogComponent), { isSignal: true }] }], customRange: [{ type: i0.ViewChild, args: ['customRange', { isSignal: true }] }], dualPickers: [{ type: i0.ViewChild, args: ['dualPickers', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], useDateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "useDateRange", required: false }] }], rangeSelected: [{ type: i0.Output, args: ["rangeSelected"] }] } });
+
 /**
  * Injection token that indicates whether custom date ranges are allowed.
  *
@@ -8186,6 +8525,7 @@ class AggregationListComponent {
     aggregationsService = inject(AggregationsService);
     el = inject(ElementRef);
     injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
     class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
     /**
      * The name of the <details> element. When you provide the same id, the component work as an accordion
@@ -8195,6 +8535,8 @@ class AggregationListComponent {
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
     column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
     onSelect = output();
+    onApply = output();
+    onClear = output();
     /**
      * Determines whether the aggregation component can be collapsed or expanded.
      * When true, the component will display collapse/expand controls allowing users
@@ -8351,6 +8693,15 @@ class AggregationListComponent {
             const suggests = (await withFetch(() => fetchSuggestField(this.normalizedSearchText(), [this.aggregation()?.column || ""], query), this.injector)) || [];
             this.suggests.set(suggests);
         });
+        this.destroyRef.onDestroy(() => {
+            // If the popover is closed with unapplied selections, reset $selected to undefined
+            // so that processAggregation can recompute it from active filters on next open
+            if (this.selection()) {
+                this.aggregation()?.items?.forEach(item => {
+                    item.$selected = undefined;
+                });
+            }
+        });
     }
     /**
      * Clears the current filter for the aggregation column.
@@ -8366,6 +8717,7 @@ class AggregationListComponent {
             this.isAllSelected.set(false);
         }
         this.onSelect.emit([]);
+        this.onClear.emit();
     }
     /**
      * Select all filters for the aggregation column.
@@ -8437,6 +8789,7 @@ class AggregationListComponent {
         }
         this.searchText.set("");
         this.selection.set(false);
+        this.onApply.emit();
     }
     loadMore() {
         const q = this.queryParamsStore.getQuery();
@@ -8457,8 +8810,10 @@ class AggregationListComponent {
      * If the item is deselected, the selection count is decremented by 1.
      */
     select() {
-        this.onSelect.emit(this.items().filter(item => item.$selected));
-        this.selection.set(true);
+        const selectedItems = this.items().filter(item => item.$selected);
+        this.onSelect.emit(selectedItems);
+        // Keep apply visible if items are selected, or if active filters exist (user may be deselecting to clear)
+        this.selection.set(selectedItems.length > 0 || this.hasFilters());
     }
     /**
      * Updates the collapsed status on header click if the component is collapsible.
@@ -8552,7 +8907,7 @@ class AggregationListComponent {
         this.isCollapsed.set(e.newState === "closed");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\",class())" } }, viewQueries: [{ propertyName: "scrollElement", first: true, predicate: ["scrollElement"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <i class=\"fa-fw fas fa-triangle-exclamation mr-1\"></i>\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<details\r\n  [attr.open]=\"expanded()\"\r\n  [attr.name]=\"id()\"\r\n  class=\"group space-y-2\"\r\n  (toggle)=\"onToggle($event)\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\r\n    [class.text-muted-foreground]=\"isEmpty()\"\r\n    class=\"m-0 mt-1 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"grow truncate\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (showFiltersCount() && filtersCount() > 0) {\r\n      <!-- count -->\r\n      <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    <!-- apply filter block -->\r\n    @if (!isCollapsed()) {\r\n      <ButtonGroup>\r\n        @if (hasFilters()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.clearFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); clear()\">\r\n            <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.clearFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n        @if (selection()) {\r\n          <button\r\n            variant=\"primary\"\r\n            size=\"xs\"\r\n            [attr.title]=\"'filters.applyFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); apply()\"\r\n            class=\"h-4 px-1\">\r\n            <FilterIcon class=\"size-4\" />\r\n            {{ \"filters.apply\" | transloco }}\r\n          </button>\r\n        }\r\n\r\n        <!-- select / unselect all -->\r\n        @if (isAllSelected()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.unselectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); unselectAll()\">\r\n            <i class=\"fa-fw far fa-check-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.unselectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        } @else {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.selectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.selectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); selectAll()\">\r\n            <i class=\"fa-fw far fa-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.selectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n      </ButtonGroup>\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\r\n      </button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  @if (aggregation()?.searchable && items().length) {\r\n    <InputGroup class=\"group/item mt-1\">\r\n      <input\r\n        #searchInput\r\n        input-group\r\n        id=\"aggregation-input-{{ column() }}\"\r\n        type=\"text\"\r\n        [attr.placeholder]=\"'search' | transloco\"\r\n        [(ngModel)]=\"searchText\"\r\n        class=\"mt-1\" />\r\n      <InputGroupAddon>\r\n        <SearchIcon\r\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  }\r\n\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"list\"\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=\"listitem\">\r\n          <AggregationListItem\r\n            [node]=\"item\"\r\n            [field]=\"aggregation()?.column\"\r\n            (onSelect)=\"select()\"\r\n            (onFilter)=\"apply()\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\r\n    <button\r\n      variant=\"link\"\r\n      class=\"mt-1 flex w-full justify-center\"\r\n      [attr.aria-label]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore()\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n</details>\r\n", styles: ["AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, 0)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: AggregationListItemComponent, selector: "aggregation-list-item, AggregationListItem, aggregationlistitem", inputs: ["node", "field"], outputs: ["onSelect", "onOpen", "onFilter"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "directive", type: ButtonGroup, selector: "button-group, ButtonGroup", inputs: ["class", "orientation"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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 }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <i class=\"fa-fw fas fa-triangle-exclamation mr-1\"></i>\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<details\r\n  [attr.open]=\"expanded()\"\r\n  [attr.name]=\"id()\"\r\n  class=\"group space-y-2\"\r\n  (toggle)=\"onToggle($event)\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\r\n    [class.text-muted-foreground]=\"isEmpty()\"\r\n    class=\"m-0 mt-1 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"grow truncate\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (showFiltersCount() && filtersCount() > 0) {\r\n      <!-- count -->\r\n      <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    <!-- apply filter block -->\r\n    @if (!isCollapsed()) {\r\n      <ButtonGroup>\r\n        @if (hasFilters()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.clearFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); clear()\">\r\n            <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.clearFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n        @if (selection()) {\r\n          <button\r\n            variant=\"primary\"\r\n            size=\"xs\"\r\n            [attr.title]=\"'filters.applyFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); apply()\"\r\n            class=\"h-4 px-1\">\r\n            <FilterIcon class=\"size-4\" />\r\n            {{ \"filters.apply\" | transloco }}\r\n          </button>\r\n        }\r\n\r\n        <!-- select / unselect all -->\r\n        @if (isAllSelected()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.unselectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); unselectAll()\">\r\n            <i class=\"fa-fw far fa-check-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.unselectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        } @else {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.selectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.selectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); selectAll()\">\r\n            <i class=\"fa-fw far fa-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.selectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n      </ButtonGroup>\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\r\n      </button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  @if (aggregation()?.searchable && items().length) {\r\n    <InputGroup class=\"group/item mt-1\">\r\n      <input\r\n        #searchInput\r\n        input-group\r\n        id=\"aggregation-input-{{ column() }}\"\r\n        type=\"text\"\r\n        [attr.placeholder]=\"'search' | transloco\"\r\n        [(ngModel)]=\"searchText\"\r\n        class=\"mt-1\" />\r\n      <InputGroupAddon>\r\n        <SearchIcon\r\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  }\r\n\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"list\"\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=\"listitem\">\r\n          <AggregationListItem\r\n            [node]=\"item\"\r\n            [field]=\"aggregation()?.column\"\r\n            (onSelect)=\"select()\"\r\n            (onFilter)=\"apply()\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\r\n    <button\r\n      variant=\"link\"\r\n      class=\"mt-1 flex w-full justify-center\"\r\n      [attr.aria-label]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore()\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n</details>\r\n", styles: ["AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, 0)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: AggregationListItemComponent, selector: "aggregation-list-item, AggregationListItem, aggregationlistitem", inputs: ["node", "field"], outputs: ["onSelect", "onOpen", "onFilter"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "directive", type: ButtonGroup, selector: "button-group, ButtonGroup", inputs: ["class", "orientation"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationListComponent, decorators: [{
             type: Component,
@@ -8575,15 +8930,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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    <i class=\"fa-fw fas fa-triangle-exclamation mr-1\"></i>\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<details\r\n  [attr.open]=\"expanded()\"\r\n  [attr.name]=\"id()\"\r\n  class=\"group space-y-2\"\r\n  (toggle)=\"onToggle($event)\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\r\n    [class.text-muted-foreground]=\"isEmpty()\"\r\n    class=\"m-0 mt-1 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"grow truncate\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (showFiltersCount() && filtersCount() > 0) {\r\n      <!-- count -->\r\n      <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    <!-- apply filter block -->\r\n    @if (!isCollapsed()) {\r\n      <ButtonGroup>\r\n        @if (hasFilters()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.clearFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); clear()\">\r\n            <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.clearFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n        @if (selection()) {\r\n          <button\r\n            variant=\"primary\"\r\n            size=\"xs\"\r\n            [attr.title]=\"'filters.applyFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); apply()\"\r\n            class=\"h-4 px-1\">\r\n            <FilterIcon class=\"size-4\" />\r\n            {{ \"filters.apply\" | transloco }}\r\n          </button>\r\n        }\r\n\r\n        <!-- select / unselect all -->\r\n        @if (isAllSelected()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.unselectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); unselectAll()\">\r\n            <i class=\"fa-fw far fa-check-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.unselectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        } @else {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.selectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.selectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); selectAll()\">\r\n            <i class=\"fa-fw far fa-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.selectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n      </ButtonGroup>\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\r\n      </button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  @if (aggregation()?.searchable && items().length) {\r\n    <InputGroup class=\"group/item mt-1\">\r\n      <input\r\n        #searchInput\r\n        input-group\r\n        id=\"aggregation-input-{{ column() }}\"\r\n        type=\"text\"\r\n        [attr.placeholder]=\"'search' | transloco\"\r\n        [(ngModel)]=\"searchText\"\r\n        class=\"mt-1\" />\r\n      <InputGroupAddon>\r\n        <SearchIcon\r\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  }\r\n\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"list\"\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=\"listitem\">\r\n          <AggregationListItem\r\n            [node]=\"item\"\r\n            [field]=\"aggregation()?.column\"\r\n            (onSelect)=\"select()\"\r\n            (onFilter)=\"apply()\" />\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\r\n    <button\r\n      variant=\"link\"\r\n      class=\"mt-1 flex w-full justify-center\"\r\n      [attr.aria-label]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore()\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n</details>\r\n", styles: ["AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, 0)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ["searchInput", { 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 }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], 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 }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ["searchInput", { 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 }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], 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 }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
 
 class AggregationDateComponent extends AggregationListComponent {
-    destroyRef;
-    datepicker = viewChild(DateRangePickerDirective, ...(ngDevMode ? [{ debugName: "datepicker" }] : []));
+    dateRangeDialog = viewChild(AggregationDateRangeDialogComponent, ...(ngDevMode ? [{ debugName: "dateRangeDialog" }] : []));
     title = input({ label: "Date", icon: "far fa-calendar-day" }, ...(ngDevMode ? [{ debugName: "title" }] : []));
     displayEmptyDistributionIntervals = input(false, ...(ngDevMode ? [{ debugName: "displayEmptyDistributionIntervals" }] : []));
     allowCustomRange = inject(FILTER_DATE_ALLOW_CUSTOM_RANGE);
     transloco = inject(TranslocoService);
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : []));
     dateOptions = computed(() => translateAggregationToDateOptions(this.aggregation(), this.displayEmptyDistributionIntervals()), ...(ngDevMode ? [{ debugName: "dateOptions" }] : []));
     form = new FormGroup({
         option: new FormControl(null),
@@ -8595,31 +8950,34 @@ class AggregationDateComponent extends AggregationListComponent {
     today = new Date();
     lang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "lang" }] : []));
     validSelection = signal(false, ...(ngDevMode ? [{ debugName: "validSelection" }] : []));
-    constructor(destroyRef) {
+    formValue = toSignal(this.form.valueChanges, { initialValue: this.form.value });
+    customRangeFrom = computed(() => {
+        const from = this.formValue().customRange?.from;
+        return from ? new Date(from).toLocaleDateString(this.lang()) : "";
+    }, ...(ngDevMode ? [{ debugName: "customRangeFrom" }] : []));
+    customRangeTo = computed(() => {
+        const to = this.formValue().customRange?.to;
+        return to ? new Date(to).toLocaleDateString(this.lang()) : "";
+    }, ...(ngDevMode ? [{ debugName: "customRangeTo" }] : []));
+    constructor() {
         super();
-        this.destroyRef = destroyRef;
         this.transloco.langChanges$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((lang) => {
             this.lang.set(lang);
-            this.datepicker()?.setOptions({ language: lang });
-        });
-        const abortController = new AbortController();
-        addEventListener("changeDate", this.onDateChange.bind(this), {
-            signal: abortController.signal
         });
         // apply current date filter from queryParamsStore
         effect(() => {
-            this.updateForm(this.queryParamsStore.getFilter({
-                field: this.aggregation()?.column,
-                name: this.aggregation()?.name
-            }));
+            const agg = this.aggregation();
+            if (agg) {
+                this.updateForm(this.queryParamsStore.getFilter({
+                    field: agg.column,
+                    name: agg.name
+                }));
+            }
         });
         this.form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((changes) => {
             this.validSelection.set(!!changes.option &&
                 (changes.option !== "custom-range" || changes.customRange?.from !== null || changes.customRange?.to !== null));
         });
-        destroyRef.onDestroy(() => {
-            abortController.abort();
-        });
     }
     aggregation = computed(() => {
         const name = this.name();
@@ -8632,11 +8990,15 @@ class AggregationDateComponent extends AggregationListComponent {
         }
         return null;
     }, ...(ngDevMode ? [{ debugName: "aggregation" }] : []));
+    select() {
+        this.selection.set(true);
+    }
     apply() {
         try {
             const filter = this.getFormValueFilter();
             this.queryParamsStore.updateFilter(filter);
             this.selection.set(false);
+            this.onApply.emit();
         }
         catch (err) {
             warn("Error applying date filter:", err);
@@ -8656,8 +9018,20 @@ class AggregationDateComponent extends AggregationListComponent {
         const agg = this.aggregation();
         if (agg && notify) {
             this.queryParamsStore.removeFilterByName(agg.name);
+            this.onClear.emit();
         }
     }
+    selectAndOpenDialog() {
+        this.select();
+        this.dateRangeDialog()?.open();
+    }
+    onRangeSelected(range) {
+        this.form.patchValue({
+            option: "custom-range",
+            customRange: { from: range.from, to: range.to }
+        });
+        this.select();
+    }
     updateForm(filter) {
         if (!filter) {
             this.clear(false);
@@ -8679,6 +9053,12 @@ class AggregationDateComponent extends AggregationListComponent {
                     from = filter.start;
                     to = filter.end;
                     break;
+                case "and": {
+                    const filters = filter.filters;
+                    from = filters?.find((f) => f.operator === "gte")?.value ?? null;
+                    to = filters?.find((f) => f.operator === "lte")?.value ?? null;
+                    break;
+                }
             }
         }
         const formValue = {
@@ -8689,15 +9069,6 @@ class AggregationDateComponent extends AggregationListComponent {
             }
         };
         this.form.setValue(formValue);
-        // Update the date range picker
-        const datepicker = this.datepicker();
-        if (datepicker) {
-            const start = new Date(formValue.customRange.from || "");
-            const end = new Date(formValue.customRange.to || "");
-            setTimeout(() => {
-                datepicker.rangeDatepicker?.setDates(start, end);
-            }, 1000);
-        }
     }
     getFormValueFilter() {
         const value = this.form.value;
@@ -8708,13 +9079,15 @@ class AggregationDateComponent extends AggregationListComponent {
         if (value.option !== "custom-range") {
             const dateOption = this.dateOptions().find((option) => option.display === value.option);
             const aggregation = this.aggregation();
-            if (!aggregation) {
+            const name = aggregation?.name ?? this.name() ?? undefined;
+            const column = aggregation?.column ?? this.column() ?? undefined;
+            if (!name && !column) {
                 throw new Error("filters.aggregationNotFound");
             }
             return {
-                name: aggregation.name,
+                name: name,
                 operator: dateOption?.operator || "eq",
-                field: aggregation.column,
+                field: column,
                 display: dateOption?.display ?? "",
                 filters: dateOption?.filters,
                 value: dateOption?.value
@@ -8725,18 +9098,30 @@ class AggregationDateComponent extends AggregationListComponent {
             // if from is null, operator is lte
             // if both are not null, operator is between
             const aggregation = this.aggregation();
-            if (!aggregation) {
+            const name = aggregation?.name ?? this.name() ?? undefined;
+            const column = aggregation?.column ?? this.column() ?? undefined;
+            if (!name && !column) {
                 throw new Error("filters.aggregationNotFound");
             }
             const filter = {
-                name: aggregation.name,
-                field: aggregation.column,
+                name: name,
+                field: column,
                 display: value.option
             };
             if (value.customRange.from && value.customRange.to) {
-                filter.operator = "between";
-                filter.start = value.customRange.from;
-                filter.end = value.customRange.to;
+                filter.operator = "and";
+                filter.filters = [
+                    {
+                        field: column,
+                        operator: "gte",
+                        value: value.customRange.from,
+                    },
+                    {
+                        field: column,
+                        operator: "lte",
+                        value: value.customRange.to
+                    }
+                ];
             }
             else if (value.customRange.from) {
                 filter.operator = "gte";
@@ -8753,28 +9138,8 @@ class AggregationDateComponent extends AggregationListComponent {
         }
         throw new Error("filters.filterInvalid");
     }
-    onDateChange() {
-        // Get the selected dates
-        const [start, end] = this.datepicker()?.getDates() || [];
-        // If both start and end are not selected, reset the datepicker options
-        if (!start && !end) {
-            this.datepicker()?.setOptions({
-                minDate: undefined,
-                maxDate: this.today
-            });
-        }
-        // Update the form with the selected dates
-        if (start && end) {
-            this.form.patchValue({
-                customRange: {
-                    from: start.toISOString(),
-                    to: end.toISOString()
-                }
-            });
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationDateComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AggregationDateComponent, isStandalone: true, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, displayEmptyDistributionIntervals: { classPropertyName: "displayEmptyDistributionIntervals", publicName: "displayEmptyDistributionIntervals", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "@container" }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "datepicker", first: true, predicate: DateRangePickerDirective, descendants: true, isSignal: true }], usesInheritance: 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      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\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      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\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      </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-[calc(var(--height,100%)-100px)] 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=\"custom range\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            #radiorange\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-custom-range\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n\r\n          <div\r\n            class=\"@container flex grow gap-1 p-1 @max-[340px]:flex-wrap\"\r\n            daterangepicker\r\n            datepicker-buttons\r\n            [datepicker-language]=\"lang()\"\r\n            [datepicker-min]=\"form.get('customRange.from')?.value || undefined\"\r\n            [datepicker-max]=\"\r\n              form.get('customRange.to')?.value ?? today.toISOString()\r\n            \"\r\n            (click)=\"radiorange.click()\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10\">{{\r\n                \"from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-end\" class=\"min-w-10 text-right\">{{\r\n                \"to\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\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: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { 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: "directive", type: DateRangePickerDirective, selector: "[daterangepicker]", inputs: ["datepicker-title", "datepicker-autohide", "datepicker-clear", "datepicker-today", "datepicker-buttons", "datepicker-today-highlight", "datepicker-language", "datepicker-format", "datepicker-max", "datepicker-min", "datepicker-orientation"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AggregationDateComponent, isStandalone: true, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, displayEmptyDistributionIntervals: { classPropertyName: "displayEmptyDistributionIntervals", publicName: "displayEmptyDistributionIntervals", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "@container" }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "dateRangeDialog", first: true, predicate: AggregationDateRangeDialogComponent, descendants: true, isSignal: true }], usesInheritance: 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      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\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      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\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      </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-[calc(var(--height,100%)-100px)] 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: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { 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", inputs: ["class"] }, { kind: "component", type: AggregationDateRangeDialogComponent, selector: "aggregation-date-range-dialog", inputs: ["min", "max", "lang", "useDateRange"], outputs: ["rangeSelected"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationDateComponent, decorators: [{
             type: Component,
@@ -8785,12 +9150,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         ReactiveFormsModule,
                         TranslocoPipe,
                         SyslangPipe,
-                        DateRangePickerDirective,
-                        ChevronRightIcon
+                        ChevronRightIcon,
+                        AggregationDateRangeDialogComponent
                     ], 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      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\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      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\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      </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-[calc(var(--height,100%)-100px)] 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=\"custom range\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            #radiorange\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-custom-range\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n\r\n          <div\r\n            class=\"@container flex grow gap-1 p-1 @max-[340px]:flex-wrap\"\r\n            daterangepicker\r\n            datepicker-buttons\r\n            [datepicker-language]=\"lang()\"\r\n            [datepicker-min]=\"form.get('customRange.from')?.value || undefined\"\r\n            [datepicker-max]=\"\r\n              form.get('customRange.to')?.value ?? today.toISOString()\r\n            \"\r\n            (click)=\"radiorange.click()\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10\">{{\r\n                \"from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-end\" class=\"min-w-10 text-right\">{{\r\n                \"to\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"] }]
-        }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { datepicker: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DateRangePickerDirective), { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], displayEmptyDistributionIntervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayEmptyDistributionIntervals", required: false }] }] } });
+                    }, 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      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\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      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\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      </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-[calc(var(--height,100%)-100px)] 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 }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], displayEmptyDistributionIntervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayEmptyDistributionIntervals", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
 
 /**
  * Component that allows users to select a date or a date range for filtering search results.
@@ -8799,22 +9164,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
  */
 class DateComponent extends AggregationDateComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DateComponent, isStandalone: true, selector: "date-filter,DateFilter", host: { classAttribute: "@container" }, providers: [provideTranslocoScope("filters")], usesInheritance: 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      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\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      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\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      </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-[calc(var(--height,100%)-100px)] 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=\"custom range\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            #radiorange\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-custom-range\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n\r\n          <div\r\n            class=\"@container flex grow gap-1 p-1 @max-[340px]:flex-wrap\"\r\n            daterangepicker\r\n            datepicker-buttons\r\n            [datepicker-language]=\"lang()\"\r\n            [datepicker-min]=\"form.get('customRange.from')?.value || undefined\"\r\n            [datepicker-max]=\"\r\n              form.get('customRange.to')?.value ?? today.toISOString()\r\n            \"\r\n            (click)=\"radiorange.click()\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10\">{{\r\n                \"from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-end\" class=\"min-w-10 text-right\">{{\r\n                \"to\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\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: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { 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: "directive", type: DateRangePickerDirective, selector: "[daterangepicker]", inputs: ["datepicker-title", "datepicker-autohide", "datepicker-clear", "datepicker-today", "datepicker-buttons", "datepicker-today-highlight", "datepicker-language", "datepicker-format", "datepicker-max", "datepicker-min", "datepicker-orientation"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DateComponent, isStandalone: true, selector: "date-filter,DateFilter", host: { classAttribute: "@container" }, providers: [provideTranslocoScope("filters")], usesInheritance: 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      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\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      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\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      </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-[calc(var(--height,100%)-100px)] 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: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { 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", inputs: ["class"] }, { kind: "component", type: AggregationDateRangeDialogComponent, selector: "aggregation-date-range-dialog", inputs: ["min", "max", "lang", "useDateRange"], outputs: ["rangeSelected"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
             args: [{ selector: "date-filter,DateFilter", standalone: true, providers: [provideTranslocoScope("filters")], imports: [
-                        InputComponent,
                         ButtonComponent,
                         ListItemComponent,
                         ReactiveFormsModule,
                         TranslocoPipe,
                         SyslangPipe,
-                        DateRangePickerDirective,
-                        ChevronRightIcon
+                        ChevronRightIcon,
+                        AggregationDateRangeDialogComponent
                     ], 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      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\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      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\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      </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-[calc(var(--height,100%)-100px)] 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=\"custom range\"\r\n          class=\"flex px-2 leading-7\"\r\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\r\n          <input\r\n            #radiorange\r\n            type=\"radio\"\r\n            formControlName=\"option\"\r\n            id=\"date-filter-custom-range\"\r\n            value=\"custom-range\"\r\n            (click)=\"select()\" />\r\n\r\n          <div\r\n            class=\"@container flex grow gap-1 p-1 @max-[340px]:flex-wrap\"\r\n            daterangepicker\r\n            datepicker-buttons\r\n            [datepicker-language]=\"lang()\"\r\n            [datepicker-min]=\"form.get('customRange.from')?.value || undefined\"\r\n            [datepicker-max]=\"\r\n              form.get('customRange.to')?.value ?? today.toISOString()\r\n            \"\r\n            (click)=\"radiorange.click()\">\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-start\" class=\"min-w-10\">{{\r\n                \"from\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-start\"\r\n                name=\"start\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n            <div class=\"flex gap-1\">\r\n              <label for=\"datepicker-range-end\" class=\"min-w-10 text-right\">{{\r\n                \"to\" | transloco\r\n              }}</label>\r\n              <input\r\n                id=\"datepicker-range-end\"\r\n                name=\"end\"\r\n                type=\"text\"\r\n                class=\"h-8 min-w-[13ch]\" />\r\n            </div>\r\n          </div>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </form>\r\n</details>\r\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"] }]
+                    }, 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      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\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      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.clearFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n\r\n    @if (selection() && validSelection()) {\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\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        <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\r\n        <span class=\"sr-only\">{{ \"filters.applyFilters\" | transloco }}</span>\r\n      </button>\r\n    }\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\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      </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-[calc(var(--height,100%)-100px)] 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"] }]
         }] });
 
 class ArticleEntities {
@@ -9291,7 +9655,7 @@ class AdvancedSearch {
         this.queryText.set("");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AdvancedSearch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AdvancedSearch, isStandalone: true, selector: "advanced-search", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null }, previewStrategy: { classPropertyName: "previewStrategy", publicName: "previewStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, providers: [provideTranslocoScope("drawers")], ngImport: i0, template: "@if (article()) {\n  <div\n    [class]=\"\n      cn(\n        'scroll-stable flex flex-col overflow-x-hidden overflow-y-auto pb-6 pl-6 pr-3',\n        '[&_details]:border-muted-foreground/18 [&_details]:border-b',\n        '[&_details>summary]:bg-menu [&_details_details]:last:border-b-0',\n        '[&_details>summary>i>svg]:transition-transform [&_details>summary>i>svg]:duration-300',\n        '[&>details>summary>i>svg]:group-open/parent:rotate-180'\n      )\n    \">\n    <section class=\"mb-4 mt-6 flex w-full flex-col gap-6\">\n      <header\n        id=\"panel-control\"\n        class=\"focus-within:outline-primary not-focus-within:hover:outline-muted-foreground group flex rounded focus-within:outline hover:outline\">\n        <div class=\"bg-muted flex grow items-center gap-2 rounded-e-none rounded-s px-3\">\n          <input\n            id=\"advanced-search-input\"\n            type=\"search\"\n            class=\"grow focus:outline-none\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            [attr.placeholder]=\"'drawers.inputPlaceholder' | transloco\"\n            [attr.aria-label]=\"'drawers.inputPlaceholder' | transloco\"\n            [ngModel]=\"queryText()\"\n            (ngModelChange)=\"queryText.set($event)\"\n            (keydown.enter)=\"executeSearch()\" />\n\n          @if (queryText() !== '') {\n            <button\n              variant=\"icon\"\n              size=\"xs\"\n              [attr.title]=\"'clear' | transloco\"\n              [attr.aria-label]=\"'clear' | transloco\"\n              (click)=\"clearInput()\"\n              (keydown.enter)=\"clearInput()\">\n              <i class=\"fa-fw far fa-xmark\" aria-hidden=\"true\"></i>\n              <span class=\"sr-only\">{{ 'clear' | transloco }}</span>\n            </button>\n          }\n        </div>\n\n        <button\n          size=\"default\"\n          class=\"size-8 rounded-e rounded-s-none\"\n          [disabled]=\"queryText() === '' || null\"\n          [attr.title]=\"'search' | transloco\"\n          [attr.aria-label]=\"'search' | transloco\"\n          (click)=\"executeSearch()\">\n          <i class=\"fa-fw far fa-magnifying-glass\" aria-hidden=\"true\"></i>\n          <span class=\"sr-only\">{{ 'search' | transloco }}</span>\n        </button>\n      </header>\n    </section>\n\n    <!-- the same name is used everywhere to simulate an accordion -->\n    <!-- extracts -->\n    <article-extracts [article]=\"article()\" />\n\n    <!-- labels -->\n    <article-labels [article]=\"article()\" />\n\n    <!-- entities -->\n    <article-entities [article]=\"article()\" />\n\n    <!-- similar documents -->\n    <article-similar-documents [article]=\"article()\" [strategy]=\"previewStrategy()\" (selected)=\"selected.emit($event)\" />\n  </div>\n}\n", styles: [":host{--panel-max-height: none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: ArticleExtracts, selector: "article-extracts, ArticleExtracts, articleextracts", inputs: ["article"] }, { kind: "component", type: ArticleEntities, selector: "article-entities,ArticleEntities,articleentities", inputs: ["article"] }, { kind: "component", type: ArticleLabels, selector: "article-labels, ArticleLabels, articlelabels", inputs: ["article"] }, { kind: "component", type: ArticleSimilarDocuments, selector: "article-similar-documents, ArticleSimilarDocuments, articlesimilardocuments", inputs: ["article", "strategy"], outputs: ["selected"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AdvancedSearch, isStandalone: true, selector: "advanced-search", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null }, previewStrategy: { classPropertyName: "previewStrategy", publicName: "previewStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, providers: [provideTranslocoScope("drawers")], ngImport: i0, template: "@if (article()) {\n  <div\n    [class]=\"\n      cn(\n        'scroll-stable flex flex-col overflow-x-hidden overflow-y-auto pb-6 pl-6 pr-3',\n        '[&_details]:border-muted-foreground/18 [&_details]:border-b',\n        '[&_details>summary]:bg-menu [&_details_details]:last:border-b-0',\n        '[&_details>summary>i>svg]:transition-transform [&_details>summary>i>svg]:duration-300',\n        '[&>details>summary>i>svg]:group-open/parent:rotate-180'\n      )\n    \">\n    <section class=\"mb-4 mt-6 flex w-full flex-col gap-6\">\n      <header\n        id=\"panel-control\"\n        class=\"focus-within:outline-primary not-focus-within:hover:outline-muted-foreground group flex rounded focus-within:outline hover:outline\">\n        <div class=\"bg-muted flex grow items-center gap-2 rounded-e-none rounded-s px-3\">\n          <input\n            id=\"advanced-search-input\"\n            type=\"search\"\n            class=\"grow focus:outline-none\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            [attr.placeholder]=\"'drawers.inputPlaceholder' | transloco\"\n            [attr.aria-label]=\"'drawers.inputPlaceholder' | transloco\"\n            [ngModel]=\"queryText()\"\n            (ngModelChange)=\"queryText.set($event)\"\n            (keydown.enter)=\"executeSearch()\" />\n\n          @if (queryText() !== '') {\n            <button\n              variant=\"icon\"\n              size=\"xs\"\n              [attr.title]=\"'clear' | transloco\"\n              [attr.aria-label]=\"'clear' | transloco\"\n              (click)=\"clearInput()\"\n              (keydown.enter)=\"clearInput()\">\n              <i class=\"fa-fw far fa-xmark\" aria-hidden=\"true\"></i>\n              <span class=\"sr-only\">{{ 'clear' | transloco }}</span>\n            </button>\n          }\n        </div>\n\n        <button\n          size=\"default\"\n          class=\"size-8 rounded-e rounded-s-none\"\n          [disabled]=\"queryText() === '' || null\"\n          [attr.title]=\"'search' | transloco\"\n          [attr.aria-label]=\"'search' | transloco\"\n          (click)=\"executeSearch()\">\n          <i class=\"fa-fw far fa-magnifying-glass\" aria-hidden=\"true\"></i>\n          <span class=\"sr-only\">{{ 'search' | transloco }}</span>\n        </button>\n      </header>\n    </section>\n\n    <!-- the same name is used everywhere to simulate an accordion -->\n    <!-- extracts -->\n    <article-extracts [article]=\"article()\" />\n\n    <!-- labels -->\n    <article-labels [article]=\"article()\" />\n\n    <!-- entities -->\n    <article-entities [article]=\"article()\" />\n\n    <!-- similar documents -->\n    <article-similar-documents [article]=\"article()\" [strategy]=\"previewStrategy()\" (selected)=\"selected.emit($event)\" />\n  </div>\n}\n", styles: [":host{--panel-max-height: none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: ArticleExtracts, selector: "article-extracts, ArticleExtracts, articleextracts", inputs: ["article"] }, { kind: "component", type: ArticleEntities, selector: "article-entities,ArticleEntities,articleentities", inputs: ["article"] }, { kind: "component", type: ArticleLabels, selector: "article-labels, ArticleLabels, articlelabels", inputs: ["article"] }, { kind: "component", type: ArticleSimilarDocuments, selector: "article-similar-documents, ArticleSimilarDocuments, articlesimilardocuments", inputs: ["article", "strategy"], outputs: ["selected"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AdvancedSearch, decorators: [{
             type: Component,
@@ -9572,7 +9936,7 @@ class AlertDialog {
       </DialogFooter>
       </DialogContent>
     </dialog>
-  `, isInline: true, styles: [".weekdays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { 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: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "component", type: LoadingCircleIconComponent, selector: "loading-circle, LoadingCircle, loadingcircle", inputs: ["class"] }, { kind: "component", type: CircleCheckIconComponent, selector: "circle-check, CircleCheck, circlecheck", inputs: ["class"] }, { kind: "directive", type: SelectOptionDirective, selector: "option", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, styles: [".weekdays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { 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: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "component", type: LoadingCircleIconComponent, selector: "loading-circle, LoadingCircle, loadingcircle", inputs: ["class"] }, { kind: "component", type: CircleCheckIconComponent, selector: "circle-check, CircleCheck, circlecheck", inputs: ["class"] }, { kind: "directive", type: SelectOptionDirective, selector: "option", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlertDialog, decorators: [{
             type: Component,
@@ -9748,7 +10112,7 @@ class AlertsComponent {
         this.tmpAlerts.splice(drop.currentIndex, 0, this.tmpAlerts.splice(drop.previousIndex, 1)[0]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AlertsComponent, isStandalone: true, selector: "Alerts", providers: [provideTranslocoScope('alerts')], viewQueries: [{ propertyName: "alertFormDialog", first: true, predicate: AlertDialog, descendants: true, isSignal: true }], ngImport: i0, template: "<ul\r\n  role=\"list\"\r\n  class=\"flex min-w-80 flex-col p-2\"\r\n  cdkDropList\r\n  [cdkDropListData]=\"tmpAlerts\"\r\n  [cdkDropListDisabled]=\"!reordering()\"\r\n  (cdkDropListDropped)=\"dropped($event)\">\r\n  @if (floating) {\r\n    <label class=\"text-xl font-bold\">{{ \"alerts.label\" | transloco }}</label>\r\n    <Separator />\r\n  }\r\n  @for (alert of tmpAlerts; track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group h-10\"\r\n      tabindex=\"0\"\r\n      cdkDrag\r\n      (click)=\"onClick($index)\"\r\n      (keydown.enter)=\"onClick($index)\">\r\n      <i class=\"fa-fw fas fa-bell shrink-0\" aria-hidden=\"true\"></i>\r\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\r\n      @if (!reordering()) {\r\n        <button\r\n          class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform group-hover:visible hover:scale-125\"\r\n          title=\"{{ 'alerts.deleteAlert' | transloco }}\"\r\n          [attr.aria-label]=\"'alerts.deleteAlert' | transloco\"\r\n          (click)=\"deleteAlert($event, $index)\">\r\n          <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      } @else {\r\n        <i class=\"fa-fw fa-regular fa-bars\"></i>\r\n      }\r\n    </li>\r\n  } @empty {\r\n    <li role=\"listitem\" class=\"py-4 text-center text-neutral-500\">\r\n      {{ \"alerts.noAlerts\" | transloco }}\r\n    </li>\r\n  }\r\n</ul>\r\n<div class=\"flex flex-col gap-2 p-2\">\r\n  <button\r\n    variant=\"outline\"\r\n    class=\"w-full\"\r\n    tabindex=\"0\"\r\n    [attr.title]=\"'alerts.manageAlerts' | transloco\"\r\n    [disabled]=\"!alerts().length\"\r\n    (click)=\"reorder()\">\r\n    {{ (reordering() ? \"save\" : \"alerts.manageAlerts\") | transloco }}\r\n  </button>\r\n  <button\r\n    class=\"w-full\"\r\n    [attr.title]=\"'alerts.createAlert' | transloco\"\r\n    (click)=\"createAlert()\">\r\n    {{ \"alerts.createAlert\" | transloco }}\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: Separator, selector: "separator, Separator", inputs: ["class", "orientation"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AlertsComponent, isStandalone: true, selector: "Alerts", providers: [provideTranslocoScope('alerts')], viewQueries: [{ propertyName: "alertFormDialog", first: true, predicate: AlertDialog, descendants: true, isSignal: true }], ngImport: i0, template: "<ul\r\n  role=\"list\"\r\n  class=\"flex min-w-80 flex-col p-2\"\r\n  cdkDropList\r\n  [cdkDropListData]=\"tmpAlerts\"\r\n  [cdkDropListDisabled]=\"!reordering()\"\r\n  (cdkDropListDropped)=\"dropped($event)\">\r\n  @if (floating) {\r\n    <label class=\"text-xl font-bold\">{{ \"alerts.label\" | transloco }}</label>\r\n    <Separator />\r\n  }\r\n  @for (alert of tmpAlerts; track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group h-10\"\r\n      tabindex=\"0\"\r\n      cdkDrag\r\n      (click)=\"onClick($index)\"\r\n      (keydown.enter)=\"onClick($index)\">\r\n      <i class=\"fa-fw fas fa-bell shrink-0\" aria-hidden=\"true\"></i>\r\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\r\n      @if (!reordering()) {\r\n        <button\r\n          class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform group-hover:visible hover:scale-125\"\r\n          title=\"{{ 'alerts.deleteAlert' | transloco }}\"\r\n          [attr.aria-label]=\"'alerts.deleteAlert' | transloco\"\r\n          (click)=\"deleteAlert($event, $index)\">\r\n          <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      } @else {\r\n        <i class=\"fa-fw fa-regular fa-bars\"></i>\r\n      }\r\n    </li>\r\n  } @empty {\r\n    <li role=\"listitem\" class=\"py-4 text-center text-neutral-500\">\r\n      {{ \"alerts.noAlerts\" | transloco }}\r\n    </li>\r\n  }\r\n</ul>\r\n<div class=\"flex flex-col gap-2 p-2\">\r\n  <button\r\n    variant=\"outline\"\r\n    class=\"w-full\"\r\n    tabindex=\"0\"\r\n    [attr.title]=\"'alerts.manageAlerts' | transloco\"\r\n    [disabled]=\"!alerts().length\"\r\n    (click)=\"reorder()\">\r\n    {{ (reordering() ? \"save\" : \"alerts.manageAlerts\") | transloco }}\r\n  </button>\r\n  <button\r\n    class=\"w-full\"\r\n    [attr.title]=\"'alerts.createAlert' | transloco\"\r\n    (click)=\"createAlert()\">\r\n    {{ \"alerts.createAlert\" | transloco }}\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: Separator, selector: "separator, Separator", inputs: ["class", "orientation"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AlertsComponent, decorators: [{
             type: Component,
@@ -9767,6 +10131,7 @@ class ChangePasswordComponent {
     principalStore = inject(PrincipalStore);
     applicationService = inject(ApplicationService);
     location = inject(Location);
+    auditService = inject(AuditService);
     currentPassword = model("", ...(ngDevMode ? [{ debugName: "currentPassword" }] : []));
     newPassword = model("", ...(ngDevMode ? [{ debugName: "newPassword" }] : []));
     confirmPassword = model("", ...(ngDevMode ? [{ debugName: "confirmPassword" }] : []));
@@ -9812,11 +10177,13 @@ class ChangePasswordComponent {
                 const msg = res.message ?? this.transloco.translate("login.passwordChangeFailed");
                 this.errorMsg.set(msg);
                 notify.error(msg, { duration: 2500 });
+                this.auditService.notify({ type: 'Change_Password_Failed' });
                 return;
             }
             notify.success(this.transloco.translate("login.passwordChanged"), {
                 duration: 2000
             });
+            this.auditService.notify({ type: 'Change_Password_Success_Form' });
             const username = this.effectiveUsername();
             if (!username) {
                 notify.info(this.transloco.translate("login.loginAfterPasswordChangeMissingUser"), { duration: 3000 });
@@ -9974,7 +10341,7 @@ class ChangePasswordComponent {
         </button>
       </CardFooter>
     </Card>
-  `, isInline: true, styles: ["input::-ms-reveal{display:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "directive", type: CardFooterComponent, selector: ".card-footer, card-footer, CardFooter, cardfooter", inputs: ["class"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, styles: ["input::-ms-reveal{display:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "directive", type: CardFooterComponent, selector: ".card-footer, card-footer, CardFooter, cardfooter", inputs: ["class"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ChangePasswordComponent, decorators: [{
             type: Component,
@@ -10105,6 +10472,7 @@ class ForgotPasswordComponent {
     cancel = output();
     success = output();
     transloco = inject(TranslocoService);
+    auditService = inject(AuditService);
     userName = model("", ...(ngDevMode ? [{ debugName: "userName" }] : []));
     pending = signal(false, ...(ngDevMode ? [{ debugName: "pending" }] : []));
     errorMsg = signal(null, ...(ngDevMode ? [{ debugName: "errorMsg" }] : []));
@@ -10117,6 +10485,9 @@ class ForgotPasswordComponent {
             notify.success(this.transloco.translate("login.resetEmailSent", {
                 email: res.email ?? ""
             }));
+            this.auditService.notify({
+                type: 'Send_Reset_Password_Link'
+            });
             this.success.emit();
         }
         catch (e) {
@@ -10171,7 +10542,7 @@ class ForgotPasswordComponent {
 
       </CardFooter>
     </Card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "directive", type: CardFooterComponent, selector: ".card-footer, card-footer, CardFooter, cardfooter", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "directive", type: CardFooterComponent, selector: ".card-footer, card-footer, CardFooter, cardfooter", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
             type: Component,
@@ -10253,6 +10624,7 @@ class SignInComponent {
     applicationService = inject(ApplicationService);
     principalStore = inject(PrincipalStore);
     transloco = inject(TranslocoService);
+    auditService = inject(AuditService);
     authenticated = signal(isAuthenticated(), ...(ngDevMode ? [{ debugName: "authenticated" }] : []));
     user = signal(getState(this.principalStore), ...(ngDevMode ? [{ debugName: "user" }] : []));
     expiresSoonNotified = signal(false, ...(ngDevMode ? [{ debugName: "expiresSoonNotified" }] : []));
@@ -10303,8 +10675,13 @@ class SignInComponent {
         this.router.navigate(["/login"]);
     }
     async handleLogin() {
-        login().catch(error => {
+        login().then((result) => {
+            if (result) {
+                this.auditService.notifyLogin();
+            }
+        }).catch(error => {
             warn("An error occurred while logging in", error);
+            this.auditService.notify({ type: 'Login_Denied' });
             this.router.navigate(["error"]);
         });
     }
@@ -10313,8 +10690,11 @@ class SignInComponent {
             return;
         try {
             const response = await login(this.credentials());
-            if (!response)
+            if (!response) {
+                this.auditService.notify({ type: 'Login_Denied' });
                 return;
+            }
+            this.auditService.notifyLogin();
             const { createRoutes = false } = globalConfig;
             await this.applicationService.initialize(createRoutes);
             this.checkPasswordExpiresSoon();
@@ -10322,7 +10702,7 @@ class SignInComponent {
             this.router.navigateByUrl(url);
         }
         catch (err) {
-            const { status, errorMessage } = err;
+            const { status, errorMessage, message } = err;
             if (status === 401 &&
                 errorMessage?.toLowerCase().includes("password expired")) {
                 sessionStorage.setItem("passwordExpiredFlow", "true");
@@ -10335,7 +10715,8 @@ class SignInComponent {
                 });
                 return;
             }
-            notify.error("Login", { description: errorMessage });
+            // For other errors, show a generic error message
+            notify.error("Login", { description: message ?? errorMessage });
         }
     }
     handleBack() {
@@ -10391,7 +10772,7 @@ class SignInComponent {
               (keydown.enter)="forgotPassword.emit()">
               {{ "login.forgotPassword" | transloco }}
             </span>
-            <button
+            <button variant="primary"
               [disabled]="!isValid()"
               (click)="handleLoginWithCredentials()">
               {{ "login.connect" | transloco }}
@@ -10408,7 +10789,7 @@ class SignInComponent {
     } @else {
       <app-wait />
     }
-  `, isInline: true, styles: ["input{background-color:var(--background)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "component", type: LoadingComponent, selector: "app-wait" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, styles: ["input{background-color:var(--background)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class", "variant", "hover"] }, { kind: "directive", type: CardHeaderComponent, selector: ".card-header, card-header, CardHeader, cardheader", inputs: ["class"] }, { kind: "directive", type: CardContentComponent, selector: ".card-content, card-content, CardContent, cardcontent", inputs: ["class"] }, { kind: "component", type: LoadingComponent, selector: "app-wait" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,
@@ -10471,7 +10852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
               (keydown.enter)="forgotPassword.emit()">
               {{ "login.forgotPassword" | transloco }}
             </span>
-            <button
+            <button variant="primary"
               [disabled]="!isValid()"
               (click)="handleLoginWithCredentials()">
               {{ "login.connect" | transloco }}
@@ -10703,7 +11084,7 @@ class BookmarksComponent {
         this.range.set(this.range() + (this.config.itemsPerPage ?? 10));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BookmarksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BookmarksComponent, isStandalone: true, selector: "bookmarks, Bookmarks", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope("bookmarks")], ngImport: i0, template: "@if (floating) {\r\n  <div class=\"p-2\">\r\n    <label class=\"text-xl font-bold\">{{ \"bookmarks.label\" | transloco }}</label>\r\n    <Separator />\r\n  </div>\r\n}\r\n\r\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\" role=\"list\">\r\n  @for (bookmark of paginatedBookmarks(); track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group h-10\"\r\n      tabindex=\"0\"\r\n      (click)=\"onClick(bookmark)\"\r\n      (keydown.enter)=\"onClick(bookmark)\">\r\n      <BookmarkIcon solid class=\"shrink-0\" />\r\n\r\n      <p class=\"line-clamp-1\">{{ bookmark.label }}</p>\r\n\r\n      @if (bookmark.author) {\r\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\r\n          <UserIcon class=\"size-3\" />\r\n          <span class=\"line-clamp-1\">{{ bookmark.author }}</span>\r\n        </Badge>\r\n      }\r\n      @if (bookmark.parentFolder) {\r\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\r\n          <FolderIcon class=\"size-3\" />\r\n          <span class=\"line-clamp-1\">{{ bookmark.parentFolder }}</span>\r\n        </Badge>\r\n      }\r\n\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        title=\"{{ 'bookmarks.openBookmark' | transloco }}\"\r\n        class=\"text-destructive ms-auto group-hover:visible\"\r\n        [attr.title]=\"'bookmarks.removeBookmark' | transloco\"\r\n        [attr.aria-label]=\"'bookmarks.removeBookmark' | transloco\"\r\n        (click)=\"onDelete(bookmark, $event)\">\r\n        <TrashIcon />\r\n      </button>\r\n    </li>\r\n  } @empty {\r\n    <li class=\"py-4 text-center text-neutral-500\">\r\n      {{ \"bookmarks.noBookmarks\" | transloco }}\r\n    </li>\r\n  }\r\n</ul>\r\n\r\n<div class=\"flex flex-col px-2\">\r\n  @if (hasMore() && config.showLoadMore) {\r\n    <button\r\n      variant=\"ghost\"\r\n      class=\"w-full\"\r\n      tabindex=\"0\"\r\n      [attr.title]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore($event)\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n  <button\r\n    variant=\"link\"\r\n    class=\"ml-auto\"\r\n    [attr.title]=\"'seeMore' | transloco\"\r\n    [routerLink]=\"[config.routerLink]\">\r\n    {{ \"seeMore\" | transloco }}\r\n  </button>\r\n</div>\r\n", styles: [":host ul{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: Separator, selector: "separator, Separator", inputs: ["class", "orientation"] }, { kind: "component", type: BookmarkIcon, selector: "bookmark-icon, BookmarkIcon", inputs: ["class", "solid"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: FolderIcon, selector: "folder-icon, FolderIcon", inputs: ["class"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: BookmarksComponent, isStandalone: true, selector: "bookmarks, Bookmarks", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope("bookmarks")], ngImport: i0, template: "@if (floating) {\r\n  <div class=\"p-2\">\r\n    <label class=\"text-xl font-bold\">{{ \"bookmarks.label\" | transloco }}</label>\r\n    <Separator />\r\n  </div>\r\n}\r\n\r\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\" role=\"list\">\r\n  @for (bookmark of paginatedBookmarks(); track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group h-10\"\r\n      tabindex=\"0\"\r\n      (click)=\"onClick(bookmark)\"\r\n      (keydown.enter)=\"onClick(bookmark)\">\r\n      <BookmarkIcon solid class=\"shrink-0\" />\r\n\r\n      <p class=\"line-clamp-1\">{{ bookmark.label }}</p>\r\n\r\n      @if (bookmark.author) {\r\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\r\n          <UserIcon class=\"size-3\" />\r\n          <span class=\"line-clamp-1\">{{ bookmark.author }}</span>\r\n        </Badge>\r\n      }\r\n      @if (bookmark.parentFolder) {\r\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\r\n          <FolderIcon class=\"size-3\" />\r\n          <span class=\"line-clamp-1\">{{ bookmark.parentFolder }}</span>\r\n        </Badge>\r\n      }\r\n\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        title=\"{{ 'bookmarks.openBookmark' | transloco }}\"\r\n        class=\"text-destructive ms-auto group-hover:visible\"\r\n        [attr.title]=\"'bookmarks.removeBookmark' | transloco\"\r\n        [attr.aria-label]=\"'bookmarks.removeBookmark' | transloco\"\r\n        (click)=\"onDelete(bookmark, $event)\">\r\n        <TrashIcon />\r\n      </button>\r\n    </li>\r\n  } @empty {\r\n    <li class=\"list-none py-4 text-center text-neutral-500\">\r\n      {{ \"bookmarks.noBookmarks\" | transloco }}\r\n    </li>\r\n  }\r\n</ul>\r\n\r\n<div class=\"flex flex-col px-2\">\r\n  @if (hasMore() && config.showLoadMore) {\r\n    <button\r\n      variant=\"ghost\"\r\n      class=\"w-full\"\r\n      tabindex=\"0\"\r\n      [attr.title]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore($event)\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n  <button\r\n    variant=\"link\"\r\n    class=\"ml-auto\"\r\n    [attr.title]=\"'seeMore' | transloco\"\r\n    [routerLink]=\"[config.routerLink]\">\r\n    {{ \"seeMore\" | transloco }}\r\n  </button>\r\n</div>\r\n", styles: [":host ul{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "directive", type: Separator, selector: "separator, Separator", inputs: ["class", "orientation"] }, { kind: "component", type: BookmarkIcon, selector: "bookmark-icon, BookmarkIcon", inputs: ["class", "solid"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: FolderIcon, selector: "folder-icon, FolderIcon", inputs: ["class"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: BookmarksComponent, decorators: [{
             type: Component,
@@ -10718,7 +11099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         TrashIcon,
                         FolderIcon,
                         BadgeComponent
-                    ], providers: [provideTranslocoScope("bookmarks")], template: "@if (floating) {\r\n  <div class=\"p-2\">\r\n    <label class=\"text-xl font-bold\">{{ \"bookmarks.label\" | transloco }}</label>\r\n    <Separator />\r\n  </div>\r\n}\r\n\r\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\" role=\"list\">\r\n  @for (bookmark of paginatedBookmarks(); track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group h-10\"\r\n      tabindex=\"0\"\r\n      (click)=\"onClick(bookmark)\"\r\n      (keydown.enter)=\"onClick(bookmark)\">\r\n      <BookmarkIcon solid class=\"shrink-0\" />\r\n\r\n      <p class=\"line-clamp-1\">{{ bookmark.label }}</p>\r\n\r\n      @if (bookmark.author) {\r\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\r\n          <UserIcon class=\"size-3\" />\r\n          <span class=\"line-clamp-1\">{{ bookmark.author }}</span>\r\n        </Badge>\r\n      }\r\n      @if (bookmark.parentFolder) {\r\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\r\n          <FolderIcon class=\"size-3\" />\r\n          <span class=\"line-clamp-1\">{{ bookmark.parentFolder }}</span>\r\n        </Badge>\r\n      }\r\n\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        title=\"{{ 'bookmarks.openBookmark' | transloco }}\"\r\n        class=\"text-destructive ms-auto group-hover:visible\"\r\n        [attr.title]=\"'bookmarks.removeBookmark' | transloco\"\r\n        [attr.aria-label]=\"'bookmarks.removeBookmark' | transloco\"\r\n        (click)=\"onDelete(bookmark, $event)\">\r\n        <TrashIcon />\r\n      </button>\r\n    </li>\r\n  } @empty {\r\n    <li class=\"py-4 text-center text-neutral-500\">\r\n      {{ \"bookmarks.noBookmarks\" | transloco }}\r\n    </li>\r\n  }\r\n</ul>\r\n\r\n<div class=\"flex flex-col px-2\">\r\n  @if (hasMore() && config.showLoadMore) {\r\n    <button\r\n      variant=\"ghost\"\r\n      class=\"w-full\"\r\n      tabindex=\"0\"\r\n      [attr.title]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore($event)\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n  <button\r\n    variant=\"link\"\r\n    class=\"ml-auto\"\r\n    [attr.title]=\"'seeMore' | transloco\"\r\n    [routerLink]=\"[config.routerLink]\">\r\n    {{ \"seeMore\" | transloco }}\r\n  </button>\r\n</div>\r\n", styles: [":host ul{scrollbar-width:thin}\n"] }]
+                    ], providers: [provideTranslocoScope("bookmarks")], template: "@if (floating) {\r\n  <div class=\"p-2\">\r\n    <label class=\"text-xl font-bold\">{{ \"bookmarks.label\" | transloco }}</label>\r\n    <Separator />\r\n  </div>\r\n}\r\n\r\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\" role=\"list\">\r\n  @for (bookmark of paginatedBookmarks(); track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group h-10\"\r\n      tabindex=\"0\"\r\n      (click)=\"onClick(bookmark)\"\r\n      (keydown.enter)=\"onClick(bookmark)\">\r\n      <BookmarkIcon solid class=\"shrink-0\" />\r\n\r\n      <p class=\"line-clamp-1\">{{ bookmark.label }}</p>\r\n\r\n      @if (bookmark.author) {\r\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\r\n          <UserIcon class=\"size-3\" />\r\n          <span class=\"line-clamp-1\">{{ bookmark.author }}</span>\r\n        </Badge>\r\n      }\r\n      @if (bookmark.parentFolder) {\r\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\r\n          <FolderIcon class=\"size-3\" />\r\n          <span class=\"line-clamp-1\">{{ bookmark.parentFolder }}</span>\r\n        </Badge>\r\n      }\r\n\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        title=\"{{ 'bookmarks.openBookmark' | transloco }}\"\r\n        class=\"text-destructive ms-auto group-hover:visible\"\r\n        [attr.title]=\"'bookmarks.removeBookmark' | transloco\"\r\n        [attr.aria-label]=\"'bookmarks.removeBookmark' | transloco\"\r\n        (click)=\"onDelete(bookmark, $event)\">\r\n        <TrashIcon />\r\n      </button>\r\n    </li>\r\n  } @empty {\r\n    <li class=\"list-none py-4 text-center text-neutral-500\">\r\n      {{ \"bookmarks.noBookmarks\" | transloco }}\r\n    </li>\r\n  }\r\n</ul>\r\n\r\n<div class=\"flex flex-col px-2\">\r\n  @if (hasMore() && config.showLoadMore) {\r\n    <button\r\n      variant=\"ghost\"\r\n      class=\"w-full\"\r\n      tabindex=\"0\"\r\n      [attr.title]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore($event)\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n  <button\r\n    variant=\"link\"\r\n    class=\"ml-auto\"\r\n    [attr.title]=\"'seeMore' | transloco\"\r\n    [routerLink]=\"[config.routerLink]\">\r\n    {{ \"seeMore\" | transloco }}\r\n  </button>\r\n</div>\r\n", styles: [":host ul{scrollbar-width:thin}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
 class DeleteCollectionDialog {
@@ -10761,7 +11142,7 @@ class DeleteCollectionDialog {
         </DialogFooter>
       </DialogContent>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DeleteCollectionDialog, decorators: [{
             type: Component,
@@ -10843,11 +11224,11 @@ class CollectionsComponent {
         this.range.set(this.range() + (this.config.itemsPerPage ?? 10));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CollectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CollectionsComponent, isStandalone: true, selector: "app-collections", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope("collections")], viewQueries: [{ propertyName: "deleteCollectionDialog", first: true, predicate: DeleteCollectionDialog, descendants: true, isSignal: true }], ngImport: i0, template: "@if (floating) {\r\n  <div class=\"p-2\">\r\n    <label class=\"text-xl font-bold\">{{\r\n      \"collections.label\" | transloco\r\n    }}</label>\r\n    <Separator />\r\n  </div>\r\n}\r\n\r\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\">\r\n  @for (collection of paginatedCollections(); track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group grid grid-cols-[min-content_auto_min-content] items-center\"\r\n      tabindex=\"0\"\r\n      (click)=\"onClick(collection)\"\r\n      (keydown.enter)=\"onClick(collection)\">\r\n      <i class=\"fas fa-inbox ps-2\"></i>\r\n\r\n      <p class=\"mx-2 line-clamp-1\">{{ collection.name }}</p>\r\n\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        class=\"text-destructive invisible group-hover:visible\"\r\n        title=\"{{ 'collections.deleteCollection' | transloco }}\"\r\n        [attr.aria-label]=\"'collections.deleteCollection' | transloco\"\r\n        (click)=\"onDelete(collection, $index, $event)\">\r\n        <TrashIcon />\r\n      </button>\r\n    </li>\r\n  } @empty {\r\n    <li class=\"list-none py-4 text-center text-neutral-500\">\r\n      {{ \"collections.noCollections\" | transloco }}\r\n    </li>\r\n  }\r\n</ul>\r\n\r\n<div class=\"flex flex-col px-2\">\r\n  @if (hasMore() && config.showLoadMore) {\r\n    <button\r\n      variant=\"outline\"\r\n      class=\"w-full\"\r\n      tabindex=\"0\"\r\n      [attr.title]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore($event)\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n  <button\r\n    variant=\"link\"\r\n    class=\"ml-auto\"\r\n    [attr.title]=\"'seeMore' | transloco\"\r\n    [routerLink]=\"[config.routerLink]\">\r\n    {{ \"seeMore\" | transloco }}\r\n  </button>\r\n</div>\r\n\r\n<delete-collection-dialog />\r\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DeleteCollectionDialog, selector: "delete-collection-dialog" }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: Separator, selector: "separator, Separator", inputs: ["class", "orientation"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: CollectionsComponent, isStandalone: true, selector: "app-collections, collections", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope("collections")], viewQueries: [{ propertyName: "deleteCollectionDialog", first: true, predicate: DeleteCollectionDialog, descendants: true, isSignal: true }], ngImport: i0, template: "@if (floating) {\r\n  <div class=\"p-2\">\r\n    <label class=\"text-xl font-bold\">{{\r\n      \"collections.label\" | transloco\r\n    }}</label>\r\n    <Separator />\r\n  </div>\r\n}\r\n\r\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\">\r\n  @for (collection of paginatedCollections(); track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group grid grid-cols-[min-content_auto_min-content] items-center\"\r\n      tabindex=\"0\"\r\n      (click)=\"onClick(collection)\"\r\n      (keydown.enter)=\"onClick(collection)\">\r\n      <i class=\"fas fa-inbox ps-2\"></i>\r\n\r\n      <p class=\"mx-2 line-clamp-1\">{{ collection.name }}</p>\r\n\r\n      <button\r\n        variant=\"ghost\"\r\n        size=\"icon\"\r\n        class=\"text-destructive invisible group-hover:visible\"\r\n        title=\"{{ 'collections.deleteCollection' | transloco }}\"\r\n        [attr.aria-label]=\"'collections.deleteCollection' | transloco\"\r\n        (click)=\"onDelete(collection, $index, $event)\">\r\n        <TrashIcon />\r\n      </button>\r\n    </li>\r\n  } @empty {\r\n    <li class=\"list-none py-4 text-center text-neutral-500\">\r\n      {{ \"collections.noCollections\" | transloco }}\r\n    </li>\r\n  }\r\n</ul>\r\n\r\n<div class=\"flex flex-col px-2\">\r\n  @if (hasMore() && config.showLoadMore) {\r\n    <button\r\n      variant=\"outline\"\r\n      class=\"w-full\"\r\n      tabindex=\"0\"\r\n      [attr.title]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore($event)\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n  <button\r\n    variant=\"link\"\r\n    class=\"ml-auto\"\r\n    [attr.title]=\"'seeMore' | transloco\"\r\n    [routerLink]=\"[config.routerLink]\">\r\n    {{ \"seeMore\" | transloco }}\r\n  </button>\r\n</div>\r\n\r\n<delete-collection-dialog />\r\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DeleteCollectionDialog, selector: "delete-collection-dialog" }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: Separator, selector: "separator, Separator", inputs: ["class", "orientation"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: CollectionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-collections", standalone: true, imports: [
+            args: [{ selector: "app-collections, collections", standalone: true, imports: [
                         TranslocoPipe,
                         RouterLink,
                         DeleteCollectionDialog,
@@ -10964,7 +11345,7 @@ class OverrideUserDialogComponent {
         </DialogFooter>
       </DialogContent>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { 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: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { 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: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: OverrideUserDialogComponent, decorators: [{
             type: Component,
@@ -11068,7 +11449,7 @@ class ResetUserSettingsDialogComponent {
           </DialogFooter>
       </DialogContent>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: ResetUserSettingsDialogComponent, decorators: [{
             type: Component,
@@ -11351,7 +11732,7 @@ class DrawerNavbarComponent {
 
       <ng-content></ng-content>
     </menu>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: VerticalDividerComponent, selector: "vertical-divider, VerticalDivider, verticaldivider" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: VerticalDividerComponent, selector: "vertical-divider, VerticalDivider, verticaldivider" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DrawerNavbarComponent, decorators: [{
             type: Component,
@@ -11700,7 +12081,7 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
         return res;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DrawerAdvancedFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DrawerAdvancedFiltersComponent, isStandalone: true, selector: "advanced-filters", host: { classAttribute: "fixed bg-background grid h-full top-0 -right-full justify-end" }, providers: [DrawerService, SyslangPipe, TranslocoPipe, provideTranslocoScope("drawers")], usesInheritance: true, ngImport: i0, template: "<div (click)=\"drawer.toggleExtension()\" (keydown.escape)=\"drawer.toggleExtension()\" [attr.aria-hidden]=\"true\"></div>\n\n<div class=\"flex h-full flex-col overflow-auto\">\n  <DrawerNavbar class=\"border-foreground/10 block border-b\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </DrawerNavbar>\n\n  <div class=\"flex h-full grow flex-col overflow-auto\">\n    <section class=\"flex flex-col gap-4 p-6\" [formGroup]=\"form\">\n      <!-- FIND IN -->\n      <h1 class=\"text-xl font-bold\">{{ 'drawers.findInContent' | transloco }}</h1>\n      <div class=\"flex items-center gap-4\" formGroupName=\"content\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInContent' | transloco }}</span>\n        <select\n          id=\"content-operator\"\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n          formControlName=\"operator\">\n          @for (data of selectData; track $index) {\n            <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n          }\n        </select>\n        <input\n          [variant]=\"inputVariant()\"\n          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\n      @if (enableFieldedSearch()) {\n        <div class=\"flex items-center gap-4\" formGroupName=\"title\">\n          <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInTitle' | transloco }}</span>\n          <select\n            id=\"title-operator\"\n            class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n            formControlName=\"operator\">\n            @for (data of selectData; track $index) {\n              <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n            }\n          </select>\n          <input id=\"title-value\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [placeholder]=\"getPlaceholder('title.operator')\" formControlName=\"value\" />\n        </div>\n      }\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n\n      <Tabs>\n        <TabsList variant=\"ghost\">\n          @for (tab of tabs(); track $index) {\n            <Tab class=\"w-fit\" [value]=\"tab.path\" [active]=\"tab.path === currentTab()\" (click)=\"onTabChange(tab.path)\">\n              {{ tab.display | syslang | transloco }}\n            </Tab>\n          }\n        </TabsList>\n      </Tabs>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        <DropdownInput\n          [suggestions]=\"suggestions()\"\n          [selected]=\"getItems(filter.column)\"\n          [label]=\"filter.display || filter.alias | syslang | transloco\"\n          [placeholder]=\"'drawers.startTyping' | transloco\"\n          [noResultLabel]=\"'drawers.noResult' | transloco\"\n          (onFocus)=\"setFilterFocus($event, filter)\"\n          (onKeyUp)=\"onInputTyping($event)\"\n          (removeItem)=\"removeItem($event, filter)\"\n          (addItem)=\"addItem($event, filter)\" />\n      } @empty {\n        {{ 'drawers.noFilters' | transloco }}\n      }\n    </section>\n  </div>\n</div>\n", styles: [":host{--drawer-width: 46;--drawer-subdrawer-width: 400px;width:calc(100vw / 100 * var(--drawer-width) + var(--drawer-subdrawer-width));z-index:var(--z-drawer);grid-template-columns:0 1fr var(--drawer-subdrawer-width);transition:right .3s ease-in-out,transform .3s ease-in-out}:host[drawer-opened=true]{right:calc(var(--drawer-subdrawer-width) * -1);box-shadow:var(--drawer-box-shadow)}:host[drawer-extended=true]{width:100vw;right:calc(var(--spacing) * 0);grid-template-columns:1fr calc(var(--drawer-width) * 1%) var(--drawer-subdrawer-width);box-shadow:unset}:is() .dropdown{width:100%}:is() .dropdown-content{width:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: DrawerNavbarComponent, selector: "DrawerNavbar, drawernavbar" }, { kind: "component", type: DropdownInputComponent, selector: "dropdown-input, DropdownInput", inputs: ["label", "placeholder", "noResultLabel", "suggestions", "selected"], outputs: ["onFocus", "onKeyUp", "removeItem", "addItem"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { 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: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: DrawerAdvancedFiltersComponent, isStandalone: true, selector: "advanced-filters", host: { classAttribute: "fixed bg-background grid h-full top-0 -right-full justify-end" }, providers: [DrawerService, SyslangPipe, TranslocoPipe, provideTranslocoScope("drawers")], usesInheritance: true, ngImport: i0, template: "<div (click)=\"drawer.toggleExtension()\" (keydown.escape)=\"drawer.toggleExtension()\" [attr.aria-hidden]=\"true\"></div>\n\n<div class=\"flex h-full flex-col overflow-auto\">\n  <DrawerNavbar class=\"border-foreground/10 block border-b\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </DrawerNavbar>\n\n  <div class=\"flex h-full grow flex-col overflow-auto\">\n    <section class=\"flex flex-col gap-4 p-6\" [formGroup]=\"form\">\n      <!-- FIND IN -->\n      <h1 class=\"text-xl font-bold\">{{ 'drawers.findInContent' | transloco }}</h1>\n      <div class=\"flex items-center gap-4\" formGroupName=\"content\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInContent' | transloco }}</span>\n        <select\n          id=\"content-operator\"\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n          formControlName=\"operator\">\n          @for (data of selectData; track $index) {\n            <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n          }\n        </select>\n        <input\n          [variant]=\"inputVariant()\"\n          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\n      @if (enableFieldedSearch()) {\n        <div class=\"flex items-center gap-4\" formGroupName=\"title\">\n          <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInTitle' | transloco }}</span>\n          <select\n            id=\"title-operator\"\n            class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n            formControlName=\"operator\">\n            @for (data of selectData; track $index) {\n              <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n            }\n          </select>\n          <input id=\"title-value\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [placeholder]=\"getPlaceholder('title.operator')\" formControlName=\"value\" />\n        </div>\n      }\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n\n      <Tabs>\n        <TabsList variant=\"ghost\">\n          @for (tab of tabs(); track $index) {\n            <Tab class=\"w-fit\" [value]=\"tab.path\" [active]=\"tab.path === currentTab()\" (click)=\"onTabChange(tab.path)\">\n              {{ tab.display | syslang | transloco }}\n            </Tab>\n          }\n        </TabsList>\n      </Tabs>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        <DropdownInput\n          [suggestions]=\"suggestions()\"\n          [selected]=\"getItems(filter.column)\"\n          [label]=\"filter.display || filter.alias | syslang | transloco\"\n          [placeholder]=\"'drawers.startTyping' | transloco\"\n          [noResultLabel]=\"'drawers.noResult' | transloco\"\n          (onFocus)=\"setFilterFocus($event, filter)\"\n          (onKeyUp)=\"onInputTyping($event)\"\n          (removeItem)=\"removeItem($event, filter)\"\n          (addItem)=\"addItem($event, filter)\" />\n      } @empty {\n        {{ 'drawers.noFilters' | transloco }}\n      }\n    </section>\n  </div>\n</div>\n", styles: [":host{--drawer-width: 46;--drawer-subdrawer-width: 400px;width:calc(100vw / 100 * var(--drawer-width) + var(--drawer-subdrawer-width));z-index:var(--z-drawer);grid-template-columns:0 1fr var(--drawer-subdrawer-width);transition:right .3s ease-in-out,transform .3s ease-in-out}:host[drawer-opened=true]{right:calc(var(--drawer-subdrawer-width) * -1);box-shadow:var(--drawer-box-shadow)}:host[drawer-extended=true]{width:100vw;right:calc(var(--spacing) * 0);grid-template-columns:1fr calc(var(--drawer-width) * 1%) var(--drawer-subdrawer-width);box-shadow:unset}:is() .dropdown{width:100%}:is() .dropdown-content{width:50%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: DrawerNavbarComponent, selector: "DrawerNavbar, drawernavbar" }, { kind: "component", type: DropdownInputComponent, selector: "dropdown-input, DropdownInput", inputs: ["label", "placeholder", "noResultLabel", "suggestions", "selected"], outputs: ["onFocus", "onKeyUp", "removeItem", "addItem"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { 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: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "noTruncate", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: DrawerAdvancedFiltersComponent, decorators: [{
             type: Component,
@@ -12229,7 +12610,7 @@ class AdvancedSearchComponent {
         this.queryText.set("");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AdvancedSearchComponent, isStandalone: true, selector: "advanced-search", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null }, previewStrategy: { classPropertyName: "previewStrategy", publicName: "previewStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, providers: [provideTranslocoScope("drawers")], ngImport: i0, template: "@if (article()) {\n  <div\n    [class]=\"\n      cn(\n        'scroll-stable flex flex-col overflow-y-auto pb-6 pl-6 pr-3',\n        '[&_details]:border-muted-foreground/18 [&_details]:border-b',\n        '[&_details>summary]:bg-menu [&_details_details]:last:border-b-0',\n        '[&_details>summary>i>svg]:transition-transform [&_details>summary>i>svg]:duration-300',\n        '[&>details>summary>i>svg]:group-open/parent:rotate-180'\n      )\n    \">\n    <section class=\"mb-4 mt-6 flex w-full flex-col gap-6\">\n      <header\n        id=\"panel-control\"\n        class=\"focus-within:outline-primary not-focus-within:hover:outline-muted-foreground group flex rounded focus-within:outline hover:outline\">\n        <div class=\"bg-muted flex grow items-center gap-2 rounded-e-none rounded-s px-3\">\n          <input\n            id=\"advanced-search-input\"\n            type=\"search\"\n            class=\"grow focus:outline-none\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            [attr.placeholder]=\"'drawers.inputPlaceholder' | transloco\"\n            [attr.aria-label]=\"'drawers.inputPlaceholder' | transloco\"\n            [ngModel]=\"queryText()\"\n            (ngModelChange)=\"queryText.set($event)\"\n            (keydown.enter)=\"executeSearch()\" />\n\n          @if (queryText() !== '') {\n            <button\n              variant=\"icon\"\n              size=\"xs\"\n              [attr.title]=\"'clear' | transloco\"\n              [attr.aria-label]=\"'clear' | transloco\"\n              (click)=\"clearInput()\"\n              (keydown.enter)=\"clearInput()\">\n              <i class=\"fa-fw far fa-xmark\"></i>\n            </button>\n          }\n        </div>\n\n        <button\n          size=\"default\"\n          class=\"size-8 rounded-e rounded-s-none\"\n          [disabled]=\"queryText() === '' || null\"\n          [attr.title]=\"'search' | transloco\"\n          [attr.aria-label]=\"'search' | transloco\"\n          (click)=\"executeSearch()\">\n          <i class=\"fa-fw far fa-magnifying-glass\"></i>\n        </button>\n      </header>\n    </section>\n\n    <!-- the same name is used everywhere to simulate an accordion -->\n    <!-- extracts -->\n    <ExtractsPanel [article]=\"article()\" />\n\n    <!-- labels -->\n    <LabelsPanel [article]=\"article()\" />\n\n    <!-- entities -->\n    <EntitiesPanel [article]=\"article()\" />\n\n    <!-- similar documents -->\n    <SimilarDocumentsPanel [article]=\"article()\" [strategy]=\"previewStrategy()\" (selected)=\"selected.emit($event)\" />\n  </div>\n}\n", styles: [":host{--panel-max-height: none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: SimilarDocumentsPanel, selector: "similar-documents-panel, SimilarDocumentsPanel, similardocumentspanel", inputs: ["article", "strategy"], outputs: ["selected"] }, { kind: "component", type: EntitiesPanel, selector: "entities-panel,EntitiesPanel,entitiesPanel", inputs: ["article"] }, { kind: "component", type: LabelsPanel, selector: "labels-panel, LabelsPanel, labelspanel", inputs: ["article"] }, { kind: "component", type: ExtractsPanel, selector: "extracts-panel, ExtractsPanel, extractspanel", inputs: ["article"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: AdvancedSearchComponent, isStandalone: true, selector: "advanced-search", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null }, previewStrategy: { classPropertyName: "previewStrategy", publicName: "previewStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, providers: [provideTranslocoScope("drawers")], ngImport: i0, template: "@if (article()) {\n  <div\n    [class]=\"\n      cn(\n        'scroll-stable flex flex-col overflow-y-auto pb-6 pl-6 pr-3',\n        '[&_details]:border-muted-foreground/18 [&_details]:border-b',\n        '[&_details>summary]:bg-menu [&_details_details]:last:border-b-0',\n        '[&_details>summary>i>svg]:transition-transform [&_details>summary>i>svg]:duration-300',\n        '[&>details>summary>i>svg]:group-open/parent:rotate-180'\n      )\n    \">\n    <section class=\"mb-4 mt-6 flex w-full flex-col gap-6\">\n      <header\n        id=\"panel-control\"\n        class=\"focus-within:outline-primary not-focus-within:hover:outline-muted-foreground group flex rounded focus-within:outline hover:outline\">\n        <div class=\"bg-muted flex grow items-center gap-2 rounded-e-none rounded-s px-3\">\n          <input\n            id=\"advanced-search-input\"\n            type=\"search\"\n            class=\"grow focus:outline-none\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            [attr.placeholder]=\"'drawers.inputPlaceholder' | transloco\"\n            [attr.aria-label]=\"'drawers.inputPlaceholder' | transloco\"\n            [ngModel]=\"queryText()\"\n            (ngModelChange)=\"queryText.set($event)\"\n            (keydown.enter)=\"executeSearch()\" />\n\n          @if (queryText() !== '') {\n            <button\n              variant=\"icon\"\n              size=\"xs\"\n              [attr.title]=\"'clear' | transloco\"\n              [attr.aria-label]=\"'clear' | transloco\"\n              (click)=\"clearInput()\"\n              (keydown.enter)=\"clearInput()\">\n              <i class=\"fa-fw far fa-xmark\"></i>\n            </button>\n          }\n        </div>\n\n        <button\n          size=\"default\"\n          class=\"size-8 rounded-e rounded-s-none\"\n          [disabled]=\"queryText() === '' || null\"\n          [attr.title]=\"'search' | transloco\"\n          [attr.aria-label]=\"'search' | transloco\"\n          (click)=\"executeSearch()\">\n          <i class=\"fa-fw far fa-magnifying-glass\"></i>\n        </button>\n      </header>\n    </section>\n\n    <!-- the same name is used everywhere to simulate an accordion -->\n    <!-- extracts -->\n    <ExtractsPanel [article]=\"article()\" />\n\n    <!-- labels -->\n    <LabelsPanel [article]=\"article()\" />\n\n    <!-- entities -->\n    <EntitiesPanel [article]=\"article()\" />\n\n    <!-- similar documents -->\n    <SimilarDocumentsPanel [article]=\"article()\" [strategy]=\"previewStrategy()\" (selected)=\"selected.emit($event)\" />\n  </div>\n}\n", styles: [":host{--panel-max-height: none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: SimilarDocumentsPanel, selector: "similar-documents-panel, SimilarDocumentsPanel, similardocumentspanel", inputs: ["article", "strategy"], outputs: ["selected"] }, { kind: "component", type: EntitiesPanel, selector: "entities-panel,EntitiesPanel,entitiesPanel", inputs: ["article"] }, { kind: "component", type: LabelsPanel, selector: "labels-panel, LabelsPanel, labelspanel", inputs: ["article"] }, { kind: "component", type: ExtractsPanel, selector: "extracts-panel, ExtractsPanel, extractspanel", inputs: ["article"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
             type: Component,
@@ -12478,12 +12859,12 @@ class FeedbackDialogComponent {
             {{ 'cancel' | transloco }}
           </button>
           <button [disabled]="!comment()" (click)="submit()">
-            {{ 'send feedback' | transloco }}
+            {{ 'feedback.button' | transloco }}
           </button>
         </DialogFooter>
       </DialogContent>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FeedbackDialogComponent, decorators: [{
             type: Component,
@@ -12523,7 +12904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             {{ 'cancel' | transloco }}
           </button>
           <button [disabled]="!comment()" (click)="submit()">
-            {{ 'send feedback' | transloco }}
+            {{ 'feedback.button' | transloco }}
           </button>
         </DialogFooter>
       </DialogContent>
@@ -12591,11 +12972,11 @@ class SearchFeedbackComponent {
         this.feedbackDialog()?.open(type);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SearchFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SearchFeedbackComponent, isStandalone: true, selector: "feedback, Feedback", inputs: { pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClose: "onClose" }, providers: [provideTranslocoScope('feedback')], viewQueries: [{ propertyName: "feedbackDialog", first: true, predicate: FeedbackDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<menu>\n  <button class=\"border border-foreground/18\" variant=\"outline\" title=\"{{ 'feedback.button' | transloco }}\">\n    <i class=\"fa-fw far fa-commenting\" aria-hidden=\"true\"></i>\n    {{ 'feedback.label' | transloco }}\n    <i class=\"fa-fw fas fa-xmark ms-2\" (click)=\"close($event)\" aria-hidden=\"true\"></i>\n  </button>\n\n  <MenuContent>\n    @if (!disliked()) {\n      <menuitem (click)=\"like()\" [attr.aria-label]=\"'feedback.like' | transloco\">\n        @if (liked()) {\n          <i class=\"fa-fw fas fa-thumbs-up\"></i> {{ 'feedback.liked' | transloco }}\n        } @else {\n          <i class=\"fa-fw far fa-thumbs-up\"></i> {{ 'feedback.like' | transloco }}\n        }\n      </menuitem>\n    }\n    @if (!liked()) {\n      <menuitem (click)=\"dislike()\" [attr.aria-label]=\"'feedback.dislike' | transloco\">\n        @if (disliked()) {\n          <i class=\"fa-fw fas fa-thumbs-down\"></i> {{ 'feedback.disliked' | transloco }}\n        } @else {\n          <i class=\"fa-fw far fa-thumbs-down\"></i> {{ 'feedback.dislike' | transloco }}\n        }\n      </menuitem>\n    }\n    @for (menu of menus; track $index) {\n      <menuitem (click)=\"openFeedbackDialog(menu.type)\" [attr.aria-label]=\"'feedback.' + menu.type + '.title' | transloco\">\n        <i class=\"fa-fw {{ menu.icon }}\"></i> {{ 'feedback.' + menu.type + '.title' | transloco }}\n      </menuitem>\n    }\n  </MenuContent>\n</menu>\n\n<feedback-dialog />\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: FeedbackDialogComponent, selector: "feedback-dialog, feedbackdialog, FeedbackDialog", inputs: ["comment"], outputs: ["commentChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SearchFeedbackComponent, isStandalone: true, selector: "feedback, Feedback", inputs: { pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClose: "onClose" }, providers: [provideTranslocoScope('feedback')], viewQueries: [{ propertyName: "feedbackDialog", first: true, predicate: FeedbackDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<menu>\n  <button\n    class=\"border-foreground/18 border\"\n    variant=\"outline\"\n    title=\"{{ 'feedback.label' | transloco }}\">\n    <i class=\"fa-fw far fa-commenting\" aria-hidden=\"true\"></i>\n    {{ \"feedback.label\" | transloco }}\n    <i\n      class=\"fa-fw fas fa-xmark ms-2\"\n      (click)=\"close($event)\"\n      aria-hidden=\"true\"></i>\n  </button>\n\n  <MenuContent>\n    @if (!disliked()) {\n      <menuitem\n        (click)=\"like()\"\n        [attr.aria-label]=\"'feedback.like' | transloco\">\n        @if (liked()) {\n          <i class=\"fa-fw fas fa-thumbs-up\"></i>\n          {{ \"feedback.liked\" | transloco }}\n        } @else {\n          <i class=\"fa-fw far fa-thumbs-up\"></i>\n          {{ \"feedback.like\" | transloco }}\n        }\n      </menuitem>\n    }\n    @if (!liked()) {\n      <menuitem\n        (click)=\"dislike()\"\n        [attr.aria-label]=\"'feedback.dislike' | transloco\">\n        @if (disliked()) {\n          <i class=\"fa-fw fas fa-thumbs-down\"></i>\n          {{ \"feedback.disliked\" | transloco }}\n        } @else {\n          <i class=\"fa-fw far fa-thumbs-down\"></i>\n          {{ \"feedback.dislike\" | transloco }}\n        }\n      </menuitem>\n    }\n    @for (menu of menus; track $index) {\n      <menuitem\n        (click)=\"openFeedbackDialog(menu.type)\"\n        [attr.aria-label]=\"'feedback.' + menu.type + '.title' | transloco\">\n        <i class=\"fa-fw {{ menu.icon }}\"></i>\n        {{ \"feedback.\" + menu.type + \".title\" | transloco }}\n      </menuitem>\n    }\n  </MenuContent>\n</menu>\n\n<feedback-dialog />\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: FeedbackDialogComponent, selector: "feedback-dialog, feedbackdialog, FeedbackDialog", inputs: ["comment"], outputs: ["commentChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SearchFeedbackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'feedback, Feedback', standalone: true, imports: [ButtonComponent, MenuComponent, MenuContentComponent, MenuItemComponent, TranslocoPipe, FeedbackDialogComponent], providers: [provideTranslocoScope('feedback')], template: "<menu>\n  <button class=\"border border-foreground/18\" variant=\"outline\" title=\"{{ 'feedback.button' | transloco }}\">\n    <i class=\"fa-fw far fa-commenting\" aria-hidden=\"true\"></i>\n    {{ 'feedback.label' | transloco }}\n    <i class=\"fa-fw fas fa-xmark ms-2\" (click)=\"close($event)\" aria-hidden=\"true\"></i>\n  </button>\n\n  <MenuContent>\n    @if (!disliked()) {\n      <menuitem (click)=\"like()\" [attr.aria-label]=\"'feedback.like' | transloco\">\n        @if (liked()) {\n          <i class=\"fa-fw fas fa-thumbs-up\"></i> {{ 'feedback.liked' | transloco }}\n        } @else {\n          <i class=\"fa-fw far fa-thumbs-up\"></i> {{ 'feedback.like' | transloco }}\n        }\n      </menuitem>\n    }\n    @if (!liked()) {\n      <menuitem (click)=\"dislike()\" [attr.aria-label]=\"'feedback.dislike' | transloco\">\n        @if (disliked()) {\n          <i class=\"fa-fw fas fa-thumbs-down\"></i> {{ 'feedback.disliked' | transloco }}\n        } @else {\n          <i class=\"fa-fw far fa-thumbs-down\"></i> {{ 'feedback.dislike' | transloco }}\n        }\n      </menuitem>\n    }\n    @for (menu of menus; track $index) {\n      <menuitem (click)=\"openFeedbackDialog(menu.type)\" [attr.aria-label]=\"'feedback.' + menu.type + '.title' | transloco\">\n        <i class=\"fa-fw {{ menu.icon }}\"></i> {{ 'feedback.' + menu.type + '.title' | transloco }}\n      </menuitem>\n    }\n  </MenuContent>\n</menu>\n\n<feedback-dialog />\n" }]
+            args: [{ selector: 'feedback, Feedback', standalone: true, imports: [ButtonComponent, MenuComponent, MenuContentComponent, MenuItemComponent, TranslocoPipe, FeedbackDialogComponent], providers: [provideTranslocoScope('feedback')], template: "<menu>\n  <button\n    class=\"border-foreground/18 border\"\n    variant=\"outline\"\n    title=\"{{ 'feedback.label' | transloco }}\">\n    <i class=\"fa-fw far fa-commenting\" aria-hidden=\"true\"></i>\n    {{ \"feedback.label\" | transloco }}\n    <i\n      class=\"fa-fw fas fa-xmark ms-2\"\n      (click)=\"close($event)\"\n      aria-hidden=\"true\"></i>\n  </button>\n\n  <MenuContent>\n    @if (!disliked()) {\n      <menuitem\n        (click)=\"like()\"\n        [attr.aria-label]=\"'feedback.like' | transloco\">\n        @if (liked()) {\n          <i class=\"fa-fw fas fa-thumbs-up\"></i>\n          {{ \"feedback.liked\" | transloco }}\n        } @else {\n          <i class=\"fa-fw far fa-thumbs-up\"></i>\n          {{ \"feedback.like\" | transloco }}\n        }\n      </menuitem>\n    }\n    @if (!liked()) {\n      <menuitem\n        (click)=\"dislike()\"\n        [attr.aria-label]=\"'feedback.dislike' | transloco\">\n        @if (disliked()) {\n          <i class=\"fa-fw fas fa-thumbs-down\"></i>\n          {{ \"feedback.disliked\" | transloco }}\n        } @else {\n          <i class=\"fa-fw far fa-thumbs-down\"></i>\n          {{ \"feedback.dislike\" | transloco }}\n        }\n      </menuitem>\n    }\n    @for (menu of menus; track $index) {\n      <menuitem\n        (click)=\"openFeedbackDialog(menu.type)\"\n        [attr.aria-label]=\"'feedback.' + menu.type + '.title' | transloco\">\n        <i class=\"fa-fw {{ menu.icon }}\"></i>\n        {{ \"feedback.\" + menu.type + \".title\" | transloco }}\n      </menuitem>\n    }\n  </MenuContent>\n</menu>\n\n<feedback-dialog />\n" }]
         }], propDecorators: { onClose: [{ type: i0.Output, args: ["onClose"] }], feedbackDialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => FeedbackDialogComponent), { isSignal: true }] }], pages: [{ type: i0.Input, args: [{ isSignal: true, alias: "pages", required: true }] }] } });
 
 class AggregationTreeItemComponent {
@@ -12729,6 +13110,7 @@ class AggregationTreeComponent {
     aggregationsService = inject(AggregationsService);
     el = inject(ElementRef);
     injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
     class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
     /**
      * The name of the <details> element. When you provide the same id, the component work as an accordion
@@ -12745,6 +13127,8 @@ class AggregationTreeComponent {
                 return Number.isNaN(n) ? undefined : n;
             } }]));
     onSelect = output();
+    onApply = output();
+    onClear = output();
     /**
      * Determines whether the aggregation component can be collapsed or expanded.
      * When true, the component will display collapse/expand controls allowing users
@@ -12915,6 +13299,21 @@ class AggregationTreeComponent {
         effect(() => {
             this.filters.set(this.getFilters());
         });
+        this.destroyRef.onDestroy(() => {
+            // If the popover is closed with unapplied selections, reset state so it doesn't persist when reopening
+            if (this.selection()) {
+                sessionStorage.removeItem(`agg-${this.aggregation()?.column}`);
+                const unselect = (items) => {
+                    items.forEach((item) => {
+                        item.$selected = false;
+                        item.$selectedVisually = false;
+                        if (item.items)
+                            unselect(item.items);
+                    });
+                };
+                unselect(this.items());
+            }
+        });
     }
     // compare currentItems and updatedItems to add the new sub items
     // from updatedItems into currentItems to not alter the already loaded items
@@ -12966,6 +13365,7 @@ class AggregationTreeComponent {
             sessionStorage.removeItem(`agg-${this.aggregation()?.column}`);
             this.selection.set(false);
             this.isAllSelected.set(false);
+            this.onClear.emit();
         }
     }
     /**
@@ -13036,6 +13436,7 @@ class AggregationTreeComponent {
         }
         this.searchText.set("");
         this.selection.set(false);
+        this.onApply.emit();
     }
     loadMore() {
         const q = this.queryParamsStore.getQuery();
@@ -13062,8 +13463,10 @@ class AggregationTreeComponent {
      * If the item is deselected, the selection count is decremented by 1.
      */
     select() {
-        this.onSelect.emit(this.getFlattenTreeItems().filter(item => item.$selected));
-        this.selection.set(true);
+        const selectedItems = this.getFlattenTreeItems().filter(item => item.$selected);
+        this.onSelect.emit(selectedItems);
+        // Keep apply visible if items are selected, or if active filters exist (user may be deselecting to clear)
+        this.selection.set(selectedItems.length > 0 || this.hasFilters());
         this.verifySelected();
         sessionStorage.setItem(`agg-${this.aggregation()?.column}`, JSON.stringify([...this.items()]));
     }
@@ -13336,7 +13739,7 @@ class AggregationTreeComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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 }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", 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 }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", 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 }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <i class=\"fa-fw fas fa-triangle-exclamation mr-1\"></i>\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<details\r\n  [attr.open]=\"expanded()\"\r\n  [attr.name]=\"id()\"\r\n  class=\"group space-y-2\"\r\n  (toggle)=\"onToggle($event)\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\r\n    [class.text-muted-foreground]=\"isEmpty()\"\r\n    class=\"m-0 mt-1 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"grow truncate\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (showFiltersCount() && filtersCount() > 0) {\r\n      <!-- count -->\r\n      <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    <!-- apply filter block -->\r\n    @if (!isCollapsed()) {\r\n      <ButtonGroup>\r\n        @if (hasFilters()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.clearFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); clear()\">\r\n            <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.clearFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n        @if (selection()) {\r\n          <button\r\n            variant=\"primary\"\r\n            size=\"xs\"\r\n            [attr.title]=\"'filters.applyFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); apply()\"\r\n            class=\"h-4 px-1\">\r\n            <FilterIcon class=\"size-4\" />\r\n            <span class=\"sr-only\">{{ \"filters.apply\" | transloco }}</span>\r\n          </button>\r\n        }\r\n\r\n        <!-- select / unselect all -->\r\n        @if (isAllSelected()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.unselectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); unselectAll()\">\r\n            <i class=\"fa-fw far fa-check-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.unselectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        } @else {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.selectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.selectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); selectAll()\">\r\n            <i class=\"fa-fw far fa-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.selectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n      </ButtonGroup>\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\r\n      </button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  @if (aggregation()?.searchable && items().length) {\r\n    <InputGroup class=\"group/item mt-1\">\r\n      <input\r\n        #searchInput\r\n        input-group\r\n        id=\"aggregation-input-{{ column() }}\"\r\n        type=\"text\"\r\n        [attr.placeholder]=\"'search' | transloco\"\r\n        [(ngModel)]=\"searchText\"\r\n        class=\"mt-1\" />\r\n      <InputGroupAddon>\r\n        <SearchIcon\r\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  }\r\n\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"list\"\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        role=\"listitem\">\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            <AggregationTreeItem\r\n              [node]=\"item\"\r\n              [path]=\"[]\"\r\n              [field]=\"aggregation()?.column\"\r\n              (onSelect)=\"select()\"\r\n              (onOpen)=\"open($event)\"\r\n              (onFilter)=\"apply()\" />\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\r\n    <button\r\n      variant=\"link\"\r\n      class=\"mt-1 flex w-full justify-center\"\r\n      [attr.aria-label]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore()\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n</details>\r\n", styles: ["AggregationTreeItem:has(+AggregationTreeItem){margin-bottom:var(--agg-item-gap, 0)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: AggregationTreeItemComponent, selector: "aggregation-tree-item, AggregationTreeItem, aggregationtreeitem", inputs: ["node", "path", "field"], outputs: ["onSelect", "onOpen", "onFilter"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "directive", type: ButtonGroup, selector: "button-group, ButtonGroup", inputs: ["class", "orientation"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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 }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", 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 }, 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 }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!aggregation()?.isTree) {\r\n  <div class=\"p-2 text-sm text-red-500\">\r\n    <i class=\"fa-fw fas fa-triangle-exclamation mr-1\"></i>\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<details\r\n  [attr.open]=\"expanded()\"\r\n  [attr.name]=\"id()\"\r\n  class=\"group space-y-2\"\r\n  (toggle)=\"onToggle($event)\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\r\n    [class.text-muted-foreground]=\"isEmpty()\"\r\n    class=\"m-0 mt-1 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"grow truncate\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (showFiltersCount() && filtersCount() > 0) {\r\n      <!-- count -->\r\n      <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    <!-- apply filter block -->\r\n    @if (!isCollapsed()) {\r\n      <ButtonGroup>\r\n        @if (hasFilters()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.clearFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); clear()\">\r\n            <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.clearFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n        @if (selection()) {\r\n          <button\r\n            variant=\"primary\"\r\n            size=\"xs\"\r\n            [attr.title]=\"'filters.applyFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); apply()\"\r\n            class=\"h-4 px-1\">\r\n            <FilterIcon class=\"size-4\" />\r\n            <span class=\"sr-only\">{{ \"filters.apply\" | transloco }}</span>\r\n          </button>\r\n        }\r\n\r\n        <!-- select / unselect all -->\r\n        @if (isAllSelected()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.unselectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); unselectAll()\">\r\n            <i class=\"fa-fw far fa-check-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.unselectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        } @else {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.selectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.selectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); selectAll()\">\r\n            <i class=\"fa-fw far fa-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.selectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n      </ButtonGroup>\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\r\n      </button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  @if (aggregation()?.searchable && items().length) {\r\n    <InputGroup class=\"group/item mt-1\">\r\n      <input\r\n        #searchInput\r\n        input-group\r\n        id=\"aggregation-input-{{ column() }}\"\r\n        type=\"text\"\r\n        [attr.placeholder]=\"'search' | transloco\"\r\n        [(ngModel)]=\"searchText\"\r\n        class=\"mt-1\" />\r\n      <InputGroupAddon>\r\n        <SearchIcon\r\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  }\r\n\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"list\"\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        role=\"listitem\">\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            <AggregationTreeItem\r\n              [node]=\"item\"\r\n              [path]=\"[]\"\r\n              [field]=\"aggregation()?.column\"\r\n              (onSelect)=\"select()\"\r\n              (onOpen)=\"open($event)\"\r\n              (onFilter)=\"apply()\" />\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\r\n    <button\r\n      variant=\"link\"\r\n      class=\"mt-1 flex w-full justify-center\"\r\n      [attr.aria-label]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore()\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n</details>\r\n", styles: ["AggregationTreeItem:has(+AggregationTreeItem){margin-bottom:var(--agg-item-gap, 0)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: AggregationTreeItemComponent, selector: "aggregation-tree-item, AggregationTreeItem, aggregationtreeitem", inputs: ["node", "path", "field"], outputs: ["onSelect", "onOpen", "onFilter"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "directive", type: ButtonGroup, selector: "button-group, ButtonGroup", inputs: ["class", "orientation"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationTreeComponent, decorators: [{
             type: Component,
@@ -13358,7 +13761,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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    <i class=\"fa-fw fas fa-triangle-exclamation mr-1\"></i>\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<details\r\n  [attr.open]=\"expanded()\"\r\n  [attr.name]=\"id()\"\r\n  class=\"group space-y-2\"\r\n  (toggle)=\"onToggle($event)\">\r\n  <summary\r\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\r\n    [class.text-muted-foreground]=\"isEmpty()\"\r\n    class=\"m-0 mt-1 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\r\n    (click)=\"onHeaderClick($event)\">\r\n    <ng-content select=\"label\">\r\n      @if (aggregation()?.icon) {\r\n        <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\r\n      }\r\n      <span class=\"grow truncate\">{{\r\n        aggregation()?.display | syslang | transloco\r\n      }}</span>\r\n    </ng-content>\r\n\r\n    @if (showFiltersCount() && filtersCount() > 0) {\r\n      <!-- count -->\r\n      <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\r\n        {{ filtersCount() }}\r\n      </Badge>\r\n    }\r\n    <!-- apply filter block -->\r\n    @if (!isCollapsed()) {\r\n      <ButtonGroup>\r\n        @if (hasFilters()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.clearFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.clearFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); clear()\">\r\n            <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.clearFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n        @if (selection()) {\r\n          <button\r\n            variant=\"primary\"\r\n            size=\"xs\"\r\n            [attr.title]=\"'filters.applyFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.applyFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); apply()\"\r\n            class=\"h-4 px-1\">\r\n            <FilterIcon class=\"size-4\" />\r\n            <span class=\"sr-only\">{{ \"filters.apply\" | transloco }}</span>\r\n          </button>\r\n        }\r\n\r\n        <!-- select / unselect all -->\r\n        @if (isAllSelected()) {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.unselectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); unselectAll()\">\r\n            <i class=\"fa-fw far fa-check-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.unselectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        } @else {\r\n          <button\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            class=\"size-6\"\r\n            [attr.title]=\"'filters.selectAllFilters' | transloco\"\r\n            [attr.aria-label]=\"'filters.selectAllFilters' | transloco\"\r\n            (click)=\"$event.stopPropagation(); selectAll()\">\r\n            <i class=\"fa-fw far fa-square\"></i>\r\n            <span class=\"sr-only\">{{\r\n              \"filters.selectAllFilters\" | transloco\r\n            }}</span>\r\n          </button>\r\n        }\r\n      </ButtonGroup>\r\n    }\r\n\r\n    @if (collapsible()) {\r\n      <button\r\n        variant=\"none\"\r\n        title=\"Open/Close\"\r\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\r\n        <chevronright />\r\n        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\r\n      </button>\r\n    }\r\n  </summary>\r\n\r\n  <!-- content wrapper -->\r\n  @if (aggregation()?.searchable && items().length) {\r\n    <InputGroup class=\"group/item mt-1\">\r\n      <input\r\n        #searchInput\r\n        input-group\r\n        id=\"aggregation-input-{{ column() }}\"\r\n        type=\"text\"\r\n        [attr.placeholder]=\"'search' | transloco\"\r\n        [(ngModel)]=\"searchText\"\r\n        class=\"mt-1\" />\r\n      <InputGroupAddon>\r\n        <SearchIcon\r\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\r\n      </InputGroupAddon>\r\n    </InputGroup>\r\n  }\r\n\r\n  <div\r\n    #scrollElement\r\n    class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] w-full overflow-auto\">\r\n    <div\r\n      class=\"relative w-full\"\r\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\r\n      role=\"list\"\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        role=\"listitem\">\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            <AggregationTreeItem\r\n              [node]=\"item\"\r\n              [path]=\"[]\"\r\n              [field]=\"aggregation()?.column\"\r\n              (onSelect)=\"select()\"\r\n              (onOpen)=\"open($event)\"\r\n              (onFilter)=\"apply()\" />\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\r\n    <button\r\n      variant=\"link\"\r\n      class=\"mt-1 flex w-full justify-center\"\r\n      [attr.aria-label]=\"'loadMore' | transloco\"\r\n      (click)=\"loadMore()\">\r\n      {{ \"loadMore\" | transloco }}\r\n    </button>\r\n  }\r\n</details>\r\n", styles: ["AggregationTreeItem:has(+AggregationTreeItem){margin-bottom:var(--agg-item-gap, 0)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { virtualItems: [{ type: i0.ViewChildren, args: ['virtualItem', { isSignal: true }] }], scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ["searchInput", { 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 }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], 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 }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { virtualItems: [{ type: i0.ViewChildren, args: ['virtualItem', { isSignal: true }] }], scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ["searchInput", { 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 }] }], 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"] }], 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 }] }], 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.
@@ -13431,6 +13834,8 @@ class AggregationComponent {
      * 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.
      */
     onSelect = output();
+    onApply = output();
+    onClear = output();
     /**
      * A computed property that retrieves the items to be displayed in the aggregation component. It checks for the presence of date, tree, or list aggregation components and returns their respective items. If none of these components are present, it returns an empty array. This allows the component to dynamically display the appropriate items based on the type of aggregation being rendered.
      *
@@ -13470,7 +13875,7 @@ class AggregationComponent {
         return this.appStore.isDateColumn(column);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", 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" }, 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.18", 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: `
     @if (isDate(aggregation()?.column)) {
     <AggregationDate
       class="max-w-80"
@@ -13482,6 +13887,8 @@ class AggregationComponent {
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
       [title]="{ label: 'Date', icon: 'far fa-calendar-day' }"
+      (onApply)="onApply.emit($event)"
+      (onClear)="onClear.emit($event)"
       />
   } @else if (aggregation()?.isTree) {
     <AggregationTree
@@ -13495,6 +13902,8 @@ class AggregationComponent {
       [searchable]="searchable()"
       [expandedLevel]="expandedLevel()"
       (onSelect)="onSelect.emit($event)"
+      (onApply)="onApply.emit($event)"
+      (onClear)="onClear.emit($event)"
       />
   }
   @else {
@@ -13508,9 +13917,11 @@ class AggregationComponent {
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
       (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", "searchTextChange"] }, { kind: "component", type: AggregationTreeComponent, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: ["class", "id", "name", "column", "expandedLevel", "collapsible", "collapsed", "searchable", "showFiltersCount", "searchText"], outputs: ["onSelect", "searchTextChange"] }, { kind: "component", type: AggregationDateComponent, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: ["title", "displayEmptyDistributionIntervals"] }] });
+  `, 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", "expandedLevel", "collapsible", "collapsed", "searchable", "showFiltersCount", "searchText"], outputs: ["onSelect", "onApply", "onClear", "searchTextChange"] }, { kind: "component", type: AggregationDateComponent, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: ["title", "displayEmptyDistributionIntervals", "name"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationComponent, decorators: [{
             type: Component,
@@ -13529,6 +13940,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
       [title]="{ label: 'Date', icon: 'far fa-calendar-day' }"
+      (onApply)="onApply.emit($event)"
+      (onClear)="onClear.emit($event)"
       />
   } @else if (aggregation()?.isTree) {
     <AggregationTree
@@ -13542,6 +13955,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       [searchable]="searchable()"
       [expandedLevel]="expandedLevel()"
       (onSelect)="onSelect.emit($event)"
+      (onApply)="onApply.emit($event)"
+      (onClear)="onClear.emit($event)"
       />
   }
   @else {
@@ -13555,6 +13970,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
       (onSelect)="onSelect.emit($event)"
+      (onApply)="onApply.emit($event)"
+      (onClear)="onClear.emit($event)"
       />
   }
   `,
@@ -13562,7 +13979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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"] }] } });
+        }], 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"] }] } });
 
 class AsideFiltersComponent {
     cn = cn;
@@ -13589,7 +14006,7 @@ class AsideFiltersComponent {
       <Aggregation id="aside-filters" [name]="agg.name" [column]="agg.column" showFiltersCount />
     }
   </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel"], outputs: ["onSelect"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel"], outputs: ["onSelect", "onApply", "onClear"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AsideFiltersComponent, decorators: [{
             type: Component,
@@ -13610,7 +14027,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 
 class FilterButtonComponent {
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
     column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
     position = input("bottom-start", ...(ngDevMode ? [{ debugName: "position" }] : []));
     offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : []));
@@ -13633,15 +14050,20 @@ class FilterButtonComponent {
     appStore = inject(AppStore);
     constructor() {
         effect(() => {
-            const agg = this.aggregationsStore.getAggregation(this.name());
-            const f = this.queryParamsStore.getFilter({ name: agg?.name, field: agg?.column });
+            const name = this.name();
+            const column = this.column();
+            let agg = undefined;
+            if (name) {
+                agg = this.aggregationsStore.getAggregation(name);
+                if (!agg)
+                    return;
+            }
+            const f = this.queryParamsStore.getFilter({ name: name, field: column });
             const count = f?.count || 0;
-            if (!agg)
-                return;
             // retrieve customization fron the custom JSON provided by the server
-            const { icon, hidden = false, display } = this.appStore.getAggregationCustomization(this.column(), this.name()) || {};
+            const { icon, hidden = false, display } = this.appStore.getAggregationCustomization(column, name) || {};
             const r = {
-                name: agg?.name,
+                name,
                 column: this.column(),
                 icon,
                 hidden,
@@ -13653,6 +14075,10 @@ class FilterButtonComponent {
                 // to be able to display the date range
                 legacyFilter: this.isDate(this.column()) ? f : undefined
             };
+            if (this.isDate(this.column())) {
+                // for date filters, we want to display the date range in the button
+                r.disabled = false; // date filters should never be disabled, even if they have no items, because they can still be applied with a custom range
+            }
             this.filter.set(r);
         });
         effect(() => {
@@ -13670,7 +14096,7 @@ class FilterButtonComponent {
         return this.appStore.isDateColumn(column);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterButtonComponent, isStandalone: true, selector: "filter-button, FilterButton", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class.hidden": "filter().hidden" } }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FilterButtonComponent, isStandalone: true, selector: "filter-button, FilterButton", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class.hidden": "filter().hidden" } }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <Popover [disabled]="filter().disabled" class="group">
       <button
         [variant]="variant()"
@@ -13693,11 +14119,7 @@ class FilterButtonComponent {
         }
 
         <!-- show the count of selected items -->
-        @if (filter().isTree && filter().count > 0) {
-          <Badge size="xs" >
-            {{ filter().count }}
-          </Badge>
-        } @else if (filter().count > 1) {
+        @if (filter().count > 1) {
           <Badge size="xs" class="pb-0.5">+{{ filter().count - 1 }}</Badge>
         }
       </button>
@@ -13708,17 +14130,27 @@ class FilterButtonComponent {
         [offset]="offset()"
       >
       @if(contentRef.isVisible) {
+        @let name = filter().name;
+        @let column = filter().column;
+        @if(name) {
           <Aggregation
             class="w-60 [--height:19lh]"
             id="filter-{{ filter().column }}"
-            [name]="filter().name"
-            [column]="filter().column"
+            [name]="name"
+            [column]="column"
             [expandedLevel]="expandedLevel()"
+            (onApply)="popoverRef()?.close()"
+            (onClear)="popoverRef()?.close()"
           />
+        } @else {
+          <div class="p-4 text-sm text-foreground/60">
+            {{ 'INVALID_FILTER_NAME' | transloco }}
+          </div>
+        }
       }
       </PopoverContent>
     </Popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { 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"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { 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"] }, { 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", "size"] }, { 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.18", ngImport: i0, type: FilterButtonComponent, decorators: [{
             type: Component,
@@ -13758,11 +14190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         }
 
         <!-- show the count of selected items -->
-        @if (filter().isTree && filter().count > 0) {
-          <Badge size="xs" >
-            {{ filter().count }}
-          </Badge>
-        } @else if (filter().count > 1) {
+        @if (filter().count > 1) {
           <Badge size="xs" class="pb-0.5">+{{ filter().count - 1 }}</Badge>
         }
       </button>
@@ -13773,13 +14201,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         [offset]="offset()"
       >
       @if(contentRef.isVisible) {
+        @let name = filter().name;
+        @let column = filter().column;
+        @if(name) {
           <Aggregation
             class="w-60 [--height:19lh]"
             id="filter-{{ filter().column }}"
-            [name]="filter().name"
-            [column]="filter().column"
+            [name]="name"
+            [column]="column"
             [expandedLevel]="expandedLevel()"
+            (onApply)="popoverRef()?.close()"
+            (onClear)="popoverRef()?.close()"
           />
+        } @else {
+          <div class="p-4 text-sm text-foreground/60">
+            {{ 'INVALID_FILTER_NAME' | transloco }}
+          </div>
+        }
       }
       </PopoverContent>
     </Popover>
@@ -13789,7 +14227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         role: "listitem"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }] } });
 
 const FILTERS_BREAKPOINT = new InjectionToken('FILTERS_BREAKPOINT', { factory: () => 5 });
 
@@ -13889,7 +14327,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"] }, { 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"], outputs: ["onSelect", "onApply", "onClear"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MoreComponent, decorators: [{
             type: Component,
@@ -13955,7 +14393,7 @@ class MoreButtonComponent {
         }
       </PopoverContent>
     </Popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: PopoverComponent, selector: "popover, Popover", inputs: ["disabled", "closeOnScroll"], outputs: ["closed"] }, { kind: "directive", type: PopoverContentComponent, selector: "popover-content, PopoverContent, popovercontent", inputs: ["class", "position", "keepOpen", "offset", "strategy"], exportAs: ["popoverContent"] }, { kind: "component", type: MoreComponent, selector: "more, More", inputs: ["count", "includedFilters", "excludedFilters", "aggregations"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: PopoverComponent, selector: "popover, Popover", inputs: ["disabled", "closeOnScroll"], outputs: ["closed"] }, { kind: "directive", type: PopoverContentComponent, selector: "popover-content, PopoverContent, popovercontent", inputs: ["class", "position", "keepOpen", "offset", "strategy"], exportAs: ["popoverContent"] }, { kind: "component", type: MoreComponent, selector: "more, More", inputs: ["count", "includedFilters", "excludedFilters", "aggregations"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: MoreButtonComponent, decorators: [{
             type: Component,
@@ -14167,12 +14605,12 @@ class FiltersBarComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FiltersBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: FiltersBarComponent, isStandalone: true, selector: "filters-bar, FiltersBar, filtersbar", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, morePosition: { classPropertyName: "morePosition", publicName: "morePosition", isSignal: true, isRequired: false, transformFunction: null }, aggregations: { classPropertyName: "aggregations", publicName: "aggregations", isSignal: true, isRequired: false, transformFunction: null }, includeFilters: { classPropertyName: "includeFilters", publicName: "includeFilters", isSignal: true, isRequired: false, transformFunction: null }, excludeFilters: { classPropertyName: "excludeFilters", publicName: "excludeFilters", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, showMoreFiltersButton: { classPropertyName: "showMoreFiltersButton", publicName: "showMoreFiltersButton", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClearFilters: "onClearFilters", onClearBasket: "onClearBasket" }, host: { listeners: { "click": "handleClick($event)" }, properties: { "class": "cn('block relative', class())" } }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "moreButtonRef", first: true, predicate: MoreButtonComponent, descendants: true, isSignal: true }, { propertyName: "filterButtonRefs", predicate: FilterButtonComponent, descendants: true, isSignal: true }, { propertyName: "overflowManagerRef", first: true, predicate: OverflowManagerDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
-    <ng-container overflowManager [direction]="direction()" [target]="el.nativeElement" (count)="adjustFiltersCount($event)">
+    <div overflowManager [direction]="direction()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
       @if (hasFilters()) {
         <button
           variant="destructive"
           size="icon"
-          class="shrink-0"
+          class="shrink-0 size-9"
           role="listitem"
           [title]="'filters.clearAllFilters' | transloco"
           (click)="clearFilters()"
@@ -14184,7 +14622,7 @@ class FiltersBarComponent {
       @if (currentBasket()) {
         <button
           variant="destructive"
-          class="max-w-40"
+          class="max-w-40 size-9"
           role="listitem"
           [title]="'filters.clearBasket' | transloco"
           (click)="clearBasket()"
@@ -14196,29 +14634,29 @@ class FiltersBarComponent {
 
       @if (hasAggregations()) {
       <div
-        [class]="cn('flex gap-1 h-9 z-filter', BreakpointObserverService.isMobile() && 'flex-wrap',  direction() === 'vertical' ? 'flex-col items-start' : 'flex-row')"
+        [class]="cn('flex gap-1 h-9 z-filter flex-1 min-w-0', direction() === 'vertical' ? 'flex-col items-start' : 'flex-row')"
         role="list"
         aria-label="Filters list">
         @for (filter of authorizedFilters(); track filter.name) {
           <FilterButton class="max-w-60" overflowItem [name]="filter.name" [column]="filter.column" [position]="position()" [offset]="offset()" [expandedLevel]="expandedLevel()" />
         }
-
-        <!-- More button to show more filters if there are any, it's hidden by default -->
-        @if (showMoreFiltersButton()) {
-          <MoreButton
-            overflowStop
-            [class]="cn('invisible absolute', direction() === 'horizontal' ? 'right-0' : 'bottom-0', hasMoreFilters().length > 0 && 'visible')"
-            role="listitem"
-            [count]="visibleFiltersCount()"
-            [position]="morePosition()"
-            [includedFilters]="includeFilters()"
-            [excludedFilters]="excludeFilters()"
-            [aggregations]="aggregations()" />
-        }
       </div>
+
+      <!-- Always mounted so the stop position is stable; hidden when all filters fit -->
+      @if (showMoreFiltersButton()) {
+        <MoreButton
+          overflowStop
+          [class]="cn('shrink-0', hasMoreFilters().length === 0 && 'invisible pointer-events-none')"
+          role="listitem"
+          [count]="visibleFiltersCount()"
+          [position]="morePosition()"
+          [includedFilters]="includeFilters()"
+          [excludedFilters]="excludeFilters()"
+          [aggregations]="aggregations()" />
+      }
       }
-    </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: MoreButtonComponent, selector: "more-button, MoreButton", inputs: ["count", "position", "includedFilters", "excludedFilters", "aggregations"] }, { kind: "component", type: FilterButtonComponent, selector: "filter-button, FilterButton", inputs: ["name", "column", "position", "offset", "expandedLevel"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: MoreButtonComponent, selector: "more-button, MoreButton", inputs: ["count", "position", "includedFilters", "excludedFilters", "aggregations"] }, { kind: "component", type: FilterButtonComponent, selector: "filter-button, FilterButton", inputs: ["name", "column", "position", "offset", "expandedLevel"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: FiltersBarComponent, decorators: [{
             type: Component,
@@ -14236,12 +14674,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     ],
                     providers: [provideTranslocoScope("filters")],
                     template: `
-    <ng-container overflowManager [direction]="direction()" [target]="el.nativeElement" (count)="adjustFiltersCount($event)">
+    <div overflowManager [direction]="direction()" (count)="adjustFiltersCount($event)"  class="flex items-end gap-2 rounded-[inherit] bg-inherit">
       @if (hasFilters()) {
         <button
           variant="destructive"
           size="icon"
-          class="shrink-0"
+          class="shrink-0 size-9"
           role="listitem"
           [title]="'filters.clearAllFilters' | transloco"
           (click)="clearFilters()"
@@ -14253,7 +14691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
       @if (currentBasket()) {
         <button
           variant="destructive"
-          class="max-w-40"
+          class="max-w-40 size-9"
           role="listitem"
           [title]="'filters.clearBasket' | transloco"
           (click)="clearBasket()"
@@ -14265,28 +14703,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
       @if (hasAggregations()) {
       <div
-        [class]="cn('flex gap-1 h-9 z-filter', BreakpointObserverService.isMobile() && 'flex-wrap',  direction() === 'vertical' ? 'flex-col items-start' : 'flex-row')"
+        [class]="cn('flex gap-1 h-9 z-filter flex-1 min-w-0', direction() === 'vertical' ? 'flex-col items-start' : 'flex-row')"
         role="list"
         aria-label="Filters list">
         @for (filter of authorizedFilters(); track filter.name) {
           <FilterButton class="max-w-60" overflowItem [name]="filter.name" [column]="filter.column" [position]="position()" [offset]="offset()" [expandedLevel]="expandedLevel()" />
         }
-
-        <!-- More button to show more filters if there are any, it's hidden by default -->
-        @if (showMoreFiltersButton()) {
-          <MoreButton
-            overflowStop
-            [class]="cn('invisible absolute', direction() === 'horizontal' ? 'right-0' : 'bottom-0', hasMoreFilters().length > 0 && 'visible')"
-            role="listitem"
-            [count]="visibleFiltersCount()"
-            [position]="morePosition()"
-            [includedFilters]="includeFilters()"
-            [excludedFilters]="excludeFilters()"
-            [aggregations]="aggregations()" />
-        }
       </div>
+
+      <!-- Always mounted so the stop position is stable; hidden when all filters fit -->
+      @if (showMoreFiltersButton()) {
+        <MoreButton
+          overflowStop
+          [class]="cn('shrink-0', hasMoreFilters().length === 0 && 'invisible pointer-events-none')"
+          role="listitem"
+          [count]="visibleFiltersCount()"
+          [position]="morePosition()"
+          [includedFilters]="includeFilters()"
+          [excludedFilters]="excludeFilters()"
+          [aggregations]="aggregations()" />
+      }
       }
-    </ng-container>
+    </div>
   `,
                     host: {
                         "[class]": "cn('block relative', class())",
@@ -14716,7 +15154,7 @@ class LabelsEditDialog {
         </DialogFooter>
       </DialogContent>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "component", type: MultiSelectLabelsComponent, selector: "multiselect-labels, multiselectlabels, MultiSelectLabels", inputs: ["article", "isPublic", "allowModification", "labelsField", "labelInput"], outputs: ["articleChange", "labelInputChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "component", type: MultiSelectLabelsComponent, selector: "multiselect-labels, multiselectlabels, MultiSelectLabels", inputs: ["article", "isPublic", "allowModification", "labelsField", "labelInput"], outputs: ["articleChange", "labelInputChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LabelsEditDialog, decorators: [{
             type: Component,
@@ -14785,7 +15223,7 @@ class SearchFooterComponent {
     <button variant="link" class="ml-auto" [attr.title]="'seeMore' | transloco" [routerLink]="[config().routerLink]">
       {{ 'seeMore' | transloco }}
     </button>
-  </div>`, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  </div>`, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SearchFooterComponent, decorators: [{
             type: Component,
@@ -14901,7 +15339,7 @@ class SearchListComponent {
         <ng-content />
       </li>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SearchListComponent, decorators: [{
             type: Component,
@@ -15091,7 +15529,7 @@ class SavedSearchDialog {
           </DialogFooter>
         </DialogContent>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { 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: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog, [dialog]", outputs: ["closed"], exportAs: ["dialog"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle", inputs: ["class"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent", inputs: ["class"] }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter", inputs: ["class"] }, { 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: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SavedSearchDialog, decorators: [{
             type: Component,
@@ -15382,7 +15820,7 @@ class UserProfileFormComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: UserProfileFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: UserProfileFormComponent, isStandalone: true, selector: "user-profile-form, UserProfileForm, userprofileform", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", currentLanguage: "currentLanguageChange" }, providers: [provideTranslocoScope("user-profile", "login")], viewQueries: [{ propertyName: "createInputElement", first: true, predicate: ["avatarInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground/80 size-14 cursor-pointer\"\n          (click)=\"avatarInput.click()\">\n          @if (profile?.data?.profilePhoto) {\n            <AvatarImage\n              [src]=\"profile?.data?.profilePhoto!\"\n              width=\"44\"\n              height=\"44\"\n              alt=\"avatar\" />\n          }\n          <AvatarFallback class=\"text-lg\">\n            @if (initials()) {\n              <span>{{ initials() }}</span>\n            } @else {\n              <UserIcon class=\"size-7 p-1\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            size=\"icon\"\n            class=\"text-destructive cursor-pointer\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE -->\n        <select\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 rounded-md border px-2 hover:outline focus:outline\"\n          [(ngModel)]=\"currentLanguage\"\n          (change)=\"changeLanguage()\">\n          @for (lang of AllLanguages; track lang.code) {\n            <option [value]=\"lang.code\">\n              {{ lang.label }}\n            </option>\n          }\n        </select>\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      @for (key of formKeys(); track key) {\n        <div>\n          <p>{{ `userProfile.data.${key}` | transloco }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n              @if (propertyToEdit() === \"data.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"data\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"data.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('data', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('data', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('data', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n      @for (key of customData(); track key) {\n        <div>\n          <p>{{ key }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('customData', key)\">\n              @if (propertyToEdit() === \"customData.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"customData\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"customData.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('customData', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('customData', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('customData', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n} @else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: EditIcon, selector: "edit-icon, EditIcon, editicon", inputs: ["class"] }, { kind: "component", type: UndoIcon, selector: "UndoIcon, undoicon, undo-icon", inputs: ["class"] }, { kind: "component", type: AvatarComponent, selector: "avatar, Avatar", inputs: ["class"] }, { kind: "component", type: AvatarFallbackComponent, selector: "avatar-fallback, avatarfallback, AvatarFallback", inputs: ["class"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: AvatarImageComponent, selector: "avatar-image, AvatarImage, avatarimage", inputs: ["class", "src", "alt", "width", "height", "referrerPolicy", "crossOrigin"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: ChangePasswordComponent, selector: "change-password, ChangePassword, changepassword", inputs: ["username", "alert", "redirectAfterSuccess", "redirectAfterCancel", "currentPassword", "newPassword", "confirmPassword"], outputs: ["success", "cancel", "currentPasswordChange", "newPasswordChange", "confirmPasswordChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: UserProfileFormComponent, isStandalone: true, selector: "user-profile-form, UserProfileForm, userprofileform", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, currentLanguage: { classPropertyName: "currentLanguage", publicName: "currentLanguage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", currentLanguage: "currentLanguageChange" }, providers: [provideTranslocoScope("user-profile", "login")], viewQueries: [{ propertyName: "createInputElement", first: true, predicate: ["avatarInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (userProfileResource.hasValue()) {\n  @let profile = userProfile();\n  <div class=\"flex flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        <!-- AVATAR -->\n        <Avatar\n          class=\"bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground/80 size-14 cursor-pointer\"\n          (click)=\"avatarInput.click()\">\n          @if (profile?.data?.profilePhoto) {\n            <AvatarImage\n              [src]=\"profile?.data?.profilePhoto!\"\n              width=\"44\"\n              height=\"44\"\n              alt=\"avatar\" />\n          }\n          <AvatarFallback class=\"text-lg\">\n            @if (initials()) {\n              <span>{{ initials() }}</span>\n            } @else {\n              <UserIcon class=\"size-7 p-1\" />\n            }\n          </AvatarFallback>\n        </Avatar>\n        @if (profile?.data?.profilePhoto) {\n          <button\n            variant=\"ghost\"\n            size=\"icon\"\n            class=\"text-destructive cursor-pointer\"\n            title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n            [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE -->\n        <select\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 rounded-md border px-2 hover:outline focus:outline\"\n          [(ngModel)]=\"currentLanguage\"\n          (change)=\"changeLanguage()\">\n          @for (lang of AllLanguages; track lang.code) {\n            <option [value]=\"lang.code\">\n              {{ lang.label }}\n            </option>\n          }\n        </select>\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      @for (key of formKeys(); track key) {\n        <div>\n          <p>{{ `userProfile.data.${key}` | transloco }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n              @if (propertyToEdit() === \"data.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"data\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"data.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('data', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('data', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('data', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n      @for (key of customData(); track key) {\n        <div>\n          <p>{{ key }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('customData', key)\">\n              @if (propertyToEdit() === \"customData.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"customData\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"customData.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('customData', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('customData', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('customData', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n} @else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: EditIcon, selector: "edit-icon, EditIcon, editicon", inputs: ["class"] }, { kind: "component", type: UndoIcon, selector: "UndoIcon, undoicon, undo-icon", inputs: ["class"] }, { kind: "component", type: AvatarComponent, selector: "avatar, Avatar", inputs: ["class"] }, { kind: "component", type: AvatarFallbackComponent, selector: "avatar-fallback, avatarfallback, AvatarFallback", inputs: ["class"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: AvatarImageComponent, selector: "avatar-image, AvatarImage, avatarimage", inputs: ["class", "src", "alt", "width", "height", "referrerPolicy", "crossOrigin"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size"] }, { kind: "component", type: ChangePasswordComponent, selector: "change-password, ChangePassword, changepassword", inputs: ["username", "alert", "redirectAfterSuccess", "redirectAfterCancel", "currentPassword", "newPassword", "confirmPassword"], outputs: ["success", "cancel", "currentPasswordChange", "newPasswordChange", "confirmPasswordChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: UserProfileFormComponent, decorators: [{
             type: Component,
@@ -15412,7 +15850,7 @@ class UserProfileDialog {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: UserProfileDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: UserProfileDialog, isStandalone: true, selector: "user-profile-dialog, userprofiledialog, UserProfileDialog", providers: [provideTranslocoScope("user-profile")], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div dialog #dialog="dialog">
-      <DialogContent class="max-h-11/12 overflow-auto">
+      <DialogContent class="max-h-11/12 overflow-auto z-60">
         <DialogHeader>
           <DialogTitle>{{ 'userProfile.title' | transloco }}</DialogTitle>
         </DialogHeader>
@@ -15440,7 +15878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     providers: [provideTranslocoScope("user-profile")],
                     template: `
     <div dialog #dialog="dialog">
-      <DialogContent class="max-h-11/12 overflow-auto">
+      <DialogContent class="max-h-11/12 overflow-auto z-60">
         <DialogHeader>
           <DialogTitle>{{ 'userProfile.title' | transloco }}</DialogTitle>
         </DialogHeader>
@@ -15652,5 +16090,5 @@ const queryNameResolver = () => {
  * Generated bundle index. Do not edit.
  */
 
-export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchComponent, AggregationComponent, AggregationDateComponent, AggregationListComponent, AggregationTreeComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertsComponent, AppService, AppStore, ApplicationService, ApplicationStore, ArticleEntities, ArticleExtracts, ArticleLabels, ArticleSimilarDocuments, AsideFiltersComponent, AuditFeedbackType, AuditService, AuthGuard, AuthPageComponent, AutocompleteService, BOOKMARKS_CONFIG, BOOKMARKS_OPTIONS, BackdropComponent, BackdropService, BookmarkButtonComponent, BookmarksComponent, COLLECTIONS_CONFIG, COLLECTIONS_OPTIONS, COMPONENTS_FOR_DOCUMENT_TYPE, ChangePasswordComponent, ChildMarkerDirective, CollectionsComponent, CollectionsDialog, DRAWER_COMPONENT, DRAWER_STACK_MAX_COUNT, DateComponent, DeleteCollectionDialog, DidYouMeanComponent, DocumentLocatorComponent, DrawerAdvancedFiltersComponent, DrawerComponent, DrawerNavbarComponent, DrawerPreviewComponent, DrawerService, DrawerStackComponent, DrawerStackService, DropdownInputComponent, DropdownListComponent, ErrorComponent, ExportDialog, ExportService, FILTERS_BREAKPOINT, FILTER_DATE_ALLOW_CUSTOM_RANGE, FeedbackDialogComponent, FileSizePipe, FilterButtonComponent, FiltersBarComponent, HIGHLIGHTS, HighlightWordPipe, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardNavigatorDirective, LabelService, LabelsEditDialog, LoadingComponent, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUserDialogComponent, PREVIEW_CONFIG, PagerComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, RECENT_SEARCHES_CONFIG, RECENT_SEARCHES_OPTIONS, ROUTE_COMPONENTS, RecentSearchesComponent, ResetUserSettingsDialogComponent, SAVED_SEARCHES_CONFIG, SAVED_SEARCHES_OPTIONS, SavedSearchDialog, SavedSearchesComponent, SavedSearchesService, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectArticleOnClickDirective, SelectionHistoryService, SelectionService, SelectionStore, ShowBookmarkDirective, SignInComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserProfileDialog, UserProfileFormComponent, UserProfileService, UserSettingsStore, applyThemeToNativeElement, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, buildQuery, debouncedSignal, errorInterceptorFn, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, processCssVars, queryNameResolver, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, toastInterceptorFn, withAggregationsFeatures, withAlertsFeatures, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withBootstrapApp, withExtractsFeatures, withFetch, withMultiSelectionFeatures, withPrincipalFeatures, withQueryParamsFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
+export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchComponent, AggregationComponent, AggregationDateComponent, AggregationDateRangeDialogComponent, AggregationListComponent, AggregationTreeComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertsComponent, AppService, AppStore, ApplicationService, ApplicationStore, ArticleEntities, ArticleExtracts, ArticleLabels, ArticleSimilarDocuments, AsideFiltersComponent, AuditFeedbackType, AuditService, AuthGuard, AuthPageComponent, AutocompleteService, BOOKMARKS_CONFIG, BOOKMARKS_OPTIONS, BackdropComponent, BackdropService, BookmarkButtonComponent, BookmarksComponent, COLLECTIONS_CONFIG, COLLECTIONS_OPTIONS, COMPONENTS_FOR_DOCUMENT_TYPE, ChangePasswordComponent, ChildMarkerDirective, CollectionsComponent, CollectionsDialog, DRAWER_COMPONENT, DRAWER_STACK_MAX_COUNT, DateComponent, DeleteCollectionDialog, DidYouMeanComponent, DocumentLocatorComponent, DrawerAdvancedFiltersComponent, DrawerComponent, DrawerNavbarComponent, DrawerPreviewComponent, DrawerService, DrawerStackComponent, DrawerStackService, DropdownInputComponent, DropdownListComponent, ErrorComponent, ExportDialog, ExportService, FILTERS_BREAKPOINT, FILTER_DATE_ALLOW_CUSTOM_RANGE, FeedbackDialogComponent, FileSizePipe, FilterButtonComponent, FiltersBarComponent, HIGHLIGHTS, HighlightWordPipe, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardNavigatorDirective, LabelService, LabelsEditDialog, LoadingComponent, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUserDialogComponent, PREVIEW_CONFIG, PagerComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, RECENT_SEARCHES_CONFIG, RECENT_SEARCHES_OPTIONS, ROUTE_COMPONENTS, RecentSearchesComponent, ResetUserSettingsDialogComponent, SAVED_SEARCHES_CONFIG, SAVED_SEARCHES_OPTIONS, SavedSearchDialog, SavedSearchesComponent, SavedSearchesService, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectArticleOnClickDirective, SelectionHistoryService, SelectionService, SelectionStore, ShowBookmarkDirective, SignInComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserProfileDialog, UserProfileFormComponent, UserProfileService, UserSettingsStore, applyThemeToNativeElement, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, buildQuery, debouncedSignal, errorInterceptorFn, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, processCssVars, queryNameResolver, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, toastInterceptorFn, withAggregationsFeatures, withAlertsFeatures, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withBootstrapApp, withExtractsFeatures, withFetch, withMultiSelectionFeatures, withPrincipalFeatures, withQueryParamsFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
 //# sourceMappingURL=sinequa-atomic-angular.mjs.map