@sinequa/atomic-angular 1.14.1 → 1.15.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -3224,7 +3224,9 @@ class QueryService {
             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: [] });
+                const emptyResult = { records: [] };
+                this.result.set(emptyResult);
+                return of(emptyResult);
             }
         }
         const body = {
@@ -3232,7 +3234,7 @@ class QueryService {
             query,
             $auditRecord
         };
-        return this.http.post(`${this.API_URL}/query`, body).pipe(catchError((err) => {
+        return this.http.post(`${this.API_URL}/query`, body).pipe(catchError(err => {
             error("queryService.getResults failure - error: ", err);
             return of({});
         }), map((result) => {
@@ -3251,19 +3253,17 @@ class QueryService {
                 }
             });
             return result;
-        }), map((result) => {
+        }), 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) => {
+        }), tap(response => {
             this.result.set(response);
             info("queryService.getResults success - data: ", response);
         }));
@@ -3289,10 +3289,10 @@ class QueryService {
                 query
             });
         }
-        return this.http.post(`${this.API_URL}/multi`, body).pipe(catchError((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) => {
@@ -3310,13 +3310,13 @@ class QueryService {
                 });
             });
             return response.results;
-        }), map((results) => {
-            results.forEach((result) => {
+        }), 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,
@@ -3326,7 +3326,7 @@ class QueryService {
             });
         }), 
         // map(response => ResultsSchema.parse(response) as T),
-        tap((response) => {
+        tap(response => {
             info("queryService.bulkSearch success - data: ", response);
         }));
     }
@@ -3346,30 +3346,30 @@ class QueryService {
         this.queryParamsStore.patch({ page }, audit);
     }
     /**
-       * Get the pages associated to some text locations.
-       *
-       * @param docs - all documents offsets we want to get the pages from.
-       * @returns An Observable that emits the found pages.
-       */
+     * Get the pages associated to some text locations.
+     *
+     * @param docs - all documents offsets we want to get the pages from.
+     * @returns An Observable that emits the found pages.
+     */
     getDocPages(docs) {
         const queryName = this.appStore.getDefaultQuery()?.name || "_default";
         const appName = globalConfig.app;
         return this.http.post(`${this.API_V2_URL}/app/${appName}/query/${queryName}/doc-pages`, { docs }).pipe(map(({ items }) => items), catchError(err => {
-            error('queryService.getDocPages failure - error: ', err);
+            error("queryService.getDocPages failure - error: ", err);
             return [];
         }));
     }
     /**
-       * Get the page associated to a single text location.
-       *
-       * @param id - the document id.
-       * @param offset - offset from the passage location.
-       * @param length - length from the passage location.
-       * @returns An Observable that emits the found page.
-       */
+     * Get the page associated to a single text location.
+     *
+     * @param id - the document id.
+     * @param offset - offset from the passage location.
+     * @param length - length from the passage location.
+     * @returns An Observable that emits the found page.
+     */
     getDocPage(id, offset, length) {
         return this.getDocPages([{ id, textLocations: [{ offset, length }] }]).pipe(map((response) => response[0].pages[0].pageNumber), catchError(err => {
-            error('queryService.getDocPage failure - error: ', err);
+            error("queryService.getDocPage failure - error: ", err);
             return [];
         }));
     }
@@ -7872,7 +7872,7 @@ class NavbarTabsComponent {
     //   the filter params (f/sort/id/page) already in the URL are kept.
     // - default: 'replace' so everything is rewritten from scratch.
     getQueryParamsHandling() {
-        return this.persistFiltersAcrossTabs() ? 'merge' : 'replace';
+        return this.persistFiltersAcrossTabs() ? "merge" : "replace";
     }
     // Get query params conditionally
     getQueryParams(tab) {
@@ -7915,7 +7915,7 @@ class NavbarTabsComponent {
     }
     changeTab() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: NavbarTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: NavbarTabsComponent, isStandalone: true, selector: "navbar-tabs", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, noTruncate: { classPropertyName: "noTruncate", publicName: "noTruncate", isSignal: true, isRequired: false, transformFunction: null }, minTabWidth: { classPropertyName: "minTabWidth", publicName: "minTabWidth", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cn('block', class())" } }, providers: [provideTranslocoScope('navbar-tabs')], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: NavbarTabsComponent, isStandalone: true, selector: "navbar-tabs", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, noTruncate: { classPropertyName: "noTruncate", publicName: "noTruncate", isSignal: true, isRequired: false, transformFunction: null }, minTabWidth: { classPropertyName: "minTabWidth", publicName: "minTabWidth", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cn('block', class())" } }, providers: [provideTranslocoScope("navbar-tabs")], ngImport: i0, template: `
     <!-- do not display the tabs if there are no tabs -->
     @if (nav.tabs().length > 0) {
       <div overflowManager (count)="visibleTabCount.set($event)" class="flex items-end rounded-[inherit] bg-inherit">
@@ -7923,8 +7923,7 @@ class NavbarTabsComponent {
           <TabsList class="w-full">
           @for (tab of nav.tabs(); track $index) {
             <Tab
-              [class]="cn('group', !noTruncate() && 'basis-[12.5rem]')"
-              title="{{ tab.display | syslang | transloco }}"
+              [class]="cn('group', !noTruncate() && 'basis-50')"
               value="{{ tab.display }}"
               overflowItem
               [noTruncate]="noTruncate()"
@@ -8021,7 +8020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                         EllipsisIcon,
                         FaIconComponent
                     ],
-                    providers: [provideTranslocoScope('navbar-tabs')],
+                    providers: [provideTranslocoScope("navbar-tabs")],
                     template: `
     <!-- do not display the tabs if there are no tabs -->
     @if (nav.tabs().length > 0) {
@@ -8030,8 +8029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
           <TabsList class="w-full">
           @for (tab of nav.tabs(); track $index) {
             <Tab
-              [class]="cn('group', !noTruncate() && 'basis-[12.5rem]')"
-              title="{{ tab.display | syslang | transloco }}"
+              [class]="cn('group', !noTruncate() && 'basis-50')"
               value="{{ tab.display }}"
               overflowItem
               [noTruncate]="noTruncate()"
@@ -10136,7 +10134,7 @@ class AggregationDateComponent {
         throw new Error("filters.filterInvalid");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: AggregationDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: AggregationDateComponent, isStandalone: true, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", isSignal: true, isRequired: false, transformFunction: null }, controlledQuery: { classPropertyName: "controlledQuery", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, controlledAggregation: { classPropertyName: "controlledAggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null }, controlledSelection: { classPropertyName: "controlledSelection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, emitOn: { classPropertyName: "emitOn", publicName: "emitOn", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, displayEmptyDistributionIntervals: { classPropertyName: "displayEmptyDistributionIntervals", publicName: "displayEmptyDistributionIntervals", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear", selectionChange: "selectionChange", filtersChange: "filtersChange", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"@container block\", isEmpty() && \"hidden\")" } }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "dateRangeDialog", first: true, predicate: AggregationDateRangeDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary\n    [class.cursor-pointer]=\"collapsible()\"\n    class=\"m-0 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @let icon = aggregation()?.icon;\n      @if (icon) {\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (hasFilters()) {\n      @let clearLabel = \"filters.clearFilters\" | transloco;\n      <button\n        variant=\"none\"\n        icon-button\n        [aria-label]=\"clearLabel\"\n        (click)=\"$event.stopPropagation(); clear()\">\n        <filter-x-icon />\n      </button>\n    }\n\n    @if (\n      (!isControlled() || emitOn() === \"apply\") &&\n      selection() &&\n      validSelection()\n    ) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        variant=\"accent\"\n        size=\"sm\"\n        [aria-label]=\"label\"\n        (click)=\"$event.stopPropagation(); apply()\">\n        <FilterIcon />\n        {{ label }}\n      </button>\n    }\n    @if (collapsible()) {\n      <icon-button\n        title=\"Open/Close\"\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n        <chevronright />\n      </icon-button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  <form [formGroup]=\"form\">\n    <ul\n      class=\"flex max-h-[var(--scroll-height,20rem)] snap-y snap-start scrollbar-thin flex-col gap-1 overflow-auto pt-2\"\n      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\n            for=\"date-filter-{{ option.display }}\"\n            class=\"grow cursor-pointer p-1\">\n            {{ option.display | syslang | transloco }}\n          </label>\n        </li>\n      }\n\n      @if (allowCustomRange) {\n        <li\n          role=\"listitem\"\n          aria-label=\"open date range picker\"\n          class=\"flex px-2 leading-7\"\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\n          <input\n            type=\"radio\"\n            formControlName=\"option\"\n            id=\"date-filter-range-dialog\"\n            value=\"custom-range\"\n            (click)=\"select()\" />\n          <div\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\n            <div class=\"flex gap-1\">\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\n                \"filters.from\" | transloco\n              }}</label>\n              <input\n                id=\"datepicker-range-start\"\n                name=\"start\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeFrom()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n            <div class=\"flex gap-1\">\n              <label\n                for=\"datepicker-range-end\"\n                class=\"min-w-10 truncate text-right\"\n                >{{ \"filters.to\" | transloco }}</label\n              >\n              <input\n                id=\"datepicker-range-end\"\n                name=\"end\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeTo()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n          </div>\n        </li>\n      }\n    </ul>\n  </form>\n</details>\n\n<aggregation-date-range-dialog\n  [lang]=\"lang()\"\n  [useDateRange]=\"false\"\n  [min]=\"form.get('customRange.from')?.value || undefined\"\n  [max]=\"form.get('customRange.to')?.value || undefined\"\n  (rangeSelected)=\"onRangeSelected($event)\" />\n", styles: [":host{min-width:200px}ul[role=list]{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: AggregationDateRangeDialogComponent, selector: "aggregation-date-range-dialog", inputs: ["min", "max", "lang", "useDateRange"], outputs: ["rangeSelected"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: AggregationDateComponent, isStandalone: true, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, syncUrl: { classPropertyName: "syncUrl", publicName: "syncUrl", isSignal: true, isRequired: false, transformFunction: null }, controlledQuery: { classPropertyName: "controlledQuery", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, controlledAggregation: { classPropertyName: "controlledAggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null }, controlledSelection: { classPropertyName: "controlledSelection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, emitOn: { classPropertyName: "emitOn", publicName: "emitOn", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, displayEmptyDistributionIntervals: { classPropertyName: "displayEmptyDistributionIntervals", publicName: "displayEmptyDistributionIntervals", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect", onApply: "onApply", onClear: "onClear", selectionChange: "selectionChange", filtersChange: "filtersChange", searchText: "searchTextChange" }, host: { properties: { "class": "cn(\"@container block\", isEmpty() && \"hidden\")" } }, providers: [provideTranslocoScope("filters")], viewQueries: [{ propertyName: "dateRangeDialog", first: true, predicate: AggregationDateRangeDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary\n    [class.cursor-pointer]=\"collapsible()\"\n    class=\"m-0 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @let icon = aggregation()?.icon;\n      @if (icon) {\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (hasFilters()) {\n      @let clearLabel = \"filters.clearFilters\" | transloco;\n      <button\n        variant=\"none\"\n        icon-button\n        [aria-label]=\"clearLabel\"\n        (click)=\"$event.stopPropagation(); clear()\">\n        <filter-x-icon />\n      </button>\n    }\n\n    @if (\n      (!isControlled() || emitOn() === \"apply\") &&\n      selection() &&\n      validSelection()\n    ) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        variant=\"accent\"\n        size=\"sm\"\n        [aria-label]=\"label\"\n        (click)=\"$event.stopPropagation(); apply()\">\n        <FilterIcon />\n        {{ label }}\n      </button>\n    }\n    @if (collapsible()) {\n      <icon-button\n        title=\"Open/Close\"\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n        <chevronright />\n      </icon-button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  <form [formGroup]=\"form\">\n    <ul\n      class=\"flex max-h-[var(--scroll-height,20rem)] snap-y snap-start scrollbar-thin flex-col gap-1 overflow-auto pt-2\"\n      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\n            for=\"date-filter-{{ option.display }}\"\n            class=\"grow cursor-pointer p-1\">\n            {{ option.display | syslang | transloco }}\n          </label>\n        </li>\n      }\n\n      @if (allowCustomRange) {\n        <li\n          role=\"listitem\"\n          aria-label=\"open date range picker\"\n          class=\"flex px-2 leading-7\"\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\n          <input\n            type=\"radio\"\n            formControlName=\"option\"\n            id=\"date-filter-range-dialog\"\n            value=\"custom-range\"\n            (click)=\"select()\" />\n          <div class=\"@container flex grow gap-1 p-1 @max-[340px]:flex-wrap\">\n            <div class=\"flex gap-1\">\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\n                \"filters.from\" | transloco\n              }}</label>\n              <input\n                id=\"datepicker-range-start\"\n                name=\"start\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeFrom()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n            <div class=\"flex gap-1\">\n              <label\n                for=\"datepicker-range-end\"\n                class=\"min-w-10 truncate text-right\"\n                >{{ \"filters.to\" | transloco }}</label\n              >\n              <input\n                id=\"datepicker-range-end\"\n                name=\"end\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeTo()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n          </div>\n        </li>\n      }\n    </ul>\n  </form>\n</details>\n\n<aggregation-date-range-dialog\n  [lang]=\"lang()\"\n  [useDateRange]=\"false\"\n  [min]=\"form.get('customRange.from')?.value || undefined\"\n  [max]=\"form.get('customRange.to')?.value || undefined\"\n  (rangeSelected)=\"onRangeSelected($event)\" />\n", styles: [":host{min-width:200px}ul[role=list]{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: AggregationDateRangeDialogComponent, selector: "aggregation-date-range-dialog", inputs: ["min", "max", "lang", "useDateRange"], outputs: ["rangeSelected"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: AggregationDateComponent, decorators: [{
             type: Component,
@@ -10161,7 +10159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                         // layout — a date facet has no "empty but resolved" state to gate behind
                         // `hideWhenEmpty` (see `isEmpty`), unlike list/tree.
                         "[class]": 'cn("@container block", isEmpty() && "hidden")'
-                    }, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary\n    [class.cursor-pointer]=\"collapsible()\"\n    class=\"m-0 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @let icon = aggregation()?.icon;\n      @if (icon) {\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (hasFilters()) {\n      @let clearLabel = \"filters.clearFilters\" | transloco;\n      <button\n        variant=\"none\"\n        icon-button\n        [aria-label]=\"clearLabel\"\n        (click)=\"$event.stopPropagation(); clear()\">\n        <filter-x-icon />\n      </button>\n    }\n\n    @if (\n      (!isControlled() || emitOn() === \"apply\") &&\n      selection() &&\n      validSelection()\n    ) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        variant=\"accent\"\n        size=\"sm\"\n        [aria-label]=\"label\"\n        (click)=\"$event.stopPropagation(); apply()\">\n        <FilterIcon />\n        {{ label }}\n      </button>\n    }\n    @if (collapsible()) {\n      <icon-button\n        title=\"Open/Close\"\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n        <chevronright />\n      </icon-button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  <form [formGroup]=\"form\">\n    <ul\n      class=\"flex max-h-[var(--scroll-height,20rem)] snap-y snap-start scrollbar-thin flex-col gap-1 overflow-auto pt-2\"\n      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\n            for=\"date-filter-{{ option.display }}\"\n            class=\"grow cursor-pointer p-1\">\n            {{ option.display | syslang | transloco }}\n          </label>\n        </li>\n      }\n\n      @if (allowCustomRange) {\n        <li\n          role=\"listitem\"\n          aria-label=\"open date range picker\"\n          class=\"flex px-2 leading-7\"\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\n          <input\n            type=\"radio\"\n            formControlName=\"option\"\n            id=\"date-filter-range-dialog\"\n            value=\"custom-range\"\n            (click)=\"select()\" />\n          <div\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\n            <div class=\"flex gap-1\">\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\n                \"filters.from\" | transloco\n              }}</label>\n              <input\n                id=\"datepicker-range-start\"\n                name=\"start\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeFrom()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n            <div class=\"flex gap-1\">\n              <label\n                for=\"datepicker-range-end\"\n                class=\"min-w-10 truncate text-right\"\n                >{{ \"filters.to\" | transloco }}</label\n              >\n              <input\n                id=\"datepicker-range-end\"\n                name=\"end\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeTo()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n          </div>\n        </li>\n      }\n    </ul>\n  </form>\n</details>\n\n<aggregation-date-range-dialog\n  [lang]=\"lang()\"\n  [useDateRange]=\"false\"\n  [min]=\"form.get('customRange.from')?.value || undefined\"\n  [max]=\"form.get('customRange.to')?.value || undefined\"\n  (rangeSelected)=\"onRangeSelected($event)\" />\n", styles: [":host{min-width:200px}ul[role=list]{scrollbar-width:thin}\n"] }]
+                    }, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary\n    [class.cursor-pointer]=\"collapsible()\"\n    class=\"m-0 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @let icon = aggregation()?.icon;\n      @if (icon) {\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (hasFilters()) {\n      @let clearLabel = \"filters.clearFilters\" | transloco;\n      <button\n        variant=\"none\"\n        icon-button\n        [aria-label]=\"clearLabel\"\n        (click)=\"$event.stopPropagation(); clear()\">\n        <filter-x-icon />\n      </button>\n    }\n\n    @if (\n      (!isControlled() || emitOn() === \"apply\") &&\n      selection() &&\n      validSelection()\n    ) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        variant=\"accent\"\n        size=\"sm\"\n        [aria-label]=\"label\"\n        (click)=\"$event.stopPropagation(); apply()\">\n        <FilterIcon />\n        {{ label }}\n      </button>\n    }\n    @if (collapsible()) {\n      <icon-button\n        title=\"Open/Close\"\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n        <chevronright />\n      </icon-button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  <form [formGroup]=\"form\">\n    <ul\n      class=\"flex max-h-[var(--scroll-height,20rem)] snap-y snap-start scrollbar-thin flex-col gap-1 overflow-auto pt-2\"\n      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\n            for=\"date-filter-{{ option.display }}\"\n            class=\"grow cursor-pointer p-1\">\n            {{ option.display | syslang | transloco }}\n          </label>\n        </li>\n      }\n\n      @if (allowCustomRange) {\n        <li\n          role=\"listitem\"\n          aria-label=\"open date range picker\"\n          class=\"flex px-2 leading-7\"\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\n          <input\n            type=\"radio\"\n            formControlName=\"option\"\n            id=\"date-filter-range-dialog\"\n            value=\"custom-range\"\n            (click)=\"select()\" />\n          <div class=\"@container flex grow gap-1 p-1 @max-[340px]:flex-wrap\">\n            <div class=\"flex gap-1\">\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\n                \"filters.from\" | transloco\n              }}</label>\n              <input\n                id=\"datepicker-range-start\"\n                name=\"start\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeFrom()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n            <div class=\"flex gap-1\">\n              <label\n                for=\"datepicker-range-end\"\n                class=\"min-w-10 truncate text-right\"\n                >{{ \"filters.to\" | transloco }}</label\n              >\n              <input\n                id=\"datepicker-range-end\"\n                name=\"end\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeTo()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n          </div>\n        </li>\n      }\n    </ul>\n  </form>\n</details>\n\n<aggregation-date-range-dialog\n  [lang]=\"lang()\"\n  [useDateRange]=\"false\"\n  [min]=\"form.get('customRange.from')?.value || undefined\"\n  [max]=\"form.get('customRange.to')?.value || undefined\"\n  (rangeSelected)=\"onRangeSelected($event)\" />\n", styles: [":host{min-width:200px}ul[role=list]{scrollbar-width:thin}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dateRangeDialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AggregationDateRangeDialogComponent), { isSignal: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], syncUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "syncUrl", required: false }] }], controlledQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], controlledAggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregation", required: false }] }], controlledSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], emitOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitOn", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], displayEmptyDistributionIntervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayEmptyDistributionIntervals", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onApply: [{ type: i0.Output, args: ["onApply"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
 
 /**
@@ -10171,7 +10169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
  */
 class DateComponent extends AggregationDateComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: DateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: DateComponent, isStandalone: true, selector: "date-filter,DateFilter", host: { classAttribute: "@container" }, providers: [provideTranslocoScope("filters")], usesInheritance: true, ngImport: i0, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary\n    [class.cursor-pointer]=\"collapsible()\"\n    class=\"m-0 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @let icon = aggregation()?.icon;\n      @if (icon) {\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (hasFilters()) {\n      @let clearLabel = \"filters.clearFilters\" | transloco;\n      <button\n        variant=\"none\"\n        icon-button\n        [aria-label]=\"clearLabel\"\n        (click)=\"$event.stopPropagation(); clear()\">\n        <filter-x-icon />\n      </button>\n    }\n\n    @if (\n      (!isControlled() || emitOn() === \"apply\") &&\n      selection() &&\n      validSelection()\n    ) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        variant=\"accent\"\n        size=\"sm\"\n        [aria-label]=\"label\"\n        (click)=\"$event.stopPropagation(); apply()\">\n        <FilterIcon />\n        {{ label }}\n      </button>\n    }\n    @if (collapsible()) {\n      <icon-button\n        title=\"Open/Close\"\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n        <chevronright />\n      </icon-button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  <form [formGroup]=\"form\">\n    <ul\n      class=\"flex max-h-[var(--scroll-height,20rem)] snap-y snap-start scrollbar-thin flex-col gap-1 overflow-auto pt-2\"\n      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\n            for=\"date-filter-{{ option.display }}\"\n            class=\"grow cursor-pointer p-1\">\n            {{ option.display | syslang | transloco }}\n          </label>\n        </li>\n      }\n\n      @if (allowCustomRange) {\n        <li\n          role=\"listitem\"\n          aria-label=\"open date range picker\"\n          class=\"flex px-2 leading-7\"\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\n          <input\n            type=\"radio\"\n            formControlName=\"option\"\n            id=\"date-filter-range-dialog\"\n            value=\"custom-range\"\n            (click)=\"select()\" />\n          <div\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\n            <div class=\"flex gap-1\">\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\n                \"filters.from\" | transloco\n              }}</label>\n              <input\n                id=\"datepicker-range-start\"\n                name=\"start\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeFrom()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n            <div class=\"flex gap-1\">\n              <label\n                for=\"datepicker-range-end\"\n                class=\"min-w-10 truncate text-right\"\n                >{{ \"filters.to\" | transloco }}</label\n              >\n              <input\n                id=\"datepicker-range-end\"\n                name=\"end\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeTo()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n          </div>\n        </li>\n      }\n    </ul>\n  </form>\n</details>\n\n<aggregation-date-range-dialog\n  [lang]=\"lang()\"\n  [useDateRange]=\"false\"\n  [min]=\"form.get('customRange.from')?.value || undefined\"\n  [max]=\"form.get('customRange.to')?.value || undefined\"\n  (rangeSelected)=\"onRangeSelected($event)\" />\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: AggregationDateRangeDialogComponent, selector: "aggregation-date-range-dialog", inputs: ["min", "max", "lang", "useDateRange"], outputs: ["rangeSelected"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: DateComponent, isStandalone: true, selector: "date-filter,DateFilter", host: { classAttribute: "@container" }, providers: [provideTranslocoScope("filters")], usesInheritance: true, ngImport: i0, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary\n    [class.cursor-pointer]=\"collapsible()\"\n    class=\"m-0 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @let icon = aggregation()?.icon;\n      @if (icon) {\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (hasFilters()) {\n      @let clearLabel = \"filters.clearFilters\" | transloco;\n      <button\n        variant=\"none\"\n        icon-button\n        [aria-label]=\"clearLabel\"\n        (click)=\"$event.stopPropagation(); clear()\">\n        <filter-x-icon />\n      </button>\n    }\n\n    @if (\n      (!isControlled() || emitOn() === \"apply\") &&\n      selection() &&\n      validSelection()\n    ) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        variant=\"accent\"\n        size=\"sm\"\n        [aria-label]=\"label\"\n        (click)=\"$event.stopPropagation(); apply()\">\n        <FilterIcon />\n        {{ label }}\n      </button>\n    }\n    @if (collapsible()) {\n      <icon-button\n        title=\"Open/Close\"\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n        <chevronright />\n      </icon-button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  <form [formGroup]=\"form\">\n    <ul\n      class=\"flex max-h-[var(--scroll-height,20rem)] snap-y snap-start scrollbar-thin flex-col gap-1 overflow-auto pt-2\"\n      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\n            for=\"date-filter-{{ option.display }}\"\n            class=\"grow cursor-pointer p-1\">\n            {{ option.display | syslang | transloco }}\n          </label>\n        </li>\n      }\n\n      @if (allowCustomRange) {\n        <li\n          role=\"listitem\"\n          aria-label=\"open date range picker\"\n          class=\"flex px-2 leading-7\"\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\n          <input\n            type=\"radio\"\n            formControlName=\"option\"\n            id=\"date-filter-range-dialog\"\n            value=\"custom-range\"\n            (click)=\"select()\" />\n          <div class=\"@container flex grow gap-1 p-1 @max-[340px]:flex-wrap\">\n            <div class=\"flex gap-1\">\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\n                \"filters.from\" | transloco\n              }}</label>\n              <input\n                id=\"datepicker-range-start\"\n                name=\"start\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeFrom()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n            <div class=\"flex gap-1\">\n              <label\n                for=\"datepicker-range-end\"\n                class=\"min-w-10 truncate text-right\"\n                >{{ \"filters.to\" | transloco }}</label\n              >\n              <input\n                id=\"datepicker-range-end\"\n                name=\"end\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeTo()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n          </div>\n        </li>\n      }\n    </ul>\n  </form>\n</details>\n\n<aggregation-date-range-dialog\n  [lang]=\"lang()\"\n  [useDateRange]=\"false\"\n  [min]=\"form.get('customRange.from')?.value || undefined\"\n  [max]=\"form.get('customRange.to')?.value || undefined\"\n  (rangeSelected)=\"onRangeSelected($event)\" />\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"], dependencies: [{ kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "directive", type: ListItemComponent, selector: "[role=\"listitem\"], [role=\"option\"]", inputs: ["class", "variant", "decoration"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: AggregationDateRangeDialogComponent, selector: "aggregation-date-range-dialog", inputs: ["min", "max", "lang", "useDateRange"], outputs: ["rangeSelected"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
@@ -10188,7 +10186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                         FilterXIcon
                     ], host: {
                         class: "@container"
-                    }, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary\n    [class.cursor-pointer]=\"collapsible()\"\n    class=\"m-0 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @let icon = aggregation()?.icon;\n      @if (icon) {\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (hasFilters()) {\n      @let clearLabel = \"filters.clearFilters\" | transloco;\n      <button\n        variant=\"none\"\n        icon-button\n        [aria-label]=\"clearLabel\"\n        (click)=\"$event.stopPropagation(); clear()\">\n        <filter-x-icon />\n      </button>\n    }\n\n    @if (\n      (!isControlled() || emitOn() === \"apply\") &&\n      selection() &&\n      validSelection()\n    ) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        variant=\"accent\"\n        size=\"sm\"\n        [aria-label]=\"label\"\n        (click)=\"$event.stopPropagation(); apply()\">\n        <FilterIcon />\n        {{ label }}\n      </button>\n    }\n    @if (collapsible()) {\n      <icon-button\n        title=\"Open/Close\"\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n        <chevronright />\n      </icon-button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  <form [formGroup]=\"form\">\n    <ul\n      class=\"flex max-h-[var(--scroll-height,20rem)] snap-y snap-start scrollbar-thin flex-col gap-1 overflow-auto pt-2\"\n      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\n            for=\"date-filter-{{ option.display }}\"\n            class=\"grow cursor-pointer p-1\">\n            {{ option.display | syslang | transloco }}\n          </label>\n        </li>\n      }\n\n      @if (allowCustomRange) {\n        <li\n          role=\"listitem\"\n          aria-label=\"open date range picker\"\n          class=\"flex px-2 leading-7\"\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\n          <input\n            type=\"radio\"\n            formControlName=\"option\"\n            id=\"date-filter-range-dialog\"\n            value=\"custom-range\"\n            (click)=\"select()\" />\n          <div\n            class=\"@container flex grow justify-end gap-1 p-1 @max-[340px]:flex-wrap\">\n            <div class=\"flex gap-1\">\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\n                \"filters.from\" | transloco\n              }}</label>\n              <input\n                id=\"datepicker-range-start\"\n                name=\"start\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeFrom()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n            <div class=\"flex gap-1\">\n              <label\n                for=\"datepicker-range-end\"\n                class=\"min-w-10 truncate text-right\"\n                >{{ \"filters.to\" | transloco }}</label\n              >\n              <input\n                id=\"datepicker-range-end\"\n                name=\"end\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeTo()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n          </div>\n        </li>\n      }\n    </ul>\n  </form>\n</details>\n\n<aggregation-date-range-dialog\n  [lang]=\"lang()\"\n  [useDateRange]=\"false\"\n  [min]=\"form.get('customRange.from')?.value || undefined\"\n  [max]=\"form.get('customRange.to')?.value || undefined\"\n  (rangeSelected)=\"onRangeSelected($event)\" />\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"] }]
+                    }, template: "<details [attr.open]=\"expanded()\" [attr.name]=\"id()\" class=\"group space-y-2\">\n  <summary\n    [class.cursor-pointer]=\"collapsible()\"\n    class=\"m-0 flex h-8 w-full items-center gap-1 pl-1 font-semibold select-none\"\n    (click)=\"onHeaderClick($event)\">\n    <ng-content select=\"label\">\n      @let icon = aggregation()?.icon;\n      @if (icon) {\n        <FaIcon [faClass]=\"icon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (hasFilters()) {\n      @let clearLabel = \"filters.clearFilters\" | transloco;\n      <button\n        variant=\"none\"\n        icon-button\n        [aria-label]=\"clearLabel\"\n        (click)=\"$event.stopPropagation(); clear()\">\n        <filter-x-icon />\n      </button>\n    }\n\n    @if (\n      (!isControlled() || emitOn() === \"apply\") &&\n      selection() &&\n      validSelection()\n    ) {\n      @let label = \"filters.apply\" | transloco;\n      <button\n        variant=\"accent\"\n        size=\"sm\"\n        [aria-label]=\"label\"\n        (click)=\"$event.stopPropagation(); apply()\">\n        <FilterIcon />\n        {{ label }}\n      </button>\n    }\n    @if (collapsible()) {\n      <icon-button\n        title=\"Open/Close\"\n        class=\"cursor-pointer [&_svg]:transition-transform [&_svg]:duration-150 group-open:[&_svg]:rotate-90\">\n        <chevronright />\n      </icon-button>\n    }\n  </summary>\n\n  <!-- content wrapper -->\n  <form [formGroup]=\"form\">\n    <ul\n      class=\"flex max-h-[var(--scroll-height,20rem)] snap-y snap-start scrollbar-thin flex-col gap-1 overflow-auto pt-2\"\n      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\n            for=\"date-filter-{{ option.display }}\"\n            class=\"grow cursor-pointer p-1\">\n            {{ option.display | syslang | transloco }}\n          </label>\n        </li>\n      }\n\n      @if (allowCustomRange) {\n        <li\n          role=\"listitem\"\n          aria-label=\"open date range picker\"\n          class=\"flex px-2 leading-7\"\n          [class.select]=\"form.get('option')?.value === 'custom-range'\">\n          <input\n            type=\"radio\"\n            formControlName=\"option\"\n            id=\"date-filter-range-dialog\"\n            value=\"custom-range\"\n            (click)=\"select()\" />\n          <div class=\"@container flex grow gap-1 p-1 @max-[340px]:flex-wrap\">\n            <div class=\"flex gap-1\">\n              <label for=\"datepicker-range-start\" class=\"min-w-10 truncate\">{{\n                \"filters.from\" | transloco\n              }}</label>\n              <input\n                id=\"datepicker-range-start\"\n                name=\"start\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeFrom()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n            <div class=\"flex gap-1\">\n              <label\n                for=\"datepicker-range-end\"\n                class=\"min-w-10 truncate text-right\"\n                >{{ \"filters.to\" | transloco }}</label\n              >\n              <input\n                id=\"datepicker-range-end\"\n                name=\"end\"\n                type=\"text\"\n                readonly\n                class=\"h-8 max-w-[13ch] min-w-[13ch]\"\n                [value]=\"customRangeTo()\"\n                (click)=\"selectAndOpenDialog()\" />\n            </div>\n          </div>\n        </li>\n      }\n    </ul>\n  </form>\n</details>\n\n<aggregation-date-range-dialog\n  [lang]=\"lang()\"\n  [useDateRange]=\"false\"\n  [min]=\"form.get('customRange.from')?.value || undefined\"\n  [max]=\"form.get('customRange.to')?.value || undefined\"\n  (rangeSelected)=\"onRangeSelected($event)\" />\n", styles: [":host{display:block;min-width:200px}ul[role=list]{scrollbar-width:thin}\n"] }]
         }] });
 
 class ArticleEntities {
@@ -12395,6 +12393,7 @@ const COLLECTIONS_CONFIG = new InjectionToken("Collections options", {
 class CollectionsComponent {
     floating = inject(PopoverComponent, { skipSelf: true, optional: true });
     userSettingsStore = inject(UserSettingsStore);
+    queryParamsStore = inject(QueryParamsStore);
     drawerStack = inject(DrawerStackService);
     router = inject(Router);
     options = input(...(ngDevMode ? [undefined, { debugName: "options" }] : []));
@@ -12414,6 +12413,9 @@ class CollectionsComponent {
     }
     onClick(collection) {
         this.drawerStack.closeAll();
+        // Sync the store before navigating: patchState is synchronous while router.navigate is not,
+        // so the destination /search page must already see the basket when it fires its first query.
+        this.queryParamsStore.patch({ basket: collection.name }, undefined, { syncUrl: false });
         this.router.navigate(["/search"], { queryParams: { b: collection.name } });
     }
     onDelete(collection, index, e) {
@@ -12429,16 +12431,7 @@ class CollectionsComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: CollectionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-collections, collections", standalone: true, imports: [
-                        TranslocoPipe,
-                        RouterLink,
-                        DeleteCollectionDialog,
-                        ButtonComponent,
-                        ListItemComponent,
-                        Separator,
-                        TrashIcon,
-                        InboxIcon
-                    ], providers: [provideTranslocoScope("collections")], template: "@if (floating) {\r\n  <div class=\"p-2\">\r\n    <label class=\"text-xl font-bold\">{{\r\n      \"collections.label\" | transloco\r\n    }}</label>\r\n    <Separator />\r\n  </div>\r\n}\r\n\r\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\">\r\n  @for (collection of paginatedCollections(); track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group grid grid-cols-[min-content_auto_min-content] items-center\"\r\n      tabindex=\"0\"\r\n      (click)=\"onClick(collection)\"\r\n      (keydown.enter)=\"onClick(collection)\">\r\n      <inbox-icon />\r\n\r\n      <p class=\"line-clamp-1\">{{ collection.name }}</p>\r\n\r\n      <button\r\n        variant=\"ghost\"\r\n        [iconOnly]=\"true\"\r\n        class=\"text-destructive\"\r\n        title=\"{{ 'collections.deleteCollection' | transloco }}\"\r\n        [attr.aria-label]=\"'collections.deleteCollection' | transloco\"\r\n        (click)=\"onDelete(collection, $index, $event)\">\r\n        <TrashIcon />\r\n      </button>\r\n    </li>\r\n  } @empty {\r\n    <span class=\"py-4 text-center text-neutral-500\">\r\n      {{ \"collections.noCollections\" | transloco }}\r\n    </span>\r\n  }\r\n</ul>\r\n\r\n@if (paginatedCollections().length > 0) {\r\n  <div class=\"flex flex-col px-2\">\r\n    @if (hasMore() && config.showLoadMore) {\r\n      <button\r\n        variant=\"outline\"\r\n        class=\"w-full\"\r\n        tabindex=\"0\"\r\n        [attr.title]=\"'loadMore' | transloco\"\r\n        (click)=\"loadMore($event)\">\r\n        {{ \"loadMore\" | transloco }}\r\n      </button>\r\n    }\r\n    <button\r\n      variant=\"primary\"\r\n      class=\"ml-auto\"\r\n      [attr.title]=\"'seeMore' | transloco\"\r\n      [routerLink]=\"[config.routerLink]\">\r\n      {{ \"seeMore\" | transloco }}\r\n    </button>\r\n  </div>\r\n\r\n  <delete-collection-dialog />\r\n}\r\n" }]
+            args: [{ selector: "app-collections, collections", standalone: true, imports: [TranslocoPipe, RouterLink, DeleteCollectionDialog, ButtonComponent, ListItemComponent, Separator, TrashIcon, InboxIcon], providers: [provideTranslocoScope("collections")], template: "@if (floating) {\r\n  <div class=\"p-2\">\r\n    <label class=\"text-xl font-bold\">{{\r\n      \"collections.label\" | transloco\r\n    }}</label>\r\n    <Separator />\r\n  </div>\r\n}\r\n\r\n<ul class=\"flex max-h-[460px] flex-col overflow-auto\">\r\n  @for (collection of paginatedCollections(); track $index) {\r\n    <li\r\n      role=\"listitem\"\r\n      class=\"group grid grid-cols-[min-content_auto_min-content] items-center\"\r\n      tabindex=\"0\"\r\n      (click)=\"onClick(collection)\"\r\n      (keydown.enter)=\"onClick(collection)\">\r\n      <inbox-icon />\r\n\r\n      <p class=\"line-clamp-1\">{{ collection.name }}</p>\r\n\r\n      <button\r\n        variant=\"ghost\"\r\n        [iconOnly]=\"true\"\r\n        class=\"text-destructive\"\r\n        title=\"{{ 'collections.deleteCollection' | transloco }}\"\r\n        [attr.aria-label]=\"'collections.deleteCollection' | transloco\"\r\n        (click)=\"onDelete(collection, $index, $event)\">\r\n        <TrashIcon />\r\n      </button>\r\n    </li>\r\n  } @empty {\r\n    <span class=\"py-4 text-center text-neutral-500\">\r\n      {{ \"collections.noCollections\" | transloco }}\r\n    </span>\r\n  }\r\n</ul>\r\n\r\n@if (paginatedCollections().length > 0) {\r\n  <div class=\"flex flex-col px-2\">\r\n    @if (hasMore() && config.showLoadMore) {\r\n      <button\r\n        variant=\"outline\"\r\n        class=\"w-full\"\r\n        tabindex=\"0\"\r\n        [attr.title]=\"'loadMore' | transloco\"\r\n        (click)=\"loadMore($event)\">\r\n        {{ \"loadMore\" | transloco }}\r\n      </button>\r\n    }\r\n    <button\r\n      variant=\"primary\"\r\n      class=\"ml-auto\"\r\n      [attr.title]=\"'seeMore' | transloco\"\r\n      [routerLink]=\"[config.routerLink]\">\r\n      {{ \"seeMore\" | transloco }}\r\n    </button>\r\n  </div>\r\n\r\n  <delete-collection-dialog />\r\n}\r\n" }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], deleteCollectionDialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DeleteCollectionDialog), { isSignal: true }] }] } });
 
 /** Static catalog of the known boolean feature flags, with human-readable metadata. */
@@ -13265,25 +13258,23 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
     aggregations = signal([], ...(ngDevMode ? [{ debugName: "aggregations" }] : []));
     inputVariant = signal("default", ...(ngDevMode ? [{ debugName: "inputVariant" }] : []));
     tabs = computed(() => {
-        const routeData = this.router.config.find((c) => c.path === searchRoute);
+        const routeData = this.router.config.find(c => c.path === searchRoute);
         return !routeData
             ? []
-            : [{ path: "all", display: "All" }].concat(routeData
-                .children.filter((c) => !!c.path && c.path !== "all" && c.path !== "**")
-                .map((c) => ({ path: c.path, display: c.data?.["display"] })));
+            : [{ path: "all", display: "All" }].concat(routeData.children.filter(c => !!c.path && c.path !== "all" && c.path !== "**").map(c => ({ path: c.path, display: c.data?.["display"] })));
     }, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
     filters = computed(() => {
         const cjsonFilters = this.appStore
             .customizationJson()
-            .filters?.filter((f) => f.column !== "#date")
-            .map((f) => ({
+            .filters?.filter(f => f.column !== "#date")
+            .map(f => ({
             column: f.column,
             alias: this.appStore.getColumnAlias(f.column),
             display: f.display,
-            items: this.aggregations()?.find((a) => a.column === f.column)?.items
+            items: this.aggregations()?.find(a => a.column === f.column)?.items
         })) || [];
         const agg = this.aggregations()
-            .filter((f) => !cjsonFilters.some((cf) => cf.column === f.column))
+            .filter(f => !cjsonFilters.some(cf => cf.column === f.column))
             .map((f) => ({
             column: f.column,
             alias: this.appStore.getColumnAlias(f.column),
@@ -13352,7 +13343,7 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
         }
         this.queryParamsStore.patch({ text });
         const filters = [];
-        this.appliedFilters().forEach((filter) => {
+        this.appliedFilters().forEach(filter => {
             if (filter.values.length) {
                 // todo should handle dates? how?
                 /* if (filter.column.startsWith('modified') || filter.column.startsWith('date')) {
@@ -13370,7 +13361,7 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
         });
         this.queryParamsStore.clearFilters();
         if (filters.length) {
-            filters.forEach((filter) => {
+            filters.forEach(filter => {
                 this.queryParamsStore.updateFilter(filter);
             });
         }
@@ -13388,10 +13379,10 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
         const display = values[0].display;
         if (this.appStore.isDateColumn(field)) {
             // dates
-            const agg = this.aggregations().find((a) => a.column === field);
+            const agg = this.aggregations().find(a => a.column === field);
             if (agg) {
                 const options = translateAggregationToDateOptions(agg, false);
-                const option = options.find((o) => !!o.display && value.indexOf(o.display) !== -1);
+                const option = options.find(o => !!o.display && value.indexOf(o.display) !== -1);
                 if (option)
                     return [
                         {
@@ -13409,11 +13400,11 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
             return [{ operator: op, value, field: f }];
         }
         else {
-            const agg = this.aggregations().find((a) => a.column === field);
+            const agg = this.aggregations().find(a => a.column === field);
             // if AggregationItem
             if (!!value.match(aggItemRegex)?.[1] && !!agg) {
-                const items = agg.items.filter((item) => values.some((v) => item.value === v.value));
-                const filters = items.map((item) => parseValueAndOperatorFromItem(item, field));
+                const items = agg.items.filter(item => values.some(v => item.value === v.value));
+                const filters = items.map(item => parseValueAndOperatorFromItem(item, field));
                 return [
                     {
                         operator: "or",
@@ -13431,10 +13422,10 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
                         {
                             operator,
                             name: agg?.name,
-                            values: values.map((v) => v.value),
+                            values: values.map(v => v.value),
                             field,
                             display: display || value,
-                            filters: values.map((v) => ({
+                            filters: values.map(v => ({
                                 operator: "contains",
                                 name: agg?.name,
                                 field,
@@ -13463,7 +13454,7 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
                 // value can be separated by AND or OR keywords, if it's the case each words must be written field:word1 AND field:word2 etc...
                 const words = value.split(/\s+(AND|OR)\s+/);
                 return words
-                    .map((w) => {
+                    .map(w => {
                     if (w === "AND" || w === "OR")
                         return w;
                     return `(${fieldStr}${w})`;
@@ -13472,7 +13463,7 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
             }
             case "any": {
                 const splitWords = value.split(" ");
-                return `(${splitWords.map((w) => `${fieldStr}[${w}]`).join(" OR ")})`;
+                return `(${splitWords.map(w => `${fieldStr}[${w}]`).join(" OR ")})`;
             }
             case "none":
                 return `${fieldStr}NOT [${value}]`;
@@ -13481,20 +13472,19 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
         }
     }
     getPlaceholder(key) {
-        return (this.selectData.find((d) => d.operator === this.form.get(key)?.value)?.placeholder ||
-            this.transloco.translate("drawers.searchWords"));
+        return this.selectData.find(d => d.operator === this.form.get(key)?.value)?.placeholder || this.transloco.translate("drawers.searchWords");
     }
     /** Get applied filters for a column */
     getItems(column) {
-        return this.appliedFilters().find((f) => f.column === column)?.values || [];
+        return this.appliedFilters().find(f => f.column === column)?.values || [];
     }
     /** add item to current selection */
     addItem(item, filter) {
-        const appliedFilter = this.appliedFilters().find((af) => af.column === filter.column);
+        const appliedFilter = this.appliedFilters().find(af => af.column === filter.column);
         if (!appliedFilter) {
             this.appliedFilters.set(this.appliedFilters().concat([{ column: filter.column, values: [item] }]));
         }
-        else if (!appliedFilter.values.some((v) => v.value === item.value)) {
+        else if (!appliedFilter.values.some(v => v.value === item.value)) {
             if (this.appStore.isDateColumn(filter.column)) {
                 appliedFilter.values = [item]; // only one item for date filters
             }
@@ -13505,9 +13495,9 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
     }
     /** remove item from current selection */
     removeItem(item, filter) {
-        const appliedFilter = this.appliedFilters().find((af) => af.column === filter.column);
+        const appliedFilter = this.appliedFilters().find(af => af.column === filter.column);
         if (appliedFilter) {
-            appliedFilter.values = appliedFilter.values.filter((v) => v.value !== item.value);
+            appliedFilter.values = appliedFilter.values.filter(v => v.value !== item.value);
         }
     }
     /** Update suggestions on input focus */
@@ -13521,23 +13511,22 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
     }
     setSuggestions(value) {
         this.suggestions.set([]);
-        const filter = this.filters().find((f) => f.column === this.currentFilter());
+        const filter = this.filters().find(f => f.column === this.currentFilter());
         if (!!value && !!filter && filter.items?.length) {
-            this.suggestions.set(this.getSuggestionItems(value.toLowerCase(), filter.items).map((i) => ({
+            this.suggestions.set(this.getSuggestionItems(value.toLowerCase(), filter.items).map(i => ({
                 display: i.display || String(i.value),
                 value: String(filter.column === "treepath" ? `/${i.$path || i.value}/*` : i.value)
             })));
         }
     }
     getSuggestionItems(value, items) {
-        const res = items.filter((i) => (!!i.display && i.display.toLowerCase().indexOf(value) !== -1) ||
-            String(i.value).toLowerCase().indexOf(value) !== -1);
+        const res = items.filter(i => (!!i.display && i.display.toLowerCase().indexOf(value) !== -1) || String(i.value).toLowerCase().indexOf(value) !== -1);
         // todo handle tree items
         return res;
     }
     getWithSubItems(items) {
         const res = [...items];
-        items.forEach((item) => {
+        items.forEach(item => {
             if (item.hasChildren && item.items?.length) {
                 res.push(...this.getWithSubItems(item.items));
             }
@@ -13545,7 +13534,7 @@ class DrawerAdvancedFiltersComponent extends DrawerComponent {
         return res;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: DrawerAdvancedFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: DrawerAdvancedFiltersComponent, isStandalone: true, selector: "advanced-filters", host: { classAttribute: "fixed bg-background grid h-full top-0 -right-full justify-end" }, providers: [DrawerService, SyslangPipe, TranslocoPipe, provideTranslocoScope("drawers")], usesInheritance: true, ngImport: i0, template: "<div (click)=\"drawer.toggleExtension()\" (keydown.escape)=\"drawer.toggleExtension()\" [attr.aria-hidden]=\"true\"></div>\n\n<div class=\"flex h-full flex-col overflow-auto\">\n  <DrawerNavbar class=\"border-foreground/10 block border-b\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </DrawerNavbar>\n\n  <div class=\"flex h-full grow flex-col overflow-auto\">\n    <section class=\"flex flex-col gap-4 p-6\" [formGroup]=\"form\">\n      <!-- FIND IN -->\n      <h1 class=\"text-xl font-bold\">{{ 'drawers.findInContent' | transloco }}</h1>\n      <div class=\"flex items-center gap-4\" formGroupName=\"content\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInContent' | transloco }}</span>\n        <select\n          id=\"content-operator\"\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n          formControlName=\"operator\">\n          @for (data of selectData; track $index) {\n            <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n          }\n        </select>\n        <input\n          [variant]=\"inputVariant()\"\n          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\n      @if (enableFieldedSearch()) {\n        <div class=\"flex items-center gap-4\" formGroupName=\"title\">\n          <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInTitle' | transloco }}</span>\n          <select\n            id=\"title-operator\"\n            class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n            formControlName=\"operator\">\n            @for (data of selectData; track $index) {\n              <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n            }\n          </select>\n          <input id=\"title-value\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [placeholder]=\"getPlaceholder('title.operator')\" formControlName=\"value\" />\n        </div>\n      }\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n\n      <Tabs>\n        <TabsList variant=\"ghost\">\n          @for (tab of tabs(); track $index) {\n            <Tab class=\"w-fit\" [value]=\"tab.path\" [active]=\"tab.path === currentTab()\" (click)=\"onTabChange(tab.path)\">\n              {{ tab.display | syslang | transloco }}\n            </Tab>\n          }\n        </TabsList>\n      </Tabs>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        <DropdownInput\n          [suggestions]=\"suggestions()\"\n          [selected]=\"getItems(filter.column)\"\n          [label]=\"filter.display || filter.alias | syslang | transloco\"\n          [placeholder]=\"'drawers.startTyping' | transloco\"\n          [noResultLabel]=\"'drawers.noResult' | transloco\"\n          (onFocus)=\"setFilterFocus($event, filter)\"\n          (onKeyUp)=\"onInputTyping($event)\"\n          (removeItem)=\"removeItem($event, filter)\"\n          (addItem)=\"addItem($event, filter)\" />\n      } @empty {\n        {{ 'drawers.noFilters' | transloco }}\n      }\n    </section>\n  </div>\n</div>\n", styles: [":host{--drawer-width: 46;--drawer-subdrawer-width: 400px;width:calc(100vw / 100 * var(--drawer-width) + var(--drawer-subdrawer-width));z-index:var(--z-drawer);grid-template-columns:0 1fr var(--drawer-subdrawer-width);transition:right .3s ease-in-out,transform .3s ease-in-out}:host[drawer-opened=true]{right:calc(var(--drawer-subdrawer-width) * -1);box-shadow:var(--drawer-box-shadow)}:host[drawer-extended=true]{width:100vw;right:calc(var(--spacing) * 0);grid-template-columns:1fr calc(var(--drawer-width) * 1%) var(--drawer-subdrawer-width);box-shadow:unset}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: DrawerNavbarComponent, selector: "DrawerNavbar, drawernavbar" }, { kind: "component", type: DropdownInputComponent, selector: "dropdown-input, DropdownInput", inputs: ["label", "placeholder", "noResultLabel", "suggestions", "selected"], outputs: ["onFocus", "onKeyUp", "removeItem", "addItem"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "noTruncate", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: DrawerAdvancedFiltersComponent, isStandalone: true, selector: "advanced-filters", host: { attributes: { "data-legacy": "" }, classAttribute: "fixed bg-background grid h-full top-0 -right-full justify-end" }, providers: [DrawerService, SyslangPipe, TranslocoPipe, provideTranslocoScope("drawers")], usesInheritance: true, ngImport: i0, template: "<div (click)=\"drawer.toggleExtension()\" (keydown.escape)=\"drawer.toggleExtension()\" [attr.aria-hidden]=\"true\"></div>\n\n<div class=\"flex h-full flex-col overflow-auto\">\n  <DrawerNavbar class=\"border-foreground/10 block border-b\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </DrawerNavbar>\n\n  <div class=\"flex h-full grow flex-col overflow-auto\">\n    <section class=\"flex flex-col gap-4 p-6\" [formGroup]=\"form\">\n      <!-- FIND IN -->\n      <h1 class=\"text-xl font-bold\">{{ 'drawers.findInContent' | transloco }}</h1>\n      <div class=\"flex items-center gap-4\" formGroupName=\"content\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInContent' | transloco }}</span>\n        <select\n          id=\"content-operator\"\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n          formControlName=\"operator\">\n          @for (data of selectData; track $index) {\n            <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n          }\n        </select>\n        <input\n          [variant]=\"inputVariant()\"\n          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\n      @if (enableFieldedSearch()) {\n        <div class=\"flex items-center gap-4\" formGroupName=\"title\">\n          <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInTitle' | transloco }}</span>\n          <select\n            id=\"title-operator\"\n            class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n            formControlName=\"operator\">\n            @for (data of selectData; track $index) {\n              <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n            }\n          </select>\n          <input id=\"title-value\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [placeholder]=\"getPlaceholder('title.operator')\" formControlName=\"value\" />\n        </div>\n      }\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n\n      <Tabs>\n        <TabsList variant=\"ghost\">\n          @for (tab of tabs(); track $index) {\n            <Tab class=\"w-fit\" [value]=\"tab.path\" [active]=\"tab.path === currentTab()\" (click)=\"onTabChange(tab.path)\">\n              {{ tab.display | syslang | transloco }}\n            </Tab>\n          }\n        </TabsList>\n      </Tabs>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        <DropdownInput\n          [suggestions]=\"suggestions()\"\n          [selected]=\"getItems(filter.column)\"\n          [label]=\"filter.display || filter.alias | syslang | transloco\"\n          [placeholder]=\"'drawers.startTyping' | transloco\"\n          [noResultLabel]=\"'drawers.noResult' | transloco\"\n          (onFocus)=\"setFilterFocus($event, filter)\"\n          (onKeyUp)=\"onInputTyping($event)\"\n          (removeItem)=\"removeItem($event, filter)\"\n          (addItem)=\"addItem($event, filter)\" />\n      } @empty {\n        {{ 'drawers.noFilters' | transloco }}\n      }\n    </section>\n  </div>\n</div>\n", styles: [":host{--drawer-width: 46;--drawer-subdrawer-width: 400px;width:calc(100vw / 100 * var(--drawer-width) + var(--drawer-subdrawer-width));z-index:var(--z-drawer);grid-template-columns:0 1fr var(--drawer-subdrawer-width);transition:right .3s ease-in-out,transform .3s ease-in-out}:host[drawer-opened=true]{right:calc(var(--drawer-subdrawer-width) * -1);box-shadow:var(--drawer-box-shadow)}:host[drawer-extended=true]{width:100vw;right:calc(var(--spacing) * 0);grid-template-columns:1fr calc(var(--drawer-width) * 1%) var(--drawer-subdrawer-width);box-shadow:unset}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: DrawerNavbarComponent, selector: "DrawerNavbar, drawernavbar" }, { kind: "component", type: DropdownInputComponent, selector: "dropdown-input, DropdownInput", inputs: ["label", "placeholder", "noResultLabel", "suggestions", "selected"], outputs: ["onFocus", "onKeyUp", "removeItem", "addItem"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "directive", type: InputComponent, selector: "input[type=\"text\"], input[type=\"email\"], input[type=\"number\"], input[type=\"password\"], input[type=\"tel\"], input[type=\"url\"], input[type=\"time\"], input[type=\"file\"]", inputs: ["class", "variant", "decoration"] }, { kind: "directive", type: TabsComponent, selector: "tabs, Tabs", inputs: ["class"] }, { kind: "directive", type: TabComponent, selector: "tab, Tab", inputs: ["class", "variant", "size", "noTruncate", "value", "active"], outputs: ["clicked"] }, { kind: "directive", type: TabsListComponent, selector: "tabs-list, TabsList", inputs: ["class", "variant", "size"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: SyslangPipe, name: "syslang" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: DrawerAdvancedFiltersComponent, decorators: [{
             type: Component,
@@ -13561,7 +13550,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                         TabComponent,
                         TabsListComponent
                     ], providers: [DrawerService, SyslangPipe, TranslocoPipe, provideTranslocoScope("drawers")], host: {
-                        class: "fixed bg-background grid h-full top-0 -right-full justify-end"
+                        class: "fixed bg-background grid h-full top-0 -right-full justify-end",
+                        "data-legacy": ""
                     }, template: "<div (click)=\"drawer.toggleExtension()\" (keydown.escape)=\"drawer.toggleExtension()\" [attr.aria-hidden]=\"true\"></div>\n\n<div class=\"flex h-full flex-col overflow-auto\">\n  <DrawerNavbar class=\"border-foreground/10 block border-b\">\n    <button [attr.title]=\"'drawers.search' | transloco\" (click)=\"onSearch()\">\n      {{ 'drawers.search' | transloco }}\n    </button>\n  </DrawerNavbar>\n\n  <div class=\"flex h-full grow flex-col overflow-auto\">\n    <section class=\"flex flex-col gap-4 p-6\" [formGroup]=\"form\">\n      <!-- FIND IN -->\n      <h1 class=\"text-xl font-bold\">{{ 'drawers.findInContent' | transloco }}</h1>\n      <div class=\"flex items-center gap-4\" formGroupName=\"content\">\n        <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInContent' | transloco }}</span>\n        <select\n          id=\"content-operator\"\n          class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n          formControlName=\"operator\">\n          @for (data of selectData; track $index) {\n            <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n          }\n        </select>\n        <input\n          [variant]=\"inputVariant()\"\n          id=\"content-value\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          [placeholder]=\"getPlaceholder('content.operator')\"\n          formControlName=\"value\" />\n      </div>\n      @if (enableFieldedSearch()) {\n        <div class=\"flex items-center gap-4\" formGroupName=\"title\">\n          <span class=\"w-1/3 font-semibold\">{{ 'drawers.findInTitle' | transloco }}</span>\n          <select\n            id=\"title-operator\"\n            class=\"hover:outline-primary focus:outline-primary border-foreground/10 bg-background hover:bg-muted focus:bg-muted h-8 w-full rounded-md border px-2 hover:outline focus:outline\"\n            formControlName=\"operator\">\n            @for (data of selectData; track $index) {\n              <option [value]=\"data.operator\">{{ 'drawers.' + data.display | transloco }}</option>\n            }\n          </select>\n          <input id=\"title-value\" type=\"text\" autocomplete=\"off\" spellcheck=\"false\" [placeholder]=\"getPlaceholder('title.operator')\" formControlName=\"value\" />\n        </div>\n      }\n\n      <!-- TABS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.inScope' | transloco }}&nbsp;&quot;{{ currentTab() }}&quot;</h1>\n\n      <Tabs>\n        <TabsList variant=\"ghost\">\n          @for (tab of tabs(); track $index) {\n            <Tab class=\"w-fit\" [value]=\"tab.path\" [active]=\"tab.path === currentTab()\" (click)=\"onTabChange(tab.path)\">\n              {{ tab.display | syslang | transloco }}\n            </Tab>\n          }\n        </TabsList>\n      </Tabs>\n\n      <!-- FILTERS -->\n      <h1 class=\"mt-4 text-xl font-bold\">{{ 'drawers.applyFilters' | transloco }}</h1>\n      @for (filter of filters(); track $index) {\n        <DropdownInput\n          [suggestions]=\"suggestions()\"\n          [selected]=\"getItems(filter.column)\"\n          [label]=\"filter.display || filter.alias | syslang | transloco\"\n          [placeholder]=\"'drawers.startTyping' | transloco\"\n          [noResultLabel]=\"'drawers.noResult' | transloco\"\n          (onFocus)=\"setFilterFocus($event, filter)\"\n          (onKeyUp)=\"onInputTyping($event)\"\n          (removeItem)=\"removeItem($event, filter)\"\n          (addItem)=\"addItem($event, filter)\" />\n      } @empty {\n        {{ 'drawers.noFilters' | transloco }}\n      }\n    </section>\n  </div>\n</div>\n", styles: [":host{--drawer-width: 46;--drawer-subdrawer-width: 400px;width:calc(100vw / 100 * var(--drawer-width) + var(--drawer-subdrawer-width));z-index:var(--z-drawer);grid-template-columns:0 1fr var(--drawer-subdrawer-width);transition:right .3s ease-in-out,transform .3s ease-in-out}:host[drawer-opened=true]{right:calc(var(--drawer-subdrawer-width) * -1);box-shadow:var(--drawer-box-shadow)}:host[drawer-extended=true]{width:100vw;right:calc(var(--spacing) * 0);grid-template-columns:1fr calc(var(--drawer-width) * 1%) var(--drawer-subdrawer-width);box-shadow:unset}\n"] }]
         }], ctorParameters: () => [] });
 
@@ -14053,7 +14043,7 @@ class AdvancedSearchComponent {
                 const { queryText } = getState(this.selectionStore);
                 return queryText;
             },
-            computation: (queryText) => {
+            computation: queryText => {
                 const text = queryText || "";
                 return text ? text.trim() : "";
             } }] : [{
@@ -14061,7 +14051,7 @@ class AdvancedSearchComponent {
                 const { queryText } = getState(this.selectionStore);
                 return queryText;
             },
-            computation: (queryText) => {
+            computation: queryText => {
                 const text = queryText || "";
                 return text ? text.trim() : "";
             }
@@ -14074,21 +14064,13 @@ class AdvancedSearchComponent {
         this.queryText.set("");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: AdvancedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: AdvancedSearchComponent, isStandalone: true, selector: "advanced-search", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null }, previewStrategy: { classPropertyName: "previewStrategy", publicName: "previewStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, providers: [provideTranslocoScope("drawers")], ngImport: i0, template: "@if (article()) {\r\n  <div\r\n    [class]=\"\r\n      cn(\r\n        'scroll-stable flex flex-col overflow-y-auto pr-3 pb-6 pl-6',\r\n        '[&_details]:border-muted-foreground/18 [&_details]:border-b',\r\n        '[&_details>summary]:bg-menu [&_details_details]:last:border-b-0',\r\n        '[&_details>summary>i>svg]:transition-transform [&_details>summary>i>svg]:duration-300',\r\n        '[&>details>summary>i>svg]:group-open/parent:rotate-180'\r\n      )\r\n    \">\r\n    <section class=\"mt-6 mb-4 flex w-full flex-col gap-6\">\r\n      <header\r\n        id=\"panel-control\"\r\n        class=\"focus-within:outline-primary not-focus-within:hover:outline-muted-foreground group flex rounded focus-within:outline hover:outline\">\r\n        <div\r\n          class=\"bg-muted flex grow items-center gap-2 rounded-s rounded-e-none px-3\">\r\n          <input\r\n            id=\"advanced-search-input\"\r\n            type=\"search\"\r\n            class=\"grow focus:outline-none\"\r\n            autocomplete=\"off\"\r\n            spellcheck=\"false\"\r\n            [attr.placeholder]=\"'drawers.inputPlaceholder' | transloco\"\r\n            [attr.aria-label]=\"'drawers.inputPlaceholder' | transloco\"\r\n            [ngModel]=\"queryText()\"\r\n            (ngModelChange)=\"queryText.set($event)\"\r\n            (keydown.enter)=\"executeSearch()\" />\r\n\r\n          @if (queryText() !== \"\") {\r\n            <button\r\n              [iconOnly]=\"true\"\r\n              size=\"sm\"\r\n              [attr.title]=\"'clear' | transloco\"\r\n              [attr.aria-label]=\"'clear' | transloco\"\r\n              (click)=\"clearInput()\"\r\n              (keydown.enter)=\"clearInput()\">\r\n              <xmark-icon />\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <button\r\n          class=\"size-8 rounded-s-none rounded-e-lg\"\r\n          [disabled]=\"queryText() === '' || null\"\r\n          [attr.title]=\"'search' | transloco\"\r\n          [attr.aria-label]=\"'search' | transloco\"\r\n          (click)=\"executeSearch()\">\r\n          <magnifying-glass-icon />\r\n        </button>\r\n      </header>\r\n    </section>\r\n\r\n    <!-- the same name is used everywhere to simulate an accordion -->\r\n    <!-- extracts -->\r\n    <ExtractsPanel [article]=\"article()\" />\r\n\r\n    <!-- labels -->\r\n    <LabelsPanel [article]=\"article()\" />\r\n\r\n    <!-- entities -->\r\n    <EntitiesPanel [article]=\"article()\" />\r\n\r\n    <!-- similar documents -->\r\n    <SimilarDocumentsPanel\r\n      [article]=\"article()\"\r\n      [strategy]=\"previewStrategy()\"\r\n      (selected)=\"selected.emit($event)\" />\r\n  </div>\r\n}\r\n", styles: [":host{--panel-max-height: none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: SimilarDocumentsPanel, selector: "similar-documents-panel, SimilarDocumentsPanel, similardocumentspanel", inputs: ["article", "strategy"], outputs: ["selected"] }, { kind: "component", type: EntitiesPanel, selector: "entities-panel,EntitiesPanel,entitiesPanel", inputs: ["article"] }, { kind: "component", type: LabelsPanel, selector: "labels-panel, LabelsPanel, labelspanel", inputs: ["article"] }, { kind: "component", type: ExtractsPanel, selector: "extracts-panel, ExtractsPanel, extractspanel", inputs: ["article"] }, { kind: "component", type: XMarkIcon, selector: "XMarkIcon, xmark-icon, x-mark-icon", inputs: ["class"] }, { kind: "component", type: MagnifyingGlassIcon, selector: "magnifying-glass-icon, MagnifyingGlassIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: AdvancedSearchComponent, isStandalone: true, selector: "advanced-search", inputs: { article: { classPropertyName: "article", publicName: "article", isSignal: true, isRequired: true, transformFunction: null }, previewStrategy: { classPropertyName: "previewStrategy", publicName: "previewStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { attributes: { "data-legacy": "" } }, providers: [provideTranslocoScope("drawers")], ngImport: i0, template: "@if (article()) {\r\n  <div\r\n    [class]=\"\r\n      cn(\r\n        'scroll-stable flex flex-col overflow-y-auto pr-3 pb-6 pl-6',\r\n        '[&_details]:border-muted-foreground/18 [&_details]:border-b',\r\n        '[&_details>summary]:bg-menu [&_details_details]:last:border-b-0',\r\n        '[&_details>summary>i>svg]:transition-transform [&_details>summary>i>svg]:duration-300',\r\n        '[&>details>summary>i>svg]:group-open/parent:rotate-180'\r\n      )\r\n    \">\r\n    <section class=\"mt-6 mb-4 flex w-full flex-col gap-6\">\r\n      <header\r\n        id=\"panel-control\"\r\n        class=\"focus-within:outline-primary not-focus-within:hover:outline-muted-foreground group flex rounded focus-within:outline hover:outline\">\r\n        <div\r\n          class=\"bg-muted flex grow items-center gap-2 rounded-s rounded-e-none px-3\">\r\n          <input\r\n            id=\"advanced-search-input\"\r\n            type=\"search\"\r\n            class=\"grow focus:outline-none\"\r\n            autocomplete=\"off\"\r\n            spellcheck=\"false\"\r\n            [attr.placeholder]=\"'drawers.inputPlaceholder' | transloco\"\r\n            [attr.aria-label]=\"'drawers.inputPlaceholder' | transloco\"\r\n            [ngModel]=\"queryText()\"\r\n            (ngModelChange)=\"queryText.set($event)\"\r\n            (keydown.enter)=\"executeSearch()\" />\r\n\r\n          @if (queryText() !== \"\") {\r\n            <button\r\n              [iconOnly]=\"true\"\r\n              size=\"sm\"\r\n              [attr.title]=\"'clear' | transloco\"\r\n              [attr.aria-label]=\"'clear' | transloco\"\r\n              (click)=\"clearInput()\"\r\n              (keydown.enter)=\"clearInput()\">\r\n              <xmark-icon />\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <button\r\n          class=\"size-8 rounded-s-none rounded-e-lg\"\r\n          [disabled]=\"queryText() === '' || null\"\r\n          [attr.title]=\"'search' | transloco\"\r\n          [attr.aria-label]=\"'search' | transloco\"\r\n          (click)=\"executeSearch()\">\r\n          <magnifying-glass-icon />\r\n        </button>\r\n      </header>\r\n    </section>\r\n\r\n    <!-- the same name is used everywhere to simulate an accordion -->\r\n    <!-- extracts -->\r\n    <ExtractsPanel [article]=\"article()\" />\r\n\r\n    <!-- labels -->\r\n    <LabelsPanel [article]=\"article()\" />\r\n\r\n    <!-- entities -->\r\n    <EntitiesPanel [article]=\"article()\" />\r\n\r\n    <!-- similar documents -->\r\n    <SimilarDocumentsPanel\r\n      [article]=\"article()\"\r\n      [strategy]=\"previewStrategy()\"\r\n      (selected)=\"selected.emit($event)\" />\r\n  </div>\r\n}\r\n", styles: [":host{--panel-max-height: none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: SimilarDocumentsPanel, selector: "similar-documents-panel, SimilarDocumentsPanel, similardocumentspanel", inputs: ["article", "strategy"], outputs: ["selected"] }, { kind: "component", type: EntitiesPanel, selector: "entities-panel,EntitiesPanel,entitiesPanel", inputs: ["article"] }, { kind: "component", type: LabelsPanel, selector: "labels-panel, LabelsPanel, labelspanel", inputs: ["article"] }, { kind: "component", type: ExtractsPanel, selector: "extracts-panel, ExtractsPanel, extractspanel", inputs: ["article"] }, { kind: "component", type: XMarkIcon, selector: "XMarkIcon, xmark-icon, x-mark-icon", inputs: ["class"] }, { kind: "component", type: MagnifyingGlassIcon, selector: "magnifying-glass-icon, MagnifyingGlassIcon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: AdvancedSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: "advanced-search", standalone: true, providers: [provideTranslocoScope("drawers")], imports: [
-                        FormsModule,
-                        ButtonComponent,
-                        TranslocoPipe,
-                        SimilarDocumentsPanel,
-                        EntitiesPanel,
-                        LabelsPanel,
-                        ExtractsPanel,
-                        XMarkIcon,
-                        MagnifyingGlassIcon
-                    ], template: "@if (article()) {\r\n  <div\r\n    [class]=\"\r\n      cn(\r\n        'scroll-stable flex flex-col overflow-y-auto pr-3 pb-6 pl-6',\r\n        '[&_details]:border-muted-foreground/18 [&_details]:border-b',\r\n        '[&_details>summary]:bg-menu [&_details_details]:last:border-b-0',\r\n        '[&_details>summary>i>svg]:transition-transform [&_details>summary>i>svg]:duration-300',\r\n        '[&>details>summary>i>svg]:group-open/parent:rotate-180'\r\n      )\r\n    \">\r\n    <section class=\"mt-6 mb-4 flex w-full flex-col gap-6\">\r\n      <header\r\n        id=\"panel-control\"\r\n        class=\"focus-within:outline-primary not-focus-within:hover:outline-muted-foreground group flex rounded focus-within:outline hover:outline\">\r\n        <div\r\n          class=\"bg-muted flex grow items-center gap-2 rounded-s rounded-e-none px-3\">\r\n          <input\r\n            id=\"advanced-search-input\"\r\n            type=\"search\"\r\n            class=\"grow focus:outline-none\"\r\n            autocomplete=\"off\"\r\n            spellcheck=\"false\"\r\n            [attr.placeholder]=\"'drawers.inputPlaceholder' | transloco\"\r\n            [attr.aria-label]=\"'drawers.inputPlaceholder' | transloco\"\r\n            [ngModel]=\"queryText()\"\r\n            (ngModelChange)=\"queryText.set($event)\"\r\n            (keydown.enter)=\"executeSearch()\" />\r\n\r\n          @if (queryText() !== \"\") {\r\n            <button\r\n              [iconOnly]=\"true\"\r\n              size=\"sm\"\r\n              [attr.title]=\"'clear' | transloco\"\r\n              [attr.aria-label]=\"'clear' | transloco\"\r\n              (click)=\"clearInput()\"\r\n              (keydown.enter)=\"clearInput()\">\r\n              <xmark-icon />\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <button\r\n          class=\"size-8 rounded-s-none rounded-e-lg\"\r\n          [disabled]=\"queryText() === '' || null\"\r\n          [attr.title]=\"'search' | transloco\"\r\n          [attr.aria-label]=\"'search' | transloco\"\r\n          (click)=\"executeSearch()\">\r\n          <magnifying-glass-icon />\r\n        </button>\r\n      </header>\r\n    </section>\r\n\r\n    <!-- the same name is used everywhere to simulate an accordion -->\r\n    <!-- extracts -->\r\n    <ExtractsPanel [article]=\"article()\" />\r\n\r\n    <!-- labels -->\r\n    <LabelsPanel [article]=\"article()\" />\r\n\r\n    <!-- entities -->\r\n    <EntitiesPanel [article]=\"article()\" />\r\n\r\n    <!-- similar documents -->\r\n    <SimilarDocumentsPanel\r\n      [article]=\"article()\"\r\n      [strategy]=\"previewStrategy()\"\r\n      (selected)=\"selected.emit($event)\" />\r\n  </div>\r\n}\r\n", styles: [":host{--panel-max-height: none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"] }]
+            args: [{ selector: "advanced-search", standalone: true, providers: [provideTranslocoScope("drawers")], imports: [FormsModule, ButtonComponent, TranslocoPipe, SimilarDocumentsPanel, EntitiesPanel, LabelsPanel, ExtractsPanel, XMarkIcon, MagnifyingGlassIcon], host: {
+                        "data-legacy": ""
+                    }, template: "@if (article()) {\r\n  <div\r\n    [class]=\"\r\n      cn(\r\n        'scroll-stable flex flex-col overflow-y-auto pr-3 pb-6 pl-6',\r\n        '[&_details]:border-muted-foreground/18 [&_details]:border-b',\r\n        '[&_details>summary]:bg-menu [&_details_details]:last:border-b-0',\r\n        '[&_details>summary>i>svg]:transition-transform [&_details>summary>i>svg]:duration-300',\r\n        '[&>details>summary>i>svg]:group-open/parent:rotate-180'\r\n      )\r\n    \">\r\n    <section class=\"mt-6 mb-4 flex w-full flex-col gap-6\">\r\n      <header\r\n        id=\"panel-control\"\r\n        class=\"focus-within:outline-primary not-focus-within:hover:outline-muted-foreground group flex rounded focus-within:outline hover:outline\">\r\n        <div\r\n          class=\"bg-muted flex grow items-center gap-2 rounded-s rounded-e-none px-3\">\r\n          <input\r\n            id=\"advanced-search-input\"\r\n            type=\"search\"\r\n            class=\"grow focus:outline-none\"\r\n            autocomplete=\"off\"\r\n            spellcheck=\"false\"\r\n            [attr.placeholder]=\"'drawers.inputPlaceholder' | transloco\"\r\n            [attr.aria-label]=\"'drawers.inputPlaceholder' | transloco\"\r\n            [ngModel]=\"queryText()\"\r\n            (ngModelChange)=\"queryText.set($event)\"\r\n            (keydown.enter)=\"executeSearch()\" />\r\n\r\n          @if (queryText() !== \"\") {\r\n            <button\r\n              [iconOnly]=\"true\"\r\n              size=\"sm\"\r\n              [attr.title]=\"'clear' | transloco\"\r\n              [attr.aria-label]=\"'clear' | transloco\"\r\n              (click)=\"clearInput()\"\r\n              (keydown.enter)=\"clearInput()\">\r\n              <xmark-icon />\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <button\r\n          class=\"size-8 rounded-s-none rounded-e-lg\"\r\n          [disabled]=\"queryText() === '' || null\"\r\n          [attr.title]=\"'search' | transloco\"\r\n          [attr.aria-label]=\"'search' | transloco\"\r\n          (click)=\"executeSearch()\">\r\n          <magnifying-glass-icon />\r\n        </button>\r\n      </header>\r\n    </section>\r\n\r\n    <!-- the same name is used everywhere to simulate an accordion -->\r\n    <!-- extracts -->\r\n    <ExtractsPanel [article]=\"article()\" />\r\n\r\n    <!-- labels -->\r\n    <LabelsPanel [article]=\"article()\" />\r\n\r\n    <!-- entities -->\r\n    <EntitiesPanel [article]=\"article()\" />\r\n\r\n    <!-- similar documents -->\r\n    <SimilarDocumentsPanel\r\n      [article]=\"article()\"\r\n      [strategy]=\"previewStrategy()\"\r\n      (selected)=\"selected.emit($event)\" />\r\n  </div>\r\n}\r\n", styles: [":host{--panel-max-height: none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"] }]
         }], propDecorators: { article: [{ type: i0.Input, args: [{ isSignal: true, alias: "article", required: true }] }], previewStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewStrategy", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 const COMPONENTS_FOR_DOCUMENT_TYPE = new InjectionToken("COMPONENTS_FOR_DOCUMENT_TYPE");