@sinequa/atomic-angular 0.4.12 → 0.4.19-dev.2

package/fesm2022/sinequa-atomic-angular.mjs

@@ -1,17 +1,16 @@
 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 { BehaviorSubject, Subscription, catchError, EMPTY, firstValueFrom, map, pipe, tap, switchMap, Subject, of, throwError, filter, shareReplay, fromEvent, debounceTime, from } from 'rxjs';
+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 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, notify, error, setGlobalConfig, addConcepts, queryParamsFromUrl, patchUserSettings, deleteUserSettings, fetchUserSettings, buildPathsAndLevels, escapeExpr, isAuthenticated, isExpired, fetchSuggest, isObject, Audit, getMetadata, bisect, isNotInputEvent, fetchSponsoredLinks, fetchQuery, translateAggregationToDateOptions, aggItemRegex, parseValueAndOperatorFromItem, fetchSuggestField, debug, 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 } from '@angular/common/http';
+import { globalConfig, EngineType, extraColumns, sysLang, getQueryParamsFromUrl, logout, login, info, warn, notify, error, setGlobalConfig, 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 { DatePipe, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, Location, NgTemplateOutlet, NgStyle, NgClass, NgComponentOutlet } from '@angular/common';
-import { rxMethod } from '@ngrx/signals/rxjs-interop';
 import { Title, DomSanitizer } from '@angular/platform-browser';
 import { cva } from 'class-variance-authority';
 import * as i1 from '@angular/forms';
@@ -323,7 +322,7 @@ function withAppFeatures() {
                     }
                 });
                 // Also include columns from the default index "_"
-                const schema = app.indexes._.columns;
+                const schema = app.indexes._?.columns;
                 if (schema) {
                     Object.keys(schema).forEach((schemaKey) => {
                         const col = schema[schemaKey.toLocaleLowerCase()];
@@ -337,29 +336,29 @@ function withAppFeatures() {
                             });
                         }
                     });
+                    // Include columns from all queries
+                    Object.keys(app.queries).forEach((queryKey) => {
+                        const query = app.queries[queryKey];
+                        if (query.columnsInfo?.columns) {
+                            Object.values(query.columnsInfo.columns).forEach((c) => {
+                                const col = schema[c.name.toLocaleLowerCase()];
+                                if (!col)
+                                    return;
+                                columnMap[c.name.toLocaleLowerCase()] = col;
+                                // Add aliases to the map
+                                if (c.aliases) {
+                                    c.aliases
+                                        .split(/[,;|]/)
+                                        .map((a) => a.trim())
+                                        .forEach((alias) => {
+                                        columnMap[alias.toLocaleLowerCase()] = col;
+                                    });
+                                }
+                            });
+                        }
+                    });
+                    patchState(store, { columnMap });
                 }
-                // Include columns from all queries
-                Object.keys(app.queries).forEach((queryKey) => {
-                    const query = app.queries[queryKey];
-                    if (query.columnsInfo?.columns) {
-                        Object.values(query.columnsInfo.columns).forEach((c) => {
-                            const col = schema[c.name.toLocaleLowerCase()];
-                            if (!col)
-                                return;
-                            columnMap[c.name.toLocaleLowerCase()] = col;
-                            // Add aliases to the map
-                            if (c.aliases) {
-                                c.aliases
-                                    .split(/[,;|]/)
-                                    .map((a) => a.trim())
-                                    .forEach((alias) => {
-                                    columnMap[alias.toLocaleLowerCase()] = col;
-                                });
-                            }
-                        });
-                    }
-                });
-                patchState(store, { columnMap });
             })));
         },
         /**
@@ -375,7 +374,7 @@ function withAppFeatures() {
         /**
          * Updates the application state with the provided CCApp object.
          *
-         * @param {CCApp} app - The application object containing the new state values.
+         * @param {Partial<CCAppState>} app - The application object containing the new state values.
          */
         update(app) {
             patchState(store, (state) => {
@@ -633,7 +632,8 @@ function withAppFeatures() {
             sources: computed(() => parseCustomJson("sources", {})),
             filters: computed(() => parseCustomJson("filters", [])),
             general: computed(() => parseCustomJson("general", {})),
-            assistants: computed(() => parseCustomJson("assistants", {}))
+            assistants: computed(() => parseCustomJson("assistants", {})),
+            agents: computed(() => parseCustomJson("agents", {}))
         };
     }), withMethods((store) => ({
         /**
@@ -739,6 +739,12 @@ function withAppFeatures() {
             if (assistants === undefined || Object.keys(assistants).length === 0)
                 return false;
             return !!assistants[assistantName]?.defaultValues?.service_id;
+        },
+        isAgentAllowed(agentName) {
+            const agents = store.agents();
+            if (agents === undefined || Object.keys(agents).length === 0)
+                return false;
+            return !!agents[agentName]?.defaultAgent;
         }
     })));
 }
@@ -1107,7 +1113,7 @@ class DropdownInputComponent {
         }
       </DropdownContent>
     </Dropdown>
-  `, isInline: true, dependencies: [{ kind: "component", type: DropdownComponent, selector: "dropdown, Dropdown", inputs: ["disabled"] }, { kind: "component", type: DropdownListComponent, selector: "dropdown-list, DropdownList", inputs: ["items"], outputs: ["onClick"] }, { kind: "directive", type: DropdownContentComponent, selector: "dropdown-content, dropdowncontent, DropdownContent", inputs: ["class", "position", "strategy", "offset"] }, { 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\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: DropdownComponent, selector: "dropdown, Dropdown", inputs: ["disabled"] }, { kind: "component", type: DropdownListComponent, selector: "dropdown-list, DropdownList", inputs: ["items"], outputs: ["onClick"] }, { kind: "directive", type: DropdownContentComponent, selector: "dropdown-content, dropdowncontent, DropdownContent", inputs: ["class", "position", "strategy", "offset"] }, { 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: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownInputComponent, decorators: [{
             type: Component,
@@ -1264,7 +1270,7 @@ const PrincipalStore = signalStore({ providedIn: 'root' }, withDevtools('Princip
     }),
 })), withMethods((store) => ({
     /**
-    * @deprecated use the property from the store directly instead (e.g. principalStore.fullName() instead of principalStore.principal().fullName)
+    * @deprecated use getState(PrincipalStore))
     */
     principal() {
         const { userOverrideActive: _, ...rest } = getState(store);
@@ -1282,24 +1288,20 @@ function withPrincipalFeatures() {
         const http = inject(HttpClient);
         const API_URL = `${globalConfig.backendUrl}/api/v1`;
         return {
-            initialize: rxMethod(pipe(tap(() => patchState(store, { state: 'loading' })), switchMap(() => {
-                let params = new HttpParams()
+            initialize() {
+                patchState(store, { state: 'loading' });
+                const params = new HttpParams()
                     .set('action', 'get')
                     .set('noAuthentication', 'true');
-                return http.get(`${API_URL}/principal`, { params });
-            }), tap((principal) => {
-                const { userOverrideActive = false } = globalConfig;
-                patchState(store, {
-                    ...initialPrincipal,
-                    ...principal,
-                    userOverrideActive,
-                    state: 'loaded'
-                });
-            }), catchError((error) => {
-                console.error('Principal fetch failed', error);
-                patchState(store, { state: 'error' });
-                return EMPTY;
-            })))
+                return firstValueFrom(http.get(`${API_URL}/principal`, { params }).pipe(catchError((error) => {
+                    console.error('Principal fetch failed', error);
+                    patchState(store, { state: 'error' });
+                    throw error;
+                }), map((principal) => {
+                    const { userOverrideActive = false } = globalConfig;
+                    patchState(store, { ...initialPrincipal, ...principal, userOverrideActive, state: 'loaded' });
+                })));
+            }
         };
     }));
 }
@@ -1408,7 +1410,7 @@ function getQueryNameFromRoute() {
         const { t, n } = route.snapshot.queryParams;
         // ! This is a workaround for the case where the queryName is not defined in the route data
         // "search" is the parent route of the search results, and "t" is the query parameter for the tab
-        const { queryName } = routes.config.filter(p => p.path === 'search')[0].children?.find(route => route.path === t)?.data || n || {};
+        const { queryName } = routes.config.filter(p => p.path === 'search')[0]?.children?.find(route => route.path === t)?.data || n || {};
         if (queryName)
             return queryName;
         // fallback to queryName from route data
@@ -3110,11 +3112,14 @@ class AggregationsService {
         const agg = this.getAggregation(name, column);
         if (!agg)
             return null;
-        const { items = [], display = agg.name, icon, hidden, searchable = true } = this.appStore.getAggregationCustomization(agg.column, agg.name) || {};
+        const { items = [], display = agg.name, icon, hidden, expandedLevel, searchable = true } = this.appStore.getAggregationCustomization(agg.column, agg.name) || {};
         agg.display = display;
         agg.icon = icon;
         agg.hidden = hidden;
         agg.searchable = searchable;
+        if (agg.isTree && expandedLevel) {
+            agg.expandedLevel = expandedLevel;
+        }
         // if the aggregation's column is a "concepts", disable the search
         if (this.nonSearchableColumns.some((column) => column === agg.column)) {
             agg.searchable = false;
@@ -3327,6 +3332,7 @@ function AuthGuard() {
         const { loginPath, useCredentials, useSSO } = globalConfig;
         if (state.url.startsWith("/login"))
             return true;
+        // If the user is not authenticated, navigate to the login page or loading page based on the authentication method
         if (!isAuthenticated() && !useSSO) {
             if (useCredentials) {
                 router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
@@ -3343,80 +3349,34 @@ function AuthGuard() {
             }
         }
         catch {
-            // If initialization fails, navigate to the login page
+            error("Failed to initialize PrincipalStore. Redirecting to login.");
+            // TODO: we might want to navigate to an error page instead of the login page in SSO mode, as the issue is not related to authentication but rather to fetching user details
             router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
             return false;
         }
-        if (principalStore.state() !== "loaded") {
-            // If the principal store is not loaded, navigate to the login page
-            router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
-            return false;
-        }
-        const { id, passwordExpirationDate, editablePartition, name } = getState(principalStore);
-        if (!id) {
+        // check if the "princiapl" infos are loaded, if not navigate to the login page
+        const { passwordExpirationDate, editablePartition, name, state: principalState } = getState(principalStore);
+        if (principalState !== "loaded") {
+            info("PrincipalStore state is still initial after initialization attempt. Redirecting to login.");
             router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
             return false;
         }
-        const exp = passwordExpirationDate;
-        const editable = !!editablePartition;
-        if (editable && exp && isExpired(exp)) {
-            sessionStorage.setItem("passwordExpiredFlow", "true");
-            const username = (name || "").trim();
-            router.navigate(["/login"], {
-                queryParams: { mode: "changepassword", alert: "passwordExpired", username, returnUrl: state.url }
-            });
-            return false;
-        }
-        return true;
-    };
-}
-
-/**
- * Password-expiry guard: blocks navigation when the password is expired
- * and redirects to the change-password .
- */
-function PasswordExpiryGuard() {
-    return async (_, state) => {
-        const router = inject(Router);
-        const principalStore = inject(PrincipalStore);
-        const { loginPath, useCredentials, useSSO } = globalConfig;
-        if (!isAuthenticated() && !useSSO) {
-            if (useCredentials) {
-                router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
-            }
-            else {
-                router.navigate(["loading"], { queryParams: { returnUrl: state.url } });
-            }
-            return false;
-        }
-        try {
-            if (!principalStore.principal?.()) {
-                await principalStore.initialize();
+        // check if the password is expired and if the partition is editable
+        // changing password is only possible when user use credentials to auhtenticate
+        // only in credentials mode
+        if (useCredentials) {
+            const exp = passwordExpirationDate;
+            const editable = !!editablePartition;
+            if (editable && exp && isExpired(exp)) {
+                sessionStorage.setItem("passwordExpiredFlow", "true");
+                const username = (name || "").trim();
+                router.navigate(["/login"], {
+                    queryParams: { mode: "changepassword", alert: "passwordExpired", username, returnUrl: state.url }
+                });
+                return false;
             }
         }
-        catch {
-            router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
-            return false;
-        }
-        const p = principalStore.principal?.();
-        if (!p) {
-            router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
-            return false;
-        }
-        const exp = p.passwordExpirationDate;
-        const editable = !!p.editablePartition;
-        if (!editable || !exp) {
-            router.navigate([loginPath], { queryParams: { returnUrl: state.url } });
-            return false;
-        }
-        if (isExpired(exp)) {
-            sessionStorage.setItem("passwordExpiredFlow", "true");
-            const username = (p.name || "").trim();
-            router.navigate(["/login"], {
-                queryParams: { mode: "changepassword", alert: "passwordExpired", username, returnUrl: state.url }
-            });
-            return false;
-        }
+        debug("User is authenticated and principal store is initialized. Access granted.");
         return true;
     };
 }
@@ -3598,7 +3558,7 @@ class ApplicationService {
         const searchPath = this.router.config.find((route) => route.path === "search") || {
             path: "search",
             component: this.components.find((c) => c.path === "search")?.component || this.defaultLayoutComponent(),
-            canActivate: [AuthGuard(), PasswordExpiryGuard()],
+            canActivate: [AuthGuard()],
             children: []
         };
         const wildcardPath = searchPath.children?.find((route) => route.path === "**") || {
@@ -5365,7 +5325,7 @@ class LoadingComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoadingComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LoadingComponent, isStandalone: true, selector: "app-wait", ngImport: i0, template: `
-    <div class="flex h-[100dvh] w-full items-center justify-center">
+    <div class="flex h-dvh w-full items-center justify-center">
       <div class="flex flex-col items-center space-y-4">
         <span class="loader"></span>
       </div>
@@ -5375,7 +5335,7 @@ class LoadingComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-wait', standalone: true, imports: [], template: `
-    <div class="flex h-[100dvh] w-full items-center justify-center">
+    <div class="flex h-dvh w-full items-center justify-center">
       <div class="flex flex-col items-center space-y-4">
         <span class="loader"></span>
       </div>
@@ -5616,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\"]", 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", "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.16", ngImport: i0, type: CollectionsDialog, decorators: [{
             type: Component,
@@ -5824,7 +5784,7 @@ class ExportDialog {
     destroyRef = inject(DestroyRef);
     open(selection) {
         const app = getState(this.appStore);
-        const webservice = app.queryExport;
+        const webservice = app.queryExport.toLocaleLowerCase();
         let queryExport;
         if (selection && selection.length > 0)
             this.selection.set(selection);
@@ -7433,7 +7393,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\"]", 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", "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.16", ngImport: i0, type: PreviewNavigator, decorators: [{
             type: Component,
@@ -8117,7 +8077,7 @@ class AdvancedFiltersComponent {
         return res;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdvancedFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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\"]", 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.16", 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AdvancedFiltersComponent, decorators: [{
             type: Component,
@@ -8592,7 +8552,7 @@ class AggregationListComponent {
         this.isCollapsed.set(e.newState === "closed");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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\">{{\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 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.16", 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationListComponent, decorators: [{
             type: Component,
@@ -8614,7 +8574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         AggregationListItemComponent
                     ], 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\">{{\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 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"] }]
+                    }, 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"] }] } });
 
 class AggregationDateComponent extends AggregationListComponent {
@@ -8814,7 +8774,7 @@ class AggregationDateComponent extends AggregationListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationDateComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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\"]", 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.16", 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationDateComponent, decorators: [{
             type: Component,
@@ -8839,7 +8799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  */
 class DateComponent extends AggregationDateComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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\"]", 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.16", 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
@@ -9612,7 +9572,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\"]", 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", "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.16", ngImport: i0, type: AlertDialog, decorators: [{
             type: Component,
@@ -9825,8 +9785,8 @@ class ChangePasswordComponent {
         if (fromInput?.trim())
             return fromInput.trim();
         if (isAuthenticated()) {
-            const p = this.principalStore.principal?.();
-            const name = p?.name?.trim();
+            const p = getState(this.principalStore);
+            const name = p.name.trim();
             if (name)
                 return name;
         }
@@ -9861,7 +9821,6 @@ class ChangePasswordComponent {
             if (!username) {
                 notify.info(this.transloco.translate("login.loginAfterPasswordChangeMissingUser"), { duration: 3000 });
                 this.router.navigate(["/login"]);
-                this.success.emit();
                 return;
             }
             await this.clearLocalAuthState();
@@ -10015,14 +9974,11 @@ class ChangePasswordComponent {
         </button>
       </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: "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", "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.16", ngImport: i0, type: ChangePasswordComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: "change-password, ChangePassword, changepassword",
-                    providers: [provideTranslocoScope("login")],
-                    imports: [
+            args: [{ selector: "change-password, ChangePassword, changepassword", providers: [provideTranslocoScope("login")], imports: [
                         FormsModule,
                         A11yModule,
                         TranslocoPipe,
@@ -10034,8 +9990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         InputGroupInput,
                         InputGroupComponent,
                         InputGroupAddonComponent
-                    ],
-                    template: `
+                    ], template: `
     <Card hover="no" cdkTrapFocus cdkTrapFocusAutoCapture="true" class="bg-card rounded-xl shadow-sm">
       <CardHeader class="flex flex-col items-center gap-3">
         <img class="h-12 content-(--logo-large)" alt="logo" />
@@ -10143,8 +10098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         </button>
       </CardFooter>
     </Card>
-  `
-                }]
+  `, styles: ["input::-ms-reveal{display:none}\n"] }]
         }], propDecorators: { success: [{ type: i0.Output, args: ["success"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], username: [{ type: i0.Input, args: [{ isSignal: true, alias: "username", required: false }] }], alert: [{ type: i0.Input, args: [{ isSignal: true, alias: "alert", required: false }] }], redirectAfterSuccess: [{ type: i0.Input, args: [{ isSignal: true, alias: "redirectAfterSuccess", required: false }] }], redirectAfterCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "redirectAfterCancel", required: false }] }], currentPassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPassword", required: false }] }, { type: i0.Output, args: ["currentPasswordChange"] }], newPassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "newPassword", required: false }] }, { type: i0.Output, args: ["newPasswordChange"] }], confirmPassword: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmPassword", required: false }] }, { type: i0.Output, args: ["confirmPasswordChange"] }] } });
 
 class ForgotPasswordComponent {
@@ -10217,7 +10171,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\"]", 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", "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.16", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
             type: Component,
@@ -10292,56 +10246,40 @@ class SignInComponent {
         username: this.username(),
         password: this.password()
     }), ...(ngDevMode ? [{ debugName: "credentials" }] : []));
-    isValid = computed(() => !!this.credentials().username?.length && !!this.credentials().password?.length, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
-    authenticated = signal(isAuthenticated(), ...(ngDevMode ? [{ debugName: "authenticated" }] : []));
-    user = signal(null, ...(ngDevMode ? [{ debugName: "user" }] : []));
-    returnUrl = signal(null, ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
-    expiresSoonNotified = signal(false, ...(ngDevMode ? [{ debugName: "expiresSoonNotified" }] : []));
+    isValid = computed(() => !!this.credentials().username?.length &&
+        !!this.credentials().password?.length, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
     router = inject(Router);
     route = inject(ActivatedRoute);
-    principalService = inject(PrincipalService);
     applicationService = inject(ApplicationService);
     principalStore = inject(PrincipalStore);
     transloco = inject(TranslocoService);
+    authenticated = signal(isAuthenticated(), ...(ngDevMode ? [{ debugName: "authenticated" }] : []));
+    user = signal(getState(this.principalStore), ...(ngDevMode ? [{ debugName: "user" }] : []));
+    expiresSoonNotified = signal(false, ...(ngDevMode ? [{ debugName: "expiresSoonNotified" }] : []));
     constructor(destroyRef) {
         this.destroyRef = destroyRef;
         effect(() => {
-            if (this.authenticated()) {
-                this.principalService
-                    .getPrincipal()
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe((principal) => this.user.set(principal));
-            }
-        });
-        effect(() => {
-            const principal = this.user();
+            const principal = getState(this.principalStore);
             if (this.authenticated() && principal && !this.expiresSoonNotified()) {
-                this.checkPasswordExpiresSoon(principal);
-            }
-        });
-        effect(() => {
-            if (this.returnUrl() !== null) {
-                const [url] = this.returnUrl() || ["/"];
-                this.router.navigateByUrl(url);
+                this.checkPasswordExpiresSoon();
             }
         });
         fromEvent(window, "authenticated")
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
+            .subscribe(event => {
             this.authenticated.set(event.detail.authenticated);
             const url = this.route.snapshot.queryParams["returnUrl"] || null;
-            if (url !== null)
-                this.returnUrl.set([url]);
-            if (isAuthenticated()) {
+            if (url !== null) {
                 this.router.navigateByUrl(url ?? "/");
             }
         });
     }
-    checkPasswordExpiresSoon(principal) {
-        if (!principal?.editablePartition || !principal.passwordExpirationDate) {
+    checkPasswordExpiresSoon() {
+        const { editablePartition, passwordExpirationDate } = getState(this.principalStore);
+        if (!editablePartition || !passwordExpirationDate) {
             return;
         }
-        if (expiresSoon(principal.passwordExpirationDate, 7)) {
+        if (expiresSoon(passwordExpirationDate, 7)) {
             notify.warning(this.transloco.translate("login.passwordExpiresSoon"), {
                 duration: Number.POSITIVE_INFINITY,
                 action: {
@@ -10362,12 +10300,10 @@ class SignInComponent {
     async handleLogout() {
         await logout();
         this.authenticated.set(false);
-        this.user.set(null);
-        this.returnUrl.set(null);
         this.router.navigate(["/login"]);
     }
     async handleLogin() {
-        login().catch((error) => {
+        login().catch(error => {
             warn("An error occurred while logging in", error);
             this.router.navigate(["error"]);
         });
@@ -10381,14 +10317,14 @@ class SignInComponent {
                 return;
             const { createRoutes = false } = globalConfig;
             await this.applicationService.initialize(createRoutes);
-            const p = this.principalStore.principal?.();
-            this.checkPasswordExpiresSoon(p ?? null);
+            this.checkPasswordExpiresSoon();
             const url = this.route.snapshot.queryParams["returnUrl"] || "/";
             this.router.navigateByUrl(url);
         }
         catch (err) {
             const { status, errorMessage } = err;
-            if (status === 401 && errorMessage?.toLowerCase().includes("password expired")) {
+            if (status === 401 &&
+                errorMessage?.toLowerCase().includes("password expired")) {
                 sessionStorage.setItem("passwordExpiredFlow", "true");
                 this.router.navigate(["/login"], {
                     queryParams: {
@@ -10404,91 +10340,79 @@ class SignInComponent {
     }
     handleBack() {
         this.authenticated.set(false);
-        this.user.set(null);
-        this.returnUrl.set(null);
         this.router.navigate(["/"]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SignInComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SignInComponent, isStandalone: true, selector: "signIn, signin, sign-in", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { forgotPassword: "forgotPassword", username: "usernameChange", password: "passwordChange" }, host: { properties: { "class": "cn('grid h-dvh w-full place-content-center', class())" } }, providers: [provideTranslocoScope("login")], ngImport: i0, template: `
-    <Card
-      hover="no"
-      cdkTrapFocus
-      cdkTrapFocusAutoCapture="true"
-      class="bg-card rounded-xl shadow-sm"
-    >
-      @if (authenticated()) {
-      <CardHeader class="flex flex-row items-start gap-4">
-        <img class="content-(--logo-large) h-12" alt="logo" />
-        <div class="space-y-1">
-          <h3 class="text-2xl font-semibold leading-tight">
-            {{
-              'login.welcomeBack' | transloco : { name: user()?.fullName ?? '' }
-            }}
-          </h3>
-          <p class="text-muted-foreground text-sm">
-            {{ 'login.youAreLoggedIn' | transloco }}
-          </p>
-        </div>
-      </CardHeader>
-
-      <CardFooter class="grid grid-cols-2 gap-3">
-        <button type="button" (click)="handleLogout()">
-          {{ 'login.disconnect' | transloco }}
-        </button>
-        <button type="button" (click)="handleBack()">{{ 'login.back' | transloco }}</button>
-      </CardFooter>
-      } @else {
-      <CardHeader class="flex flex-col items-center gap-3 text-center">
-        <img class="content-(--logo-large) h-12" alt="logo" />
-      </CardHeader>
-
-      <CardContent class="grid gap-4">
-        @if (!config.autoOAuthProvider && !config.autoSAMLProvider) {
-        <div class="grid gap-2">
-          <label class="text-sm font-medium" for="username">{{
-            'login.username' | transloco
-          }}</label>
-          <input
-            id="username"
-            type="text"
-            required
-            [(ngModel)]="username"
-            (keydown.enter)="handleLoginWithCredentials()"
-          />
-        </div>
+    @if (!authenticated()) {
+      <Card
+        hover="no"
+        cdkTrapFocus
+        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" />
+        </CardHeader>
+
+        <CardContent class="grid gap-4">
+          @let useCredentials =
+            !config.autoOAuthProvider && !config.autoSAMLProvider;
+          @if (useCredentials) {
+            <!-- authentication using credentials -->
+            <div class="grid gap-2">
+              <label class="text-sm font-medium" for="username">{{
+                "login.username" | transloco
+              }}</label>
+              <input
+                id="username"
+                type="text"
+                required
+                [(ngModel)]="username"
+                (keydown.enter)="handleLoginWithCredentials()" />
+            </div>
 
             <div class="grid gap-2">
-              <label class="text-sm font-medium" for="password">{{ 'login.password' | transloco }}</label>
-              <input id="password" type="password" required [(ngModel)]="password" (keydown.enter)="handleLoginWithCredentials()" />
+              <label class="text-sm font-medium" for="password">{{
+                "login.password" | transloco
+              }}</label>
+              <input
+                id="password"
+                type="password"
+                required
+                [(ngModel)]="password"
+                (keydown.enter)="handleLoginWithCredentials()" />
             </div>
 
-           <span
-               class="cursor-pointer text-xs text-muted-foreground hover:underline justify-self-start"
-                role="button"
-                tabindex="0"
+            <span
+              class="text-muted-foreground cursor-pointer justify-self-start text-xs hover:underline"
+              role="button"
+              tabindex="0"
               (click)="forgotPassword.emit()"
-            (keydown.enter)="forgotPassword.emit()">
-             {{ 'login.forgotPassword' | transloco }}
-                  </span>
-            <button [disabled]="!isValid()" (click)="handleLoginWithCredentials()">
-              {{ 'login.connect' | transloco }}
+              (keydown.enter)="forgotPassword.emit()">
+              {{ "login.forgotPassword" | transloco }}
+            </span>
+            <button
+              [disabled]="!isValid()"
+              (click)="handleLoginWithCredentials()">
+              {{ "login.connect" | transloco }}
             </button>
-
-          } @else {
+          }
+          @else {
+            <!-- authentication using OAuth or SAML provider -->
             <button (click)="handleLogin()">
-              {{ 'login.SignInWith' | transloco: { provider: config.autoOAuthProvider ? 'OAuth' : 'SAML' } }}
+              {{ "login.SignInWith" | transloco : { provider: config.autoOAuthProvider ? "OAuth" : "SAML" } }}
             </button>
           }
         </CardContent>
-      }
-    </Card>
-  `, isInline: true, 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\"]", 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" }] });
+      </Card>
+    } @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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: "signIn, signin, sign-in",
-                    imports: [
+            args: [{ selector: "signIn, signin, sign-in", imports: [
                         RouterModule,
                         FormsModule,
                         A11yModule,
@@ -10498,87 +10422,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         CardComponent,
                         CardHeaderComponent,
                         CardContentComponent,
-                        CardFooterComponent
-                    ],
-                    providers: [provideTranslocoScope("login")],
-                    template: `
-    <Card
-      hover="no"
-      cdkTrapFocus
-      cdkTrapFocusAutoCapture="true"
-      class="bg-card rounded-xl shadow-sm"
-    >
-      @if (authenticated()) {
-      <CardHeader class="flex flex-row items-start gap-4">
-        <img class="content-(--logo-large) h-12" alt="logo" />
-        <div class="space-y-1">
-          <h3 class="text-2xl font-semibold leading-tight">
-            {{
-              'login.welcomeBack' | transloco : { name: user()?.fullName ?? '' }
-            }}
-          </h3>
-          <p class="text-muted-foreground text-sm">
-            {{ 'login.youAreLoggedIn' | transloco }}
-          </p>
-        </div>
-      </CardHeader>
-
-      <CardFooter class="grid grid-cols-2 gap-3">
-        <button type="button" (click)="handleLogout()">
-          {{ 'login.disconnect' | transloco }}
-        </button>
-        <button type="button" (click)="handleBack()">{{ 'login.back' | transloco }}</button>
-      </CardFooter>
-      } @else {
-      <CardHeader class="flex flex-col items-center gap-3 text-center">
-        <img class="content-(--logo-large) h-12" alt="logo" />
-      </CardHeader>
-
-      <CardContent class="grid gap-4">
-        @if (!config.autoOAuthProvider && !config.autoSAMLProvider) {
-        <div class="grid gap-2">
-          <label class="text-sm font-medium" for="username">{{
-            'login.username' | transloco
-          }}</label>
-          <input
-            id="username"
-            type="text"
-            required
-            [(ngModel)]="username"
-            (keydown.enter)="handleLoginWithCredentials()"
-          />
-        </div>
+                        LoadingComponent
+                    ], providers: [provideTranslocoScope("login")], template: `
+    @if (!authenticated()) {
+      <Card
+        hover="no"
+        cdkTrapFocus
+        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" />
+        </CardHeader>
+
+        <CardContent class="grid gap-4">
+          @let useCredentials =
+            !config.autoOAuthProvider && !config.autoSAMLProvider;
+          @if (useCredentials) {
+            <!-- authentication using credentials -->
+            <div class="grid gap-2">
+              <label class="text-sm font-medium" for="username">{{
+                "login.username" | transloco
+              }}</label>
+              <input
+                id="username"
+                type="text"
+                required
+                [(ngModel)]="username"
+                (keydown.enter)="handleLoginWithCredentials()" />
+            </div>
 
             <div class="grid gap-2">
-              <label class="text-sm font-medium" for="password">{{ 'login.password' | transloco }}</label>
-              <input id="password" type="password" required [(ngModel)]="password" (keydown.enter)="handleLoginWithCredentials()" />
+              <label class="text-sm font-medium" for="password">{{
+                "login.password" | transloco
+              }}</label>
+              <input
+                id="password"
+                type="password"
+                required
+                [(ngModel)]="password"
+                (keydown.enter)="handleLoginWithCredentials()" />
             </div>
 
-           <span
-               class="cursor-pointer text-xs text-muted-foreground hover:underline justify-self-start"
-                role="button"
-                tabindex="0"
+            <span
+              class="text-muted-foreground cursor-pointer justify-self-start text-xs hover:underline"
+              role="button"
+              tabindex="0"
               (click)="forgotPassword.emit()"
-            (keydown.enter)="forgotPassword.emit()">
-             {{ 'login.forgotPassword' | transloco }}
-                  </span>
-            <button [disabled]="!isValid()" (click)="handleLoginWithCredentials()">
-              {{ 'login.connect' | transloco }}
+              (keydown.enter)="forgotPassword.emit()">
+              {{ "login.forgotPassword" | transloco }}
+            </span>
+            <button
+              [disabled]="!isValid()"
+              (click)="handleLoginWithCredentials()">
+              {{ "login.connect" | transloco }}
             </button>
-
-          } @else {
+          }
+          @else {
+            <!-- authentication using OAuth or SAML provider -->
             <button (click)="handleLogin()">
-              {{ 'login.SignInWith' | transloco: { provider: config.autoOAuthProvider ? 'OAuth' : 'SAML' } }}
+              {{ "login.SignInWith" | transloco : { provider: config.autoOAuthProvider ? "OAuth" : "SAML" } }}
             </button>
           }
         </CardContent>
-      }
-    </Card>
-  `,
-                    host: {
+      </Card>
+    } @else {
+      <app-wait />
+    }
+  `, host: {
                         "[class]": "cn('grid h-dvh w-full place-content-center', class())"
-                    }
-                }]
+                    }, styles: ["input{background-color:var(--background)}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], forgotPassword: [{ type: i0.Output, args: ["forgotPassword"] }], username: [{ type: i0.Input, args: [{ isSignal: true, alias: "username", required: false }] }, { type: i0.Output, args: ["usernameChange"] }], password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }, { type: i0.Output, args: ["passwordChange"] }] } });
 
 class AuthPageComponent {
@@ -10994,7 +10906,6 @@ class OverrideUserDialogComponent {
                     })
                         .catch((err) => {
                         error("An error occured while overriding (initialize)", err);
-                        notify.error("An error occured while overriding (initialize)", { duration: 2000 });
                         setGlobalConfig({ userOverrideActive: false, userOverride: undefined });
                     });
                 }
@@ -11053,7 +10964,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\"]", 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", "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.16", ngImport: i0, type: OverrideUserDialogComponent, decorators: [{
             type: Component,
@@ -11789,7 +11700,7 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
         return res;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DrawerAdvancedFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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\"]", 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.16", 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DrawerAdvancedFiltersComponent, decorators: [{
             type: Component,
@@ -12770,10 +12681,9 @@ class AggregationTreeItemComponent {
         }
     }
     onChildSelect(item) {
-        this.onSelect.emit(undefined);
         // if some items are selected visually, this means all these items got selected visually and if one
         // got changed we need to change their selection status
-        if (item && this.linkChildren() && this.node().items.some((i) => i.$selectedVisually)) {
+        if (item && this.linkChildren() && !item.$selected && this.node().items.some((i) => i.$selectedVisually)) {
             this.node().items.forEach((i) => {
                 if (i !== item) {
                     i.$selectedVisually = false;
@@ -12785,6 +12695,7 @@ class AggregationTreeItemComponent {
             this.node().$selected = false;
             this.node().$selectedVisually = false;
         }
+        this.onSelect.emit(this.node());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationTreeItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AggregationTreeItemComponent, isStandalone: true, selector: "aggregation-tree-item, AggregationTreeItem, aggregationtreeitem", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onOpen: "onOpen", onFilter: "onFilter" }, host: { properties: { "attr.disabled": "this.disabled" } }, ngImport: i0, template: "<a\r\n  role=\"listitem\"\r\n  [attr.aria-selected]=\"node().$selected || node().$selectedVisually\"\r\n  [attr.aria-label]=\"name() | syslang\"\r\n  [style.--level]=\"level()\"\r\n  [class]=\"\r\n    cn(\r\n      'flex grow items-center gap-2 p-1 leading-7',\r\n      node().count === 0 && 'disabled pointer-events-none text-neutral-300',\r\n      (node().$selected || node().$selectedVisually) &&\r\n        'bg-primary-100 text-primary dark:text-primary-foreground'\r\n    )\r\n  \"\r\n  (click)=\"select(node(), $event, true)\">\r\n  <!-- chrevron is visible only if the node has children -->\r\n  <button\r\n    (click)=\"open($event, node())\"\r\n    class=\"transition-transform ease-in hover:scale-125\"\r\n    aria-label=\"Open\">\r\n    <ChevronRight\r\n      [class]=\"\r\n        cn(\r\n          'size-4 translate-x-1',\r\n          node().$opened && 'rotate-90',\r\n          !node().hasChildren && 'hidden'\r\n        )\r\n      \"\r\n      width=\"16\"\r\n      height=\"16\" />\r\n  </button>\r\n\r\n  <input\r\n    type=\"checkbox\"\r\n    role=\"checkbox\"\r\n    value=\"{{ node().value }}\"\r\n    [attr.disabled]=\"node().count === 0 ? true : null\"\r\n    [attr.aria-disabled]=\"node().count === 0\"\r\n    (keydown.enter)=\"select(node(), $event)\"\r\n    [checked]=\"node().$selected || node().$selectedVisually\" />\r\n\r\n  @if (node().icon) {\r\n    <i\r\n      class=\"fa-fw {{ node().icon }} self-center justify-self-center\"\r\n      aria-hidden=\"true\"></i>\r\n  }\r\n  <span\r\n    [class]=\"\r\n      cn(\r\n        'line-clamp-1 break-all text-ellipsis',\r\n        quickFilter() && 'hover:underline'\r\n      )\r\n    \"\r\n    [title]=\"\r\n      quickFilter()\r\n        ? ((isFiltered() ? 'filters.removeFilter' : 'filters.addFilter')\r\n            | transloco) +\r\n          ': ' +\r\n          (name() | syslang)\r\n        : (name() | syslang)\r\n    \"\r\n    (click)=\"onTextClick($event)\">\r\n    @for (\r\n      chunk of (name() | syslang) ?? \"\" | highlightWord: searchText() : 10;\r\n      track $index\r\n    ) {\r\n      <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\r\n        chunk.text\r\n      }}</span>\r\n    }\r\n  </span>\r\n  @if (showCount() && node().count > 0) {\r\n    <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\r\n      node().count\r\n    }}</span>\r\n  }\r\n</a>\r\n\r\n@if (node().hasChildren && node().$opened) {\r\n  @for (item of node().items; track $index) {\r\n    <AggregationTreeItem\r\n      [node]=\"item\"\r\n      [path]=\"childrenPath()\"\r\n      [field]=\"field()\"\r\n      (onOpen)=\"onOpen.emit($event)\"\r\n      (onFilter)=\"onFilter.emit()\"\r\n      (onSelect)=\"onChildSelect($event)\" />\r\n  }\r\n}\r\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none}:host a{padding-left:calc((var(--agg-tree-indent, .5rem) * var(--level)))}a{line-height:var(--agg-item-height, inherit)}\n"], dependencies: [{ kind: "component", type: AggregationTreeItemComponent, selector: "aggregation-tree-item, AggregationTreeItem, aggregationtreeitem", inputs: ["node", "path", "field"], outputs: ["onSelect", "onOpen", "onFilter"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "pipe", type: HighlightWordPipe, name: "highlightWord" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
@@ -12826,6 +12737,7 @@ class AggregationTreeComponent {
     id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
     column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    expandedLevel = input(undefined, ...(ngDevMode ? [{ debugName: "expandedLevel", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     onSelect = output();
     /**
      * Determines whether the aggregation component can be collapsed or expanded.
@@ -12881,6 +12793,9 @@ class AggregationTreeComponent {
                 if (!agg.isTree) {
                     error("The aggregation tree component does not support list aggregations. Please use the <Aggregation /> component instead.");
                 }
+                // overrides "expandedLevel" from custom JSON file
+                const expandedLevel = this.expandedLevel() ?? agg.expandedLevel ?? 0;
+                this.expandItems(agg.items, expandedLevel);
                 // overrides "searchable" properties with the input if any
                 agg.searchable = this.searchable() ?? agg.searchable;
                 return agg;
@@ -13359,8 +13274,58 @@ class AggregationTreeComponent {
         const e = event;
         this.isCollapsed.set(e.newState === "closed");
     }
+    expandItems(items, expandedLevel) {
+        this.traverse(items, (lineage, node, level) => {
+            if (!node.$opened && node.items?.length >= 0 && level < expandedLevel) {
+                node.$opened = true;
+            }
+            if (node.$opened && level >= expandedLevel) {
+                node.$opened = false;
+            }
+            return false;
+        });
+    }
+    /**
+     * Traverses a tree structure, executing a callback function at every node
+     * @param nodes the nodes to traverse
+     * @param callback the callback function
+     */
+    traverse(nodes, callback) {
+        if (!nodes || nodes.length === 0) {
+            return false;
+        }
+        if (!callback) {
+            return false;
+        }
+        const lineage = [];
+        const stack = [];
+        let _i = nodes.length;
+        while (_i--) {
+            stack.push(nodes[_i]);
+        }
+        while (stack.length) {
+            const node = stack.pop();
+            if (!node) {
+                lineage.pop();
+            }
+            else {
+                lineage.push(node);
+                if (callback(lineage, node, lineage.length - 1)) {
+                    return true;
+                }
+                stack.push(undefined);
+                if (node.items && node.items.length > 0) {
+                    _i = node.items.length;
+                    while (_i--) {
+                        stack.push(node.items[_i]);
+                    }
+                }
+            }
+        }
+        return false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AggregationTreeComponent, isStandalone: true, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, 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\">{{\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 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.16", 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationTreeComponent, decorators: [{
             type: Component,
@@ -13381,8 +13346,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         FilterIcon
                     ], 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\">{{\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 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 }] }], 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"] }] } });
+                    }, 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"] }] } });
 
 /**
  * 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.
@@ -13450,6 +13415,7 @@ class AggregationComponent {
      * "Undefined" and not "false" because this input overrides the custom json settings
      */
     searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    expandedLevel = input(undefined, ...(ngDevMode ? [{ debugName: "expandedLevel", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     /**
      * 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.
      */
@@ -13493,7 +13459,7 @@ class AggregationComponent {
         return this.appStore.isDateColumn(column);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 } }, 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.16", 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: `
     @if (isDate(aggregation()?.column)) {
     <AggregationDate
       class="max-w-80"
@@ -13516,6 +13482,7 @@ class AggregationComponent {
       [collapsible]="collapsible()"
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
+      [expandedLevel]="expandedLevel()"
       (onSelect)="onSelect.emit($event)"
       />
   }
@@ -13532,7 +13499,7 @@ class AggregationComponent {
       (onSelect)="onSelect.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", "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", "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AggregationComponent, decorators: [{
             type: Component,
@@ -13562,6 +13529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       [collapsible]="collapsible()"
       [showFiltersCount]="showFiltersCount()"
       [searchable]="searchable()"
+      [expandedLevel]="expandedLevel()"
       (onSelect)="onSelect.emit($event)"
       />
   }
@@ -13583,7 +13551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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 }] }], 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"] }] } });
 
 class AsideFiltersComponent {
     cn = cn;
@@ -13610,7 +13578,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"], outputs: ["onSelect"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "showFiltersCount", "collapsible", "collapsed", "searchable", "expandedLevel"], outputs: ["onSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AsideFiltersComponent, decorators: [{
             type: Component,
@@ -13635,6 +13603,7 @@ class FilterButtonComponent {
     column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
     position = input("bottom-start", ...(ngDevMode ? [{ debugName: "position" }] : []));
     offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    expandedLevel = input(undefined, ...(ngDevMode ? [{ debugName: "expandedLevel", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     variant = signal("ghost", ...(ngDevMode ? [{ debugName: "variant" }] : []));
     filter = signal({
         name: "",
@@ -13665,7 +13634,7 @@ class FilterButtonComponent {
                 column: this.column(),
                 icon,
                 hidden,
-                display: agg?.isTree ? display : (f?.display ?? f?.value ?? display),
+                display: f?.display ?? f?.value ?? display,
                 isTree: agg?.isTree || false,
                 count,
                 disabled: !!(!agg?.items || agg.items?.length === 0),
@@ -13690,7 +13659,7 @@ class FilterButtonComponent {
         return this.appStore.isDateColumn(column);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FilterButtonComponent, isStandalone: true, selector: "filter-button, FilterButton", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class.hidden": "filter().hidden" } }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FilterButtonComponent, isStandalone: true, selector: "filter-button, FilterButton", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class.hidden": "filter().hidden" } }, viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <Popover [disabled]="filter().disabled" class="group">
       <button
         [variant]="variant()"
@@ -13708,7 +13677,8 @@ class FilterButtonComponent {
           <span [innerHTML]="filter().legacyFilter | operator | syslang | transloco"></span>
         } @else {
           <!-- display the first filter value or the aggregation name if no value is set -->
-          <span class="max-w-40 truncate">{{ filter().display || filter().name | syslang | transloco }}</span>
+           @let display = filter().display || filter().name | syslang | transloco;
+          <span class="max-w-40 truncate" [title]="display">{{ display }}</span>
         }
 
         <!-- show the count of selected items -->
@@ -13732,11 +13702,12 @@ class FilterButtonComponent {
             id="filter-{{ filter().column }}"
             [name]="filter().name"
             [column]="filter().column"
+            [expandedLevel]="expandedLevel()"
           />
       }
       </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"], 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", "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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FilterButtonComponent, decorators: [{
             type: Component,
@@ -13771,7 +13742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           <span [innerHTML]="filter().legacyFilter | operator | syslang | transloco"></span>
         } @else {
           <!-- display the first filter value or the aggregation name if no value is set -->
-          <span class="max-w-40 truncate">{{ filter().display || filter().name | syslang | transloco }}</span>
+           @let display = filter().display || filter().name | syslang | transloco;
+          <span class="max-w-40 truncate" [title]="display">{{ display }}</span>
         }
 
         <!-- show the count of selected items -->
@@ -13795,6 +13767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             id="filter-{{ filter().column }}"
             [name]="filter().name"
             [column]="filter().column"
+            [expandedLevel]="expandedLevel()"
           />
       }
       </PopoverContent>
@@ -13805,7 +13778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         role: "listitem"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }] } });
 
 const FILTERS_BREAKPOINT = new InjectionToken('FILTERS_BREAKPOINT', { factory: () => 5 });
 
@@ -13905,7 +13878,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"], 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"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MoreComponent, decorators: [{
             type: Component,
@@ -14048,6 +14021,7 @@ class FiltersBarComponent {
      * @defaultValue 8px
      */
     offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    expandedLevel = input(undefined, ...(ngDevMode ? [{ debugName: "expandedLevel", transform: numberAttribute }] : [{ transform: numberAttribute }]));
     /**
      * Event emitted when the clear filters button is clicked.
      * This event can be used to perform additional actions when filters are cleared.
@@ -14181,7 +14155,7 @@ class FiltersBarComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FiltersBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 } }, 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: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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)">
       @if (hasFilters()) {
         <button
@@ -14215,7 +14189,7 @@ class FiltersBarComponent {
         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()" />
+          <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 -->
@@ -14233,7 +14207,7 @@ class FiltersBarComponent {
       </div>
       }
     </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"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "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.16", ngImport: i0, type: FiltersBarComponent, decorators: [{
             type: Component,
@@ -14284,7 +14258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         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()" />
+          <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 -->
@@ -14308,7 +14282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         "(click)": "handleClick($event)"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], morePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "morePosition", required: false }] }], aggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregations", required: false }] }], includeFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeFilters", required: false }] }], excludeFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeFilters", required: false }] }], filtersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersCount", required: false }] }], showMoreFiltersButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoreFiltersButton", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], onClearFilters: [{ type: i0.Output, args: ["onClearFilters"] }], onClearBasket: [{ type: i0.Output, args: ["onClearBasket"] }], moreButtonRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MoreButtonComponent), { isSignal: true }] }], filterButtonRefs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FilterButtonComponent), { isSignal: true }] }], overflowManagerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OverflowManagerDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], morePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "morePosition", required: false }] }], aggregations: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregations", required: false }] }], includeFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "includeFilters", required: false }] }], excludeFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeFilters", required: false }] }], filtersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersCount", required: false }] }], showMoreFiltersButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoreFiltersButton", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", required: false }] }], onClearFilters: [{ type: i0.Output, args: ["onClearFilters"] }], onClearBasket: [{ type: i0.Output, args: ["onClearBasket"] }], moreButtonRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MoreButtonComponent), { isSignal: true }] }], filterButtonRefs: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FilterButtonComponent), { isSignal: true }] }], overflowManagerRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OverflowManagerDirective), { isSignal: true }] }] } });
 
 class LabelService {
     appStore = inject(AppStore);
@@ -14632,7 +14606,7 @@ class MultiSelectLabelsComponent {
         {{ 'labels.error' | transloco }}
       </div>
     }
-  `, isInline: true, styles: [".anchor:has(.popover:popover-open){z-index:var(--z-menu, 1000);border-radius:var(--radius) var(--radius) 0 0}.anchor .popover::backdrop{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.popover{width:anchor-size(width);top:anchor(bottom);left:anchor(left)}@supports (-moz-appearance: none){.popover{margin:calc(33.3333333333vh + 30px) 25vw;width:50vw}}@supports (background: -webkit-named-image(i)){.popover{margin:calc(33.3333333333vh + 30px) 25vw;width:50vw}}\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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, styles: [".anchor:has(.popover:popover-open){z-index:var(--z-menu, 1000);border-radius:var(--radius) var(--radius) 0 0}.anchor .popover::backdrop{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.popover{width:anchor-size(width);top:anchor(bottom);left:anchor(left)}@supports (-moz-appearance: none){.popover{margin:calc(33.3333333333vh + 30px) 25vw;width:50vw}}@supports (background: -webkit-named-image(i)){.popover{margin:calc(33.3333333333vh + 30px) 25vw;width:50vw}}\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: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MultiSelectLabelsComponent, decorators: [{
             type: Component,
@@ -15106,7 +15080,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\"]", 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", "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.16", ngImport: i0, type: SavedSearchDialog, decorators: [{
             type: Component,
@@ -15229,11 +15203,13 @@ class UserProfileFormComponent {
     appStore = inject(AppStore);
     transloco = inject(TranslocoService);
     createInputElement = viewChild("avatarInput", ...(ngDevMode ? [{ debugName: "createInputElement" }] : []));
-    dataKeys = ["fullName", "mail", "jobTitle", "group", "organisation", "location", "skills"];
+    dataKeys = ["fullName", "mail", "jobTitle", "group", "organisation", "location", "skills", "profilePhoto"];
     keys = computed(() => {
         const data = this.appStore.general()?.features?.userProfile?.data;
-        return data?.length ? data : this.dataKeys;
+        return data?.length ? this.dataKeys.filter(key => data.some(k => k === key)) : this.dataKeys;
     }, ...(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)
@@ -15243,6 +15219,7 @@ class UserProfileFormComponent {
             .map((word) => word[0].toUpperCase())
             .join("");
     }, ...(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" }] : []));
     currentLanguage = model(...(ngDevMode ? [undefined, { debugName: "currentLanguage" }] : []));
@@ -15391,7 +15368,7 @@ class UserProfileFormComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UserProfileFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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      <!-- 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      <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        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      @for (key of keys(); track key) {\n        <div>\n          <p>{{ `userProfile.data.${key}` | transloco }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('data', key)\">\n              @if (propertyToEdit() === \"data.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"data\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"data.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('data', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('data', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('data', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n      @for (key of customData(); track key) {\n        <div>\n          <p>{{ key }}</p>\n          <div class=\"group flex flex-row\">\n            <div\n              class=\"grow whitespace-pre-line\"\n              [class.text-muted-foreground]=\"!getDataValue('customData', key)\">\n              @if (propertyToEdit() === \"customData.\" + key) {\n                <textarea\n                  class=\"hover:outline-primary focus:outline-primary border-foreground/20 hover:bg-muted focus:bg-muted mt-2 w-full rounded-md border px-2 pt-1 hover:outline focus:outline\"\n                  id=\"user-profile-{{ key }}\"\n                  [(ngModel)]=\"value\"></textarea>\n              } @else {\n                {{\n                  getDataValue(\"customData\", key) ||\n                    (\"userProfile.notDefined\" | transloco)\n                }}\n              }\n            </div>\n            @if (propertyToEdit() === \"customData.\" + key) {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mx-2 cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onSaveData('customData', key)\">\n                <i class=\"fa-fw fas fa-save ml-2\"></i>\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"cursor-pointer\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"propertyToEdit.set(undefined)\">\n                <UndoIcon />\n              </button>\n            } @else {\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"invisible mx-2 cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.editProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.editProperty' | transloco\"\n                (click)=\"onEdit('customData', key)\">\n                <EditIcon />\n              </button>\n              <button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"text-destructive invisible cursor-pointer group-hover:visible\"\n                title=\"{{ 'userProfile.deleteProperty' | transloco }}\"\n                [attr.aria-label]=\"'userProfile.deleteProperty' | transloco\"\n                (click)=\"onDeleteData('customData', key)\">\n                <TrashIcon />\n              </button>\n            }\n          </div>\n        </div>\n      }\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <span>Loading...</span>\n} @else if (userProfileResource.error()) {\n  <p>Please contact an administrator to create your user profile.</p>\n}\n\n<!-- AVATAR UPLOAD -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: EditIcon, selector: "edit-icon, EditIcon, editicon", inputs: ["class"] }, { kind: "component", type: UndoIcon, selector: "UndoIcon, undoicon, undo-icon", inputs: ["class"] }, { kind: "component", type: AvatarComponent, selector: "avatar, Avatar", inputs: ["class"] }, { kind: "component", type: AvatarFallbackComponent, selector: "avatar-fallback, avatarfallback, AvatarFallback", inputs: ["class"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: AvatarImageComponent, selector: "avatar-image, AvatarImage, avatarimage", inputs: ["class", "src", "alt", "width", "height", "referrerPolicy", "crossOrigin"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: ChangePasswordComponent, selector: "change-password, ChangePassword, changepassword", inputs: ["username", "alert", "redirectAfterSuccess", "redirectAfterCancel", "currentPassword", "newPassword", "confirmPassword"], outputs: ["success", "cancel", "currentPasswordChange", "newPasswordChange", "confirmPasswordChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UserProfileFormComponent, decorators: [{
             type: Component,
@@ -15409,7 +15386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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      <!-- 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      <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        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      @for (key of keys(); 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 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" }]
         }], 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 {
@@ -15596,6 +15573,7 @@ const errorInterceptorFn = (request, next) => {
     }));
 };
 
+const SHOW_ERROR_TOKEN = new HttpContextToken(() => true);
 /**
  * Intercepts HTTP requests and handles errors by displaying toast notifications.
  *
@@ -15613,6 +15591,18 @@ const toastInterceptorFn = (request, next) => {
     }
     return next(request).pipe(catchError$1((err) => {
         const { status, statusText, error, url } = err;
+        if (status === 401 && globalConfig.userOverrideActive && error?.errorCode == 6) {
+            if (request.context.get(SHOW_ERROR_TOKEN)) {
+                const errorMsg = error?.errorMessage || 'The account may be deactivated or inaccessible';
+                notify.error(`Cannot override user: Unauthorized access`, {
+                    description: errorMsg,
+                    closeButton: true,
+                    duration: 5000
+                });
+                request.context.set(SHOW_ERROR_TOKEN, false);
+                return throwError(() => err);
+            }
+        }
         if ([400, 403, 500, 503].includes(status)) {
             // Avoid showing error toasts for preview requests
             if (url.includes("api/v1/preview") === false) {
@@ -15648,5 +15638,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, PasswordExpiryGuard, 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, 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