@sinequa/atomic-angular 0.1.43 → 0.1.50

package/fesm2022/sinequa-atomic-angular.mjs

@@ -1,30 +1,32 @@
 import * as i0 from '@angular/core';
-import { input, output, Component, Injectable, inject, HostBinding, InjectionToken, computed, signal, effect, assertInInjectionContext, runInInjectionContext, Injector, EventEmitter, Inject, viewChild, ElementRef, afterNextRender, untracked, linkedSignal, model, DestroyRef, Directive, Renderer2, HostListener, contentChildren, contentChild, TemplateRef, Pipe, ChangeDetectorRef, LOCALE_ID, Optional, afterEveryRender, Output, viewChildren, ViewContainerRef } from '@angular/core';
-import { DropdownComponent, DropdownContentComponent, ButtonComponent, MenuComponent, MenuContentComponent, MenuItemComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, InputComponent, cn, SwitchComponent, DialogService, TabsComponent, TabComponent, searchVariants, SearchIcon, XMarkIConComponent, PopoverContentComponent, HorizontalDividerComponent, PopoverComponent, ChevronRightIconComponent, LoadingCircleIconComponent, CircleCheckIconComponent, CardComponent, CardHeaderComponent, CardContentComponent, CardFooterComponent, VerticalDividerComponent } from '@sinequa/ui';
+import { input, output, Component, Injectable, inject, HostBinding, InjectionToken, computed, signal, effect, assertInInjectionContext, runInInjectionContext, Injector, Inject, EventEmitter, viewChild, ElementRef, afterNextRender, untracked, Pipe, ChangeDetectorRef, DestroyRef, LOCALE_ID, Optional, linkedSignal, model, Directive, Renderer2, HostListener, contentChildren, contentChild, TemplateRef, booleanAttribute, afterEveryRender, Output, viewChildren, ViewContainerRef, resource } from '@angular/core';
+import { DropdownComponent, DropdownContentComponent, ButtonComponent, MenuComponent, MenuContentComponent, MenuItemComponent, BadgeComponent, DialogComponent, DialogHeaderComponent, DialogTitleComponent, DialogContentComponent, DialogFooterComponent, ListItemComponent, InputComponent, cn, SwitchComponent, SelectOptionDirective, DialogService, TabsComponent, TabComponent, SearchIcon, XMarkIConComponent, PopoverContentComponent, HorizontalDividerComponent, PopoverComponent, ChevronRightIconComponent, LoadingCircleIconComponent, CircleCheckIconComponent, CardComponent, CardHeaderComponent, CardContentComponent, CardFooterComponent, VerticalDividerComponent } from '@sinequa/ui';
 import { BehaviorSubject, Subscription, catchError, EMPTY, firstValueFrom, map, Subject, of, tap, throwError, from, forkJoin, filter, shareReplay, fromEvent, switchMap, debounceTime } from 'rxjs';
 import { ActivatedRoute, Router, NavigationEnd, RouterLink, RouterModule } from '@angular/router';
 import { signalStore, signalStoreFeature, withState, withMethods, patchState, getState, withComputed } from '@ngrx/signals';
 import { withDevtools } from '@angular-architects/ngrx-toolkit';
-import { globalConfig, EngineType, getQueryParamsFromUrl, warn, error, buildPathsAndLevels, info, escapeExpr, notify, isAuthenticated, patchUserSettings, deleteUserSettings, fetchUserSettings, fetchSuggest, isObject, Audit, login, setGlobalConfig, addConcepts, queryParamsFromUrl, getMetadata, bisect, isNotInputEvent, sysLang, fetchSponsoredLinks, isJsonable, addAuditAdditionalInfo, getToken, setToken, logout, getRelativeDate, labels, fetchLabels, guid, suggestionsToTreeAggregationNodes, fetchSuggestField, translateAggregationToDateOptions, fetchSimilarDocuments } from '@sinequa/atomic';
+import { globalConfig, EngineType, getQueryParamsFromUrl, warn, error, buildPathsAndLevels, info, escapeExpr, notify, isAuthenticated, patchUserSettings, deleteUserSettings, fetchUserSettings, fetchSuggest, isObject, Audit, login, setGlobalConfig, addConcepts, queryParamsFromUrl, sysLang, getMetadata, bisect, isNotInputEvent, fetchSponsoredLinks, isJsonable, addAuditAdditionalInfo, getToken, setToken, logout, getRelativeDate, labels, fetchLabels, guid, suggestionsToTreeAggregationNodes, fetchSuggestField, translateAggregationToDateOptions, fetchSimilarDocuments } from '@sinequa/atomic';
 import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
 import { Title, DomSanitizer } from '@angular/platform-browser';
-import { Location, DatePipe, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, NgTemplateOutlet, NgStyle, NgClass, NgComponentOutlet, AsyncPipe } from '@angular/common';
+import { Location, DatePipe, DATE_PIPE_DEFAULT_TIMEZONE, DATE_PIPE_DEFAULT_OPTIONS, NgTemplateOutlet, NgStyle, NgClass, NgComponentOutlet } from '@angular/common';
 import { TranslocoPipe, provideTranslocoScope, TranslocoService } from '@jsverse/transloco';
+import highlightWords from 'highlight-words';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { cva } from 'class-variance-authority';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule, FormGroup, FormControl, NonNullableFormBuilder } from '@angular/forms';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import highlightWords from 'highlight-words';
 import { catchError as catchError$1 } from 'rxjs/operators';
 import * as i1$1 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i2 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
 import { Overlay } from '@angular/cdk/overlay';
 
 class DropdownListComponent {
     items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
     onClick = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: DropdownListComponent, isStandalone: true, selector: "dropdown-list, DropdownList", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DropdownListComponent, isStandalone: true, selector: "dropdown-list, DropdownList", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
     @for (item of items(); track $index) {
       <span class="bg-primary text-primary-foreground m-1 inline-flex cursor-default select-none items-center rounded-full px-2 py-1 text-sm font-semibold">
         {{ item.display || item.value }}
@@ -45,7 +47,7 @@ class DropdownListComponent {
     }
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DropdownListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DropdownListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dropdown-list, DropdownList',
@@ -83,8 +85,8 @@ class DropdownInputComponent {
     onKeyUp = output(); // emits the input value
     removeItem = output();
     addItem = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DropdownInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: DropdownInputComponent, isStandalone: true, selector: "dropdown-input, DropdownInput", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, noResultLabel: { classPropertyName: "noResultLabel", publicName: "noResultLabel", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onFocus: "onFocus", onKeyUp: "onKeyUp", removeItem: "removeItem", addItem: "addItem" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DropdownInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DropdownInputComponent, isStandalone: true, selector: "dropdown-input, DropdownInput", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, noResultLabel: { classPropertyName: "noResultLabel", publicName: "noResultLabel", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onFocus: "onFocus", onKeyUp: "onKeyUp", removeItem: "removeItem", addItem: "addItem" }, ngImport: i0, template: `
     @if (label()) {
       <p class="font-semibold">{{ label() }}</p>
     }
@@ -118,7 +120,7 @@ class DropdownInputComponent {
     </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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DropdownInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DropdownInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dropdown-input, DropdownInput',
@@ -168,10 +170,10 @@ class BackdropService {
     hide() {
         this.isVisible.next(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BackdropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BackdropService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BackdropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BackdropService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BackdropService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BackdropService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -188,13 +190,13 @@ class BackdropComponent {
     ngOnDestroy() {
         this.sub.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: BackdropComponent, isStandalone: true, selector: "app-backdrop", host: { properties: { "attr.backdrop-visible": "this.backdropVisible" }, classAttribute: "z-[var(--z-backdrop)] bg-backdrop absolute bottom-0 left-0 right-0 top-0 hidden select-none" }, ngImport: i0, template: ``, isInline: true, styles: [":host{--backdrop-animation-duration: .25s;animation:hide-backdrop var(--backdrop-animation-duration, .25s) ease-out;@keyframes show-backdrop{0%{display:none;opacity:0}1%{display:block}to{opacity:1}}@keyframes hide-backdrop{0%{display:block;opacity:1}99%{opacity:0}to{display:none}}}:host[backdrop-visible=true]{display:block;animation:show-backdrop var(--backdrop-animation-duration, .25s) ease-out}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: BackdropComponent, isStandalone: true, selector: "Backdrop, backdrop", host: { properties: { "attr.backdrop-visible": "this.backdropVisible" }, classAttribute: "z-[var(--z-backdrop)] bg-backdrop fixed bottom-0 left-0 right-0 top-0 hidden select-none" }, ngImport: i0, template: ``, isInline: true, styles: [":host{--backdrop-animation-duration: .25s;animation:hide-backdrop var(--backdrop-animation-duration, .25s) ease-out;@keyframes show-backdrop{0%{display:none;opacity:0}1%{display:block}to{opacity:1}}@keyframes hide-backdrop{0%{display:block;opacity:1}99%{opacity:0}to{display:none}}}:host[backdrop-visible=true]{display:block;animation:show-backdrop var(--backdrop-animation-duration, .25s) ease-out}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BackdropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BackdropComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-backdrop', standalone: true, imports: [], template: ``, host: {
-                        class: 'z-[var(--z-backdrop)] bg-backdrop absolute bottom-0 left-0 right-0 top-0 hidden select-none'
+            args: [{ selector: 'Backdrop, backdrop', standalone: true, imports: [], template: ``, host: {
+                        class: 'z-[var(--z-backdrop)] bg-backdrop fixed bottom-0 left-0 right-0 top-0 hidden select-none'
                     }, styles: [":host{--backdrop-animation-duration: .25s;animation:hide-backdrop var(--backdrop-animation-duration, .25s) ease-out;@keyframes show-backdrop{0%{display:none;opacity:0}1%{display:block}to{opacity:1}}@keyframes hide-backdrop{0%{display:block;opacity:1}99%{opacity:0}to{display:none}}}:host[backdrop-visible=true]{display:block;animation:show-backdrop var(--backdrop-animation-duration, .25s) ease-out}\n"] }]
         }], ctorParameters: () => [], propDecorators: { backdropVisible: [{
                 type: HostBinding,
@@ -295,10 +297,10 @@ class AppService {
             return EMPTY;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AppService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AppService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AppService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AppService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AppService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AppService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -492,7 +494,7 @@ function withAppFeatures() {
             const schema = state.indexes?.['_']?.columns;
             const col = schema[column];
             if (col) {
-                return col.aliases?.[0] || column;
+                return col.aliases?.[0] ? `${col.aliases[0].charAt(0).toLowerCase()}${col.aliases[0].slice(1)}` : column;
             }
             return column;
         },
@@ -763,7 +765,7 @@ function withExtractsFeatures() {
          * @returns The extracts associated with the given ID.
          */
         getExtracts(id) {
-            return store.extracts().get(id);
+            return store.extracts().get(id) || [];
         }
     })));
 }
@@ -796,10 +798,10 @@ class PrincipalService {
             return EMPTY;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PrincipalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PrincipalService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PrincipalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PrincipalService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PrincipalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PrincipalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1228,10 +1230,10 @@ class QueryService {
         };
         this.queryParamsStore.patch({ page }, audit);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: QueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: QueryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: QueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: QueryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: QueryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: QueryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1478,10 +1480,10 @@ class AggregationsService {
         }
         return node;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AggregationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AggregationsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AggregationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AggregationsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AggregationsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AggregationsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1888,6 +1890,25 @@ function withBookmarkFeatures() {
     })));
 }
 
+function withDarkModeFeatures() {
+    return signalStoreFeature(withState({ useDarkMode: false }), withMethods(store => ({
+        async setDarkMode(useDarkMode) {
+            const currentDarkMode = store.useDarkMode();
+            if (currentDarkMode === useDarkMode)
+                return;
+            await patchUserSettings({ useDarkMode });
+            patchState(store, state => {
+                return { ...state, useDarkMode };
+            });
+        }
+    })), withMethods(store => ({
+        async toggleDarkMode() {
+            const currentDarkMode = store.useDarkMode();
+            await store.setDarkMode(!currentDarkMode);
+        }
+    })));
+}
+
 function withRecentSearchesFeatures() {
     return signalStoreFeature(withState({ recentSearches: [] }), withMethods(store => ({
         /**
@@ -2021,7 +2042,13 @@ function withSavedSearchesFeatures() {
             if (!search)
                 return undefined;
             const savedSearches = store.savedSearches();
-            return savedSearches?.find(savedSearch => savedSearch.display === search);
+            return savedSearches?.find(savedSearch => {
+                const queryParams = savedSearch.url.split('?')[1];
+                if (!queryParams)
+                    return false;
+                const q = queryParams.split('&').find(qp => qp.startsWith('q='));
+                return !!q && decodeURI(q.substring(2)) === search;
+            });
         }
     })));
 }
@@ -2070,7 +2097,7 @@ function withUserSettingsFeatures() {
     })));
 }
 
-const UserSettingsStore = signalStore({ providedIn: 'root' }, withDevtools('UserSettings'), withBookmarkFeatures(), withRecentSearchesFeatures(), withSavedSearchesFeatures(), withBasketsFeatures(), withAssistantFeatures(), withUserSettingsFeatures(), withAlertsFeatures());
+const UserSettingsStore = signalStore({ providedIn: 'root' }, withDevtools('UserSettings'), withBookmarkFeatures(), withRecentSearchesFeatures(), withSavedSearchesFeatures(), withBasketsFeatures(), withAssistantFeatures(), withUserSettingsFeatures(), withAlertsFeatures(), withDarkModeFeatures());
 
 const ROUTE_COMPONENTS = new InjectionToken('ROUTE_COMPONENTS', { factory: () => [] });
 class ApplicationService {
@@ -2311,10 +2338,10 @@ class ApplicationService {
             document.documentElement.style.setProperty('--logo-large', `url('${light.large}')`);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ApplicationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ApplicationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ApplicationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ApplicationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ApplicationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ApplicationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2426,10 +2453,10 @@ class AuditService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AuditService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AuditService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AuditService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AuditService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AuditService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AuditService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2500,10 +2527,10 @@ class AutocompleteService {
         }
         return items;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AutocompleteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AutocompleteService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AutocompleteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AutocompleteService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AutocompleteService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AutocompleteService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2541,10 +2568,10 @@ class JsonMethodPluginService {
             ...options
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: JsonMethodPluginService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: JsonMethodPluginService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: JsonMethodPluginService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: JsonMethodPluginService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: JsonMethodPluginService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: JsonMethodPluginService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2576,10 +2603,10 @@ class NavigationService {
             this.auditService.notifyRouteChange(url);
         }
     }), tap(event => (this.urlAfterNavigation = event.url)), shareReplay(1));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NavigationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NavigationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2637,7 +2664,8 @@ class PreviewService {
     sanitizer = inject(DomSanitizer);
     queryService = inject(QueryService);
     auditService = inject(AuditService);
-    events = new EventEmitter();
+    events = signal('idle', ...(ngDevMode ? [{ debugName: "events" }] : []));
+    DOMContentLoaded = signal(false, ...(ngDevMode ? [{ debugName: "DOMContentLoaded" }] : []));
     // ! worker
     onMessage = new Subject();
     worker;
@@ -2679,12 +2707,13 @@ class PreviewService {
         const { app } = globalConfig;
         // when the iframe is ready, we can send the init message
         if (message.type === 'ready') {
+            this.DOMContentLoaded.set(true);
             // Initialize the preview iframe with the app name and highlights
             // app name is used to intialize the webworker
             this.sendMessage({ action: 'init', highlights: this.highlights, appname: app });
             if (this.previewData) {
                 const { id } = getState(this.selectionStore);
-                this.events.emit('fetching');
+                this.events.set('fetching');
                 this.retrieveHtmlContent(id, this.highlightCategory, this.previewData);
             }
         }
@@ -2697,7 +2726,7 @@ class PreviewService {
                 if (this.previewData) {
                     const extracts = this.fetchExtracts(id, message.data, this.previewData);
                     this.applicationStore.updateExtracts(this.previewData?.record.id || '', extracts);
-                    this.events.emit('fetched');
+                    this.events.set('fetched');
                 }
             }
         }
@@ -2706,7 +2735,7 @@ class PreviewService {
         if (message.type === 'get-html-results-webworker') {
             info('get html results with worker');
             if (message.data.extracts.length === 0) {
-                this.events.emit('fetched');
+                this.events.set('fetched');
                 this.applicationStore.updateExtracts(this.previewData?.record.id || '', []);
                 return;
             }
@@ -2715,7 +2744,7 @@ class PreviewService {
                 text: this.sanitizer.bypassSecurityTrustHtml(item.text)
             }));
             this.applicationStore.updateExtracts(this.previewData?.record.id || '', extracts);
-            this.events.emit('fetched');
+            this.events.set('fetched');
         }
     }
     /**
@@ -2953,10 +2982,10 @@ class PreviewService {
         // merge the entities with the default highlights without duplicates
         this.entities = [...new Set([...this.entities, ...entities])];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PreviewService, deps: [{ token: i0.DestroyRef }, { token: HIGHLIGHTS }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PreviewService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PreviewService, deps: [{ token: i0.DestroyRef }, { token: HIGHLIGHTS }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PreviewService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PreviewService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PreviewService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3025,10 +3054,10 @@ class SavedSearchesService {
     deleteSavedSearch(index) {
         this.userSettingsStore.deleteSavedSearch(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SavedSearchesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SavedSearchesService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SavedSearchesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SavedSearchesService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SavedSearchesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SavedSearchesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3121,10 +3150,10 @@ class SearchService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3273,10 +3302,10 @@ class SelectionService {
         const url = this.router.createUrlTree([], { relativeTo: this.route, queryParams }).toString();
         this.location.replaceState(url);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SelectionService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SelectionService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SelectionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3360,10 +3389,10 @@ class SelectionHistoryService {
         this.selectionHistoryEvent.next('back');
         return last;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SelectionHistoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SelectionHistoryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SelectionHistoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SelectionHistoryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SelectionHistoryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SelectionHistoryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3398,10 +3427,10 @@ class TextChunkService {
             return [];
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TextChunkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TextChunkService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TextChunkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TextChunkService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TextChunkService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TextChunkService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3703,8 +3732,11 @@ function withQueryParamsFeatures() {
             }
             if (filter && filter.value)
                 return { ...filter, count: 1 };
-            if (filter && filter.values)
-                return { ...filter, count: filter.values.length };
+            if (filter && filter.values) {
+                // "filter.values" is an array of strings, Set() automatically deletes duplicates
+                const uniqueValues = new Set(filter.values);
+                return { ...filter, count: uniqueValues.size };
+            }
             if (filter && Array.isArray(filter.filters) === false)
                 return { ...filter, count: 1 };
             if (filter && Array.isArray(filter.filters))
@@ -3889,10 +3921,10 @@ class SourceComponent {
         }
         return { iconClass: defaultIconClass };
     }, ...(ngDevMode ? [{ debugName: "iconDetails" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SourceComponent, isStandalone: true, selector: "source, Source", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: false, transformFunction: null }, connector: { classPropertyName: "connector", publicName: "connector", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope('sources')], ngImport: i0, template: "@if (iconDetails()?.iconPath) {\n  <img [src]=\"iconDetails()?.iconPath\" [alt]=\"collection()?.[0] || ('sources.sourceIcon' | transloco)\" />\n} @else {\n  <i class=\"{{ iconDetails()?.iconClass }}\" [attr.aria-label]=\"'sources.sourceIcon' | transloco\"></i>\n}\n", dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: SourceComponent, isStandalone: true, selector: "source, Source", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: false, transformFunction: null }, connector: { classPropertyName: "connector", publicName: "connector", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope('sources')], ngImport: i0, template: "@if (iconDetails()?.iconPath) {\n  <img [src]=\"iconDetails()?.iconPath\" [alt]=\"collection()?.[0] || ('sources.sourceIcon' | transloco)\" />\n} @else {\n  <i class=\"{{ iconDetails()?.iconClass }}\" [attr.aria-label]=\"'sources.sourceIcon' | transloco\"></i>\n}\n", dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SourceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SourceComponent, decorators: [{
             type: Component,
             args: [{ selector: 'source, Source', standalone: true, imports: [TranslocoPipe], providers: [provideTranslocoScope('sources')], template: "@if (iconDetails()?.iconPath) {\n  <img [src]=\"iconDetails()?.iconPath\" [alt]=\"collection()?.[0] || ('sources.sourceIcon' | transloco)\" />\n} @else {\n  <i class=\"{{ iconDetails()?.iconClass }}\" [attr.aria-label]=\"'sources.sourceIcon' | transloco\"></i>\n}\n" }]
         }] });
@@ -3977,8 +4009,8 @@ class DocumentLocatorComponent {
         const { filters } = getState(this.queryParamStore);
         this.router.navigate([], { queryParams: { f: JSON.stringify(filters) }, queryParamsHandling: 'merge' });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DocumentLocatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: DocumentLocatorComponent, isStandalone: true, selector: "document-locator, DocumentLocator", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null }, aggregation: { classPropertyName: "aggregation", publicName: "aggregation", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "flex items-center grow gap-2 overflow-hidden" }, viewQueries: [{ propertyName: "shadow", first: true, predicate: ["shadowRender"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "client", first: true, predicate: ["documentLocator"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DocumentLocatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DocumentLocatorComponent, isStandalone: true, selector: "document-locator, DocumentLocator", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null }, aggregation: { classPropertyName: "aggregation", publicName: "aggregation", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "flex items-center grow gap-2 overflow-hidden" }, viewQueries: [{ propertyName: "shadow", first: true, predicate: ["shadowRender"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "client", first: true, predicate: ["documentLocator"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     <!-- Renders all segment hidden to user to compute width -->
     <div #shadowRender class="pointer-events-none invisible absolute left-0 top-0 -z-10 flex gap-2">
       @for (segment of locationSegments(); track $index) {
@@ -3996,7 +4028,7 @@ class DocumentLocatorComponent {
 
     <div #documentLocator class="flex grow items-center gap-2 overflow-auto">
       @for (segment of visibleSegments(); track $index) {
-        <span class="cursor-pointer whitespace-nowrap" role="button" (click)="navigateToSegment($index)">{{ segment }}</span>
+        <button decoration="underline" class="text-foreground cursor-pointer whitespace-nowrap p-0" (click)="navigateToSegment($index)">{{ segment }}</button>
 
         @if (!$last) {
           <i class="fa fal fa-chevron-right"></i>
@@ -4009,7 +4041,7 @@ class DocumentLocatorComponent {
 
       @if (invisibleSegments().length > 0) {
         <menu>
-          <button variant="outline" class="h-0 w-full p-2">...</button>
+          <button class="h-0 w-full p-2">...</button>
 
           <MenuContent position="bottom">
             @for (segment of invisibleSegments(); track $index) {
@@ -4021,9 +4053,9 @@ class DocumentLocatorComponent {
         </menu>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: SourceComponent, selector: "source, Source", inputs: ["collection", "connector"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: SourceComponent, selector: "source, Source", inputs: ["collection", "connector"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DocumentLocatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DocumentLocatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'document-locator, DocumentLocator',
@@ -4047,7 +4079,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
 
     <div #documentLocator class="flex grow items-center gap-2 overflow-auto">
       @for (segment of visibleSegments(); track $index) {
-        <span class="cursor-pointer whitespace-nowrap" role="button" (click)="navigateToSegment($index)">{{ segment }}</span>
+        <button decoration="underline" class="text-foreground cursor-pointer whitespace-nowrap p-0" (click)="navigateToSegment($index)">{{ segment }}</button>
 
         @if (!$last) {
           <i class="fa fal fa-chevron-right"></i>
@@ -4060,7 +4092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
 
       @if (invisibleSegments().length > 0) {
         <menu>
-          <button variant="outline" class="h-0 w-full p-2">...</button>
+          <button class="h-0 w-full p-2">...</button>
 
           <MenuContent position="bottom">
             @for (segment of invisibleSegments(); track $index) {
@@ -4084,8 +4116,8 @@ class ErrorComponent {
     reload() {
         this.router.navigate(['/']).then(() => window.location.reload());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: ErrorComponent, isStandalone: true, selector: "error-component, ErrorComponent", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: ErrorComponent, isStandalone: true, selector: "error-component, ErrorComponent", ngImport: i0, template: `
     <div class="bg-background text-foreground flex min-h-screen flex-col items-center justify-center">
       <svg
         class="mb-8 h-20 w-20 text-red-600"
@@ -4128,7 +4160,7 @@ class ErrorComponent {
     </div>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ErrorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'error-component, ErrorComponent',
@@ -4225,8 +4257,8 @@ class LoadingComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: LoadingComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: LoadingComponent, isStandalone: true, selector: "app-wait", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LoadingComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: LoadingComponent, isStandalone: true, selector: "app-wait", ngImport: i0, template: `
     <div class="flex h-[100dvh] w-full items-center justify-center">
       <div class="flex flex-col items-center space-y-4">
         <span class="loader"></span>
@@ -4234,7 +4266,7 @@ class LoadingComponent {
     </div>
   `, isInline: true, styles: [".loader{--w: 96px;--h: 96px;transform:rotate(45deg);perspective:1000px;border-radius:50%;width:var(--w);height:var(--h);color:#0040bf}.loader:before,.loader:after{content:\"\";display:block;position:absolute;top:0;left:0;width:inherit;height:inherit;border-radius:50%;transform:rotateX(70deg);animation:1s spin linear infinite}.loader:after{color:#ff854a;transform:rotateY(70deg);animation-delay:.4s}@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes rotateccw{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}@keyframes spin{0%,to{box-shadow:.4em 0 0 0 currentcolor}12%{box-shadow:.4em .4em 0 0 currentcolor}25%{box-shadow:0 .4em 0 0 currentcolor}37%{box-shadow:-.4em .4em 0 0 currentcolor}50%{box-shadow:-.4em 0 0 0 currentcolor}62%{box-shadow:-.4em -.4em 0 0 currentcolor}75%{box-shadow:0 -.4em 0 0 currentcolor}87%{box-shadow:.4em -.4em 0 0 currentcolor}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: LoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", 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">
@@ -4245,10 +4277,311 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
   `, styles: [".loader{--w: 96px;--h: 96px;transform:rotate(45deg);perspective:1000px;border-radius:50%;width:var(--w);height:var(--h);color:#0040bf}.loader:before,.loader:after{content:\"\";display:block;position:absolute;top:0;left:0;width:inherit;height:inherit;border-radius:50%;transform:rotateX(70deg);animation:1s spin linear infinite}.loader:after{color:#ff854a;transform:rotateY(70deg);animation-delay:.4s}@keyframes rotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes rotateccw{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}@keyframes spin{0%,to{box-shadow:.4em 0 0 0 currentcolor}12%{box-shadow:.4em .4em 0 0 currentcolor}25%{box-shadow:0 .4em 0 0 currentcolor}37%{box-shadow:-.4em .4em 0 0 currentcolor}50%{box-shadow:-.4em 0 0 0 currentcolor}62%{box-shadow:-.4em -.4em 0 0 currentcolor}75%{box-shadow:0 -.4em 0 0 currentcolor}87%{box-shadow:.4em -.4em 0 0 currentcolor}}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }] });
 
+/**
+ * The HighlightWordPipe class is a custom pipe in the Atomic Angular library.
+ * It is used to highlight a specific word within a given text.
+ *
+ * @remarks
+ * This pipe takes in a `value` string, a `word` string to highlight, and an optional `clipBy` number to limit the length of the highlighted text.
+ * It returns an array of `HighlightWords.Chunk` objects representing the highlighted portions of the text.
+ *
+ * @example
+ * ```html
+ * <div [innerHTML]="text | highlightWord:'search':10"></div>
+ * ```
+ *
+ */
+class HighlightWordPipe {
+    transform(value, word, clipBy) {
+        const valueNormalized = value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+        const wordNormalized = word.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+        return highlightWords({ text: valueNormalized, query: wordNormalized, clipBy });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: HighlightWordPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: HighlightWordPipe, isStandalone: true, name: "highlightWord" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: HighlightWordPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'highlightWord',
+                    standalone: true,
+                    pure: true
+                }]
+        }] });
+
+/**
+ * Pipe that transforms a collection of strings into a corresponding icon class.
+ *
+ * This pipe uses the first element of the collection to determine the icon class
+ * based on the source name. If the collection is empty or undefined, it returns
+ * a default icon class.
+ *
+ * @deprecated This pipe is deprecated and will be removed in the future.
+ *
+ * @param collection - An array of strings representing the collection.
+ * @returns A string representing the icon class.
+ */
+class SourceIconPipe {
+    appStore = inject(AppStore);
+    transform(collection) {
+        if (collection === undefined || collection.length === 0) {
+            return 'far fa-file';
+        }
+        const name = collection[0].split('/')[1];
+        const sources = this.appStore.sources();
+        // workplace search uses a different format for sources
+        if (Array.isArray(sources)) {
+            return sources.find((source) => source.name === name)?.icon || 'far fa-file';
+        }
+        return 'far fa-file';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SourceIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: SourceIconPipe, isStandalone: true, name: "sourceIcon" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SourceIconPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sourceIcon',
+                    standalone: true,
+                    pure: true
+                }]
+        }] });
+
+class OperatorPipe {
+    transloco = inject(TranslocoService);
+    lastTransformedValue = null;
+    cdr = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    transform(filter) {
+        this.transloco.langChanges$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(locale => {
+            const transformedValue = this.transformFilter(filter, locale);
+            if (transformedValue !== this.lastTransformedValue) {
+                this.lastTransformedValue = transformedValue;
+                this.cdr.markForCheck();
+            }
+        });
+        return this.lastTransformedValue || this.transformFilter(filter);
+    }
+    transformFilter(filter, locale) {
+        let op = this.transformOperator(filter?.operator);
+        if (filter?.operator === 'between') {
+            const { start, end } = filter;
+            if (!start || !end) {
+                return 'bad date range';
+            }
+            return `&gt; ${new Intl.DateTimeFormat(locale).format(new Date(start))} &le; ${new Intl.DateTimeFormat(locale).format(new Date(end))}`;
+        }
+        if (filter?.operator === 'and') {
+            const value = filter?.display ?? filter?.value ?? '';
+            const date = new Date(value);
+            if (isNaN(date.getTime())) {
+                return value;
+            }
+            else {
+                return new Intl.DateTimeFormat(locale).format(date);
+            }
+        }
+        const date = new Date(filter?.value || '');
+        if (isNaN(date.getTime())) {
+            return `${op} ${filter?.value || ''}`;
+        }
+        else {
+            return `${op} ${new Intl.DateTimeFormat(locale).format(date)}`;
+        }
+    }
+    transformOperator(operator) {
+        switch (operator) {
+            case 'lt':
+                return '&lt;';
+            case 'lte':
+                return '&le;';
+            case 'eq':
+                return '=';
+            case 'neq':
+                return '&ne;';
+            case 'gte':
+                return '&ge;';
+            case 'gt':
+                return '&gt;';
+            default:
+                return '';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OperatorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: OperatorPipe, isStandalone: true, name: "operator", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OperatorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'operator',
+                    standalone: true,
+                    pure: false
+                }]
+        }] });
+
+/**
+ * The `SyslangPipe` class is a custom pipe that transforms a string value using the current language.
+ * This pipe is used to translate strings that are not part of the Angular i18n system.
+ * This pipe exists to keep the compatibility with a legacy system that uses a custom language syntax.
+ *
+ * This pipe can be used in the following way:
+ *
+ * @example
+ * <div>{{ 'Hello[fr]Bonjour' | syslang }}</div>
+ * // output: `Bonjour` if your current language is 'fr'
+ * // output: `Hello` if your current language is not 'fr'
+ *
+ * <div>{{ 'Hello[fr]Bonjour' | syslang: 'fr' }}</div>
+ * // output: `Bonjour` even if your current language is not 'fr'
+ */
+class SyslangPipe {
+    transloco = inject(TranslocoService);
+    cdr = inject(ChangeDetectorRef);
+    lastValue = null;
+    currentLang;
+    subscription = null;
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+        this.subscription = null;
+    }
+    constructor() {
+        this.currentLang = this.transloco.getActiveLang();
+        this.subscription = this.transloco.langChanges$.subscribe(locale => (this.currentLang = locale));
+    }
+    /**
+     * Transforms the input value using the current language.
+     * @param value The input string value to be transformed.
+     * @returns The transformed string value.
+     */
+    transform(value, lang) {
+        const transformedValue = sysLang(value || '', lang || this.currentLang);
+        if (transformedValue !== this.lastValue) {
+            this.lastValue = transformedValue;
+            this.cdr.markForCheck();
+        }
+        return this.lastValue;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SyslangPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: SyslangPipe, isStandalone: true, name: "syslang", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SyslangPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'syslang',
+                    standalone: true,
+                    pure: false
+                }]
+        }], ctorParameters: () => [] });
+
+class TranslocoDateImpurePipe extends DatePipe {
+    transloco = inject(TranslocoService);
+    cdr = inject(ChangeDetectorRef);
+    lastTransformedValue = null;
+    subscription = null;
+    constructor(locale, defaultTimezone, defaultOptions) {
+        super(locale, defaultTimezone, defaultOptions);
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+        this.subscription = null;
+    }
+    transform(value, format, timezone) {
+        this.subscription?.unsubscribe();
+        this.subscription = this.transloco.langChanges$.subscribe(locale => {
+            const transformedValue = super.transform(value, format, timezone, locale);
+            if (transformedValue !== this.lastTransformedValue) {
+                this.lastTransformedValue = transformedValue;
+                this.cdr.markForCheck();
+            }
+        });
+        return this.lastTransformedValue;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TranslocoDateImpurePipe, deps: [{ token: LOCALE_ID }, { token: DATE_PIPE_DEFAULT_TIMEZONE, optional: true }, { token: DATE_PIPE_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: TranslocoDateImpurePipe, isStandalone: true, name: "translocoDate", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TranslocoDateImpurePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'translocoDate',
+                    pure: false,
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATE_PIPE_DEFAULT_TIMEZONE]
+                }, {
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATE_PIPE_DEFAULT_OPTIONS]
+                }, {
+                    type: Optional
+                }] }] });
+
+class FileSizePipe {
+    transform(value) {
+        return this.formatMemorySize(value);
+    }
+    /**
+     * Formats a given size in bytes into a more readable format.
+     * It converts the size into kilobytes, megabytes, gigabytes, terabytes, or petabytes as appropriate.
+     *
+     * @param size - The size in bytes to be formatted.
+     * @returns An object containing the key representing the unit and the value in that unit.
+     *
+     * @example
+     * In a component template:
+     * {{ 1048576 | fileSize | json }}
+     * Output: { "key": "memorySize.mb", "value": 1 }
+     */
+    formatMemorySize(size) {
+        const kiloBytes = size / 1024;
+        const megaBytes = kiloBytes / 1024;
+        const gigaBytes = megaBytes / 1024;
+        const teraBytes = gigaBytes / 1024;
+        const petaBytes = teraBytes / 1024;
+        const obj = { key: 'memorySize.bytes', value: size };
+        if (Math.abs(petaBytes) >= 1) {
+            obj.key = 'memorySize.pb';
+            obj.value = petaBytes;
+        }
+        else if (Math.abs(teraBytes) >= 1) {
+            obj.key = 'memorySize.tb';
+            obj.value = teraBytes;
+        }
+        else if (Math.abs(gigaBytes) >= 1) {
+            obj.key = 'memorySize.gb';
+            obj.value = gigaBytes;
+        }
+        else if (Math.abs(megaBytes) >= 1) {
+            obj.key = 'memorySize.mb';
+            obj.value = megaBytes;
+        }
+        else if (Math.abs(kiloBytes) >= 1) {
+            obj.key = 'memorySize.kb';
+            obj.value = kiloBytes;
+        }
+        return obj;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FileSizePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'fileSize'
+                }]
+        }] });
+
 class MetadataComponent {
     click = output();
     class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    decoration = input('outline', ...(ngDevMode ? [{ debugName: "decoration" }] : []));
+    hover = input('yes', ...(ngDevMode ? [{ debugName: "hover" }] : []));
     metadata = input.required(...(ngDevMode ? [{ debugName: "metadata" }] : []));
     article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
     limit = input(undefined, ...(ngDevMode ? [{ debugName: "limit", transform: (value) => (value ? Math.max(0, Number(value)) : undefined) }] : [{ transform: (value) => (value ? Math.max(0, Number(value)) : undefined) }]));
@@ -4256,21 +4589,37 @@ class MetadataComponent {
     handleClick(event, item) {
         this.click.emit({ filter: item, event });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: MetadataComponent, isStandalone: true, selector: "Metadata, metadata", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, host: { properties: { "class.hidden": "items().length === 0" } }, exportAs: ["metadata"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MetadataComponent, isStandalone: true, selector: "Metadata, metadata", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, decoration: { classPropertyName: "decoration", publicName: "decoration", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null }, limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, host: { properties: { "class.hidden": "items().length === 0" } }, exportAs: ["metadata"], ngImport: i0, template: `
     @for (item of items().slice(0, limit()); track $index) {
       @if (item) {
-        <badge [variant]="variant()" [class]="class()" (click)="handleClick($event, { field: this.metadata(), value: item })">{{ item }}</badge>
+        <badge
+          [variant]="variant()"
+          [decoration]="decoration()"
+          [hover]="hover()"
+          size="xs"
+          [class]="class()"
+          (click)="handleClick($event, { field: this.metadata(), value: item })">
+          {{ item | syslang }}
+        </badge>
       }
     }
-  `, isInline: true, styles: [":host{display:contents}:host,:host:hover{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }] });
+  `, isInline: true, styles: [":host{display:contents}:host,:host:hover{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size", "decoration", "hover"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MetadataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MetadataComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Metadata, metadata', exportAs: 'metadata', standalone: true, imports: [BadgeComponent], template: `
+            args: [{ selector: 'Metadata, metadata', exportAs: 'metadata', standalone: true, imports: [SyslangPipe, BadgeComponent], template: `
     @for (item of items().slice(0, limit()); track $index) {
       @if (item) {
-        <badge [variant]="variant()" [class]="class()" (click)="handleClick($event, { field: this.metadata(), value: item })">{{ item }}</badge>
+        <badge
+          [variant]="variant()"
+          [decoration]="decoration()"
+          [hover]="hover()"
+          size="xs"
+          [class]="class()"
+          (click)="handleClick($event, { field: this.metadata(), value: item })">
+          {{ item | syslang }}
+        </badge>
       }
     }
   `, host: {
@@ -4294,10 +4643,10 @@ class MissingTermsComponent {
             };
         });
     }, ...(ngDevMode ? [{ debugName: "missingTerms" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MissingTermsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: MissingTermsComponent, isStandalone: true, selector: "missing-terms, MissingTerms, missingterms", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideTranslocoScope('article')], ngImport: i0, template: "@if ((missingTerms() || []).length > 0) {\n  <span class=\"terms-label\">{{ 'article.missingTerms' | transloco }}</span>\n  <span class=\"terms\">\n    @for (term of missingTerms(); track $index) {\n      <span class=\"term ms-1\">{{ term.value }}</span>\n    }\n  </span>\n  <span class=\"mx-1\">|</span>\n  <span class=\"terms-label ms-1\">{{ 'article.mustInclude' | transloco }}</span>\n  <span class=\"terms\">\n    @for (term of missingTerms(); track $index) {\n      <a role=\"button\" class=\"ms-1\" routerLink=\"search\" [queryParams]=\"term.queryParams\" (click)=\"$event.stopPropagation()\">{{ term.value }}</a>\n    }\n  </span>\n}\n", styles: [".term{text-decoration-line:line-through}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MissingTermsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MissingTermsComponent, isStandalone: true, selector: "missing-terms, MissingTerms, missingterms", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideTranslocoScope('article')], ngImport: i0, template: "@if ((missingTerms() || []).length > 0) {\n  <span class=\"terms-label\">{{ 'article.missingTerms' | transloco }}</span>\n  <span class=\"terms\">\n    @for (term of missingTerms(); track $index) {\n      <span class=\"term ms-1\">{{ term.value }}</span>\n    }\n  </span>\n  <span class=\"mx-1\">|</span>\n  <span class=\"terms-label ms-1\">{{ 'article.mustInclude' | transloco }}</span>\n  <span class=\"terms\">\n    @for (term of missingTerms(); track $index) {\n      <a role=\"button\" class=\"ms-1\" routerLink=\"search\" [queryParams]=\"term.queryParams\" (click)=\"$event.stopPropagation()\">{{ term.value }}</a>\n    }\n  </span>\n}\n", styles: [".term{text-decoration-line:line-through}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MissingTermsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MissingTermsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'missing-terms, MissingTerms, missingterms', standalone: true, imports: [TranslocoPipe, RouterLink], providers: [provideTranslocoScope('article')], template: "@if ((missingTerms() || []).length > 0) {\n  <span class=\"terms-label\">{{ 'article.missingTerms' | transloco }}</span>\n  <span class=\"terms\">\n    @for (term of missingTerms(); track $index) {\n      <span class=\"term ms-1\">{{ term.value }}</span>\n    }\n  </span>\n  <span class=\"mx-1\">|</span>\n  <span class=\"terms-label ms-1\">{{ 'article.mustInclude' | transloco }}</span>\n  <span class=\"terms\">\n    @for (term of missingTerms(); track $index) {\n      <a role=\"button\" class=\"ms-1\" routerLink=\"search\" [queryParams]=\"term.queryParams\" (click)=\"$event.stopPropagation()\">{{ term.value }}</a>\n    }\n  </span>\n}\n", styles: [".term{text-decoration-line:line-through}\n"] }]
         }] });
@@ -4392,8 +4741,8 @@ class CollectionsDialog {
         this.newCollectionName.set('');
         this.creating.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: CollectionsDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: CollectionsDialog, isStandalone: true, selector: "add-to-collection-dialog", outputs: { closed: "closed" }, providers: [provideTranslocoScope('collections')], viewQueries: [{ propertyName: "createInputElement", first: true, predicate: ["createInput"], descendants: true, isSignal: true }, { propertyName: "dialogElement", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CollectionsDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CollectionsDialog, isStandalone: true, selector: "add-to-collection-dialog", outputs: { closed: "closed" }, providers: [provideTranslocoScope('collections')], viewQueries: [{ propertyName: "createInputElement", first: true, predicate: ["createInput"], descendants: true, isSignal: true }, { propertyName: "dialogElement", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <dialog #dialog (closed)="closeBtn.click()">
       <DialogHeader>
         <DialogTitle>{{ 'collections.addToCollection' | transloco }}</DialogTitle>
@@ -4438,7 +4787,7 @@ class CollectionsDialog {
       <DialogFooter class="flex flex-col">
         <div class="flex w-full gap-1">
           <button
-            variant="outline"
+            decoration="outline"
             class="grow"
             tabindex="0"
             [attr.title]="(creating() ? 'collections.cancelCreation' : 'collections.createCollection') | transloco"
@@ -4446,19 +4795,25 @@ class CollectionsDialog {
             {{ (creating() ? 'collections.cancelCreation' : 'collections.createCollection') | transloco }}
           </button>
           @if (creating()) {
-            <button class="grow" tabindex="0" [attr.title]="'collections.create' | transloco" [disabled]="!newCollectionName()" (click)="createCollection()">
+            <button
+              variant="primary"
+              class="grow"
+              tabindex="0"
+              [attr.title]="'collections.create' | transloco"
+              [disabled]="!newCollectionName()"
+              (click)="createCollection()">
               {{ 'collections.create' | transloco }}
             </button>
           }
         </div>
-        <button #closeBtn (click)="onClose($event)" class="self-end">
+        <button variant="primary" #closeBtn (click)="onClose($event)" class="self-end">
           {{ 'collections.close' | transloco }}
         </button>
       </DialogFooter>
     </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", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog", inputs: ["class"], outputs: ["closed"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"password\"], input[type=\"number\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant"] }, { 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", inputs: ["class", "variant"], outputs: ["closed"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: CollectionsDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CollectionsDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'add-to-collection-dialog',
@@ -4521,7 +4876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
       <DialogFooter class="flex flex-col">
         <div class="flex w-full gap-1">
           <button
-            variant="outline"
+            decoration="outline"
             class="grow"
             tabindex="0"
             [attr.title]="(creating() ? 'collections.cancelCreation' : 'collections.createCollection') | transloco"
@@ -4529,12 +4884,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
             {{ (creating() ? 'collections.cancelCreation' : 'collections.createCollection') | transloco }}
           </button>
           @if (creating()) {
-            <button class="grow" tabindex="0" [attr.title]="'collections.create' | transloco" [disabled]="!newCollectionName()" (click)="createCollection()">
+            <button
+              variant="primary"
+              class="grow"
+              tabindex="0"
+              [attr.title]="'collections.create' | transloco"
+              [disabled]="!newCollectionName()"
+              (click)="createCollection()">
               {{ 'collections.create' | transloco }}
             </button>
           }
         </div>
-        <button #closeBtn (click)="onClose($event)" class="self-end">
+        <button variant="primary" #closeBtn (click)="onClose($event)" class="self-end">
           {{ 'collections.close' | transloco }}
         </button>
       </DialogFooter>
@@ -4636,10 +4997,10 @@ class ExportService {
             responseType: 'blob'
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ExportService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ExportService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ExportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ExportService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4707,15 +5068,15 @@ class ExportDialog {
             this.maxCount.set(1);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ExportDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: ExportDialog, isStandalone: true, selector: "export-dialog", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, maxCount: { classPropertyName: "maxCount", publicName: "maxCount", isSignal: true, isRequired: false, transformFunction: null }, columnsToExport: { classPropertyName: "columnsToExport", publicName: "columnsToExport", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onExport: "onExport", format: "formatChange", maxCount: "maxCountChange", columnsToExport: "columnsToExportChange" }, providers: [provideTranslocoScope('export')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ExportDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: ExportDialog, isStandalone: true, selector: "export-dialog", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, maxCount: { classPropertyName: "maxCount", publicName: "maxCount", isSignal: true, isRequired: false, transformFunction: null }, columnsToExport: { classPropertyName: "columnsToExport", publicName: "columnsToExport", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onExport: "onExport", format: "formatChange", maxCount: "maxCountChange", columnsToExport: "columnsToExportChange" }, providers: [provideTranslocoScope('export')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <dialog #dialog>
       <DialogHeader>
         <DialogTitle>{{ 'export.title' | transloco }}</DialogTitle>
       </DialogHeader>
 
       <DialogContent
-        class="flex flex-col gap-4 [&_section>h1]:text-sm [&_section>h1]:font-semibold [&_section>h1]:text-gray-500 [&_section]:flex [&_section]:flex-col [&_section]:gap-2">
+        class="[&_section>h1]:text-muted-foreground flex flex-col gap-4 [&_section>h1]:text-sm [&_section>h1]:font-semibold [&_section]:flex [&_section]:flex-col [&_section]:gap-2">
         <section>
           <h1>{{ 'export.from' | transloco }}</h1>
           <div class="flex items-center gap-2">
@@ -4732,7 +5093,7 @@ class ExportDialog {
         <section>
           <h1>{{ 'export.outputFormat' | transloco }}</h1>
           <select
-            class="hover:outline-primary focus:outline-primary h-8 w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white focus:outline"
+            class="hover:outline-primary focus:outline-primary border-foreground/18 h-8 w-full rounded-md border px-2 hover:outline focus:outline"
             id="format"
             [(ngModel)]="format">
             @for (format of supportedFormats; track $index) {
@@ -4745,7 +5106,7 @@ class ExportDialog {
           <h1>{{ 'export.exportColumns' | transloco }}</h1>
           <select
             id="exportedColumns"
-            class="hover:outline-primary focus:outline-primary w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white focus:outline"
+            class="hover:outline-primary focus:outline-primary border-foreground/18 w-full rounded-md border px-2 hover:outline focus:outline"
             multiple
             [(ngModel)]="columnsToExport">
             @for (column of exportableColumns(); track $index) {
@@ -4762,14 +5123,14 @@ class ExportDialog {
             min="1"
             autocomplete="off"
             spellcheck="off"
-            class="hover:outline-primary focus:outline-primary h-8 w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white focus:outline"
+            class="hover:outline-primary focus:outline-primary border-foreground/18 h-8 w-full rounded-md border px-2 hover:outline focus:outline"
             [(ngModel)]="maxCount"
             (input)="onMaxCountInput($event)" />
         </section>
       </DialogContent>
 
       <DialogFooter>
-        <button variant="outline" (click)="dialog.close($event)">
+        <button decoration="outline" (click)="dialog.close($event)">
           {{ 'cancel' | transloco }}
         </button>
         <button tabindex="0" [attr.title]="'export.download' | transloco" (click)="onDownload($event)">
@@ -4777,9 +5138,9 @@ class ExportDialog {
         </button>
       </DialogFooter>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog", inputs: ["class"], outputs: ["closed"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { kind: "component", type: SwitchComponent, selector: "switch, Switch", inputs: ["toggled", "disabled", "className", "size"], outputs: ["toggledChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog", inputs: ["class", "variant"], outputs: ["closed"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { kind: "component", type: SwitchComponent, selector: "switch, Switch", inputs: ["toggled", "disabled", "className", "variant", "size"], outputs: ["toggledChange"] }, { kind: "directive", type: SelectOptionDirective, selector: "option", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ExportDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ExportDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'export-dialog',
@@ -4793,7 +5154,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                         DialogTitleComponent,
                         DialogContentComponent,
                         DialogFooterComponent,
-                        SwitchComponent
+                        SwitchComponent,
+                        SelectOptionDirective
                     ],
                     providers: [provideTranslocoScope('export')],
                     template: `
@@ -4803,7 +5165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
       </DialogHeader>
 
       <DialogContent
-        class="flex flex-col gap-4 [&_section>h1]:text-sm [&_section>h1]:font-semibold [&_section>h1]:text-gray-500 [&_section]:flex [&_section]:flex-col [&_section]:gap-2">
+        class="[&_section>h1]:text-muted-foreground flex flex-col gap-4 [&_section>h1]:text-sm [&_section>h1]:font-semibold [&_section]:flex [&_section]:flex-col [&_section]:gap-2">
         <section>
           <h1>{{ 'export.from' | transloco }}</h1>
           <div class="flex items-center gap-2">
@@ -4820,7 +5182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
         <section>
           <h1>{{ 'export.outputFormat' | transloco }}</h1>
           <select
-            class="hover:outline-primary focus:outline-primary h-8 w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white focus:outline"
+            class="hover:outline-primary focus:outline-primary border-foreground/18 h-8 w-full rounded-md border px-2 hover:outline focus:outline"
             id="format"
             [(ngModel)]="format">
             @for (format of supportedFormats; track $index) {
@@ -4833,7 +5195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
           <h1>{{ 'export.exportColumns' | transloco }}</h1>
           <select
             id="exportedColumns"
-            class="hover:outline-primary focus:outline-primary w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white focus:outline"
+            class="hover:outline-primary focus:outline-primary border-foreground/18 w-full rounded-md border px-2 hover:outline focus:outline"
             multiple
             [(ngModel)]="columnsToExport">
             @for (column of exportableColumns(); track $index) {
@@ -4850,14 +5212,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
             min="1"
             autocomplete="off"
             spellcheck="off"
-            class="hover:outline-primary focus:outline-primary h-8 w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white focus:outline"
+            class="hover:outline-primary focus:outline-primary border-foreground/18 h-8 w-full rounded-md border px-2 hover:outline focus:outline"
             [(ngModel)]="maxCount"
             (input)="onMaxCountInput($event)" />
         </section>
       </DialogContent>
 
       <DialogFooter>
-        <button variant="outline" (click)="dialog.close($event)">
+        <button decoration="outline" (click)="dialog.close($event)">
           {{ 'cancel' | transloco }}
         </button>
         <button tabindex="0" [attr.title]="'export.download' | transloco" (click)="onDownload($event)">
@@ -4905,8 +5267,8 @@ class MultiSelectionToolbarComponent {
     openCollectionDialog = () => this.dialog.open(CollectionsDialog, getState(this.selection).multiSelection);
     openExportDialog = () => this.dialog.open(ExportDialog, this.ids());
     attachToAssistant = () => this.selection.update({ assistantIdsToAttach: this.ids() });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MultiSelectionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: MultiSelectionToolbarComponent, isStandalone: true, selector: "MultiSelectionToolbar, multi-selection-toolbar", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.opacity-100": "count() > 0", "class.-translate-y-14": "count() > 0" }, classAttribute: "fixed bottom-[-40px] left-[50%] translate-x-[-50%] z-50 transition-[translate,opacity,discrete] duration-300 opacity-0" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MultiSelectionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MultiSelectionToolbarComponent, isStandalone: true, selector: "MultiSelectionToolbar, multi-selection-toolbar", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.opacity-100": "count() > 0", "class.-translate-y-14": "count() > 0" }, classAttribute: "fixed bottom-[-40px] left-[50%] translate-x-[-50%] z-50 transition-[translate,opacity,discrete] duration-300 opacity-0" }, ngImport: i0, template: `
     <menu id="multi-select-toolbar" [class]="cn(variants(), className())">
       <li class="!ps-0">
         {{ count() }} items selected
@@ -4940,7 +5302,7 @@ class MultiSelectionToolbarComponent {
     </menu>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MultiSelectionToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MultiSelectionToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'MultiSelectionToolbar, multi-selection-toolbar',
@@ -5019,10 +5381,10 @@ class InfinityScrollDirective {
     ngOnDestroy() {
         this.observer.disconnect();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: InfinityScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", type: InfinityScrollDirective, isStandalone: true, selector: "[infinity-scroll]", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: InfinityScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: InfinityScrollDirective, isStandalone: true, selector: "[infinity-scroll]", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: InfinityScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: InfinityScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -5326,10 +5688,10 @@ class KeyboardNavigatorDirective {
         this.renderer.setAttribute(this.listboxElement(), 'aria-hidden', 'true');
         this.ariaExpanded.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: KeyboardNavigatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", type: KeyboardNavigatorDirective, isStandalone: true, selector: "input[role=\"combobox\"]", inputs: { keyboardNavigator: { classPropertyName: "keyboardNavigator", publicName: "keyboardNavigator", isSignal: true, isRequired: false, transformFunction: null }, listboxId: { classPropertyName: "listboxId", publicName: "aria-controls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onSelected: "onSelected" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown.arrowup": "up()", "keydown.arrowdown": "down()", "keydown.arrowleft": "left()", "keydown.arrowright": "right()", "keydown.home": "home()", "keydown.end": "end()", "keydown.pageup": "pageUp()", "keydown.pagedown": "pageDown()", "keydown.enter": "enter()", "keydown.escape": "escape()" }, properties: { "attr.aria-expanded": "ariaExpanded()", "attr.aria-activedescendant": "activeDescendant()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardNavigatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: KeyboardNavigatorDirective, isStandalone: true, selector: "input[role=\"combobox\"]", inputs: { keyboardNavigator: { classPropertyName: "keyboardNavigator", publicName: "keyboardNavigator", isSignal: true, isRequired: false, transformFunction: null }, listboxId: { classPropertyName: "listboxId", publicName: "aria-controls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onSelected: "onSelected" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown.arrowup": "up()", "keydown.arrowdown": "down()", "keydown.arrowleft": "left()", "keydown.arrowright": "right()", "keydown.home": "home()", "keydown.end": "end()", "keydown.pageup": "pageUp()", "keydown.pagedown": "pageDown()", "keydown.enter": "enter()", "keydown.escape": "escape()" }, properties: { "attr.aria-expanded": "ariaExpanded()", "attr.aria-activedescendant": "activeDescendant()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: KeyboardNavigatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardNavigatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[role="combobox"]',
@@ -5364,10 +5726,10 @@ class OpenArticleOnCtrlEnterDirective {
             return;
         this.previewService.openExternal(this.article());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OpenArticleOnCtrlEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", type: OpenArticleOnCtrlEnterDirective, isStandalone: true, selector: "[appOpenArticleOnCtrlEnter],[openArticleOnCtrlEnter]", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.control.Enter": "onCtrlEnter()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OpenArticleOnCtrlEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: OpenArticleOnCtrlEnterDirective, isStandalone: true, selector: "[appOpenArticleOnCtrlEnter],[openArticleOnCtrlEnter]", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown.control.Enter": "onCtrlEnter()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OpenArticleOnCtrlEnterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OpenArticleOnCtrlEnterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appOpenArticleOnCtrlEnter],[openArticleOnCtrlEnter]',
@@ -5383,10 +5745,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
  * overflow manager.
  */
 class OverflowItemDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OverflowItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: OverflowItemDirective, isStandalone: true, selector: "[overflowItem]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OverflowItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: OverflowItemDirective, isStandalone: true, selector: "[overflowItem]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OverflowItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OverflowItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[overflowItem]',
@@ -5398,10 +5760,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
  * for the overflow manager.
  */
 class OverflowStopDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OverflowStopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: OverflowStopDirective, isStandalone: true, selector: "[overflowStop]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OverflowStopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: OverflowStopDirective, isStandalone: true, selector: "[overflowStop]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OverflowStopDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OverflowStopDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[overflowStop]',
@@ -5511,10 +5873,10 @@ class OverflowManagerDirective {
             item.nativeElement.style.visibility = state;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OverflowManagerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.1.2", type: OverflowManagerDirective, isStandalone: true, selector: "[overflowManager]", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { count: "count" }, queries: [{ propertyName: "items", predicate: OverflowItemDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "stop", first: true, predicate: OverflowStopDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OverflowManagerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.1.7", type: OverflowManagerDirective, isStandalone: true, selector: "[overflowManager]", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { count: "count" }, queries: [{ propertyName: "items", predicate: OverflowItemDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "stop", first: true, predicate: OverflowStopDirective, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OverflowManagerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OverflowManagerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[overflowManager]',
@@ -5656,10 +6018,10 @@ class DrawerStackService {
         this.openAssistant();
         this.askAI$.next(text);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerStackService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerStackService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerStackService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerStackService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -5691,13 +6053,13 @@ class SelectArticleOnClickDirective {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SelectArticleOnClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", type: SelectArticleOnClickDirective, isStandalone: true, selector: "[appSelectArticleOnClick],[selectArticleOnClick]", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.enter": "onEnter($event)", "click": "onClick()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SelectArticleOnClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: SelectArticleOnClickDirective, isStandalone: true, selector: "[selectArticleOnClick]", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null }, strategy: { classPropertyName: "strategy", publicName: "strategy", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.enter": "onEnter($event)", "click": "onClick()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SelectArticleOnClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SelectArticleOnClickDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appSelectArticleOnClick],[selectArticleOnClick]',
+                    selector: '[selectArticleOnClick]',
                     standalone: true,
                     host: {
                         '(keydown.enter)': 'onEnter($event)'
@@ -5743,10 +6105,10 @@ class ShowBookmarkDirective {
             this.showBookmark.emit(bookmarkHovered || isBookmarked);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ShowBookmarkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", type: ShowBookmarkDirective, isStandalone: true, selector: "[showBookmark]", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { showBookmark: "showBookmark" }, host: { listeners: { "mouseenter": "mouseEnter()", "mouseleave": "mouseLeave()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ShowBookmarkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: ShowBookmarkDirective, isStandalone: true, selector: "[showBookmark]", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { showBookmark: "showBookmark" }, host: { listeners: { "mouseenter": "mouseEnter()", "mouseleave": "mouseLeave()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ShowBookmarkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ShowBookmarkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[showBookmark]',
@@ -5777,10 +6139,10 @@ class ThemeProviderDirective {
                 applyThemeToNativeElement(this.host.nativeElement, vars);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ThemeProviderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.2", type: ThemeProviderDirective, isStandalone: true, selector: "[themeProvider]", inputs: { themeProvider: { classPropertyName: "themeProvider", publicName: "themeProvider", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ThemeProviderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: ThemeProviderDirective, isStandalone: true, selector: "[themeProvider]", inputs: { themeProvider: { classPropertyName: "themeProvider", publicName: "themeProvider", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ThemeProviderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ThemeProviderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[themeProvider]',
@@ -5804,266 +6166,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
  */
 class ChildMarkerDirective {
     template = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ChildMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.2", type: ChildMarkerDirective, isStandalone: true, selector: "[childMarker]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ChildMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: ChildMarkerDirective, isStandalone: true, selector: "[childMarker]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ChildMarkerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ChildMarkerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[childMarker]'
                 }]
         }] });
 
-/**
- * The HighlightWordPipe class is a custom pipe in the Atomic Angular library.
- * It is used to highlight a specific word within a given text.
- *
- * @remarks
- * This pipe takes in a `value` string, a `word` string to highlight, and an optional `clipBy` number to limit the length of the highlighted text.
- * It returns an array of `HighlightWords.Chunk` objects representing the highlighted portions of the text.
- *
- * @example
- * ```html
- * <div [innerHTML]="text | highlightWord:'search':10"></div>
- * ```
- *
- */
-class HighlightWordPipe {
-    transform(value, word, clipBy) {
-        const valueNormalized = value.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-        const wordNormalized = word.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-        return highlightWords({ text: valueNormalized, query: wordNormalized, clipBy });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: HighlightWordPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: HighlightWordPipe, isStandalone: true, name: "highlightWord" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: HighlightWordPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'highlightWord',
-                    standalone: true,
-                    pure: true
-                }]
-        }] });
-
-/**
- * Pipe that transforms a collection of strings into a corresponding icon class.
- *
- * This pipe uses the first element of the collection to determine the icon class
- * based on the source name. If the collection is empty or undefined, it returns
- * a default icon class.
- *
- * @deprecated This pipe is deprecated and will be removed in the future.
- *
- * @param collection - An array of strings representing the collection.
- * @returns A string representing the icon class.
- */
-class SourceIconPipe {
-    appStore = inject(AppStore);
-    transform(collection) {
-        if (collection === undefined || collection.length === 0) {
-            return 'far fa-file';
-        }
-        const name = collection[0].split('/')[1];
-        const sources = this.appStore.sources();
-        // workplace search uses a different format for sources
-        if (Array.isArray(sources)) {
-            return sources.find((source) => source.name === name)?.icon || 'far fa-file';
-        }
-        return 'far fa-file';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SourceIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: SourceIconPipe, isStandalone: true, name: "sourceIcon" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SourceIconPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'sourceIcon',
-                    standalone: true,
-                    pure: true
-                }]
-        }] });
-
-class OperatorPipe {
-    transloco = inject(TranslocoService);
-    lastTransformedValue = null;
-    cdr = inject(ChangeDetectorRef);
-    destroyRef = inject(DestroyRef);
-    transform(filter) {
-        this.transloco.langChanges$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(locale => {
-            const transformedValue = this.transformFilter(filter, locale);
-            if (transformedValue !== this.lastTransformedValue) {
-                this.lastTransformedValue = transformedValue;
-                this.cdr.markForCheck();
-            }
-        });
-        return this.lastTransformedValue || this.transformFilter(filter);
-    }
-    transformFilter(filter, locale) {
-        let op = this.transformOperator(filter?.operator);
-        if (filter?.operator === 'between') {
-            const { start, end } = filter;
-            if (!start || !end) {
-                return 'bad date range';
-            }
-            return `&gt; ${new Intl.DateTimeFormat(locale).format(new Date(start))} &le; ${new Intl.DateTimeFormat(locale).format(new Date(end))}`;
-        }
-        if (filter?.operator === 'and') {
-            const value = filter?.display ?? filter?.value ?? '';
-            const date = new Date(value);
-            if (isNaN(date.getTime())) {
-                return value;
-            }
-            else {
-                return new Intl.DateTimeFormat(locale).format(date);
-            }
-        }
-        const date = new Date(filter?.value || '');
-        if (isNaN(date.getTime())) {
-            return `${op} ${filter?.value || ''}`;
-        }
-        else {
-            return `${op} ${new Intl.DateTimeFormat(locale).format(date)}`;
-        }
-    }
-    transformOperator(operator) {
-        switch (operator) {
-            case 'lt':
-                return '&lt;';
-            case 'lte':
-                return '&le;';
-            case 'eq':
-                return '=';
-            case 'neq':
-                return '&ne;';
-            case 'gte':
-                return '&ge;';
-            case 'gt':
-                return '&gt;';
-            default:
-                return '';
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OperatorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: OperatorPipe, isStandalone: true, name: "operator", pure: false });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OperatorPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'operator',
-                    standalone: true,
-                    pure: false
-                }]
-        }] });
-
-/**
- * The `SyslangPipe` class is a custom pipe that transforms a string value using the current language.
- * This pipe is used to translate strings that are not part of the Angular i18n system.
- * This pipe exists to keep the compatibility with a legacy system that uses a custom language syntax.
- *
- * This pipe can be used in the following way:
- *
- * @example
- * <div>{{ 'Hello[fr]Bonjour' | syslang }}</div>
- * // output: `Bonjour` if your current language is 'fr'
- * // output: `Hello` if your current language is not 'fr'
- *
- * <div>{{ 'Hello[fr]Bonjour' | syslang: 'fr' }}</div>
- * // output: `Bonjour` even if your current language is not 'fr'
- */
-class SyslangPipe {
-    transloco = inject(TranslocoService);
-    cdr = inject(ChangeDetectorRef);
-    lastValue = null;
-    currentLang;
-    subscription = null;
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
-        this.subscription = null;
-    }
-    constructor() {
-        this.currentLang = this.transloco.getActiveLang();
-        this.subscription = this.transloco.langChanges$.subscribe(locale => (this.currentLang = locale));
-    }
-    /**
-     * Transforms the input value using the current language.
-     * @param value The input string value to be transformed.
-     * @returns The transformed string value.
-     */
-    transform(value, lang) {
-        const transformedValue = sysLang(value || '', lang || this.currentLang);
-        if (transformedValue !== this.lastValue) {
-            this.lastValue = transformedValue;
-            this.cdr.markForCheck();
-        }
-        return this.lastValue;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SyslangPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: SyslangPipe, isStandalone: true, name: "syslang", pure: false });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SyslangPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'syslang',
-                    standalone: true,
-                    pure: false
-                }]
-        }], ctorParameters: () => [] });
-
-class TranslocoDateImpurePipe extends DatePipe {
-    transloco = inject(TranslocoService);
-    cdr = inject(ChangeDetectorRef);
-    lastTransformedValue = null;
-    subscription = null;
-    constructor(locale, defaultTimezone, defaultOptions) {
-        super(locale, defaultTimezone, defaultOptions);
-    }
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
-        this.subscription = null;
-    }
-    transform(value, format, timezone) {
-        this.subscription?.unsubscribe();
-        this.subscription = this.transloco.langChanges$.subscribe(locale => {
-            const transformedValue = super.transform(value, format, timezone, locale);
-            if (transformedValue !== this.lastTransformedValue) {
-                this.lastTransformedValue = transformedValue;
-                this.cdr.markForCheck();
-            }
-        });
-        return this.lastTransformedValue;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TranslocoDateImpurePipe, deps: [{ token: LOCALE_ID }, { token: DATE_PIPE_DEFAULT_TIMEZONE, optional: true }, { token: DATE_PIPE_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.2", ngImport: i0, type: TranslocoDateImpurePipe, isStandalone: true, name: "translocoDate", pure: false });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TranslocoDateImpurePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'translocoDate',
-                    pure: false,
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DATE_PIPE_DEFAULT_TIMEZONE]
-                }, {
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DATE_PIPE_DEFAULT_OPTIONS]
-                }, {
-                    type: Optional
-                }] }] });
-
 class NavbarTabsComponent {
     router = inject(Router);
     route = inject(ActivatedRoute);
     drawerStack = inject(DrawerStackService);
     drawerOpened = signal(false, ...(ngDevMode ? [{ debugName: "drawerOpened" }] : []));
     queryParamsStore = inject(QueryParamsStore);
+    // Injecting the QueryService to access last search results
+    queryService = inject(QueryService);
+    /**
+     * Determines whether the count should be displayed in the navbar tabs component.
+     * This value is provided as an input property.
+     *
+     * @remarks
+     * This works only if tabSearch is enabled in the administration panel.
+     */
+    showCount = input(false, ...(ngDevMode ? [{ debugName: "showCount" }] : []));
     searchText = computed(() => {
         const state = getState(this.queryParamsStore);
         return state.text || '';
@@ -6078,17 +6206,21 @@ class NavbarTabsComponent {
         return childPath || 'all';
     }, ...(ngDevMode ? [{ debugName: "currentPath" }] : []));
     // create tabs from the search routes
-    tabs = computed(() => this.router.config
-        .find(item => item.path === 'search')
-        ?.children?.filter(c => c.path !== '**')
-        .map(child => ({
-        display: child.data?.['display'] || child.path,
-        wsQueryTab: child.data?.['wsQueryTab'] || child.path,
-        path: child.path,
-        routerLink: `/search/${child.path}`,
-        icon: child.data?.['icon'],
-        queryName: child.data?.['queryName']
-    })) ?? [], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    tabs = computed(() => {
+        const r = this.router.config
+            .find(item => item.path === 'search')
+            ?.children?.filter(c => c.path !== '**')
+            .map(child => ({
+            display: child.data?.['display'] || child.path,
+            wsQueryTab: child.data?.['wsQueryTab'] || child.path,
+            path: child.path,
+            routerLink: `/search/${child.path}`,
+            icon: child.data?.['icon'],
+            queryName: child.data?.['queryName'],
+            count: this.showCount() ? this.queryService.result?.tabs?.find(tab => tab.name === (child.data?.['wsQueryTab'] || child.path))?.count : undefined
+        })) ?? [];
+        return r;
+    }, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
     moreTabs = computed(() => this.tabs().slice(this.visibleTabCount()), ...(ngDevMode ? [{ debugName: "moreTabs" }] : []));
     changeTab(tab) {
         // we use the routerlink to navigate, so just close the drawer and remove the id parameter from the query params
@@ -6097,15 +6229,15 @@ class NavbarTabsComponent {
     constructor() {
         this.drawerStack.isOpened.pipe(takeUntilDestroyed()).subscribe(state => this.drawerOpened.set(state));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NavbarTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: NavbarTabsComponent, isStandalone: true, selector: "navbar-tabs", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NavbarTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: NavbarTabsComponent, isStandalone: true, selector: "navbar-tabs", inputs: { showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <!-- do not display the tabs if there are no tabs -->
     @if (tabs().length > 0) {
       <div overflowManager class="relative col-span-2 col-start-2 row-start-2 flex" (count)="visibleTabCount.set($event)">
         <tabs class="w-full">
           @for (tab of tabs(); track $index) {
             <tab
-              class="w-fit"
+              class="bg-muted w-fit"
               value="{{ tab.display | syslang | transloco }}"
               overflowItem
               [attr.aria-selected]="this.currentPath() === tab.path"
@@ -6117,6 +6249,7 @@ class NavbarTabsComponent {
                 <i class="fa-fw {{ tab.icon }} " aria-hidden="true"></i>
               }
               <span>{{ tab.display | syslang | transloco }}</span>
+              <span class="empty:hidden">{{ tab.count }}</span>
             </tab>
           }
         </tabs>
@@ -6151,9 +6284,9 @@ class NavbarTabsComponent {
         }
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: TabsComponent, selector: "tabs, Tabs", inputs: ["class", "variant", "size"] }, { kind: "component", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: TabsComponent, selector: "tabs, Tabs", inputs: ["class", "variant", "size"] }, { kind: "component", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "shadow", "size", "decoration", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: OverflowManagerDirective, selector: "[overflowManager]", inputs: ["target", "margin", "direction"], outputs: ["count"] }, { kind: "directive", type: OverflowItemDirective, selector: "[overflowItem]" }, { kind: "directive", type: OverflowStopDirective, selector: "[overflowStop]" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NavbarTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NavbarTabsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'navbar-tabs',
@@ -6165,7 +6298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
         <tabs class="w-full">
           @for (tab of tabs(); track $index) {
             <tab
-              class="w-fit"
+              class="bg-muted w-fit"
               value="{{ tab.display | syslang | transloco }}"
               overflowItem
               [attr.aria-selected]="this.currentPath() === tab.path"
@@ -6177,6 +6310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                 <i class="fa-fw {{ tab.icon }} " aria-hidden="true"></i>
               }
               <span>{{ tab.display | syslang | transloco }}</span>
+              <span class="empty:hidden">{{ tab.count }}</span>
             </tab>
           }
         </tabs>
@@ -6230,8 +6364,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
         }], ctorParameters: () => [] });
 
 class NoResultComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NoResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: NoResultComponent, isStandalone: true, selector: "NoResult", host: { classAttribute: "p-4 flex flex-col gap-2 bg-gray-100 rounded-md" }, providers: [provideTranslocoScope('no-result')], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NoResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: NoResultComponent, isStandalone: true, selector: "NoResult", host: { classAttribute: "p-4 flex flex-col gap-2 bg-neutral-100 dark:bg-menu rounded-md" }, providers: [provideTranslocoScope('no-result')], ngImport: i0, template: `
     <header class="flex items-center gap-2 text-xl font-semibold">
       <i class="fa-fw far fa-face-sad-sweat text-3xl"></i>
       <p>{{ 'noResult.noResult' | transloco }}</p>
@@ -6244,7 +6378,7 @@ class NoResultComponent {
     <p>{{ 'noResult.noResultAssistance' | transloco }}</p>
   `, isInline: true, dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NoResultComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NoResultComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NoResult',
@@ -6264,7 +6398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
     <p>{{ 'noResult.noResultAssistance' | transloco }}</p>
   `,
                     host: {
-                        class: 'p-4 flex flex-col gap-2 bg-gray-100 rounded-md'
+                        class: 'p-4 flex flex-col gap-2 bg-neutral-100 dark:bg-menu rounded-md'
                     }
                 }]
         }] });
@@ -6290,8 +6424,8 @@ class PagerComponent {
         this.page.set(this.page() - 1);
         this.queryService.gotoPage(this.page());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: PagerComponent, isStandalone: true, selector: "pager", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: PagerComponent, isStandalone: true, selector: "pager", inputs: { configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <div class="flex gap-2">
       @if ((hasPages() && page() > 1) || (!hasPages() && page() > 1)) {
         <button variant="ghost" [attr.title]="'previousPage' | transloco" (click)="previousPage()">
@@ -6313,9 +6447,9 @@ class PagerComponent {
         </button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'pager',
@@ -6347,6 +6481,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+const searchVariants = cva(cn('group flex gap-1 px-2 py-3 min-w-0 h-9 rounded-full items-center text-sm/5', 'dark:bg-muted border border-foreground/20 text-foreground', 'hover:cursor-pointer hover:bg-foreground/2', '[&[disabled]]:pointer-events-none [&[disabled]]:opacity-50', 'transition-colors'), {
+    variants: {
+        variant: {
+            default: '',
+            primary: ['bg-primary/5 text-primary', 'hover:bg-primary/10', 'focus-within:bg-primary/10'],
+            secondary: ['bg-secondary/5 text-secondary', 'hover:bg-secondary/10', 'focus-within:bg-secondary/10'],
+            destructive: ['bg-destructive/5 text-destructive', 'hover:bg-destructive/10 ', 'focus-within:bg-destructive/10'],
+            ai: [
+                'bg-gradient-to-r text-foreground',
+                'from-ai-from/10 via-ai-via/10 to-ai-to/10',
+                'hover:from-ai-from/20 hover:via-ai-via/20 hover:to-ai-to/20',
+                'focus-within:from-ai-from/20 focus-within:via-ai-via/20 focus-within:to-ai-to/20'
+            ]
+        },
+        decoration: {
+            outline: 'border border-foreground/20 hover:border-foreground',
+            none: ''
+        }
+    },
+    compoundVariants: [
+        { decoration: 'outline', variant: 'primary', class: ['border-primary/50 hover:border-primary-hover focus-within:border-primary'] },
+        { decoration: 'outline', variant: 'secondary', class: ['border-secondary/50 hover:border-secondary-hover focus-within:border-secondary'] },
+        { decoration: 'outline', variant: 'destructive', class: ['border-destructive/50 hover:border-destructive-hover focus-within:border-destructive'] },
+        { decoration: 'outline', variant: 'ai', class: ['border-bg-ai-50/20 hover:border-bg-ai focus-within:border-bg-ai'] }
+    ],
+    defaultVariants: {
+        variant: 'default'
+    }
+});
 class SearchInputComponent {
     cn = cn;
     searchInput = viewChild.required('search');
@@ -6385,12 +6548,13 @@ class SearchInputComponent {
         }
     }, ...(ngDevMode ? [{ debugName: "keyboardNavigatorOptions" }] : []));
     placeholder = input('Search...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     hotkey = input('shift+/', ...(ngDevMode ? [{ debugName: "hotkey" }] : []));
     class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    decoration = input('none', ...(ngDevMode ? [{ debugName: "decoration" }] : []));
     variants = computed(() => {
-        return searchVariants({ variant: this.variant(), class: this.class() });
+        return searchVariants({ variant: this.variant(), decoration: this.decoration(), class: this.class() });
     }, ...(ngDevMode ? [{ debugName: "variants" }] : []));
     onInput(event) {
         const inputElement = event.target;
@@ -6402,10 +6566,9 @@ class SearchInputComponent {
         e.stopImmediatePropagation();
         this.control().reset();
         this.control().updateValueAndValidity();
-        this.searchInput()?.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: SearchInputComponent, isStandalone: true, selector: "SearchInput", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null }, keyboardNavigatorOptions: { classPropertyName: "keyboardNavigatorOptions", publicName: "keyboardNavigatorOptions", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected" }, host: { properties: { "class": "cn(variants(), disabled() && 'pointer-events-none opacity-50')" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["search"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: SearchInputComponent, isStandalone: true, selector: "SearchInput", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: true, transformFunction: null }, keyboardNavigatorOptions: { classPropertyName: "keyboardNavigatorOptions", publicName: "keyboardNavigatorOptions", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, decoration: { classPropertyName: "decoration", publicName: "decoration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelected: "onSelected" }, host: { properties: { "class": "cn(variants(), disabled() && 'pointer-events-none opacity-50')" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["search"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <SearchIcon class="text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within:rotate-90" />
     <input
       #search
@@ -6425,18 +6588,17 @@ class SearchInputComponent {
       (input)="onInput($event)" />
 
     <button
-      variant="icon"
+      class="text-foreground peer-not-placeholder-shown:rotate-90 peer-not-placeholder-shown:cursor-pointer peer-not-placeholder-shown:opacity-100 rotate-0 transform opacity-0 transition-[rotate,opacity] duration-500 peer-placeholder-shown:pointer-events-none"
       [tabindex]="control().value ? 0 : -1"
-      class="text-foreground peer-not-placeholder-shown:rotate-90 peer-not-placeholder-shown:cursor-pointer peer-not-placeholder-shown:opacity-100 mr-1 rotate-0 transform opacity-0 transition-[rotate,opacity] duration-500 peer-placeholder-shown:pointer-events-none"
       (keydown.enter)="clearSearch($event)"
       (click)="clearSearch($event)">
       <XMark class="size-4" aria-hidden="true" />
     </button>
 
     <ng-content />
-  `, isInline: true, styles: [":host input[type=search]::-ms-clear,:host input[type=search]::-ms-reveal{appearance:none;width:0;height:0}:host input[type=search]::-webkit-search-decoration,:host input[type=search]::-webkit-search-cancel-button,:host input[type=search]::-webkit-search-results-button,:host input[type=search]::-webkit-search-results-decoration{appearance:none}\n"], dependencies: [{ kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class", "width", "height"] }, { kind: "component", type: XMarkIConComponent, selector: "XMark, xmark, x-mark", inputs: ["class", "width", "height"] }, { kind: "directive", type: KeyboardNavigatorDirective, selector: "input[role=\"combobox\"]", inputs: ["keyboardNavigator", "aria-controls"], outputs: ["onFocus", "onBlur", "onSelected"] }] });
+  `, isInline: true, styles: [":host input[type=search]::-ms-clear,:host input[type=search]::-ms-reveal{appearance:none;width:0;height:0}:host input[type=search]::-webkit-search-decoration,:host input[type=search]::-webkit-search-cancel-button,:host input[type=search]::-webkit-search-results-button,:host input[type=search]::-webkit-search-results-decoration{appearance:none}\n"], dependencies: [{ kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: XMarkIConComponent, selector: "XMark, xmark, x-mark", inputs: ["class"] }, { kind: "directive", type: KeyboardNavigatorDirective, selector: "input[role=\"combobox\"]", inputs: ["keyboardNavigator", "aria-controls"], outputs: ["onFocus", "onBlur", "onSelected"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'SearchInput', standalone: true, imports: [SearchIcon, XMarkIConComponent, KeyboardNavigatorDirective], template: `
     <SearchIcon class="text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within:rotate-90" />
@@ -6458,9 +6620,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
       (input)="onInput($event)" />
 
     <button
-      variant="icon"
+      class="text-foreground peer-not-placeholder-shown:rotate-90 peer-not-placeholder-shown:cursor-pointer peer-not-placeholder-shown:opacity-100 rotate-0 transform opacity-0 transition-[rotate,opacity] duration-500 peer-placeholder-shown:pointer-events-none"
       [tabindex]="control().value ? 0 : -1"
-      class="text-foreground peer-not-placeholder-shown:rotate-90 peer-not-placeholder-shown:cursor-pointer peer-not-placeholder-shown:opacity-100 mr-1 rotate-0 transform opacity-0 transition-[rotate,opacity] duration-500 peer-placeholder-shown:pointer-events-none"
       (keydown.enter)="clearSearch($event)"
       (click)="clearSearch($event)">
       <XMark class="size-4" aria-hidden="true" />
@@ -6517,10 +6678,10 @@ class SortSelectorComponent {
             this.onSort.emit(sort);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SortSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SortSelectorComponent, isStandalone: true, selector: "sort-selector, sortselector, SortSelector", inputs: { result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort" }, providers: [provideTranslocoScope('sort-selector')], viewQueries: [{ propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<menu>\n  <button tabindex=\"0\" variant=\"ghost\" [attr.title]=\"'sortSelector.selectSort' | transloco\">\n    <i class=\"fa-fw fa-regular fa-arrow-{{ sort()?.$isDesc ? 'down' : 'up' }}-big-small me-1\"></i>\n    <span>{{ sort()?.display | transloco }}</span>\n  </button>\n\n  <MenuContent [position]=\"position()\" class=\"min-w-max\">\n    @if (sortOptions().length > 0) {\n      @for (option of sortOptions(); track $index) {\n        <menuitem (click)=\"onSortOptionClicked(option)\" class=\"justify-between\">\n          <span>{{ option.display | transloco }}</span>\n          <i class=\"fa-fw fa-regular fa-arrow-{{ option.$isDesc ? 'down' : 'up' }}-big-small\"></i>\n        </menuitem>\n      }\n    }\n  </MenuContent>\n</menu>\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SortSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: SortSelectorComponent, isStandalone: true, selector: "sort-selector, sortselector, SortSelector", inputs: { result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSort: "onSort" }, providers: [provideTranslocoScope('sort-selector')], viewQueries: [{ propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<menu>\n  <button tabindex=\"0\" variant=\"ghost\" [attr.title]=\"'sortSelector.selectSort' | transloco\">\n    <i class=\"fa-fw fa-regular fa-arrow-{{ sort()?.$isDesc ? 'down' : 'up' }}-big-small me-1\"></i>\n    <span>{{ sort()?.display | transloco }}</span>\n  </button>\n\n  <MenuContent [position]=\"position()\" class=\"min-w-max\">\n    @if (sortOptions().length > 0) {\n      @for (option of sortOptions(); track $index) {\n        <menuitem (click)=\"onSortOptionClicked(option)\" class=\"justify-between\">\n          <span>{{ option.display | transloco }}</span>\n          <i class=\"fa-fw fa-regular fa-arrow-{{ option.$isDesc ? 'down' : 'up' }}-big-small\"></i>\n        </menuitem>\n      }\n    }\n  </MenuContent>\n</menu>\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SortSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SortSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sort-selector, sortselector, SortSelector', standalone: true, imports: [TranslocoPipe, ButtonComponent, MenuComponent, MenuContentComponent, MenuItemComponent], providers: [provideTranslocoScope('sort-selector')], template: "<menu>\n  <button tabindex=\"0\" variant=\"ghost\" [attr.title]=\"'sortSelector.selectSort' | transloco\">\n    <i class=\"fa-fw fa-regular fa-arrow-{{ sort()?.$isDesc ? 'down' : 'up' }}-big-small me-1\"></i>\n    <span>{{ sort()?.display | transloco }}</span>\n  </button>\n\n  <MenuContent [position]=\"position()\" class=\"min-w-max\">\n    @if (sortOptions().length > 0) {\n      @for (option of sortOptions(); track $index) {\n        <menuitem (click)=\"onSortOptionClicked(option)\" class=\"justify-between\">\n          <span>{{ option.display | transloco }}</span>\n          <i class=\"fa-fw fa-regular fa-arrow-{{ option.$isDesc ? 'down' : 'up' }}-big-small\"></i>\n        </menuitem>\n      }\n    }\n  </MenuContent>\n</menu>\n" }]
         }] });
@@ -6571,8 +6732,8 @@ class SponsoredResultsComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SponsoredResultsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SponsoredResultsComponent, isStandalone: true, selector: "sponsored-results, SponsoredResults, sponsoredresults", inputs: { slice: { classPropertyName: "slice", publicName: "slice", isSignal: true, isRequired: false, transformFunction: null }, displayPromoted: { classPropertyName: "displayPromoted", publicName: "displayPromoted", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" } }, queries: [{ propertyName: "childElement", first: true, predicate: ChildMarkerDirective, descendants: true, isSignal: true }], ngImport: i0, template: ` @if (sponsoredResults()?.length) {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SponsoredResultsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: SponsoredResultsComponent, isStandalone: true, selector: "sponsored-results, SponsoredResults, sponsoredresults", inputs: { slice: { classPropertyName: "slice", publicName: "slice", isSignal: true, isRequired: false, transformFunction: null }, displayPromoted: { classPropertyName: "displayPromoted", publicName: "displayPromoted", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" } }, queries: [{ propertyName: "childElement", first: true, predicate: ChildMarkerDirective, descendants: true, isSignal: true }], ngImport: i0, template: ` @if (sponsoredResults()?.length) {
     @for (link of sponsoredResults(); track $index) {
       <li role="listitem" class="text-primary flex items-center gap-2 rounded px-3 py-2 font-bold">
         <a href="{{ link.url }}" target="_blank" rel="noopener" title="{{ link.tooltip }}" class="result-link peer flex items-center gap-2 hover:underline">
@@ -6590,7 +6751,7 @@ class SponsoredResultsComponent {
     }
   }`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SponsoredResultsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SponsoredResultsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sponsored-results, SponsoredResults, sponsoredresults',
@@ -6638,8 +6799,8 @@ class ThemeSelectorComponent {
             theme = theme.name;
         this.themeStore.setCurrentTheme(this.scope(), theme);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ThemeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: ThemeSelectorComponent, isStandalone: true, selector: "theme-selector", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: true, transformFunction: null }, showPrivate: { classPropertyName: "showPrivate", publicName: "showPrivate", isSignal: true, isRequired: false, transformFunction: null }, selectedTheme: { classPropertyName: "selectedTheme", publicName: "selectedTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTheme: "selectedThemeChange" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ThemeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: ThemeSelectorComponent, isStandalone: true, selector: "theme-selector", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: true, transformFunction: null }, showPrivate: { classPropertyName: "showPrivate", publicName: "showPrivate", isSignal: true, isRequired: false, transformFunction: null }, selectedTheme: { classPropertyName: "selectedTheme", publicName: "selectedTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedTheme: "selectedThemeChange" }, ngImport: i0, template: `
     <Menu>
       <ng-content></ng-content>
 
@@ -6658,7 +6819,7 @@ class ThemeSelectorComponent {
     </Menu>
   `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ThemeSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ThemeSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'theme-selector', standalone: true, imports: [MenuComponent, NgStyle, MenuContentComponent], template: `
     <Menu>
@@ -6698,8 +6859,8 @@ class ThemeToggleComponent {
             return;
         this.themeStore.setDarkMode(this.scope(), status);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: ThemeToggleComponent, isStandalone: true, selector: "theme-toggle", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: true, transformFunction: null }, darkMode: { classPropertyName: "darkMode", publicName: "darkMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { darkMode: "darkModeChange" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: ThemeToggleComponent, isStandalone: true, selector: "theme-toggle", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: true, transformFunction: null }, darkMode: { classPropertyName: "darkMode", publicName: "darkMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { darkMode: "darkModeChange" }, ngImport: i0, template: `
     <label class="flex cursor-pointer select-none items-center gap-2">
       @if (darkMode()) {
         <i class="fa-fw far fa-toggle-large-on text-primary"></i>
@@ -6713,7 +6874,7 @@ class ThemeToggleComponent {
     </label>
   `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ThemeToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ThemeToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'theme-toggle', standalone: true, imports: [FormsModule], template: `
     <label class="flex cursor-pointer select-none items-center gap-2">
@@ -6915,28 +7076,32 @@ class SearchFooterComponent {
         event.stopPropagation();
         this.loadMore.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SearchFooterComponent, isStandalone: true, selector: "search-footer, searchfooter, SearchFooter", inputs: { hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { loadMore: "loadMore" }, ngImport: i0, template: ` <div class="flex flex-col px-2">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: SearchFooterComponent, isStandalone: true, selector: "search-footer, searchfooter, SearchFooter", inputs: { hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { loadMore: "loadMore" }, ngImport: i0, template: ` <div class="flex flex-col px-2">
     @if (hasMore() && config().showLoadMore) {
-      <button variant="outline" class="w-full" tabindex="0" [attr.title]="'loadMore' | transloco" (click)="onLoadMore($event)">
+      <button decoration="outline" class="w-full" tabindex="0" [attr.title]="'loadMore' | transloco" (click)="onLoadMore($event)">
         {{ 'loadMore' | transloco }}
       </button>
     }
-    <button variant="link" class="ml-auto" [attr.title]="'seeMore' | transloco" [routerLink]="[config().routerLink]">{{ 'seeMore' | transloco }}</button>
-  </div>`, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    <button decoration="underline" class="ml-auto" [attr.title]="'seeMore' | transloco" [routerLink]="[config().routerLink]">
+      {{ 'seeMore' | transloco }}
+    </button>
+  </div>`, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'search-footer, searchfooter, SearchFooter',
                     imports: [TranslocoPipe, RouterLink, ButtonComponent],
                     template: ` <div class="flex flex-col px-2">
     @if (hasMore() && config().showLoadMore) {
-      <button variant="outline" class="w-full" tabindex="0" [attr.title]="'loadMore' | transloco" (click)="onLoadMore($event)">
+      <button decoration="outline" class="w-full" tabindex="0" [attr.title]="'loadMore' | transloco" (click)="onLoadMore($event)">
         {{ 'loadMore' | transloco }}
       </button>
     }
-    <button variant="link" class="ml-auto" [attr.title]="'seeMore' | transloco" [routerLink]="[config().routerLink]">{{ 'seeMore' | transloco }}</button>
+    <button decoration="underline" class="ml-auto" [attr.title]="'seeMore' | transloco" [routerLink]="[config().routerLink]">
+      {{ 'seeMore' | transloco }}
+    </button>
   </div>`
                 }]
         }] });
@@ -6944,17 +7109,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
 class SearchHeaderComponent {
     floating = inject(PopoverContentComponent, { skipSelf: true, optional: true });
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SearchHeaderComponent, isStandalone: true, selector: "search-header, searchheader, SearchHeader", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: SearchHeaderComponent, isStandalone: true, selector: "search-header, searchheader, SearchHeader", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (floating) {
       <div class="p-2">
         <label class="text-xl font-bold">{{ label() }}</label>
-        <MenuSeparator />
+        <HorizontalDivider />
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: HorizontalDividerComponent, selector: "menu-separator, MenuSeparator, menuseparator, horizontal-divider, HorizontalDivider, horizontaldivider" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: HorizontalDividerComponent, selector: "horizontal-divider, HorizontalDivider, horizontaldivider" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'search-header, searchheader, SearchHeader',
@@ -6963,7 +7128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
     @if (floating) {
       <div class="p-2">
         <label class="text-xl font-bold">{{ label() }}</label>
-        <MenuSeparator />
+        <HorizontalDivider />
       </div>
     }
   `
@@ -6982,7 +7147,8 @@ class SearchListComponent {
     transloco = inject(TranslocoService);
     onClick(search) {
         const queryParams = {
-            q: search.queryParams?.text
+            q: search.queryParams?.text,
+            t: search.queryParams?.tab
         };
         if (search.queryParams?.filters && search.queryParams?.filters?.length > 0)
             queryParams.f = JSON.stringify(search.queryParams?.filters);
@@ -6992,8 +7158,8 @@ class SearchListComponent {
         e.stopPropagation();
         this.delete.emit(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SearchListComponent, isStandalone: true, selector: "search-list, searchlist, SearchList", inputs: { paginatedSearches: { classPropertyName: "paginatedSearches", publicName: "paginatedSearches", isSignal: true, isRequired: true, transformFunction: null }, deleteButtonTitle: { classPropertyName: "deleteButtonTitle", publicName: "deleteButtonTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { delete: "delete" }, host: { attributes: { "role": "list" }, classAttribute: "flex max-h-[460px] flex-col overflow-auto" }, providers: [provideTranslocoScope('searches')], queries: [{ propertyName: "iconTemplate", first: true, predicate: ChildMarkerDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: SearchListComponent, isStandalone: true, selector: "search-list, searchlist, SearchList", inputs: { paginatedSearches: { classPropertyName: "paginatedSearches", publicName: "paginatedSearches", isSignal: true, isRequired: true, transformFunction: null }, deleteButtonTitle: { classPropertyName: "deleteButtonTitle", publicName: "deleteButtonTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { delete: "delete" }, host: { attributes: { "role": "list" }, classAttribute: "flex max-h-[460px] flex-col overflow-auto" }, providers: [provideTranslocoScope('searches')], queries: [{ propertyName: "iconTemplate", first: true, predicate: ChildMarkerDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     @for (search of paginatedSearches(); track $index) {
       <li
         role="listitem"
@@ -7035,9 +7201,9 @@ class SearchListComponent {
         <ng-content />
       </li>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'search-list, searchlist, SearchList',
@@ -7141,8 +7307,8 @@ class RecentSearchesComponent {
     loadMore() {
         this.range.set(this.range() + (this.config.itemsPerPage ?? 10));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: RecentSearchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.2", type: RecentSearchesComponent, isStandalone: true, selector: "RecentSearches, recent-searches", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope('searches')], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RecentSearchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: RecentSearchesComponent, isStandalone: true, selector: "RecentSearches, recent-searches", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope('searches')], ngImport: i0, template: `
     <SearchHeader [label]="'searches.recent.label' | transloco" />
 
     <SearchList
@@ -7158,7 +7324,7 @@ class RecentSearchesComponent {
     <SearchFooter [hasMore]="hasMore()" [config]="config" (loadMore)="loadMore()" />
   `, isInline: true, styles: [":host ul{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: ChildMarkerDirective, selector: "[childMarker]" }, { kind: "component", type: SearchHeaderComponent, selector: "search-header, searchheader, SearchHeader", inputs: ["label"] }, { kind: "component", type: SearchListComponent, selector: "search-list, searchlist, SearchList", inputs: ["paginatedSearches", "deleteButtonTitle"], outputs: ["delete"] }, { kind: "component", type: SearchFooterComponent, selector: "search-footer, searchfooter, SearchFooter", inputs: ["hasMore", "config"], outputs: ["loadMore"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: RecentSearchesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: RecentSearchesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'RecentSearches, recent-searches', standalone: true, providers: [provideTranslocoScope('searches')], imports: [TranslocoPipe, ChildMarkerDirective, SearchHeaderComponent, SearchListComponent, SearchFooterComponent], template: `
     <SearchHeader [label]="'searches.recent.label' | transloco" />
@@ -7214,8 +7380,8 @@ class SavedSearchesComponent {
     loadMore() {
         this.range.set(this.range() + (this.config.itemsPerPage ?? 10));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SavedSearchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.2", type: SavedSearchesComponent, isStandalone: true, selector: "saved-searches, SavedSearches", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope('searches')], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SavedSearchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: SavedSearchesComponent, isStandalone: true, selector: "saved-searches, SavedSearches", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope('searches')], ngImport: i0, template: `
     <SearchHeader [label]="'searches.saved.label' | transloco" />
 
     <SearchList [paginatedSearches]="paginatedSearches()" deleteButtonTitle="searches.saved.remove" (delete)="onDelete($event)">
@@ -7227,7 +7393,7 @@ class SavedSearchesComponent {
     <SearchFooter [hasMore]="hasMore()" [config]="config" (loadMore)="loadMore()" />
   `, isInline: true, styles: [":host ul{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: ChildMarkerDirective, selector: "[childMarker]" }, { kind: "component", type: SearchHeaderComponent, selector: "search-header, searchheader, SearchHeader", inputs: ["label"] }, { kind: "component", type: SearchListComponent, selector: "search-list, searchlist, SearchList", inputs: ["paginatedSearches", "deleteButtonTitle"], outputs: ["delete"] }, { kind: "component", type: SearchFooterComponent, selector: "search-footer, searchfooter, SearchFooter", inputs: ["hasMore", "config"], outputs: ["loadMore"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SavedSearchesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SavedSearchesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'saved-searches, SavedSearches', standalone: true, imports: [TranslocoPipe, ChildMarkerDirective, SearchHeaderComponent, SearchListComponent, SearchFooterComponent], providers: [provideTranslocoScope('searches')], template: `
     <SearchHeader [label]="'searches.saved.label' | transloco" />
@@ -7259,8 +7425,8 @@ class SavedSearchDialog {
         // emit closed event for the diaglog service
         this.closed.emit('dialog-confirm');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SavedSearchDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: SavedSearchDialog, isStandalone: true, selector: "saved-search-dialog, savedsearchdialog, SavedSearchDialog", outputs: { closed: "closed" }, providers: [provideTranslocoScope('searches')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SavedSearchDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: SavedSearchDialog, isStandalone: true, selector: "saved-search-dialog, savedsearchdialog, SavedSearchDialog", outputs: { closed: "closed" }, providers: [provideTranslocoScope('searches')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <dialog #dialog>
       <DialogHeader>
         <DialogTitle>{{ 'searches.saved.save' | transloco }}</DialogTitle>
@@ -7279,7 +7445,7 @@ class SavedSearchDialog {
 
       <DialogFooter class="flex-col">
         <div class="ml-auto flex justify-end gap-2">
-          <button variant="outline" (click)="dialog.close($event)">
+          <button decoration="outline" (click)="dialog.close($event)">
             {{ 'cancel' | transloco }}
           </button>
           <button (click)="confirm($event)" [disabled]="!saveName()">
@@ -7288,9 +7454,9 @@ class SavedSearchDialog {
         </div>
       </DialogFooter>
     </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", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog", inputs: ["class"], outputs: ["closed"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"password\"], input[type=\"number\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant"] }, { 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", inputs: ["class", "variant"], outputs: ["closed"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SavedSearchDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SavedSearchDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'saved-search-dialog, savedsearchdialog, SavedSearchDialog',
@@ -7326,7 +7492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
 
       <DialogFooter class="flex-col">
         <div class="ml-auto flex justify-end gap-2">
-          <button variant="outline" (click)="dialog.close($event)">
+          <button decoration="outline" (click)="dialog.close($event)">
             {{ 'cancel' | transloco }}
           </button>
           <button (click)="confirm($event)" [disabled]="!saveName()">
@@ -7365,14 +7531,14 @@ class BookmarkButtonComponent {
             notify.success(this.transloco.translate('bookmarks.bookmarkAdded'), { duration: 2000 });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BookmarkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: BookmarkButtonComponent, isStandalone: true, selector: "bookmark-button, bookmarkbutton, BookmarkButton", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "bookmark($event)" }, properties: { "title": "title()" }, classAttribute: "cursor-pointer" }, providers: [provideTranslocoScope('bookmark')], ngImport: i0, template: ` @if (isBookmarked()) {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BookmarkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: BookmarkButtonComponent, isStandalone: true, selector: "bookmark-button, bookmarkbutton, BookmarkButton", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "bookmark($event)" }, properties: { "title": "title()" }, classAttribute: "cursor-pointer" }, providers: [provideTranslocoScope('bookmark')], ngImport: i0, template: ` @if (isBookmarked()) {
       <i class="fa-fw fa-bookmark fa-solid"></i>
     } @else {
       <i class="fa-fw fa-bookmark fa-regular"></i>
     }`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BookmarkButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BookmarkButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bookmark-button, bookmarkbutton, BookmarkButton',
@@ -7464,12 +7630,12 @@ class BookmarksComponent {
         e.stopPropagation();
         this.range.set(this.range() + (this.config.itemsPerPage ?? 10));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BookmarksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: BookmarksComponent, isStandalone: true, selector: "bookmarks, Bookmarks", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope('bookmarks')], ngImport: i0, template: "@if (floating) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'bookmarks.label' | transloco }}</label>\n    <MenuSeparator />\n  </div>\n}\n\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\" role=\"list\">\n  @for (bookmark of paginatedBookmarks(); track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" (click)=\"onClick(bookmark)\" (keydown.enter)=\"onClick(bookmark)\">\n      <i class=\"fa-fw fas fa-bookmark shrink-0\" aria-hidden=\"true\"></i>\n\n      <p class=\"line-clamp-1\">{{ bookmark.label }}</p>\n\n      @if (bookmark.author) {\n        <p class=\"line-clamp-1 text-neutral-500\">\n          <i class=\"fa-fw far fa-user\" aria-hidden=\"true\"></i>\n          {{ bookmark.author }}\n        </p>\n      }\n      @if (bookmark.parentFolder) {\n        <p class=\"line-clamp-1 text-neutral-500\">\n          <i class=\"fa-fw far fa-folder\" aria-hidden=\"true\"></i>\n          {{ bookmark.parentFolder }}\n        </p>\n      }\n\n      <button\n        variant=\"icon\"\n        title=\"{{ 'bookmarks.openBookmark' | transloco }}\"\n        class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n        [attr.title]=\"'bookmarks.removeBookmark' | transloco\"\n        [attr.aria-label]=\"'bookmarks.removeBookmark' | transloco\"\n        (click)=\"onDelete(bookmark, $event)\">\n        <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n      </button>\n    </li>\n  } @empty {\n    <li class=\"py-4 text-center text-neutral-500\">{{ 'bookmarks.noBookmarks' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button variant=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">{{ 'loadMore' | transloco }}</button>\n  }\n  <button variant=\"link\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\n", styles: [":host ul{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: HorizontalDividerComponent, selector: "menu-separator, MenuSeparator, menuseparator, horizontal-divider, HorizontalDivider, horizontaldivider" }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BookmarksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: BookmarksComponent, isStandalone: true, selector: "bookmarks, Bookmarks", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope('bookmarks')], ngImport: i0, template: "@if (floating) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'bookmarks.label' | transloco }}</label>\n    <HorizontalDivider />\n  </div>\n}\n\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\" role=\"list\">\n  @for (bookmark of paginatedBookmarks(); track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" (click)=\"onClick(bookmark)\" (keydown.enter)=\"onClick(bookmark)\">\n      <i class=\"fa-fw fas fa-bookmark shrink-0\" aria-hidden=\"true\"></i>\n\n      <p class=\"line-clamp-1\">{{ bookmark.label }}</p>\n\n      @if (bookmark.author) {\n        <p class=\"line-clamp-1 text-neutral-500\">\n          <i class=\"fa-fw far fa-user\" aria-hidden=\"true\"></i>\n          {{ bookmark.author }}\n        </p>\n      }\n      @if (bookmark.parentFolder) {\n        <p class=\"line-clamp-1 text-neutral-500\">\n          <i class=\"fa-fw far fa-folder\" aria-hidden=\"true\"></i>\n          {{ bookmark.parentFolder }}\n        </p>\n      }\n\n      <button\n        title=\"{{ 'bookmarks.openBookmark' | transloco }}\"\n        class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n        [attr.title]=\"'bookmarks.removeBookmark' | transloco\"\n        [attr.aria-label]=\"'bookmarks.removeBookmark' | transloco\"\n        (click)=\"onDelete(bookmark, $event)\">\n        <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n      </button>\n    </li>\n  } @empty {\n    <li class=\"py-4 text-center text-neutral-500\">{{ 'bookmarks.noBookmarks' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button decoration=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n  <button decoration=\"underline\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\n", styles: [":host ul{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: HorizontalDividerComponent, selector: "horizontal-divider, HorizontalDivider, horizontaldivider" }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BookmarksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: BookmarksComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bookmarks, Bookmarks', standalone: true, imports: [TranslocoPipe, RouterLink, ButtonComponent, HorizontalDividerComponent, ListItemComponent], providers: [provideTranslocoScope('bookmarks')], template: "@if (floating) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'bookmarks.label' | transloco }}</label>\n    <MenuSeparator />\n  </div>\n}\n\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\" role=\"list\">\n  @for (bookmark of paginatedBookmarks(); track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" (click)=\"onClick(bookmark)\" (keydown.enter)=\"onClick(bookmark)\">\n      <i class=\"fa-fw fas fa-bookmark shrink-0\" aria-hidden=\"true\"></i>\n\n      <p class=\"line-clamp-1\">{{ bookmark.label }}</p>\n\n      @if (bookmark.author) {\n        <p class=\"line-clamp-1 text-neutral-500\">\n          <i class=\"fa-fw far fa-user\" aria-hidden=\"true\"></i>\n          {{ bookmark.author }}\n        </p>\n      }\n      @if (bookmark.parentFolder) {\n        <p class=\"line-clamp-1 text-neutral-500\">\n          <i class=\"fa-fw far fa-folder\" aria-hidden=\"true\"></i>\n          {{ bookmark.parentFolder }}\n        </p>\n      }\n\n      <button\n        variant=\"icon\"\n        title=\"{{ 'bookmarks.openBookmark' | transloco }}\"\n        class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n        [attr.title]=\"'bookmarks.removeBookmark' | transloco\"\n        [attr.aria-label]=\"'bookmarks.removeBookmark' | transloco\"\n        (click)=\"onDelete(bookmark, $event)\">\n        <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n      </button>\n    </li>\n  } @empty {\n    <li class=\"py-4 text-center text-neutral-500\">{{ 'bookmarks.noBookmarks' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button variant=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">{{ 'loadMore' | transloco }}</button>\n  }\n  <button variant=\"link\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\n", styles: [":host ul{scrollbar-width:thin}\n"] }]
+            args: [{ selector: 'bookmarks, Bookmarks', standalone: true, imports: [TranslocoPipe, RouterLink, ButtonComponent, HorizontalDividerComponent, ListItemComponent], providers: [provideTranslocoScope('bookmarks')], template: "@if (floating) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'bookmarks.label' | transloco }}</label>\n    <HorizontalDivider />\n  </div>\n}\n\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\" role=\"list\">\n  @for (bookmark of paginatedBookmarks(); track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" (click)=\"onClick(bookmark)\" (keydown.enter)=\"onClick(bookmark)\">\n      <i class=\"fa-fw fas fa-bookmark shrink-0\" aria-hidden=\"true\"></i>\n\n      <p class=\"line-clamp-1\">{{ bookmark.label }}</p>\n\n      @if (bookmark.author) {\n        <p class=\"line-clamp-1 text-neutral-500\">\n          <i class=\"fa-fw far fa-user\" aria-hidden=\"true\"></i>\n          {{ bookmark.author }}\n        </p>\n      }\n      @if (bookmark.parentFolder) {\n        <p class=\"line-clamp-1 text-neutral-500\">\n          <i class=\"fa-fw far fa-folder\" aria-hidden=\"true\"></i>\n          {{ bookmark.parentFolder }}\n        </p>\n      }\n\n      <button\n        title=\"{{ 'bookmarks.openBookmark' | transloco }}\"\n        class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n        [attr.title]=\"'bookmarks.removeBookmark' | transloco\"\n        [attr.aria-label]=\"'bookmarks.removeBookmark' | transloco\"\n        (click)=\"onDelete(bookmark, $event)\">\n        <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n      </button>\n    </li>\n  } @empty {\n    <li class=\"py-4 text-center text-neutral-500\">{{ 'bookmarks.noBookmarks' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button decoration=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n  <button decoration=\"underline\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\n", styles: [":host ul{scrollbar-width:thin}\n"] }]
         }], ctorParameters: () => [] });
 
 class DeleteCollectionDialog {
@@ -7489,8 +7655,8 @@ class DeleteCollectionDialog {
         const message = this.translocoService.translate('collections.deleted');
         notify.success(message, { duration: 2000 });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DeleteCollectionDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: DeleteCollectionDialog, isStandalone: true, selector: "delete-collection-dialog", providers: [provideTranslocoScope('collections')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DeleteCollectionDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: DeleteCollectionDialog, isStandalone: true, selector: "delete-collection-dialog", providers: [provideTranslocoScope('collections')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <dialog #dialog>
       <DialogHeader>
         <DialogTitle>{{ 'collections.deleteCollection' | transloco }}</DialogTitle>
@@ -7501,7 +7667,7 @@ class DeleteCollectionDialog {
       </DialogContent>
 
       <DialogFooter>
-        <button variant="outline" (click)="dialog.cancel($event)">
+        <button decoration="outline" (click)="dialog.cancel($event)">
           {{ 'cancel' | transloco }}
         </button>
 
@@ -7510,9 +7676,9 @@ class DeleteCollectionDialog {
         </button>
       </DialogFooter>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog", inputs: ["class"], outputs: ["closed"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog", inputs: ["class", "variant"], outputs: ["closed"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DeleteCollectionDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DeleteCollectionDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'delete-collection-dialog',
@@ -7539,7 +7705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
       </DialogContent>
 
       <DialogFooter>
-        <button variant="outline" (click)="dialog.cancel($event)">
+        <button decoration="outline" (click)="dialog.cancel($event)">
           {{ 'cancel' | transloco }}
         </button>
 
@@ -7592,12 +7758,12 @@ class CollectionsComponent {
         e.stopPropagation();
         this.range.set(this.range() + (this.config.itemsPerPage ?? 10));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: CollectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: CollectionsComponent, isStandalone: true, selector: "app-collections", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope('collections')], viewQueries: [{ propertyName: "deleteCollectionDialog", first: true, predicate: DeleteCollectionDialog, descendants: true, isSignal: true }], ngImport: i0, template: "@if (floating) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'collections.label' | transloco }}</label>\n    <MenuSeparator />\n  </div>\n}\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\">\n  @for (collection of paginatedCollections(); track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" (click)=\"onClick(collection)\" (keydown.enter)=\"onClick(collection)\">\n      <i class=\"fas fa-inbox\"></i>\n\n      <p class=\"line-clamp-1\">{{ collection.name }}</p>\n\n      <button\n        variant=\"icon\"\n        class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n        title=\"{{ 'collections.deleteCollection' | transloco }}\"\n        [attr.aria-label]=\"'collections.deleteCollection' | transloco\"\n        (click)=\"onDelete(collection, $index, $event)\">\n        <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n      </button>\n    </li>\n  } @empty {\n    <li class=\"list-none py-4 text-center text-neutral-500\">{{ 'collections.noCollections' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button variant=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">{{ 'loadMore' | transloco }}</button>\n  }\n  <button variant=\"link\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\n\n<delete-collection-dialog />\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: HorizontalDividerComponent, selector: "menu-separator, MenuSeparator, menuseparator, horizontal-divider, HorizontalDivider, horizontaldivider" }, { kind: "component", type: DeleteCollectionDialog, selector: "delete-collection-dialog" }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CollectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CollectionsComponent, isStandalone: true, selector: "app-collections", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope('collections')], viewQueries: [{ propertyName: "deleteCollectionDialog", first: true, predicate: DeleteCollectionDialog, descendants: true, isSignal: true }], ngImport: i0, template: "@if (floating) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'collections.label' | transloco }}</label>\n    <HorizontalDivider />\n  </div>\n}\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\">\n  @for (collection of paginatedCollections(); track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" (click)=\"onClick(collection)\" (keydown.enter)=\"onClick(collection)\">\n      <i class=\"fas fa-inbox\"></i>\n\n      <p class=\"line-clamp-1\">{{ collection.name }}</p>\n\n      <button\n        class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n        title=\"{{ 'collections.deleteCollection' | transloco }}\"\n        [attr.aria-label]=\"'collections.deleteCollection' | transloco\"\n        (click)=\"onDelete(collection, $index, $event)\">\n        <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n      </button>\n    </li>\n  } @empty {\n    <li class=\"list-none py-4 text-center text-neutral-500\">{{ 'collections.noCollections' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button decoration=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n  <button decoration=\"underline\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\n\n<delete-collection-dialog />\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: HorizontalDividerComponent, selector: "horizontal-divider, HorizontalDivider, horizontaldivider" }, { kind: "component", type: DeleteCollectionDialog, selector: "delete-collection-dialog" }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: CollectionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CollectionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-collections', standalone: true, imports: [TranslocoPipe, RouterLink, HorizontalDividerComponent, DeleteCollectionDialog, ButtonComponent, ListItemComponent], providers: [provideTranslocoScope('collections')], template: "@if (floating) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'collections.label' | transloco }}</label>\n    <MenuSeparator />\n  </div>\n}\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\">\n  @for (collection of paginatedCollections(); track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" (click)=\"onClick(collection)\" (keydown.enter)=\"onClick(collection)\">\n      <i class=\"fas fa-inbox\"></i>\n\n      <p class=\"line-clamp-1\">{{ collection.name }}</p>\n\n      <button\n        variant=\"icon\"\n        class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n        title=\"{{ 'collections.deleteCollection' | transloco }}\"\n        [attr.aria-label]=\"'collections.deleteCollection' | transloco\"\n        (click)=\"onDelete(collection, $index, $event)\">\n        <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n      </button>\n    </li>\n  } @empty {\n    <li class=\"list-none py-4 text-center text-neutral-500\">{{ 'collections.noCollections' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button variant=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">{{ 'loadMore' | transloco }}</button>\n  }\n  <button variant=\"link\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\n\n<delete-collection-dialog />\n" }]
+            args: [{ selector: 'app-collections', standalone: true, imports: [TranslocoPipe, RouterLink, HorizontalDividerComponent, DeleteCollectionDialog, ButtonComponent, ListItemComponent], providers: [provideTranslocoScope('collections')], template: "@if (floating) {\n  <div class=\"p-2\">\n    <label class=\"text-xl font-bold\">{{ 'collections.label' | transloco }}</label>\n    <HorizontalDivider />\n  </div>\n}\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\">\n  @for (collection of paginatedCollections(); track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" (click)=\"onClick(collection)\" (keydown.enter)=\"onClick(collection)\">\n      <i class=\"fas fa-inbox\"></i>\n\n      <p class=\"line-clamp-1\">{{ collection.name }}</p>\n\n      <button\n        class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n        title=\"{{ 'collections.deleteCollection' | transloco }}\"\n        [attr.aria-label]=\"'collections.deleteCollection' | transloco\"\n        (click)=\"onDelete(collection, $index, $event)\">\n        <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n      </button>\n    </li>\n  } @empty {\n    <li class=\"list-none py-4 text-center text-neutral-500\">{{ 'collections.noCollections' | transloco }}</li>\n  }\n</ul>\n\n<div class=\"flex flex-col px-2\">\n  @if (hasMore() && config.showLoadMore) {\n    <button decoration=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'loadMore' | transloco\" (click)=\"loadMore($event)\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n  <button decoration=\"underline\" class=\"ml-auto\" [attr.title]=\"'seeMore' | transloco\" [routerLink]=\"[config.routerLink]\">{{ 'seeMore' | transloco }}</button>\n</div>\n\n<delete-collection-dialog />\n" }]
         }], ctorParameters: () => [] });
 
 class AlertDialog {
@@ -7722,8 +7888,8 @@ class AlertDialog {
         this.queryParamsStore.patch({ text: q.text, tab: q.tab, basket: q.basket, sort: q.sort, filters, name: q.name });
         this.dialog().close(e);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: AlertDialog, isStandalone: true, selector: "alert-dialog, alertdialog, AlertDialog", outputs: { closed: "closed" }, providers: [provideTranslocoScope('alerts')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: AlertDialog, isStandalone: true, selector: "alert-dialog, alertdialog, AlertDialog", outputs: { closed: "closed" }, providers: [provideTranslocoScope('alerts')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <dialog #dialog>
       <DialogHeader class="px-1">
         <DialogTitle>{{ 'alerts.createAlert' | transloco }}</DialogTitle>
@@ -7731,7 +7897,7 @@ class AlertDialog {
 
       <DialogContent class="flex flex-col gap-2 overflow-auto px-1">
         <div class="mb-2">
-          <label for="alertName" class="mb-1 block text-sm font-medium text-gray-700">{{ 'alerts.alertName' | transloco }}</label>
+          <label for="alertName" class="text-muted-foreground mb-1 block text-sm font-medium">{{ 'alerts.alertName' | transloco }}</label>
           <input
             id="alertName"
             name="alertName"
@@ -7745,12 +7911,12 @@ class AlertDialog {
         </div>
 
         <div class="mb-2">
-          <label class="mb-1 block text-sm font-medium text-gray-700" for="frequency">{{ 'alerts.alertFrequency' | transloco }}</label>
+          <label class="text-muted-foreground mb-1 block text-sm font-medium" for="frequency">{{ 'alerts.alertFrequency' | transloco }}</label>
           <div class="relative">
             <select
               id="frequency"
               name="frequency"
-              class="hover:outline-primary focus:outline-primary h-8 w-full appearance-none rounded-md border border-gray-200 bg-neutral-50 px-2 pr-8 hover:bg-white hover:outline focus:bg-white focus:outline"
+              class="hover:outline-primary focus:outline-primary border-foreground/18 h-8 w-full appearance-none rounded-md border px-2 pr-8 hover:outline focus:outline"
               id="alertFrequency"
               [ngModel]="alertFrequency()"
               (ngModelChange)="alertFrequency.set($event)">
@@ -7758,26 +7924,29 @@ class AlertDialog {
                 <option [value]="frequencyValue">{{ 'alerts.frequency.' + frequency[frequencyValue] | transloco }}</option>
               }
             </select>
-            <ChevronRight width="16" height="16" class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rotate-90 transform text-gray-400" />
+            <ChevronRight
+              width="16"
+              height="16"
+              class="text-muted-foreground pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rotate-90 transform" />
           </div>
         </div>
 
         <div class="mb-2">
-          <p class="mb-2 block text-sm font-medium text-gray-700">{{ 'alerts.repeatOn' | transloco }}</p>
+          <p class="text-muted-foreground mb-2 block text-sm font-medium">{{ 'alerts.repeatOn' | transloco }}</p>
           <div class="weekdays-grid gap-1.5 px-2.5 py-0">
             @for (day of weekdays; track $index) {
               <div>
                 <input class="me-1" type="checkbox" id="day_{{ day.value }}" [checked]="dayChecked(day.value)" (change)="dayChange($event, day.value)" />
-                <label role="button" for="day_{{ day.value }}" class="form-check-label user-select-none cursor-pointer">{{
-                  'alerts.weekdays.' + day.key | transloco
-                }}</label>
+                <label role="button" for="day_{{ day.value }}" class="form-check-label user-select-none cursor-pointer">
+                  {{ 'alerts.weekdays.' + day.key | transloco }}
+                </label>
               </div>
             }
           </div>
         </div>
 
         <div class="mb-6">
-          <label class="mb-1 block text-sm font-medium text-gray-700" for="alertTimes">Time</label>
+          <label class="text-muted-foreground mb-1 block text-sm font-medium" for="alertTimes">Time</label>
           <input
             type="time"
             id="alertTimes"
@@ -7800,12 +7969,12 @@ class AlertDialog {
         @if (alert || canUpdateQuery()) {
           <div class="flex w-full flex-col gap-2">
             @if (alert) {
-              <button variant="outline" (click)="execute($event)" [disabled]="!canUpdateQuery()">
+              <button decoration="outline" (click)="execute($event)" [disabled]="!canUpdateQuery()">
                 {{ 'alerts.execute' | transloco }}
               </button>
             }
             @if (canUpdateQuery()) {
-              <button [disabled]="updateStatus() !== 'idle'" variant="outline" (click)="updateQuery()">
+              <button [disabled]="updateStatus() !== 'idle'" decoration="outline" (click)="updateQuery()">
                 @switch (updateStatus()) {
                   @case ('updating') {
                     <LoadingCircle class="size-4 animate-spin" width="16" height="16" />
@@ -7824,18 +7993,18 @@ class AlertDialog {
           </div>
         }
         <div class="ml-auto flex justify-end gap-2">
-          <button variant="outline" (click)="dialog.cancel($event)">
+          <button decoration="outline" (click)="dialog.cancel($event)">
             {{ 'cancel' | transloco }}
           </button>
-          <button (click)="confirm($event)" [disabled]="invalidForm()">
+          <button variant="primary" (click)="confirm($event)" [disabled]="invalidForm()">
             {{ 'confirm' | transloco }}
           </button>
         </div>
       </DialogFooter>
     </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", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog", inputs: ["class"], outputs: ["closed"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"password\"], input[type=\"number\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant"] }, { kind: "component", type: ChevronRightIconComponent, selector: "chevron-right, ChevronRight, chevronright", inputs: ["class", "width", "height"] }, { kind: "component", type: LoadingCircleIconComponent, selector: "loading-circle, LoadingCircle, loadingcircle", inputs: ["class", "width", "height"] }, { kind: "component", type: CircleCheckIconComponent, selector: "circle-check, CircleCheck, circlecheck", inputs: ["class", "width", "height"] }, { 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", inputs: ["class", "variant"], outputs: ["closed"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { 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: ChevronRightIconComponent, selector: "chevron-right, ChevronRight, chevronright", 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.1.2", ngImport: i0, type: AlertDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AlertDialog, decorators: [{
             type: Component,
             args: [{ selector: 'alert-dialog, alertdialog, AlertDialog', standalone: true, imports: [
                         FormsModule,
@@ -7849,7 +8018,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                         InputComponent,
                         ChevronRightIconComponent,
                         LoadingCircleIconComponent,
-                        CircleCheckIconComponent
+                        CircleCheckIconComponent,
+                        SelectOptionDirective
                     ], providers: [provideTranslocoScope('alerts')], template: `
     <dialog #dialog>
       <DialogHeader class="px-1">
@@ -7858,7 +8028,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
 
       <DialogContent class="flex flex-col gap-2 overflow-auto px-1">
         <div class="mb-2">
-          <label for="alertName" class="mb-1 block text-sm font-medium text-gray-700">{{ 'alerts.alertName' | transloco }}</label>
+          <label for="alertName" class="text-muted-foreground mb-1 block text-sm font-medium">{{ 'alerts.alertName' | transloco }}</label>
           <input
             id="alertName"
             name="alertName"
@@ -7872,12 +8042,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
         </div>
 
         <div class="mb-2">
-          <label class="mb-1 block text-sm font-medium text-gray-700" for="frequency">{{ 'alerts.alertFrequency' | transloco }}</label>
+          <label class="text-muted-foreground mb-1 block text-sm font-medium" for="frequency">{{ 'alerts.alertFrequency' | transloco }}</label>
           <div class="relative">
             <select
               id="frequency"
               name="frequency"
-              class="hover:outline-primary focus:outline-primary h-8 w-full appearance-none rounded-md border border-gray-200 bg-neutral-50 px-2 pr-8 hover:bg-white hover:outline focus:bg-white focus:outline"
+              class="hover:outline-primary focus:outline-primary border-foreground/18 h-8 w-full appearance-none rounded-md border px-2 pr-8 hover:outline focus:outline"
               id="alertFrequency"
               [ngModel]="alertFrequency()"
               (ngModelChange)="alertFrequency.set($event)">
@@ -7885,26 +8055,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                 <option [value]="frequencyValue">{{ 'alerts.frequency.' + frequency[frequencyValue] | transloco }}</option>
               }
             </select>
-            <ChevronRight width="16" height="16" class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rotate-90 transform text-gray-400" />
+            <ChevronRight
+              width="16"
+              height="16"
+              class="text-muted-foreground pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rotate-90 transform" />
           </div>
         </div>
 
         <div class="mb-2">
-          <p class="mb-2 block text-sm font-medium text-gray-700">{{ 'alerts.repeatOn' | transloco }}</p>
+          <p class="text-muted-foreground mb-2 block text-sm font-medium">{{ 'alerts.repeatOn' | transloco }}</p>
           <div class="weekdays-grid gap-1.5 px-2.5 py-0">
             @for (day of weekdays; track $index) {
               <div>
                 <input class="me-1" type="checkbox" id="day_{{ day.value }}" [checked]="dayChecked(day.value)" (change)="dayChange($event, day.value)" />
-                <label role="button" for="day_{{ day.value }}" class="form-check-label user-select-none cursor-pointer">{{
-                  'alerts.weekdays.' + day.key | transloco
-                }}</label>
+                <label role="button" for="day_{{ day.value }}" class="form-check-label user-select-none cursor-pointer">
+                  {{ 'alerts.weekdays.' + day.key | transloco }}
+                </label>
               </div>
             }
           </div>
         </div>
 
         <div class="mb-6">
-          <label class="mb-1 block text-sm font-medium text-gray-700" for="alertTimes">Time</label>
+          <label class="text-muted-foreground mb-1 block text-sm font-medium" for="alertTimes">Time</label>
           <input
             type="time"
             id="alertTimes"
@@ -7927,12 +8100,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
         @if (alert || canUpdateQuery()) {
           <div class="flex w-full flex-col gap-2">
             @if (alert) {
-              <button variant="outline" (click)="execute($event)" [disabled]="!canUpdateQuery()">
+              <button decoration="outline" (click)="execute($event)" [disabled]="!canUpdateQuery()">
                 {{ 'alerts.execute' | transloco }}
               </button>
             }
             @if (canUpdateQuery()) {
-              <button [disabled]="updateStatus() !== 'idle'" variant="outline" (click)="updateQuery()">
+              <button [disabled]="updateStatus() !== 'idle'" decoration="outline" (click)="updateQuery()">
                 @switch (updateStatus()) {
                   @case ('updating') {
                     <LoadingCircle class="size-4 animate-spin" width="16" height="16" />
@@ -7951,10 +8124,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
           </div>
         }
         <div class="ml-auto flex justify-end gap-2">
-          <button variant="outline" (click)="dialog.cancel($event)">
+          <button decoration="outline" (click)="dialog.cancel($event)">
             {{ 'cancel' | transloco }}
           </button>
-          <button (click)="confirm($event)" [disabled]="invalidForm()">
+          <button variant="primary" (click)="confirm($event)" [disabled]="invalidForm()">
             {{ 'confirm' | transloco }}
           </button>
         </div>
@@ -8005,12 +8178,12 @@ class AlertsComponent {
         }
         this.tmpAlerts.splice(drop.currentIndex, 0, this.tmpAlerts.splice(drop.previousIndex, 1)[0]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: AlertsComponent, isStandalone: true, selector: "Alerts", providers: [provideTranslocoScope('alerts')], viewQueries: [{ propertyName: "alertFormDialog", first: true, predicate: AlertDialog, descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n  role=\"list\"\n  class=\"flex min-w-80 flex-col p-2\"\n  cdkDropList\n  [cdkDropListData]=\"tmpAlerts\"\n  [cdkDropListDisabled]=\"!reordering()\"\n  (cdkDropListDropped)=\"dropped($event)\">\n  @if (floating) {\n    <label class=\"text-xl font-bold\">{{ 'alerts.label' | transloco }}</label>\n    <MenuSeparator />\n  }\n  @for (alert of tmpAlerts; track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" cdkDrag (click)=\"onClick($index)\" (keydown.enter)=\"onClick($index)\">\n      <i class=\"fa-fw fas fa-bell shrink-0\" aria-hidden=\"true\"></i>\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\n      @if (!reordering()) {\n        <button\n          variant=\"icon\"\n          class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n          title=\"{{ 'alerts.deleteAlert' | transloco }}\"\n          [attr.aria-label]=\"'alerts.deleteAlert' | transloco\"\n          (click)=\"deleteAlert($event, $index)\">\n          <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n        </button>\n      } @else {\n        <i class=\"fa-fw fa-regular fa-bars\"></i>\n      }\n    </li>\n  } @empty {\n    <li role=\"listitem\" class=\"py-4 text-center text-neutral-500\">{{ 'alerts.noAlerts' | transloco }}</li>\n  }\n</ul>\n<div class=\"flex flex-col gap-2 p-2\">\n  <button variant=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'alerts.manageAlerts' | transloco\" [disabled]=\"!alerts().length\" (click)=\"reorder()\">\n    {{ (reordering() ? 'save' : 'alerts.manageAlerts') | transloco }}\n  </button>\n  <button class=\"w-full\" [attr.title]=\"'alerts.createAlert' | transloco\" (click)=\"createAlert()\">{{ 'alerts.createAlert' | transloco }}</button>\n</div>\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: HorizontalDividerComponent, selector: "menu-separator, MenuSeparator, menuseparator, horizontal-divider, HorizontalDivider, horizontaldivider" }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: AlertsComponent, isStandalone: true, selector: "Alerts", providers: [provideTranslocoScope('alerts')], viewQueries: [{ propertyName: "alertFormDialog", first: true, predicate: AlertDialog, descendants: true, isSignal: true }], ngImport: i0, template: "<ul\n  role=\"list\"\n  class=\"flex min-w-80 flex-col p-2\"\n  cdkDropList\n  [cdkDropListData]=\"tmpAlerts\"\n  [cdkDropListDisabled]=\"!reordering()\"\n  (cdkDropListDropped)=\"dropped($event)\">\n  @if (floating) {\n    <label class=\"text-xl font-bold\">{{ 'alerts.label' | transloco }}</label>\n    <HorizontalDivider />\n  }\n  @for (alert of tmpAlerts; track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" cdkDrag (click)=\"onClick($index)\" (keydown.enter)=\"onClick($index)\">\n      <i class=\"fa-fw fas fa-bell shrink-0\" aria-hidden=\"true\"></i>\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\n      @if (!reordering()) {\n        <button\n          class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n          title=\"{{ 'alerts.deleteAlert' | transloco }}\"\n          [attr.aria-label]=\"'alerts.deleteAlert' | transloco\"\n          (click)=\"deleteAlert($event, $index)\">\n          <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n        </button>\n      } @else {\n        <i class=\"fa-fw fa-regular fa-bars\"></i>\n      }\n    </li>\n  } @empty {\n    <li role=\"listitem\" class=\"py-4 text-center text-neutral-500\">{{ 'alerts.noAlerts' | transloco }}</li>\n  }\n</ul>\n<div class=\"flex flex-col gap-2 p-2\">\n  <button decoration=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'alerts.manageAlerts' | transloco\" [disabled]=\"!alerts().length\" (click)=\"reorder()\">\n    {{ (reordering() ? 'save' : 'alerts.manageAlerts') | transloco }}\n  </button>\n  <button variant=\"primary\" class=\"w-full\" [attr.title]=\"'alerts.createAlert' | transloco\" (click)=\"createAlert()\">\n    {{ 'alerts.createAlert' | transloco }}\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: HorizontalDividerComponent, selector: "horizontal-divider, HorizontalDivider, horizontaldivider" }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i1$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AlertsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AlertsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'Alerts', standalone: true, imports: [TranslocoPipe, ButtonComponent, HorizontalDividerComponent, ListItemComponent, DragDropModule], providers: [provideTranslocoScope('alerts')], template: "<ul\n  role=\"list\"\n  class=\"flex min-w-80 flex-col p-2\"\n  cdkDropList\n  [cdkDropListData]=\"tmpAlerts\"\n  [cdkDropListDisabled]=\"!reordering()\"\n  (cdkDropListDropped)=\"dropped($event)\">\n  @if (floating) {\n    <label class=\"text-xl font-bold\">{{ 'alerts.label' | transloco }}</label>\n    <MenuSeparator />\n  }\n  @for (alert of tmpAlerts; track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" cdkDrag (click)=\"onClick($index)\" (keydown.enter)=\"onClick($index)\">\n      <i class=\"fa-fw fas fa-bell shrink-0\" aria-hidden=\"true\"></i>\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\n      @if (!reordering()) {\n        <button\n          variant=\"icon\"\n          class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n          title=\"{{ 'alerts.deleteAlert' | transloco }}\"\n          [attr.aria-label]=\"'alerts.deleteAlert' | transloco\"\n          (click)=\"deleteAlert($event, $index)\">\n          <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n        </button>\n      } @else {\n        <i class=\"fa-fw fa-regular fa-bars\"></i>\n      }\n    </li>\n  } @empty {\n    <li role=\"listitem\" class=\"py-4 text-center text-neutral-500\">{{ 'alerts.noAlerts' | transloco }}</li>\n  }\n</ul>\n<div class=\"flex flex-col gap-2 p-2\">\n  <button variant=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'alerts.manageAlerts' | transloco\" [disabled]=\"!alerts().length\" (click)=\"reorder()\">\n    {{ (reordering() ? 'save' : 'alerts.manageAlerts') | transloco }}\n  </button>\n  <button class=\"w-full\" [attr.title]=\"'alerts.createAlert' | transloco\" (click)=\"createAlert()\">{{ 'alerts.createAlert' | transloco }}</button>\n</div>\n" }]
+            args: [{ selector: 'Alerts', standalone: true, imports: [TranslocoPipe, ButtonComponent, HorizontalDividerComponent, ListItemComponent, DragDropModule], providers: [provideTranslocoScope('alerts')], template: "<ul\n  role=\"list\"\n  class=\"flex min-w-80 flex-col p-2\"\n  cdkDropList\n  [cdkDropListData]=\"tmpAlerts\"\n  [cdkDropListDisabled]=\"!reordering()\"\n  (cdkDropListDropped)=\"dropped($event)\">\n  @if (floating) {\n    <label class=\"text-xl font-bold\">{{ 'alerts.label' | transloco }}</label>\n    <HorizontalDivider />\n  }\n  @for (alert of tmpAlerts; track $index) {\n    <li role=\"listitem\" class=\"group h-10\" tabindex=\"0\" cdkDrag (click)=\"onClick($index)\" (keydown.enter)=\"onClick($index)\">\n      <i class=\"fa-fw fas fa-bell shrink-0\" aria-hidden=\"true\"></i>\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\n      @if (!reordering()) {\n        <button\n          class=\"text-destructive hover:text-destructive invisible ms-auto transition-transform hover:scale-125 group-hover:visible\"\n          title=\"{{ 'alerts.deleteAlert' | transloco }}\"\n          [attr.aria-label]=\"'alerts.deleteAlert' | transloco\"\n          (click)=\"deleteAlert($event, $index)\">\n          <i class=\"fa-fw fa-regular fa-trash-can\" aria-hidden=\"true\"></i>\n        </button>\n      } @else {\n        <i class=\"fa-fw fa-regular fa-bars\"></i>\n      }\n    </li>\n  } @empty {\n    <li role=\"listitem\" class=\"py-4 text-center text-neutral-500\">{{ 'alerts.noAlerts' | transloco }}</li>\n  }\n</ul>\n<div class=\"flex flex-col gap-2 p-2\">\n  <button decoration=\"outline\" class=\"w-full\" tabindex=\"0\" [attr.title]=\"'alerts.manageAlerts' | transloco\" [disabled]=\"!alerts().length\" (click)=\"reorder()\">\n    {{ (reordering() ? 'save' : 'alerts.manageAlerts') | transloco }}\n  </button>\n  <button variant=\"primary\" class=\"w-full\" [attr.title]=\"'alerts.createAlert' | transloco\" (click)=\"createAlert()\">\n    {{ 'alerts.createAlert' | transloco }}\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 class OverrideUserDialogComponent {
@@ -8070,8 +8243,8 @@ class OverrideUserDialogComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OverrideUserDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: OverrideUserDialogComponent, isStandalone: true, selector: "override-user-dialog", inputs: { overrideUser: { classPropertyName: "overrideUser", publicName: "overrideUser", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overrideUser: "overrideUserChange" }, providers: [provideTranslocoScope('dialogs')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OverrideUserDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: OverrideUserDialogComponent, isStandalone: true, selector: "override-user-dialog", inputs: { overrideUser: { classPropertyName: "overrideUser", publicName: "overrideUser", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overrideUser: "overrideUserChange" }, providers: [provideTranslocoScope('dialogs')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <dialog #dialog class="max-w-md">
       <DialogHeader>
         <DialogTitle>{{ 'dialogs.overrideUser.title' | transloco }}</DialogTitle>
@@ -8108,7 +8281,7 @@ class OverrideUserDialogComponent {
       </DialogContent>
 
       <DialogFooter>
-        <button variant="outline" (click)="dialog.close($event)">
+        <button decoration="outline" (click)="dialog.close($event)">
           {{ 'cancel' | transloco }}
         </button>
 
@@ -8117,9 +8290,9 @@ class OverrideUserDialogComponent {
         </button>
       </DialogFooter>
     </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", "size"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"password\"], input[type=\"number\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant"] }, { kind: "component", type: DialogComponent, selector: "dialog", inputs: ["class"], outputs: ["closed"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { 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\"]", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: DialogComponent, selector: "dialog", inputs: ["class", "variant"], outputs: ["closed"] }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OverrideUserDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: OverrideUserDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'override-user-dialog',
@@ -8173,7 +8346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
       </DialogContent>
 
       <DialogFooter>
-        <button variant="outline" (click)="dialog.close($event)">
+        <button decoration="outline" (click)="dialog.close($event)">
           {{ 'cancel' | transloco }}
         </button>
 
@@ -8200,8 +8373,8 @@ class ResetUserSettingsDialogComponent {
             notify.success(message, { duration: 2000 });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ResetUserSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: ResetUserSettingsDialogComponent, isStandalone: true, selector: "reset-user-settings-dialog", providers: [provideTranslocoScope('dialogs')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ResetUserSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: ResetUserSettingsDialogComponent, isStandalone: true, selector: "reset-user-settings-dialog", providers: [provideTranslocoScope('dialogs')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <dialog #dialog>
       <DialogHeader>
         <DialogTitle>{{ 'dialogs.resetUserSettings.title' | transloco }}</DialogTitle>
@@ -8212,7 +8385,7 @@ class ResetUserSettingsDialogComponent {
       </DialogContent>
 
       <DialogFooter>
-        <button variant="outline" (click)="dialog.close($event)">
+        <button decoration="outline" (click)="dialog.close($event)">
           {{ 'cancel' | transloco }}
         </button>
 
@@ -8221,9 +8394,9 @@ class ResetUserSettingsDialogComponent {
         </button>
       </DialogFooter>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog", inputs: ["class"], outputs: ["closed"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog", inputs: ["class", "variant"], outputs: ["closed"] }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ResetUserSettingsDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ResetUserSettingsDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'reset-user-settings-dialog',
@@ -8241,7 +8414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
       </DialogContent>
 
       <DialogFooter>
-        <button variant="outline" (click)="dialog.close($event)">
+        <button decoration="outline" (click)="dialog.close($event)">
           {{ 'cancel' | transloco }}
         </button>
 
@@ -8269,12 +8442,12 @@ class DidYouMeanComponent {
         this.queryParamsStore.patch({ spellingCorrectionMode: 'dymonly' });
         this.router.navigate([], { queryParamsHandling: 'merge', queryParams: { c: 'dymonly', q: this.original() } });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DidYouMeanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: DidYouMeanComponent, isStandalone: true, selector: "app-did-you-mean", inputs: { result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope('did-you-mean')], ngImport: i0, template: "@switch (spellingCorrectionMode()?.toLowerCase()) { @case ('dymonly') {\n<p>\n  <span class=\"me-1\">{{ 'didYouMean.didYouMean' | transloco }}</span>\n  <a class=\"text-primary\" role=\"button\" (click)=\"selectCorrected()\">{{ correction() }}</a>\n  <span>?</span>\n</p>\n} @case ('correct') {\n<p>\n  <span class=\"me-1\">{{ 'didYouMean.showingResultsFor' | transloco }}</span>\n  <a class=\"text-primary font-bold\" role=\"button\" (click)=\"selectCorrected()\">{{ correction() }}</a>\n\n  <span class=\"me-1\">. {{ 'didYouMean.searchInsteadFor' | transloco }}</span>\n  <a class=\"text-primary\" role=\"button\" (click)=\"selectOriginal()\">{{ original() }}</a>\n</p>\n} @case ('smart') {\n<p>\n  <span class=\"me-1\">{{ 'didYouMean.showingResultsFor' | transloco }}</span>\n  <a class=\"text-primary\" role=\"button\" (click)=\"selectOriginal()\">{{ original() }}</a>\n\n  <span class=\"mx-1\">and</span>\n  <a class=\"text-primary font-bold\" role=\"button\" (click)=\"selectCorrected()\">{{ correction() }}</a>\n</p>\n} }\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DidYouMeanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DidYouMeanComponent, isStandalone: true, selector: "did-you-mean, DidYouMean, didyoumean", inputs: { result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope('did-you-mean')], ngImport: i0, template: "@switch (spellingCorrectionMode()?.toLowerCase()) {\n  @case ('dymonly') {\n    <p>\n      <span class=\"me-1\">{{ 'didYouMean.didYouMean' | transloco }}</span>\n      <a class=\"text-primary\" role=\"button\" (click)=\"selectCorrected()\">{{ correction() }}</a>\n      <span>?</span>\n    </p>\n  }\n  @case ('correct') {\n    <p>\n      <span class=\"me-1\">{{ 'didYouMean.showingResultsFor' | transloco }}</span>\n      <a class=\"text-primary font-bold\" role=\"button\" (click)=\"selectCorrected()\">{{ correction() }}</a>\n\n      <span class=\"me-1\">. {{ 'didYouMean.searchInsteadFor' | transloco }}</span>\n      <a class=\"text-primary\" role=\"button\" (click)=\"selectOriginal()\">{{ original() }}</a>\n    </p>\n  }\n  @case ('smart') {\n    <p>\n      <span class=\"me-1\">{{ 'didYouMean.showingResultsFor' | transloco }}</span>\n      <a class=\"text-primary\" role=\"button\" (click)=\"selectOriginal()\">{{ original() }}</a>\n\n      <span class=\"mx-1\">and</span>\n      <a class=\"text-primary font-bold\" role=\"button\" (click)=\"selectCorrected()\">{{ correction() }}</a>\n    </p>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DidYouMeanComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DidYouMeanComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-did-you-mean', standalone: true, imports: [RouterModule, TranslocoPipe], providers: [provideTranslocoScope('did-you-mean')], template: "@switch (spellingCorrectionMode()?.toLowerCase()) { @case ('dymonly') {\n<p>\n  <span class=\"me-1\">{{ 'didYouMean.didYouMean' | transloco }}</span>\n  <a class=\"text-primary\" role=\"button\" (click)=\"selectCorrected()\">{{ correction() }}</a>\n  <span>?</span>\n</p>\n} @case ('correct') {\n<p>\n  <span class=\"me-1\">{{ 'didYouMean.showingResultsFor' | transloco }}</span>\n  <a class=\"text-primary font-bold\" role=\"button\" (click)=\"selectCorrected()\">{{ correction() }}</a>\n\n  <span class=\"me-1\">. {{ 'didYouMean.searchInsteadFor' | transloco }}</span>\n  <a class=\"text-primary\" role=\"button\" (click)=\"selectOriginal()\">{{ original() }}</a>\n</p>\n} @case ('smart') {\n<p>\n  <span class=\"me-1\">{{ 'didYouMean.showingResultsFor' | transloco }}</span>\n  <a class=\"text-primary\" role=\"button\" (click)=\"selectOriginal()\">{{ original() }}</a>\n\n  <span class=\"mx-1\">and</span>\n  <a class=\"text-primary font-bold\" role=\"button\" (click)=\"selectCorrected()\">{{ correction() }}</a>\n</p>\n} }\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'did-you-mean, DidYouMean, didyoumean', standalone: true, imports: [RouterModule, TranslocoPipe], providers: [provideTranslocoScope('did-you-mean')], template: "@switch (spellingCorrectionMode()?.toLowerCase()) {\n  @case ('dymonly') {\n    <p>\n      <span class=\"me-1\">{{ 'didYouMean.didYouMean' | transloco }}</span>\n      <a class=\"text-primary\" role=\"button\" (click)=\"selectCorrected()\">{{ correction() }}</a>\n      <span>?</span>\n    </p>\n  }\n  @case ('correct') {\n    <p>\n      <span class=\"me-1\">{{ 'didYouMean.showingResultsFor' | transloco }}</span>\n      <a class=\"text-primary font-bold\" role=\"button\" (click)=\"selectCorrected()\">{{ correction() }}</a>\n\n      <span class=\"me-1\">. {{ 'didYouMean.searchInsteadFor' | transloco }}</span>\n      <a class=\"text-primary\" role=\"button\" (click)=\"selectOriginal()\">{{ original() }}</a>\n    </p>\n  }\n  @case ('smart') {\n    <p>\n      <span class=\"me-1\">{{ 'didYouMean.showingResultsFor' | transloco }}</span>\n      <a class=\"text-primary\" role=\"button\" (click)=\"selectOriginal()\">{{ original() }}</a>\n\n      <span class=\"mx-1\">and</span>\n      <a class=\"text-primary font-bold\" role=\"button\" (click)=\"selectCorrected()\">{{ correction() }}</a>\n    </p>\n  }\n}\n" }]
         }] });
 
 /**
@@ -8393,14 +8566,15 @@ class SignInComponent {
             this.router.navigate(['/']);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SignInComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SignInComponent, isStandalone: true, selector: "signIn, signin, sign-in", providers: [provideTranslocoScope('login')], ngImport: i0, template: "<Card>\n  <CardHeader>\n    <a href=\"#\" title=\"Logo\">\n      <ng-content select=\"[logo]\">\n        <svg\n          version=\"1.1\"\n          id=\"Calque_1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          x=\"0px\"\n          y=\"0px\"\n          viewBox=\"0 0 858 228\"\n          style=\"enable-background: new 0 0 858 228\"\n          xml:space=\"preserve\">\n          <style type=\"text/css\">\n            .st0 {\n              fill: #0040bf;\n            }\n            .st1 {\n              fill: url(#SVGID_1_);\n            }\n            .st2 {\n              fill: url(#SVGID_00000085217246274894832600000009342302383523206054_);\n            }\n          </style>\n          <path\n            class=\"st0\"\n            d=\"M44.7,168.7c-10.1-4.1-17.6-9.9-22.5-17.1c-5-7.3-7.6-15.7-8.1-25.2h25.7c0.5,10.2,4.6,17.9,12.2,23.1\n       c7.6,5.2,18.4,7.8,32.4,7.8c13.5,0,23.5-2.2,30.2-6.5c6.7-4.3,10-10.4,10-18.1c0-6.5-1.7-11.4-5.2-14.6c-3.5-3.2-8.5-5.5-15.1-7\n       c-6.6-1.5-14.6-2.9-24.2-4.1c-12.5-1.6-23.4-3.8-32.7-6.4C38.1,98,31,93.9,25.9,88.4c-5-5.5-7.5-13.1-7.5-22.9\n       c0-9.1,2.6-16.8,7.7-23.1c5.2-6.3,12.5-11.1,22-14.5c9.5-3.3,20.7-5,33.4-5c19.3,0,34.3,3.8,45.1,11.5c10.8,7.7,16.6,18.4,17.4,32.1\n       h-24.9c-0.5-9-4.2-15.6-11.1-19.9c-6.9-4.3-16.1-6.4-27.6-6.4c-11.8,0-21,2-27.4,6.1c-6.5,4.1-9.7,9.6-9.7,16.5\n       c0,5.8,1.6,10.2,4.7,13.1c3.1,2.9,7.9,5.1,14.3,6.5c6.4,1.4,14.5,2.8,24.3,4c9.6,1.2,18.3,2.7,26.1,4.4c7.7,1.7,14.4,4.1,20,7.2\n       c5.6,3.1,9.8,7.3,12.7,12.5c2.9,5.2,4.4,12,4.4,20.3c0,13.6-5.6,24.3-16.9,32.2c-11.3,7.9-27.7,11.8-49.3,11.8\n       C67.7,174.9,54.7,172.9,44.7,168.7z\" />\n          <path\n            class=\"st0\"\n            d=\"M346.6,168.2c-9.4-4.5-16.6-10.9-21.7-19.2c-5.1-8.3-7.6-18.1-7.6-29.4c0-11.5,2.5-21.5,7.6-29.9\n       c5.1-8.4,12.3-14.8,21.5-19.4c9.2-4.6,20.1-6.8,32.6-6.8c13,0,24.2,2.4,33.3,7.1c9.2,4.8,16.1,11.6,20.7,20.6\n       c4.6,9,6.5,19.8,5.7,32.4h-97.8c0.3,10.9,3.9,19.3,10.9,25.3c7,6,16.5,9,28.4,9c9.2,0,17-1.7,23.2-5c6.2-3.3,10.3-7.8,12-13.4h22.6\n       c-1.1,7.1-4.3,13.2-9.7,18.5c-5.4,5.3-12.3,9.4-20.7,12.3c-8.4,2.9-17.8,4.4-28.1,4.4C367,174.9,356,172.7,346.6,168.2z M352.5,88.4\n       c-6.7,5.2-10.6,12.4-11.8,21.5h74.4c-0.4-9.4-3.8-16.6-10.3-21.7c-6.5-5.1-15.1-7.6-26-7.6C367.9,80.6,359.2,83.2,352.5,88.4z\" />\n          <path\n            class=\"st0\"\n            d=\"M546,151.9h-1c-3.4,7.1-9,12.7-16.9,16.8c-7.9,4.1-16.7,6.2-26.5,6.2c-10.7,0-20.1-2.3-28.1-6.8\n       c-8-4.6-14.3-11-18.8-19.5c-4.5-8.4-6.7-18.3-6.7-29.6c0-11.4,2.2-21.3,6.7-29.6c4.5-8.3,10.8-14.7,18.9-19.2\n       c8.1-4.5,17.4-6.7,28-6.7c11,0,20.3,2,27.8,6c7.5,4,12.9,9.3,16,15.8h1l0.8-20.2h22.4v141.9H546V151.9z M528.6,151.9\n       c5.6-3.1,10-7.3,12.9-12.4c3-5.2,4.5-10.7,4.5-16.7v-7.9c0-6-1.5-11.4-4.5-16.4c-3-5-7.3-8.9-12.9-11.9c-5.6-3-12.5-4.5-20.5-4.5\n       c-10.7,0-19.5,3.2-26.2,9.7c-6.7,6.5-10.1,15.6-10.1,27.4c0,11.6,3.3,20.7,10,27.4c6.7,6.7,15.4,10.1,26.3,10.1\n       C516.1,156.6,522.9,155,528.6,151.9z\" />\n          <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"780.8157\" y1=\"119.2805\" x2=\"690.0867\" y2=\"119.2805\">\n            <stop offset=\"0\" style=\"stop-color: #ff854a\" />\n            <stop offset=\"0.8407\" style=\"stop-color: #0040bf\" />\n          </linearGradient>\n          <path\n            class=\"st1\"\n            d=\"M803.4,65.3l-0.8,20.2h-1c-3.3-6.5-8.6-11.8-16.1-15.8c-7.5-4-16.7-6-27.7-6c-10.6,0-19.9,2.2-28,6.7\n       c-8.1,4.5-14.4,10.9-18.9,19.2c-4.5,8.3-6.7,18.2-6.7,29.8c0,11.3,2.2,21.1,6.7,29.5s10.7,14.8,18.8,19.4c8,4.6,17.4,6.8,28.1,6.8\n       c9.9,0,18.8-2.1,26.6-6.2c7.8-4.1,14.4-12.2,17.8-19.3h23.6V65.3H803.4z M802.2,122.7c0,6-1.5,11.6-4.5,16.7\n       c-3,5.2-7.3,9.3-12.9,12.4c-5.6,3.1-12.5,4.7-20.5,4.7c-10.9,0-19.6-3.3-26.3-10c-6.7-6.7-10-15.8-10-27.3c0-12,3.4-21.2,10.1-27.6\n       c6.7-6.5,15.5-9.7,26.2-9.7c8,0,14.8,1.5,20.5,4.5c5.6,3,10,7,12.9,11.9c3,5,4.5,10.4,4.5,16.2V122.7z\" />\n          <linearGradient\n            id=\"SVGID_00000152963432808947599350000011020247854886079881_\"\n            gradientUnits=\"userSpaceOnUse\"\n            x1=\"780.8157\"\n            y1=\"161.271\"\n            x2=\"690.0867\"\n            y2=\"161.271\">\n            <stop offset=\"0\" style=\"stop-color: #ff854a\" />\n            <stop offset=\"0.8407\" style=\"stop-color: #0040bf\" />\n          </linearGradient>\n          <path\n            style=\"fill: url(#SVGID_00000152963432808947599350000011020247854886079881_)\"\n            d=\"M843.9,161.3c0,6.5-5.3,11.8-11.8,11.8l0,0\n       c-6.5,0-11.8-5.3-11.8-11.8v0c0-6.5,5.3-11.8,11.8-11.8l0,0C838.6,149.4,843.9,154.7,843.9,161.3\" />\n          <rect x=\"159.2\" y=\"25.3\" class=\"st0\" width=\"23.6\" height=\"23.6\" />\n          <g>\n            <polygon class=\"st0\" points=\"159.2,149.4 159.2,173.1 182.8,173.1 182.8,149.4 182.8,65.3 159.2,65.3 \t\" />\n            <rect x=\"159.2\" y=\"25.3\" class=\"st0\" width=\"23.6\" height=\"23.6\" />\n          </g>\n          <path\n            class=\"st0\"\n            d=\"M302.7,84.2c-4-7.3-9.5-12.6-16.5-15.8c-7-3.2-15.1-4.8-24.4-4.8c-9.2,0-17.8,2.1-25.8,6.2\n       c-7.9,4.1-13.9,10-17.8,17.6h-1.4l-0.6-22.2h-23v107.8h23.6v-53.4c0-7.5,1.6-14,4.7-19.7c3.1-5.6,7.5-10.1,13.1-13.2\n       c5.6-3.2,12.2-4.8,19.7-4.8c10.6,0,18.4,3,23.3,8.9c5,5.9,7.4,15,7.4,27.2v55h23.6V114C308.7,101.5,306.7,91.6,302.7,84.2z\" />\n          <path\n            class=\"st0\"\n            d=\"M671.7,65.3v53.4c0,7.5-1.6,14.1-4.7,19.8c-3.1,5.7-7.5,10.2-13.1,13.4c-5.6,3.2-12.2,4.8-19.7,4.8\n       c-10.7,0-18.6-3-23.5-9.1c-5-6-7.4-15-7.4-27V65.3h-23.4v59.5c0,12.2,2,22,5.9,29.4c3.9,7.3,9.4,12.6,16.5,15.9\n       c7.1,3.3,15.2,4.9,24.5,4.9c9.6,0,18.4-2.1,26.2-6.3c7.6-4.1,15-11.3,18.9-18.6v23.1h23.4v-23.6v-5.2v-79H671.7z\" />\n        </svg>\n      </ng-content>\n    </a>\n    @if (authenticated()) {\n    <h3 class=\"whitespace-nowrap text-2xl font-semibold tracking-tight\">{{ 'login.welcomeBack' | transloco : { name: user()?.fullName ?? '' } }}</h3>\n    <p class=\"text-muted-foreground text-sm\">{{ 'login.youAreLoggedIn' | transloco }}</p>\n    }\n  </CardHeader>\n\n  @if (!authenticated()) {\n  <CardContent>\n    <div class=\"grid gap-4\">\n      @if (!config.autoOAuthProvider && !config.autoSAMLProvider) {\n      <div class=\"grid gap-2\">\n        <label class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"username\"\n          >{{ 'login.username' | transloco }}</label\n        >\n\n        <input\n          type=\"text\"\n          id=\"username\"\n          required\n          [ngModel]=\"credentials().username\"\n          (ngModelChange)=\"updateCredentials({ username: $event })\"\n          (keydown.enter)=\"handleLoginWithCredentials()\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <div class=\"flex items-center\">\n          <label class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"password\"\n            >{{ 'login.password' | transloco }}</label\n          >\n        </div>\n        <input\n          type=\"password\"\n          id=\"password\"\n          required\n          [ngModel]=\"credentials().password\"\n          (ngModelChange)=\"updateCredentials({ password: $event })\"\n          (keydown.enter)=\"handleLoginWithCredentials()\" />\n      </div>\n      <button [disabled]=\"!valid()\" (click)=\"handleLoginWithCredentials()\">{{ 'login.connect' | transloco }}</button>\n      } @else {\n      <button (click)=\"handleLogin()\">{{ 'login.SignInWith' | transloco: { provider: config.autoOAuthProvider ? 'OAuth' : 'SAML' } }}</button>\n      }\n    </div>\n  </CardContent>\n  } @else {\n  <CardFooter class=\"justify-between gap-2\">\n    <button class=\"w-full\" (click)=\"handleLogout()\" type=\"submit\">{{ 'login.disconnect' | transloco }}</button>\n    <button class=\"w-full\" variant=\"ghost\" (click)=\"handleBack()\">{{ 'login.back' | transloco }}</button>\n  </CardFooter>\n  }\n</Card>\n", styles: [":host{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:2rem}.btn-primary{background-color:#000;color:#fff}\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: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"password\"], input[type=\"number\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "directive", type: CardComponent, selector: ".card, card, Card", inputs: ["class"] }, { 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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SignInComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: SignInComponent, isStandalone: true, selector: "signIn, signin, sign-in", providers: [provideTranslocoScope('login')], ngImport: i0, template: "<Card hover=\"no\" cdkTrapFocus cdkTrapFocusAutoCapture=\"true\">\n  <CardHeader>\n    <ng-content select=\"[logo]\">\n      <svg\n        version=\"1.1\"\n        id=\"Calque_1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 858 228\"\n        style=\"enable-background: new 0 0 858 228\"\n        xml:space=\"preserve\">\n        <style type=\"text/css\">\n          .st0 {\n            fill: #0040bf;\n          }\n          .st1 {\n            fill: url(#SVGID_1_);\n          }\n          .st2 {\n            fill: url(#SVGID_00000085217246274894832600000009342302383523206054_);\n          }\n        </style>\n        <path\n          class=\"st0\"\n          d=\"M44.7,168.7c-10.1-4.1-17.6-9.9-22.5-17.1c-5-7.3-7.6-15.7-8.1-25.2h25.7c0.5,10.2,4.6,17.9,12.2,23.1\n      c7.6,5.2,18.4,7.8,32.4,7.8c13.5,0,23.5-2.2,30.2-6.5c6.7-4.3,10-10.4,10-18.1c0-6.5-1.7-11.4-5.2-14.6c-3.5-3.2-8.5-5.5-15.1-7\n      c-6.6-1.5-14.6-2.9-24.2-4.1c-12.5-1.6-23.4-3.8-32.7-6.4C38.1,98,31,93.9,25.9,88.4c-5-5.5-7.5-13.1-7.5-22.9\n      c0-9.1,2.6-16.8,7.7-23.1c5.2-6.3,12.5-11.1,22-14.5c9.5-3.3,20.7-5,33.4-5c19.3,0,34.3,3.8,45.1,11.5c10.8,7.7,16.6,18.4,17.4,32.1\n      h-24.9c-0.5-9-4.2-15.6-11.1-19.9c-6.9-4.3-16.1-6.4-27.6-6.4c-11.8,0-21,2-27.4,6.1c-6.5,4.1-9.7,9.6-9.7,16.5\n      c0,5.8,1.6,10.2,4.7,13.1c3.1,2.9,7.9,5.1,14.3,6.5c6.4,1.4,14.5,2.8,24.3,4c9.6,1.2,18.3,2.7,26.1,4.4c7.7,1.7,14.4,4.1,20,7.2\n      c5.6,3.1,9.8,7.3,12.7,12.5c2.9,5.2,4.4,12,4.4,20.3c0,13.6-5.6,24.3-16.9,32.2c-11.3,7.9-27.7,11.8-49.3,11.8\n      C67.7,174.9,54.7,172.9,44.7,168.7z\" />\n        <path\n          class=\"st0\"\n          d=\"M346.6,168.2c-9.4-4.5-16.6-10.9-21.7-19.2c-5.1-8.3-7.6-18.1-7.6-29.4c0-11.5,2.5-21.5,7.6-29.9\n      c5.1-8.4,12.3-14.8,21.5-19.4c9.2-4.6,20.1-6.8,32.6-6.8c13,0,24.2,2.4,33.3,7.1c9.2,4.8,16.1,11.6,20.7,20.6\n      c4.6,9,6.5,19.8,5.7,32.4h-97.8c0.3,10.9,3.9,19.3,10.9,25.3c7,6,16.5,9,28.4,9c9.2,0,17-1.7,23.2-5c6.2-3.3,10.3-7.8,12-13.4h22.6\n      c-1.1,7.1-4.3,13.2-9.7,18.5c-5.4,5.3-12.3,9.4-20.7,12.3c-8.4,2.9-17.8,4.4-28.1,4.4C367,174.9,356,172.7,346.6,168.2z M352.5,88.4\n      c-6.7,5.2-10.6,12.4-11.8,21.5h74.4c-0.4-9.4-3.8-16.6-10.3-21.7c-6.5-5.1-15.1-7.6-26-7.6C367.9,80.6,359.2,83.2,352.5,88.4z\" />\n        <path\n          class=\"st0\"\n          d=\"M546,151.9h-1c-3.4,7.1-9,12.7-16.9,16.8c-7.9,4.1-16.7,6.2-26.5,6.2c-10.7,0-20.1-2.3-28.1-6.8\n      c-8-4.6-14.3-11-18.8-19.5c-4.5-8.4-6.7-18.3-6.7-29.6c0-11.4,2.2-21.3,6.7-29.6c4.5-8.3,10.8-14.7,18.9-19.2\n      c8.1-4.5,17.4-6.7,28-6.7c11,0,20.3,2,27.8,6c7.5,4,12.9,9.3,16,15.8h1l0.8-20.2h22.4v141.9H546V151.9z M528.6,151.9\n      c5.6-3.1,10-7.3,12.9-12.4c3-5.2,4.5-10.7,4.5-16.7v-7.9c0-6-1.5-11.4-4.5-16.4c-3-5-7.3-8.9-12.9-11.9c-5.6-3-12.5-4.5-20.5-4.5\n      c-10.7,0-19.5,3.2-26.2,9.7c-6.7,6.5-10.1,15.6-10.1,27.4c0,11.6,3.3,20.7,10,27.4c6.7,6.7,15.4,10.1,26.3,10.1\n      C516.1,156.6,522.9,155,528.6,151.9z\" />\n        <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"780.8157\" y1=\"119.2805\" x2=\"690.0867\" y2=\"119.2805\">\n          <stop offset=\"0\" style=\"stop-color: #ff854a\" />\n          <stop offset=\"0.8407\" style=\"stop-color: #0040bf\" />\n        </linearGradient>\n        <path\n          class=\"st1\"\n          d=\"M803.4,65.3l-0.8,20.2h-1c-3.3-6.5-8.6-11.8-16.1-15.8c-7.5-4-16.7-6-27.7-6c-10.6,0-19.9,2.2-28,6.7\n      c-8.1,4.5-14.4,10.9-18.9,19.2c-4.5,8.3-6.7,18.2-6.7,29.8c0,11.3,2.2,21.1,6.7,29.5s10.7,14.8,18.8,19.4c8,4.6,17.4,6.8,28.1,6.8\n      c9.9,0,18.8-2.1,26.6-6.2c7.8-4.1,14.4-12.2,17.8-19.3h23.6V65.3H803.4z M802.2,122.7c0,6-1.5,11.6-4.5,16.7\n      c-3,5.2-7.3,9.3-12.9,12.4c-5.6,3.1-12.5,4.7-20.5,4.7c-10.9,0-19.6-3.3-26.3-10c-6.7-6.7-10-15.8-10-27.3c0-12,3.4-21.2,10.1-27.6\n      c6.7-6.5,15.5-9.7,26.2-9.7c8,0,14.8,1.5,20.5,4.5c5.6,3,10,7,12.9,11.9c3,5,4.5,10.4,4.5,16.2V122.7z\" />\n        <linearGradient\n          id=\"SVGID_00000152963432808947599350000011020247854886079881_\"\n          gradientUnits=\"userSpaceOnUse\"\n          x1=\"780.8157\"\n          y1=\"161.271\"\n          x2=\"690.0867\"\n          y2=\"161.271\">\n          <stop offset=\"0\" style=\"stop-color: #ff854a\" />\n          <stop offset=\"0.8407\" style=\"stop-color: #0040bf\" />\n        </linearGradient>\n        <path\n          style=\"fill: url(#SVGID_00000152963432808947599350000011020247854886079881_)\"\n          d=\"M843.9,161.3c0,6.5-5.3,11.8-11.8,11.8l0,0\n      c-6.5,0-11.8-5.3-11.8-11.8v0c0-6.5,5.3-11.8,11.8-11.8l0,0C838.6,149.4,843.9,154.7,843.9,161.3\" />\n        <rect x=\"159.2\" y=\"25.3\" class=\"st0\" width=\"23.6\" height=\"23.6\" />\n        <g>\n          <polygon class=\"st0\" points=\"159.2,149.4 159.2,173.1 182.8,173.1 182.8,149.4 182.8,65.3 159.2,65.3 \t\" />\n          <rect x=\"159.2\" y=\"25.3\" class=\"st0\" width=\"23.6\" height=\"23.6\" />\n        </g>\n        <path\n          class=\"st0\"\n          d=\"M302.7,84.2c-4-7.3-9.5-12.6-16.5-15.8c-7-3.2-15.1-4.8-24.4-4.8c-9.2,0-17.8,2.1-25.8,6.2\n      c-7.9,4.1-13.9,10-17.8,17.6h-1.4l-0.6-22.2h-23v107.8h23.6v-53.4c0-7.5,1.6-14,4.7-19.7c3.1-5.6,7.5-10.1,13.1-13.2\n      c5.6-3.2,12.2-4.8,19.7-4.8c10.6,0,18.4,3,23.3,8.9c5,5.9,7.4,15,7.4,27.2v55h23.6V114C308.7,101.5,306.7,91.6,302.7,84.2z\" />\n        <path\n          class=\"st0\"\n          d=\"M671.7,65.3v53.4c0,7.5-1.6,14.1-4.7,19.8c-3.1,5.7-7.5,10.2-13.1,13.4c-5.6,3.2-12.2,4.8-19.7,4.8\n      c-10.7,0-18.6-3-23.5-9.1c-5-6-7.4-15-7.4-27V65.3h-23.4v59.5c0,12.2,2,22,5.9,29.4c3.9,7.3,9.4,12.6,16.5,15.9\n      c7.1,3.3,15.2,4.9,24.5,4.9c9.6,0,18.4-2.1,26.2-6.3c7.6-4.1,15-11.3,18.9-18.6v23.1h23.4v-23.6v-5.2v-79H671.7z\" />\n      </svg>\n    </ng-content>\n    @if (authenticated()) {\n      <h3 class=\"whitespace-nowrap text-2xl font-semibold tracking-tight\">{{ 'login.welcomeBack' | transloco: { name: user()?.fullName ?? '' } }}</h3>\n      <p class=\"text-muted-foreground text-sm\">{{ 'login.youAreLoggedIn' | transloco }}</p>\n    }\n  </CardHeader>\n\n  @if (!authenticated()) {\n    <CardContent>\n      <div class=\"grid gap-4\">\n        @if (!config.autoOAuthProvider && !config.autoSAMLProvider) {\n          <div class=\"grid gap-2\">\n            <label class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"username\">{{\n              'login.username' | transloco\n            }}</label>\n\n            <input\n              type=\"text\"\n              id=\"username\"\n              required\n              [ngModel]=\"credentials().username\"\n              (ngModelChange)=\"updateCredentials({ username: $event })\"\n              (keydown.enter)=\"handleLoginWithCredentials()\" />\n          </div>\n\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <label class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"password\">\n                {{ 'login.password' | transloco }}\n              </label>\n            </div>\n\n            <input\n              type=\"password\"\n              id=\"password\"\n              required\n              [ngModel]=\"credentials().password\"\n              (ngModelChange)=\"updateCredentials({ password: $event })\"\n              (keydown.enter)=\"handleLoginWithCredentials()\" />\n          </div>\n\n          <button [disabled]=\"!valid()\" (click)=\"handleLoginWithCredentials()\">{{ 'login.connect' | transloco }}</button>\n        } @else {\n          <button (click)=\"handleLogin()\">{{ 'login.SignInWith' | transloco: { provider: config.autoOAuthProvider ? 'OAuth' : 'SAML' } }}</button>\n        }\n      </div>\n    </CardContent>\n  }\n\n  @if (authenticated()) {\n    <CardFooter class=\"justify-between gap-2\">\n      <button class=\"w-full\" (click)=\"handleLogout()\" type=\"submit\">{{ 'login.disconnect' | transloco }}</button>\n      <button class=\"w-full\" variant=\"ghost\" (click)=\"handleBack()\">{{ 'login.back' | transloco }}</button>\n    </CardFooter>\n  }\n</Card>\n", styles: [":host{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:2rem}.btn-primary{background-color:#000;color:#fff}\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\"]", 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.1.2", ngImport: i0, type: SignInComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,
             args: [{ selector: 'signIn, signin, sign-in', standalone: true, providers: [provideTranslocoScope('login')], imports: [
                         RouterModule,
                         FormsModule,
+                        A11yModule,
                         TranslocoPipe,
                         InputComponent,
                         ButtonComponent,
@@ -8408,7 +8582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
                         CardHeaderComponent,
                         CardContentComponent,
                         CardFooterComponent
-                    ], template: "<Card>\n  <CardHeader>\n    <a href=\"#\" title=\"Logo\">\n      <ng-content select=\"[logo]\">\n        <svg\n          version=\"1.1\"\n          id=\"Calque_1\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n          x=\"0px\"\n          y=\"0px\"\n          viewBox=\"0 0 858 228\"\n          style=\"enable-background: new 0 0 858 228\"\n          xml:space=\"preserve\">\n          <style type=\"text/css\">\n            .st0 {\n              fill: #0040bf;\n            }\n            .st1 {\n              fill: url(#SVGID_1_);\n            }\n            .st2 {\n              fill: url(#SVGID_00000085217246274894832600000009342302383523206054_);\n            }\n          </style>\n          <path\n            class=\"st0\"\n            d=\"M44.7,168.7c-10.1-4.1-17.6-9.9-22.5-17.1c-5-7.3-7.6-15.7-8.1-25.2h25.7c0.5,10.2,4.6,17.9,12.2,23.1\n       c7.6,5.2,18.4,7.8,32.4,7.8c13.5,0,23.5-2.2,30.2-6.5c6.7-4.3,10-10.4,10-18.1c0-6.5-1.7-11.4-5.2-14.6c-3.5-3.2-8.5-5.5-15.1-7\n       c-6.6-1.5-14.6-2.9-24.2-4.1c-12.5-1.6-23.4-3.8-32.7-6.4C38.1,98,31,93.9,25.9,88.4c-5-5.5-7.5-13.1-7.5-22.9\n       c0-9.1,2.6-16.8,7.7-23.1c5.2-6.3,12.5-11.1,22-14.5c9.5-3.3,20.7-5,33.4-5c19.3,0,34.3,3.8,45.1,11.5c10.8,7.7,16.6,18.4,17.4,32.1\n       h-24.9c-0.5-9-4.2-15.6-11.1-19.9c-6.9-4.3-16.1-6.4-27.6-6.4c-11.8,0-21,2-27.4,6.1c-6.5,4.1-9.7,9.6-9.7,16.5\n       c0,5.8,1.6,10.2,4.7,13.1c3.1,2.9,7.9,5.1,14.3,6.5c6.4,1.4,14.5,2.8,24.3,4c9.6,1.2,18.3,2.7,26.1,4.4c7.7,1.7,14.4,4.1,20,7.2\n       c5.6,3.1,9.8,7.3,12.7,12.5c2.9,5.2,4.4,12,4.4,20.3c0,13.6-5.6,24.3-16.9,32.2c-11.3,7.9-27.7,11.8-49.3,11.8\n       C67.7,174.9,54.7,172.9,44.7,168.7z\" />\n          <path\n            class=\"st0\"\n            d=\"M346.6,168.2c-9.4-4.5-16.6-10.9-21.7-19.2c-5.1-8.3-7.6-18.1-7.6-29.4c0-11.5,2.5-21.5,7.6-29.9\n       c5.1-8.4,12.3-14.8,21.5-19.4c9.2-4.6,20.1-6.8,32.6-6.8c13,0,24.2,2.4,33.3,7.1c9.2,4.8,16.1,11.6,20.7,20.6\n       c4.6,9,6.5,19.8,5.7,32.4h-97.8c0.3,10.9,3.9,19.3,10.9,25.3c7,6,16.5,9,28.4,9c9.2,0,17-1.7,23.2-5c6.2-3.3,10.3-7.8,12-13.4h22.6\n       c-1.1,7.1-4.3,13.2-9.7,18.5c-5.4,5.3-12.3,9.4-20.7,12.3c-8.4,2.9-17.8,4.4-28.1,4.4C367,174.9,356,172.7,346.6,168.2z M352.5,88.4\n       c-6.7,5.2-10.6,12.4-11.8,21.5h74.4c-0.4-9.4-3.8-16.6-10.3-21.7c-6.5-5.1-15.1-7.6-26-7.6C367.9,80.6,359.2,83.2,352.5,88.4z\" />\n          <path\n            class=\"st0\"\n            d=\"M546,151.9h-1c-3.4,7.1-9,12.7-16.9,16.8c-7.9,4.1-16.7,6.2-26.5,6.2c-10.7,0-20.1-2.3-28.1-6.8\n       c-8-4.6-14.3-11-18.8-19.5c-4.5-8.4-6.7-18.3-6.7-29.6c0-11.4,2.2-21.3,6.7-29.6c4.5-8.3,10.8-14.7,18.9-19.2\n       c8.1-4.5,17.4-6.7,28-6.7c11,0,20.3,2,27.8,6c7.5,4,12.9,9.3,16,15.8h1l0.8-20.2h22.4v141.9H546V151.9z M528.6,151.9\n       c5.6-3.1,10-7.3,12.9-12.4c3-5.2,4.5-10.7,4.5-16.7v-7.9c0-6-1.5-11.4-4.5-16.4c-3-5-7.3-8.9-12.9-11.9c-5.6-3-12.5-4.5-20.5-4.5\n       c-10.7,0-19.5,3.2-26.2,9.7c-6.7,6.5-10.1,15.6-10.1,27.4c0,11.6,3.3,20.7,10,27.4c6.7,6.7,15.4,10.1,26.3,10.1\n       C516.1,156.6,522.9,155,528.6,151.9z\" />\n          <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"780.8157\" y1=\"119.2805\" x2=\"690.0867\" y2=\"119.2805\">\n            <stop offset=\"0\" style=\"stop-color: #ff854a\" />\n            <stop offset=\"0.8407\" style=\"stop-color: #0040bf\" />\n          </linearGradient>\n          <path\n            class=\"st1\"\n            d=\"M803.4,65.3l-0.8,20.2h-1c-3.3-6.5-8.6-11.8-16.1-15.8c-7.5-4-16.7-6-27.7-6c-10.6,0-19.9,2.2-28,6.7\n       c-8.1,4.5-14.4,10.9-18.9,19.2c-4.5,8.3-6.7,18.2-6.7,29.8c0,11.3,2.2,21.1,6.7,29.5s10.7,14.8,18.8,19.4c8,4.6,17.4,6.8,28.1,6.8\n       c9.9,0,18.8-2.1,26.6-6.2c7.8-4.1,14.4-12.2,17.8-19.3h23.6V65.3H803.4z M802.2,122.7c0,6-1.5,11.6-4.5,16.7\n       c-3,5.2-7.3,9.3-12.9,12.4c-5.6,3.1-12.5,4.7-20.5,4.7c-10.9,0-19.6-3.3-26.3-10c-6.7-6.7-10-15.8-10-27.3c0-12,3.4-21.2,10.1-27.6\n       c6.7-6.5,15.5-9.7,26.2-9.7c8,0,14.8,1.5,20.5,4.5c5.6,3,10,7,12.9,11.9c3,5,4.5,10.4,4.5,16.2V122.7z\" />\n          <linearGradient\n            id=\"SVGID_00000152963432808947599350000011020247854886079881_\"\n            gradientUnits=\"userSpaceOnUse\"\n            x1=\"780.8157\"\n            y1=\"161.271\"\n            x2=\"690.0867\"\n            y2=\"161.271\">\n            <stop offset=\"0\" style=\"stop-color: #ff854a\" />\n            <stop offset=\"0.8407\" style=\"stop-color: #0040bf\" />\n          </linearGradient>\n          <path\n            style=\"fill: url(#SVGID_00000152963432808947599350000011020247854886079881_)\"\n            d=\"M843.9,161.3c0,6.5-5.3,11.8-11.8,11.8l0,0\n       c-6.5,0-11.8-5.3-11.8-11.8v0c0-6.5,5.3-11.8,11.8-11.8l0,0C838.6,149.4,843.9,154.7,843.9,161.3\" />\n          <rect x=\"159.2\" y=\"25.3\" class=\"st0\" width=\"23.6\" height=\"23.6\" />\n          <g>\n            <polygon class=\"st0\" points=\"159.2,149.4 159.2,173.1 182.8,173.1 182.8,149.4 182.8,65.3 159.2,65.3 \t\" />\n            <rect x=\"159.2\" y=\"25.3\" class=\"st0\" width=\"23.6\" height=\"23.6\" />\n          </g>\n          <path\n            class=\"st0\"\n            d=\"M302.7,84.2c-4-7.3-9.5-12.6-16.5-15.8c-7-3.2-15.1-4.8-24.4-4.8c-9.2,0-17.8,2.1-25.8,6.2\n       c-7.9,4.1-13.9,10-17.8,17.6h-1.4l-0.6-22.2h-23v107.8h23.6v-53.4c0-7.5,1.6-14,4.7-19.7c3.1-5.6,7.5-10.1,13.1-13.2\n       c5.6-3.2,12.2-4.8,19.7-4.8c10.6,0,18.4,3,23.3,8.9c5,5.9,7.4,15,7.4,27.2v55h23.6V114C308.7,101.5,306.7,91.6,302.7,84.2z\" />\n          <path\n            class=\"st0\"\n            d=\"M671.7,65.3v53.4c0,7.5-1.6,14.1-4.7,19.8c-3.1,5.7-7.5,10.2-13.1,13.4c-5.6,3.2-12.2,4.8-19.7,4.8\n       c-10.7,0-18.6-3-23.5-9.1c-5-6-7.4-15-7.4-27V65.3h-23.4v59.5c0,12.2,2,22,5.9,29.4c3.9,7.3,9.4,12.6,16.5,15.9\n       c7.1,3.3,15.2,4.9,24.5,4.9c9.6,0,18.4-2.1,26.2-6.3c7.6-4.1,15-11.3,18.9-18.6v23.1h23.4v-23.6v-5.2v-79H671.7z\" />\n        </svg>\n      </ng-content>\n    </a>\n    @if (authenticated()) {\n    <h3 class=\"whitespace-nowrap text-2xl font-semibold tracking-tight\">{{ 'login.welcomeBack' | transloco : { name: user()?.fullName ?? '' } }}</h3>\n    <p class=\"text-muted-foreground text-sm\">{{ 'login.youAreLoggedIn' | transloco }}</p>\n    }\n  </CardHeader>\n\n  @if (!authenticated()) {\n  <CardContent>\n    <div class=\"grid gap-4\">\n      @if (!config.autoOAuthProvider && !config.autoSAMLProvider) {\n      <div class=\"grid gap-2\">\n        <label class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"username\"\n          >{{ 'login.username' | transloco }}</label\n        >\n\n        <input\n          type=\"text\"\n          id=\"username\"\n          required\n          [ngModel]=\"credentials().username\"\n          (ngModelChange)=\"updateCredentials({ username: $event })\"\n          (keydown.enter)=\"handleLoginWithCredentials()\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <div class=\"flex items-center\">\n          <label class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"password\"\n            >{{ 'login.password' | transloco }}</label\n          >\n        </div>\n        <input\n          type=\"password\"\n          id=\"password\"\n          required\n          [ngModel]=\"credentials().password\"\n          (ngModelChange)=\"updateCredentials({ password: $event })\"\n          (keydown.enter)=\"handleLoginWithCredentials()\" />\n      </div>\n      <button [disabled]=\"!valid()\" (click)=\"handleLoginWithCredentials()\">{{ 'login.connect' | transloco }}</button>\n      } @else {\n      <button (click)=\"handleLogin()\">{{ 'login.SignInWith' | transloco: { provider: config.autoOAuthProvider ? 'OAuth' : 'SAML' } }}</button>\n      }\n    </div>\n  </CardContent>\n  } @else {\n  <CardFooter class=\"justify-between gap-2\">\n    <button class=\"w-full\" (click)=\"handleLogout()\" type=\"submit\">{{ 'login.disconnect' | transloco }}</button>\n    <button class=\"w-full\" variant=\"ghost\" (click)=\"handleBack()\">{{ 'login.back' | transloco }}</button>\n  </CardFooter>\n  }\n</Card>\n", styles: [":host{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:2rem}.btn-primary{background-color:#000;color:#fff}\n"] }]
+                    ], template: "<Card hover=\"no\" cdkTrapFocus cdkTrapFocusAutoCapture=\"true\">\n  <CardHeader>\n    <ng-content select=\"[logo]\">\n      <svg\n        version=\"1.1\"\n        id=\"Calque_1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 858 228\"\n        style=\"enable-background: new 0 0 858 228\"\n        xml:space=\"preserve\">\n        <style type=\"text/css\">\n          .st0 {\n            fill: #0040bf;\n          }\n          .st1 {\n            fill: url(#SVGID_1_);\n          }\n          .st2 {\n            fill: url(#SVGID_00000085217246274894832600000009342302383523206054_);\n          }\n        </style>\n        <path\n          class=\"st0\"\n          d=\"M44.7,168.7c-10.1-4.1-17.6-9.9-22.5-17.1c-5-7.3-7.6-15.7-8.1-25.2h25.7c0.5,10.2,4.6,17.9,12.2,23.1\n      c7.6,5.2,18.4,7.8,32.4,7.8c13.5,0,23.5-2.2,30.2-6.5c6.7-4.3,10-10.4,10-18.1c0-6.5-1.7-11.4-5.2-14.6c-3.5-3.2-8.5-5.5-15.1-7\n      c-6.6-1.5-14.6-2.9-24.2-4.1c-12.5-1.6-23.4-3.8-32.7-6.4C38.1,98,31,93.9,25.9,88.4c-5-5.5-7.5-13.1-7.5-22.9\n      c0-9.1,2.6-16.8,7.7-23.1c5.2-6.3,12.5-11.1,22-14.5c9.5-3.3,20.7-5,33.4-5c19.3,0,34.3,3.8,45.1,11.5c10.8,7.7,16.6,18.4,17.4,32.1\n      h-24.9c-0.5-9-4.2-15.6-11.1-19.9c-6.9-4.3-16.1-6.4-27.6-6.4c-11.8,0-21,2-27.4,6.1c-6.5,4.1-9.7,9.6-9.7,16.5\n      c0,5.8,1.6,10.2,4.7,13.1c3.1,2.9,7.9,5.1,14.3,6.5c6.4,1.4,14.5,2.8,24.3,4c9.6,1.2,18.3,2.7,26.1,4.4c7.7,1.7,14.4,4.1,20,7.2\n      c5.6,3.1,9.8,7.3,12.7,12.5c2.9,5.2,4.4,12,4.4,20.3c0,13.6-5.6,24.3-16.9,32.2c-11.3,7.9-27.7,11.8-49.3,11.8\n      C67.7,174.9,54.7,172.9,44.7,168.7z\" />\n        <path\n          class=\"st0\"\n          d=\"M346.6,168.2c-9.4-4.5-16.6-10.9-21.7-19.2c-5.1-8.3-7.6-18.1-7.6-29.4c0-11.5,2.5-21.5,7.6-29.9\n      c5.1-8.4,12.3-14.8,21.5-19.4c9.2-4.6,20.1-6.8,32.6-6.8c13,0,24.2,2.4,33.3,7.1c9.2,4.8,16.1,11.6,20.7,20.6\n      c4.6,9,6.5,19.8,5.7,32.4h-97.8c0.3,10.9,3.9,19.3,10.9,25.3c7,6,16.5,9,28.4,9c9.2,0,17-1.7,23.2-5c6.2-3.3,10.3-7.8,12-13.4h22.6\n      c-1.1,7.1-4.3,13.2-9.7,18.5c-5.4,5.3-12.3,9.4-20.7,12.3c-8.4,2.9-17.8,4.4-28.1,4.4C367,174.9,356,172.7,346.6,168.2z M352.5,88.4\n      c-6.7,5.2-10.6,12.4-11.8,21.5h74.4c-0.4-9.4-3.8-16.6-10.3-21.7c-6.5-5.1-15.1-7.6-26-7.6C367.9,80.6,359.2,83.2,352.5,88.4z\" />\n        <path\n          class=\"st0\"\n          d=\"M546,151.9h-1c-3.4,7.1-9,12.7-16.9,16.8c-7.9,4.1-16.7,6.2-26.5,6.2c-10.7,0-20.1-2.3-28.1-6.8\n      c-8-4.6-14.3-11-18.8-19.5c-4.5-8.4-6.7-18.3-6.7-29.6c0-11.4,2.2-21.3,6.7-29.6c4.5-8.3,10.8-14.7,18.9-19.2\n      c8.1-4.5,17.4-6.7,28-6.7c11,0,20.3,2,27.8,6c7.5,4,12.9,9.3,16,15.8h1l0.8-20.2h22.4v141.9H546V151.9z M528.6,151.9\n      c5.6-3.1,10-7.3,12.9-12.4c3-5.2,4.5-10.7,4.5-16.7v-7.9c0-6-1.5-11.4-4.5-16.4c-3-5-7.3-8.9-12.9-11.9c-5.6-3-12.5-4.5-20.5-4.5\n      c-10.7,0-19.5,3.2-26.2,9.7c-6.7,6.5-10.1,15.6-10.1,27.4c0,11.6,3.3,20.7,10,27.4c6.7,6.7,15.4,10.1,26.3,10.1\n      C516.1,156.6,522.9,155,528.6,151.9z\" />\n        <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"780.8157\" y1=\"119.2805\" x2=\"690.0867\" y2=\"119.2805\">\n          <stop offset=\"0\" style=\"stop-color: #ff854a\" />\n          <stop offset=\"0.8407\" style=\"stop-color: #0040bf\" />\n        </linearGradient>\n        <path\n          class=\"st1\"\n          d=\"M803.4,65.3l-0.8,20.2h-1c-3.3-6.5-8.6-11.8-16.1-15.8c-7.5-4-16.7-6-27.7-6c-10.6,0-19.9,2.2-28,6.7\n      c-8.1,4.5-14.4,10.9-18.9,19.2c-4.5,8.3-6.7,18.2-6.7,29.8c0,11.3,2.2,21.1,6.7,29.5s10.7,14.8,18.8,19.4c8,4.6,17.4,6.8,28.1,6.8\n      c9.9,0,18.8-2.1,26.6-6.2c7.8-4.1,14.4-12.2,17.8-19.3h23.6V65.3H803.4z M802.2,122.7c0,6-1.5,11.6-4.5,16.7\n      c-3,5.2-7.3,9.3-12.9,12.4c-5.6,3.1-12.5,4.7-20.5,4.7c-10.9,0-19.6-3.3-26.3-10c-6.7-6.7-10-15.8-10-27.3c0-12,3.4-21.2,10.1-27.6\n      c6.7-6.5,15.5-9.7,26.2-9.7c8,0,14.8,1.5,20.5,4.5c5.6,3,10,7,12.9,11.9c3,5,4.5,10.4,4.5,16.2V122.7z\" />\n        <linearGradient\n          id=\"SVGID_00000152963432808947599350000011020247854886079881_\"\n          gradientUnits=\"userSpaceOnUse\"\n          x1=\"780.8157\"\n          y1=\"161.271\"\n          x2=\"690.0867\"\n          y2=\"161.271\">\n          <stop offset=\"0\" style=\"stop-color: #ff854a\" />\n          <stop offset=\"0.8407\" style=\"stop-color: #0040bf\" />\n        </linearGradient>\n        <path\n          style=\"fill: url(#SVGID_00000152963432808947599350000011020247854886079881_)\"\n          d=\"M843.9,161.3c0,6.5-5.3,11.8-11.8,11.8l0,0\n      c-6.5,0-11.8-5.3-11.8-11.8v0c0-6.5,5.3-11.8,11.8-11.8l0,0C838.6,149.4,843.9,154.7,843.9,161.3\" />\n        <rect x=\"159.2\" y=\"25.3\" class=\"st0\" width=\"23.6\" height=\"23.6\" />\n        <g>\n          <polygon class=\"st0\" points=\"159.2,149.4 159.2,173.1 182.8,173.1 182.8,149.4 182.8,65.3 159.2,65.3 \t\" />\n          <rect x=\"159.2\" y=\"25.3\" class=\"st0\" width=\"23.6\" height=\"23.6\" />\n        </g>\n        <path\n          class=\"st0\"\n          d=\"M302.7,84.2c-4-7.3-9.5-12.6-16.5-15.8c-7-3.2-15.1-4.8-24.4-4.8c-9.2,0-17.8,2.1-25.8,6.2\n      c-7.9,4.1-13.9,10-17.8,17.6h-1.4l-0.6-22.2h-23v107.8h23.6v-53.4c0-7.5,1.6-14,4.7-19.7c3.1-5.6,7.5-10.1,13.1-13.2\n      c5.6-3.2,12.2-4.8,19.7-4.8c10.6,0,18.4,3,23.3,8.9c5,5.9,7.4,15,7.4,27.2v55h23.6V114C308.7,101.5,306.7,91.6,302.7,84.2z\" />\n        <path\n          class=\"st0\"\n          d=\"M671.7,65.3v53.4c0,7.5-1.6,14.1-4.7,19.8c-3.1,5.7-7.5,10.2-13.1,13.4c-5.6,3.2-12.2,4.8-19.7,4.8\n      c-10.7,0-18.6-3-23.5-9.1c-5-6-7.4-15-7.4-27V65.3h-23.4v59.5c0,12.2,2,22,5.9,29.4c3.9,7.3,9.4,12.6,16.5,15.9\n      c7.1,3.3,15.2,4.9,24.5,4.9c9.6,0,18.4-2.1,26.2-6.3c7.6-4.1,15-11.3,18.9-18.6v23.1h23.4v-23.6v-5.2v-79H671.7z\" />\n      </svg>\n    </ng-content>\n    @if (authenticated()) {\n      <h3 class=\"whitespace-nowrap text-2xl font-semibold tracking-tight\">{{ 'login.welcomeBack' | transloco: { name: user()?.fullName ?? '' } }}</h3>\n      <p class=\"text-muted-foreground text-sm\">{{ 'login.youAreLoggedIn' | transloco }}</p>\n    }\n  </CardHeader>\n\n  @if (!authenticated()) {\n    <CardContent>\n      <div class=\"grid gap-4\">\n        @if (!config.autoOAuthProvider && !config.autoSAMLProvider) {\n          <div class=\"grid gap-2\">\n            <label class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"username\">{{\n              'login.username' | transloco\n            }}</label>\n\n            <input\n              type=\"text\"\n              id=\"username\"\n              required\n              [ngModel]=\"credentials().username\"\n              (ngModelChange)=\"updateCredentials({ username: $event })\"\n              (keydown.enter)=\"handleLoginWithCredentials()\" />\n          </div>\n\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <label class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\" for=\"password\">\n                {{ 'login.password' | transloco }}\n              </label>\n            </div>\n\n            <input\n              type=\"password\"\n              id=\"password\"\n              required\n              [ngModel]=\"credentials().password\"\n              (ngModelChange)=\"updateCredentials({ password: $event })\"\n              (keydown.enter)=\"handleLoginWithCredentials()\" />\n          </div>\n\n          <button [disabled]=\"!valid()\" (click)=\"handleLoginWithCredentials()\">{{ 'login.connect' | transloco }}</button>\n        } @else {\n          <button (click)=\"handleLogin()\">{{ 'login.SignInWith' | transloco: { provider: config.autoOAuthProvider ? 'OAuth' : 'SAML' } }}</button>\n        }\n      </div>\n    </CardContent>\n  }\n\n  @if (authenticated()) {\n    <CardFooter class=\"justify-between gap-2\">\n      <button class=\"w-full\" (click)=\"handleLogout()\" type=\"submit\">{{ 'login.disconnect' | transloco }}</button>\n      <button class=\"w-full\" variant=\"ghost\" (click)=\"handleBack()\">{{ 'login.back' | transloco }}</button>\n    </CardFooter>\n  }\n</Card>\n", styles: [":host{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:2rem}.btn-primary{background-color:#000;color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }] });
 
 class LabelService {
@@ -8547,10 +8721,10 @@ class LabelService {
             return from(labels.bulkRemove(labelsToRemove, query, publicOnly));
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: LabelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: LabelService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LabelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LabelService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: LabelService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LabelService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -8657,8 +8831,8 @@ class MultiSelectLabelsComponent {
     updateArticleWithLabels() {
         this.article()[this.labelsField()] = this.labels();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MultiSelectLabelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: MultiSelectLabelsComponent, isStandalone: true, selector: "multiselect-labels, multiselectlabels, MultiSelectLabels", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: false, transformFunction: null }, isPublic: { classPropertyName: "isPublic", publicName: "isPublic", isSignal: true, isRequired: false, transformFunction: null }, allowModification: { classPropertyName: "allowModification", publicName: "allowModification", isSignal: true, isRequired: false, transformFunction: null }, labelsField: { classPropertyName: "labelsField", publicName: "labelsField", isSignal: true, isRequired: false, transformFunction: null }, labelInput: { classPropertyName: "labelInput", publicName: "labelInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { article: "articleChange", labelInput: "labelInputChange" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["LabelsPopover"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MultiSelectLabelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MultiSelectLabelsComponent, isStandalone: true, selector: "multiselect-labels, multiselectlabels, MultiSelectLabels", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: false, transformFunction: null }, isPublic: { classPropertyName: "isPublic", publicName: "isPublic", isSignal: true, isRequired: false, transformFunction: null }, allowModification: { classPropertyName: "allowModification", publicName: "allowModification", isSignal: true, isRequired: false, transformFunction: null }, labelsField: { classPropertyName: "labelsField", publicName: "labelsField", isSignal: true, isRequired: false, transformFunction: null }, labelInput: { classPropertyName: "labelInput", publicName: "labelInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { article: "articleChange", labelInput: "labelInputChange" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["LabelsPopover"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="anchor" [ngStyle]="{ 'anchor-name': anchor() }">
       <label [htmlFor]="id()" class="font-semibold">{{ (isPublic() ? 'labels.publicLabels' : 'labels.privateLabels') | transloco }}</label>
       <input
@@ -8695,9 +8869,9 @@ class MultiSelectLabelsComponent {
         </Badge>
       }
     </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=\"password\"], input[type=\"number\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant"] }, { 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\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size", "decoration", "hover"] }, { 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.1.2", ngImport: i0, type: MultiSelectLabelsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MultiSelectLabelsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'multiselect-labels, multiselectlabels, MultiSelectLabels', standalone: true, imports: [FormsModule, NgStyle, TranslocoPipe, InputComponent, BadgeComponent, ListItemComponent], template: `
     <div class="anchor" [ngStyle]="{ 'anchor-name': anchor() }">
@@ -8760,8 +8934,8 @@ class LabelsEditDialog {
     close(event) {
         this.closed.emit({ type: event, article: this.article() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: LabelsEditDialog, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: LabelsEditDialog, isStandalone: true, selector: "labels-edit-dialog, labelseditdialog, LabelsEditDialog", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", article: "articleChange" }, providers: [provideTranslocoScope('labels')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LabelsEditDialog, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: LabelsEditDialog, isStandalone: true, selector: "labels-edit-dialog, labelseditdialog, LabelsEditDialog", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", article: "articleChange" }, providers: [provideTranslocoScope('labels')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <dialog #dialog (closed)="close($event)">
       <DialogHeader>
         <DialogTitle>{{ 'labels.title' | transloco }}</DialogTitle>
@@ -8789,9 +8963,9 @@ class LabelsEditDialog {
         </button>
       </DialogFooter>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog", inputs: ["class"], outputs: ["closed"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "component", type: MultiSelectLabelsComponent, selector: "multiselect-labels, multiselectlabels, MultiSelectLabels", inputs: ["article", "isPublic", "allowModification", "labelsField", "labelInput"], outputs: ["articleChange", "labelInputChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog", inputs: ["class", "variant"], outputs: ["closed"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "component", type: MultiSelectLabelsComponent, selector: "multiselect-labels, multiselectlabels, MultiSelectLabels", inputs: ["article", "isPublic", "allowModification", "labelsField", "labelInput"], outputs: ["articleChange", "labelInputChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: LabelsEditDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LabelsEditDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'labels-edit-dialog, labelseditdialog, LabelsEditDialog',
@@ -8866,8 +9040,8 @@ class FeedbackDialogComponent {
         this.dialog().close(e);
         notify.success(this.transloco.translate('feedback.feedbackSuccess'), { duration: 2000 });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FeedbackDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: FeedbackDialogComponent, isStandalone: true, selector: "feedback-dialog, feedbackdialog, FeedbackDialog", inputs: { comment: { classPropertyName: "comment", publicName: "comment", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { comment: "commentChange" }, providers: [provideTranslocoScope('feedback')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeedbackDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeedbackDialogComponent, isStandalone: true, selector: "feedback-dialog, feedbackdialog, FeedbackDialog", inputs: { comment: { classPropertyName: "comment", publicName: "comment", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { comment: "commentChange" }, providers: [provideTranslocoScope('feedback')], viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <dialog #dialog>
       <DialogHeader>
         <DialogTitle>{{ 'feedback.dialogTitle' | transloco }}</DialogTitle>
@@ -8886,7 +9060,7 @@ class FeedbackDialogComponent {
       </DialogContent>
 
       <DialogFooter>
-        <button variant="outline" (click)="dialog.close($event)">
+        <button decoration="outline" (click)="dialog.close($event)">
           {{ 'cancel' | transloco }}
         </button>
         <button [disabled]="!comment()" (click)="submit($event)">
@@ -8894,9 +9068,9 @@ class FeedbackDialogComponent {
         </button>
       </DialogFooter>
     </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", "size"] }, { kind: "component", type: DialogComponent, selector: "dialog", inputs: ["class"], outputs: ["closed"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { 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", inputs: ["class", "variant"], outputs: ["closed"] }, { kind: "component", type: DialogHeaderComponent, selector: "DialogHeader" }, { kind: "directive", type: DialogFooterComponent, selector: "DialogFooter" }, { kind: "directive", type: DialogTitleComponent, selector: "DialogTitle" }, { kind: "directive", type: DialogContentComponent, selector: "DialogContent" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FeedbackDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeedbackDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'feedback-dialog, feedbackdialog, FeedbackDialog',
@@ -8931,7 +9105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
       </DialogContent>
 
       <DialogFooter>
-        <button variant="outline" (click)="dialog.close($event)">
+        <button decoration="outline" (click)="dialog.close($event)">
           {{ 'cancel' | transloco }}
         </button>
         <button [disabled]="!comment()" (click)="submit($event)">
@@ -9001,12 +9175,12 @@ class SearchFeedbackComponent {
     openFeedbackDialog(type) {
         this.feedbackDialog()?.open(type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SearchFeedbackComponent, isStandalone: true, selector: "feedback, Feedback", inputs: { pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClose: "onClose" }, providers: [provideTranslocoScope('feedback')], viewQueries: [{ propertyName: "feedbackDialog", first: true, predicate: FeedbackDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<menu>\n  <button class=\"border border-gray-200 p-5\" variant=\"ghost\" title=\"{{'feedback.button' | transloco }}\">\n    <i class=\"fa-fw far fa-commenting\" aria-hidden=\"true\"></i>\n    {{ 'feedback.label' | transloco }}\n    <i class=\"fa-fw fas fa-xmark ms-2\" (click)=\"close($event);\" aria-hidden=\"true\"></i>\n  </button>\n\n  <MenuContent>\n    @if (!disliked()) {\n    <menuitem (click)=\"like()\" [attr.aria-label]=\"'feedback.like' | transloco\">\n      @if (liked()) {\n      <i class=\"fa-fw fas fa-thumbs-up\"></i> {{ 'feedback.liked' | transloco }} } @else { <i class=\"fa-fw far fa-thumbs-up\"></i> {{ 'feedback.like' | transloco\n      }} }\n    </menuitem>\n    } @if (!liked()) {\n    <menuitem (click)=\"dislike()\" [attr.aria-label]=\"'feedback.dislike' | transloco\">\n      @if (disliked()) {\n      <i class=\"fa-fw fas fa-thumbs-down\"></i> {{ 'feedback.disliked' | transloco }} } @else { <i class=\"fa-fw far fa-thumbs-down\"></i> {{ 'feedback.dislike' |\n      transloco }} }\n    </menuitem>\n    } @for (menu of menus; track $index) {\n    <menuitem (click)=\"openFeedbackDialog(menu.type)\" [attr.aria-label]=\"'feedback.' + menu.type + '.title' | transloco\">\n      <i class=\"fa-fw {{menu.icon}}\"></i> {{ 'feedback.' + menu.type + '.title' | transloco }}\n    </menuitem>\n    }\n  </MenuContent>\n</menu>\n\n<feedback-dialog />\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant"] }, { kind: "component", type: FeedbackDialogComponent, selector: "feedback-dialog, feedbackdialog, FeedbackDialog", inputs: ["comment"], outputs: ["commentChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: SearchFeedbackComponent, isStandalone: true, selector: "feedback, Feedback", inputs: { pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClose: "onClose" }, providers: [provideTranslocoScope('feedback')], viewQueries: [{ propertyName: "feedbackDialog", first: true, predicate: FeedbackDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<menu>\n  <button class=\"border-foreground/18 border p-5\" variant=\"ghost\" title=\"{{ 'feedback.button' | transloco }}\">\n    <i class=\"fa-fw far fa-commenting\" aria-hidden=\"true\"></i>\n    {{ 'feedback.label' | transloco }}\n    <i class=\"fa-fw fas fa-xmark ms-2\" (click)=\"close($event)\" aria-hidden=\"true\"></i>\n  </button>\n\n  <MenuContent>\n    @if (!disliked()) {\n      <menuitem (click)=\"like()\" [attr.aria-label]=\"'feedback.like' | transloco\">\n        @if (liked()) {\n          <i class=\"fa-fw fas fa-thumbs-up\"></i> {{ 'feedback.liked' | transloco }}\n        } @else {\n          <i class=\"fa-fw far fa-thumbs-up\"></i> {{ 'feedback.like' | transloco }}\n        }\n      </menuitem>\n    }\n    @if (!liked()) {\n      <menuitem (click)=\"dislike()\" [attr.aria-label]=\"'feedback.dislike' | transloco\">\n        @if (disliked()) {\n          <i class=\"fa-fw fas fa-thumbs-down\"></i> {{ 'feedback.disliked' | transloco }}\n        } @else {\n          <i class=\"fa-fw far fa-thumbs-down\"></i> {{ 'feedback.dislike' | transloco }}\n        }\n      </menuitem>\n    }\n    @for (menu of menus; track $index) {\n      <menuitem (click)=\"openFeedbackDialog(menu.type)\" [attr.aria-label]=\"'feedback.' + menu.type + '.title' | transloco\">\n        <i class=\"fa-fw {{ menu.icon }}\"></i> {{ 'feedback.' + menu.type + '.title' | transloco }}\n      </menuitem>\n    }\n  </MenuContent>\n</menu>\n\n<feedback-dialog />\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: MenuComponent, selector: "menu, Menu", inputs: ["disabled"] }, { kind: "directive", type: MenuContentComponent, selector: "MenuContent, menucontent, menu-content", inputs: ["class", "position"] }, { kind: "directive", type: MenuItemComponent, selector: "menu-item, menuitem, MenuItem", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: FeedbackDialogComponent, selector: "feedback-dialog, feedbackdialog, FeedbackDialog", inputs: ["comment"], outputs: ["commentChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchFeedbackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SearchFeedbackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'feedback, Feedback', standalone: true, imports: [ButtonComponent, MenuComponent, MenuContentComponent, MenuItemComponent, TranslocoPipe, FeedbackDialogComponent], providers: [provideTranslocoScope('feedback')], template: "<menu>\n  <button class=\"border border-gray-200 p-5\" variant=\"ghost\" title=\"{{'feedback.button' | transloco }}\">\n    <i class=\"fa-fw far fa-commenting\" aria-hidden=\"true\"></i>\n    {{ 'feedback.label' | transloco }}\n    <i class=\"fa-fw fas fa-xmark ms-2\" (click)=\"close($event);\" aria-hidden=\"true\"></i>\n  </button>\n\n  <MenuContent>\n    @if (!disliked()) {\n    <menuitem (click)=\"like()\" [attr.aria-label]=\"'feedback.like' | transloco\">\n      @if (liked()) {\n      <i class=\"fa-fw fas fa-thumbs-up\"></i> {{ 'feedback.liked' | transloco }} } @else { <i class=\"fa-fw far fa-thumbs-up\"></i> {{ 'feedback.like' | transloco\n      }} }\n    </menuitem>\n    } @if (!liked()) {\n    <menuitem (click)=\"dislike()\" [attr.aria-label]=\"'feedback.dislike' | transloco\">\n      @if (disliked()) {\n      <i class=\"fa-fw fas fa-thumbs-down\"></i> {{ 'feedback.disliked' | transloco }} } @else { <i class=\"fa-fw far fa-thumbs-down\"></i> {{ 'feedback.dislike' |\n      transloco }} }\n    </menuitem>\n    } @for (menu of menus; track $index) {\n    <menuitem (click)=\"openFeedbackDialog(menu.type)\" [attr.aria-label]=\"'feedback.' + menu.type + '.title' | transloco\">\n      <i class=\"fa-fw {{menu.icon}}\"></i> {{ 'feedback.' + menu.type + '.title' | transloco }}\n    </menuitem>\n    }\n  </MenuContent>\n</menu>\n\n<feedback-dialog />\n" }]
+            args: [{ selector: 'feedback, Feedback', standalone: true, imports: [ButtonComponent, MenuComponent, MenuContentComponent, MenuItemComponent, TranslocoPipe, FeedbackDialogComponent], providers: [provideTranslocoScope('feedback')], template: "<menu>\n  <button class=\"border-foreground/18 border p-5\" variant=\"ghost\" title=\"{{ 'feedback.button' | transloco }}\">\n    <i class=\"fa-fw far fa-commenting\" aria-hidden=\"true\"></i>\n    {{ 'feedback.label' | transloco }}\n    <i class=\"fa-fw fas fa-xmark ms-2\" (click)=\"close($event)\" aria-hidden=\"true\"></i>\n  </button>\n\n  <MenuContent>\n    @if (!disliked()) {\n      <menuitem (click)=\"like()\" [attr.aria-label]=\"'feedback.like' | transloco\">\n        @if (liked()) {\n          <i class=\"fa-fw fas fa-thumbs-up\"></i> {{ 'feedback.liked' | transloco }}\n        } @else {\n          <i class=\"fa-fw far fa-thumbs-up\"></i> {{ 'feedback.like' | transloco }}\n        }\n      </menuitem>\n    }\n    @if (!liked()) {\n      <menuitem (click)=\"dislike()\" [attr.aria-label]=\"'feedback.dislike' | transloco\">\n        @if (disliked()) {\n          <i class=\"fa-fw fas fa-thumbs-down\"></i> {{ 'feedback.disliked' | transloco }}\n        } @else {\n          <i class=\"fa-fw far fa-thumbs-down\"></i> {{ 'feedback.dislike' | transloco }}\n        }\n      </menuitem>\n    }\n    @for (menu of menus; track $index) {\n      <menuitem (click)=\"openFeedbackDialog(menu.type)\" [attr.aria-label]=\"'feedback.' + menu.type + '.title' | transloco\">\n        <i class=\"fa-fw {{ menu.icon }}\"></i> {{ 'feedback.' + menu.type + '.title' | transloco }}\n      </menuitem>\n    }\n  </MenuContent>\n</menu>\n\n<feedback-dialog />\n" }]
         }] });
 
 class AggregationItemComponent {
@@ -9048,10 +9222,10 @@ class AggregationItemComponent {
         }
         this.onOpen.emit(node);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AggregationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: AggregationItemComponent, isStandalone: true, selector: "aggregation-item, AggregationItem, aggregationitem", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSelect: "onSelect", onOpen: "onOpen" }, host: { properties: { "attr.disabled": "this.disabled" } }, ngImport: i0, template: "<a\n  role=\"listitem\"\n  [attr.aria-selected]=\"node().$selected\"\n  [attr.aria-label]=\"name() | syslang\"\n  [style.--level]=\"level()\"\n  [class]=\"\n    cn(\n      'flex grow items-center gap-2 p-1 leading-7',\n      node().count === 0 && 'disabled pointer-events-none text-neutral-300',\n      node().$selected && 'bg-primary-100 text-primary'\n    )\n  \"\n  (click)=\"select($event, node())\">\n  <!-- chrevron is visible only if the node has children -->\n  <button (click)=\"open($event, node())\" class=\"transition-transform ease-in hover:scale-125\" aria-label=\"Open\">\n    <ChevronRight [class]=\"cn('size-4 translate-x-1', node().$opened && 'rotate-90', !node().hasChildren && 'hidden')\" width=\"16\" height=\"16\" />\n  </button>\n\n  <input\n    type=\"checkbox\"\n    role=\"checkbox\"\n    value=\"{{ node().value }}\"\n    [attr.disabled]=\"node().count === 0 ? true : null\"\n    [attr.aria-disabled]=\"node().count === 0\"\n    (keydown.enter)=\"select($event, node())\"\n    [checked]=\"node().$selected\" />\n\n  @if (node().icon) {\n    <i class=\"fa-fw {{ node().icon }} self-center justify-self-center\" aria-hidden=\"true\"></i>\n  }\n  <p class=\"line-clamp-1 text-ellipsis break-all\" [title]=\"name() | syslang\">\n    @for (chunk of (name() | syslang) ?? '' | highlightWord: searchText() : 10; track $index) {\n      <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{ chunk.text }}</span>\n    }\n  </p>\n</a>\n\n@if (node().hasChildren && node().$opened) {\n  @for (item of node().items; track $index) {\n    <AggregationItem [node]=\"item\" (onOpen)=\"onOpen.emit($event)\" (onSelect)=\"onSelect.emit($event)\" />\n  }\n}\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: AggregationItemComponent, selector: "aggregation-item, AggregationItem, aggregationitem", inputs: ["node"], outputs: ["onSelect", "onOpen"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant"] }, { kind: "component", type: ChevronRightIconComponent, selector: "chevron-right, ChevronRight, chevronright", inputs: ["class", "width", "height"] }, { kind: "pipe", type: HighlightWordPipe, name: "highlightWord" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AggregationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: AggregationItemComponent, isStandalone: true, selector: "aggregation-item, AggregationItem, aggregationitem", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onSelect: "onSelect", onOpen: "onOpen" }, host: { properties: { "attr.disabled": "this.disabled" } }, ngImport: i0, template: "<a\n  role=\"listitem\"\n  [attr.aria-selected]=\"node().$selected\"\n  [attr.aria-label]=\"name() | syslang\"\n  [style.--level]=\"level()\"\n  [class]=\"\n    cn(\n      'flex grow items-center gap-2 p-1 leading-7',\n      node().count === 0 && 'disabled pointer-events-none text-neutral-300',\n      node().$selected && 'bg-primary-100 text-primary'\n    )\n  \"\n  (click)=\"select($event, node())\">\n  <!-- chrevron is visible only if the node has children -->\n  <button (click)=\"open($event, node())\" class=\"transition-transform ease-in hover:scale-125\" aria-label=\"Open\">\n    <ChevronRight [class]=\"cn('size-4 translate-x-1', node().$opened && 'rotate-90', !node().hasChildren && 'hidden')\" width=\"16\" height=\"16\" />\n  </button>\n\n  <input\n    type=\"checkbox\"\n    role=\"checkbox\"\n    value=\"{{ node().value }}\"\n    [attr.disabled]=\"node().count === 0 ? true : null\"\n    [attr.aria-disabled]=\"node().count === 0\"\n    (keydown.enter)=\"select($event, node())\"\n    [checked]=\"node().$selected\" />\n\n  @if (node().icon) {\n    <i class=\"fa-fw {{ node().icon }} self-center justify-self-center\" aria-hidden=\"true\"></i>\n  }\n  <p class=\"line-clamp-1 text-ellipsis break-all\" [title]=\"name() | syslang\">\n    @for (chunk of (name() | syslang) ?? '' | highlightWord: searchText() : 10; track $index) {\n      <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{ chunk.text }}</span>\n    }\n  </p>\n</a>\n\n@if (node().hasChildren && node().$opened) {\n  @for (item of node().items; track $index) {\n    <AggregationItem [node]=\"item\" (onOpen)=\"onOpen.emit($event)\" (onSelect)=\"onSelect.emit($event)\" />\n  }\n}\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: AggregationItemComponent, selector: "aggregation-item, AggregationItem, aggregationitem", inputs: ["node"], outputs: ["onSelect", "onOpen"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "component", type: ChevronRightIconComponent, selector: "chevron-right, ChevronRight, chevronright", inputs: ["class"] }, { kind: "pipe", type: HighlightWordPipe, name: "highlightWord" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AggregationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AggregationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aggregation-item, AggregationItem, aggregationitem', standalone: true, imports: [HighlightWordPipe, ListItemComponent, SyslangPipe, ChevronRightIconComponent], template: "<a\n  role=\"listitem\"\n  [attr.aria-selected]=\"node().$selected\"\n  [attr.aria-label]=\"name() | syslang\"\n  [style.--level]=\"level()\"\n  [class]=\"\n    cn(\n      'flex grow items-center gap-2 p-1 leading-7',\n      node().count === 0 && 'disabled pointer-events-none text-neutral-300',\n      node().$selected && 'bg-primary-100 text-primary'\n    )\n  \"\n  (click)=\"select($event, node())\">\n  <!-- chrevron is visible only if the node has children -->\n  <button (click)=\"open($event, node())\" class=\"transition-transform ease-in hover:scale-125\" aria-label=\"Open\">\n    <ChevronRight [class]=\"cn('size-4 translate-x-1', node().$opened && 'rotate-90', !node().hasChildren && 'hidden')\" width=\"16\" height=\"16\" />\n  </button>\n\n  <input\n    type=\"checkbox\"\n    role=\"checkbox\"\n    value=\"{{ node().value }}\"\n    [attr.disabled]=\"node().count === 0 ? true : null\"\n    [attr.aria-disabled]=\"node().count === 0\"\n    (keydown.enter)=\"select($event, node())\"\n    [checked]=\"node().$selected\" />\n\n  @if (node().icon) {\n    <i class=\"fa-fw {{ node().icon }} self-center justify-self-center\" aria-hidden=\"true\"></i>\n  }\n  <p class=\"line-clamp-1 text-ellipsis break-all\" [title]=\"name() | syslang\">\n    @for (chunk of (name() | syslang) ?? '' | highlightWord: searchText() : 10; track $index) {\n      <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{ chunk.text }}</span>\n    }\n  </p>\n</a>\n\n@if (node().hasChildren && node().$opened) {\n  @for (item of node().items; track $index) {\n    <AggregationItem [node]=\"item\" (onOpen)=\"onOpen.emit($event)\" (onSelect)=\"onSelect.emit($event)\" />\n  }\n}\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"] }]
         }], propDecorators: { disabled: [{
@@ -9091,7 +9265,7 @@ class AggregationComponent {
      * A boolean flag indicating whether we want to see the filters count when some is applied
      * This property is initialized to `false` by default.
      */
-    showCount = input(false, ...(ngDevMode ? [{ debugName: "showCount" }] : []));
+    showFiltersCount = input(false, ...(ngDevMode ? [{ debugName: "showFiltersCount" }] : []));
     /* aggregation */
     aggregation = computed(() => {
         // when the aggegation store updates, we need to check if the aggregation is still valid
@@ -9410,15 +9584,14 @@ class AggregationComponent {
         }
         return currentItems;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AggregationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: AggregationComponent, isStandalone: true, selector: "Aggregation, aggregation", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, headless: { classPropertyName: "headless", publicName: "headless", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", searchText: "searchTextChange" }, host: { properties: { "style.--header-height": "`${this.computeHeight()}rem`" }, classAttribute: "d-flex flex-column h-100" }, ngImport: i0, template: "<fieldset class=\"flex flex-col gap-2\">\n  @if (!headless()) {\n    <legend class=\"mb-1 flex h-8 w-full select-none items-center pl-1 text-sm font-semibold text-gray-600\">\n      <ng-content select=\"label\">\n        @if (aggregation()?.icon) {\n          <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\n        }\n        <span class=\"grow\">{{ aggregation()?.display | syslang | transloco }}</span>\n      </ng-content>\n\n      @if (showCount() && filtersCount() > 0) {\n        <!-- count -->\n        <Badge>\n          {{ filtersCount() }}\n        </Badge>\n      }\n      @if (hasFilters()) {\n        <button\n          variant=\"ghost\"\n          size=\"icon\"\n          [attr.title]=\"'filters.clearFilters' | transloco\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"clear()\">\n          <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\n        </button>\n      }\n      @if (selection()) {\n        <button\n          variant=\"ghost\"\n          size=\"icon\"\n          [attr.title]=\"'filters.applyFilters' | transloco\"\n          [attr.aria-label]=\"'filters.applyFilters' | transloco\"\n          (click)=\"apply()\">\n          <i class=\"fa-fw far fa-filter\"></i>\n        </button>\n      }\n    </legend>\n  }\n\n  @if (aggregation()?.searchable && items().length) {\n    <input type=\"text\" [placeholder]=\"'search' | transloco\" [(ngModel)]=\"searchText\" />\n  }\n\n  <ul class=\"snap-y snap-start overflow-auto\" role=\"list\" [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n    @for (item of items(); track $index) {\n      <AggregationItem [node]=\"item\" (onSelect)=\"select()\" (onOpen)=\"open($event)\" />\n    }\n  </ul>\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\n    <button variant=\"link\" class=\"mt-1 flex w-full justify-center\" [attr.aria-label]=\"'loadMore' | transloco\" (click)=\"loadMore()\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n</fieldset>\n", styles: [":host{display:block}fieldset{height:100%;max-height:inherit;scrollbar-width:thin}ul[role=list]{scrollbar-width:inherit;max-height:calc(100vh - var(--header-height, 0px) - var(--agg-header-height, 0px))}AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, inherit)}\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", "size"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"password\"], input[type=\"number\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant"] }, { kind: "component", type: AggregationItemComponent, selector: "aggregation-item, AggregationItem, aggregationitem", inputs: ["node"], outputs: ["onSelect", "onOpen"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AggregationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: AggregationComponent, isStandalone: true, selector: "Aggregation, aggregation", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, headless: { classPropertyName: "headless", publicName: "headless", 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: { "style.--header-height": "`${this.computeHeight()}rem`" } }, ngImport: i0, template: "<fieldset class=\"flex flex-col gap-2\">\n  @if (!headless()) {\n    <legend class=\"text-muted-foreground mb-1 flex h-8 w-full select-none items-center pl-1 text-sm font-semibold\">\n      <ng-content select=\"label\">\n        @if (aggregation()?.icon) {\n          <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\n        }\n        <span class=\"grow\">{{ aggregation()?.display | syslang | transloco }}</span>\n      </ng-content>\n\n      @if (showFiltersCount() && filtersCount() > 0) {\n        <!-- count -->\n        <Badge>\n          {{ filtersCount() }}\n        </Badge>\n      }\n      @if (hasFilters()) {\n        <button\n          variant=\"ghost\"\n          size=\"icon\"\n          [attr.title]=\"'filters.clearFilters' | transloco\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"clear()\">\n          <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\n        </button>\n      }\n      @if (selection()) {\n        <button\n          variant=\"ghost\"\n          size=\"icon\"\n          [attr.title]=\"'filters.applyFilters' | transloco\"\n          [attr.aria-label]=\"'filters.applyFilters' | transloco\"\n          (click)=\"apply()\">\n          <i class=\"fa-fw far fa-filter\"></i>\n        </button>\n      }\n    </legend>\n  }\n\n  @if (aggregation()?.searchable && items().length) {\n    <input type=\"text\" [placeholder]=\"'search' | transloco\" [(ngModel)]=\"searchText\" />\n  }\n\n  <ul class=\"snap-y snap-start overflow-auto\" role=\"list\" [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n    @for (item of items(); track $index) {\n      <AggregationItem [node]=\"item\" (onSelect)=\"select()\" (onOpen)=\"open($event)\" />\n    }\n  </ul>\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\n    <button decoration=\"underline\" class=\"mt-1 flex w-full justify-center\" [attr.aria-label]=\"'loadMore' | transloco\" (click)=\"loadMore()\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n</fieldset>\n", styles: [":host{display:block}fieldset{height:100%;max-height:inherit;scrollbar-width:thin}ul[role=list]{scrollbar-width:inherit;max-height:calc(100vh - var(--header-height, 0px) - var(--agg-header-height, 0px))}AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, inherit)}\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: "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: AggregationItemComponent, selector: "aggregation-item, AggregationItem, aggregationitem", inputs: ["node"], outputs: ["onSelect", "onOpen"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size", "decoration", "hover"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AggregationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AggregationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'Aggregation, aggregation', imports: [FormsModule, ReactiveFormsModule, ButtonComponent, InputComponent, AggregationItemComponent, SyslangPipe, TranslocoPipe, BadgeComponent], standalone: true, host: {
-                        class: 'd-flex flex-column h-100',
                         '[style.--header-height]': '`${this.computeHeight()}rem`'
-                    }, template: "<fieldset class=\"flex flex-col gap-2\">\n  @if (!headless()) {\n    <legend class=\"mb-1 flex h-8 w-full select-none items-center pl-1 text-sm font-semibold text-gray-600\">\n      <ng-content select=\"label\">\n        @if (aggregation()?.icon) {\n          <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\n        }\n        <span class=\"grow\">{{ aggregation()?.display | syslang | transloco }}</span>\n      </ng-content>\n\n      @if (showCount() && filtersCount() > 0) {\n        <!-- count -->\n        <Badge>\n          {{ filtersCount() }}\n        </Badge>\n      }\n      @if (hasFilters()) {\n        <button\n          variant=\"ghost\"\n          size=\"icon\"\n          [attr.title]=\"'filters.clearFilters' | transloco\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"clear()\">\n          <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\n        </button>\n      }\n      @if (selection()) {\n        <button\n          variant=\"ghost\"\n          size=\"icon\"\n          [attr.title]=\"'filters.applyFilters' | transloco\"\n          [attr.aria-label]=\"'filters.applyFilters' | transloco\"\n          (click)=\"apply()\">\n          <i class=\"fa-fw far fa-filter\"></i>\n        </button>\n      }\n    </legend>\n  }\n\n  @if (aggregation()?.searchable && items().length) {\n    <input type=\"text\" [placeholder]=\"'search' | transloco\" [(ngModel)]=\"searchText\" />\n  }\n\n  <ul class=\"snap-y snap-start overflow-auto\" role=\"list\" [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n    @for (item of items(); track $index) {\n      <AggregationItem [node]=\"item\" (onSelect)=\"select()\" (onOpen)=\"open($event)\" />\n    }\n  </ul>\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\n    <button variant=\"link\" class=\"mt-1 flex w-full justify-center\" [attr.aria-label]=\"'loadMore' | transloco\" (click)=\"loadMore()\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n</fieldset>\n", styles: [":host{display:block}fieldset{height:100%;max-height:inherit;scrollbar-width:thin}ul[role=list]{scrollbar-width:inherit;max-height:calc(100vh - var(--header-height, 0px) - var(--agg-header-height, 0px))}AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, inherit)}\n"] }]
+                    }, template: "<fieldset class=\"flex flex-col gap-2\">\n  @if (!headless()) {\n    <legend class=\"text-muted-foreground mb-1 flex h-8 w-full select-none items-center pl-1 text-sm font-semibold\">\n      <ng-content select=\"label\">\n        @if (aggregation()?.icon) {\n          <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\n        }\n        <span class=\"grow\">{{ aggregation()?.display | syslang | transloco }}</span>\n      </ng-content>\n\n      @if (showFiltersCount() && filtersCount() > 0) {\n        <!-- count -->\n        <Badge>\n          {{ filtersCount() }}\n        </Badge>\n      }\n      @if (hasFilters()) {\n        <button\n          variant=\"ghost\"\n          size=\"icon\"\n          [attr.title]=\"'filters.clearFilters' | transloco\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n          (click)=\"clear()\">\n          <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\n        </button>\n      }\n      @if (selection()) {\n        <button\n          variant=\"ghost\"\n          size=\"icon\"\n          [attr.title]=\"'filters.applyFilters' | transloco\"\n          [attr.aria-label]=\"'filters.applyFilters' | transloco\"\n          (click)=\"apply()\">\n          <i class=\"fa-fw far fa-filter\"></i>\n        </button>\n      }\n    </legend>\n  }\n\n  @if (aggregation()?.searchable && items().length) {\n    <input type=\"text\" [placeholder]=\"'search' | transloco\" [(ngModel)]=\"searchText\" />\n  }\n\n  <ul class=\"snap-y snap-start overflow-auto\" role=\"list\" [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n    @for (item of items(); track $index) {\n      <AggregationItem [node]=\"item\" (onSelect)=\"select()\" (onOpen)=\"open($event)\" />\n    }\n  </ul>\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\n    <button decoration=\"underline\" class=\"mt-1 flex w-full justify-center\" [attr.aria-label]=\"'loadMore' | transloco\" (click)=\"loadMore()\">\n      {{ 'loadMore' | transloco }}\n    </button>\n  }\n</fieldset>\n", styles: [":host{display:block}fieldset{height:100%;max-height:inherit;scrollbar-width:thin}ul[role=list]{scrollbar-width:inherit;max-height:calc(100vh - var(--header-height, 0px) - var(--agg-header-height, 0px))}AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, inherit)}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -9583,12 +9756,12 @@ class DateComponent extends AggregationComponent {
         }
         throw new Error('filters.filterInvalid');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DateComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: DateComponent, isStandalone: true, selector: "date-filter,DateFilter", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, displayEmptyDistributionIntervals: { classPropertyName: "displayEmptyDistributionIntervals", publicName: "displayEmptyDistributionIntervals", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope('filters')], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <fieldset class=\"overflow-auto\">\n    @if (!headless()) {\n      <legend class=\"mb-1 flex h-8 w-full select-none items-center pl-1 text-sm font-semibold text-gray-600\">\n        <p class=\"me-4 grow\">\n          <i class=\"fa-fw {{ title().icon }}\" aria-hidden=\"true\"></i>\n          {{ title().label | syslang | transloco }}\n        </p>\n        <div class=\"ms-4\">\n          @if (hasFilters()) {\n            <button\n              variant=\"ghost\"\n              size=\"icon\"\n              [attr.title]=\"'filters.clearFilters' | transloco\"\n              [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n              (click)=\"clear()\"\n              (keydown.enter)=\"clear()\">\n              <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\n            </button>\n          }\n\n          @if (selection() && validSelection()) {\n            <button\n              variant=\"ghost\"\n              size=\"icon\"\n              [attr.title]=\"'filters.applyFilters' | transloco\"\n              [attr.aria-label]=\"'filters.applyFilters' | transloco\"\n              (click)=\"apply()\"\n              (keydown.enter)=\"apply()\">\n              <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </div>\n      </legend>\n    }\n\n    <ul class=\"flex flex-col gap-1 pt-2\" role=\"list\">\n      @for (option of dateOptions(); track $index) {\n        <li\n          role=\"listitem\"\n          tabindex=\"0\"\n          (click)=\"radio.click()\"\n          [attr.aria-label]=\"option.display | syslang | transloco\"\n          [class]=\"\n            cn(\n              'flex p-0 px-2 leading-7',\n              form.get('option')?.value === option.display && 'bg-accent',\n              option.hidden && 'hidden',\n              option.disabled && 'disabled pointer-events-none text-neutral-300'\n            )\n          \"\n          [attr.aria-hidden]=\"option.disabled\">\n          <input\n            #radio\n            type=\"radio\"\n            formControlName=\"option\"\n            id=\"date-filter-{{ option.display }}\"\n            [attr.disabled]=\"option.disabled ? true : null\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"select()\"\n            value=\"{{ option.display }}\" />\n\n          <label for=\"date-filter-{{ option.display }}\" class=\"grow cursor-pointer p-1\">\n            {{ option.display | syslang | transloco }}\n          </label>\n        </li>\n      }\n\n      @if (allowCustomRange) {\n        <li role=\"listitem\" aria-label=\"custom range\" class=\"flex px-2 leading-7\" [ngClass]=\"{ selected: form.get('option')?.value === 'custom-range' }\">\n          <input #radiorange type=\"radio\" formControlName=\"option\" id=\"date-filter-custom-range\" value=\"custom-range\" (click)=\"select()\" />\n\n          <div class=\"grid grow grid-cols-[4rem_auto] p-1 *:cursor-pointer\" formGroupName=\"customRange\" (click)=\"radiorange.click()\">\n            <label for=\"date-filter-custom-from\">{{ 'from' | transloco }}</label>\n\n            <input\n              class=\"grow border-b border-neutral-400 bg-transparent text-neutral-600\"\n              type=\"date\"\n              id=\"date-filter-custom-from\"\n              #dateFilterCustomFrom\n              formControlName=\"from\"\n              [max]=\"form.get('customRange.to')?.value ?? today\" />\n\n            <label for=\"date-filter-custom-to\">{{ 'to' | transloco }}</label>\n\n            <input\n              class=\"border-b border-neutral-400 bg-transparent text-neutral-600\"\n              type=\"date\"\n              id=\"date-filter-custom-to\"\n              formControlName=\"to\"\n              [min]=\"form.get('customRange.from')?.value\"\n              [max]=\"today\" />\n          </div>\n        </li>\n      }\n    </ul>\n  </fieldset>\n</form>\n", styles: [":host{display:block}ul[role=list]{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant"] }, { 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: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DateComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DateComponent, isStandalone: true, selector: "date-filter,DateFilter", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, displayEmptyDistributionIntervals: { classPropertyName: "displayEmptyDistributionIntervals", publicName: "displayEmptyDistributionIntervals", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslocoScope('filters')], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <fieldset class=\"overflow-auto\">\n    @if (!headless()) {\n      <legend class=\"text-muted-foreground mb-1 flex h-8 w-full select-none items-center pl-1 text-sm font-semibold\">\n        <p class=\"me-4 grow\">\n          <i class=\"fa-fw {{ title().icon }}\" aria-hidden=\"true\"></i>\n          {{ title().label | syslang | transloco }}\n        </p>\n        <div class=\"ms-4\">\n          @if (hasFilters()) {\n            <button\n              variant=\"ghost\"\n              size=\"icon\"\n              [attr.title]=\"'filters.clearFilters' | transloco\"\n              [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n              (click)=\"clear()\"\n              (keydown.enter)=\"clear()\">\n              <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\n            </button>\n          }\n\n          @if (selection() && validSelection()) {\n            <button\n              variant=\"ghost\"\n              size=\"icon\"\n              [attr.title]=\"'filters.applyFilters' | transloco\"\n              [attr.aria-label]=\"'filters.applyFilters' | transloco\"\n              (click)=\"apply()\"\n              (keydown.enter)=\"apply()\">\n              <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </div>\n      </legend>\n    }\n\n    <ul class=\"flex flex-col gap-1 pt-2\" role=\"list\">\n      @for (option of dateOptions(); track $index) {\n        <li\n          role=\"listitem\"\n          tabindex=\"0\"\n          (click)=\"radio.click()\"\n          [attr.aria-label]=\"option.display | syslang | transloco\"\n          [class]=\"\n            cn(\n              'flex p-0 px-2 leading-7',\n              form.get('option')?.value === option.display && 'bg-accent',\n              option.hidden && 'hidden',\n              option.disabled && 'disabled pointer-events-none text-neutral-300'\n            )\n          \"\n          [attr.aria-hidden]=\"option.disabled\">\n          <input\n            #radio\n            type=\"radio\"\n            formControlName=\"option\"\n            id=\"date-filter-{{ option.display }}\"\n            [attr.disabled]=\"option.disabled ? true : null\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"select()\"\n            value=\"{{ option.display }}\" />\n\n          <label for=\"date-filter-{{ option.display }}\" class=\"grow cursor-pointer p-1\">\n            {{ option.display | syslang | transloco }}\n          </label>\n        </li>\n      }\n\n      @if (allowCustomRange) {\n        <li role=\"listitem\" aria-label=\"custom range\" class=\"flex px-2 leading-7\" [ngClass]=\"{ selected: form.get('option')?.value === 'custom-range' }\">\n          <input #radiorange type=\"radio\" formControlName=\"option\" id=\"date-filter-custom-range\" value=\"custom-range\" (click)=\"select()\" />\n\n          <div class=\"grid grow grid-cols-[4rem_auto] p-1 *:cursor-pointer\" formGroupName=\"customRange\" (click)=\"radiorange.click()\">\n            <label for=\"date-filter-custom-from\">{{ 'from' | transloco }}</label>\n\n            <input\n              class=\"grow border-b border-neutral-400 bg-transparent text-neutral-600\"\n              type=\"date\"\n              id=\"date-filter-custom-from\"\n              #dateFilterCustomFrom\n              formControlName=\"from\"\n              [max]=\"form.get('customRange.to')?.value ?? today\" />\n\n            <label for=\"date-filter-custom-to\">{{ 'to' | transloco }}</label>\n\n            <input\n              class=\"border-b border-neutral-400 bg-transparent text-neutral-600\"\n              type=\"date\"\n              id=\"date-filter-custom-to\"\n              formControlName=\"to\"\n              [min]=\"form.get('customRange.from')?.value\"\n              [max]=\"today\" />\n          </div>\n        </li>\n      }\n    </ul>\n  </fieldset>\n</form>\n", styles: [":host{display:block}ul[role=list]{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'date-filter,DateFilter', standalone: true, providers: [provideTranslocoScope('filters')], imports: [NgClass, ButtonComponent, ListItemComponent, ReactiveFormsModule, TranslocoPipe, SyslangPipe], template: "<form [formGroup]=\"form\">\n  <fieldset class=\"overflow-auto\">\n    @if (!headless()) {\n      <legend class=\"mb-1 flex h-8 w-full select-none items-center pl-1 text-sm font-semibold text-gray-600\">\n        <p class=\"me-4 grow\">\n          <i class=\"fa-fw {{ title().icon }}\" aria-hidden=\"true\"></i>\n          {{ title().label | syslang | transloco }}\n        </p>\n        <div class=\"ms-4\">\n          @if (hasFilters()) {\n            <button\n              variant=\"ghost\"\n              size=\"icon\"\n              [attr.title]=\"'filters.clearFilters' | transloco\"\n              [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n              (click)=\"clear()\"\n              (keydown.enter)=\"clear()\">\n              <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\n            </button>\n          }\n\n          @if (selection() && validSelection()) {\n            <button\n              variant=\"ghost\"\n              size=\"icon\"\n              [attr.title]=\"'filters.applyFilters' | transloco\"\n              [attr.aria-label]=\"'filters.applyFilters' | transloco\"\n              (click)=\"apply()\"\n              (keydown.enter)=\"apply()\">\n              <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </div>\n      </legend>\n    }\n\n    <ul class=\"flex flex-col gap-1 pt-2\" role=\"list\">\n      @for (option of dateOptions(); track $index) {\n        <li\n          role=\"listitem\"\n          tabindex=\"0\"\n          (click)=\"radio.click()\"\n          [attr.aria-label]=\"option.display | syslang | transloco\"\n          [class]=\"\n            cn(\n              'flex p-0 px-2 leading-7',\n              form.get('option')?.value === option.display && 'bg-accent',\n              option.hidden && 'hidden',\n              option.disabled && 'disabled pointer-events-none text-neutral-300'\n            )\n          \"\n          [attr.aria-hidden]=\"option.disabled\">\n          <input\n            #radio\n            type=\"radio\"\n            formControlName=\"option\"\n            id=\"date-filter-{{ option.display }}\"\n            [attr.disabled]=\"option.disabled ? true : null\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"select()\"\n            value=\"{{ option.display }}\" />\n\n          <label for=\"date-filter-{{ option.display }}\" class=\"grow cursor-pointer p-1\">\n            {{ option.display | syslang | transloco }}\n          </label>\n        </li>\n      }\n\n      @if (allowCustomRange) {\n        <li role=\"listitem\" aria-label=\"custom range\" class=\"flex px-2 leading-7\" [ngClass]=\"{ selected: form.get('option')?.value === 'custom-range' }\">\n          <input #radiorange type=\"radio\" formControlName=\"option\" id=\"date-filter-custom-range\" value=\"custom-range\" (click)=\"select()\" />\n\n          <div class=\"grid grow grid-cols-[4rem_auto] p-1 *:cursor-pointer\" formGroupName=\"customRange\" (click)=\"radiorange.click()\">\n            <label for=\"date-filter-custom-from\">{{ 'from' | transloco }}</label>\n\n            <input\n              class=\"grow border-b border-neutral-400 bg-transparent text-neutral-600\"\n              type=\"date\"\n              id=\"date-filter-custom-from\"\n              #dateFilterCustomFrom\n              formControlName=\"from\"\n              [max]=\"form.get('customRange.to')?.value ?? today\" />\n\n            <label for=\"date-filter-custom-to\">{{ 'to' | transloco }}</label>\n\n            <input\n              class=\"border-b border-neutral-400 bg-transparent text-neutral-600\"\n              type=\"date\"\n              id=\"date-filter-custom-to\"\n              formControlName=\"to\"\n              [min]=\"form.get('customRange.from')?.value\"\n              [max]=\"today\" />\n          </div>\n        </li>\n      }\n    </ul>\n  </fieldset>\n</form>\n", styles: [":host{display:block}ul[role=list]{scrollbar-width:thin}\n"] }]
+            args: [{ selector: 'date-filter,DateFilter', standalone: true, providers: [provideTranslocoScope('filters')], imports: [NgClass, ButtonComponent, ListItemComponent, ReactiveFormsModule, TranslocoPipe, SyslangPipe], template: "<form [formGroup]=\"form\">\n  <fieldset class=\"overflow-auto\">\n    @if (!headless()) {\n      <legend class=\"text-muted-foreground mb-1 flex h-8 w-full select-none items-center pl-1 text-sm font-semibold\">\n        <p class=\"me-4 grow\">\n          <i class=\"fa-fw {{ title().icon }}\" aria-hidden=\"true\"></i>\n          {{ title().label | syslang | transloco }}\n        </p>\n        <div class=\"ms-4\">\n          @if (hasFilters()) {\n            <button\n              variant=\"ghost\"\n              size=\"icon\"\n              [attr.title]=\"'filters.clearFilters' | transloco\"\n              [attr.aria-label]=\"'filters.clearFilters' | transloco\"\n              (click)=\"clear()\"\n              (keydown.enter)=\"clear()\">\n              <i class=\"fa-fw far fa-filter-circle-xmark\" aria-hidden=\"true\"></i>\n            </button>\n          }\n\n          @if (selection() && validSelection()) {\n            <button\n              variant=\"ghost\"\n              size=\"icon\"\n              [attr.title]=\"'filters.applyFilters' | transloco\"\n              [attr.aria-label]=\"'filters.applyFilters' | transloco\"\n              (click)=\"apply()\"\n              (keydown.enter)=\"apply()\">\n              <i class=\"fa-fw far fa-filter\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </div>\n      </legend>\n    }\n\n    <ul class=\"flex flex-col gap-1 pt-2\" role=\"list\">\n      @for (option of dateOptions(); track $index) {\n        <li\n          role=\"listitem\"\n          tabindex=\"0\"\n          (click)=\"radio.click()\"\n          [attr.aria-label]=\"option.display | syslang | transloco\"\n          [class]=\"\n            cn(\n              'flex p-0 px-2 leading-7',\n              form.get('option')?.value === option.display && 'bg-accent',\n              option.hidden && 'hidden',\n              option.disabled && 'disabled pointer-events-none text-neutral-300'\n            )\n          \"\n          [attr.aria-hidden]=\"option.disabled\">\n          <input\n            #radio\n            type=\"radio\"\n            formControlName=\"option\"\n            id=\"date-filter-{{ option.display }}\"\n            [attr.disabled]=\"option.disabled ? true : null\"\n            [attr.aria-disabled]=\"option.disabled\"\n            (click)=\"select()\"\n            value=\"{{ option.display }}\" />\n\n          <label for=\"date-filter-{{ option.display }}\" class=\"grow cursor-pointer p-1\">\n            {{ option.display | syslang | transloco }}\n          </label>\n        </li>\n      }\n\n      @if (allowCustomRange) {\n        <li role=\"listitem\" aria-label=\"custom range\" class=\"flex px-2 leading-7\" [ngClass]=\"{ selected: form.get('option')?.value === 'custom-range' }\">\n          <input #radiorange type=\"radio\" formControlName=\"option\" id=\"date-filter-custom-range\" value=\"custom-range\" (click)=\"select()\" />\n\n          <div class=\"grid grow grid-cols-[4rem_auto] p-1 *:cursor-pointer\" formGroupName=\"customRange\" (click)=\"radiorange.click()\">\n            <label for=\"date-filter-custom-from\">{{ 'from' | transloco }}</label>\n\n            <input\n              class=\"grow border-b border-neutral-400 bg-transparent text-neutral-600\"\n              type=\"date\"\n              id=\"date-filter-custom-from\"\n              #dateFilterCustomFrom\n              formControlName=\"from\"\n              [max]=\"form.get('customRange.to')?.value ?? today\" />\n\n            <label for=\"date-filter-custom-to\">{{ 'to' | transloco }}</label>\n\n            <input\n              class=\"border-b border-neutral-400 bg-transparent text-neutral-600\"\n              type=\"date\"\n              id=\"date-filter-custom-to\"\n              formControlName=\"to\"\n              [min]=\"form.get('customRange.from')?.value\"\n              [max]=\"today\" />\n          </div>\n        </li>\n      }\n    </ul>\n  </fieldset>\n</form>\n", styles: [":host{display:block}ul[role=list]{scrollbar-width:thin}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }] });
 
 class FilterButtonComponent {
@@ -9648,12 +9821,12 @@ class FilterButtonComponent {
     isDate(column) {
         return this.appStore.isDateColumn(column);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", 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 } }, host: { properties: { "class.hidden": "filter().hidden" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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 } }, host: { properties: { "class.hidden": "filter().hidden" } }, ngImport: i0, template: `
     <Popover [disabled]="filter().disabled" class="group">
       <button
         [variant]="variant()"
-        class="group-data-[open=true]:border group-data-[open=true]:border-gray-200"
+        class="group-data-[open=true]:border-foreground/50 group-data-[open=true]:border"
         [attr.data-disabled]="filter().disabled"
         [disabled]="filter().disabled || null">
         <!-- display the filter icon if set -->
@@ -9671,13 +9844,14 @@ class FilterButtonComponent {
 
         <!-- show the count of selected items -->
         @if (filter().isTree && filter().count > 0) {
-          <Badge class="text-primary bg-primary-foreground min-w-5 px-1">
+          <Badge size="xs" variant="primary">
             {{ filter().count }}
           </Badge>
         } @else if (filter().count > 1) {
-          <Badge class="text-primary bg-primary-foreground hover:bg-primary-foreground size-5 min-w-5 px-1"> +{{ filter().count - 1 }} </Badge>
+          <Badge size="xs" variant="primary">+{{ filter().count - 1 }}</Badge>
         }
       </button>
+
       <PopoverContent class="w-max" [position]="position()">
         @if (isDate(filter().column)) {
           <DateFilter
@@ -9691,9 +9865,9 @@ class FilterButtonComponent {
         }
       </PopoverContent>
     </Popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: PopoverComponent, selector: "popover, Popover", inputs: ["disabled", "closeOnScroll"] }, { kind: "directive", type: PopoverContentComponent, selector: "popover-content, PopoverContent, popovercontent", inputs: ["position", "keepOpen", "class"] }, { kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["name", "column", "headless", "searchable", "showCount", "searchText"], outputs: ["onSelect", "searchTextChange"] }, { kind: "component", type: DateComponent, selector: "date-filter,DateFilter", inputs: ["title", "displayEmptyDistributionIntervals"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }, { 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: ["position", "keepOpen", "class"] }, { kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["name", "column", "headless", "searchable", "showFiltersCount", "searchText"], outputs: ["onSelect", "searchTextChange"] }, { kind: "component", type: DateComponent, selector: "date-filter,DateFilter", inputs: ["title", "displayEmptyDistributionIntervals"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size", "decoration", "hover"] }, { 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.1.2", ngImport: i0, type: FilterButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FilterButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'filter-button, FilterButton',
@@ -9713,7 +9887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
     <Popover [disabled]="filter().disabled" class="group">
       <button
         [variant]="variant()"
-        class="group-data-[open=true]:border group-data-[open=true]:border-gray-200"
+        class="group-data-[open=true]:border-foreground/50 group-data-[open=true]:border"
         [attr.data-disabled]="filter().disabled"
         [disabled]="filter().disabled || null">
         <!-- display the filter icon if set -->
@@ -9731,13 +9905,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
 
         <!-- show the count of selected items -->
         @if (filter().isTree && filter().count > 0) {
-          <Badge class="text-primary bg-primary-foreground min-w-5 px-1">
+          <Badge size="xs" variant="primary">
             {{ filter().count }}
           </Badge>
         } @else if (filter().count > 1) {
-          <Badge class="text-primary bg-primary-foreground hover:bg-primary-foreground size-5 min-w-5 px-1"> +{{ filter().count - 1 }} </Badge>
+          <Badge size="xs" variant="primary">+{{ filter().count - 1 }}</Badge>
         }
       </button>
+
       <PopoverContent class="w-max" [position]="position()">
         @if (isDate(filter().column)) {
           <DateFilter
@@ -9835,16 +10010,16 @@ class MoreComponent {
         const { count = 0 } = this.queryParamsStore.getFilter({ field: aggregation.column, name: aggregation.name }) || {};
         return count > 0;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: MoreComponent, isStandalone: true, selector: "more, More", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, excludedFilters: { classPropertyName: "excludedFilters", publicName: "excludedFilters", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "divide-y divide-gray-200" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MoreComponent, isStandalone: true, selector: "more, More", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, excludedFilters: { classPropertyName: "excludedFilters", publicName: "excludedFilters", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "divide-y divide-muted-foreground/18" }, ngImport: i0, template: `
     @for (filter of filters(); track $index) {
-      <li [class]="cn('collapse pb-1', filter.hidden && 'hidden')">
+      <li [class]="cn('hover:bg-foreground/5 collapse', filter.hidden && 'hidden')">
         <!-- header -->
         <input
           role="button"
           type="checkbox"
           name="more-filters"
-          [class]="cn('min-h-8 w-full', filter.disabled && 'pointer-events-none cursor-default select-none')"
+          [class]="cn('min-h-10 w-full', filter.disabled && 'pointer-events-none cursor-default select-none')"
           [attr.title]="'filters.openFilter' | transloco: { filter: filter.display || filter.name }" />
 
         @if (isDate(filter.column)) {
@@ -9864,7 +10039,7 @@ class MoreComponent {
 
       <!-- actions fragment -->
       <ng-template #actions let-filter="filter" let-agg="agg">
-        <div [class]="cn('collapse-title flex items-center gap-1 px-2 py-1 text-gray-600', filter.disabled && 'text-slate-300')">
+        <div [class]="cn('collapse-title text-foreground flex items-center gap-1 px-2 py-1', filter.disabled && 'text-muted-foreground')">
           <!-- aggregation's icon -->
           <i class="me-1 fa-fw {{ filter.icon }}" aria-hidden="true"></i>
 
@@ -9872,7 +10047,7 @@ class MoreComponent {
           <span class="me-4 grow text-sm font-semibold">{{ filter.display || filter.name | transloco }}</span>
           @if (filter.count > 0) {
             <!-- count -->
-            <Badge class="min-w-5 px-1">
+            <Badge size="xs" variant="primary">
               {{ filter.count }}
             </Badge>
           }
@@ -9881,7 +10056,7 @@ class MoreComponent {
             <button
               variant="ghost"
               size="icon"
-              class="z-10 text-gray-600"
+              class="z-10"
               [attr.title]="'filters.clearFilters' | transloco"
               (click)="clearFilter(filter.column)"
               (keydown.enter)="clearFilter(filter.column)">
@@ -9896,19 +10071,19 @@ class MoreComponent {
         </div>
       </ng-template>
     }
-  `, isInline: true, styles: [":host{scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["name", "column", "headless", "searchable", "showCount", "searchText"], outputs: ["onSelect", "searchTextChange"] }, { kind: "component", type: DateComponent, selector: "date-filter,DateFilter", inputs: ["title", "displayEmptyDistributionIntervals"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, styles: [":host{scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["name", "column", "headless", "searchable", "showFiltersCount", "searchText"], outputs: ["onSelect", "searchTextChange"] }, { kind: "component", type: DateComponent, selector: "date-filter,DateFilter", inputs: ["title", "displayEmptyDistributionIntervals"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size", "decoration", "hover"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MoreComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MoreComponent, decorators: [{
             type: Component,
             args: [{ selector: 'more, More', standalone: true, imports: [NgTemplateOutlet, ButtonComponent, AggregationComponent, TranslocoPipe, DateComponent, BadgeComponent], template: `
     @for (filter of filters(); track $index) {
-      <li [class]="cn('collapse pb-1', filter.hidden && 'hidden')">
+      <li [class]="cn('hover:bg-foreground/5 collapse', filter.hidden && 'hidden')">
         <!-- header -->
         <input
           role="button"
           type="checkbox"
           name="more-filters"
-          [class]="cn('min-h-8 w-full', filter.disabled && 'pointer-events-none cursor-default select-none')"
+          [class]="cn('min-h-10 w-full', filter.disabled && 'pointer-events-none cursor-default select-none')"
           [attr.title]="'filters.openFilter' | transloco: { filter: filter.display || filter.name }" />
 
         @if (isDate(filter.column)) {
@@ -9928,7 +10103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
 
       <!-- actions fragment -->
       <ng-template #actions let-filter="filter" let-agg="agg">
-        <div [class]="cn('collapse-title flex items-center gap-1 px-2 py-1 text-gray-600', filter.disabled && 'text-slate-300')">
+        <div [class]="cn('collapse-title text-foreground flex items-center gap-1 px-2 py-1', filter.disabled && 'text-muted-foreground')">
           <!-- aggregation's icon -->
           <i class="me-1 fa-fw {{ filter.icon }}" aria-hidden="true"></i>
 
@@ -9936,7 +10111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
           <span class="me-4 grow text-sm font-semibold">{{ filter.display || filter.name | transloco }}</span>
           @if (filter.count > 0) {
             <!-- count -->
-            <Badge class="min-w-5 px-1">
+            <Badge size="xs" variant="primary">
               {{ filter.count }}
             </Badge>
           }
@@ -9945,7 +10120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
             <button
               variant="ghost"
               size="icon"
-              class="z-10 text-gray-600"
+              class="z-10"
               [attr.title]="'filters.clearFilters' | transloco"
               (click)="clearFilter(filter.column)"
               (keydown.enter)="clearFilter(filter.column)">
@@ -9961,7 +10136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
       </ng-template>
     }
   `, host: {
-                        class: 'divide-y divide-gray-200'
+                        class: 'divide-y divide-muted-foreground/18'
                     }, styles: [":host{scrollbar-width:none}\n"] }]
         }], ctorParameters: () => [] });
 
@@ -9987,18 +10162,18 @@ class MoreButtonComponent {
         }, 0);
         return total;
     }, ...(ngDevMode ? [{ debugName: "totalFiltersCount" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MoreButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: MoreButtonComponent, isStandalone: true, selector: "more-button, MoreButton", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, excludedFilters: { classPropertyName: "excludedFilters", publicName: "excludedFilters", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MoreButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MoreButtonComponent, isStandalone: true, selector: "more-button, MoreButton", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, excludedFilters: { classPropertyName: "excludedFilters", publicName: "excludedFilters", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <Popover class="group">
       <button
         variant="ghost"
-        class="gap-1 truncate font-semibold group-data-[open=true]:border group-data-[open=true]:border-gray-200"
+        class="group-data-[open=true]:border-foreground/18 gap-1 truncate font-semibold group-data-[open=true]:border"
         aria-label="more filters">
         <i class="far fa-filters" aria-hidden="true"></i>
         <span>{{ 'filters.moreFilters' | transloco }}</span>
 
         @if (totalFiltersCount() > 0) {
-          <Badge class="min-w-5 px-1">
+          <Badge size="xs" variant="primary">
             {{ totalFiltersCount() }}
           </Badge>
         }
@@ -10008,21 +10183,21 @@ class MoreButtonComponent {
         <More [count]="count()" [excludedFilters]="excludedFilters()" class="h-full max-w-80 overflow-y-scroll" />
       </PopoverContent>
     </Popover>
-  `, isInline: true, styles: [".more-filters{overflow:var(--scrollbar-overflow, hidden);padding-right:0;scrollbar-width:thin;scrollbar-gutter:stable}.more-filters:hover{--scrollbar-overflow: overlay}\n"], dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: PopoverComponent, selector: "popover, Popover", inputs: ["disabled", "closeOnScroll"] }, { kind: "directive", type: PopoverContentComponent, selector: "popover-content, PopoverContent, popovercontent", inputs: ["position", "keepOpen", "class"] }, { kind: "component", type: MoreComponent, selector: "more, More", inputs: ["count", "excludedFilters"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, styles: [".more-filters{overflow:var(--scrollbar-overflow, hidden);padding-right:0;scrollbar-width:thin;scrollbar-gutter:stable}.more-filters:hover{--scrollbar-overflow: overlay}\n"], 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: ["position", "keepOpen", "class"] }, { kind: "component", type: MoreComponent, selector: "more, More", inputs: ["count", "excludedFilters"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "size", "decoration", "hover"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MoreButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MoreButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'more-button, MoreButton', standalone: true, imports: [ButtonComponent, PopoverComponent, PopoverContentComponent, TranslocoPipe, MoreComponent, BadgeComponent], template: `
     <Popover class="group">
       <button
         variant="ghost"
-        class="gap-1 truncate font-semibold group-data-[open=true]:border group-data-[open=true]:border-gray-200"
+        class="group-data-[open=true]:border-foreground/18 gap-1 truncate font-semibold group-data-[open=true]:border"
         aria-label="more filters">
         <i class="far fa-filters" aria-hidden="true"></i>
         <span>{{ 'filters.moreFilters' | transloco }}</span>
 
         @if (totalFiltersCount() > 0) {
-          <Badge class="min-w-5 px-1">
+          <Badge size="xs" variant="primary">
             {{ totalFiltersCount() }}
           </Badge>
         }
@@ -10038,6 +10213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
 class FiltersBarComponent {
     class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
     position = input('bottom-start', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    morePosition = input('bottom-end', ...(ngDevMode ? [{ debugName: "morePosition" }] : []));
     /**
      * Filters that should be excluded from the filters bar.
      * This can be used to hide specific filters from the UI.
@@ -10144,8 +10320,8 @@ class FiltersBarComponent {
         // filtersCount is the number of filters that can be displayed before the "more filters" option is shown
         this.moreFilterCount.set(count > this.filtersCount() ? this.filtersCount() : count);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FiltersBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", 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 }, excludeFilters: { classPropertyName: "excludeFilters", publicName: "excludeFilters", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClearFilters: "onClearFilters", onClearBasket: "onClearBasket" }, host: { attributes: { "role": "list", "aria-label": "Filters list" }, properties: { "class": "cn(\"flex relative z-filter gap-2\", direction() === \"vertical\" ? \"flex-col items-start\" : \"flex-row\", class())" } }, providers: [provideTranslocoScope('filters')], viewQueries: [{ propertyName: "moreFilterElement", first: true, predicate: MoreButtonComponent, descendants: true, isSignal: true }, { propertyName: "dropdownElements", predicate: FilterButtonComponent, descendants: true, isSignal: true }, { propertyName: "overflowManager", first: true, predicate: OverflowManagerDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FiltersBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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 }, excludeFilters: { classPropertyName: "excludeFilters", publicName: "excludeFilters", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClearFilters: "onClearFilters", onClearBasket: "onClearBasket" }, host: { attributes: { "role": "list", "aria-label": "Filters list" }, properties: { "class": "cn(\"flex relative z-filter gap-2\", direction() === \"vertical\" ? \"flex-col items-start\" : \"flex-row\", class())" } }, providers: [provideTranslocoScope('filters')], viewQueries: [{ propertyName: "moreFilterElement", first: true, predicate: MoreButtonComponent, descendants: true, isSignal: true }, { propertyName: "dropdownElements", predicate: FilterButtonComponent, descendants: true, isSignal: true }, { propertyName: "overflowManager", 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
@@ -10176,13 +10352,13 @@ class FiltersBarComponent {
           overflowStop
           [class]="cn('invisible absolute', direction() === 'horizontal' ? 'right-0' : 'bottom-0', hasMoreFilters().length > 0 && 'visible')"
           [count]="moreFilterCount()"
-          [position]="position()"
+          [position]="morePosition()"
           [excludedFilters]="excludeFilters()" />
       }
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: MoreButtonComponent, selector: "more-button, MoreButton", inputs: ["count", "position", "excludedFilters"] }, { kind: "component", type: FilterButtonComponent, selector: "filter-button, FilterButton", inputs: ["name", "column", "position"] }, { 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", "excludedFilters"] }, { kind: "component", type: FilterButtonComponent, selector: "filter-button, FilterButton", inputs: ["name", "column", "position"] }, { 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.1.2", ngImport: i0, type: FiltersBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FiltersBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'filters-bar, FiltersBar, filtersbar',
@@ -10220,7 +10396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
           overflowStop
           [class]="cn('invisible absolute', direction() === 'horizontal' ? 'right-0' : 'bottom-0', hasMoreFilters().length > 0 && 'visible')"
           [count]="moreFilterCount()"
-          [position]="position()"
+          [position]="morePosition()"
           [excludedFilters]="excludeFilters()" />
       }
     </ng-container>
@@ -10330,46 +10506,46 @@ class DrawerStackComponent {
             drawer?.destroy();
         }, 250);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerStackComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: DrawerStackComponent, isStandalone: true, selector: "app-drawer-stack", host: { properties: { "attr.drawer-opened": "this.drawerOpened" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute;top:50%;right:0;--drawer-width: 46;--drawer-subdrawer-width: 400px;z-index:var(--z-drawer);transition:right .3s linear}:host[drawer-opened=true]{right:calc(1% * var(--drawer-width))}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerStackComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: DrawerStackComponent, isStandalone: true, selector: "DrawerStack, drawerstack", host: { properties: { "attr.drawer-opened": "this.drawerOpened" } }, ngImport: i0, template: ``, isInline: true, styles: [":host{position:absolute;top:50%;right:0;--drawer-width: 46;--drawer-subdrawer-width: 400px;z-index:var(--z-drawer);transition:right .3s linear}:host[drawer-opened=true]{right:calc(1% * var(--drawer-width))}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerStackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerStackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-drawer-stack', template: ``, styles: [":host{position:absolute;top:50%;right:0;--drawer-width: 46;--drawer-subdrawer-width: 400px;z-index:var(--z-drawer);transition:right .3s linear}:host[drawer-opened=true]{right:calc(1% * var(--drawer-width))}\n"] }]
+            args: [{ selector: 'DrawerStack, drawerstack', template: ``, styles: [":host{position:absolute;top:50%;right:0;--drawer-width: 46;--drawer-subdrawer-width: 400px;z-index:var(--z-drawer);transition:right .3s linear}:host[drawer-opened=true]{right:calc(1% * var(--drawer-width))}\n"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { drawerOpened: [{
                 type: HostBinding,
                 args: ['attr.drawer-opened']
             }] } });
 
 class DrawerService {
-    isOpened = new BehaviorSubject(false);
-    isExtended = new BehaviorSubject(false);
+    isOpened = signal(false, ...(ngDevMode ? [{ debugName: "isOpened" }] : []));
+    isExtended = signal(false, ...(ngDevMode ? [{ debugName: "isExtended" }] : []));
     backdrop = inject(BackdropService);
     open() {
-        this.isOpened.next(true);
+        this.isOpened.set(true);
     }
     close() {
         this.collapse();
-        this.isOpened.next(false);
+        this.isOpened.set(false);
     }
     toggle() {
-        this.isOpened.getValue() ? this.close() : this.open();
+        this.isOpened() ? this.close() : this.open();
     }
     extend() {
-        this.isExtended.next(true);
+        this.isExtended.set(true);
         this.backdrop.show();
     }
     collapse() {
         this.backdrop.hide();
-        this.isExtended.next(false);
+        this.isExtended.set(false);
     }
     toggleExtension() {
-        this.isExtended.getValue() ? this.collapse() : this.extend();
+        this.isExtended() ? this.collapse() : this.extend();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerService, decorators: [{
             type: Injectable
         }] });
 
@@ -10410,14 +10586,14 @@ class DrawerComponent {
         afterNextRender(() => {
             this.drawerGridTemplateColumns = this.element.style.gridTemplateColumns;
         });
-        this.drawer.isOpened.pipe(takeUntilDestroyed()).subscribe(state => {
-            this.drawerOpened.set(state);
-            if (!state)
+        effect(() => {
+            this.drawerOpened.set(this.drawer.isOpened());
+            if (!this.drawer.isOpened())
                 this.resetGridTemplateColumns();
         });
-        this.drawer.isExtended.pipe(takeUntilDestroyed()).subscribe(state => {
-            this.drawerExtended.set(state);
-            if (!state)
+        effect(() => {
+            this.drawerExtended.set(this.drawer.isExtended());
+            if (!this.drawer.isExtended())
                 this.resetGridTemplateColumns();
         });
     }
@@ -10430,12 +10606,12 @@ class DrawerComponent {
     resetGridTemplateColumns() {
         this.element.style.gridTemplateColumns = this.defaultDrawerGridTemplate;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: DrawerComponent, isStandalone: true, selector: "app-drawer", host: { listeners: { "mousemove": "mouseMove($event)", "mousedown": "mouseDown($event)", "mouseup": "mouseUp()" }, properties: { "attr.drawer-opened": "drawerOpened()", "attr.drawer-extended": "drawerExtended()", "style.grid-template-columns": "this.drawerGridTemplateColumns" } }, providers: [DrawerService], viewQueries: [{ propertyName: "drawerHandle", first: true, predicate: ["drawerHandle"], descendants: true, isSignal: true }], ngImport: i0, template: ``, isInline: true, styles: [":host{--drawer-width: 46;--drawer-subdrawer-width: 400px;display:grid;position:absolute;height:100%;top:0;right:-100%;justify-content:flex-end;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]{right:0;width:100vw;grid-template-columns:1fr calc(var(--drawer-width) * 1%) var(--drawer-subdrawer-width);box-shadow:unset}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: DrawerComponent, isStandalone: true, selector: "Drawer, drawer", host: { listeners: { "mousemove": "mouseMove($event)", "mousedown": "mouseDown($event)", "mouseup": "mouseUp()" }, properties: { "attr.drawer-opened": "drawerOpened()", "attr.drawer-extended": "drawerExtended()", "style.grid-template-columns": "this.drawerGridTemplateColumns" } }, providers: [DrawerService], viewQueries: [{ propertyName: "drawerHandle", first: true, predicate: ["drawerHandle"], descendants: true, isSignal: true }], ngImport: i0, template: ``, isInline: true, styles: [":host{--drawer-width: 46;--drawer-subdrawer-width: 400px;display:grid;position:absolute;height:100%;top:0;right:-100%;justify-content:flex-end;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]{right:0;width:100vw;grid-template-columns:1fr calc(var(--drawer-width) * 1%) var(--drawer-subdrawer-width);box-shadow:unset}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-drawer', standalone: true, providers: [DrawerService], template: ``, host: {
+            args: [{ selector: 'Drawer, drawer', standalone: true, providers: [DrawerService], template: ``, host: {
                         '[attr.drawer-opened]': 'drawerOpened()',
                         '[attr.drawer-extended]': 'drawerExtended()'
                     }, styles: [":host{--drawer-width: 46;--drawer-subdrawer-width: 400px;display:grid;position:absolute;height:100%;top:0;right:-100%;justify-content:flex-end;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]{right:0;width:100vw;grid-template-columns:1fr calc(var(--drawer-width) * 1%) var(--drawer-subdrawer-width);box-shadow:unset}\n"] }]
@@ -10456,13 +10632,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
 class DrawerNavbarComponent {
     drawerStack = inject(DrawerStackService);
     drawerService = inject(DrawerService);
-    isExtended = toSignal(this.drawerService.isExtended);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.2", type: DrawerNavbarComponent, isStandalone: true, selector: "app-drawer-navbar", ngImport: i0, template: "<menu class=\"flex items-center gap-2 p-4 font-semibold\">\n  <button variant=\"ghost\" class=\"group\" [attr.title]=\"'back' | transloco\" (click)=\"drawerStack.close()\">\n    <i class=\"fa-fw far fa-arrow-left [&_svg]-ms-1 [&_svg]transition-transform opacity-60 group-hover:-translate-x-0.5\"></i>\n    {{ 'back' | transloco }}\n  </button>\n\n  <VerticalDivider />\n\n  <ng-content></ng-content>\n</menu>\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: VerticalDividerComponent, selector: "vertical-divider, VerticalDivider, verticaldivider" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    isExtended = this.drawerService.isExtended();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: DrawerNavbarComponent, isStandalone: true, selector: "DrawerNavbar, drawernavbar", ngImport: i0, template: "<menu class=\"flex items-center gap-2 p-4 font-semibold\">\n  <li>\n    <button variant=\"ghost\" class=\"group\" [attr.title]=\"'back' | transloco\" (click)=\"drawerStack.close()\">\n      <i class=\"fa-fw far fa-arrow-left [&_svg]-ms-1 [&_svg]transition-transform opacity-60 group-hover:-translate-x-0.5\"></i>\n      {{ 'back' | transloco }}\n    </button>\n  </li>\n\n  <li role=\"presentation\">\n    <VerticalDivider class=\"min-h-8\" />\n  </li>\n\n  <ng-content></ng-content>\n</menu>\n", dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: VerticalDividerComponent, selector: "vertical-divider, VerticalDivider, verticaldivider" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerNavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerNavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-drawer-navbar', standalone: true, imports: [TranslocoPipe, ButtonComponent, VerticalDividerComponent], template: "<menu class=\"flex items-center gap-2 p-4 font-semibold\">\n  <button variant=\"ghost\" class=\"group\" [attr.title]=\"'back' | transloco\" (click)=\"drawerStack.close()\">\n    <i class=\"fa-fw far fa-arrow-left [&_svg]-ms-1 [&_svg]transition-transform opacity-60 group-hover:-translate-x-0.5\"></i>\n    {{ 'back' | transloco }}\n  </button>\n\n  <VerticalDivider />\n\n  <ng-content></ng-content>\n</menu>\n" }]
+            args: [{ selector: 'DrawerNavbar, drawernavbar', standalone: true, imports: [TranslocoPipe, ButtonComponent, VerticalDividerComponent], template: "<menu class=\"flex items-center gap-2 p-4 font-semibold\">\n  <li>\n    <button variant=\"ghost\" class=\"group\" [attr.title]=\"'back' | transloco\" (click)=\"drawerStack.close()\">\n      <i class=\"fa-fw far fa-arrow-left [&_svg]-ms-1 [&_svg]transition-transform opacity-60 group-hover:-translate-x-0.5\"></i>\n      {{ 'back' | transloco }}\n    </button>\n  </li>\n\n  <li role=\"presentation\">\n    <VerticalDivider class=\"min-h-8\" />\n  </li>\n\n  <ng-content></ng-content>\n</menu>\n" }]
         }] });
 
 const searchRoute = 'search';
@@ -10470,6 +10646,7 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
     queryParamsStore = inject(QueryParamsStore);
     appStore = inject(AppStore);
     router = inject(Router);
+    route = inject(ActivatedRoute);
     formBuilder = inject(NonNullableFormBuilder);
     overlay = inject(Overlay);
     transloco = inject(TranslocoService);
@@ -10491,10 +10668,6 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
         title: this.formBuilder.group({
             operator: this.formBuilder.control('all'),
             value: this.formBuilder.control(undefined)
-        }),
-        location: this.formBuilder.group({
-            operator: this.formBuilder.control('all'),
-            value: this.formBuilder.control(undefined)
         })
     });
     currentTab = signal('all', ...(ngDevMode ? [{ debugName: "currentTab" }] : []));
@@ -10504,17 +10677,30 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
     aggregations = signal(undefined, ...(ngDevMode ? [{ debugName: "aggregations" }] : []));
     tabs = computed(() => {
         const routeData = this.router.config.find(c => c.path === searchRoute);
-        return !routeData ? [] : ['all'].concat(routeData.children.filter(c => !!c.path && c.path !== 'all' && c.path !== '**').map(c => c.path));
+        return !routeData
+            ? []
+            : [{ path: 'all', display: 'All' }].concat(routeData.children.filter(c => !!c.path && c.path !== 'all' && c.path !== '**').map(c => ({ path: c.path, display: c.data?.['display'] })));
     }, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
     filters = computed(() => {
-        return (this.appStore
+        const cjsonFilters = this.appStore
             .customizationJson()
             .filters?.filter(f => f.column !== '#date')
             .map(f => ({
             column: f.column,
             alias: this.appStore.getColumnAlias(f.column),
+            display: f.display,
+            items: this.aggregations()?.find(a => a.column === f.column)?.items
+        })) || [];
+        const appStoreFilters = this.appStore
+            .getAuthorizedFilters(this.route)
+            .filter(f => !cjsonFilters.some(cf => cf.column === f.column))
+            .map((f) => ({
+            column: f.column,
+            alias: this.appStore.getColumnAlias(f.column),
+            display: f.display,
             items: this.aggregations()?.find(a => a.column === f.column)?.items
-        })) || []);
+        })) || [];
+        return cjsonFilters.concat(appStoreFilters);
     }, ...(ngDevMode ? [{ debugName: "filters" }] : []));
     text = '';
     constructor() {
@@ -10534,7 +10720,7 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
     }
     onSearch() {
         // this params alters the query text
-        const { content, title, location } = this.form.value;
+        const { content, title } = this.form.value;
         let fieldedText = [];
         if (content && content.value) {
             const { operator = 'any', value = '' } = content;
@@ -10546,11 +10732,6 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
             const text = this.formatFilter(operator, value, 'title');
             fieldedText.push(text);
         }
-        if (location && location.value) {
-            const { operator = 'any', value = '' } = location;
-            const text = this.formatFilter(operator, value, 'location');
-            fieldedText.push(text);
-        }
         let text = this.text;
         // now we have to join the fieldedText with the text
         // if text is empty, we must remove the leading space
@@ -10612,7 +10793,7 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
             }
         }
     }
-    /** Format content/title/location filters */
+    /** Format content/title filters */
     formatFilter(operator, value, field = '') {
         const fieldStr = field ? `${field}::` : '';
         switch (operator) {
@@ -10649,7 +10830,10 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
     /** add item to current selection */
     addItem(item, filter) {
         const appliedFilter = this.appliedFilters().find(af => af.column === filter.column);
-        if (!appliedFilter.values.some(v => v.value === item.value)) {
+        if (!appliedFilter) {
+            this.appliedFilters.set(this.appliedFilters().concat([{ column: filter.column, values: [item] }]));
+        }
+        else if (!appliedFilter.values.some(v => v.value === item.value)) {
             appliedFilter.values.push(item);
         }
     }
@@ -10679,31 +10863,19 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
         // todo handle tree items
         return res;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerAdvancedFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: DrawerAdvancedFiltersComponent, isStandalone: true, selector: "advanced-filters", providers: [DrawerService, 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 bg-white\">\n  <app-drawer-navbar class=\"block border-b border-neutral-300 bg-white\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </app-drawer-navbar>\n\n  <div class=\"flex h-full flex-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 h-8 w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white 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          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\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 h-8 w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white 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      <div class=\"flex items-center gap-4\" formGroupName=\"location\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInLocation' | transloco }}</span>\n        <select\n          id=\"location-operator\"\n          class=\"hover:outline-primary focus:outline-primary h-8 w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white 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          id=\"location-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('location.operator')\"\n          formControlName=\"value\" />\n      </div>\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n      <div class=\"inline-flex -space-x-px rtl:space-x-reverse\">\n        @for (tab of tabs(); track $index) {\n          <button\n            [variant]=\"tab !== currentTab() ? 'outline' : 'default'\"\n            class=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md\"\n            (click)=\"onTabChange(tab)\">\n            {{ tab }}\n          </button>\n        }\n      </div>\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.alias\"\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;display:grid;justify-content:flex-end;position:absolute;top:0;height:100%;right:-100%;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: "app-drawer-navbar" }, { 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", "size"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"password\"], input[type=\"number\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerAdvancedFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DrawerAdvancedFiltersComponent, isStandalone: true, selector: "advanced-filters", providers: [DrawerService, 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 bg-white\">\n  <DrawerNavbar class=\"block border-b border-neutral-300 bg-white\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </DrawerNavbar>\n\n  <div class=\"flex h-full flex-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 h-8 w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white 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          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\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 h-8 w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white 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      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n      <div class=\"inline-flex -space-x-px rtl:space-x-reverse\">\n        @for (tab of tabs(); track $index) {\n          <button\n            [decoration]=\"tab.path !== currentTab() ? 'outline' : 'none'\"\n            class=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md\"\n            (click)=\"onTabChange(tab.path)\">\n            {{ tab.display | syslang | transloco }}\n          </button>\n        }\n      </div>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        {{ filter.display || filter.alias | syslang | transloco }}\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;display:grid;justify-content:flex-end;position:absolute;top:0;height:100%;right:-100%;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: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerAdvancedFiltersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerAdvancedFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'advanced-filters', standalone: true, imports: [ReactiveFormsModule, TranslocoPipe, DrawerNavbarComponent, DropdownInputComponent, ButtonComponent, InputComponent], providers: [DrawerService, provideTranslocoScope('drawers')], 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 bg-white\">\n  <app-drawer-navbar class=\"block border-b border-neutral-300 bg-white\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </app-drawer-navbar>\n\n  <div class=\"flex h-full flex-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 h-8 w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white 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          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\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 h-8 w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white 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      <div class=\"flex items-center gap-4\" formGroupName=\"location\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInLocation' | transloco }}</span>\n        <select\n          id=\"location-operator\"\n          class=\"hover:outline-primary focus:outline-primary h-8 w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white 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          id=\"location-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('location.operator')\"\n          formControlName=\"value\" />\n      </div>\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n      <div class=\"inline-flex -space-x-px rtl:space-x-reverse\">\n        @for (tab of tabs(); track $index) {\n          <button\n            [variant]=\"tab !== currentTab() ? 'outline' : 'default'\"\n            class=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md\"\n            (click)=\"onTabChange(tab)\">\n            {{ tab }}\n          </button>\n        }\n      </div>\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.alias\"\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;display:grid;justify-content:flex-end;position:absolute;top:0;height:100%;right:-100%;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"] }]
+            args: [{ selector: 'advanced-filters', standalone: true, imports: [ReactiveFormsModule, TranslocoPipe, SyslangPipe, DrawerNavbarComponent, DropdownInputComponent, ButtonComponent, InputComponent], providers: [DrawerService, provideTranslocoScope('drawers')], 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 bg-white\">\n  <DrawerNavbar class=\"block border-b border-neutral-300 bg-white\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </DrawerNavbar>\n\n  <div class=\"flex h-full flex-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 h-8 w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white 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          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\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 h-8 w-full rounded-md border border-gray-200 bg-neutral-50 px-2 hover:bg-white hover:outline focus:bg-white 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      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n      <div class=\"inline-flex -space-x-px rtl:space-x-reverse\">\n        @for (tab of tabs(); track $index) {\n          <button\n            [decoration]=\"tab.path !== currentTab() ? 'outline' : 'none'\"\n            class=\"rounded-none shadow-none first:rounded-s-md last:rounded-e-md\"\n            (click)=\"onTabChange(tab.path)\">\n            {{ tab.display | syslang | transloco }}\n          </button>\n        }\n      </div>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        {{ filter.display || filter.alias | syslang | transloco }}\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;display:grid;justify-content:flex-end;position:absolute;top:0;height:100%;right:-100%;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"] }]
         }], ctorParameters: () => [] });
 
-class AdvancedSearchComponent {
-    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
-    destroyRef = inject(DestroyRef);
-    labels = inject(AppStore).getLabels();
-    applicationStore = inject(ApplicationStore);
+class EntitiesPanel {
+    cn = cn;
     appStore = inject(AppStore);
-    selectionStore = inject(SelectionStore);
     previewService = inject(PreviewService);
-    queryParamsStore = inject(QueryParamsStore);
-    input = signal(getState(this.selectionStore).queryText || '', ...(ngDevMode ? [{ debugName: "input" }] : []));
-    extracts = computed(() => {
-        getState(this.applicationStore);
-        if (!this.article())
-            return [];
-        return this.applicationStore.getExtracts(this.article().id);
-    }, ...(ngDevMode ? [{ debugName: "extracts" }] : []));
-    similarDocuments = signal([], ...(ngDevMode ? [{ debugName: "similarDocuments" }] : []));
+    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
     previewHighlights = computed(() => {
         const highlights = this.appStore.getWebServiceByType('preview')?.highlights
             ?.split(',')
@@ -10717,42 +10889,10 @@ class AdvancedSearchComponent {
     navigation = signal(undefined, ...(ngDevMode ? [{ debugName: "navigation" }] : []));
     hovering = signal(undefined, ...(ngDevMode ? [{ debugName: "hovering" }] : []));
     hoverIndex = computed(() => (this.navigation()?.value === this.hovering() ? this.navigation().index : 0), ...(ngDevMode ? [{ debugName: "hoverIndex" }] : []));
-    hasLabels = computed(() => {
-        const article = this.article(); // required as any otherwise the lines below won't compile
-        const publicLabels = article[this.labels.public];
-        const privateLabels = article[this.labels.private];
-        return (publicLabels && publicLabels.length > 0) || (privateLabels && privateLabels.length > 0);
-    }, ...(ngDevMode ? [{ debugName: "hasLabels" }] : []));
-    loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    constructor() {
-        this.previewService.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {
-            switch (event) {
-                case 'fetching':
-                    this.loading.set(true);
-                    break;
-                default:
-                    this.loading.set(false);
-                    break;
-            }
-        });
-        effect(() => {
-            const id = this.article().id;
-            untracked(() => {
-                const queryName = this.queryParamsStore.getQuery().name;
-                fetchSimilarDocuments(id, queryName).then(res => this.similarDocuments.set(res.data));
-            });
-        });
-    }
-    executeSearch() {
-        this.selectionStore.update({ queryText: this.input() });
-    }
-    clearInput() {
-        this.input.set('');
-    }
     scrollTo(type, index, usePassageHighlighter = false) {
         // if previewData contains "matchingpassages" then we use the passage highlighter otherwise we use "extractslocations"
         const category = type || this.previewService.highlightCategory;
-        this.previewService.events.emit('scrollTo');
+        this.previewService.events.set('scrollTo');
         this.previewService.sendMessage({ action: 'select', id: `${category}_${index}`, usePassageHighlighter });
     }
     navigateNext(entity, data) {
@@ -10777,14 +10917,399 @@ class AdvancedSearchComponent {
             this.scrollTo(entity, id);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: AdvancedSearchComponent, isStandalone: true, selector: "advanced-search", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideTranslocoScope('drawers')], ngImport: i0, template: "@if (article()) {\n  <div class=\"scroll-stable flex h-screen flex-col overflow-y-auto pb-6 pl-6 pr-3\">\n    <section class=\"mb-4 mt-6 flex w-full flex-col gap-6\">\n      <header\n        id=\"panel-control\"\n        class=\"focus-within:outline-primary group flex rounded focus-within:outline hover:outline [&:not(:focus-within)]:hover:outline-neutral-300\">\n        <div class=\"flex grow items-center gap-2 rounded-e-none rounded-s bg-neutral-50 pl-2 group-hover:bg-white\">\n          <input\n            id=\"advanced-search-input\"\n            type=\"search\"\n            class=\"grow bg-neutral-50 focus:outline-none group-hover:bg-white\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            [attr.placeholder]=\"'drawers.inputPlaceholder' | transloco\"\n            [attr.aria-label]=\"'drawers.inputPlaceholder' | transloco\"\n            [ngModel]=\"input()\"\n            (ngModelChange)=\"input.set($event)\"\n            (keydown.enter)=\"executeSearch()\" />\n\n          @if (input() !== '') {\n            <button\n              variant=\"icon\"\n              size=\"icon\"\n              [attr.title]=\"'clear' | transloco\"\n              [attr.aria-label]=\"'clear' | transloco\"\n              (click)=\"clearInput()\"\n              (keydown.enter)=\"clearInput()\">\n              <i class=\"fa-fw far fa-circle-xmark\"></i>\n            </button>\n          }\n        </div>\n\n        <button\n          size=\"icon\"\n          class=\"rounded-e rounded-s-none group-focus-within:rounded-br-none\"\n          [disabled]=\"input() === '' || null\"\n          [attr.title]=\"'search' | transloco\"\n          [attr.aria-label]=\"'search' | transloco\"\n          (click)=\"executeSearch()\">\n          <i class=\"fa-fw far fa-magnifying-glass\"></i>\n        </button>\n      </header>\n    </section>\n\n    <!-- the same name is used everywhere to simulate an accordion -->\n    <!-- extracts -->\n    <details name=\"advanced-search-panels\" class=\"group border-b border-neutral-300\" open>\n      <summary class=\"sticky top-0 flex cursor-pointer select-none items-baseline justify-between bg-white p-3\">\n        <p class=\"flex items-baseline gap-2 font-semibold\">\n          <i class=\"fa-fw far fa-magnifying-glass\"></i>\n          {{ 'extracts' | transloco }}\n        </p>\n\n        <i class=\"fa-fw far fa-chevron-down group-open:rotate-180\"></i>\n      </summary>\n\n      @if (loading()) {\n        <div class=\"flex h-32 items-center justify-center\">\n          <i class=\"fa-fw far fa-spinner-third fa-spin text-primary\"></i>\n        </div>\n      } @else {\n        <ul>\n          @for (extract of extracts(); track $index) {\n            <li class=\"hover:bg-highlight mr-2 rounded px-2 py-1\" [id]=\"extract.id\" [attr.data-id]=\"extract.textIndex\">\n              <p class=\"cursor-pointer\" role=\"button\" [innerHTML]=\"extract.text\" (click)=\"scrollTo(undefined, extract.textIndex, true)\"></p>\n            </li>\n\n            <li class=\"mr-2 h-[1px] bg-neutral-200 px-2\"></li>\n          } @empty {\n            <li class=\"text-slate-300\">{{ 'drawers.noRelevantExtracts' | transloco }}</li>\n          }\n        </ul>\n      }\n    </details>\n\n    <!-- labels -->\n    @if (hasLabels()) {\n      <details class=\"group border-b border-neutral-300\" name=\"advanced-search-panels\">\n        <summary class=\"sticky top-0 flex cursor-pointer select-none items-baseline justify-between bg-white p-3\">\n          <p class=\"flex items-baseline gap-2 font-semibold\">\n            <i class=\"fa-fw far fa-tags\"></i>\n            {{ 'labels' | transloco }}\n          </p>\n\n          <i class=\"fa-fw far fa-chevron-down group-open:rotate-180\"></i>\n        </summary>\n\n        <div>\n          <ul class=\"mt-4 flex flex-col flex-wrap gap-2\">\n            <li>\n              <Metadata variant=\"outline\" [article]=\"article()!\" [metadata]=\"labels.public\" />\n            </li>\n\n            <li>\n              <Metadata variant=\"outline\" [article]=\"article()!\" [metadata]=\"labels.private\" />\n            </li>\n          </ul>\n        </div>\n      </details>\n    }\n\n    <!-- entities -->\n    <details name=\"advanced-search-panels\" class=\"group border-b border-neutral-300\">\n      <summary class=\"sticky top-0 flex cursor-pointer select-none items-baseline justify-between bg-white p-3\">\n        <p class=\"flex items-baseline gap-2 font-semibold capitalize\">\n          <i class=\"fa-fw far fa-highlighter\"></i>\n          {{ 'entities' | transloco }}\n        </p>\n\n        <i class=\"fa-fw far fa-chevron-down group-open:rotate-180\"></i>\n      </summary>\n      @for (highlight of previewHighlights(); track $index) {\n        @if (highlight.metadata) {\n          <ng-container *ngTemplateOutlet=\"metadataPanel; context: highlight\" />\n        }\n      }\n    </details>\n\n    <!-- similar documents -->\n    @if (similarDocuments().length > 0) {\n      <details class=\"group border-b border-neutral-300\" name=\"advanced-search-panels\">\n        <summary class=\"sticky top-0 flex cursor-pointer select-none items-baseline justify-between bg-white p-3\">\n          <p class=\"flex items-baseline gap-2 font-semibold\">\n            <i class=\"fa-fw far fa-tags\"></i>\n            {{ 'drawers.similarDocuments' | transloco }}\n          </p>\n\n          <i class=\"fa-fw far fa-chevron-down group-open:rotate-180\"></i>\n        </summary>\n\n        <div>\n          <ul class=\"mb-2 mt-4 flex flex-col flex-wrap px-2\" role=\"list\">\n            @for (document of similarDocuments(); track $index) {\n              <li role=\"listitem\" selectArticleOnClick [article]=\"document\" strategy=\"stack\">\n                <div class=\"text-primary flex size-[20px] items-center justify-center rounded-full bg-neutral-50\">\n                  <source [collection]=\"article().collection\" [connector]=\"article().connector\" class=\"text-xs\" />\n                </div>\n\n                <span>{{ document.displayTitle ?? document.title }}</span>\n              </li>\n            }\n          </ul>\n        </div>\n      </details>\n    }\n  </div>\n}\n\n<!-- entities's template -->\n<ng-template #metadataPanel let-metadata=\"metadata\" let-name=\"name\" let-iconClass=\"iconClass\" let-entity=\"entity\">\n  <details name=\"advanced-search-entities\" class=\"group/entities px-3 pb-3\">\n    <summary class=\"sticky top-8 flex cursor-pointer select-none items-baseline justify-between bg-white\">\n      <p class=\"flex items-baseline gap-2 font-semibold capitalize\">\n        <i class=\"fa-fw {{ iconClass || 'far fa-list' }}\"></i>\n        {{ name | transloco }}\n      </p>\n\n      <i class=\"fa-fw far fa-chevron-down group-open/entities:rotate-180\"></i>\n    </summary>\n\n    <ul role=\"list\">\n      @for (data of metadata; track $index) {\n        <li role=\"listitem\" class=\"flex justify-between py-1 pl-2\" (mouseenter)=\"hovering.set(data.value)\" (mouseleave)=\"hovering.set(undefined)\">\n          <!-- shrink w-1/2 grow truncate ovoid the overlap when hovering the row -->\n          <p class=\"w-1/2 shrink grow truncate\">{{ data.display }}</p>\n\n          <p class=\"flex items-center gap-2\">\n            @if (hovering() === data.value) {\n              <i class=\"fa-light fa-chevron-left\" aria-label=\"previous entity\" role=\"button\" (click)=\"navigatePrev(entity, data)\"></i>\n\n              <span>{{ hoverIndex() }} / {{ data.count }}</span>\n\n              <i class=\"fa-light fa-chevron-right\" aria-label=\"next entity\" role=\"button\" (click)=\"navigateNext(entity, data)\"></i>\n            } @else {\n              {{ data.count }}\n            }\n          </p>\n        </li>\n      }\n    </ul>\n  </details>\n</ng-template>\n", styles: [":host{--panel-max-height: none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "size"] }, { kind: "component", type: MetadataComponent, selector: "Metadata, metadata", inputs: ["class", "variant", "metadata", "article", "limit"], outputs: ["click"], exportAs: ["metadata"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant"] }, { kind: "component", type: SourceComponent, selector: "source, Source", inputs: ["collection", "connector"] }, { kind: "directive", type: SelectArticleOnClickDirective, selector: "[appSelectArticleOnClick],[selectArticleOnClick]", inputs: ["article", "strategy"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: EntitiesPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: EntitiesPanel, isStandalone: true, selector: "entities-panel,EntitiesPanel,entitiesPanel", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <details [class]="cn('group/parent', '[&>details>summary>i>svg]:group-open/entities:rotate-180')" name="advanced-search-panels">
+      <summary class="sticky top-0 flex cursor-pointer select-none items-baseline justify-between p-3">
+        <p class="flex items-baseline gap-2 font-semibold capitalize">
+          <i class="fa-fw far fa-highlighter"></i>
+          {{ 'entities' | transloco }}
+        </p>
+
+        <i class="fa-fw far fa-chevron-down group-open:rotate-180"></i>
+      </summary>
+      @for (highlight of previewHighlights(); track $index) {
+        @if (highlight.metadata) {
+          <ng-container *ngTemplateOutlet="metadataPanel; context: highlight" />
+        }
+      }
+    </details>
+
+    <!-- entities's template -->
+    <ng-template #metadataPanel let-metadata="metadata" let-name="name" let-iconClass="iconClass" let-entity="entity">
+      <details class="group/entities p-3 first:pt-0" name="advanced-search-entities">
+        <summary class="sticky top-8 flex cursor-pointer select-none items-baseline justify-between">
+          <p class="flex items-baseline gap-2 font-semibold capitalize">
+            <i class="fa-fw {{ iconClass || 'far fa-list' }}"></i>
+            {{ name | transloco }}
+          </p>
+
+          <i class="fa-fw far fa-chevron-down"></i>
+        </summary>
+
+        <ul role="list">
+          @for (data of metadata; track $index) {
+            <li role="listitem" class="flex justify-between py-1 pl-2" (mouseenter)="hovering.set(data.value)" (mouseleave)="hovering.set(undefined)">
+              <!-- shrink w-1/2 grow truncate ovoid the overlap when hovering the row -->
+              <p class="w-1/2 shrink grow truncate">{{ data.display }}</p>
+
+              <p class="flex items-center gap-2">
+                @if (hovering() === data.value) {
+                  <i class="fa-light fa-chevron-left" aria-label="previous entity" role="button" (click)="navigatePrev(entity, data)"></i>
+
+                  <span>{{ hoverIndex() }} / {{ data.count }}</span>
+
+                  <i class="fa-light fa-chevron-right" aria-label="next entity" role="button" (click)="navigateNext(entity, data)"></i>
+                } @else {
+                  {{ data.count }}
+                }
+              </p>
+            </li>
+          }
+        </ul>
+      </details>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.1.7", ngImport: i0, type: EntitiesPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'entities-panel,EntitiesPanel,entitiesPanel',
+                    imports: [TranslocoPipe, NgTemplateOutlet, ListItemComponent],
+                    template: `
+    <details [class]="cn('group/parent', '[&>details>summary>i>svg]:group-open/entities:rotate-180')" name="advanced-search-panels">
+      <summary class="sticky top-0 flex cursor-pointer select-none items-baseline justify-between p-3">
+        <p class="flex items-baseline gap-2 font-semibold capitalize">
+          <i class="fa-fw far fa-highlighter"></i>
+          {{ 'entities' | transloco }}
+        </p>
+
+        <i class="fa-fw far fa-chevron-down group-open:rotate-180"></i>
+      </summary>
+      @for (highlight of previewHighlights(); track $index) {
+        @if (highlight.metadata) {
+          <ng-container *ngTemplateOutlet="metadataPanel; context: highlight" />
+        }
+      }
+    </details>
+
+    <!-- entities's template -->
+    <ng-template #metadataPanel let-metadata="metadata" let-name="name" let-iconClass="iconClass" let-entity="entity">
+      <details class="group/entities p-3 first:pt-0" name="advanced-search-entities">
+        <summary class="sticky top-8 flex cursor-pointer select-none items-baseline justify-between">
+          <p class="flex items-baseline gap-2 font-semibold capitalize">
+            <i class="fa-fw {{ iconClass || 'far fa-list' }}"></i>
+            {{ name | transloco }}
+          </p>
+
+          <i class="fa-fw far fa-chevron-down"></i>
+        </summary>
+
+        <ul role="list">
+          @for (data of metadata; track $index) {
+            <li role="listitem" class="flex justify-between py-1 pl-2" (mouseenter)="hovering.set(data.value)" (mouseleave)="hovering.set(undefined)">
+              <!-- shrink w-1/2 grow truncate ovoid the overlap when hovering the row -->
+              <p class="w-1/2 shrink grow truncate">{{ data.display }}</p>
+
+              <p class="flex items-center gap-2">
+                @if (hovering() === data.value) {
+                  <i class="fa-light fa-chevron-left" aria-label="previous entity" role="button" (click)="navigatePrev(entity, data)"></i>
+
+                  <span>{{ hoverIndex() }} / {{ data.count }}</span>
+
+                  <i class="fa-light fa-chevron-right" aria-label="next entity" role="button" (click)="navigateNext(entity, data)"></i>
+                } @else {
+                  {{ data.count }}
+                }
+              </p>
+            </li>
+          }
+        </ul>
+      </details>
+    </ng-template>
+  `
+                }]
+        }] });
+
+class ExtractsPanel {
+    cn = cn;
+    destroyRef = inject(DestroyRef);
+    applicationStore = inject(ApplicationStore);
+    previewService = inject(PreviewService);
+    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
+    loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    extracts = signal([], ...(ngDevMode ? [{ debugName: "extracts" }] : []));
+    constructor() {
+        effect(() => {
+            this.loading.set(this.previewService.events() === 'fetching');
+        });
+        effect(() => {
+            const { id } = this.article();
+            if (id && !this.loading()) {
+                this.extracts.set(this.applicationStore.getExtracts(id));
+            }
+        });
+    }
+    scrollTo(type, index, usePassageHighlighter = false) {
+        // if previewData contains "matchingpassages" then we use the passage highlighter otherwise we use "extractslocations"
+        const category = type || this.previewService.highlightCategory;
+        this.previewService.events.set('scrollTo');
+        this.previewService.sendMessage({ action: 'select', id: `${category}_${index}`, usePassageHighlighter });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ExtractsPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: ExtractsPanel, isStandalone: true, selector: "extracts-panel, ExtractsPanel, extractspanel", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <details class="group/parent" name="advanced-search-panels" open>
+      <summary [class]="cn('sticky top-0 flex cursor-pointer select-none items-baseline justify-between p-3', '')">
+        <p class="flex items-baseline gap-2 font-semibold">
+          <i class="fa-fw far fa-tags"></i>
+          {{ 'extracts' | transloco }}
+        </p>
+
+        <i class="fa-fw far fa-chevron-down"></i>
+      </summary>
+
+      @if (loading()) {
+        <div class="flex h-32 items-center justify-center">
+          <i class="fa-fw far fa-spinner-third fa-spin text-primary"></i>
+        </div>
+      } @else {
+        <ul>
+          @for (extract of extracts(); track $index) {
+            <li class="hover:bg-muted mr-2 rounded px-2 py-1" [id]="extract.id" [attr.data-id]="extract.textIndex">
+              <p class="cursor-pointer" role="button" [innerHTML]="extract.text" (click)="scrollTo(undefined, extract.textIndex, true)"></p>
+            </li>
+          } @empty {
+            <li class="text-slate-300">{{ 'drawers.noRelevantExtracts' | transloco }}</li>
+          }
+        </ul>
+      }
+    </details>
+  `, isInline: true, dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ExtractsPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'advanced-search', standalone: true, providers: [provideTranslocoScope('drawers')], imports: [NgTemplateOutlet, FormsModule, ButtonComponent, MetadataComponent, ListItemComponent, TranslocoPipe, SourceComponent, SelectArticleOnClickDirective], template: "@if (article()) {\n  <div class=\"scroll-stable flex h-screen flex-col overflow-y-auto pb-6 pl-6 pr-3\">\n    <section class=\"mb-4 mt-6 flex w-full flex-col gap-6\">\n      <header\n        id=\"panel-control\"\n        class=\"focus-within:outline-primary group flex rounded focus-within:outline hover:outline [&:not(:focus-within)]:hover:outline-neutral-300\">\n        <div class=\"flex grow items-center gap-2 rounded-e-none rounded-s bg-neutral-50 pl-2 group-hover:bg-white\">\n          <input\n            id=\"advanced-search-input\"\n            type=\"search\"\n            class=\"grow bg-neutral-50 focus:outline-none group-hover:bg-white\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            [attr.placeholder]=\"'drawers.inputPlaceholder' | transloco\"\n            [attr.aria-label]=\"'drawers.inputPlaceholder' | transloco\"\n            [ngModel]=\"input()\"\n            (ngModelChange)=\"input.set($event)\"\n            (keydown.enter)=\"executeSearch()\" />\n\n          @if (input() !== '') {\n            <button\n              variant=\"icon\"\n              size=\"icon\"\n              [attr.title]=\"'clear' | transloco\"\n              [attr.aria-label]=\"'clear' | transloco\"\n              (click)=\"clearInput()\"\n              (keydown.enter)=\"clearInput()\">\n              <i class=\"fa-fw far fa-circle-xmark\"></i>\n            </button>\n          }\n        </div>\n\n        <button\n          size=\"icon\"\n          class=\"rounded-e rounded-s-none group-focus-within:rounded-br-none\"\n          [disabled]=\"input() === '' || null\"\n          [attr.title]=\"'search' | transloco\"\n          [attr.aria-label]=\"'search' | transloco\"\n          (click)=\"executeSearch()\">\n          <i class=\"fa-fw far fa-magnifying-glass\"></i>\n        </button>\n      </header>\n    </section>\n\n    <!-- the same name is used everywhere to simulate an accordion -->\n    <!-- extracts -->\n    <details name=\"advanced-search-panels\" class=\"group border-b border-neutral-300\" open>\n      <summary class=\"sticky top-0 flex cursor-pointer select-none items-baseline justify-between bg-white p-3\">\n        <p class=\"flex items-baseline gap-2 font-semibold\">\n          <i class=\"fa-fw far fa-magnifying-glass\"></i>\n          {{ 'extracts' | transloco }}\n        </p>\n\n        <i class=\"fa-fw far fa-chevron-down group-open:rotate-180\"></i>\n      </summary>\n\n      @if (loading()) {\n        <div class=\"flex h-32 items-center justify-center\">\n          <i class=\"fa-fw far fa-spinner-third fa-spin text-primary\"></i>\n        </div>\n      } @else {\n        <ul>\n          @for (extract of extracts(); track $index) {\n            <li class=\"hover:bg-highlight mr-2 rounded px-2 py-1\" [id]=\"extract.id\" [attr.data-id]=\"extract.textIndex\">\n              <p class=\"cursor-pointer\" role=\"button\" [innerHTML]=\"extract.text\" (click)=\"scrollTo(undefined, extract.textIndex, true)\"></p>\n            </li>\n\n            <li class=\"mr-2 h-[1px] bg-neutral-200 px-2\"></li>\n          } @empty {\n            <li class=\"text-slate-300\">{{ 'drawers.noRelevantExtracts' | transloco }}</li>\n          }\n        </ul>\n      }\n    </details>\n\n    <!-- labels -->\n    @if (hasLabels()) {\n      <details class=\"group border-b border-neutral-300\" name=\"advanced-search-panels\">\n        <summary class=\"sticky top-0 flex cursor-pointer select-none items-baseline justify-between bg-white p-3\">\n          <p class=\"flex items-baseline gap-2 font-semibold\">\n            <i class=\"fa-fw far fa-tags\"></i>\n            {{ 'labels' | transloco }}\n          </p>\n\n          <i class=\"fa-fw far fa-chevron-down group-open:rotate-180\"></i>\n        </summary>\n\n        <div>\n          <ul class=\"mt-4 flex flex-col flex-wrap gap-2\">\n            <li>\n              <Metadata variant=\"outline\" [article]=\"article()!\" [metadata]=\"labels.public\" />\n            </li>\n\n            <li>\n              <Metadata variant=\"outline\" [article]=\"article()!\" [metadata]=\"labels.private\" />\n            </li>\n          </ul>\n        </div>\n      </details>\n    }\n\n    <!-- entities -->\n    <details name=\"advanced-search-panels\" class=\"group border-b border-neutral-300\">\n      <summary class=\"sticky top-0 flex cursor-pointer select-none items-baseline justify-between bg-white p-3\">\n        <p class=\"flex items-baseline gap-2 font-semibold capitalize\">\n          <i class=\"fa-fw far fa-highlighter\"></i>\n          {{ 'entities' | transloco }}\n        </p>\n\n        <i class=\"fa-fw far fa-chevron-down group-open:rotate-180\"></i>\n      </summary>\n      @for (highlight of previewHighlights(); track $index) {\n        @if (highlight.metadata) {\n          <ng-container *ngTemplateOutlet=\"metadataPanel; context: highlight\" />\n        }\n      }\n    </details>\n\n    <!-- similar documents -->\n    @if (similarDocuments().length > 0) {\n      <details class=\"group border-b border-neutral-300\" name=\"advanced-search-panels\">\n        <summary class=\"sticky top-0 flex cursor-pointer select-none items-baseline justify-between bg-white p-3\">\n          <p class=\"flex items-baseline gap-2 font-semibold\">\n            <i class=\"fa-fw far fa-tags\"></i>\n            {{ 'drawers.similarDocuments' | transloco }}\n          </p>\n\n          <i class=\"fa-fw far fa-chevron-down group-open:rotate-180\"></i>\n        </summary>\n\n        <div>\n          <ul class=\"mb-2 mt-4 flex flex-col flex-wrap px-2\" role=\"list\">\n            @for (document of similarDocuments(); track $index) {\n              <li role=\"listitem\" selectArticleOnClick [article]=\"document\" strategy=\"stack\">\n                <div class=\"text-primary flex size-[20px] items-center justify-center rounded-full bg-neutral-50\">\n                  <source [collection]=\"article().collection\" [connector]=\"article().connector\" class=\"text-xs\" />\n                </div>\n\n                <span>{{ document.displayTitle ?? document.title }}</span>\n              </li>\n            }\n          </ul>\n        </div>\n      </details>\n    }\n  </div>\n}\n\n<!-- entities's template -->\n<ng-template #metadataPanel let-metadata=\"metadata\" let-name=\"name\" let-iconClass=\"iconClass\" let-entity=\"entity\">\n  <details name=\"advanced-search-entities\" class=\"group/entities px-3 pb-3\">\n    <summary class=\"sticky top-8 flex cursor-pointer select-none items-baseline justify-between bg-white\">\n      <p class=\"flex items-baseline gap-2 font-semibold capitalize\">\n        <i class=\"fa-fw {{ iconClass || 'far fa-list' }}\"></i>\n        {{ name | transloco }}\n      </p>\n\n      <i class=\"fa-fw far fa-chevron-down group-open/entities:rotate-180\"></i>\n    </summary>\n\n    <ul role=\"list\">\n      @for (data of metadata; track $index) {\n        <li role=\"listitem\" class=\"flex justify-between py-1 pl-2\" (mouseenter)=\"hovering.set(data.value)\" (mouseleave)=\"hovering.set(undefined)\">\n          <!-- shrink w-1/2 grow truncate ovoid the overlap when hovering the row -->\n          <p class=\"w-1/2 shrink grow truncate\">{{ data.display }}</p>\n\n          <p class=\"flex items-center gap-2\">\n            @if (hovering() === data.value) {\n              <i class=\"fa-light fa-chevron-left\" aria-label=\"previous entity\" role=\"button\" (click)=\"navigatePrev(entity, data)\"></i>\n\n              <span>{{ hoverIndex() }} / {{ data.count }}</span>\n\n              <i class=\"fa-light fa-chevron-right\" aria-label=\"next entity\" role=\"button\" (click)=\"navigateNext(entity, data)\"></i>\n            } @else {\n              {{ data.count }}\n            }\n          </p>\n        </li>\n      }\n    </ul>\n  </details>\n</ng-template>\n", styles: [":host{--panel-max-height: none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"] }]
+            args: [{
+                    selector: 'extracts-panel, ExtractsPanel, extractspanel',
+                    imports: [TranslocoPipe],
+                    template: `
+    <details class="group/parent" name="advanced-search-panels" open>
+      <summary [class]="cn('sticky top-0 flex cursor-pointer select-none items-baseline justify-between p-3', '')">
+        <p class="flex items-baseline gap-2 font-semibold">
+          <i class="fa-fw far fa-tags"></i>
+          {{ 'extracts' | transloco }}
+        </p>
+
+        <i class="fa-fw far fa-chevron-down"></i>
+      </summary>
+
+      @if (loading()) {
+        <div class="flex h-32 items-center justify-center">
+          <i class="fa-fw far fa-spinner-third fa-spin text-primary"></i>
+        </div>
+      } @else {
+        <ul>
+          @for (extract of extracts(); track $index) {
+            <li class="hover:bg-muted mr-2 rounded px-2 py-1" [id]="extract.id" [attr.data-id]="extract.textIndex">
+              <p class="cursor-pointer" role="button" [innerHTML]="extract.text" (click)="scrollTo(undefined, extract.textIndex, true)"></p>
+            </li>
+          } @empty {
+            <li class="text-slate-300">{{ 'drawers.noRelevantExtracts' | transloco }}</li>
+          }
+        </ul>
+      }
+    </details>
+  `
+                }]
         }], ctorParameters: () => [] });
 
+class LabelsPanel {
+    labels = inject(AppStore).getLabels();
+    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
+    hasLabels = computed(() => {
+        const article = this.article(); // required as any otherwise the lines below won't compile
+        const publicLabels = article[this.labels.public];
+        const privateLabels = article[this.labels.private];
+        return (publicLabels && publicLabels.length > 0) || (privateLabels && privateLabels.length > 0);
+    }, ...(ngDevMode ? [{ debugName: "hasLabels" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LabelsPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: LabelsPanel, isStandalone: true, selector: "labels-panel, LabelsPanel, labelspanel", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (hasLabels()) {
+      <details class="group/parent" name="advanced-search-panels">
+        <summary class="sticky top-0 flex cursor-pointer select-none items-baseline justify-between p-3">
+          <p class="flex items-baseline gap-2 font-semibold">
+            <i class="fa-fw far fa-tags"></i>
+            {{ 'labels' | transloco }}
+          </p>
+
+          <i class="fa-fw far fa-chevron-down group-open:rotate-180"></i>
+        </summary>
+
+        <div>
+          <ul class="mt-4 flex flex-col flex-wrap gap-2">
+            <li>
+              <Metadata decoration="outline" hover="yes" [article]="article()!" [metadata]="labels.public" />
+            </li>
+
+            <li>
+              <Metadata decoration="outline" hover="yes" [article]="article()!" [metadata]="labels.private" />
+            </li>
+          </ul>
+        </div>
+      </details>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: MetadataComponent, selector: "Metadata, metadata", inputs: ["class", "variant", "decoration", "hover", "metadata", "article", "limit"], outputs: ["click"], exportAs: ["metadata"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LabelsPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'labels-panel, LabelsPanel, labelspanel',
+                    imports: [TranslocoPipe, MetadataComponent],
+                    template: `
+    @if (hasLabels()) {
+      <details class="group/parent" name="advanced-search-panels">
+        <summary class="sticky top-0 flex cursor-pointer select-none items-baseline justify-between p-3">
+          <p class="flex items-baseline gap-2 font-semibold">
+            <i class="fa-fw far fa-tags"></i>
+            {{ 'labels' | transloco }}
+          </p>
+
+          <i class="fa-fw far fa-chevron-down group-open:rotate-180"></i>
+        </summary>
+
+        <div>
+          <ul class="mt-4 flex flex-col flex-wrap gap-2">
+            <li>
+              <Metadata decoration="outline" hover="yes" [article]="article()!" [metadata]="labels.public" />
+            </li>
+
+            <li>
+              <Metadata decoration="outline" hover="yes" [article]="article()!" [metadata]="labels.private" />
+            </li>
+          </ul>
+        </div>
+      </details>
+    }
+  `
+                }]
+        }] });
+
+class SimilarDocumentsPanel {
+    queryParamsStore = inject(QueryParamsStore);
+    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
+    queryName = computed(() => this.queryParamsStore.getQuery().name, ...(ngDevMode ? [{ debugName: "queryName" }] : []));
+    similarDocumentsResource = resource({
+        params: () => {
+            const { id } = this.article() || {};
+            return { id };
+        },
+        loader: ({ params: { id }, abortSignal }) => {
+            const queryName = this.queryName();
+            return fetchSimilarDocuments(id, queryName, abortSignal);
+        },
+        defaultValue: []
+    });
+    similarDocuments = computed(() => {
+        if (this.similarDocumentsResource.hasValue()) {
+            return this.similarDocumentsResource.value() || [];
+        }
+        return [];
+    }, ...(ngDevMode ? [{ debugName: "similarDocuments" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SimilarDocumentsPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: SimilarDocumentsPanel, isStandalone: true, selector: "similar-documents-panel, SimilarDocumentsPanel, similardocumentspanel", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (similarDocuments().length > 0) {
+      <details class="group/parent" name="advanced-search-panels">
+        <summary class="sticky top-0 flex cursor-pointer select-none items-baseline justify-between p-3">
+          <p class="flex items-baseline gap-2 font-semibold">
+            <i class="fa-fw far fa-tags"></i>
+            {{ 'drawers.similarDocuments' | transloco }}
+          </p>
+
+          <i class="fa-fw far fa-chevron-down group-open:rotate-180"></i>
+        </summary>
+
+        <div>
+          <ul class="mb-2 mt-4 flex flex-col flex-wrap px-2" role="list">
+            @for (document of similarDocuments(); track $index) {
+              <li role="listitem" selectArticleOnClick [article]="document" strategy="stack">
+                <div class="text-primary flex size-[20px] items-center justify-center rounded-full">
+                  <source [collection]="article().collection" [connector]="article().connector" class="text-xs" />
+                </div>
+
+                <span>{{ document.displayTitle ?? document.title }}</span>
+              </li>
+            }
+          </ul>
+        </div>
+      </details>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: SelectArticleOnClickDirective, selector: "[selectArticleOnClick]", inputs: ["article", "strategy"] }, { kind: "component", type: SourceComponent, selector: "source, Source", inputs: ["collection", "connector"] }, { 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.1.7", ngImport: i0, type: SimilarDocumentsPanel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'similar-documents-panel, SimilarDocumentsPanel, similardocumentspanel',
+                    imports: [TranslocoPipe, SelectArticleOnClickDirective, SourceComponent, ListItemComponent],
+                    template: `
+    @if (similarDocuments().length > 0) {
+      <details class="group/parent" name="advanced-search-panels">
+        <summary class="sticky top-0 flex cursor-pointer select-none items-baseline justify-between p-3">
+          <p class="flex items-baseline gap-2 font-semibold">
+            <i class="fa-fw far fa-tags"></i>
+            {{ 'drawers.similarDocuments' | transloco }}
+          </p>
+
+          <i class="fa-fw far fa-chevron-down group-open:rotate-180"></i>
+        </summary>
+
+        <div>
+          <ul class="mb-2 mt-4 flex flex-col flex-wrap px-2" role="list">
+            @for (document of similarDocuments(); track $index) {
+              <li role="listitem" selectArticleOnClick [article]="document" strategy="stack">
+                <div class="text-primary flex size-[20px] items-center justify-center rounded-full">
+                  <source [collection]="article().collection" [connector]="article().connector" class="text-xs" />
+                </div>
+
+                <span>{{ document.displayTitle ?? document.title }}</span>
+              </li>
+            }
+          </ul>
+        </div>
+      </details>
+    }
+  `
+                }]
+        }] });
+
+class AdvancedSearchComponent {
+    cn = cn;
+    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
+    selectionStore = inject(SelectionStore);
+    queryParamsStore = inject(QueryParamsStore);
+    queryText = linkedSignal({
+        source: () => {
+            const { queryText } = getState(this.selectionStore);
+            return queryText;
+        },
+        computation: queryText => {
+            const text = queryText || '';
+            return text ? text.trim() : '';
+        }
+    });
+    queryName = computed(() => this.queryParamsStore.getQuery().name, ...(ngDevMode ? [{ debugName: "queryName" }] : []));
+    executeSearch() {
+        this.selectionStore.update({ queryText: this.queryText() });
+    }
+    clearInput() {
+        this.queryText.set('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: AdvancedSearchComponent, isStandalone: true, selector: "advanced-search", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideTranslocoScope('drawers')], ngImport: i0, template: "@if (article()) {\n  <div\n    [class]=\"\n      cn(\n        'scroll-stable flex h-screen flex-col overflow-y-auto pb-6 pl-6 pr-3',\n        '[&_details]:border-muted-foreground/18 [&_details]:border-b',\n        '[&_details>summary]:bg-menu [&_details_details]:last:border-b-0',\n        '[&_details>summary>i>svg]:transition-transform [&_details>summary>i>svg]:duration-300',\n        '[&>details>summary>i>svg]:group-open/parent:rotate-180'\n      )\n    \">\n    <section class=\"mb-4 mt-6 flex w-full flex-col gap-6\">\n      <header\n        id=\"panel-control\"\n        class=\"focus-within:outline-primary [&:not(:focus-within)]:hover:outline-muted-foreground group flex rounded focus-within:outline hover:outline\">\n        <div class=\"bg-muted flex grow items-center gap-2 rounded-e-none rounded-s px-3\">\n          <input\n            id=\"advanced-search-input\"\n            type=\"search\"\n            class=\"grow focus:outline-none\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            [attr.placeholder]=\"'drawers.inputPlaceholder' | transloco\"\n            [attr.aria-label]=\"'drawers.inputPlaceholder' | transloco\"\n            [ngModel]=\"queryText()\"\n            (ngModelChange)=\"queryText.set($event)\"\n            (keydown.enter)=\"executeSearch()\" />\n\n          @if (queryText() !== '') {\n            <button\n              variant=\"icon\"\n              size=\"xs\"\n              [attr.title]=\"'clear' | transloco\"\n              [attr.aria-label]=\"'clear' | transloco\"\n              (click)=\"clearInput()\"\n              (keydown.enter)=\"clearInput()\">\n              <i class=\"fa-fw far fa-xmark\"></i>\n            </button>\n          }\n        </div>\n\n        <button\n          size=\"default\"\n          class=\"size-8 rounded-e rounded-s-none\"\n          [disabled]=\"queryText() === '' || null\"\n          [attr.title]=\"'search' | transloco\"\n          [attr.aria-label]=\"'search' | transloco\"\n          (click)=\"executeSearch()\">\n          <i class=\"fa-fw far fa-magnifying-glass\"></i>\n        </button>\n      </header>\n    </section>\n\n    <!-- the same name is used everywhere to simulate an accordion -->\n    <!-- extracts -->\n    <ExtractsPanel [article]=\"article()\" />\n\n    <!-- labels -->\n    <LabelsPanel [article]=\"article()\" />\n\n    <!-- entities -->\n    <EntitiesPanel [article]=\"article()\" />\n\n    <!-- similar documents -->\n    <SimilarDocumentsPanel [article]=\"article()\" />\n  </div>\n}\n", styles: [":host{--panel-max-height: none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: SimilarDocumentsPanel, selector: "similar-documents-panel, SimilarDocumentsPanel, similardocumentspanel", inputs: ["article"] }, { kind: "component", type: EntitiesPanel, selector: "entities-panel,EntitiesPanel,entitiesPanel", inputs: ["article"] }, { kind: "component", type: LabelsPanel, selector: "labels-panel, LabelsPanel, labelspanel", inputs: ["article"] }, { kind: "component", type: ExtractsPanel, selector: "extracts-panel, ExtractsPanel, extractspanel", inputs: ["article"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'advanced-search', standalone: true, providers: [provideTranslocoScope('drawers')], imports: [FormsModule, ButtonComponent, TranslocoPipe, SimilarDocumentsPanel, EntitiesPanel, LabelsPanel, ExtractsPanel], template: "@if (article()) {\n  <div\n    [class]=\"\n      cn(\n        'scroll-stable flex h-screen flex-col overflow-y-auto pb-6 pl-6 pr-3',\n        '[&_details]:border-muted-foreground/18 [&_details]:border-b',\n        '[&_details>summary]:bg-menu [&_details_details]:last:border-b-0',\n        '[&_details>summary>i>svg]:transition-transform [&_details>summary>i>svg]:duration-300',\n        '[&>details>summary>i>svg]:group-open/parent:rotate-180'\n      )\n    \">\n    <section class=\"mb-4 mt-6 flex w-full flex-col gap-6\">\n      <header\n        id=\"panel-control\"\n        class=\"focus-within:outline-primary [&:not(:focus-within)]:hover:outline-muted-foreground group flex rounded focus-within:outline hover:outline\">\n        <div class=\"bg-muted flex grow items-center gap-2 rounded-e-none rounded-s px-3\">\n          <input\n            id=\"advanced-search-input\"\n            type=\"search\"\n            class=\"grow focus:outline-none\"\n            autocomplete=\"off\"\n            spellcheck=\"false\"\n            [attr.placeholder]=\"'drawers.inputPlaceholder' | transloco\"\n            [attr.aria-label]=\"'drawers.inputPlaceholder' | transloco\"\n            [ngModel]=\"queryText()\"\n            (ngModelChange)=\"queryText.set($event)\"\n            (keydown.enter)=\"executeSearch()\" />\n\n          @if (queryText() !== '') {\n            <button\n              variant=\"icon\"\n              size=\"xs\"\n              [attr.title]=\"'clear' | transloco\"\n              [attr.aria-label]=\"'clear' | transloco\"\n              (click)=\"clearInput()\"\n              (keydown.enter)=\"clearInput()\">\n              <i class=\"fa-fw far fa-xmark\"></i>\n            </button>\n          }\n        </div>\n\n        <button\n          size=\"default\"\n          class=\"size-8 rounded-e rounded-s-none\"\n          [disabled]=\"queryText() === '' || null\"\n          [attr.title]=\"'search' | transloco\"\n          [attr.aria-label]=\"'search' | transloco\"\n          (click)=\"executeSearch()\">\n          <i class=\"fa-fw far fa-magnifying-glass\"></i>\n        </button>\n      </header>\n    </section>\n\n    <!-- the same name is used everywhere to simulate an accordion -->\n    <!-- extracts -->\n    <ExtractsPanel [article]=\"article()\" />\n\n    <!-- labels -->\n    <LabelsPanel [article]=\"article()\" />\n\n    <!-- entities -->\n    <EntitiesPanel [article]=\"article()\" />\n\n    <!-- similar documents -->\n    <SimilarDocumentsPanel [article]=\"article()\" />\n  </div>\n}\n", styles: [":host{--panel-max-height: none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"] }]
+        }] });
+
 const COMPONENTS_FOR_DOCUMENT_TYPE = new InjectionToken('COMPONENTS_FOR_DOCUMENT_TYPE');
 const GLOBAL_QUERY_NAME = new InjectionToken('GLOBAL_QUERY_NAME', {
     factory() {
@@ -10799,69 +11324,44 @@ const GLOBAL_QUERY_NAME = new InjectionToken('GLOBAL_QUERY_NAME', {
 class DrawerPreviewComponent extends DrawerComponent {
     globalQueryName;
     destroyRef;
+    /* injections */
     injector = inject(Injector);
     appStore = inject(AppStore);
     selectionStore = inject(SelectionStore);
     queryParamsStore = inject(QueryParamsStore);
     previewService = inject(PreviewService);
     getComponentsForDocumentType = inject(COMPONENTS_FOR_DOCUMENT_TYPE);
+    /* inputs */
+    articleId = input.required(...(ngDevMode ? [{ debugName: "articleId" }] : []));
+    /* computed signals */
     queryText = computed(() => {
         const { queryText } = getState(this.selectionStore);
         const { text } = getState(this.queryParamsStore);
         return queryText ?? text;
     }, ...(ngDevMode ? [{ debugName: "queryText" }] : []));
-    articleId = input.required(...(ngDevMode ? [{ debugName: "articleId" }] : []));
-    previewData = signal(undefined, ...(ngDevMode ? [{ debugName: "previewData" }] : []));
-    article = computed(() => this.previewData()?.record, ...(ngDevMode ? [{ debugName: "article" }] : []));
-    inputs = computed(() => ({ previewData: this.previewData() }), ...(ngDevMode ? [{ debugName: "inputs" }] : []));
-    previewType = computed(() => {
-        return this.getComponentsForDocumentType(this.article()?.docformat || '').previewComponent;
-    }, ...(ngDevMode ? [{ debugName: "previewType" }] : []));
+    article = computed(() => {
+        const { article } = getState(this.selectionStore);
+        return article;
+    }, ...(ngDevMode ? [{ debugName: "article" }] : []));
+    previewType = computed(() => this.getComponentsForDocumentType(this.article()?.docformat || '').previewComponent, ...(ngDevMode ? [{ debugName: "previewType" }] : []));
     constructor(globalQueryName, destroyRef) {
         super();
         this.globalQueryName = globalQueryName;
         this.destroyRef = destroyRef;
         this.destroyRef.onDestroy(() => {
-            this.previewService.close(this.articleId(), { name: this.globalQueryName });
-        });
-        effect(() => {
-            const articleId = this.articleId();
-            const text = this.queryText();
-            untracked(async () => {
-                const state = getState(this.selectionStore);
-                try {
-                    const previewData = await firstValueFrom(this.previewService.preview(articleId, {
-                        name: this.globalQueryName,
-                        text
-                    }, state.previewHighlights?.highlights));
-                    this.previewData.set(previewData);
-                }
-                catch (err) {
-                    this.previewData.set(undefined);
-                    if (err.status === 401) {
-                        error('preview service 401: ', err);
-                        this.drawerStack.close();
-                        runInInjectionContext(this.injector, () => signIn().then(() => {
-                            const { useCredentials } = globalConfig;
-                            if (!useCredentials) {
-                                notify.success('You have been signed in.');
-                            }
-                        }));
-                    }
-                    else {
-                        error('Error fetching preview data:', err);
-                        throw err;
-                    }
-                }
-            });
+            if (this.articleId()) {
+                this.previewService.close(this.articleId(), { name: this.globalQueryName });
+            }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerPreviewComponent, deps: [{ token: GLOBAL_QUERY_NAME }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: DrawerPreviewComponent, isStandalone: true, selector: "app-drawer-preview", inputs: { articleId: { classPropertyName: "articleId", publicName: "articleId", isSignal: true, isRequired: true, transformFunction: null } }, providers: [DrawerService, PreviewService], usesInheritance: true, ngImport: i0, template: "<div (click)=\"drawer.toggleExtension()\" (keydown.escape)=\"drawer.toggleExtension()\" [attr.aria-hidden]=\"true\"></div>\n\n<div class=\"flex overflow-auto bg-white\">\n  <div\n    #drawerHandle\n    class=\"fixed h-full w-[5px] select-none hover:cursor-ew-resize hover:bg-orange-300\"\n    [ngClass]=\"{ hidden: (drawer.isExtended | async) === false }\"></div>\n\n  @if (previewType()) {\n    <ng-container *ngComponentOutlet=\"previewType()!; inputs: inputs()\" />\n  }\n</div>\n\n@if (article()) {\n  <div class=\"flex flex-col border-l border-gray-200 bg-white\">\n    <div class=\"relative flex grow flex-col\">\n      <advanced-search class=\"absolute h-full w-full overflow-y-auto\" [article]=\"article()!\" (close)=\"drawer.collapse()\" />\n    </div>\n  </div>\n}\n", styles: [":host{--drawer-width: 46;--drawer-subdrawer-width: 400px;display:grid;height:100%;top:0;right:-100%;justify-content:flex-end;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]{right:0;width:100vw;grid-template-columns:1fr calc(var(--drawer-width) * 1%) var(--drawer-subdrawer-width);box-shadow:unset}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AdvancedSearchComponent, selector: "advanced-search", inputs: ["article"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerPreviewComponent, deps: [{ token: GLOBAL_QUERY_NAME }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DrawerPreviewComponent, isStandalone: true, selector: "DrawerPreview, drawerpreview", inputs: { articleId: { classPropertyName: "articleId", publicName: "articleId", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "bg-transparent text-foreground" }, providers: [DrawerService, PreviewService], usesInheritance: true, ngImport: i0, template: "<!-- when the extended panel is open clicking in the backdrop panel close it -->\n<div (click)=\"drawer.toggleExtension()\" (keydown.escape)=\"drawer.toggleExtension()\" [attr.aria-hidden]=\"true\"></div>\n\n<div class=\"bg-menu flex overflow-auto\">\n  <!-- Drawer handle when extended -->\n  <div\n    #drawerHandle\n    class=\"fixed h-full w-[5px] select-none hover:cursor-ew-resize hover:bg-orange-300\"\n    [ngClass]=\"{ hidden: drawer.isExtended() === false }\"></div>\n\n  @if (previewType()) {\n    <ng-container *ngComponentOutlet=\"previewType()\" />\n  }\n</div>\n\n<!-- this is the extended panel -->\n@if (article() && drawer.isExtended()) {\n  <div class=\"bg-menu border-foreground/18 flex flex-col border-l\">\n    <div class=\"relative flex grow flex-col\">\n      <advanced-search class=\"absolute h-full w-full overflow-y-auto\" [article]=\"article()!\" (close)=\"drawer.collapse()\" />\n    </div>\n  </div>\n}\n", styles: [":host{--drawer-width: 46;--drawer-subdrawer-width: 400px;display:grid;height:100%;top:0;right:-100%;justify-content:flex-end;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]{right:0;width:100vw;grid-template-columns:1fr calc(var(--drawer-width) * 1%) var(--drawer-subdrawer-width);box-shadow:unset}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: AdvancedSearchComponent, selector: "advanced-search", inputs: ["article"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DrawerPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-drawer-preview', standalone: true, imports: [NgClass, NgComponentOutlet, AsyncPipe, AdvancedSearchComponent], providers: [DrawerService, PreviewService], template: "<div (click)=\"drawer.toggleExtension()\" (keydown.escape)=\"drawer.toggleExtension()\" [attr.aria-hidden]=\"true\"></div>\n\n<div class=\"flex overflow-auto bg-white\">\n  <div\n    #drawerHandle\n    class=\"fixed h-full w-[5px] select-none hover:cursor-ew-resize hover:bg-orange-300\"\n    [ngClass]=\"{ hidden: (drawer.isExtended | async) === false }\"></div>\n\n  @if (previewType()) {\n    <ng-container *ngComponentOutlet=\"previewType()!; inputs: inputs()\" />\n  }\n</div>\n\n@if (article()) {\n  <div class=\"flex flex-col border-l border-gray-200 bg-white\">\n    <div class=\"relative flex grow flex-col\">\n      <advanced-search class=\"absolute h-full w-full overflow-y-auto\" [article]=\"article()!\" (close)=\"drawer.collapse()\" />\n    </div>\n  </div>\n}\n", styles: [":host{--drawer-width: 46;--drawer-subdrawer-width: 400px;display:grid;height:100%;top:0;right:-100%;justify-content:flex-end;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]{right:0;width:100vw;grid-template-columns:1fr calc(var(--drawer-width) * 1%) var(--drawer-subdrawer-width);box-shadow:unset}\n"] }]
+            args: [{ selector: 'DrawerPreview, drawerpreview', standalone: true, imports: [NgClass, NgComponentOutlet, AdvancedSearchComponent], providers: [DrawerService, PreviewService], host: {
+                        class: 'bg-transparent text-foreground'
+                    }, template: "<!-- when the extended panel is open clicking in the backdrop panel close it -->\n<div (click)=\"drawer.toggleExtension()\" (keydown.escape)=\"drawer.toggleExtension()\" [attr.aria-hidden]=\"true\"></div>\n\n<div class=\"bg-menu flex overflow-auto\">\n  <!-- Drawer handle when extended -->\n  <div\n    #drawerHandle\n    class=\"fixed h-full w-[5px] select-none hover:cursor-ew-resize hover:bg-orange-300\"\n    [ngClass]=\"{ hidden: drawer.isExtended() === false }\"></div>\n\n  @if (previewType()) {\n    <ng-container *ngComponentOutlet=\"previewType()\" />\n  }\n</div>\n\n<!-- this is the extended panel -->\n@if (article() && drawer.isExtended()) {\n  <div class=\"bg-menu border-foreground/18 flex flex-col border-l\">\n    <div class=\"relative flex grow flex-col\">\n      <advanced-search class=\"absolute h-full w-full overflow-y-auto\" [article]=\"article()!\" (close)=\"drawer.collapse()\" />\n    </div>\n  </div>\n}\n", styles: [":host{--drawer-width: 46;--drawer-subdrawer-width: 400px;display:grid;height:100%;top:0;right:-100%;justify-content:flex-end;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]{right:0;width:100vw;grid-template-columns:1fr calc(var(--drawer-width) * 1%) var(--drawer-subdrawer-width);box-shadow:unset}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [GLOBAL_QUERY_NAME]
@@ -10875,5 +11375,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, AdvancedSearchComponent, AggregationComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertsComponent, AppService, AppStore, ApplicationService, ApplicationStore, AuditFeedbackType, AuditService, AuthGuard, AutocompleteService, BOOKMARKS_CONFIG, BOOKMARKS_OPTIONS, BackdropComponent, BackdropService, BookmarkButtonComponent, BookmarksComponent, COLLECTIONS_CONFIG, COLLECTIONS_OPTIONS, COMPONENTS_FOR_DOCUMENT_TYPE, 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, 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, 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, SearchInputComponent, SearchService, SelectArticleOnClickDirective, SelectionHistoryService, SelectionService, SelectionStore, ShowBookmarkDirective, SignInComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserSettingsStore, applyThemeToNativeElement, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, bootstrapApp, buildQuery, debouncedSignal, errorInterceptorFn, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, processCssVars, queryNameResolver, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, toastInterceptorFn, withAggregationsFeatures, withAlertsFeatures, withAppCustomizationFeatures, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withExtractsFeatures, withMultiSelectionFeatures, withPrincipalFeatures, withQueryParamsFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
+export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, AdvancedSearchComponent, AggregationComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertsComponent, AppService, AppStore, ApplicationService, ApplicationStore, AuditFeedbackType, AuditService, AuthGuard, AutocompleteService, BOOKMARKS_CONFIG, BOOKMARKS_OPTIONS, BackdropComponent, BackdropService, BookmarkButtonComponent, BookmarksComponent, COLLECTIONS_CONFIG, COLLECTIONS_OPTIONS, COMPONENTS_FOR_DOCUMENT_TYPE, 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, 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, SearchInputComponent, SearchService, SelectArticleOnClickDirective, SelectionHistoryService, SelectionService, SelectionStore, ShowBookmarkDirective, SignInComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserSettingsStore, applyThemeToNativeElement, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, bootstrapApp, buildQuery, debouncedSignal, errorInterceptorFn, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, processCssVars, queryNameResolver, searchVariants, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, toastInterceptorFn, withAggregationsFeatures, withAlertsFeatures, withAppCustomizationFeatures, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withExtractsFeatures, withMultiSelectionFeatures, withPrincipalFeatures, withQueryParamsFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
 //# sourceMappingURL=sinequa-atomic-angular.mjs.map