@sinequa/atomic-angular 1.16.0 → 1.18.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -1995,7 +1995,8 @@ const QUERY_PARAMS_DEFAULTS = {
     aggregations: undefined,
     orderBy: "",
     groupBy: "",
-    neuralSearch: undefined
+    neuralSearch: undefined,
+    aggregation_overrides: undefined
 };
 const QueryParamsStore = signalStore({ providedIn: "root" }, withDevtools("QueryParams"), withQueryParamsFeatures());
 function withQueryParamsFeatures() {
@@ -2091,7 +2092,7 @@ function withQueryParamsFeatures() {
          * - If the filter already exists, its values are updated.
          */
         updateFilter(newFilter, audit, options) {
-            patchState(store, (state) => {
+            patchState(store, state => {
                 if (newFilter === undefined)
                     return state;
                 // is filter contains values, check if the operator is set, otherwise set operator to "in" by default
@@ -2100,14 +2101,14 @@ function withQueryParamsFeatures() {
                 }
                 const currentActiveFilters = state.filters || [];
                 let newState;
-                const filterFound = currentActiveFilters.find((f) => f.field === newFilter.field);
+                const filterFound = currentActiveFilters.find(f => f.field === newFilter.field);
                 // if the filter has no name (might be coming from a metadata appliance)
                 if (!newFilter.name || !filterFound?.name) {
                     // cancel if a filter is found for the current field which contains the value we want to add
                     if (filterFound &&
                         newFilter.value &&
                         (filterFound.value?.toLowerCase() === newFilter.value?.toLowerCase() ||
-                            filterFound.values?.some((v) => v?.toLowerCase() === newFilter.value?.toLowerCase()))) {
+                            filterFound.values?.some(v => v?.toLowerCase() === newFilter.value?.toLowerCase()))) {
                         return state;
                     }
                     if (filterFound) {
@@ -2126,7 +2127,7 @@ function withQueryParamsFeatures() {
                             operator: newFilter.operator || filterFound.operator || "in"
                         };
                         // find the index of the existing filter for the field and replace it with the merged filter
-                        const existingIndex = currentActiveFilters.findIndex((f) => f.field === newFilter.field);
+                        const existingIndex = currentActiveFilters.findIndex(f => f.field === newFilter.field);
                         const filters = currentActiveFilters.toSpliced(existingIndex, 1, filterToApply);
                         newState = { ...state, filters };
                     }
@@ -2139,7 +2140,7 @@ function withQueryParamsFeatures() {
                 }
                 else {
                     // search filter by name not by field because many filters can have the same field but different names
-                    const existing = currentActiveFilters.findIndex((f) => f.name === newFilter.name);
+                    const existing = currentActiveFilters.findIndex(f => f.name === newFilter.name);
                     // Add filter if it doesn't exist and has values
                     if (existing === -1) {
                         newState = { ...state, filters: [...(currentActiveFilters || []), newFilter] };
@@ -2147,14 +2148,11 @@ function withQueryParamsFeatures() {
                     if (existing >= 0) {
                         // remove filter if between operator is selected but no values are selected
                         if (newFilter.operator === "between" && newFilter.start === undefined && newFilter.end === undefined) {
-                            newState = { ...state, filters: currentActiveFilters.filter((f) => f.name !== newFilter.name) };
+                            newState = { ...state, filters: currentActiveFilters.filter(f => f.name !== newFilter.name) };
                         }
                         // Remove filter if no values are selected
-                        if (newFilter.operator !== "between" &&
-                            newFilter.filters === undefined &&
-                            newFilter.value === undefined &&
-                            newFilter.values === undefined) {
-                            newState = { ...state, filters: (currentActiveFilters || []).filter((f) => f?.name !== newFilter.name) };
+                        if (newFilter.operator !== "between" && newFilter.filters === undefined && newFilter.value === undefined && newFilter.values === undefined) {
+                            newState = { ...state, filters: (currentActiveFilters || []).filter(f => f?.name !== newFilter.name) };
                         }
                         // Update filter values
                         if (existing >= 0) {
@@ -2175,8 +2173,8 @@ function withQueryParamsFeatures() {
         removeFilter(field, options) {
             if (!field)
                 return;
-            patchState(store, (state) => {
-                const filters = state.filters?.filter((f) => f.field !== field);
+            patchState(store, state => {
+                const filters = state.filters?.filter(f => f.field !== field);
                 const newState = { ...state, filters };
                 this._updateUrlQueryParams(newState, undefined, options);
                 return newState;
@@ -2192,11 +2190,11 @@ function withQueryParamsFeatures() {
                 return;
             const filters = getState(store).filters || [];
             // if the filter is not found by name, check if it is found by field
-            if (filters.some((f) => f.name === name) === false) {
+            if (filters.some(f => f.name === name) === false) {
                 return this.removeFilter(column, options);
             }
-            patchState(store, (state) => {
-                const filters = state.filters?.filter((f) => f.name !== name);
+            patchState(store, state => {
+                const filters = state.filters?.filter(f => f.name !== name);
                 const newState = { ...state, filters };
                 this._updateUrlQueryParams(newState, undefined, options);
                 return newState;
@@ -2210,7 +2208,7 @@ function withQueryParamsFeatures() {
          * It uses the `patchState` function to apply the state change.
          */
         clearFilters(options) {
-            patchState(store, (state) => {
+            patchState(store, state => {
                 const newState = { ...state, filters: [], basket: undefined };
                 this._updateUrlQueryParams(newState, undefined, options);
                 return newState;
@@ -2223,7 +2221,7 @@ function withQueryParamsFeatures() {
          * It uses the `patchState` function to apply the state change.
          */
         clearBasket(options) {
-            patchState(store, (state) => {
+            patchState(store, state => {
                 const newState = { ...state, basket: undefined };
                 this._updateUrlQueryParams(newState, undefined, options);
                 return newState;
@@ -2235,7 +2233,7 @@ function withQueryParamsFeatures() {
          * @param params - A partial object containing the query parameters to be updated.
          */
         patch(params, audit, options) {
-            patchState(store, (state) => {
+            patchState(store, state => {
                 // get the hash path without the query params and without the leading '#'
                 const path = window.location.hash.split("?")[0].replace(/^#/, "");
                 const newState = { ...state, ...params, path };
@@ -2277,11 +2275,11 @@ function withQueryParamsFeatures() {
             // first try to find the filter by name if name is provided
             let filter;
             if (name) {
-                filter = getState(store).filters?.find((f) => f?.name === name);
+                filter = getState(store).filters?.find(f => f?.name === name);
             }
             if (!filter && field) {
                 // if not found by name, try to find it by field if field is provided
-                filter = getState(store).filters?.find((f) => f?.field === field);
+                filter = getState(store).filters?.find(f => f?.field === field);
             }
             // if filter is found, return null
             if (!filter)
@@ -2317,7 +2315,7 @@ function withQueryParamsFeatures() {
          * @returns Query The constructed query object.
          */
         getQuery() {
-            const { filters: allFilters = [], sort, tab, basket, text: queryText = "", spellingCorrectionMode } = getState(store);
+            const { filters: allFilters = [], sort, tab, basket, text: queryText = "", spellingCorrectionMode, aggregation_overrides } = getState(store);
             // check if a query name is defined
             // if not, try to get it from the route data or from the default query in the app store
             let { name } = getState(store);
@@ -2328,16 +2326,16 @@ function withQueryParamsFeatures() {
             }
             let text = queryText;
             // remove concepts filters from the query to add them in the query expression
-            const [conceptsFilters] = allFilters.filter((f) => f.field === "concepts");
+            const [conceptsFilters] = allFilters.filter(f => f.field === "concepts");
             if (conceptsFilters) {
                 const concepts = conceptsFilters.filters
-                    ? conceptsFilters.filters.map((f) => f.value)
+                    ? conceptsFilters.filters.map(f => f.value)
                     : [conceptsFilters.value];
                 text = addConcepts(queryText, concepts);
             }
-            const filters = allFilters.filter((f) => f.field !== "concepts");
+            const filters = allFilters.filter(f => f.field !== "concepts");
             const f = filters.length > 1 ? { operator: "and", filters } : filters[0];
-            const query = runInInjectionContext(injector, () => buildQuery({ filters: f, name, sort, spellingCorrectionMode, tab, text, basket }));
+            const query = runInInjectionContext(injector, () => buildQuery({ filters: f, name, sort, spellingCorrectionMode, tab, text, basket, aggregation_overrides }));
             return query;
         }
     })));
@@ -9702,6 +9700,15 @@ class AggregationDateComponent {
      * `selectionChange` (see its live-emission timing).
      */
     filtersChange = output();
+    /**
+     * Emits the query's `aggregation_overrides` to use with the selection, in controlled mode:
+     * the `[query]`'s own overrides with this aggregation's entry (keyed by aggregation name)
+     * set to the mask of the selected masked date (`YYYY`, `YYYY-MM`), or removed when the
+     * selection has none. `undefined` when no override is left. Emitted right before
+     * `filtersChange`, on the same occasions — the host assigns it to the query it fetches with.
+     * In default mode the component writes it to the `QueryParamsStore` itself.
+     */
+    aggregationOverridesChange = output();
     /* collapse state */
     isCollapsed = linkedSignal(() => this.collapsed(), ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
     expanded = computed(() => (this.isCollapsed() ? null : ""), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
@@ -9860,8 +9867,61 @@ class AggregationDateComponent {
         // a date selection is either a preset (the item's value — the real filter
         // value, robust across days) or a custom range (its bounds) — never both
         this.selectionChange.emit(option && option !== "custom-range" ? { kind: "option", option: this.optionToItemValue(option) ?? option } : this.toRangeSelection(filter));
+        this.aggregationOverridesChange.emit(this.overridesWithMask(this.selectedMask()));
         this.filtersChange.emit(legacyFilterToFilter(filter));
     }
+    /** Mask of the selected preset when it is a masked date; none for a custom range or a regular preset. */
+    selectedMask() {
+        const option = this.form.value.option;
+        if (!option || option === "custom-range")
+            return undefined;
+        return this.dateOptions().find((o) => o.display === option)?.mask;
+    }
+    /** The `aggregation_overrides` of the query this component works against. */
+    currentOverrides() {
+        return this.isControlled() ? this.controlledQuery()?.aggregation_overrides : this.queryParamsStore.aggregation_overrides?.();
+    }
+    /**
+     * The current overrides with this aggregation's entry set to `mask`, or removed when `mask` is
+     * `undefined`. Entries of other aggregations are kept. `undefined` when no override is left.
+     */
+    overridesWithMask(mask) {
+        const key = this.aggregation()?.name ?? this.name();
+        const overrides = { ...this.currentOverrides() };
+        if (key) {
+            if (mask)
+                overrides[key] = { mask };
+            else
+                delete overrides[key];
+        }
+        return Object.keys(overrides).length > 0 ? overrides : undefined;
+    }
+    /**
+     * Writes the mask of the selection to the store, without touching the URL. Done *before* the
+     * filter update, which is what triggers the search, so that search already carries the override.
+     */
+    storeMask(mask) {
+        const next = this.overridesWithMask(mask);
+        if (JSON.stringify(next) === JSON.stringify(this.currentOverrides()))
+            return;
+        this.queryParamsStore.patch({ aggregation_overrides: next }, undefined, { syncUrl: false });
+    }
+    /**
+     * Label of a masked date item that has no `display` of its own, in the active language
+     * (`2016`, `mars 2016` / `March 2016`). `undefined` for any other option.
+     */
+    maskedLabel(option) {
+        if (!option.mask || !option.value || option.display !== option.value)
+            return undefined;
+        const [year, month] = option.value.split("-").map(Number);
+        const format = option.mask === "YYYY" ? { year: "numeric" } : { year: "numeric", month: "long" };
+        try {
+            return new Intl.DateTimeFormat(this.lang(), { ...format, timeZone: "UTC" }).format(new Date(Date.UTC(year, (month ?? 1) - 1, 1)));
+        }
+        catch {
+            return undefined;
+        }
+    }
     select() {
         this.selection.set(true);
     }
@@ -9871,7 +9931,9 @@ class AggregationDateComponent {
                 this.emitCurrentSelection();
             }
             else {
-                this.queryParamsStore.updateFilter(this.getFormValueFilter(), undefined, { syncUrl: this.syncUrl() });
+                const filter = this.getFormValueFilter();
+                this.storeMask(this.selectedMask());
+                this.queryParamsStore.updateFilter(filter, undefined, { syncUrl: this.syncUrl() });
             }
             this.selection.set(false);
             this.onApply.emit();
@@ -9895,9 +9957,11 @@ class AggregationDateComponent {
         if (agg && notify) {
             if (this.isControlled()) {
                 this.selectionChange.emit({ kind: "range" });
+                this.aggregationOverridesChange.emit(this.overridesWithMask(undefined));
                 this.filtersChange.emit(undefined);
             }
             else {
+                this.storeMask(undefined);
                 this.queryParamsStore.removeFilterByName(agg.name, undefined, { syncUrl: this.syncUrl() });
             }
             this.onClear.emit();
@@ -9940,8 +10004,8 @@ class AggregationDateComponent {
             this.clear(false);
             return;
         }
-        const { operator, value } = filter;
-        const code = this.dateOptions().find((option) => option.operator === operator && option.value === value)?.display ?? "custom-range";
+        const { operator } = filter;
+        const code = this.findPresetCode(filter) ?? "custom-range";
         let from = null, to = null;
         if (code === "custom-range") {
             switch (operator) {
@@ -9956,9 +10020,7 @@ class AggregationDateComponent {
                     to = filter.end;
                     break;
                 case "and": {
-                    const filters = filter.filters;
-                    from = filters?.find((f) => f.operator === "gte")?.value ?? null;
-                    to = filters?.find((f) => f.operator === "lte")?.value ?? null;
+                    ({ from, to } = this.toBounds(filter.filters));
                     break;
                 }
             }
@@ -9972,6 +10034,37 @@ class AggregationDateComponent {
         };
         this.form.setValue(formValue);
     }
+    /**
+     * Finds the preset (its option code) a committed filter stands for. A preset whose
+     * item is a bounds expression commits as an `and` of `gte` / `lt` — the same shape
+     * as a custom range, and one that does not always carry the item `value` back — so
+     * besides the `operator` / `value` match the bounds are compared to each option's.
+     */
+    findPresetCode(filter) {
+        const options = this.dateOptions();
+        const exact = options.find((option) => option.operator === filter.operator && option.value === filter.value);
+        if (exact)
+            return exact.display;
+        if (filter.operator !== "and")
+            return undefined;
+        const { from, to } = this.toBounds(filter.filters);
+        if (!from || !to)
+            return undefined;
+        return options.find((option) => {
+            if (option.operator !== "and")
+                return false;
+            const bounds = this.toBounds(option.filters);
+            return bounds.from === from && bounds.to === to;
+        })?.display;
+    }
+    /** Lower (`gte`) and upper (`lt` or `lte`) bounds of an `and` filter's sub-filters. */
+    toBounds(filters) {
+        const bound = (...operators) => {
+            const value = filters?.find((f) => operators.includes(f.operator))?.value;
+            return value === undefined || value === null ? null : String(value);
+        };
+        return { from: bound("gte"), to: bound("lte", "lt") };
+    }
     /**
      * Derives the form from a controlled selection.
      * `{ kind: "option" }` re-selects the date option whose item `value` matches —
@@ -10045,12 +10138,8 @@ class AggregationDateComponent {
             case "between":
                 return { kind: "range", from: filter.start, to: filter.end };
             case "and": {
-                const filters = filter.filters ?? [];
-                return {
-                    kind: "range",
-                    from: filters.find(f => f.operator === "gte")?.value,
-                    to: filters.find(f => f.operator === "lte")?.value
-                };
+                const { from, to } = this.toBounds(filter.filters);
+                return { kind: "range", from: from ?? undefined, to: to ?? undefined };
             }
             default:
                 return { kind: "range", from: filter.value, to: filter.value };
@@ -10131,7 +10220,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        type=\"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        type=\"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" }] });
+    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", aggregationOverridesChange: "aggregationOverridesChange", 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        type=\"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        type=\"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 option.display) {\n        <li\n          role=\"listitem\"\n          tabindex=\"0\"\n          (click)=\"radio.click()\"\n          [attr.aria-label]=\"\n            maskedLabel(option) ?? (option.display | syslang | transloco)\n          \"\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            {{ maskedLabel(option) ?? (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,
@@ -10156,8 +10245,8 @@ 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        type=\"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        type=\"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"] }] } });
+                    }, 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        type=\"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        type=\"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 option.display) {\n        <li\n          role=\"listitem\"\n          tabindex=\"0\"\n          (click)=\"radio.click()\"\n          [attr.aria-label]=\"\n            maskedLabel(option) ?? (option.display | syslang | transloco)\n          \"\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            {{ maskedLabel(option) ?? (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"] }], aggregationOverridesChange: [{ type: i0.Output, args: ["aggregationOverridesChange"] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
 
 /**
  * Component that allows users to select a date or a date range for filtering search results.
@@ -10166,7 +10255,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        type=\"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        type=\"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" }] });
+    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        type=\"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        type=\"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 option.display) {\n        <li\n          role=\"listitem\"\n          tabindex=\"0\"\n          (click)=\"radio.click()\"\n          [attr.aria-label]=\"\n            maskedLabel(option) ?? (option.display | syslang | transloco)\n          \"\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            {{ maskedLabel(option) ?? (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,
@@ -10183,7 +10272,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        type=\"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        type=\"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"] }]
+                    }, 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        type=\"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        type=\"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 option.display) {\n        <li\n          role=\"listitem\"\n          tabindex=\"0\"\n          (click)=\"radio.click()\"\n          [attr.aria-label]=\"\n            maskedLabel(option) ?? (option.display | syslang | transloco)\n          \"\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            {{ maskedLabel(option) ?? (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 {
@@ -16036,7 +16125,7 @@ class AggregationComponent {
       />
     }
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: AggregationListComponent, selector: "AggregationList, aggregation-list, aggregationlist", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "showCheckbox", "applyOnSelect", "syncUrl", "query", "aggregation", "selection", "hideWhenEmpty", "itemTemplate", "searchText"], outputs: ["onSelect", "onApply", "onClear", "selectionChange", "filtersChange", "searchTextChange"] }, { kind: "component", type: AggregationTreeComponent, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "showCheckbox", "applyOnSelect", "expandedLevel", "syncUrl", "query", "aggregation", "selection", "hideWhenEmpty", "itemTemplate", "searchText"], outputs: ["onSelect", "onApply", "onClear", "selectionChange", "filtersChange", "searchTextChange"] }, { kind: "component", type: AggregationDateComponent, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: ["name", "column", "id", "collapsible", "collapsed", "searchable", "showFiltersCount", "syncUrl", "query", "aggregation", "selection", "emitOn", "title", "displayEmptyDistributionIntervals", "searchText"], outputs: ["onSelect", "onApply", "onClear", "selectionChange", "filtersChange", "searchTextChange"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: AggregationListComponent, selector: "AggregationList, aggregation-list, aggregationlist", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "showCheckbox", "applyOnSelect", "syncUrl", "query", "aggregation", "selection", "hideWhenEmpty", "itemTemplate", "searchText"], outputs: ["onSelect", "onApply", "onClear", "selectionChange", "filtersChange", "searchTextChange"] }, { kind: "component", type: AggregationTreeComponent, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: ["class", "id", "name", "column", "collapsible", "collapsed", "searchable", "showFiltersCount", "showCheckbox", "applyOnSelect", "expandedLevel", "syncUrl", "query", "aggregation", "selection", "hideWhenEmpty", "itemTemplate", "searchText"], outputs: ["onSelect", "onApply", "onClear", "selectionChange", "filtersChange", "searchTextChange"] }, { kind: "component", type: AggregationDateComponent, selector: "aggregation-date, AggregationDate, aggregationdate", inputs: ["name", "column", "id", "collapsible", "collapsed", "searchable", "showFiltersCount", "syncUrl", "query", "aggregation", "selection", "emitOn", "title", "displayEmptyDistributionIntervals", "searchText"], outputs: ["onSelect", "onApply", "onClear", "selectionChange", "filtersChange", "aggregationOverridesChange", "searchTextChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: AggregationComponent, decorators: [{
             type: Component,