@sinequa/atomic-angular 0.3.8 → 0.3.15

package/fesm2022/sinequa-atomic-angular.mjs

@@ -1544,7 +1544,7 @@ class QueryService {
     transloco = inject(TranslocoService);
     API_URL = `${globalConfig.backendUrl}/api/v1`;
     // Represents the last result of a search operation with getResult().
-    result = {};
+    result = signal({}, ...(ngDevMode ? [{ debugName: "result" }] : []));
     audit;
     /**
      * Performs a search query.
@@ -1558,20 +1558,21 @@ class QueryService {
         // if audit is set, always use it
         // if this.audit is set and audit is not set use this.audit
         // if this.audit is not set and audit is not set use default audit
-        const newAudit = audit ?? this.audit ?? { type: 'Search_Text', detail: { querytext: q?.text } };
+        const newAudit = audit ?? this.audit ?? { type: "Search_Text", detail: { querytext: q?.text } };
         const $auditRecord = { auditEvents: [newAudit] };
         this.audit = undefined; // reset this.audit after using it
+        this.result.set({}); // reset results for new search
         const { app } = globalConfig;
         const currentQuery = q ?? this.queryParamsStore.getQuery();
         const query = includeQueryParams ? { ...this.queryParamsStore.getQuery(), ...currentQuery } : currentQuery;
         // Check if the search query is empty and if empty searches are allowed
         // If not allowed, return an empty result
         // basket overrides this rule
-        if (!query.basket && query.action !== 'open') {
-            const allowEmptySearch = this.appStore.allowEmptySearch(query?.name || '');
-            if (allowEmptySearch === false && query?.text === '') {
-                warn('QueryService.search: Empty search query is not allowed. Returning empty result.');
-                notify.warning(this.transloco.translate('searches.emptySearch'));
+        if (!query.basket && query.action !== "open") {
+            const allowEmptySearch = this.appStore.allowEmptySearch(query?.name || "");
+            if (allowEmptySearch === false && query?.text === "") {
+                warn("QueryService.search: Empty search query is not allowed. Returning empty result.");
+                notify.warning(this.transloco.translate("searches.emptySearch"));
                 return of({ records: [] });
             }
         }
@@ -1580,8 +1581,8 @@ class QueryService {
             query,
             $auditRecord
         };
-        return this.http.post(this.API_URL + '/query', body).pipe(catchError(err => {
-            error('queryService.getResults failure - error: ', err);
+        return this.http.post(this.API_URL + "/query", body).pipe(catchError((err) => {
+            error("queryService.getResults failure - error: ", err);
             return of({});
         }), map((result) => {
             // update $hasMore flag
@@ -1599,19 +1600,21 @@ class QueryService {
                 }
             });
             return result;
-        }), map(result => {
-            result.records?.map((article) => Object.assign(article, { value: article.title, type: 'default' }));
+        }), map((result) => {
+            result.records?.map((article) => Object.assign(article, { value: article.title, type: "default" }));
             return result;
-        }), map(result => {
+        }), map((result) => {
             const r = {
                 ...result,
-                nextPage: result.page !== undefined && result.page < Math.ceil(result.rowCount / result.pageSize) ? result.page + 1 : undefined,
+                nextPage: result.page !== undefined && result.page < Math.ceil(result.rowCount / result.pageSize)
+                    ? result.page + 1
+                    : undefined,
                 previousPage: result.page !== undefined && result.page > 1 ? result.page - 1 : undefined
             };
             return r;
-        }), tap(response => {
-            this.result = response;
-            info('queryService.getResults success - data: ', response);
+        }), tap((response) => {
+            this.result.set(response);
+            info("queryService.getResults success - data: ", response);
         }));
     }
     /**
@@ -1622,7 +1625,7 @@ class QueryService {
      * @returns An Observable that emits an array of Result objects.
      */
     bulkSearch(q, audit) {
-        const { app = '' } = globalConfig;
+        const { app = "" } = globalConfig;
         const body = {
             methods: [],
             propagateErrors: true,
@@ -1630,15 +1633,15 @@ class QueryService {
         };
         for (const query of q) {
             body.methods.push({
-                method: 'query',
+                method: "query",
                 app,
                 query
             });
         }
-        return this.http.post(this.API_URL + '/multi', body).pipe(catchError(err => {
-            error('queryService.bulkSearch failure - error: ', err);
+        return this.http.post(this.API_URL + "/multi", body).pipe(catchError((err) => {
+            error("queryService.bulkSearch failure - error: ", err);
             return EMPTY;
-        }), map(response => {
+        }), map((response) => {
             // update $hasMore flag
             response.results.forEach((result) => {
                 result.aggregations.forEach((agg) => {
@@ -1656,11 +1659,13 @@ class QueryService {
                 });
             });
             return response.results;
-        }), map(results => {
-            results.forEach(result => result.records?.map((article) => Object.assign(article, { value: article.title, type: 'default' })));
+        }), map((results) => {
+            results.forEach((result) => {
+                result.records?.map((article) => Object.assign(article, { value: article.title, type: "default" }));
+            });
             return results;
-        }), map(results => {
-            return results.map(result => {
+        }), map((results) => {
+            return results.map((result) => {
                 const r = {
                     ...result,
                     nextPage: result.page < Math.ceil(result.rowCount / result.pageSize) ? result.page + 1 : undefined,
@@ -1670,8 +1675,8 @@ class QueryService {
             });
         }), 
         // map(response => ResultsSchema.parse(response) as T),
-        tap(response => {
-            info('queryService.bulkSearch success - data: ', response);
+        tap((response) => {
+            info("queryService.bulkSearch success - data: ", response);
         }));
     }
     /**
@@ -1681,21 +1686,21 @@ class QueryService {
      */
     gotoPage(page) {
         const audit = {
-            type: 'Search_GotoPage',
+            type: "Search_GotoPage",
             detail: {
                 page: page,
-                fromresultid: this.result ? this.result.id : null
+                fromresultid: this.result()?.id ?? null
             }
         };
         this.queryParamsStore.patch({ page }, audit);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QueryService, providedIn: 'root' });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QueryService, providedIn: "root" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: QueryService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: "root"
                 }]
         }] });
 
@@ -3443,7 +3448,7 @@ class PreviewService {
         const query = this.queryParamsStore.getQuery();
         try {
             const detail = this.getAuditPreviewDetail(article.id, query);
-            const result = this.queryService.result;
+            const result = this.queryService.result();
             this.auditService.notifyDocument("Click_ResultLink", article, result || detail.resultid || "", {
                 querytext: detail.querytext,
                 querylang: detail.querylang,
@@ -3573,7 +3578,7 @@ class PreviewService {
         this.sendMessage({ action: "highlight", highlights });
     }
     getAuditPreviewDetail(id, q) {
-        const results = this.queryService.result;
+        const results = this.queryService.result();
         const queryLanguage = results?.queryAnalysis?.queryLanguage ||
             q?.questionLanguage ||
             (q.name && this.appStore.getQueryByName(q.name)?.questionLanguage) ||
@@ -4570,7 +4575,14 @@ function withQueryParamsFeatures() {
          * @returns Query The constructed query object.
          */
         getQuery() {
-            const { filters: allFilters = [], sort, tab, basket, text: queryText = "", name = appStore.getDefaultQuery()?.name || "_query", spellingCorrectionMode } = getState(store);
+            const { filters: allFilters = [], sort, tab, basket, text: queryText = "", spellingCorrectionMode } = getState(store);
+            // check if a query name is defined
+            // if not, try to get it from the route data or from the default query in the app store
+            let { name } = getState(store);
+            if (!name) {
+                const routeData = route.snapshot.firstChild?.children[0]?.data;
+                name = routeData ? routeData["queryName"] : appStore.getDefaultQuery()?.name || "";
+            }
             let text = queryText;
             // remove concepts filters from the query to add them in the query expression
             const [conceptsFilters] = allFilters.filter((f) => f.field === "concepts");
@@ -6742,6 +6754,15 @@ class NavbarTabsComponent {
      * This works only if tabSearch is enabled in the administration panel.
      */
     showCount = input(true, ...(ngDevMode ? [{ debugName: "showCount", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /**
+     * The base path for the search routes.
+     * This value is provided as an input property and defaults to "search".
+     *
+     * @remarks
+     * This path is used to find the corresponding route configuration and its children
+     * to populate the tabs in the navbar.
+     */
+    path = input("search", ...(ngDevMode ? [{ debugName: "path" }] : []));
     searchText = computed(() => {
         const state = getState(this.queryParamsStore);
         return state.text || "";
@@ -6762,8 +6783,9 @@ class NavbarTabsComponent {
     }, ...(ngDevMode ? [{ debugName: "currentPath" }] : []));
     // create tabs from the search routes
     tabs = computed(() => {
+        const result = this.queryService.result();
         const r = this.router.config
-            .find((item) => item.path === "search")
+            .find((item) => item.path === this.path())
             ?.children?.filter((c) => c.path !== "**")
             .map((child) => {
             const data = child.data;
@@ -6771,11 +6793,14 @@ class NavbarTabsComponent {
                 display: data?.display || child.path || "",
                 wsQueryTab: data?.wsQueryTab || child.path || "",
                 path: child.path || "",
-                routerLink: `/search/${child.path}`,
+                routerLink: `/${this.path()}/${child.path}`,
                 icon: data?.icon || "",
                 queryName: data?.queryName,
+                // get the count from the last search result if showCount is true and queryName matches
                 count: this.showCount()
-                    ? this.queryService.result?.tabs?.find((tab) => tab.name === (data?.wsQueryTab || child.path))?.count
+                    ? result.queryName === data?.queryName
+                        ? result.tabs?.find((tab) => tab.name === (data?.wsQueryTab || child.path))?.count
+                        : undefined
                     : undefined
             };
         }) ?? [];
@@ -6787,7 +6812,7 @@ class NavbarTabsComponent {
         this.drawerStack.closeAll();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NavbarTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NavbarTabsComponent, isStandalone: true, selector: "navbar-tabs", inputs: { showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NavbarTabsComponent, isStandalone: true, selector: "navbar-tabs", inputs: { showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <!-- do not display the tabs if there are no tabs -->
     @if (tabs().length > 0) {
       <div overflowManager class="relative col-span-2 col-start-2 row-start-2 flex" (count)="visibleTabCount.set($event)">
@@ -6931,7 +6956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     }
   `
                 }]
-        }], propDecorators: { showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }] } });
+        }], propDecorators: { showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }] } });
 
 class NoResultComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NoResultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -7068,7 +7093,7 @@ class PreviewNavigator {
     <button
       variant="ghost"
       size="icon"
-      class="dark:text-background dark:hover:bg-background/10"
+      class="dark:text-white dark:hover:bg-background/10"
       aria-label="Page précédente"
       (click)="preview.firstPage()"
       [disabled]="isFirst()">
@@ -7077,19 +7102,19 @@ class PreviewNavigator {
     <button
       variant="ghost"
       size="icon"
-      class="dark:text-background dark:hover:bg-background/10"
+      class="dark:text-white dark:hover:bg-background/10"
       aria-label="Page précédente"
       (click)="preview.prevPage()"
       [disabled]="isFirst()">
       <chevron-left />
     </button>
 
-    <div class="dark:text-background inline-flex items-center gap-1 px-1 tabular-nums">
+    <div class="dark:text-white inline-flex items-center gap-1 px-1 tabular-nums">
       <input
         #page
         type="text"
         decoration="outline"
-        class="dark:hover:bg-background/10 dark:text-background dark:border-foreground w-14 py-0.5 text-center invalid:bg-red-200"
+        class="dark:hover:bg-background/10 dark:text-white dark:border-foreground w-14 py-0.5 text-center invalid:bg-red-200"
         [min]="1"
         [max]="total() || 1"
         [value]="current()"
@@ -7104,7 +7129,7 @@ class PreviewNavigator {
     <button
       variant="ghost"
       size="icon"
-      class="dark:text-background dark:hover:bg-background/10"
+      class="dark:text-white dark:hover:bg-background/10"
       aria-label="Page suivante"
       (click)="preview.nextPage()"
       [disabled]="isLast()">
@@ -7113,7 +7138,7 @@ class PreviewNavigator {
     <button
       variant="ghost"
       size="icon"
-      class="dark:text-background dark:hover:bg-background/10"
+      class="dark:text-white dark:hover:bg-background/10"
       aria-label="Page suivante"
       (click)="preview.lastPage()"
       [disabled]="isLast()">
@@ -7137,7 +7162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     <button
       variant="ghost"
       size="icon"
-      class="dark:text-background dark:hover:bg-background/10"
+      class="dark:text-white dark:hover:bg-background/10"
       aria-label="Page précédente"
       (click)="preview.firstPage()"
       [disabled]="isFirst()">
@@ -7146,19 +7171,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     <button
       variant="ghost"
       size="icon"
-      class="dark:text-background dark:hover:bg-background/10"
+      class="dark:text-white dark:hover:bg-background/10"
       aria-label="Page précédente"
       (click)="preview.prevPage()"
       [disabled]="isFirst()">
       <chevron-left />
     </button>
 
-    <div class="dark:text-background inline-flex items-center gap-1 px-1 tabular-nums">
+    <div class="dark:text-white inline-flex items-center gap-1 px-1 tabular-nums">
       <input
         #page
         type="text"
         decoration="outline"
-        class="dark:hover:bg-background/10 dark:text-background dark:border-foreground w-14 py-0.5 text-center invalid:bg-red-200"
+        class="dark:hover:bg-background/10 dark:text-white dark:border-foreground w-14 py-0.5 text-center invalid:bg-red-200"
         [min]="1"
         [max]="total() || 1"
         [value]="current()"
@@ -7173,7 +7198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     <button
       variant="ghost"
       size="icon"
-      class="dark:text-background dark:hover:bg-background/10"
+      class="dark:text-white dark:hover:bg-background/10"
       aria-label="Page suivante"
       (click)="preview.nextPage()"
       [disabled]="isLast()">
@@ -7182,7 +7207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     <button
       variant="ghost"
       size="icon"
-      class="dark:text-background dark:hover:bg-background/10"
+      class="dark:text-white dark:hover:bg-background/10"
       aria-label="Page suivante"
       (click)="preview.lastPage()"
       [disabled]="isLast()">
@@ -10666,6 +10691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
 class AggregationComponent {
     cn = cn;
+    searchInput = viewChild("searchInput", ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
     /* stores */
     aggregationsStore = inject(AggregationsStore);
     queryParamsStore = inject(QueryParamsStore);
@@ -10824,6 +10850,14 @@ class AggregationComponent {
         effect(() => {
             sessionStorage.removeItem(`agg-${this.column()}`);
         });
+        effect(() => {
+            // focus the search input when expanded
+            if (this.searchInput()?.nativeElement && this.expanded() !== null) {
+                setTimeout(() => {
+                    this.searchInput()?.nativeElement.focus();
+                }, 0);
+            }
+        });
         effect(async () => {
             if (this.debouncedSearchText() === "" || this.aggregation() === null) {
                 this.suggests.set([]);
@@ -11268,7 +11302,7 @@ class AggregationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AggregationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AggregationComponent, isStandalone: true, selector: "Aggregation, aggregation", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\",class())" } }, ngImport: i0, template: "<details (toggle)=\"onToggle($event)\" [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary [class.cursor-pointer]=\"collapsible() && !isEmpty()\" [class.text-muted-foreground]=\"isEmpty()\"\n    class=\"m-0 mt-1 flex gap-1 h-8 w-full select-none items-center pl-1 font-semibold\" (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @if (aggregation()?.icon) {\n      <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"grow\">{{ aggregation()?.display | syslang | transloco }}</span>\n    </ng-content>\n\n    @if (showFiltersCount() && filtersCount() > 0) {\n    <!-- count -->\n    <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\n      {{ filtersCount() }}\n    </Badge>\n    }\n    <!-- apply filter block -->\n    @if (!isCollapsed()) {\n      <ButtonGroup>\n      @if (hasFilters()) {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.clearFilters' | transloco\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\" (click)=\"$event.stopPropagation(); clear()\">\n          <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\n        </button>\n        }\n        @if (selection()) {\n        <button variant=\"outline\" size=\"xs\" [attr.title]=\"'filters.applyFilters' | transloco\"\n          [attr.aria-label]=\"'filters.applyFilters' | transloco\" (click)=\"$event.stopPropagation(); apply()\" class=\"px-1 h-4\">\n         <FilterIcon class=\"size-4\"/>\n         {{ 'filters.apply' | transloco }}\n        </button>\n        }\n\n        <!-- select / unselect all -->\n        @if (isAllSelected()) {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.unselectAllFilters' | transloco\"\n          [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\" (click)=\"$event.stopPropagation(); unselectAll()\">\n          <i class=\"fa-fw far fa-check-square\"></i>\n        </button>\n        } @else {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.selectAllFilters' | transloco\"\n          [attr.aria-label]=\"'filters.selectAllFilters' | transloco\" (click)=\"$event.stopPropagation(); selectAll()\">\n          <i class=\"fa-fw far fa-square\"></i>\n        </button>\n        }\n      </ButtonGroup>\n    }\n\n    @if (collapsible()) {\n    <button variant=\"none\" title=\"Open/Close\"\n      class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevronright />\n    </button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  @if (aggregation()?.searchable && items().length) {\n    <InputGroup class=\"group/item mt-1\">\n      <input input-group type=\"text\" [attr.placeholder]=\"'search' | transloco\" [(ngModel)]=\"searchText\" class=\"mt-1\"/>\n      <InputGroupAddon>\n        <SearchIcon class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\n    </InputGroupAddon>\n  </InputGroup>\n  <!-- <input type=\"text\" [placeholder]=\"'search' | transloco\" [(ngModel)]=\"searchText\" class=\"mt-1\" /> -->\n  }\n\n  <ul class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] snap-y snap-start overflow-auto\" role=\"list\"\n    [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n    @for (item of items(); track $index) {\n    <AggregationItem [node]=\"item\" [path]=\"[]\" [field]=\"aggregation()?.column\" (onSelect)=\"select()\"\n      (onOpen)=\"open($event)\" (onFilter)=\"quickFilter($event)\" />\n    }\n  </ul>\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\n  <button decoration=\"underline\" class=\"mt-1 flex w-full justify-center\" [attr.aria-label]=\"'loadMore' | transloco\"\n    (click)=\"loadMore()\">\n    {{ 'loadMore' | transloco }}\n  </button>\n  }\n</details>\n", styles: ["AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, 0)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: ButtonComponent, selector: "button,a[role=\"button\"]", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: AggregationItemComponent, selector: "aggregation-item, AggregationItem, aggregationitem", inputs: ["node", "path", "field"], outputs: ["onSelect", "onOpen", "onFilter"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "directive", type: ButtonGroup, selector: "button-group, ButtonGroup", inputs: ["class", "orientation"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AggregationComponent, isStandalone: true, selector: "Aggregation, aggregation", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"block h-[inherit] max-h-[inherit]\",class())" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<details (toggle)=\"onToggle($event)\" [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary [class.cursor-pointer]=\"collapsible() && !isEmpty()\" [class.text-muted-foreground]=\"isEmpty()\"\n    class=\"m-0 mt-1 flex gap-1 h-8 w-full select-none items-center pl-1 font-semibold\" (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @if (aggregation()?.icon) {\n      <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"grow\">{{ aggregation()?.display | syslang | transloco }}</span>\n    </ng-content>\n\n    @if (showFiltersCount() && filtersCount() > 0) {\n    <!-- count -->\n    <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\n      {{ filtersCount() }}\n    </Badge>\n    }\n    <!-- apply filter block -->\n    @if (!isCollapsed()) {\n      <ButtonGroup>\n      @if (hasFilters()) {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.clearFilters' | transloco\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\" (click)=\"$event.stopPropagation(); clear()\">\n          <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\n        </button>\n        }\n        @if (selection()) {\n        <button variant=\"primary\" size=\"xs\" [attr.title]=\"'filters.applyFilters' | transloco\"\n          [attr.aria-label]=\"'filters.applyFilters' | transloco\" (click)=\"$event.stopPropagation(); apply()\" class=\"px-1 h-4\">\n         <FilterIcon class=\"size-4\"/>\n         {{ 'filters.apply' | transloco }}\n        </button>\n        }\n\n        <!-- select / unselect all -->\n        @if (isAllSelected()) {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.unselectAllFilters' | transloco\"\n          [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\" (click)=\"$event.stopPropagation(); unselectAll()\">\n          <i class=\"fa-fw far fa-check-square\"></i>\n        </button>\n        } @else {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.selectAllFilters' | transloco\"\n          [attr.aria-label]=\"'filters.selectAllFilters' | transloco\" (click)=\"$event.stopPropagation(); selectAll()\">\n          <i class=\"fa-fw far fa-square\"></i>\n        </button>\n        }\n      </ButtonGroup>\n    }\n\n    @if (collapsible()) {\n    <button variant=\"none\" title=\"Open/Close\"\n      class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevronright />\n    </button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  @if (aggregation()?.searchable && items().length) {\n    <InputGroup class=\"group/item mt-1\">\n      <input #searchInput input-group id=\"aggregation-input-{{column()}}\" type=\"text\" [attr.placeholder]=\"'search' | transloco\" [(ngModel)]=\"searchText\" class=\"mt-1\"/>\n      <InputGroupAddon>\n        <SearchIcon class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\n    </InputGroupAddon>\n  </InputGroup>\n  }\n\n  <ul class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] snap-y snap-start overflow-auto\" role=\"list\"\n    [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n    @for (item of items(); track $index) {\n    <AggregationItem [node]=\"item\" [path]=\"[]\" [field]=\"aggregation()?.column\" (onSelect)=\"select()\"\n      (onOpen)=\"open($event)\" (onFilter)=\"quickFilter($event)\" />\n    }\n  </ul>\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\n  <button decoration=\"underline\" class=\"mt-1 flex w-full justify-center\" [attr.aria-label]=\"'loadMore' | transloco\"\n    (click)=\"loadMore()\">\n    {{ 'loadMore' | transloco }}\n  </button>\n  }\n</details>\n", styles: ["AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, 0)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: ButtonComponent, selector: "button,a[role=\"button\"]", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: AggregationItemComponent, selector: "aggregation-item, AggregationItem, aggregationitem", inputs: ["node", "path", "field"], outputs: ["onSelect", "onOpen", "onFilter"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon", inputs: ["class"] }, { kind: "directive", type: ButtonGroup, selector: "button-group, ButtonGroup", inputs: ["class", "orientation"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AggregationComponent, decorators: [{
             type: Component,
@@ -11289,8 +11323,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         FilterIcon
                     ], standalone: true, host: {
                         "[class]": 'cn("block h-[inherit] max-h-[inherit]",class())'
-                    }, template: "<details (toggle)=\"onToggle($event)\" [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary [class.cursor-pointer]=\"collapsible() && !isEmpty()\" [class.text-muted-foreground]=\"isEmpty()\"\n    class=\"m-0 mt-1 flex gap-1 h-8 w-full select-none items-center pl-1 font-semibold\" (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @if (aggregation()?.icon) {\n      <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"grow\">{{ aggregation()?.display | syslang | transloco }}</span>\n    </ng-content>\n\n    @if (showFiltersCount() && filtersCount() > 0) {\n    <!-- count -->\n    <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\n      {{ filtersCount() }}\n    </Badge>\n    }\n    <!-- apply filter block -->\n    @if (!isCollapsed()) {\n      <ButtonGroup>\n      @if (hasFilters()) {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.clearFilters' | transloco\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\" (click)=\"$event.stopPropagation(); clear()\">\n          <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\n        </button>\n        }\n        @if (selection()) {\n        <button variant=\"outline\" size=\"xs\" [attr.title]=\"'filters.applyFilters' | transloco\"\n          [attr.aria-label]=\"'filters.applyFilters' | transloco\" (click)=\"$event.stopPropagation(); apply()\" class=\"px-1 h-4\">\n         <FilterIcon class=\"size-4\"/>\n         {{ 'filters.apply' | transloco }}\n        </button>\n        }\n\n        <!-- select / unselect all -->\n        @if (isAllSelected()) {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.unselectAllFilters' | transloco\"\n          [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\" (click)=\"$event.stopPropagation(); unselectAll()\">\n          <i class=\"fa-fw far fa-check-square\"></i>\n        </button>\n        } @else {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.selectAllFilters' | transloco\"\n          [attr.aria-label]=\"'filters.selectAllFilters' | transloco\" (click)=\"$event.stopPropagation(); selectAll()\">\n          <i class=\"fa-fw far fa-square\"></i>\n        </button>\n        }\n      </ButtonGroup>\n    }\n\n    @if (collapsible()) {\n    <button variant=\"none\" title=\"Open/Close\"\n      class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevronright />\n    </button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  @if (aggregation()?.searchable && items().length) {\n    <InputGroup class=\"group/item mt-1\">\n      <input input-group type=\"text\" [attr.placeholder]=\"'search' | transloco\" [(ngModel)]=\"searchText\" class=\"mt-1\"/>\n      <InputGroupAddon>\n        <SearchIcon class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\n    </InputGroupAddon>\n  </InputGroup>\n  <!-- <input type=\"text\" [placeholder]=\"'search' | transloco\" [(ngModel)]=\"searchText\" class=\"mt-1\" /> -->\n  }\n\n  <ul class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] snap-y snap-start overflow-auto\" role=\"list\"\n    [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n    @for (item of items(); track $index) {\n    <AggregationItem [node]=\"item\" [path]=\"[]\" [field]=\"aggregation()?.column\" (onSelect)=\"select()\"\n      (onOpen)=\"open($event)\" (onFilter)=\"quickFilter($event)\" />\n    }\n  </ul>\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\n  <button decoration=\"underline\" class=\"mt-1 flex w-full justify-center\" [attr.aria-label]=\"'loadMore' | transloco\"\n    (click)=\"loadMore()\">\n    {{ 'loadMore' | transloco }}\n  </button>\n  }\n</details>\n", styles: ["AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, 0)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
+                    }, template: "<details (toggle)=\"onToggle($event)\" [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary [class.cursor-pointer]=\"collapsible() && !isEmpty()\" [class.text-muted-foreground]=\"isEmpty()\"\n    class=\"m-0 mt-1 flex gap-1 h-8 w-full select-none items-center pl-1 font-semibold\" (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @if (aggregation()?.icon) {\n      <i class=\"fa-fw {{ aggregation()?.icon }} mr-1\" aria-hidden=\"true\"></i>\n      }\n      <span class=\"grow\">{{ aggregation()?.display | syslang | transloco }}</span>\n    </ng-content>\n\n    @if (showFiltersCount() && filtersCount() > 0) {\n    <!-- count -->\n    <Badge size=\"xs\" class=\"ml-1 pb-0.5\">\n      {{ filtersCount() }}\n    </Badge>\n    }\n    <!-- apply filter block -->\n    @if (!isCollapsed()) {\n      <ButtonGroup>\n      @if (hasFilters()) {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.clearFilters' | transloco\"\n          [attr.aria-label]=\"'filters.clearFilters' | transloco\" (click)=\"$event.stopPropagation(); clear()\">\n          <i class=\"fa-fw far fa-filter-circle-xmark\"></i>\n        </button>\n        }\n        @if (selection()) {\n        <button variant=\"primary\" size=\"xs\" [attr.title]=\"'filters.applyFilters' | transloco\"\n          [attr.aria-label]=\"'filters.applyFilters' | transloco\" (click)=\"$event.stopPropagation(); apply()\" class=\"px-1 h-4\">\n         <FilterIcon class=\"size-4\"/>\n         {{ 'filters.apply' | transloco }}\n        </button>\n        }\n\n        <!-- select / unselect all -->\n        @if (isAllSelected()) {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.unselectAllFilters' | transloco\"\n          [attr.aria-label]=\"'filters.unselectAllFilters' | transloco\" (click)=\"$event.stopPropagation(); unselectAll()\">\n          <i class=\"fa-fw far fa-check-square\"></i>\n        </button>\n        } @else {\n        <button variant=\"outline\" size=\"icon\" class=\"size-6\" [attr.title]=\"'filters.selectAllFilters' | transloco\"\n          [attr.aria-label]=\"'filters.selectAllFilters' | transloco\" (click)=\"$event.stopPropagation(); selectAll()\">\n          <i class=\"fa-fw far fa-square\"></i>\n        </button>\n        }\n      </ButtonGroup>\n    }\n\n    @if (collapsible()) {\n    <button variant=\"none\" title=\"Open/Close\"\n      class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n      <chevronright />\n    </button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  @if (aggregation()?.searchable && items().length) {\n    <InputGroup class=\"group/item mt-1\">\n      <input #searchInput input-group id=\"aggregation-input-{{column()}}\" type=\"text\" [attr.placeholder]=\"'search' | transloco\" [(ngModel)]=\"searchText\" class=\"mt-1\"/>\n      <InputGroupAddon>\n        <SearchIcon class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\n    </InputGroupAddon>\n  </InputGroup>\n  }\n\n  <ul class=\"scrollbar-thin max-h-[calc(var(--height,100%)-100px)] snap-y snap-start overflow-auto\" role=\"list\"\n    [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n    @for (item of items(); track $index) {\n    <AggregationItem [node]=\"item\" [path]=\"[]\" [field]=\"aggregation()?.column\" (onSelect)=\"select()\"\n      (onOpen)=\"open($event)\" (onFilter)=\"quickFilter($event)\" />\n    }\n  </ul>\n  @if (aggregation()?.$hasMore && this.searchedItems().length === 0) {\n  <button decoration=\"underline\" class=\"mt-1 flex w-full justify-center\" [attr.aria-label]=\"'loadMore' | transloco\"\n    (click)=\"loadMore()\">\n    {{ 'loadMore' | transloco }}\n  </button>\n  }\n</details>\n", styles: ["AggregationItem:has(+AggregationItem){margin-bottom:var(--agg-item-gap, 0)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchInput: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
 
 /**
  * Injection token that indicates whether custom date ranges are allowed.
@@ -11627,7 +11661,8 @@ class FilterButtonComponent {
         [variant]="variant()"
         class="group-open:border-foreground/50 group-open:border"
         [attr.data-disabled]="filter().disabled"
-        [disabled]="filter().disabled || null">
+        [disabled]="filter().disabled || null"
+        >
         <!-- display the filter icon if set -->
         @if (filter().icon) {
           <i class="fa-fw {{ filter().icon }} " aria-hidden="true"></i>
@@ -11651,11 +11686,12 @@ class FilterButtonComponent {
         }
       </button>
 
-      <PopoverContent
+      <PopoverContent #contentRef="popoverContent"
         class="min-w-fit w-max max-w-[90vw]"
         [position]="position()"
         [offset]="offset()"
       >
+      @if(contentRef.isVisible) {
         @if (isDate(filter().column)) {
           <DateFilter
             class="*:details-content:[--height:19lh] w-max max-w-80"
@@ -11671,9 +11707,10 @@ class FilterButtonComponent {
             [column]="filter().column"
             id="filter-{{ filter().column }}" />
         }
+      }
       </PopoverContent>
     </Popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button,a[role=\"button\"]", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: PopoverComponent, selector: "popover, Popover", inputs: ["disabled", "closeOnScroll"], outputs: ["closed"] }, { kind: "directive", type: PopoverContentComponent, selector: "popover-content, PopoverContent, popovercontent", inputs: ["position", "keepOpen", "class", "offset"] }, { kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "searchText"], outputs: ["onSelect", "searchTextChange"] }, { kind: "component", type: DateComponent, selector: "date-filter,DateFilter", inputs: ["title", "displayEmptyDistributionIntervals"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }, { kind: "pipe", type: OperatorPipe, name: "operator" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button,a[role=\"button\"]", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: PopoverComponent, selector: "popover, Popover", inputs: ["disabled", "closeOnScroll"], outputs: ["closed"] }, { kind: "directive", type: PopoverContentComponent, selector: "popover-content, PopoverContent, popovercontent", inputs: ["position", "keepOpen", "class", "offset"], exportAs: ["popoverContent"] }, { kind: "component", type: AggregationComponent, selector: "Aggregation, aggregation", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "searchText"], outputs: ["onSelect", "searchTextChange"] }, { kind: "component", type: DateComponent, selector: "date-filter,DateFilter", inputs: ["title", "displayEmptyDistributionIntervals"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }, { kind: "pipe", type: OperatorPipe, name: "operator" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterButtonComponent, decorators: [{
             type: Component,
@@ -11697,7 +11734,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         [variant]="variant()"
         class="group-open:border-foreground/50 group-open:border"
         [attr.data-disabled]="filter().disabled"
-        [disabled]="filter().disabled || null">
+        [disabled]="filter().disabled || null"
+        >
         <!-- display the filter icon if set -->
         @if (filter().icon) {
           <i class="fa-fw {{ filter().icon }} " aria-hidden="true"></i>
@@ -11721,11 +11759,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         }
       </button>
 
-      <PopoverContent
+      <PopoverContent #contentRef="popoverContent"
         class="min-w-fit w-max max-w-[90vw]"
         [position]="position()"
         [offset]="offset()"
       >
+      @if(contentRef.isVisible) {
         @if (isDate(filter().column)) {
           <DateFilter
             class="*:details-content:[--height:19lh] w-max max-w-80"
@@ -11741,6 +11780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             [column]="filter().column"
             id="filter-{{ filter().column }}" />
         }
+      }
       </PopoverContent>
     </Popover>
   `,
@@ -11928,11 +11968,13 @@ class MoreButtonComponent {
         }
       </button>
 
-      <PopoverContent [position]="position()" class="min-w-max">
+      <PopoverContent #contentRef="popoverContent" [position]="position()" class="min-w-max">
+        @if(contentRef.isVisible) {
         <More [count]="count()" [includedFilters]="includedFilters()" [excludedFilters]="excludedFilters()" [aggregations]="aggregations()" class="block h-full w-full max-w-80 [--height:55vh] min-w-40 overflow-hidden" />
+        }
       </PopoverContent>
     </Popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button,a[role=\"button\"]", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: PopoverComponent, selector: "popover, Popover", inputs: ["disabled", "closeOnScroll"], outputs: ["closed"] }, { kind: "directive", type: PopoverContentComponent, selector: "popover-content, PopoverContent, popovercontent", inputs: ["position", "keepOpen", "class", "offset"] }, { kind: "component", type: MoreComponent, selector: "more, More", inputs: ["count", "includedFilters", "excludedFilters", "aggregations"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button,a[role=\"button\"]", inputs: ["class", "variant", "decoration", "size"] }, { kind: "component", type: PopoverComponent, selector: "popover, Popover", inputs: ["disabled", "closeOnScroll"], outputs: ["closed"] }, { kind: "directive", type: PopoverContentComponent, selector: "popover-content, PopoverContent, popovercontent", inputs: ["position", "keepOpen", "class", "offset"], exportAs: ["popoverContent"] }, { kind: "component", type: MoreComponent, selector: "more, More", inputs: ["count", "includedFilters", "excludedFilters", "aggregations"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MoreButtonComponent, decorators: [{
             type: Component,
@@ -11956,8 +11998,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         }
       </button>
 
-      <PopoverContent [position]="position()" class="min-w-max">
+      <PopoverContent #contentRef="popoverContent" [position]="position()" class="min-w-max">
+        @if(contentRef.isVisible) {
         <More [count]="count()" [includedFilters]="includedFilters()" [excludedFilters]="excludedFilters()" [aggregations]="aggregations()" class="block h-full w-full max-w-80 [--height:55vh] min-w-40 overflow-hidden" />
+        }
       </PopoverContent>
     </Popover>
   `
@@ -12412,22 +12456,26 @@ class MultiSelectLabelsComponent {
     labelsField = input(...(ngDevMode ? [undefined, { debugName: "labelsField" }] : []));
     anchor = signal(`--${guid()}`, ...(ngDevMode ? [{ debugName: "anchor" }] : []));
     suggestedLabels = signal([], ...(ngDevMode ? [{ debugName: "suggestedLabels" }] : []));
-    labelInput = model('', ...(ngDevMode ? [{ debugName: "labelInput" }] : []));
+    labelInput = model("", ...(ngDevMode ? [{ debugName: "labelInput" }] : []));
     debouncedLabelInput = debouncedSignal(this.labelInput, DEBOUNCE_DELAY);
-    popover = viewChild('LabelsPopover', ...(ngDevMode ? [{ debugName: "popover" }] : []));
+    popover = viewChild("LabelsPopover", ...(ngDevMode ? [{ debugName: "popover" }] : []));
     popoverElement = computed(() => this.popover()?.nativeElement, ...(ngDevMode ? [{ debugName: "popoverElement" }] : []));
     labels = signal([], ...(ngDevMode ? [{ debugName: "labels" }] : []));
+    hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
     id = signal(`labels-form-${guid()}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
     constructor() {
         afterEveryRender(() => {
             this.popoverElement().style.positionAnchor = this.anchor();
         });
         effect(() => {
-            if (!this.article())
+            const article = this.article();
+            const labelsField = this.labelsField();
+            if (!article)
                 return;
-            if (!this.labelsField())
+            if (!labelsField)
                 return;
-            this.labels.set(this.article()[this.labelsField()] || []);
+            const labels = article[labelsField];
+            this.labels.set(labels || []);
         });
         effect(() => {
             this.fetchLabels(this.debouncedLabelInput(), this.isPublic());
@@ -12445,14 +12493,14 @@ class MultiSelectLabelsComponent {
         event.stopImmediatePropagation();
         if (this.labelInput().length === 0)
             return;
-        if (event.key === 'Enter') {
+        if (event.key === "Enter") {
             this.addLabel(this.labelInput(), this.isPublic());
-            this.labelInput.set('');
+            this.labelInput.set("");
         }
     }
     async fetchLabels(text, isPublic) {
         const labels = (await withFetch(() => fetchLabels(text, isPublic), this.injector)) || [];
-        const unappliedLabels = labels.filter(label => !this.labels().some(l => l === label));
+        const unappliedLabels = labels.filter((label) => !this.labels().some((l) => l === label));
         this.suggestedLabels.set(unappliedLabels);
         unappliedLabels.length ? this.popoverElement().showPopover() : this.popoverElement().hidePopover();
     }
@@ -12470,12 +12518,21 @@ class MultiSelectLabelsComponent {
      * @returns A promise that resolves once the label has been added and the article updated.
      */
     async addLabel(label, isPublic) {
-        const currentLabels = this.labels();
-        this.labels.set([...currentLabels, label]);
-        await labels.add([label], [this.article().id], isPublic);
-        this.updateArticleWithLabels();
-        this.labelInput.set('');
-        this.suggestedLabels.set([]);
+        this.hasError.set(false);
+        const article = this.article();
+        if (!article)
+            return;
+        try {
+            await labels.add([label], [article.id], isPublic);
+            const currentLabels = this.labels();
+            this.labels.set([...currentLabels, label]);
+            this.updateArticleWithLabels();
+            this.labelInput.set("");
+            this.suggestedLabels.set([]);
+        }
+        catch {
+            this.hasError.set(true);
+        }
     }
     /**
      * Removes a label from the current list of labels and updates the associated article.
@@ -12485,9 +12542,18 @@ class MultiSelectLabelsComponent {
      * @returns A promise that resolves once the label is removed and the article is updated.
      */
     async removeLabel(label, isPublic) {
-        this.labels.set(this.labels().filter(l => l !== label));
-        await labels.remove([label], [this.article().id], isPublic);
-        this.updateArticleWithLabels();
+        this.hasError.set(false);
+        const article = this.article();
+        if (!article)
+            return;
+        try {
+            await labels.remove([label], [article.id], isPublic);
+            this.labels.set(this.labels().filter((l) => l !== label));
+            this.updateArticleWithLabels();
+        }
+        catch {
+            this.hasError.set(true);
+        }
     }
     /**
      * Updates the article object by assigning the current labels to the specified labels field.
@@ -12499,13 +12565,18 @@ class MultiSelectLabelsComponent {
      * Ensure that `this.article`, `this.labelsField`, and `this.labels` return valid values
      * before invoking this method to avoid runtime errors.
      *
-     * @throws {TypeError} If `this.article` or `this.labelsField` returns `undefined`.
      */
     updateArticleWithLabels() {
-        this.article()[this.labelsField()] = this.labels();
+        const article = this.article();
+        const labelsField = this.labelsField();
+        if (!article)
+            return;
+        if (!labelsField)
+            return;
+        article[labelsField] = this.labels();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultiSelectLabelsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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" }, providers: [provideTranslocoScope("labels")], 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
@@ -12542,11 +12613,16 @@ class MultiSelectLabelsComponent {
         </Badge>
       }
     </div>
+    @if (hasError()) {
+      <div class="p-4 w-full bg-destructive/20 border-destructive">
+        {{ 'labels.error' | transloco }}
+      </div>
+    }
   `, isInline: true, styles: [".anchor:has(.popover:popover-open){z-index:var(--z-menu, 1000);border-radius:var(--radius) var(--radius) 0 0}.anchor .popover::backdrop{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.popover{width:anchor-size(width);top:anchor(bottom);left:anchor(left)}@supports (-moz-appearance: none){.popover{margin:calc(33.3333333333vh + 30px) 25vw;width:50vw}}@supports (background: -webkit-named-image(i)){.popover{margin:calc(33.3333333333vh + 30px) 25vw;width:50vw}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultiSelectLabelsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'multiselect-labels, multiselectlabels, MultiSelectLabels', standalone: true, imports: [FormsModule, NgStyle, TranslocoPipe, InputComponent, BadgeComponent, ListItemComponent], template: `
+            args: [{ selector: "multiselect-labels, multiselectlabels, MultiSelectLabels", providers: [provideTranslocoScope("labels")], standalone: true, imports: [FormsModule, NgStyle, TranslocoPipe, InputComponent, BadgeComponent, ListItemComponent], template: `
     <div class="anchor" [ngStyle]="{ 'anchor-name': anchor() }">
       <label [htmlFor]="id()" class="font-semibold">{{ (isPublic() ? 'labels.publicLabels' : 'labels.privateLabels') | transloco }}</label>
       <input
@@ -12583,8 +12659,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         </Badge>
       }
     </div>
+    @if (hasError()) {
+      <div class="p-4 w-full bg-destructive/20 border-destructive">
+        {{ 'labels.error' | transloco }}
+      </div>
+    }
   `, 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"] }]
-        }], ctorParameters: () => [], propDecorators: { article: [{ type: i0.Input, args: [{ isSignal: true, alias: "article", required: false }] }, { type: i0.Output, args: ["articleChange"] }], isPublic: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPublic", required: false }] }], allowModification: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowModification", required: false }] }], labelsField: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelsField", required: false }] }], labelInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelInput", required: false }] }, { type: i0.Output, args: ["labelInputChange"] }], popover: [{ type: i0.ViewChild, args: ['LabelsPopover', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { article: [{ type: i0.Input, args: [{ isSignal: true, alias: "article", required: false }] }, { type: i0.Output, args: ["articleChange"] }], isPublic: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPublic", required: false }] }], allowModification: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowModification", required: false }] }], labelsField: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelsField", required: false }] }], labelInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelInput", required: false }] }, { type: i0.Output, args: ["labelInputChange"] }], popover: [{ type: i0.ViewChild, args: ["LabelsPopover", { isSignal: true }] }] } });
 
 class LabelsEditDialog {
     destroyRef;