@sinequa/atomic-angular 0.4.22 → 0.4.37

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, HorizontalDividerComponent, CardComponent, CardHeaderComponent, CardContentComponent, CardFooterComponent, PopoverContentComponent, BookmarkIcon, UserIcon, TrashIcon, FolderIcon, VerticalDividerComponent, BreakpointObserverService, 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';
@@ -1242,6 +1242,8 @@ const initialPrincipal = {
     fullName: "",
     isAdministrator: false,
     isDelegatedAdmin: false,
+    editablePartition: undefined,
+    passwordExpirationDate: null,
     description: "",
     param1: "",
     param2: "",
@@ -1264,6 +1266,7 @@ const PrincipalStore = signalStore({ providedIn: 'root' }, withDevtools('Princip
         if (!fullName)
             return '';
         return fullName
+            .trim()
             .split(' ')
             .map(word => word[0]?.toUpperCase())
             .join('');
@@ -4137,9 +4140,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.
@@ -4817,8 +4821,8 @@ class UserProfileService {
      * @param id - The ID of the user.
      * @returns An Observable that emits an the UserProfile object.
      */
-    getUserProfile(principal) {
-        return httpResource(() => (principal()?.userId ? `${this.API_URL}/${principal()?.userId}` : undefined), {
+    getUserProfile(userId) {
+        return httpResource(() => (userId() ? `${this.API_URL}/${userId()}` : undefined), {
             parse: (response) => {
                 return response;
             }
@@ -4882,7 +4886,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,
@@ -5074,7 +5078,7 @@ class DocumentLocatorComponent {
 
     <div #documentLocator class="flex grow items-center gap-2 overflow-auto">
       @for (segment of visibleSegments(); track $index) {
-        <button decoration="underline" class="text-foreground h-auto cursor-pointer whitespace-nowrap p-0" (click)="navigateToSegment($index)">
+        <button variant="link" class="text-foreground h-auto cursor-pointer whitespace-nowrap p-0" (click)="navigateToSegment($index)">
           {{ segment }}
         </button>
 
@@ -5103,7 +5107,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,
@@ -5137,7 +5141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 
     <div #documentLocator class="flex grow items-center gap-2 overflow-auto">
       @for (segment of visibleSegments(); track $index) {
-        <button decoration="underline" class="text-foreground h-auto cursor-pointer whitespace-nowrap p-0" (click)="navigateToSegment($index)">
+        <button variant="link" class="text-foreground h-auto cursor-pointer whitespace-nowrap p-0" (click)="navigateToSegment($index)">
           {{ segment }}
         </button>
 
@@ -5550,11 +5554,11 @@ class CollectionsDialog {
           }
 
         <DialogFooter class="flex flex-col">
-          <button decoration="outline" #closeBtn (click)="onClose()" >
+          <button variant="outline" #closeBtn (click)="onClose()" >
             {{ 'collections.close' | transloco }}
           </button>
           <button
-            [decoration]="creating() ? 'outline' : undefined"
+            [variant]="creating() ? 'outline' : undefined"
             tabindex="0"
             [attr.title]="(creating() ? 'collections.cancelCreation' : 'collections.createCollection') | transloco"
             (click)="onCreate()">
@@ -5572,7 +5576,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,
@@ -5634,11 +5638,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           }
 
         <DialogFooter class="flex flex-col">
-          <button decoration="outline" #closeBtn (click)="onClose()" >
+          <button variant="outline" #closeBtn (click)="onClose()" >
             {{ 'collections.close' | transloco }}
           </button>
           <button
-            [decoration]="creating() ? 'outline' : undefined"
+            [variant]="creating() ? 'outline' : undefined"
             tabindex="0"
             [attr.title]="(creating() ? 'collections.cancelCreation' : 'collections.createCollection') | transloco"
             (click)="onCreate()">
@@ -5889,7 +5893,7 @@ class ExportDialog {
         </section>
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.close()">
+          <button variant="outline" (click)="dialog.close()">
             {{ 'cancel' | transloco }}
           </button>
           <button tabindex="0" [attr.title]="'export.download' | transloco" (click)="onDownload()">
@@ -5898,7 +5902,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,
@@ -5978,7 +5982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         </section>
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.close()">
+          <button variant="outline" (click)="dialog.close()">
             {{ 'cancel' | transloco }}
           </button>
           <button tabindex="0" [attr.title]="'export.download' | transloco" (click)="onDownload()">
@@ -6906,11 +6910,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;
@@ -6924,10 +6935,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.
@@ -6935,11 +6950,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 });
@@ -7051,8 +7064,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);
@@ -7064,6 +7075,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".
@@ -7117,23 +7130,22 @@ 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"
               [active]="this.currentPath() === tab.path"
               [routerLink]="[tab.routerLink]"
@@ -7141,13 +7153,13 @@ class NavbarTabsComponent {
               (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>
@@ -7156,37 +7168,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,
@@ -7213,15 +7227,17 @@ 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"
               [active]="this.currentPath() === tab.path"
               [routerLink]="[tab.routerLink]"
@@ -7229,13 +7245,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
               (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>
@@ -7244,34 +7260,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>
     }
   `,
@@ -7279,7 +7297,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 });
@@ -7389,7 +7407,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,
@@ -7509,7 +7527,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,
@@ -7737,7 +7755,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,
@@ -8073,7 +8091,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,
@@ -8093,6 +8111,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.
  *
@@ -8192,6 +8495,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
@@ -8363,6 +8668,7 @@ class AggregationListComponent {
             this.isAllSelected.set(false);
         }
         this.onSelect.emit([]);
+        this.onClear.emit();
     }
     /**
      * Select all filters for the aggregation column.
@@ -8434,6 +8740,7 @@ class AggregationListComponent {
         }
         this.searchText.set("");
         this.selection.set(false);
+        this.onApply.emit();
     }
     loadMore() {
         const q = this.queryParamsStore.getQuery();
@@ -8549,7 +8856,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,
@@ -8572,11 +8879,11 @@ 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);
@@ -8592,16 +8899,20 @@ class AggregationDateComponent extends AggregationListComponent {
     today = new Date();
     lang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "lang" }] : []));
     validSelection = signal(false, ...(ngDevMode ? [{ debugName: "validSelection" }] : []));
+    formValue = toSignal(this.form.valueChanges, { initialValue: this.form.value });
+    customRangeLabel = computed(() => {
+        const { from, to } = this.formValue().customRange ?? {};
+        if (!from && !to)
+            return null;
+        const locale = this.lang();
+        const fmt = (iso) => iso ? new Date(iso).toLocaleDateString(locale) : "…";
+        return `${fmt(from ?? null)} – ${fmt(to ?? null)}`;
+    }, ...(ngDevMode ? [{ debugName: "customRangeLabel" }] : []));
     constructor(destroyRef) {
         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(() => {
@@ -8614,9 +8925,6 @@ class AggregationDateComponent extends AggregationListComponent {
             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();
@@ -8634,6 +8942,7 @@ class AggregationDateComponent extends AggregationListComponent {
             const filter = this.getFormValueFilter();
             this.queryParamsStore.updateFilter(filter);
             this.selection.set(false);
+            this.onApply.emit();
         }
         catch (err) {
             warn("Error applying date filter:", err);
@@ -8653,8 +8962,16 @@ class AggregationDateComponent extends AggregationListComponent {
         const agg = this.aggregation();
         if (agg && notify) {
             this.queryParamsStore.removeFilterByName(agg.name);
+            this.onClear.emit();
         }
     }
+    onRangeSelected(range) {
+        this.form.patchValue({
+            option: "custom-range",
+            customRange: { from: range.from, to: range.to }
+        });
+        this.select();
+    }
     updateForm(filter) {
         if (!filter) {
             this.clear(false);
@@ -8686,15 +9003,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;
@@ -8750,44 +9058,23 @@ 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 ɵ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: "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\r\n          <label\r\n            for=\"date-filter-range-dialog\"\r\n            class=\"flex grow cursor-pointer items-center gap-1 p-1\"\r\n            (click)=\"dateRangeDialog()?.open()\">\r\n            @let rangeLabel = customRangeLabel();\r\n            @if (rangeLabel) {\r\n              <span class=\"w-full\">{{ rangeLabel }}</span>\r\n            } @else {\r\n              <span>{{ \"filters.selectDateRange\" | transloco }}</span>\r\n            }\r\n          </label>\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: AggregationDateComponent, decorators: [{
             type: Component,
             args: [{ selector: "aggregation-date, AggregationDate, aggregationdate", 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"] }]
-        }], 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\r\n          <label\r\n            for=\"date-filter-range-dialog\"\r\n            class=\"flex grow cursor-pointer items-center gap-1 p-1\"\r\n            (click)=\"dateRangeDialog()?.open()\">\r\n            @let rangeLabel = customRangeLabel();\r\n            @if (rangeLabel) {\r\n              <span class=\"w-full\">{{ rangeLabel }}</span>\r\n            } @else {\r\n              <span>{{ \"filters.selectDateRange\" | transloco }}</span>\r\n            }\r\n          </label>\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: () => [{ type: i0.DestroyRef }], 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 }] }] } });
 
 /**
  * Component that allows users to select a date or a date range for filtering search results.
@@ -8796,22 +9083,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\r\n          <label\r\n            for=\"date-filter-range-dialog\"\r\n            class=\"flex grow cursor-pointer items-center gap-1 p-1\"\r\n            (click)=\"dateRangeDialog()?.open()\">\r\n            @let rangeLabel = customRangeLabel();\r\n            @if (rangeLabel) {\r\n              <span class=\"w-full\">{{ rangeLabel }}</span>\r\n            } @else {\r\n              <span>{{ \"filters.selectDateRange\" | transloco }}</span>\r\n            }\r\n          </label>\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\r\n          <label\r\n            for=\"date-filter-range-dialog\"\r\n            class=\"flex grow cursor-pointer items-center gap-1 p-1\"\r\n            (click)=\"dateRangeDialog()?.open()\">\r\n            @let rangeLabel = customRangeLabel();\r\n            @if (rangeLabel) {\r\n              <span class=\"w-full\">{{ rangeLabel }}</span>\r\n            } @else {\r\n              <span>{{ \"filters.selectDateRange\" | transloco }}</span>\r\n            }\r\n          </label>\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 {
@@ -9288,7 +9574,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,
@@ -9535,12 +9821,12 @@ class AlertDialog {
         @if (alert || canUpdateQuery()) {
           <div class="flex w-full flex-col gap-2">
             @if (alert) {
-              <button decoration="outline" (click)="execute()" [disabled]="!canUpdateQuery()">
+              <button variant="outline" (click)="execute()" [disabled]="!canUpdateQuery()">
                 {{ 'alerts.execute' | transloco }}
               </button>
             }
             @if (canUpdateQuery()) {
-              <button [disabled]="updateStatus() !== 'idle'" decoration="outline" (click)="updateQuery()">
+              <button [disabled]="updateStatus() !== 'idle'" variant="outline" (click)="updateQuery()">
                 @switch (updateStatus()) {
                   @case ('updating') {
                     <LoadingCircle class="size-4 animate-spin" width="16" height="16" />
@@ -9559,7 +9845,7 @@ class AlertDialog {
           </div>
         }
         <div class="ml-auto flex justify-end gap-2">
-          <button decoration="outline" (click)="dialog.cancel()">
+          <button variant="outline" (click)="dialog.cancel()">
             {{ 'cancel' | transloco }}
           </button>
           <button (click)="confirm()" [disabled]="invalidForm()">
@@ -9569,7 +9855,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,
@@ -9665,12 +9951,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         @if (alert || canUpdateQuery()) {
           <div class="flex w-full flex-col gap-2">
             @if (alert) {
-              <button decoration="outline" (click)="execute()" [disabled]="!canUpdateQuery()">
+              <button variant="outline" (click)="execute()" [disabled]="!canUpdateQuery()">
                 {{ 'alerts.execute' | transloco }}
               </button>
             }
             @if (canUpdateQuery()) {
-              <button [disabled]="updateStatus() !== 'idle'" decoration="outline" (click)="updateQuery()">
+              <button [disabled]="updateStatus() !== 'idle'" variant="outline" (click)="updateQuery()">
                 @switch (updateStatus()) {
                   @case ('updating') {
                     <LoadingCircle class="size-4 animate-spin" width="16" height="16" />
@@ -9689,7 +9975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           </div>
         }
         <div class="ml-auto flex justify-end gap-2">
-          <button decoration="outline" (click)="dialog.cancel()">
+          <button variant="outline" (click)="dialog.cancel()">
             {{ 'cancel' | transloco }}
           </button>
           <button (click)="confirm()" [disabled]="invalidForm()">
@@ -9745,11 +10031,11 @@ 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\n  role=\"list\"\n  class=\"flex min-w-80 flex-col p-2\"\n  cdkDropList\n  [cdkDropListData]=\"tmpAlerts\"\n  [cdkDropListDisabled]=\"!reordering()\"\n  (cdkDropListDropped)=\"dropped($event)\">\n  @if (floating) {\n    <label class=\"text-xl font-bold\">{{ 'alerts.label' | transloco }}</label>\n    <HorizontalDivider />\n  }\n  @for (alert of tmpAlerts; track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" cdkDrag (click)=\"onClick($index)\" (keydown.enter)=\"onClick($index)\">\n      <i class=\"fa-fw fas fa-bell shrink-0\" aria-hidden=\"true\"></i>\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\n      @if (!reordering()) {\n        <button\n          class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n          title=\"{{ 'alerts.deleteAlert' | transloco }}\"\n          [attr.aria-label]=\"'alerts.deleteAlert' | transloco\"\n          (click)=\"deleteAlert($event, $index)\">\n          <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n        </button>\n      } @else {\n        <i class=\"fa-fw fa-regular fa-bars\"></i>\n      }\n    </li>\n  } @empty {\n    <li role=\"listitem\" class=\"py-4 text-center text-neutral-500\">{{ 'alerts.noAlerts' | transloco }}</li>\n  }\n</ul>\n<div class=\"flex flex-col gap-2 p-2\">\n  <button decoration=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'alerts.manageAlerts' | transloco\" [disabled]=\"!alerts().length\" (click)=\"reorder()\">\n    {{ (reordering() ? 'save' : 'alerts.manageAlerts') | transloco }}\n  </button>\n  <button class=\"w-full\" [attr.title]=\"'alerts.createAlert' | transloco\" (click)=\"createAlert()\">\n    {{ 'alerts.createAlert' | transloco }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: HorizontalDividerComponent, selector: "horizontal-divider, HorizontalDivider, horizontaldivider" }, { 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: "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,
-            args: [{ selector: 'Alerts', standalone: true, imports: [TranslocoPipe, ButtonComponent, HorizontalDividerComponent, ListItemComponent, DragDropModule], providers: [provideTranslocoScope('alerts')], template: "<ul\n  role=\"list\"\n  class=\"flex min-w-80 flex-col p-2\"\n  cdkDropList\n  [cdkDropListData]=\"tmpAlerts\"\n  [cdkDropListDisabled]=\"!reordering()\"\n  (cdkDropListDropped)=\"dropped($event)\">\n  @if (floating) {\n    <label class=\"text-xl font-bold\">{{ 'alerts.label' | transloco }}</label>\n    <HorizontalDivider />\n  }\n  @for (alert of tmpAlerts; track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" cdkDrag (click)=\"onClick($index)\" (keydown.enter)=\"onClick($index)\">\n      <i class=\"fa-fw fas fa-bell shrink-0\" aria-hidden=\"true\"></i>\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\n      @if (!reordering()) {\n        <button\n          class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n          title=\"{{ 'alerts.deleteAlert' | transloco }}\"\n          [attr.aria-label]=\"'alerts.deleteAlert' | transloco\"\n          (click)=\"deleteAlert($event, $index)\">\n          <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n        </button>\n      } @else {\n        <i class=\"fa-fw fa-regular fa-bars\"></i>\n      }\n    </li>\n  } @empty {\n    <li role=\"listitem\" class=\"py-4 text-center text-neutral-500\">{{ 'alerts.noAlerts' | transloco }}</li>\n  }\n</ul>\n<div class=\"flex flex-col gap-2 p-2\">\n  <button decoration=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'alerts.manageAlerts' | transloco\" [disabled]=\"!alerts().length\" (click)=\"reorder()\">\n    {{ (reordering() ? 'save' : 'alerts.manageAlerts') | transloco }}\n  </button>\n  <button class=\"w-full\" [attr.title]=\"'alerts.createAlert' | transloco\" (click)=\"createAlert()\">\n    {{ 'alerts.createAlert' | transloco }}\n  </button>\n</div>\n" }]
+            args: [{ selector: 'Alerts', standalone: true, imports: [TranslocoPipe, ButtonComponent, ListItemComponent, DragDropModule, Separator], providers: [provideTranslocoScope('alerts')], 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" }]
         }], ctorParameters: () => [], propDecorators: { alertFormDialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AlertDialog), { isSignal: true }] }] } });
 
 class ChangePasswordComponent {
@@ -9971,7 +10257,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,
@@ -10168,7 +10454,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,
@@ -10348,7 +10634,7 @@ class SignInComponent {
         cdkTrapFocusAutoCapture="true"
         class="bg-card rounded-xl shadow-sm">
         <CardHeader class="flex flex-col items-center gap-3 text-center">
-          <img class="h-12 content-(--logo-large)" alt="logo" />
+          <img class="h-12 content-(--logo-large-alt)" alt="logo" />
         </CardHeader>
 
         <CardContent class="grid gap-4">
@@ -10388,7 +10674,7 @@ class SignInComponent {
               (keydown.enter)="forgotPassword.emit()">
               {{ "login.forgotPassword" | transloco }}
             </span>
-            <button
+            <button variant="primary"
               [disabled]="!isValid()"
               (click)="handleLoginWithCredentials()">
               {{ "login.connect" | transloco }}
@@ -10405,7 +10691,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,
@@ -10428,7 +10714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         cdkTrapFocusAutoCapture="true"
         class="bg-card rounded-xl shadow-sm">
         <CardHeader class="flex flex-col items-center gap-3 text-center">
-          <img class="h-12 content-(--logo-large)" alt="logo" />
+          <img class="h-12 content-(--logo-large-alt)" alt="logo" />
         </CardHeader>
 
         <CardContent class="grid gap-4">
@@ -10468,7 +10754,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 }}
@@ -10700,7 +10986,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) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'bookmarks.label' | transloco }}</label>\n    <Separator />\n  </div>\n}\n\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\" role=\"list\">\n  @for (bookmark of paginatedBookmarks(); track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" (click)=\"onClick(bookmark)\" (keydown.enter)=\"onClick(bookmark)\">\n      <BookmarkIcon solid class=\"shrink-0\" />\n\n      <p class=\"line-clamp-1\">{{ bookmark.label }}</p>\n\n      @if (bookmark.author) {\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\n          <UserIcon class=\"size-3\"/>\n          <span class=\"line-clamp-1\">{{ bookmark.author }}</span>\n        </Badge>\n      }\n      @if (bookmark.parentFolder) {\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\n          <FolderIcon class=\"size-3\"/>\n          <span class=\"line-clamp-1\">{{ bookmark.parentFolder }}</span>\n        </Badge>\n      }\n\n      <button\n        variant=\"ghost\"\n        size=\"icon\"\n        title=\"{{ 'bookmarks.openBookmark' | transloco }}\"\n        class=\"text-destructive ms-auto group-hover:visible\"\n        [attr.title]=\"'bookmarks.removeBookmark' | transloco\"\n        [attr.aria-label]=\"'bookmarks.removeBookmark' | transloco\"\n        (click)=\"onDelete(bookmark, $event)\">\n        <TrashIcon />\n      </button>\n    </li>\n  } @empty {\n    <li class=\"py-4 text-center text-neutral-500\">{{ 'bookmarks.noBookmarks' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button variant=\"ghost\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n  <button decoration=\"underline\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\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=\"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,
@@ -10715,7 +11001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         TrashIcon,
                         FolderIcon,
                         BadgeComponent
-                    ], providers: [provideTranslocoScope("bookmarks")], template: "@if (floating) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'bookmarks.label' | transloco }}</label>\n    <Separator />\n  </div>\n}\n\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\" role=\"list\">\n  @for (bookmark of paginatedBookmarks(); track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" (click)=\"onClick(bookmark)\" (keydown.enter)=\"onClick(bookmark)\">\n      <BookmarkIcon solid class=\"shrink-0\" />\n\n      <p class=\"line-clamp-1\">{{ bookmark.label }}</p>\n\n      @if (bookmark.author) {\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\n          <UserIcon class=\"size-3\"/>\n          <span class=\"line-clamp-1\">{{ bookmark.author }}</span>\n        </Badge>\n      }\n      @if (bookmark.parentFolder) {\n        <Badge variant=\"ghost\" class=\"text-grey-500 text-xs\">\n          <FolderIcon class=\"size-3\"/>\n          <span class=\"line-clamp-1\">{{ bookmark.parentFolder }}</span>\n        </Badge>\n      }\n\n      <button\n        variant=\"ghost\"\n        size=\"icon\"\n        title=\"{{ 'bookmarks.openBookmark' | transloco }}\"\n        class=\"text-destructive ms-auto group-hover:visible\"\n        [attr.title]=\"'bookmarks.removeBookmark' | transloco\"\n        [attr.aria-label]=\"'bookmarks.removeBookmark' | transloco\"\n        (click)=\"onDelete(bookmark, $event)\">\n        <TrashIcon />\n      </button>\n    </li>\n  } @empty {\n    <li class=\"py-4 text-center text-neutral-500\">{{ 'bookmarks.noBookmarks' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button variant=\"ghost\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n  <button decoration=\"underline\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\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=\"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 {
@@ -10748,7 +11034,7 @@ class DeleteCollectionDialog {
         <p>{{ 'collections.confirmDelete' | transloco }} {{ collection()?.name }}?</p>
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.cancel()">
+          <button variant="outline" (click)="dialog.cancel()">
             {{ 'cancel' | transloco }}
           </button>
 
@@ -10758,7 +11044,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,
@@ -10785,7 +11071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         <p>{{ 'collections.confirmDelete' | transloco }} {{ collection()?.name }}?</p>
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.cancel()">
+          <button variant="outline" (click)="dialog.cancel()">
             {{ 'cancel' | transloco }}
           </button>
 
@@ -10840,7 +11126,7 @@ 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) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'collections.label' | transloco }}</label>\n    <Separator />\n  </div>\n}\n\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\">\n  @for (collection of paginatedCollections(); track $index) {\n    <li\n      role=\"listitem\"\n      class=\"group grid grid-cols-[min-content_auto_min-content] items-center\"\n      tabindex=\"0\"\n      (click)=\"onClick(collection)\"\n      (keydown.enter)=\"onClick(collection)\">\n      <i class=\"fas fa-inbox ps-2\"></i>\n\n      <p class=\"mx-2 line-clamp-1\">{{ collection.name }}</p>\n\n      <button\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"text-destructive invisible group-hover:visible\"\n        title=\"{{ 'collections.deleteCollection' | transloco }}\"\n        [attr.aria-label]=\"'collections.deleteCollection' | transloco\"\n        (click)=\"onDelete(collection, $index, $event)\">\n        <TrashIcon />\n      </button>\n    </li>\n  } @empty {\n    <li class=\"list-none py-4 text-center text-neutral-500\">{{ 'collections.noCollections' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button decoration=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n  <button decoration=\"underline\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\n\n<delete-collection-dialog />\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", 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,
@@ -10852,7 +11138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         ListItemComponent,
                         Separator,
                         TrashIcon
-                    ], providers: [provideTranslocoScope("collections")], template: "@if (floating) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'collections.label' | transloco }}</label>\n    <Separator />\n  </div>\n}\n\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\">\n  @for (collection of paginatedCollections(); track $index) {\n    <li\n      role=\"listitem\"\n      class=\"group grid grid-cols-[min-content_auto_min-content] items-center\"\n      tabindex=\"0\"\n      (click)=\"onClick(collection)\"\n      (keydown.enter)=\"onClick(collection)\">\n      <i class=\"fas fa-inbox ps-2\"></i>\n\n      <p class=\"mx-2 line-clamp-1\">{{ collection.name }}</p>\n\n      <button\n        variant=\"ghost\"\n        size=\"icon\"\n        class=\"text-destructive invisible group-hover:visible\"\n        title=\"{{ 'collections.deleteCollection' | transloco }}\"\n        [attr.aria-label]=\"'collections.deleteCollection' | transloco\"\n        (click)=\"onDelete(collection, $index, $event)\">\n        <TrashIcon />\n      </button>\n    </li>\n  } @empty {\n    <li class=\"list-none py-4 text-center text-neutral-500\">{{ 'collections.noCollections' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button decoration=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n  <button decoration=\"underline\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\n\n<delete-collection-dialog />\n" }]
+                    ], providers: [provideTranslocoScope("collections")], 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" }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], deleteCollectionDialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DeleteCollectionDialog), { isSignal: true }] }] } });
 
 class OverrideUserDialogComponent {
@@ -10951,7 +11237,7 @@ class OverrideUserDialogComponent {
           </div>
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.close()">
+          <button variant="outline" (click)="dialog.close()">
             {{ 'cancel' | transloco }}
           </button>
 
@@ -10961,7 +11247,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,
@@ -11016,7 +11302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           </div>
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.close()">
+          <button variant="outline" (click)="dialog.close()">
             {{ 'cancel' | transloco }}
           </button>
 
@@ -11055,7 +11341,7 @@ class ResetUserSettingsDialogComponent {
           <p>{{ 'dialogs.resetUserSettings.message' | transloco }}</p>
 
           <DialogFooter>
-            <button decoration="outline" (click)="dialog.close()">
+            <button variant="outline" (click)="dialog.close()">
               {{ 'cancel' | transloco }}
             </button>
 
@@ -11065,7 +11351,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,
@@ -11092,7 +11378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           <p>{{ 'dialogs.resetUserSettings.message' | transloco }}</p>
 
           <DialogFooter>
-            <button decoration="outline" (click)="dialog.close()">
+            <button variant="outline" (click)="dialog.close()">
               {{ 'cancel' | transloco }}
             </button>
 
@@ -11348,7 +11634,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,
@@ -11697,7 +11983,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,
@@ -12226,7 +12512,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,
@@ -12471,16 +12757,16 @@ class FeedbackDialogComponent {
         }
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.close()">
+          <button variant="outline" (click)="dialog.close()">
             {{ '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,
@@ -12516,11 +12802,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         }
 
         <DialogFooter>
-          <button decoration="outline" (click)="dialog.close()">
+          <button variant="outline" (click)="dialog.close()">
             {{ 'cancel' | transloco }}
           </button>
           <button [disabled]="!comment()" (click)="submit()">
-            {{ 'send feedback' | transloco }}
+            {{ 'feedback.button' | transloco }}
           </button>
         </DialogFooter>
       </DialogContent>
@@ -12588,11 +12874,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 {
@@ -12742,6 +13028,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
@@ -12888,6 +13176,8 @@ class AggregationTreeComponent {
     constructor() {
         this.query = buildQuery();
         effect(() => {
+            // if the aggregation store changes, remove previous session storage
+            getState(this.aggregationsStore);
             sessionStorage.removeItem(`agg-${this.column()}`);
         });
         effect(() => {
@@ -12961,6 +13251,7 @@ class AggregationTreeComponent {
             sessionStorage.removeItem(`agg-${this.aggregation()?.column}`);
             this.selection.set(false);
             this.isAllSelected.set(false);
+            this.onClear.emit();
         }
     }
     /**
@@ -13031,6 +13322,7 @@ class AggregationTreeComponent {
         }
         this.searchText.set("");
         this.selection.set(false);
+        this.onApply.emit();
     }
     loadMore() {
         const q = this.queryParamsStore.getQuery();
@@ -13331,7 +13623,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,
@@ -13353,7 +13645,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.
@@ -13426,6 +13718,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.
      *
@@ -13465,7 +13759,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"
@@ -13477,6 +13771,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
@@ -13490,6 +13786,8 @@ class AggregationComponent {
       [searchable]="searchable()"
       [expandedLevel]="expandedLevel()"
       (onSelect)="onSelect.emit($event)"
+      (onApply)="onApply.emit($event)"
+      (onClear)="onClear.emit($event)"
       />
   }
   @else {
@@ -13503,9 +13801,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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: AggregationComponent, decorators: [{
             type: Component,
@@ -13524,6 +13824,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
@@ -13537,6 +13839,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 {
@@ -13550,6 +13854,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)"
       />
   }
   `,
@@ -13557,7 +13863,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;
@@ -13584,7 +13890,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,
@@ -13709,11 +14015,13 @@ class FilterButtonComponent {
             [name]="filter().name"
             [column]="filter().column"
             [expandedLevel]="expandedLevel()"
+            (onApply)="popoverRef()?.close()"
+            (onClear)="popoverRef()?.close()"
           />
       }
       </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,
@@ -13774,6 +14082,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             [name]="filter().name"
             [column]="filter().column"
             [expandedLevel]="expandedLevel()"
+            (onApply)="popoverRef()?.close()"
+            (onClear)="popoverRef()?.close()"
           />
       }
       </PopoverContent>
@@ -13884,7 +14194,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,
@@ -13950,7 +14260,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,
@@ -14162,12 +14472,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()"
@@ -14179,7 +14489,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()"
@@ -14191,29 +14501,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,
@@ -14231,12 +14541,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()"
@@ -14248,7 +14558,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()"
@@ -14260,28 +14570,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())",
@@ -14711,7 +15021,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,
@@ -14773,14 +15083,14 @@ class SearchFooterComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SearchFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SearchFooterComponent, isStandalone: true, selector: "search-footer, searchfooter, SearchFooter", inputs: { hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { loadMore: "loadMore" }, ngImport: i0, template: ` <div class="flex flex-col px-2">
     @if (hasMore() && config().showLoadMore) {
-      <button decoration="outline" class="w-full" tabindex="0" [attr.title]="'loadMore' | transloco" (click)="onLoadMore($event)">
+      <button variant="outline" class="w-full" tabindex="0" [attr.title]="'loadMore' | transloco" (click)="onLoadMore($event)">
         {{ 'loadMore' | transloco }}
       </button>
     }
-    <button decoration="underline" class="ml-auto" [attr.title]="'seeMore' | transloco" [routerLink]="[config().routerLink]">
+    <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,
@@ -14789,11 +15099,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                     imports: [TranslocoPipe, RouterLink, ButtonComponent],
                     template: ` <div class="flex flex-col px-2">
     @if (hasMore() && config().showLoadMore) {
-      <button decoration="outline" class="w-full" tabindex="0" [attr.title]="'loadMore' | transloco" (click)="onLoadMore($event)">
+      <button variant="outline" class="w-full" tabindex="0" [attr.title]="'loadMore' | transloco" (click)="onLoadMore($event)">
         {{ 'loadMore' | transloco }}
       </button>
     }
-    <button decoration="underline" class="ml-auto" [attr.title]="'seeMore' | transloco" [routerLink]="[config().routerLink]">
+    <button variant="link" class="ml-auto" [attr.title]="'seeMore' | transloco" [routerLink]="[config().routerLink]">
       {{ 'seeMore' | transloco }}
     </button>
   </div>`
@@ -14896,7 +15206,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,
@@ -15077,7 +15387,7 @@ class SavedSearchDialog {
           (ngModelChange)="saveName.set($event)" />
 
           <DialogFooter>
-            <button decoration="outline" (click)="dialog.close()">
+            <button variant="outline" (click)="dialog.close()">
               {{ 'cancel' | transloco }}
             </button>
             <button (click)="confirm()" [disabled]="!saveName()">
@@ -15086,7 +15396,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,
@@ -15122,7 +15432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
           (ngModelChange)="saveName.set($event)" />
 
           <DialogFooter>
-            <button decoration="outline" (click)="dialog.close()">
+            <button variant="outline" (click)="dialog.close()">
               {{ 'cancel' | transloco }}
             </button>
             <button (click)="confirm()" [disabled]="!saveName()">
@@ -15216,15 +15526,7 @@ class UserProfileFormComponent {
     }, ...(ngDevMode ? [{ debugName: "keys" }] : []));
     formKeys = computed(() => this.keys().filter(k => k !== "profilePhoto"), ...(ngDevMode ? [{ debugName: "formKeys" }] : []));
     allowProfilePhoto = computed(() => this.keys().some(k => k === "profilePhoto"), ...(ngDevMode ? [{ debugName: "allowProfilePhoto" }] : []));
-    initials = computed(() => {
-        const fullName = this.userProfile()?.data?.fullName;
-        if (!fullName)
-            return undefined;
-        return fullName
-            .split(" ")
-            .map((word) => word[0].toUpperCase())
-            .join("");
-    }, ...(ngDevMode ? [{ debugName: "initials" }] : []));
+    initials = computed(() => this.principalStore.initials(), ...(ngDevMode ? [{ debugName: "initials" }] : []));
     username = computed(() => this.principalStore.name() || this.principalStore.email() || null, ...(ngDevMode ? [{ debugName: "username" }] : []));
     propertyToEdit = signal(undefined, ...(ngDevMode ? [{ debugName: "propertyToEdit" }] : []));
     value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -15234,17 +15536,13 @@ class UserProfileFormComponent {
         { code: "fr", label: "Français", icon: FlagFrenchIconComponent }
     ];
     changingPassword = signal(false, ...(ngDevMode ? [{ debugName: "changingPassword" }] : []));
-    principal = computed(() => this.principalStore.principal?.(), ...(ngDevMode ? [{ debugName: "principal" }] : []));
-    customData = computed(() => {
-        const customData = this.appStore.general()?.features?.userProfile?.customData;
-        const profileKeys = this.userProfile()?.customData;
-        return (customData?.length ? customData : (profileKeys ? Object.keys(profileKeys) : []))
-            .filter(key => !this.keys().some(k => k.toLowerCase() === key.toLowerCase())); // hide any duplicates in customData keys from data's
-    }, ...(ngDevMode ? [{ debugName: "customData" }] : []));
+    customData = computed(() => (this.appStore.general()?.features?.userProfile?.customData || [])
+        .filter(key => !this.keys().some(k => k.toLowerCase() === key.toLowerCase())), ...(ngDevMode ? [{ debugName: "customData" }] : []));
     allowChangePassword = computed(() => {
         const { useCredentials } = globalConfig;
         const { allowChangePassword = false } = this.appStore.general()?.features || {};
-        return allowChangePassword && useCredentials && this.principal().editablePartition;
+        const editablePartition = this.principalStore.editablePartition?.() || false;
+        return allowChangePassword && useCredentials && editablePartition;
     }, ...(ngDevMode ? [{ debugName: "allowChangePassword" }] : []));
     constructor() {
         this.currentLanguage.set(this.transloco.getActiveLang());
@@ -15255,26 +15553,31 @@ class UserProfileFormComponent {
             }
         });
     }
-    userProfileResource = this.userProfileService.getUserProfile(this.principal);
+    userProfileResource = this.userProfileService.getUserProfile(this.principalStore.userId);
     userProfile = linkedSignal(() => {
         if (this.userProfileResource.hasValue()) {
             return this.userProfileResource.value();
         }
-        const { userId: id, email: mail, fullName } = this.principal() || {};
+        const { userId: id, email: mail, fullName } = getState(this.principalStore);
         if (!id || !mail || !fullName) {
             return undefined;
         }
         return { data: { id, mail, fullName } };
     }, ...(ngDevMode ? [{ debugName: "userProfile" }] : []));
     async createUserProfile() {
-        const { userId: id, email: mail, fullName } = this.principal() || {};
+        const { userId: id, email: mail, fullName } = getState(this.principalStore);
         if (!id) {
             return;
         }
-        const response = await createUserProfile({ data: { id, mail, fullName } });
-        if (response) {
-            info("Created user profile", response);
-            this.userProfileResource.set(response);
+        try {
+            const response = await createUserProfile({ data: { id, mail, fullName } });
+            if (response) {
+                info("Created user profile", response);
+                this.userProfileResource.set(response);
+            }
+        }
+        catch (err) {
+            notify.error(err.message);
         }
     }
     /**
@@ -15286,7 +15589,7 @@ class UserProfileFormComponent {
     onEdit(category, propertyName) {
         const data = this.userProfile()?.[category];
         const value = data?.[propertyName];
-        this.value.set(value || "");
+        this.value.set(value?.trim() || "");
         this.propertyToEdit.set(`${category}.${propertyName}`);
     }
     /**
@@ -15296,15 +15599,20 @@ class UserProfileFormComponent {
      * @param propertyName property name
      */
     async onDeleteData(category, propertyName) {
-        const response = await deleteUserProfileProperty(this.userProfile(), category, propertyName);
-        if (response) {
-            info("Deleted user profile property", response);
-            const userProfile = JSON.parse(JSON.stringify(this.userProfile()));
-            userProfile[category][propertyName] = undefined;
-            this.userProfileResource.set(userProfile);
+        try {
+            const response = await deleteUserProfileProperty(this.userProfile(), category, propertyName);
+            if (response) {
+                info("Deleted user profile property", response);
+                const userProfile = JSON.parse(JSON.stringify(this.userProfile()));
+                userProfile[category][propertyName] = undefined;
+                this.userProfileResource.set(userProfile);
+            }
+            else {
+                info("Could not delete user profile property", response);
+            }
         }
-        else {
-            info("Could not delete user profile property", response);
+        catch (err) {
+            notify.error(err.message);
         }
     }
     /**
@@ -15318,19 +15626,24 @@ class UserProfileFormComponent {
         const userProfile = JSON.parse(JSON.stringify(this.userProfile()));
         if (!userProfile[category])
             userProfile[category] = {};
-        userProfile[category][propertyName] = this.value();
-        const response = await patchUserProfile(userProfile, category, propertyName);
-        if (response) {
-            const newUserProfile = this.userProfile();
-            this.userProfileResource.set({
-                ...newUserProfile,
-                ...response,
-                data: { ...(newUserProfile?.data || {}), ...(response.data || {}) },
-                customData: { ...(newUserProfile?.customData || {}), ...(response.customData || {}) }
-            });
+        userProfile[category][propertyName] = this.value()?.trim() || "";
+        try {
+            const response = await patchUserProfile(userProfile, category, propertyName);
+            if (response) {
+                const newUserProfile = this.userProfile();
+                this.userProfileResource.set({
+                    ...newUserProfile,
+                    ...response,
+                    data: { ...(newUserProfile?.data || {}), ...(response.data || {}) },
+                    customData: { ...(newUserProfile?.customData || {}), ...(response.customData || {}) }
+                });
+            }
+            this.value.set(undefined);
+            this.propertyToEdit.set(undefined);
+        }
+        catch (err) {
+            notify.error(err.message);
         }
-        this.value.set(undefined);
-        this.propertyToEdit.set(undefined);
     }
     /**
      * Get the value of a data key
@@ -15374,7 +15687,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 invisible cursor-pointer group-hover:visible\"\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: "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: 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,
@@ -15382,7 +15695,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         FormsModule,
                         RouterModule,
                         TranslocoPipe,
-                        InputComponent,
                         TrashIcon,
                         EditIcon,
                         UndoIcon,
@@ -15392,7 +15704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         AvatarImageComponent,
                         ButtonComponent,
                         ChangePasswordComponent
-                    ], providers: [provideTranslocoScope("user-profile", "login")], 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 invisible cursor-pointer group-hover:visible\"\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" }]
+                    ], providers: [provideTranslocoScope("user-profile", "login")], 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" }]
         }], ctorParameters: () => [], propDecorators: { createInputElement: [{ type: i0.ViewChild, args: ["avatarInput", { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], currentLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentLanguage", required: false }] }, { type: i0.Output, args: ["currentLanguageChange"] }] } });
 
 class UserProfileDialog {
@@ -15405,7 +15717,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>
@@ -15433,7 +15745,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>
@@ -15645,5 +15957,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