@sinequa/atomic-angular 0.1.35 → 0.1.37

package/fesm2022/sinequa-atomic-angular.mjs

@@ -21,10 +21,10 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { Overlay } from '@angular/cdk/overlay';
 
 class DropdownListComponent {
-    items = input.required();
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
     onClick = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     @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 +45,7 @@ class DropdownListComponent {
     }
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DropdownListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DropdownListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dropdown-list, DropdownList',
@@ -74,17 +74,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class DropdownInputComponent {
-    label = input();
-    placeholder = input('Start typing to search...');
-    noResultLabel = input('No results to be displayed...');
-    suggestions = input([]);
-    selected = input.required();
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    placeholder = input('Start typing to search...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    noResultLabel = input('No results to be displayed...', ...(ngDevMode ? [{ debugName: "noResultLabel" }] : []));
+    suggestions = input([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+    selected = input.required(...(ngDevMode ? [{ debugName: "selected" }] : []));
     onFocus = output(); // emits the input value
     onKeyUp = output(); // emits the input value
     removeItem = output();
     addItem = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DropdownInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     @if (label()) {
       <p class="font-semibold">{{ label() }}</p>
     }
@@ -118,7 +118,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.0.0", ngImport: i0, type: DropdownInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DropdownInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dropdown-input, DropdownInput',
@@ -168,10 +168,10 @@ class BackdropService {
     hide() {
         this.isVisible.next(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BackdropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BackdropService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BackdropService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BackdropService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -188,10 +188,10 @@ class BackdropComponent {
     ngOnDestroy() {
         this.sub.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BackdropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", 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.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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BackdropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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'
@@ -295,10 +295,10 @@ class AppService {
             return EMPTY;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AppService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AppService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AppService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AppService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -796,10 +796,10 @@ class PrincipalService {
             return EMPTY;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PrincipalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PrincipalService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PrincipalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PrincipalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -870,7 +870,7 @@ function withPrincipalFeatures() {
  * ```
  */
 function debouncedSignal(input, timeOutMs = 0) {
-    const debounceSignal = signal(input());
+    const debounceSignal = signal(input(), ...(ngDevMode ? [{ debugName: "debounceSignal" }] : []));
     let timeout;
     effect(onCleanUp => {
         const value = input();
@@ -1228,10 +1228,10 @@ class QueryService {
         };
         this.queryParamsStore.patch({ page }, audit);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QueryService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QueryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: QueryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1478,10 +1478,10 @@ class AggregationsService {
         }
         return node;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AggregationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AggregationsService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AggregationsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AggregationsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2080,8 +2080,8 @@ class ApplicationService {
     router = inject(Router);
     title = inject(Title);
     components = inject(ROUTE_COMPONENTS);
-    defaultComponent = computed(() => this.components.find(c => c.path === 'all')?.component);
-    defaultLayoutComponent = computed(() => this.components.find(c => c.isRoot)?.component);
+    defaultComponent = computed(() => this.components.find(c => c.path === 'all')?.component, ...(ngDevMode ? [{ debugName: "defaultComponent" }] : []));
+    defaultLayoutComponent = computed(() => this.components.find(c => c.isRoot)?.component, ...(ngDevMode ? [{ debugName: "defaultLayoutComponent" }] : []));
     /**
      * Initializes the application and creates routes.
      *
@@ -2173,7 +2173,19 @@ class ApplicationService {
         const firstQuery = queriesMap[0];
         // We need to create a route path object for each tab in the first query
         // if the query has no tabs, we create a route with the query name as the tab name
-        const firstQueryConfig = { name: firstQuery.name, tabs: firstQuery.tabSearch.tabs || [{ name: firstQuery.name }] };
+        const firstQueryConfig = {
+            name: firstQuery.name,
+            tabs: (firstQuery.tabSearch.tabs && firstQuery.tabSearch.tabs.length
+                ? firstQuery.tabSearch.tabs
+                : [{
+                        name: firstQuery.name,
+                        display: firstQuery.name,
+                        value: firstQuery.name,
+                        isDefault: false,
+                        excludedIndices: [],
+                        icon: ''
+                    }])
+        };
         // We need to remove the current search route from the router config
         // the route exists in the router config because it was created in the app-routing.module.ts and we need it
         // to be able to navigate to the search page. We will recreate it with the new tabs
@@ -2311,10 +2323,10 @@ class ApplicationService {
             document.documentElement.style.setProperty('--logo-large', `url('${light.large}')`);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ApplicationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ApplicationService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ApplicationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ApplicationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2323,7 +2335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
 class AuditService {
     appStore = inject(AppStore);
-    app = computed(() => getState(this.appStore));
+    app = computed(() => getState(this.appStore), ...(ngDevMode ? [{ debugName: "app" }] : []));
     http = inject(HttpClient);
     router = inject(Router);
     API_URL = `${globalConfig.backendUrl}/${globalConfig.apiPath}`;
@@ -2408,7 +2420,7 @@ class AuditService {
                 // Second event triggered when we come back
                 document.addEventListener('visibilitychange', () => {
                     if (document.visibilityState === 'visible') {
-                        this.notify({ type: "Navigation_Return" /* AuditEventType.Navigation_Return */ });
+                        this.notify({ type: 'Navigation_Return' });
                     }
                 }, { once: true });
             }
@@ -2426,10 +2438,10 @@ class AuditService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AuditService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AuditService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AuditService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AuditService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2437,7 +2449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class AutocompleteService {
-    opened = signal(false);
+    opened = signal(false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
     injector = inject(Injector);
     userSettingsStore = inject(UserSettingsStore);
     appStore = inject(AppStore);
@@ -2500,10 +2512,10 @@ class AutocompleteService {
         }
         return items;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AutocompleteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AutocompleteService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AutocompleteService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AutocompleteService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2541,10 +2553,10 @@ class JsonMethodPluginService {
             ...options
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: JsonMethodPluginService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: JsonMethodPluginService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: JsonMethodPluginService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: JsonMethodPluginService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2576,10 +2588,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.0.0", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NavigationService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2759,7 +2771,7 @@ class PreviewService {
     close(id, query) {
         const detail = this.getAuditPreviewDetail(id, query);
         const auditEvent = {
-            type: "Preview_Close" /* AuditEventType.Preview_Close */,
+            type: "Preview_Close",
             detail
         };
         Audit.notify(auditEvent);
@@ -2953,10 +2965,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.0.0", ngImport: i0, type: PreviewService, deps: [{ token: i0.DestroyRef }, { token: HIGHLIGHTS }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PreviewService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PreviewService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PreviewService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3025,10 +3037,10 @@ class SavedSearchesService {
     deleteSavedSearch(index) {
         this.userSettingsStore.deleteSavedSearch(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SavedSearchesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SavedSearchesService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SavedSearchesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SavedSearchesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3121,10 +3133,10 @@ class SearchService {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3273,10 +3285,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.0.0", ngImport: i0, type: SelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SelectionService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SelectionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3360,10 +3372,10 @@ class SelectionHistoryService {
         this.selectionHistoryEvent.next('back');
         return last;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SelectionHistoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SelectionHistoryService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SelectionHistoryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SelectionHistoryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3398,10 +3410,10 @@ class TextChunkService {
             return [];
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TextChunkService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TextChunkService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: TextChunkService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TextChunkService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3860,8 +3872,8 @@ function applyThemeToNativeElement(element, cssVars) {
 }
 
 class SourceComponent {
-    collection = input();
-    connector = input('');
+    collection = input(...(ngDevMode ? [undefined, { debugName: "collection" }] : []));
+    connector = input('', ...(ngDevMode ? [{ debugName: "connector" }] : []));
     appStore = inject(AppStore);
     iconDetails = computed(() => {
         const [collection] = this.collection() || [];
@@ -3888,11 +3900,11 @@ class SourceComponent {
             return { iconClass, iconPath };
         }
         return { iconClass: defaultIconClass };
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SourceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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" }] });
+    }, ...(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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SourceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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" }]
         }] });
@@ -3903,20 +3915,20 @@ class DocumentLocatorComponent {
      * This property is used to ensure that an `Article` object is provided
      * as an input to the component.
      */
-    article = input.required();
+    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
     /**
      * The name of the aggregation to use for the document locator.
      */
-    aggregation = input.required();
-    shadow = viewChild('shadowRender', { read: ElementRef });
-    client = viewChild('documentLocator', { read: ElementRef });
+    aggregation = input.required(...(ngDevMode ? [{ debugName: "aggregation" }] : []));
+    shadow = viewChild('shadowRender', ...(ngDevMode ? [{ debugName: "shadow", read: ElementRef }] : [{ read: ElementRef }]));
+    client = viewChild('documentLocator', ...(ngDevMode ? [{ debugName: "client", read: ElementRef }] : [{ read: ElementRef }]));
     el = inject(ElementRef);
     router = inject(Router);
     queryParamStore = inject(QueryParamsStore);
     aggregationStore = inject(AggregationsStore);
-    locationSegments = signal([]);
-    visibleSegments = signal([]);
-    invisibleSegments = signal([]);
+    locationSegments = signal([], ...(ngDevMode ? [{ debugName: "locationSegments" }] : []));
+    visibleSegments = signal([], ...(ngDevMode ? [{ debugName: "visibleSegments" }] : []));
+    invisibleSegments = signal([], ...(ngDevMode ? [{ debugName: "invisibleSegments" }] : []));
     // margin for dropdown segment with separator
     margin = 70;
     previousCount;
@@ -3977,8 +3989,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.0.0", ngImport: i0, type: DocumentLocatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     <!-- 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) {
@@ -4023,7 +4035,7 @@ class DocumentLocatorComponent {
     </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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DocumentLocatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DocumentLocatorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'document-locator, DocumentLocator',
@@ -4084,8 +4096,8 @@ class ErrorComponent {
     reload() {
         this.router.navigate(['/']).then(() => window.location.reload());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ErrorComponent, isStandalone: true, selector: "error-component, ErrorComponent", ngImport: i0, template: `
+    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: `
     <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 +4140,7 @@ class ErrorComponent {
     </div>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ErrorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'error-component, ErrorComponent',
@@ -4180,7 +4192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class LoadingComponent {
-    state = computed(() => getState(this.application));
+    state = computed(() => getState(this.application), ...(ngDevMode ? [{ debugName: "state" }] : []));
     application = inject(ApplicationStore);
     queryParamsStore = inject(QueryParamsStore);
     route = inject(ActivatedRoute);
@@ -4225,8 +4237,8 @@ class LoadingComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: LoadingComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: LoadingComponent, isStandalone: true, selector: "app-wait", ngImport: i0, template: `
+    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: `
     <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 +4246,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.0.0", ngImport: i0, type: LoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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">
@@ -4247,17 +4259,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
 class MetadataComponent {
     click = output();
-    class = input();
-    variant = input('default');
-    metadata = input.required();
-    article = input.required();
-    limit = input(undefined, { transform: (value) => (value ? Math.max(0, Number(value)) : undefined) });
-    items = computed(() => getMetadata(this.article(), this.metadata()));
+    class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    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) }]));
+    items = computed(() => getMetadata(this.article(), this.metadata()), ...(ngDevMode ? [{ debugName: "items" }] : []));
     handleClick(event, item) {
         this.click.emit({ filter: item, event });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MetadataComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     @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>
@@ -4265,7 +4277,7 @@ class MetadataComponent {
     }
   `, isInline: true, styles: [":host{display:contents}:host,:host:hover{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MetadataComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MetadataComponent, decorators: [{
             type: Component,
             args: [{ selector: 'Metadata, metadata', exportAs: 'metadata', standalone: true, imports: [BadgeComponent], template: `
     @for (item of items().slice(0, limit()); track $index) {
@@ -4279,7 +4291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class MissingTermsComponent {
-    article = input.required();
+    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
     queryParamsStore = inject(QueryParamsStore);
     router = inject(Router);
     missingTerms = computed(() => {
@@ -4293,27 +4305,27 @@ class MissingTermsComponent {
                 queryParams: { q: `${text} +[${tp.term}]` }
             };
         });
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MissingTermsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    }, ...(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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MissingTermsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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"] }]
         }] });
 
 class CollectionsDialog {
     closed = output();
-    createInputElement = viewChild('createInput');
-    dialogElement = viewChild(DialogComponent);
+    createInputElement = viewChild('createInput', ...(ngDevMode ? [{ debugName: "createInputElement" }] : []));
+    dialogElement = viewChild(DialogComponent, ...(ngDevMode ? [{ debugName: "dialogElement" }] : []));
     queryParamStore = inject(QueryParamsStore);
     userSettingsStore = inject(UserSettingsStore);
-    collection = signal(undefined);
-    article = signal([]);
-    newCollectionName = signal('');
-    creating = signal(false);
-    removedFromCollection = signal(false);
-    collections = computed(() => this.userSettingsStore.baskets());
+    collection = signal(undefined, ...(ngDevMode ? [{ debugName: "collection" }] : []));
+    article = signal([], ...(ngDevMode ? [{ debugName: "article" }] : []));
+    newCollectionName = signal('', ...(ngDevMode ? [{ debugName: "newCollectionName" }] : []));
+    creating = signal(false, ...(ngDevMode ? [{ debugName: "creating" }] : []));
+    removedFromCollection = signal(false, ...(ngDevMode ? [{ debugName: "removedFromCollection" }] : []));
+    collections = computed(() => this.userSettingsStore.baskets(), ...(ngDevMode ? [{ debugName: "collections" }] : []));
     // Compute map of collection names to their article inclusion status
     collectionsMap = linkedSignal(() => this.collections().reduce((acc, collection) => {
         acc[collection.name] = this.containsArticle(collection);
@@ -4392,8 +4404,8 @@ class CollectionsDialog {
         this.newCollectionName.set('');
         this.creating.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CollectionsDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     <dialog #dialog (closed)="closeBtn.click()">
       <DialogHeader>
         <DialogTitle>{{ 'collections.addToCollection' | transloco }}</DialogTitle>
@@ -4456,9 +4468,9 @@ class CollectionsDialog {
         </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: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }] });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CollectionsDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: CollectionsDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'add-to-collection-dialog',
@@ -4625,7 +4637,7 @@ class ExportService {
             exportedColumns: exportedColumns,
             selection: (selection ?? []).length > 0 ? selection : undefined,
             $auditRecord: {
-                type: "Search_ExportCSV" /* AuditEventType.Search_ExportCSV */,
+                type: "Search_ExportCSV",
                 detail: {
                     resultid: results ? results.id : undefined
                 }
@@ -4636,10 +4648,10 @@ class ExportService {
             responseType: 'blob'
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ExportService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ExportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ExportService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -4652,14 +4664,14 @@ class ExportDialog {
     appStore = inject(AppStore);
     exportService = inject(ExportService);
     queryParamsStore = inject(QueryParamsStore);
-    dialog = viewChild(DialogComponent);
-    selection = signal([]);
+    dialog = viewChild(DialogComponent, ...(ngDevMode ? [{ debugName: "dialog" }] : []));
+    selection = signal([], ...(ngDevMode ? [{ debugName: "selection" }] : []));
     fromSelection = linkedSignal(() => this.selection()?.length > 0);
-    exportableColumns = signal([]);
+    exportableColumns = signal([], ...(ngDevMode ? [{ debugName: "exportableColumns" }] : []));
     supportedFormats = ['Csv', 'Xlsx', 'Json'];
-    format = model('Csv');
-    maxCount = model(undefined);
-    columnsToExport = model([]);
+    format = model('Csv', ...(ngDevMode ? [{ debugName: "format" }] : []));
+    maxCount = model(undefined, ...(ngDevMode ? [{ debugName: "maxCount" }] : []));
+    columnsToExport = model([], ...(ngDevMode ? [{ debugName: "columnsToExport" }] : []));
     destroyRef = inject(DestroyRef);
     open(selection) {
         const app = getState(this.appStore);
@@ -4707,8 +4719,8 @@ class ExportDialog {
             this.maxCount.set(1);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ExportDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     <dialog #dialog>
       <DialogHeader>
         <DialogTitle>{{ 'export.title' | transloco }}</DialogTitle>
@@ -4777,9 +4789,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: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }] });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ExportDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ExportDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'export-dialog',
@@ -4887,11 +4899,11 @@ class MultiSelectionToolbarComponent {
     selection = inject(SelectionStore);
     dialog = inject(DialogService);
     appFeatures = inject(APP_FEATURES);
-    className = input('');
-    variant = input('dark');
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
+    variant = input('dark', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     count = this.selection.multiSelectCount;
-    variants = computed(() => cn(multiSelectionToolbarVariants({ variant: this.variant(), class: this.className() })));
-    ids = computed(() => getState(this.selection).multiSelection.map(x => x.id));
+    variants = computed(() => cn(multiSelectionToolbarVariants({ variant: this.variant(), class: this.className() })), ...(ngDevMode ? [{ debugName: "variants" }] : []));
+    ids = computed(() => getState(this.selection).multiSelection.map(x => x.id), ...(ngDevMode ? [{ debugName: "ids" }] : []));
     instanceId = computed(() => {
         const { assistant: { usePrefixName = true } } = this.appFeatures;
         if (usePrefixName) {
@@ -4899,14 +4911,14 @@ class MultiSelectionToolbarComponent {
             return `${name}-search-results-assistant`;
         }
         return `search-results-assistant`;
-    });
-    enabledUserInput = computed(() => this.appStore.assistants()[this.instanceId()]?.['modeSettings']?.['enabledUserInput'] === true);
+    }, ...(ngDevMode ? [{ debugName: "instanceId" }] : []));
+    enabledUserInput = computed(() => this.appStore.assistants()[this.instanceId()]?.['modeSettings']?.['enabledUserInput'] === true, ...(ngDevMode ? [{ debugName: "enabledUserInput" }] : []));
     clearSelection = () => this.selection.clearMultiSelection();
     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.0.0", ngImport: i0, type: MultiSelectionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     <menu id="multi-select-toolbar" [class]="cn(variants(), className())">
       <li class="!ps-0">
         {{ count() }} items selected
@@ -4940,7 +4952,7 @@ class MultiSelectionToolbarComponent {
     </menu>
   `, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MultiSelectionToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: MultiSelectionToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'MultiSelectionToolbar, multi-selection-toolbar',
@@ -5003,7 +5015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
  */
 class InfinityScrollDirective {
     el;
-    options = input({ root: null });
+    options = input({ root: null }, ...(ngDevMode ? [{ debugName: "options" }] : []));
     onScroll = output();
     observer = new IntersectionObserver(([entry]) => {
         if (entry.isIntersecting) {
@@ -5019,10 +5031,10 @@ class InfinityScrollDirective {
     ngOnDestroy() {
         this.observer.disconnect();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InfinityScrollDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", 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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: InfinityScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: InfinityScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -5043,19 +5055,19 @@ const defaultNavigatorOptions = {
     }
 };
 class KeyboardNavigatorDirective {
-    keyboardNavigator = input(defaultNavigatorOptions, { transform: this.normalizeOptions });
-    listboxId = input('', { alias: 'aria-controls' });
+    keyboardNavigator = input(defaultNavigatorOptions, ...(ngDevMode ? [{ debugName: "keyboardNavigator", transform: this.normalizeOptions }] : [{ transform: this.normalizeOptions }]));
+    listboxId = input('', ...(ngDevMode ? [{ debugName: "listboxId", alias: 'aria-controls' }] : [{ alias: 'aria-controls' }]));
     onFocus = output();
     onBlur = output();
     onSelected = output();
-    ariaExpanded = signal(false);
-    activeDescendant = signal(undefined);
+    ariaExpanded = signal(false, ...(ngDevMode ? [{ debugName: "ariaExpanded" }] : []));
+    activeDescendant = signal(undefined, ...(ngDevMode ? [{ debugName: "activeDescendant" }] : []));
     renderer = inject(Renderer2);
-    listboxElement = signal(null);
-    items = signal(null);
-    hasItems = computed(() => this.items() && this.items().length > 0);
-    currentIndex = signal(-1);
-    previousIndex = signal(-1);
+    listboxElement = signal(null, ...(ngDevMode ? [{ debugName: "listboxElement" }] : []));
+    items = signal(null, ...(ngDevMode ? [{ debugName: "items" }] : []));
+    hasItems = computed(() => this.items() && this.items().length > 0, ...(ngDevMode ? [{ debugName: "hasItems" }] : []));
+    currentIndex = signal(-1, ...(ngDevMode ? [{ debugName: "currentIndex" }] : []));
+    previousIndex = signal(-1, ...(ngDevMode ? [{ debugName: "previousIndex" }] : []));
     unlisteners = [];
     mutationObserver = new MutationObserver(() => this.setItems());
     constructor() {
@@ -5326,10 +5338,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.0.0", ngImport: i0, type: KeyboardNavigatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", 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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: KeyboardNavigatorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: KeyboardNavigatorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[role="combobox"]',
@@ -5358,16 +5370,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
  */
 class OpenArticleOnCtrlEnterDirective {
     previewService = inject(PreviewService);
-    article = input.required();
+    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
     onCtrlEnter() {
         if (!this.article())
             return;
         this.previewService.openExternal(this.article());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: OpenArticleOnCtrlEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", 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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: OpenArticleOnCtrlEnterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OpenArticleOnCtrlEnterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appOpenArticleOnCtrlEnter],[openArticleOnCtrlEnter]',
@@ -5383,10 +5395,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
  * overflow manager.
  */
 class OverflowItemDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: OverflowItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: OverflowItemDirective, isStandalone: true, selector: "[overflowItem]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: OverflowItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OverflowItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[overflowItem]',
@@ -5398,10 +5410,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
  * for the overflow manager.
  */
 class OverflowStopDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: OverflowStopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: OverflowStopDirective, isStandalone: true, selector: "[overflowStop]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: OverflowStopDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OverflowStopDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[overflowStop]',
@@ -5446,11 +5458,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
  * ```
  */
 class OverflowManagerDirective {
-    items = contentChildren(OverflowItemDirective, { descendants: true, read: ElementRef });
-    stop = contentChild(OverflowStopDirective, { descendants: true, read: ElementRef });
-    target = input();
-    margin = input(4);
-    direction = input('horizontal');
+    items = contentChildren(OverflowItemDirective, ...(ngDevMode ? [{ debugName: "items", descendants: true, read: ElementRef }] : [{ descendants: true, read: ElementRef }]));
+    stop = contentChild(OverflowStopDirective, ...(ngDevMode ? [{ debugName: "stop", descendants: true, read: ElementRef }] : [{ descendants: true, read: ElementRef }]));
+    target = input(...(ngDevMode ? [undefined, { debugName: "target" }] : []));
+    margin = input(4, ...(ngDevMode ? [{ debugName: "margin" }] : []));
+    direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : []));
     count = output();
     el = inject(ElementRef).nativeElement;
     resizeObserver = new ResizeObserver(() => this.countItems());
@@ -5509,10 +5521,10 @@ class OverflowManagerDirective {
             item.nativeElement.style.visibility = state;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: OverflowManagerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.0.0", 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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: OverflowManagerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OverflowManagerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[overflowManager]',
@@ -5654,10 +5666,10 @@ class DrawerStackService {
         this.openAssistant();
         this.askAI$.next(text);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerStackService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerStackService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerStackService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -5669,8 +5681,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
  */
 class SelectArticleOnClickDirective {
     drawerStack = inject(DrawerStackService);
-    article = input.required();
-    strategy = input('stack');
+    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
+    strategy = input('stack', ...(ngDevMode ? [{ debugName: "strategy" }] : []));
     onEnter(e) {
         if (e && isNotInputEvent(e)) {
             this.onClick();
@@ -5689,10 +5701,10 @@ class SelectArticleOnClickDirective {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SelectArticleOnClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", 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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SelectArticleOnClickDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SelectArticleOnClickDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appSelectArticleOnClick],[selectArticleOnClick]',
@@ -5725,14 +5737,14 @@ class ShowBookmarkDirective {
     mouseLeave() {
         this.bookmarkHovered.set(false);
     }
-    bookmarkHovered = signal(false);
+    bookmarkHovered = signal(false, ...(ngDevMode ? [{ debugName: "bookmarkHovered" }] : []));
     userSettingsStore = inject(UserSettingsStore);
     isBookmarked = computed(() => {
         if (!this.article())
             return false;
         return this.userSettingsStore.isBookmarked(this.article());
-    });
-    article = input.required();
+    }, ...(ngDevMode ? [{ debugName: "isBookmarked" }] : []));
+    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
     showBookmark = output();
     constructor() {
         effect(() => {
@@ -5741,10 +5753,10 @@ class ShowBookmarkDirective {
             this.showBookmark.emit(bookmarkHovered || isBookmarked);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShowBookmarkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", 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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ShowBookmarkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ShowBookmarkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[showBookmark]',
@@ -5762,7 +5774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
  * This directive is used to apply a theme to a native element based on the theme scope.
  */
 class ThemeProviderDirective {
-    themeProvider = input.required();
+    themeProvider = input.required(...(ngDevMode ? [{ debugName: "themeProvider" }] : []));
     host = inject(ElementRef);
     themeStore = inject(ThemeStore);
     constructor() {
@@ -5775,10 +5787,10 @@ class ThemeProviderDirective {
                 applyThemeToNativeElement(this.host.nativeElement, vars);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ThemeProviderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", 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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ThemeProviderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ThemeProviderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[themeProvider]',
@@ -5802,10 +5814,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
  */
 class ChildMarkerDirective {
     template = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ChildMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: ChildMarkerDirective, isStandalone: true, selector: "[childMarker]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ChildMarkerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ChildMarkerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[childMarker]'
@@ -5832,10 +5844,10 @@ class HighlightWordPipe {
         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.0.0", ngImport: i0, type: HighlightWordPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: HighlightWordPipe, isStandalone: true, name: "highlightWord" });
+    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.0.0", ngImport: i0, type: HighlightWordPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: HighlightWordPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'highlightWord',
@@ -5870,10 +5882,10 @@ class SourceIconPipe {
         }
         return 'far fa-file';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SourceIconPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: SourceIconPipe, isStandalone: true, name: "sourceIcon" });
+    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.0.0", ngImport: i0, type: SourceIconPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SourceIconPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'sourceIcon',
@@ -5911,10 +5923,10 @@ class OperatorPipe {
                 return '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: OperatorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: OperatorPipe, isStandalone: true, name: "operator" });
+    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" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: OperatorPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OperatorPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'operator',
@@ -5965,10 +5977,10 @@ class SyslangPipe {
         }
         return this.lastValue;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SyslangPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: SyslangPipe, isStandalone: true, name: "syslang", pure: false });
+    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.0.0", ngImport: i0, type: SyslangPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SyslangPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'syslang',
@@ -6000,10 +6012,10 @@ class TranslocoDateImpurePipe extends DatePipe {
         });
         return this.lastTransformedValue;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", 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.0.0", ngImport: i0, type: TranslocoDateImpurePipe, isStandalone: true, name: "translocoDate", pure: false });
+    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.0.0", ngImport: i0, type: TranslocoDateImpurePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TranslocoDateImpurePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'translocoDate',
@@ -6029,13 +6041,13 @@ class NavbarTabsComponent {
     router = inject(Router);
     route = inject(ActivatedRoute);
     drawerStack = inject(DrawerStackService);
-    drawerOpened = signal(false);
+    drawerOpened = signal(false, ...(ngDevMode ? [{ debugName: "drawerOpened" }] : []));
     queryParamsStore = inject(QueryParamsStore);
     searchText = computed(() => {
         const state = getState(this.queryParamsStore);
         return state.text || '';
-    });
-    visibleTabCount = signal(undefined);
+    }, ...(ngDevMode ? [{ debugName: "searchText" }] : []));
+    visibleTabCount = signal(undefined, ...(ngDevMode ? [{ debugName: "visibleTabCount" }] : []));
     currentPath = computed(() => {
         let current = this.route.snapshot;
         while (current.firstChild) {
@@ -6043,7 +6055,7 @@ class NavbarTabsComponent {
         }
         const childPath = current.url.map(segment => segment.path).join('/');
         return childPath || 'all';
-    });
+    }, ...(ngDevMode ? [{ debugName: "currentPath" }] : []));
     // create tabs from the search routes
     tabs = computed(() => this.router.config
         .find(item => item.path === 'search')
@@ -6055,8 +6067,8 @@ class NavbarTabsComponent {
         routerLink: `/search/${child.path}`,
         icon: child.data?.['icon'],
         queryName: child.data?.['queryName']
-    })) ?? []);
-    moreTabs = computed(() => this.tabs().slice(this.visibleTabCount()));
+    })) ?? [], ...(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
         this.drawerStack.closeAll();
@@ -6064,8 +6076,8 @@ class NavbarTabsComponent {
     constructor() {
         this.drawerStack.isOpened.pipe(takeUntilDestroyed()).subscribe(state => this.drawerOpened.set(state));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NavbarTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: NavbarTabsComponent, isStandalone: true, selector: "navbar-tabs", ngImport: i0, template: `
+    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: `
     <!-- 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)">
@@ -6118,9 +6130,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: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { 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]" }] });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NavbarTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NavbarTabsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'navbar-tabs',
@@ -6197,8 +6209,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }], ctorParameters: () => [] });
 
 class NoResultComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NoResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", 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.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: `
     <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>
@@ -6211,7 +6223,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.0.0", ngImport: i0, type: NoResultComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: NoResultComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NoResult',
@@ -6237,12 +6249,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class PagerComponent {
-    configuration = input.required();
-    page = signal(0);
+    configuration = input.required(...(ngDevMode ? [{ debugName: "configuration" }] : []));
+    page = signal(0, ...(ngDevMode ? [{ debugName: "page" }] : []));
     hasPages = computed(() => {
         const { page, pageSize, rowCount } = this.configuration();
         return page * pageSize < rowCount;
-    });
+    }, ...(ngDevMode ? [{ debugName: "hasPages" }] : []));
     queryService = inject(QueryService);
     constructor() {
         effect(() => {
@@ -6257,8 +6269,8 @@ class PagerComponent {
         this.page.set(this.page() - 1);
         this.queryService.gotoPage(this.page());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     <div class="flex gap-2">
       @if ((hasPages() && page() > 1) || (!hasPages() && page() > 1)) {
         <button variant="ghost" [attr.title]="'previousPage' | transloco" (click)="previousPage()">
@@ -6280,9 +6292,9 @@ class PagerComponent {
         </button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'pager',
@@ -6316,11 +6328,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
 class SearchInputComponent {
     cn = cn;
-    searchElement = viewChild('search');
+    searchElement = viewChild('search', ...(ngDevMode ? [{ debugName: "searchElement" }] : []));
     onFocus = output();
     onBlur = output();
     onSelected = output();
-    controls = input.required();
+    controls = input.required(...(ngDevMode ? [{ debugName: "controls" }] : []));
     keyboardNavigatorOptions = input({
         name: 'searchInputKeyboardNavigator',
         optionSelector: '[role="option"]:not([aria-disabled="true"])',
@@ -6331,15 +6343,15 @@ class SearchInputComponent {
             hideListbox: true,
             resetSelection: true
         }
-    });
-    placeholder = input('Search...');
-    disabled = input(false);
-    hotkey = input('shift+/');
-    class = input();
-    variant = input('default');
+    }, ...(ngDevMode ? [{ debugName: "keyboardNavigatorOptions" }] : []));
+    placeholder = input('Search...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    hotkey = input('shift+/', ...(ngDevMode ? [{ debugName: "hotkey" }] : []));
+    class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     variants = computed(() => {
         return searchVariants({ variant: this.variant(), class: this.class() });
-    });
+    }, ...(ngDevMode ? [{ debugName: "variants" }] : []));
     clearSearch(e) {
         const searchEl = this.searchElement()?.nativeElement;
         if (searchEl) {
@@ -6363,8 +6375,8 @@ class SearchInputComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.0", type: SearchInputComponent, isStandalone: true, selector: "SearchInput", inputs: { 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: { onFocus: "onFocus", onBlur: "onBlur", onSelected: "onSelected" }, host: { properties: { "class": "cn(variants(), disabled() && 'pointer-events-none opacity-50')" } }, providers: [
+    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: { 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: { onFocus: "onFocus", onBlur: "onBlur", onSelected: "onSelected" }, host: { properties: { "class": "cn(variants(), disabled() && 'pointer-events-none opacity-50')" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SearchInputComponent),
@@ -6400,7 +6412,7 @@ class SearchInputComponent {
     <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: SearchIconComponent, 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'SearchInput', standalone: true, imports: [SearchIconComponent, XMarkIConComponent, KeyboardNavigatorDirective], template: `
     <SearchIcon class="text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within:rotate-90" />
@@ -6442,12 +6454,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class SortSelectorComponent {
-    dropdown = viewChild(DropdownComponent);
-    result = input.required();
-    position = input('bottom-start');
+    dropdown = viewChild(DropdownComponent, ...(ngDevMode ? [{ debugName: "dropdown" }] : []));
+    result = input.required(...(ngDevMode ? [{ debugName: "result" }] : []));
+    position = input('bottom-start', ...(ngDevMode ? [{ debugName: "position" }] : []));
     onSort = output();
     appStore = inject(AppStore);
-    queryName = computed(() => this.result()?.queryName);
+    queryName = computed(() => this.result()?.queryName, ...(ngDevMode ? [{ debugName: "queryName" }] : []));
     // fetch the sorting choices from the queries and process if choice is desc or asc
     sortOptions = computed(() => {
         const query = this.appStore.getQueryByName(this.queryName());
@@ -6477,19 +6489,19 @@ class SortSelectorComponent {
             return acc;
         }, [])
             .filter(s => this.result().hasRelevance || !s.orderByClause.includes('globalrelevance'));
-    });
-    sort = computed(() => this.sortOptions()?.find(x => x.name === this.result()?.sort));
-    isSortingDesc = computed(() => this.sort()?.orderByClause?.includes('desc'));
+    }, ...(ngDevMode ? [{ debugName: "sortOptions" }] : []));
+    sort = computed(() => this.sortOptions()?.find(x => x.name === this.result()?.sort), ...(ngDevMode ? [{ debugName: "sort" }] : []));
+    isSortingDesc = computed(() => this.sort()?.orderByClause?.includes('desc'), ...(ngDevMode ? [{ debugName: "isSortingDesc" }] : []));
     onSortOptionClicked(sort) {
         if (sort.name !== this.sort()?.name) {
             this.dropdown()?.close();
             this.onSort.emit(sort);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SortSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }] });
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SortSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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" }]
         }] });
@@ -6499,7 +6511,7 @@ class SponsoredResultsComponent {
      * The directive used to mark the child template for the "Promoted" badge.
      * This allows users to customize the appearance of the badge.
      */
-    childElement = contentChild(ChildMarkerDirective);
+    childElement = contentChild(ChildMarkerDirective, ...(ngDevMode ? [{ debugName: "childElement" }] : []));
     injector = inject(Injector);
     appStore = inject(AppStore);
     queryParamStore = inject(QueryParamsStore);
@@ -6507,17 +6519,17 @@ class SponsoredResultsComponent {
      * The maximum number of sponsored results to display.
      * This is set to 3 by default, but can be overridden by the `maxSponsoredResults` query parameter.
      */
-    slice = input(3);
+    slice = input(3, ...(ngDevMode ? [{ debugName: "slice" }] : []));
     /**
      * Whether to display the "Promoted" badge next to sponsored results.
      * This is set to true by default, but can be overridden by the `displayPromoted` query parameter.
      */
-    displayPromoted = input(true);
+    displayPromoted = input(true, ...(ngDevMode ? [{ debugName: "displayPromoted" }] : []));
     sponsoredLinks = computed(() => {
         const { sponsoredLinks } = getState(this.appStore);
         return sponsoredLinks;
-    });
-    sponsoredResults = signal(undefined);
+    }, ...(ngDevMode ? [{ debugName: "sponsoredLinks" }] : []));
+    sponsoredResults = signal(undefined, ...(ngDevMode ? [{ debugName: "sponsoredResults" }] : []));
     constructor() {
         afterNextRender(async () => {
             if (this.sponsoredLinks()) {
@@ -6540,8 +6552,8 @@ class SponsoredResultsComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SponsoredResultsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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) {
     @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">
@@ -6559,7 +6571,7 @@ class SponsoredResultsComponent {
     }
   }`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SponsoredResultsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SponsoredResultsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sponsored-results, SponsoredResults, sponsoredresults',
@@ -6589,10 +6601,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }], ctorParameters: () => [] });
 
 class ThemeSelectorComponent {
-    scope = input.required();
-    showPrivate = input(false);
-    themes = computed(() => THEMES.filter(theme => (this.showPrivate() ? true : !theme.private)));
-    selectedTheme = model();
+    scope = input.required(...(ngDevMode ? [{ debugName: "scope" }] : []));
+    showPrivate = input(false, ...(ngDevMode ? [{ debugName: "showPrivate" }] : []));
+    themes = computed(() => THEMES.filter(theme => (this.showPrivate() ? true : !theme.private)), ...(ngDevMode ? [{ debugName: "themes" }] : []));
+    selectedTheme = model(...(ngDevMode ? [undefined, { debugName: "selectedTheme" }] : []));
     themeStore = inject(ThemeStore);
     constructor() {
         effect(() => {
@@ -6607,8 +6619,8 @@ class ThemeSelectorComponent {
             theme = theme.name;
         this.themeStore.setCurrentTheme(this.scope(), theme);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ThemeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     <Menu>
       <ng-content></ng-content>
 
@@ -6627,7 +6639,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.0.0", ngImport: i0, type: ThemeSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ThemeSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'theme-selector', standalone: true, imports: [MenuComponent, NgStyle, MenuContentComponent], template: `
     <Menu>
@@ -6650,8 +6662,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }], ctorParameters: () => [] });
 
 class ThemeToggleComponent {
-    scope = input.required();
-    darkMode = model();
+    scope = input.required(...(ngDevMode ? [{ debugName: "scope" }] : []));
+    darkMode = model(...(ngDevMode ? [undefined, { debugName: "darkMode" }] : []));
     themeStore = inject(ThemeStore);
     constructor() {
         effect(() => {
@@ -6667,8 +6679,8 @@ class ThemeToggleComponent {
             return;
         this.themeStore.setDarkMode(this.scope(), status);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     <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>
@@ -6682,7 +6694,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.0.0", ngImport: i0, type: ThemeToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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">
@@ -6877,24 +6889,24 @@ const queryNameResolver = () => {
 };
 
 class SearchFooterComponent {
-    hasMore = input.required();
-    config = input.required();
+    hasMore = input.required(...(ngDevMode ? [{ debugName: "hasMore" }] : []));
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
     loadMore = output();
     onLoadMore(event) {
         event.stopPropagation();
         this.loadMore.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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">
     @if (hasMore() && config().showLoadMore) {
       <button variant="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: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }] });
+  </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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'search-footer, searchfooter, SearchFooter',
@@ -6912,9 +6924,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
 class SearchHeaderComponent {
     floating = inject(PopoverContentComponent, { skipSelf: true, optional: true });
-    label = input('');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: SearchHeaderComponent, isStandalone: true, selector: "search-header, searchheader, SearchHeader", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    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: `
     @if (floating) {
       <div class="p-2">
         <label class="text-xl font-bold">{{ label() }}</label>
@@ -6923,7 +6935,7 @@ class SearchHeaderComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: HorizontalDividerComponent, selector: "menu-separator, MenuSeparator, menuseparator, horizontal-divider, HorizontalDivider, horizontaldivider" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'search-header, searchheader, SearchHeader',
@@ -6942,9 +6954,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class SearchListComponent {
     cn = cn;
     getRelativeDate = getRelativeDate;
-    iconTemplate = contentChild(ChildMarkerDirective);
-    paginatedSearches = input.required();
-    deleteButtonTitle = input('remove');
+    iconTemplate = contentChild(ChildMarkerDirective, ...(ngDevMode ? [{ debugName: "iconTemplate" }] : []));
+    paginatedSearches = input.required(...(ngDevMode ? [{ debugName: "paginatedSearches" }] : []));
+    deleteButtonTitle = input('remove', ...(ngDevMode ? [{ debugName: "deleteButtonTitle" }] : []));
     delete = output();
     router = inject(Router);
     userSettingsStore = inject(UserSettingsStore);
@@ -6961,8 +6973,8 @@ class SearchListComponent {
         e.stopPropagation();
         this.delete.emit(index);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     @for (search of paginatedSearches(); track $index) {
       <li
         role="listitem"
@@ -7004,9 +7016,9 @@ class SearchListComponent {
         <ng-content />
       </li>
     }
-  `, isInline: true, dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SearchListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'search-list, searchlist, SearchList',
@@ -7075,10 +7087,10 @@ class RecentSearchesComponent {
      * Represents the configuration options for recent searches.
      * This property is initialized using the `input` function with a `RecentSearchesConfig` type.
      */
-    options = input();
+    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
     config = inject(RECENT_SEARCHES_CONFIG);
     userSettingsStore = inject(UserSettingsStore);
-    range = signal(10);
+    range = signal(10, ...(ngDevMode ? [{ debugName: "range" }] : []));
     recentSearches = computed(() => (this.userSettingsStore.recentSearches() || []).reduce((acc, item) => {
         const queryParams = getQueryParamsFromUrl(item.url);
         acc.push(Object.assign(item, {
@@ -7087,9 +7099,9 @@ class RecentSearchesComponent {
             queryParams
         }));
         return acc;
-    }, []));
-    paginatedRecentSearches = computed(() => this.recentSearches().slice(0, this.range()));
-    hasMore = computed(() => this.recentSearches().length > 0 && this.range() < this.recentSearches().length);
+    }, []), ...(ngDevMode ? [{ debugName: "recentSearches" }] : []));
+    paginatedRecentSearches = computed(() => this.recentSearches().slice(0, this.range()), ...(ngDevMode ? [{ debugName: "paginatedRecentSearches" }] : []));
+    hasMore = computed(() => this.recentSearches().length > 0 && this.range() < this.recentSearches().length, ...(ngDevMode ? [{ debugName: "hasMore" }] : []));
     constructor() {
         effect(() => {
             if (this.options()) {
@@ -7110,8 +7122,8 @@ class RecentSearchesComponent {
     loadMore() {
         this.range.set(this.range() + (this.config.itemsPerPage ?? 10));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RecentSearchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", 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.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: `
     <SearchHeader [label]="'searches.recent.label' | transloco" />
 
     <SearchList
@@ -7125,9 +7137,9 @@ class RecentSearchesComponent {
     </SearchList>
 
     <SearchFooter [hasMore]="hasMore()" [config]="config" (loadMore)="loadMore()" />
-  `, isInline: true, styles: [":host ul{scrollbar-width:thin}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }] });
+  `, 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.0.0", ngImport: i0, type: RecentSearchesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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" />
@@ -7153,10 +7165,10 @@ const SAVED_SEARCHES_OPTIONS = {
 };
 const SAVED_SEARCHES_CONFIG = new InjectionToken('saved searches options', { factory: () => SAVED_SEARCHES_OPTIONS });
 class SavedSearchesComponent {
-    options = input();
+    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
     config = inject(SAVED_SEARCHES_CONFIG);
     userSettingsStore = inject(UserSettingsStore);
-    range = signal(10);
+    range = signal(10, ...(ngDevMode ? [{ debugName: "range" }] : []));
     savedSearches = computed(() => (this.userSettingsStore.savedSearches() || []).reduce((acc, item) => {
         const queryParams = getQueryParamsFromUrl(item.url);
         acc.push(Object.assign(item, {
@@ -7165,9 +7177,9 @@ class SavedSearchesComponent {
             queryParams
         }));
         return acc;
-    }, []));
-    paginatedSearches = computed(() => this.savedSearches().slice(0, this.range()));
-    hasMore = computed(() => this.savedSearches().length > 0 && this.range() < this.savedSearches().length);
+    }, []), ...(ngDevMode ? [{ debugName: "savedSearches" }] : []));
+    paginatedSearches = computed(() => this.savedSearches().slice(0, this.range()), ...(ngDevMode ? [{ debugName: "paginatedSearches" }] : []));
+    hasMore = computed(() => this.savedSearches().length > 0 && this.range() < this.savedSearches().length, ...(ngDevMode ? [{ debugName: "hasMore" }] : []));
     constructor() {
         effect(() => {
             if (this.options()) {
@@ -7183,8 +7195,8 @@ class SavedSearchesComponent {
     loadMore() {
         this.range.set(this.range() + (this.config.itemsPerPage ?? 10));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SavedSearchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", 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.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: `
     <SearchHeader [label]="'searches.saved.label' | transloco" />
 
     <SearchList [paginatedSearches]="paginatedSearches()" deleteButtonTitle="searches.saved.remove" (delete)="onDelete($event)">
@@ -7194,9 +7206,9 @@ class SavedSearchesComponent {
     </SearchList>
 
     <SearchFooter [hasMore]="hasMore()" [config]="config" (loadMore)="loadMore()" />
-  `, isInline: true, styles: [":host ul{scrollbar-width:thin}\n"], dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }] });
+  `, 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.0.0", ngImport: i0, type: SavedSearchesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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" />
@@ -7214,8 +7226,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class SavedSearchDialog {
     savedSearchesService = inject(SavedSearchesService);
     queryParamsStore = inject(QueryParamsStore);
-    dialog = viewChild(DialogComponent);
-    saveName = signal('');
+    dialog = viewChild(DialogComponent, ...(ngDevMode ? [{ debugName: "dialog" }] : []));
+    saveName = signal('', ...(ngDevMode ? [{ debugName: "saveName" }] : []));
     closed = output();
     open(text) {
         this.saveName.set(text || '');
@@ -7228,8 +7240,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.0.0", ngImport: i0, type: SavedSearchDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.0", 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.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: `
     <dialog #dialog>
       <DialogHeader>
         <DialogTitle>{{ 'searches.saved.save' | transloco }}</DialogTitle>
@@ -7257,9 +7269,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: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }] });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SavedSearchDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SavedSearchDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'saved-search-dialog, savedsearchdialog, SavedSearchDialog',
@@ -7309,14 +7321,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class BookmarkButtonComponent {
-    article = input.required();
+    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
     userSettingsStore = inject(UserSettingsStore);
     route = inject(ActivatedRoute);
     transloco = inject(TranslocoService);
     isBookmarked = computed(() => {
         return this.userSettingsStore.isBookmarked(this.article());
-    });
-    title = computed(() => this.transloco.translate('bookmarks.bookmarkDocument'));
+    }, ...(ngDevMode ? [{ debugName: "isBookmarked" }] : []));
+    title = computed(() => this.transloco.translate('bookmarks.bookmarkDocument'), ...(ngDevMode ? [{ debugName: "title" }] : []));
     async bookmark(e) {
         e.stopPropagation();
         const isBookmarked = await this.userSettingsStore.isBookmarked(this.article());
@@ -7334,14 +7346,14 @@ class BookmarkButtonComponent {
             notify.success(this.transloco.translate('bookmarks.bookmarkAdded'), { duration: 2000 });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BookmarkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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()) {
       <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.0.0", ngImport: i0, type: BookmarkButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: BookmarkButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'bookmark-button, bookmarkbutton, BookmarkButton',
@@ -7374,12 +7386,12 @@ class BookmarksComponent {
     userSettingsStore = inject(UserSettingsStore);
     appStore = inject(AppStore);
     destroyRef = inject(DestroyRef);
-    options = input();
+    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
     config = inject(BOOKMARKS_CONFIG);
-    range = signal(10);
-    bookmarks = computed(() => this.userSettingsStore.bookmarks());
-    paginatedBookmarks = computed(() => this.bookmarks().slice(0, this.range()));
-    hasMore = computed(() => this.bookmarks().length > 0 && this.range() < this.bookmarks().length);
+    range = signal(10, ...(ngDevMode ? [{ debugName: "range" }] : []));
+    bookmarks = computed(() => this.userSettingsStore.bookmarks(), ...(ngDevMode ? [{ debugName: "bookmarks" }] : []));
+    paginatedBookmarks = computed(() => this.bookmarks().slice(0, this.range()), ...(ngDevMode ? [{ debugName: "paginatedBookmarks" }] : []));
+    hasMore = computed(() => this.bookmarks().length > 0 && this.range() < this.bookmarks().length, ...(ngDevMode ? [{ debugName: "hasMore" }] : []));
     constructor() {
         effect(() => {
             if (this.options()) {
@@ -7433,20 +7445,20 @@ class BookmarksComponent {
         e.stopPropagation();
         this.range.set(this.range() + (this.config.itemsPerPage ?? 10));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BookmarksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }] });
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BookmarksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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"] }]
         }], ctorParameters: () => [] });
 
 class DeleteCollectionDialog {
-    dialog = viewChild(DialogComponent);
+    dialog = viewChild(DialogComponent, ...(ngDevMode ? [{ debugName: "dialog" }] : []));
     userSettingsStore = inject(UserSettingsStore);
     translocoService = inject(TranslocoService);
-    collection = signal(undefined);
-    index = signal(undefined);
+    collection = signal(undefined, ...(ngDevMode ? [{ debugName: "collection" }] : []));
+    index = signal(undefined, ...(ngDevMode ? [{ debugName: "index" }] : []));
     open(collection, index) {
         this.collection.set(collection);
         this.index.set(index);
@@ -7458,8 +7470,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.0.0", ngImport: i0, type: DeleteCollectionDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.0", 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.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: `
     <dialog #dialog>
       <DialogHeader>
         <DialogTitle>{{ 'collections.deleteCollection' | transloco }}</DialogTitle>
@@ -7479,9 +7491,9 @@ class DeleteCollectionDialog {
         </button>
       </DialogFooter>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { 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" }] });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DeleteCollectionDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DeleteCollectionDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'delete-collection-dialog',
@@ -7534,13 +7546,13 @@ class CollectionsComponent {
     userSettingsStore = inject(UserSettingsStore);
     drawerStack = inject(DrawerStackService);
     router = inject(Router);
-    options = input();
+    options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
     config = inject(COLLECTIONS_CONFIG);
-    range = signal(10);
-    collections = computed(() => this.userSettingsStore.baskets());
-    paginatedCollections = computed(() => this.collections().slice(0, this.range()));
-    hasMore = computed(() => this.collections().length > 0 && this.range() < this.collections().length);
-    deleteCollectionDialog = viewChild(DeleteCollectionDialog);
+    range = signal(10, ...(ngDevMode ? [{ debugName: "range" }] : []));
+    collections = computed(() => this.userSettingsStore.baskets(), ...(ngDevMode ? [{ debugName: "collections" }] : []));
+    paginatedCollections = computed(() => this.collections().slice(0, this.range()), ...(ngDevMode ? [{ debugName: "paginatedCollections" }] : []));
+    hasMore = computed(() => this.collections().length > 0 && this.range() < this.collections().length, ...(ngDevMode ? [{ debugName: "hasMore" }] : []));
+    deleteCollectionDialog = viewChild(DeleteCollectionDialog, ...(ngDevMode ? [{ debugName: "deleteCollectionDialog" }] : []));
     constructor() {
         effect(() => {
             if (this.options()) {
@@ -7561,10 +7573,10 @@ class CollectionsComponent {
         e.stopPropagation();
         this.range.set(this.range() + (this.config.itemsPerPage ?? 10));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CollectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }] });
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CollectionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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" }]
         }], ctorParameters: () => [] });
@@ -7573,7 +7585,7 @@ class AlertDialog {
     queryService = inject(QueryService);
     queryParamsStore = inject(QueryParamsStore);
     userSettingsStore = inject(UserSettingsStore);
-    dialog = viewChild(DialogComponent);
+    dialog = viewChild(DialogComponent, ...(ngDevMode ? [{ debugName: "dialog" }] : []));
     frequencies = [Alert.Frequency.Daily, Alert.Frequency.Hourly, Alert.Frequency.Immediate];
     frequency = Alert.Frequency;
     weekdays = [
@@ -7587,14 +7599,14 @@ class AlertDialog {
     ];
     index;
     alert;
-    alertName = signal('');
-    alertFrequency = signal(Alert.Frequency.Daily);
-    alertDays = signal(Alert.Days.None);
-    alertTimes = signal('09:00');
-    alertActive = signal(true);
-    canUpdateQuery = signal(false);
-    updateStatus = signal('idle');
-    invalidForm = computed(() => !this.alertName() || !this.alertTimes());
+    alertName = signal('', ...(ngDevMode ? [{ debugName: "alertName" }] : []));
+    alertFrequency = signal(Alert.Frequency.Daily, ...(ngDevMode ? [{ debugName: "alertFrequency" }] : []));
+    alertDays = signal(Alert.Days.None, ...(ngDevMode ? [{ debugName: "alertDays" }] : []));
+    alertTimes = signal('09:00', ...(ngDevMode ? [{ debugName: "alertTimes" }] : []));
+    alertActive = signal(true, ...(ngDevMode ? [{ debugName: "alertActive" }] : []));
+    canUpdateQuery = signal(false, ...(ngDevMode ? [{ debugName: "canUpdateQuery" }] : []));
+    updateStatus = signal('idle', ...(ngDevMode ? [{ debugName: "updateStatus" }] : []));
+    invalidForm = computed(() => !this.alertName() || !this.alertTimes(), ...(ngDevMode ? [{ debugName: "invalidForm" }] : []));
     closed = output();
     open(index) {
         this.showModal(index);
@@ -7691,8 +7703,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.0.0", ngImport: i0, type: AlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     <dialog #dialog>
       <DialogHeader class="px-1">
         <DialogTitle>{{ 'alerts.createAlert' | transloco }}</DialogTitle>
@@ -7802,9 +7814,9 @@ class AlertDialog {
         </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: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }] });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AlertDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AlertDialog, decorators: [{
             type: Component,
             args: [{ selector: 'alert-dialog, alertdialog, AlertDialog', standalone: true, imports: [
                         FormsModule,
@@ -7936,9 +7948,9 @@ class AlertsComponent {
     floating = inject(PopoverComponent, { skipSelf: true, optional: true });
     userSettingsStore = inject(UserSettingsStore);
     modal = inject(DialogService);
-    alertFormDialog = viewChild(AlertDialog);
-    reordering = signal(false);
-    alerts = computed(() => this.userSettingsStore.alerts());
+    alertFormDialog = viewChild(AlertDialog, ...(ngDevMode ? [{ debugName: "alertFormDialog" }] : []));
+    reordering = signal(false, ...(ngDevMode ? [{ debugName: "reordering" }] : []));
+    alerts = computed(() => this.userSettingsStore.alerts(), ...(ngDevMode ? [{ debugName: "alerts" }] : []));
     tmpAlerts = [];
     query;
     constructor() {
@@ -7974,19 +7986,19 @@ 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.0.0", ngImport: i0, type: AlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"], 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"] }] });
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AlertsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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" }]
         }], ctorParameters: () => [] });
 
 class OverrideUserDialogComponent {
-    dialog = viewChild(DialogComponent);
+    dialog = viewChild(DialogComponent, ...(ngDevMode ? [{ debugName: "dialog" }] : []));
     appService = inject(ApplicationService);
     principalStore = inject(PrincipalStore);
-    overrideUser = model({ username: '', domain: '' });
+    overrideUser = model({ username: '', domain: '' }, ...(ngDevMode ? [{ debugName: "overrideUser" }] : []));
     open() {
         this.dialog().showModal();
     }
@@ -8039,8 +8051,8 @@ class OverrideUserDialogComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: OverrideUserDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.0", 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.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: `
     <dialog #dialog class="max-w-md">
       <DialogHeader>
         <DialogTitle>{{ 'dialogs.overrideUser.title' | transloco }}</DialogTitle>
@@ -8088,7 +8100,7 @@ class OverrideUserDialogComponent {
     </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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: OverrideUserDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: OverrideUserDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'override-user-dialog',
@@ -8156,7 +8168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class ResetUserSettingsDialogComponent {
-    dialog = viewChild(DialogComponent);
+    dialog = viewChild(DialogComponent, ...(ngDevMode ? [{ debugName: "dialog" }] : []));
     userSettingsStore = inject(UserSettingsStore);
     translocoService = inject(TranslocoService);
     open() {
@@ -8169,8 +8181,8 @@ class ResetUserSettingsDialogComponent {
             notify.success(message, { duration: 2000 });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ResetUserSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.0", 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.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: `
     <dialog #dialog>
       <DialogHeader>
         <DialogTitle>{{ 'dialogs.resetUserSettings.title' | transloco }}</DialogTitle>
@@ -8192,7 +8204,7 @@ class ResetUserSettingsDialogComponent {
     </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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ResetUserSettingsDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: ResetUserSettingsDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'reset-user-settings-dialog',
@@ -8224,10 +8236,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class DidYouMeanComponent {
-    result = input();
-    spellingCorrectionMode = computed(() => this.result()?.didYouMean?.spellingCorrectionMode);
-    correction = computed(() => this.result()?.didYouMean?.text.corrected);
-    original = computed(() => this.result()?.didYouMean?.text.original);
+    result = input(...(ngDevMode ? [undefined, { debugName: "result" }] : []));
+    spellingCorrectionMode = computed(() => this.result()?.didYouMean?.spellingCorrectionMode, ...(ngDevMode ? [{ debugName: "spellingCorrectionMode" }] : []));
+    correction = computed(() => this.result()?.didYouMean?.text.corrected, ...(ngDevMode ? [{ debugName: "correction" }] : []));
+    original = computed(() => this.result()?.didYouMean?.text.original, ...(ngDevMode ? [{ debugName: "original" }] : []));
     router = inject(Router);
     queryParamsStore = inject(QueryParamsStore);
     selectCorrected() {
@@ -8238,10 +8250,10 @@ 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.0.0", ngImport: i0, type: DidYouMeanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DidYouMeanComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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"] }]
         }] });
@@ -8256,10 +8268,10 @@ class SignInComponent {
     /**
      * Represents the user credentials for login.
      */
-    credentials = signal({ username: '', password: '' });
-    authenticated = signal(isAuthenticated());
-    user = signal(null);
-    returnUrl = signal(null);
+    credentials = signal({ username: '', password: '' }, ...(ngDevMode ? [{ debugName: "credentials" }] : []));
+    authenticated = signal(isAuthenticated(), ...(ngDevMode ? [{ debugName: "authenticated" }] : []));
+    user = signal(null, ...(ngDevMode ? [{ debugName: "user" }] : []));
+    returnUrl = signal(null, ...(ngDevMode ? [{ debugName: "returnUrl" }] : []));
     router = inject(Router);
     route = inject(ActivatedRoute);
     principalService = inject(PrincipalService);
@@ -8268,7 +8280,7 @@ class SignInComponent {
      * Indicates whether the login credentials are valid.
      * Returns true if both the username and password are non-empty, otherwise false.
      */
-    valid = computed(() => this.credentials().username.length > 0 && this.credentials().password.length > 0);
+    valid = computed(() => this.credentials().username.length > 0 && this.credentials().password.length > 0, ...(ngDevMode ? [{ debugName: "valid" }] : []));
     constructor(destroyRef) {
         this.destroyRef = destroyRef;
         effect(() => {
@@ -8362,10 +8374,10 @@ class SignInComponent {
             this.router.navigate(['/']);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SignInComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }] });
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SignInComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,
             args: [{ selector: 'signIn, signin, sign-in', standalone: true, providers: [provideTranslocoScope('login')], imports: [
                         RouterModule,
@@ -8382,7 +8394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
 class LabelService {
     appStore = inject(AppStore);
-    hasAccess = signal(undefined);
+    hasAccess = signal(undefined, ...(ngDevMode ? [{ debugName: "hasAccess" }] : []));
     /**
      * Check user rights to verify if they can access labels handling
      * @returns if has the rights
@@ -8516,10 +8528,10 @@ class LabelService {
             return from(labels.bulkRemove(labelsToRemove, query, publicOnly));
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: LabelService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: LabelService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: LabelService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: LabelService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -8528,18 +8540,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
 const DEBOUNCE_DELAY = 300;
 class MultiSelectLabelsComponent {
-    article = model();
-    isPublic = input(false);
-    allowModification = input(false);
-    labelsField = input();
-    anchor = signal(`--${guid()}`);
-    suggestedLabels = signal([]);
-    labelInput = model('');
+    article = model(...(ngDevMode ? [undefined, { debugName: "article" }] : []));
+    isPublic = input(false, ...(ngDevMode ? [{ debugName: "isPublic" }] : []));
+    allowModification = input(false, ...(ngDevMode ? [{ debugName: "allowModification" }] : []));
+    labelsField = input(...(ngDevMode ? [undefined, { debugName: "labelsField" }] : []));
+    anchor = signal(`--${guid()}`, ...(ngDevMode ? [{ debugName: "anchor" }] : []));
+    suggestedLabels = signal([], ...(ngDevMode ? [{ debugName: "suggestedLabels" }] : []));
+    labelInput = model('', ...(ngDevMode ? [{ debugName: "labelInput" }] : []));
     debouncedLabelInput = debouncedSignal(this.labelInput, DEBOUNCE_DELAY);
-    popover = viewChild('LabelsPopover');
-    popoverElement = computed(() => this.popover()?.nativeElement);
-    labels = signal([]);
-    id = signal(`labels-form-${guid()}`);
+    popover = viewChild('LabelsPopover', ...(ngDevMode ? [{ debugName: "popover" }] : []));
+    popoverElement = computed(() => this.popover()?.nativeElement, ...(ngDevMode ? [{ debugName: "popoverElement" }] : []));
+    labels = signal([], ...(ngDevMode ? [{ debugName: "labels" }] : []));
+    id = signal(`labels-form-${guid()}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
     constructor() {
         afterEveryRender(() => {
             this.popoverElement().style.positionAnchor = this.anchor();
@@ -8626,8 +8638,8 @@ class MultiSelectLabelsComponent {
     updateArticleWithLabels() {
         this.article()[this.labelsField()] = this.labels();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MultiSelectLabelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     <div class="anchor" [ngStyle]="{ 'anchor-name': anchor() }">
       <label [htmlFor]="id()" class="font-semibold">{{ (isPublic() ? 'labels.publicLabels' : 'labels.privateLabels') | transloco }}</label>
       <input
@@ -8664,9 +8676,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: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }] });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MultiSelectLabelsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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() }">
@@ -8710,11 +8722,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
 class LabelsEditDialog {
     destroyRef;
-    dialog = viewChild(DialogComponent);
+    dialog = viewChild(DialogComponent, ...(ngDevMode ? [{ debugName: "dialog" }] : []));
     labelService = inject(LabelService);
     closed = output();
-    article = model({});
-    labelsConfig = signal(undefined);
+    article = model({}, ...(ngDevMode ? [{ debugName: "article" }] : []));
+    labelsConfig = signal(undefined, ...(ngDevMode ? [{ debugName: "labelsConfig" }] : []));
     constructor(destroyRef) {
         this.destroyRef = destroyRef;
         this.labelService
@@ -8729,8 +8741,8 @@ class LabelsEditDialog {
     close(event) {
         this.closed.emit({ type: event, article: this.article() });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: LabelsEditDialog, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     <dialog #dialog (closed)="close($event)">
       <DialogHeader>
         <DialogTitle>{{ 'labels.title' | transloco }}</DialogTitle>
@@ -8758,9 +8770,9 @@ class LabelsEditDialog {
         </button>
       </DialogFooter>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }] });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: LabelsEditDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: LabelsEditDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'labels-edit-dialog, labelseditdialog, LabelsEditDialog',
@@ -8811,12 +8823,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
 const AuditFeedbackType = 'UserFeedback_UserFeedback';
 class FeedbackDialogComponent {
-    dialog = viewChild(DialogComponent);
+    dialog = viewChild(DialogComponent, ...(ngDevMode ? [{ debugName: "dialog" }] : []));
     auditService = inject(AuditService);
     appStore = inject(AppStore);
     transloco = inject(TranslocoService);
-    comment = model('');
-    type = signal(undefined);
+    comment = model('', ...(ngDevMode ? [{ debugName: "comment" }] : []));
+    type = signal(undefined, ...(ngDevMode ? [{ debugName: "type" }] : []));
     open(type) {
         this.type.set(type);
         this.dialog().showModal();
@@ -8835,8 +8847,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.0.0", ngImport: i0, type: FeedbackDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     <dialog #dialog>
       <DialogHeader>
         <DialogTitle>{{ 'feedback.dialogTitle' | transloco }}</DialogTitle>
@@ -8863,9 +8875,9 @@ class FeedbackDialogComponent {
         </button>
       </DialogFooter>
     </dialog>
-  `, isInline: true, dependencies: [{ kind: "pipe", type: TranslocoPipe, name: "transloco" }, { 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" }] });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FeedbackDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FeedbackDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'feedback-dialog, feedbackdialog, FeedbackDialog',
@@ -8914,13 +8926,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
 class SearchFeedbackComponent {
     onClose = output();
-    feedbackDialog = viewChild(FeedbackDialogComponent);
-    pages = input.required();
+    feedbackDialog = viewChild(FeedbackDialogComponent, ...(ngDevMode ? [{ debugName: "feedbackDialog" }] : []));
+    pages = input.required(...(ngDevMode ? [{ debugName: "pages" }] : []));
     auditService = inject(AuditService);
     queryParamsStore = inject(QueryParamsStore);
     transloco = inject(TranslocoService);
-    liked = signal(false);
-    disliked = signal(false);
+    liked = signal(false, ...(ngDevMode ? [{ debugName: "liked" }] : []));
+    disliked = signal(false, ...(ngDevMode ? [{ debugName: "disliked" }] : []));
     menus = [
         { type: 'content', icon: 'far fa-file-alt' },
         { type: 'ui', icon: 'fas fa-desktop' },
@@ -8970,10 +8982,10 @@ class SearchFeedbackComponent {
     openFeedbackDialog(type) {
         this.feedbackDialog()?.open(type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "component", type: FeedbackDialogComponent, selector: "feedback-dialog, feedbackdialog, FeedbackDialog", inputs: ["comment"], outputs: ["commentChange"] }] });
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchFeedbackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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" }]
         }] });
@@ -8985,19 +8997,19 @@ class AggregationItemComponent {
     }
     onSelect = new EventEmitter();
     onOpen = new EventEmitter();
-    node = input.required();
+    node = input.required(...(ngDevMode ? [{ debugName: "node" }] : []));
     searchText = inject(AggregationComponent).searchText;
     name = computed(() => {
         const value = this.node().display || this.node().value;
         return typeof value === 'string' ? value : `${value}`;
-    });
+    }, ...(ngDevMode ? [{ debugName: "name" }] : []));
     level = computed(() => {
         const level = (this.node().$level ?? 0) - 1 + (!this.node().hasChildren ? 1 : 0);
         if (this.node().hasChildren === false) {
             return level + 1;
         }
         return level;
-    });
+    }, ...(ngDevMode ? [{ debugName: "level" }] : []));
     select(e, item) {
         e.stopImmediatePropagation();
         item.$selected = !item.$selected;
@@ -9017,10 +9029,10 @@ class AggregationItemComponent {
         }
         this.onOpen.emit(node);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AggregationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: "pipe", type: HighlightWordPipe, name: "highlightWord" }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "component", type: ChevronRightIconComponent, selector: "chevron-right, ChevronRight, chevronright", inputs: ["class", "width", "height"] }] });
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AggregationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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: [{
@@ -9039,8 +9051,8 @@ class AggregationComponent {
     /* services */
     aggregationsService = inject(AggregationsService);
     el = inject(ElementRef);
-    name = input.required();
-    column = input.required();
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
     onSelect = output();
     /**
      * A boolean flag indicating whether the component should operate in headless mode.
@@ -9048,19 +9060,19 @@ class AggregationComponent {
      *
      * @default false
      */
-    headless = input(false);
+    headless = input(false, ...(ngDevMode ? [{ debugName: "headless" }] : []));
     /**
      * A boolean flag indicating whether the component is searchable.
      * This property is initialized to `undefined` by default.
      * "Undefined" and not "false" because this input overrides the custom json settings
      */
-    searchable = input(undefined);
-    selection = signal(false);
+    searchable = input(undefined, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
+    selection = signal(false, ...(ngDevMode ? [{ debugName: "selection" }] : []));
     /**
      * 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);
+    showCount = input(false, ...(ngDevMode ? [{ debugName: "showCount" }] : []));
     /* aggregation */
     aggregation = computed(() => {
         // when the aggegation store updates, we need to check if the aggregation is still valid
@@ -9076,7 +9088,7 @@ class AggregationComponent {
             }
         }
         return null;
-    });
+    }, ...(ngDevMode ? [{ debugName: "aggregation" }] : []));
     /* items of the aggretions */
     items = computed(() => {
         // when the aggegation store updates, we need to check if the aggregation is still valid
@@ -9091,7 +9103,7 @@ class AggregationComponent {
             return currentFilters;
         }
         return [];
-    });
+    }, ...(ngDevMode ? [{ debugName: "items" }] : []));
     /**
      * A computed property that determines whether there are active filters
      * for the current aggregation column.
@@ -9103,7 +9115,7 @@ class AggregationComponent {
     hasFilters = computed(() => {
         const { count = 0 } = this.queryParamsStore.getFilter({ field: this.aggregation()?.column, name: this.aggregation()?.name }) || {};
         return count > 0;
-    });
+    }, ...(ngDevMode ? [{ debugName: "hasFilters" }] : []));
     /**
      * A computed property that returns the number of items of this aggregation applied in the active filters
      *
@@ -9114,21 +9126,21 @@ class AggregationComponent {
     filtersCount = computed(() => {
         const { count = 0 } = this.queryParamsStore.getFilter({ field: this.aggregation()?.column, name: this.aggregation()?.name }) || {};
         return count;
-    });
+    }, ...(ngDevMode ? [{ debugName: "filtersCount" }] : []));
     /*
      * A computed property that returns the height of the component based on its state.
      *
      * @returns {number} the height of the component in rem.
      */
-    computeHeight = computed(() => (this.headless() ? 0 : 2) + (this.aggregation()?.searchable ? 2 : 0));
+    computeHeight = computed(() => (this.headless() ? 0 : 2) + (this.aggregation()?.searchable ? 2 : 0), ...(ngDevMode ? [{ debugName: "computeHeight" }] : []));
     /* search feature */
-    searchText = model('');
+    searchText = model('', ...(ngDevMode ? [{ debugName: "searchText" }] : []));
     debouncedSearchText = debouncedSignal(this.searchText, 300);
     normalizedSearchText = computed(() => this.debouncedSearchText()
         .normalize('NFD')
-        .replace(/[\u0300-\u036f]/g, ''));
+        .replace(/[\u0300-\u036f]/g, ''), ...(ngDevMode ? [{ debugName: "normalizedSearchText" }] : []));
     /* suggestions */
-    suggests = signal([]);
+    suggests = signal([], ...(ngDevMode ? [{ debugName: "suggests" }] : []));
     /* searched items */
     searchedItems = computed(() => {
         if (!this.suggests())
@@ -9147,7 +9159,7 @@ class AggregationComponent {
             $selected: false,
             items: []
         }));
-    });
+    }, ...(ngDevMode ? [{ debugName: "searchedItems" }] : []));
     query;
     constructor() {
         this.query = buildQuery();
@@ -9379,10 +9391,10 @@ class AggregationComponent {
         }
         return currentItems;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AggregationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }] });
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AggregationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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',
@@ -9409,11 +9421,11 @@ const FILTER_DATE_ALLOW_CUSTOM_RANGE = new InjectionToken('date allow custom ran
 class DateComponent extends AggregationComponent {
     destroyRef;
     cn = cn;
-    title = input({ label: 'Date', icon: 'far fa-calendar-day' });
-    displayEmptyDistributionIntervals = input(false);
+    title = input({ label: 'Date', icon: 'far fa-calendar-day' }, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    displayEmptyDistributionIntervals = input(false, ...(ngDevMode ? [{ debugName: "displayEmptyDistributionIntervals" }] : []));
     allowCustomRange = inject(FILTER_DATE_ALLOW_CUSTOM_RANGE);
     transloco = inject(TranslocoService);
-    dateOptions = computed(() => translateAggregationToDateOptions(this.aggregation(), this.displayEmptyDistributionIntervals()));
+    dateOptions = computed(() => translateAggregationToDateOptions(this.aggregation(), this.displayEmptyDistributionIntervals()), ...(ngDevMode ? [{ debugName: "dateOptions" }] : []));
     form = new FormGroup({
         option: new FormControl(null),
         customRange: new FormGroup({
@@ -9422,7 +9434,7 @@ class DateComponent extends AggregationComponent {
         })
     });
     today = new Date().toISOString().split('T')[0];
-    validSelection = signal(false);
+    validSelection = signal(false, ...(ngDevMode ? [{ debugName: "validSelection" }] : []));
     constructor(destroyRef) {
         super();
         this.destroyRef = destroyRef;
@@ -9441,7 +9453,7 @@ class DateComponent extends AggregationComponent {
             return { ...agg, items: agg?.items?.filter((item) => item.display !== 'custom-range') ?? [] };
         }
         return null;
-    });
+    }, ...(ngDevMode ? [{ debugName: "aggregation" }] : []));
     apply() {
         try {
             const filter = this.getFormValueFilter();
@@ -9552,19 +9564,19 @@ class DateComponent extends AggregationComponent {
         }
         throw new Error('filters.filterInvalid');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DateComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }] });
 
 class FilterButtonComponent {
-    name = input.required();
-    column = input.required();
-    position = input('bottom-start');
-    variant = signal('ghost');
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+    position = input('bottom-start', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    variant = signal('ghost', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     filter = signal({
         name: '',
         icon: '',
@@ -9574,7 +9586,7 @@ class FilterButtonComponent {
         count: 0,
         hidden: false,
         disabled: false
-    });
+    }, ...(ngDevMode ? [{ debugName: "filter" }] : []));
     nativeElement = inject(ElementRef).nativeElement;
     aggregationsStore = inject(AggregationsStore);
     queryParamsStore = inject(QueryParamsStore);
@@ -9617,8 +9629,8 @@ class FilterButtonComponent {
     isDate(column) {
         return this.appStore.isDateColumn(column);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     <Popover [disabled]="filter().disabled" class="group">
       <button
         [variant]="variant()"
@@ -9660,9 +9672,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: "pipe", type: OperatorPipe, name: "operator" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["name", "column", "headless", "searchable", "showCount", "searchText"], outputs: ["onSelect", "searchTextChange"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "component", type: DateComponent, selector: "date-filter,DateFilter", inputs: ["title", "displayEmptyDistributionIntervals"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }] });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FilterButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FilterButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'filter-button, FilterButton',
@@ -9731,13 +9743,13 @@ const FILTERS_BREAKPOINT = new InjectionToken('FILTERS_BREAKPOINT', { factory: (
 
 class MoreComponent {
     cn = cn;
-    count = input(2);
-    excludedFilters = input([]);
+    count = input(2, ...(ngDevMode ? [{ debugName: "count" }] : []));
+    excludedFilters = input([], ...(ngDevMode ? [{ debugName: "excludedFilters" }] : []));
     route = inject(ActivatedRoute);
     appStore = inject(AppStore);
     aggregationsStore = inject(AggregationsStore);
     queryParamsStore = inject(QueryParamsStore);
-    filters = signal([]);
+    filters = signal([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
     constructor() {
         effect(() => {
             const count = this.count();
@@ -9804,8 +9816,8 @@ 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.0.0", ngImport: i0, type: MoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     @for (filter of filters(); track $index) {
       <li [class]="cn('collapse pb-1', filter.hidden && 'hidden')">
         <!-- header -->
@@ -9865,9 +9877,9 @@ 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: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "component", type: DateComponent, selector: "date-filter,DateFilter", inputs: ["title", "displayEmptyDistributionIntervals"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }] });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MoreComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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) {
@@ -9939,9 +9951,9 @@ class MoreButtonComponent {
     appStore = inject(AppStore);
     queryParamsStore = inject(QueryParamsStore);
     nativeElement = inject(ElementRef).nativeElement;
-    count = input(2);
-    position = input('bottom-end');
-    excludedFilters = input([]);
+    count = input(2, ...(ngDevMode ? [{ debugName: "count" }] : []));
+    position = input('bottom-end', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    excludedFilters = input([], ...(ngDevMode ? [{ debugName: "excludedFilters" }] : []));
     totalFiltersCount = computed(() => {
         const count = this.count();
         const authorizedFilters = this.appStore
@@ -9955,9 +9967,9 @@ class MoreButtonComponent {
             return acc;
         }, 0);
         return total;
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MoreButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: `
+    }, ...(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: `
     <Popover class="group">
       <button
         variant="ghost"
@@ -9977,9 +9989,9 @@ 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: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "component", type: MoreComponent, selector: "more, More", inputs: ["count", "excludedFilters"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }] });
+  `, 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MoreButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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">
@@ -10005,8 +10017,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }] });
 
 class FiltersBarComponent {
-    class = input();
-    position = input('bottom-start');
+    class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
+    position = input('bottom-start', ...(ngDevMode ? [{ debugName: "position" }] : []));
     /**
      * Filters that should be excluded from the filters bar.
      * This can be used to hide specific filters from the UI.
@@ -10014,14 +10026,14 @@ class FiltersBarComponent {
      * Use the filter column names to specify which filters to exclude.
      * For example, to exclude the "geo" filter, set `excludeFilters = ['Geo']`.
      */
-    excludeFilters = input([]);
+    excludeFilters = input([], ...(ngDevMode ? [{ debugName: "excludeFilters" }] : []));
     /**
      * The number of filters to display before showing the "more filters" button.
      * This is used to limit the number of visible filters in the UI.
      * The default value is set by the FILTERS_BREAKPOINT injection token.
      */
-    filtersCount = input(inject(FILTERS_BREAKPOINT));
-    direction = input('horizontal');
+    filtersCount = input(inject(FILTERS_BREAKPOINT), ...(ngDevMode ? [{ debugName: "filtersCount" }] : []));
+    direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : []));
     /**
      * Event emitted when the clear filters button is clicked.
      * This event can be used to perform additional actions when filters are cleared.
@@ -10033,9 +10045,9 @@ class FiltersBarComponent {
      */
     onClearBasket = output();
     cn = cn;
-    moreFilterElement = viewChild(MoreButtonComponent);
-    dropdownElements = viewChildren(FilterButtonComponent);
-    overflowManager = viewChild(OverflowManagerDirective);
+    moreFilterElement = viewChild(MoreButtonComponent, ...(ngDevMode ? [{ debugName: "moreFilterElement" }] : []));
+    dropdownElements = viewChildren(FilterButtonComponent, ...(ngDevMode ? [{ debugName: "dropdownElements" }] : []));
+    overflowManager = viewChild(OverflowManagerDirective, ...(ngDevMode ? [{ debugName: "overflowManager" }] : []));
     cdr = inject(ChangeDetectorRef);
     route = inject(ActivatedRoute);
     appStore = inject(AppStore);
@@ -10045,23 +10057,23 @@ class FiltersBarComponent {
     transloco = inject(TranslocoService);
     router = inject(Router);
     destroyRef = inject(DestroyRef);
-    filters = signal([]);
-    moreFilterCount = signal(this.filtersCount());
+    filters = signal([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    moreFilterCount = signal(this.filtersCount(), ...(ngDevMode ? [{ debugName: "moreFilterCount" }] : []));
     hasFilters = computed(() => {
         // when the query parameters store updates, update the hasFilters signal
         // to show or hide the clear filters button
         const state = getState(this.queryParamsStore);
         return state.basket || (Array.isArray(state.filters) && state.filters.length > 0);
-    });
+    }, ...(ngDevMode ? [{ debugName: "hasFilters" }] : []));
     currentBasket = computed(() => {
         const { basket } = getState(this.queryParamsStore);
         return basket;
-    });
+    }, ...(ngDevMode ? [{ debugName: "currentBasket" }] : []));
     hasAggregations = computed(() => {
         if (this.aggregationsStore.aggregations())
             return this.aggregationsStore.aggregations().length > 0;
         return false;
-    });
+    }, ...(ngDevMode ? [{ debugName: "hasAggregations" }] : []));
     hasMoreFilters = computed(() => {
         const moreFiltersAggregations = this.appStore
             .getAuthorizedFilters(this.route)
@@ -10070,7 +10082,7 @@ class FiltersBarComponent {
             .toSpliced(0, this.moreFilterCount())
             .map(f => this.aggregationsStore.getAggregation(f.column, 'column'));
         return moreFiltersAggregations;
-    });
+    }, ...(ngDevMode ? [{ debugName: "hasMoreFilters" }] : []));
     constructor() {
         effect(() => {
             // set filters according to the route and the authorized filters with default values
@@ -10113,8 +10125,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.0.0", ngImport: i0, type: FiltersBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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.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: `
     <ng-container overflowManager [direction]="direction()" [target]="el.nativeElement" (count)="adjustFiltersCount($event)">
       @if (hasFilters()) {
         <button
@@ -10151,7 +10163,7 @@ class FiltersBarComponent {
     </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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: FiltersBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: FiltersBarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'filters-bar, FiltersBar, filtersbar',
@@ -10299,10 +10311,10 @@ class DrawerStackComponent {
             drawer?.destroy();
         }, 250);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerStackComponent, deps: [{ token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", 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.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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerStackComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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"] }]
         }], ctorParameters: () => [{ type: i0.DestroyRef }], propDecorators: { drawerOpened: [{
@@ -10335,10 +10347,10 @@ class DrawerService {
     toggleExtension() {
         this.isExtended.getValue() ? this.collapse() : this.extend();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerService });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerService, decorators: [{
             type: Injectable
         }] });
 
@@ -10346,8 +10358,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
  * Each Drawer component has it's own drawer service to handle its state and link it to the drawer stack.
  */
 class DrawerComponent {
-    drawerOpened = signal(false);
-    drawerExtended = signal(false);
+    drawerOpened = signal(false, ...(ngDevMode ? [{ debugName: "drawerOpened" }] : []));
+    drawerExtended = signal(false, ...(ngDevMode ? [{ debugName: "drawerExtended" }] : []));
     drawerGridTemplateColumns = '';
     mouseMove(event) {
         if (!this.isSliding)
@@ -10368,7 +10380,7 @@ class DrawerComponent {
             this.enableAnimation();
         this.isSliding = false;
     }
-    drawerHandle = viewChild('drawerHandle');
+    drawerHandle = viewChild('drawerHandle', ...(ngDevMode ? [{ debugName: "drawerHandle" }] : []));
     drawer = inject(DrawerService);
     drawerStack = inject(DrawerStackService);
     element = inject(ElementRef).nativeElement;
@@ -10399,10 +10411,10 @@ class DrawerComponent {
     resetGridTemplateColumns() {
         this.element.style.gridTemplateColumns = this.defaultDrawerGridTemplate;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.0", 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.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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-drawer', standalone: true, providers: [DrawerService], template: ``, host: {
                         '[attr.drawer-opened]': 'drawerOpened()',
@@ -10426,10 +10438,10 @@ class DrawerNavbarComponent {
     drawerStack = inject(DrawerStackService);
     drawerService = inject(DrawerService);
     isExtended = toSignal(this.drawerService.isExtended);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", 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: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "size"] }, { kind: "component", type: VerticalDividerComponent, selector: "vertical-divider, VerticalDivider, verticaldivider" }] });
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerNavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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" }]
         }] });
@@ -10466,15 +10478,15 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
             value: this.formBuilder.control(undefined)
         })
     });
-    currentTab = signal('all');
-    currentFilter = signal(undefined);
-    appliedFilters = signal([]);
-    suggestions = signal([]);
-    aggregations = signal(undefined);
+    currentTab = signal('all', ...(ngDevMode ? [{ debugName: "currentTab" }] : []));
+    currentFilter = signal(undefined, ...(ngDevMode ? [{ debugName: "currentFilter" }] : []));
+    appliedFilters = signal([], ...(ngDevMode ? [{ debugName: "appliedFilters" }] : []));
+    suggestions = signal([], ...(ngDevMode ? [{ debugName: "suggestions" }] : []));
+    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));
-    });
+    }, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
     filters = computed(() => {
         return (this.appStore
             .customizationJson()
@@ -10484,7 +10496,7 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
             alias: this.appStore.getColumnAlias(f.column),
             items: this.aggregations()?.find(a => a.column === f.column)?.items
         })) || []);
-    });
+    }, ...(ngDevMode ? [{ debugName: "filters" }] : []));
     text = '';
     constructor() {
         super();
@@ -10648,16 +10660,16 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
         // todo handle tree items
         return res;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerAdvancedFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: "pipe", type: TranslocoPipe, name: "transloco" }, { 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"] }] });
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerAdvancedFiltersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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"] }]
         }], ctorParameters: () => [] });
 
 class AdvancedSearchComponent {
-    article = input.required();
+    article = input.required(...(ngDevMode ? [{ debugName: "article" }] : []));
     destroyRef = inject(DestroyRef);
     labels = inject(AppStore).getLabels();
     applicationStore = inject(ApplicationStore);
@@ -10665,14 +10677,14 @@ class AdvancedSearchComponent {
     selectionStore = inject(SelectionStore);
     previewService = inject(PreviewService);
     queryParamsStore = inject(QueryParamsStore);
-    input = signal(getState(this.selectionStore).queryText || '');
+    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);
-    });
-    similarDocuments = signal([]);
+    }, ...(ngDevMode ? [{ debugName: "extracts" }] : []));
+    similarDocuments = signal([], ...(ngDevMode ? [{ debugName: "similarDocuments" }] : []));
     previewHighlights = computed(() => {
         const highlights = this.appStore.getWebServiceByType('preview')?.highlights
             ?.split(',')
@@ -10682,17 +10694,17 @@ class AdvancedSearchComponent {
             entity: highlight,
             metadata: this.article()[highlight]
         }));
-    });
-    navigation = signal(undefined);
-    hovering = signal(undefined);
-    hoverIndex = computed(() => (this.navigation()?.value === this.hovering() ? this.navigation().index : 0));
+    }, ...(ngDevMode ? [{ debugName: "previewHighlights" }] : []));
+    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);
-    });
-    loading = signal(true);
+    }, ...(ngDevMode ? [{ debugName: "hasLabels" }] : []));
+    loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     constructor() {
         this.previewService.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {
             switch (event) {
@@ -10746,10 +10758,10 @@ class AdvancedSearchComponent {
             this.scrollTo(entity, id);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "component", type: SourceComponent, selector: "source, Source", inputs: ["collection", "connector"] }, { kind: "directive", type: SelectArticleOnClickDirective, selector: "[appSelectArticleOnClick],[selectArticleOnClick]", inputs: ["article", "strategy"] }] });
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: AdvancedSearchComponent, 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"] }]
         }], ctorParameters: () => [] });
@@ -10778,14 +10790,14 @@ class DrawerPreviewComponent extends DrawerComponent {
         const { queryText } = getState(this.selectionStore);
         const { text } = getState(this.queryParamsStore);
         return queryText ?? text;
-    });
-    articleId = input.required();
-    previewData = signal(undefined);
-    article = computed(() => this.previewData()?.record);
-    inputs = computed(() => ({ previewData: this.previewData() }));
+    }, ...(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" }] : []));
     constructor(globalQueryName, destroyRef) {
         super();
         this.globalQueryName = globalQueryName;
@@ -10825,10 +10837,10 @@ class DrawerPreviewComponent extends DrawerComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", 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.0.0", 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", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: AdvancedSearchComponent, selector: "advanced-search", inputs: ["article"] }] });
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DrawerPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", 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"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{