@sinequa/atomic-angular 1.15.0 → 1.16.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -9189,8 +9189,8 @@ class AggregationDateRangeDialogComponent {
     /** Drives an @if around the pickers so they are recreated fresh on each open. */
     isDialogOpen = signal(false, ...(ngDevMode ? [{ debugName: "isDialogOpen" }] : []));
     dialog = viewChild(DialogComponent, ...(ngDevMode ? [{ debugName: "dialog" }] : []));
-    customRange = viewChild('customRange', ...(ngDevMode ? [{ debugName: "customRange" }] : []));
-    dualPickers = viewChild('dualPickers', ...(ngDevMode ? [{ debugName: "dualPickers" }] : []));
+    customRange = viewChild("customRange", ...(ngDevMode ? [{ debugName: "customRange" }] : []));
+    dualPickers = viewChild("dualPickers", ...(ngDevMode ? [{ debugName: "dualPickers" }] : []));
     min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : []));
     max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : []));
     lang = input("en", ...(ngDevMode ? [{ debugName: "lang" }] : []));
@@ -9235,10 +9235,7 @@ class AggregationDateRangeDialogComponent {
         }
         const dualPickers = this.dualPickers();
         if (dualPickers) {
-            return [
-                dualPickers.datepickerStart()?.getDate(),
-                dualPickers.datepickerEnd()?.getDate()
-            ];
+            return [dualPickers.datepickerStart()?.getDate(), dualPickers.datepickerEnd()?.getDate()];
         }
         return [undefined, undefined];
     }
@@ -9270,8 +9267,8 @@ class AggregationDateRangeDialogComponent {
         }
 
         <DialogFooter>
-          <button variant="outline" (click)="dialog.cancel()">{{ 'cancel' | transloco }}</button>
-          <button [disabled]="!hasSelection()" (click)="confirm()">{{ 'filters.validate' | transloco }}</button>
+          <button type="button" variant="outline" (click)="dialog.cancel()">{{ 'cancel' | transloco }}</button>
+          <button type="button" [disabled]="!hasSelection()" (click)="confirm()">{{ 'filters.validate' | transloco }}</button>
         </DialogFooter>
       </DialogContent>
     </div>
@@ -9321,14 +9318,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
         }
 
         <DialogFooter>
-          <button variant="outline" (click)="dialog.cancel()">{{ 'cancel' | transloco }}</button>
-          <button [disabled]="!hasSelection()" (click)="confirm()">{{ 'filters.validate' | transloco }}</button>
+          <button type="button" variant="outline" (click)="dialog.cancel()">{{ 'cancel' | transloco }}</button>
+          <button type="button" [disabled]="!hasSelection()" (click)="confirm()">{{ 'filters.validate' | transloco }}</button>
         </DialogFooter>
       </DialogContent>
     </div>
   `
                 }]
-        }], propDecorators: { dialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DialogComponent), { isSignal: true }] }], customRange: [{ type: i0.ViewChild, args: ['customRange', { isSignal: true }] }], dualPickers: [{ type: i0.ViewChild, args: ['dualPickers', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], useDateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "useDateRange", required: false }] }], rangeSelected: [{ type: i0.Output, args: ["rangeSelected"] }] } });
+        }], propDecorators: { dialog: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DialogComponent), { isSignal: true }] }], customRange: [{ type: i0.ViewChild, args: ["customRange", { isSignal: true }] }], dualPickers: [{ type: i0.ViewChild, args: ["dualPickers", { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], useDateRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "useDateRange", required: false }] }], rangeSelected: [{ type: i0.Output, args: ["rangeSelected"] }] } });
 
 /**
  * How many filters a controlled selection carries. Shared with `<Aggregation>`,
@@ -10134,7 +10131,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 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", 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: AggregationDateComponent, decorators: [{
             type: Component,
@@ -10159,7 +10156,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 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"] }]
+                    }, 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"] }] } });
 
 /**
@@ -10169,7 +10166,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 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 $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,
@@ -10186,7 +10183,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 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 $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 {
@@ -14498,7 +14495,7 @@ class AggregationPanelComponent {
         this.searchText.set("");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: AggregationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: AggregationPanelComponent, isStandalone: true, selector: "AggregationPanel, aggregation-panel", inputs: { 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 }, isDate: { classPropertyName: "isDate", publicName: "isDate", isSignal: true, isRequired: false, transformFunction: null }, isEmpty: { classPropertyName: "isEmpty", publicName: "isEmpty", isSignal: true, isRequired: false, transformFunction: null }, aggregation: { classPropertyName: "aggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, hasFilters: { classPropertyName: "hasFilters", publicName: "hasFilters", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, isAllSelected: { classPropertyName: "isAllSelected", publicName: "isAllSelected", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, itemsLength: { classPropertyName: "itemsLength", publicName: "itemsLength", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, searchedItemsLength: { classPropertyName: "searchedItemsLength", publicName: "searchedItemsLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchText: "searchTextChange", cleared: "cleared", applied: "applied", allSelected: "allSelected", allUnselected: "allUnselected", loadedMore: "loadedMore" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<details\n  [attr.open]=\"expanded()\"\n  [attr.name]=\"id()\"\n  class=\"group space-y-2\"\n  (toggle)=\"onToggle($event)\">\n  <summary\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n    [class.text-muted-foreground]=\"isEmpty()\"\n    class=\"m-0 mt-1 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 truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (showFiltersCount() && filtersCount() > 0) {\n      <Badge size=\"xs\" class=\"ml-1\">\n        {{ filtersCount() }}\n      </Badge>\n    }\n    @if (!isCollapsed()) {\n      @if (hasFilters()) {\n        @let label = \"filters.clearFilters\" | transloco;\n        <button\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); cleared.emit()\">\n          <filter-x-icon />\n        </button>\n      }\n      @if (selection()) {\n        @let label = \"filters.apply\" | transloco;\n        <button\n          variant=\"accent\"\n          size=\"sm\"\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); applied.emit()\">\n          <FilterIcon />\n          {{ label }}\n        </button>\n      }\n\n      @if (isAllSelected()) {\n        @let label = \"filters.unselectAllFilters\" | transloco;\n        <button\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); allUnselected.emit()\">\n          <square-check-icon />\n        </button>\n      } @else {\n        @let label = \"filters.selectAllFilters\" | transloco;\n        <button\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); allSelected.emit()\">\n          <square-icon />\n        </button>\n      }\n    }\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        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n      </icon-button>\n    }\n  </summary>\n\n  @if (aggregation()?.searchable && itemsLength() > 0) {\n    <InputGroup class=\"group/item mt-3\">\n      <input\n        #searchInput\n        input-group\n        id=\"aggregation-input-{{ aggregation()?.column }}\"\n        type=\"text\"\n        [attr.aria-label]=\"'search' | transloco\"\n        [attr.placeholder]=\"'search' | transloco\"\n        [(ngModel)]=\"searchText\"\n        class=\"mt-1\" />\n      <InputGroupAddon>\n        <SearchIcon\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\n      </InputGroupAddon>\n      <InputGroupAddon align=\"inline-end\" class=\"gap-0.5!\">\n        <icon-button\n          size=\"sm\"\n          [class]=\"\n            searchText().length > 0\n              ? 'rotate-90 cursor-pointer opacity-100 transition-[rotate,opacity] duration-500'\n              : 'pointer-events-none rotate-0 opacity-0 transition-[rotate,opacity] duration-500'\n          \"\n          aria-label=\"Clear search\"\n          [tabindex]=\"searchText().length > 0 ? 0 : -1\"\n          (keydown.enter)=\"clearSearch($event)\"\n          (click)=\"clearSearch($event)\">\n          <XMarkIcon />\n        </icon-button>\n        <ng-content select=\"[search-addon]\" />\n      </InputGroupAddon>\n    </InputGroup>\n  }\n\n  <ng-content />\n\n  @if (hasMore() && searchedItemsLength() === 0) {\n    <button\n      class=\"mt-1 flex w-full justify-center\"\n      [attr.aria-label]=\"'loadMore' | transloco\"\n      (click)=\"loadedMore.emit()\">\n      {{ \"loadMore\" | transloco }}\n    </button>\n  }\n</details>\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: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size", "aria-label"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "component", type: SquareCheckIcon, selector: "square-check-icon, SquareCheckIcon", inputs: ["class"] }, { kind: "component", type: SquareIcon, selector: "square-icon, SquareIcon", inputs: ["class"] }, { kind: "component", type: XMarkIcon, selector: "XMarkIcon, xmark-icon, x-mark-icon", inputs: ["class"] }, { kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: AggregationPanelComponent, isStandalone: true, selector: "AggregationPanel, aggregation-panel", inputs: { 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 }, isDate: { classPropertyName: "isDate", publicName: "isDate", isSignal: true, isRequired: false, transformFunction: null }, isEmpty: { classPropertyName: "isEmpty", publicName: "isEmpty", isSignal: true, isRequired: false, transformFunction: null }, aggregation: { classPropertyName: "aggregation", publicName: "aggregation", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, filtersCount: { classPropertyName: "filtersCount", publicName: "filtersCount", isSignal: true, isRequired: false, transformFunction: null }, hasFilters: { classPropertyName: "hasFilters", publicName: "hasFilters", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, isAllSelected: { classPropertyName: "isAllSelected", publicName: "isAllSelected", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, itemsLength: { classPropertyName: "itemsLength", publicName: "itemsLength", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, searchedItemsLength: { classPropertyName: "searchedItemsLength", publicName: "searchedItemsLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchText: "searchTextChange", cleared: "cleared", applied: "applied", allSelected: "allSelected", allUnselected: "allUnselected", loadedMore: "loadedMore" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<details\n  [attr.open]=\"expanded()\"\n  [attr.name]=\"id()\"\n  class=\"group space-y-2\"\n  (toggle)=\"onToggle($event)\">\n  <summary\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n    [class.text-muted-foreground]=\"isEmpty()\"\n    class=\"m-0 mt-1 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 truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (showFiltersCount() && filtersCount() > 0) {\n      <Badge size=\"xs\" class=\"ml-1\">\n        {{ filtersCount() }}\n      </Badge>\n    }\n    @if (!isCollapsed()) {\n      @if (hasFilters()) {\n        @let label = \"filters.clearFilters\" | transloco;\n        <button\n          type=\"button\"\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); cleared.emit()\">\n          <filter-x-icon />\n        </button>\n      }\n      @if (selection()) {\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(); applied.emit()\">\n          <FilterIcon />\n          {{ label }}\n        </button>\n      }\n\n      @if (isAllSelected()) {\n        @let label = \"filters.unselectAllFilters\" | transloco;\n        <button\n          type=\"button\"\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); allUnselected.emit()\">\n          <square-check-icon />\n        </button>\n      } @else {\n        @let label = \"filters.selectAllFilters\" | transloco;\n        <button\n          type=\"button\"\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); allSelected.emit()\">\n          <square-icon />\n        </button>\n      }\n    }\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        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n      </icon-button>\n    }\n  </summary>\n\n  @if (aggregation()?.searchable && itemsLength() > 0) {\n    <InputGroup class=\"group/item mt-3\">\n      <input\n        #searchInput\n        input-group\n        id=\"aggregation-input-{{ aggregation()?.column }}\"\n        type=\"text\"\n        [attr.aria-label]=\"'search' | transloco\"\n        [attr.placeholder]=\"'search' | transloco\"\n        [(ngModel)]=\"searchText\"\n        class=\"mt-1\" />\n      <InputGroupAddon>\n        <SearchIcon\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\n      </InputGroupAddon>\n      <InputGroupAddon align=\"inline-end\" class=\"gap-0.5!\">\n        <icon-button\n          size=\"sm\"\n          [class]=\"\n            searchText().length > 0\n              ? 'rotate-90 cursor-pointer opacity-100 transition-[rotate,opacity] duration-500'\n              : 'pointer-events-none rotate-0 opacity-0 transition-[rotate,opacity] duration-500'\n          \"\n          aria-label=\"Clear search\"\n          [tabindex]=\"searchText().length > 0 ? 0 : -1\"\n          (keydown.enter)=\"clearSearch($event)\"\n          (click)=\"clearSearch($event)\">\n          <XMarkIcon />\n        </icon-button>\n        <ng-content select=\"[search-addon]\" />\n      </InputGroupAddon>\n    </InputGroup>\n  }\n\n  <ng-content />\n\n  @if (hasMore() && searchedItemsLength() === 0) {\n    <button\n      type=\"button\"\n      class=\"mt-1 flex w-full justify-center\"\n      [attr.aria-label]=\"'loadMore' | transloco\"\n      (click)=\"loadedMore.emit()\">\n      {{ \"loadMore\" | transloco }}\n    </button>\n  }\n</details>\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: "directive", type: BadgeComponent, selector: "badge, Badge", inputs: ["class", "variant", "scheme", "size", "aria-label"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "directive", type: InputGroupInput, selector: "input[input-group]", inputs: ["class", "type", "placeholder", "disabled"] }, { kind: "directive", type: InputGroupComponent, selector: "input-group, inputgroup, InputGroup", inputs: ["class"] }, { kind: "directive", type: InputGroupAddonComponent, selector: "input-group-addon, inputgroupaddon, InputGroupAddon", inputs: ["class", "align"] }, { kind: "component", type: SearchIcon, selector: "SearchIcon", inputs: ["class"] }, { kind: "component", type: FilterIcon, selector: "filter-icon, FilterIcon", inputs: ["class"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: FilterXIcon, selector: "filter-x-icon, FilterXIcon", inputs: ["class"] }, { kind: "component", type: SquareCheckIcon, selector: "square-check-icon, SquareCheckIcon", inputs: ["class"] }, { kind: "component", type: SquareIcon, selector: "square-icon, SquareIcon", inputs: ["class"] }, { kind: "component", type: XMarkIcon, selector: "XMarkIcon, xmark-icon, x-mark-icon", inputs: ["class"] }, { kind: "directive", type: IconButtonComponent, selector: "button[icon-button], icon-button, IconButton", inputs: ["class", "size"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: AggregationPanelComponent, decorators: [{
             type: Component,
@@ -14520,7 +14517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                         SquareIcon,
                         XMarkIcon,
                         IconButtonComponent,
-                    ], template: "<details\n  [attr.open]=\"expanded()\"\n  [attr.name]=\"id()\"\n  class=\"group space-y-2\"\n  (toggle)=\"onToggle($event)\">\n  <summary\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n    [class.text-muted-foreground]=\"isEmpty()\"\n    class=\"m-0 mt-1 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 truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (showFiltersCount() && filtersCount() > 0) {\n      <Badge size=\"xs\" class=\"ml-1\">\n        {{ filtersCount() }}\n      </Badge>\n    }\n    @if (!isCollapsed()) {\n      @if (hasFilters()) {\n        @let label = \"filters.clearFilters\" | transloco;\n        <button\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); cleared.emit()\">\n          <filter-x-icon />\n        </button>\n      }\n      @if (selection()) {\n        @let label = \"filters.apply\" | transloco;\n        <button\n          variant=\"accent\"\n          size=\"sm\"\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); applied.emit()\">\n          <FilterIcon />\n          {{ label }}\n        </button>\n      }\n\n      @if (isAllSelected()) {\n        @let label = \"filters.unselectAllFilters\" | transloco;\n        <button\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); allUnselected.emit()\">\n          <square-check-icon />\n        </button>\n      } @else {\n        @let label = \"filters.selectAllFilters\" | transloco;\n        <button\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); allSelected.emit()\">\n          <square-icon />\n        </button>\n      }\n    }\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        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n      </icon-button>\n    }\n  </summary>\n\n  @if (aggregation()?.searchable && itemsLength() > 0) {\n    <InputGroup class=\"group/item mt-3\">\n      <input\n        #searchInput\n        input-group\n        id=\"aggregation-input-{{ aggregation()?.column }}\"\n        type=\"text\"\n        [attr.aria-label]=\"'search' | transloco\"\n        [attr.placeholder]=\"'search' | transloco\"\n        [(ngModel)]=\"searchText\"\n        class=\"mt-1\" />\n      <InputGroupAddon>\n        <SearchIcon\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\n      </InputGroupAddon>\n      <InputGroupAddon align=\"inline-end\" class=\"gap-0.5!\">\n        <icon-button\n          size=\"sm\"\n          [class]=\"\n            searchText().length > 0\n              ? 'rotate-90 cursor-pointer opacity-100 transition-[rotate,opacity] duration-500'\n              : 'pointer-events-none rotate-0 opacity-0 transition-[rotate,opacity] duration-500'\n          \"\n          aria-label=\"Clear search\"\n          [tabindex]=\"searchText().length > 0 ? 0 : -1\"\n          (keydown.enter)=\"clearSearch($event)\"\n          (click)=\"clearSearch($event)\">\n          <XMarkIcon />\n        </icon-button>\n        <ng-content select=\"[search-addon]\" />\n      </InputGroupAddon>\n    </InputGroup>\n  }\n\n  <ng-content />\n\n  @if (hasMore() && searchedItemsLength() === 0) {\n    <button\n      class=\"mt-1 flex w-full justify-center\"\n      [attr.aria-label]=\"'loadMore' | transloco\"\n      (click)=\"loadedMore.emit()\">\n      {{ \"loadMore\" | transloco }}\n    </button>\n  }\n</details>\n" }]
+                    ], template: "<details\n  [attr.open]=\"expanded()\"\n  [attr.name]=\"id()\"\n  class=\"group space-y-2\"\n  (toggle)=\"onToggle($event)\">\n  <summary\n    [class.cursor-pointer]=\"collapsible() && !isEmpty()\"\n    [class.text-muted-foreground]=\"isEmpty()\"\n    class=\"m-0 mt-1 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 truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n\n    @if (showFiltersCount() && filtersCount() > 0) {\n      <Badge size=\"xs\" class=\"ml-1\">\n        {{ filtersCount() }}\n      </Badge>\n    }\n    @if (!isCollapsed()) {\n      @if (hasFilters()) {\n        @let label = \"filters.clearFilters\" | transloco;\n        <button\n          type=\"button\"\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); cleared.emit()\">\n          <filter-x-icon />\n        </button>\n      }\n      @if (selection()) {\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(); applied.emit()\">\n          <FilterIcon />\n          {{ label }}\n        </button>\n      }\n\n      @if (isAllSelected()) {\n        @let label = \"filters.unselectAllFilters\" | transloco;\n        <button\n          type=\"button\"\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); allUnselected.emit()\">\n          <square-check-icon />\n        </button>\n      } @else {\n        @let label = \"filters.selectAllFilters\" | transloco;\n        <button\n          type=\"button\"\n          variant=\"none\"\n          icon-button\n          [aria-label]=\"label\"\n          (click)=\"$event.stopPropagation(); allSelected.emit()\">\n          <square-icon />\n        </button>\n      }\n    }\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        <span class=\"sr-only\">{{ \"filters.toggle\" | transloco }}</span>\n      </icon-button>\n    }\n  </summary>\n\n  @if (aggregation()?.searchable && itemsLength() > 0) {\n    <InputGroup class=\"group/item mt-3\">\n      <input\n        #searchInput\n        input-group\n        id=\"aggregation-input-{{ aggregation()?.column }}\"\n        type=\"text\"\n        [attr.aria-label]=\"'search' | transloco\"\n        [attr.placeholder]=\"'search' | transloco\"\n        [(ngModel)]=\"searchText\"\n        class=\"mt-1\" />\n      <InputGroupAddon>\n        <SearchIcon\n          class=\"text-foreground size-4 rotate-0 transition-[rotate] duration-500 group-focus-within/item:rotate-90\" />\n      </InputGroupAddon>\n      <InputGroupAddon align=\"inline-end\" class=\"gap-0.5!\">\n        <icon-button\n          size=\"sm\"\n          [class]=\"\n            searchText().length > 0\n              ? 'rotate-90 cursor-pointer opacity-100 transition-[rotate,opacity] duration-500'\n              : 'pointer-events-none rotate-0 opacity-0 transition-[rotate,opacity] duration-500'\n          \"\n          aria-label=\"Clear search\"\n          [tabindex]=\"searchText().length > 0 ? 0 : -1\"\n          (keydown.enter)=\"clearSearch($event)\"\n          (click)=\"clearSearch($event)\">\n          <XMarkIcon />\n        </icon-button>\n        <ng-content select=\"[search-addon]\" />\n      </InputGroupAddon>\n    </InputGroup>\n  }\n\n  <ng-content />\n\n  @if (hasMore() && searchedItemsLength() === 0) {\n    <button\n      type=\"button\"\n      class=\"mt-1 flex w-full justify-center\"\n      [attr.aria-label]=\"'loadMore' | transloco\"\n      (click)=\"loadedMore.emit()\">\n      {{ \"loadMore\" | transloco }}\n    </button>\n  }\n</details>\n" }]
         }], ctorParameters: () => [], propDecorators: { 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 }] }], isDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDate", required: false }] }], isEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEmpty", required: false }] }], aggregation: [{ type: i0.Input, args: [{ isSignal: true, alias: "aggregation", required: false }] }], showFiltersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFiltersCount", required: false }] }], filtersCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersCount", required: false }] }], hasFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFilters", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], isAllSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAllSelected", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }], itemsLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsLength", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], searchedItemsLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchedItemsLength", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], applied: [{ type: i0.Output, args: ["applied"] }], allSelected: [{ type: i0.Output, args: ["allSelected"] }], allUnselected: [{ type: i0.Output, args: ["allUnselected"] }], loadedMore: [{ type: i0.Output, args: ["loadedMore"] }], searchInput: [{ type: i0.ViewChild, args: ["searchInput", { isSignal: true }] }] } });
 
 class AggregationTreeComponent {
@@ -15202,7 +15199,7 @@ class AggregationTreeComponent {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: AggregationTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: AggregationTreeComponent, isStandalone: true, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, applyOnSelect: { classPropertyName: "applyOnSelect", publicName: "applyOnSelect", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", 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 }, hideWhenEmpty: { classPropertyName: "hideWhenEmpty", publicName: "hideWhenEmpty", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplate", 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(\"block h-[inherit] max-h-[inherit] w-[inherit]\", class(), (isMissing() || (hideWhenEmpty() && isHidden())) && \"hidden\")" } }, queries: [{ propertyName: "itemDirective", first: true, predicate: AggregationItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "virtualItems", predicate: ["virtualItem"], descendants: true, isSignal: true }, { propertyName: "scrollElement", first: true, predicate: ["scrollElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!aggregation()?.isTree) {\n  <div class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1\" />\n    The aggregationTree component does not support list aggregations. Please use\n    the &lt;Aggregation /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div\n    #scrollElement\n    class=\"max-h-(--scroll-height,20rem) w-full scrollbar-thin overflow-auto\">\n    <div\n      class=\"relative w-full\"\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\n      role=\"tree\"\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n      <div\n        class=\"absolute top-0 left-0 w-full\"\n        [style.transform]=\"\n          'translateY(' +\n          (virtualizer.getVirtualItems()[0]\n            ? virtualizer.getVirtualItems()[0].start\n            : 0) +\n          'px)'\n        \">\n        @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\n          @let item = items()[vItem.index];\n          <div #virtualItem [attr.data-index]=\"vItem.index\">\n            <ng-container\n              [ngTemplateOutlet]=\"treeItemTpl\"\n              [ngTemplateOutletContext]=\"{\n                node: item,\n                path: [],\n                field: aggregation()?.column,\n                tpl: treeItemTpl,\n                parent: null\n              }\">\n            </ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</aggregation-panel>\n\n<ng-template\n  #treeItemTpl\n  let-node=\"node\"\n  let-path=\"path\"\n  let-field=\"field\"\n  let-tpl=\"tpl\"\n  let-parent=\"parent\">\n  <div\n    role=\"treeitem\"\n    [style.--level]=\"treeItemLevel(node)\"\n    [attr.aria-selected]=\"node.$selected ?? false\"\n    [attr.aria-expanded]=\"\n      node.hasChildren !== false ? (node.$opened ?? false) : null\n    \"\n    [attr.aria-disabled]=\"node.count === 0 ? 'true' : null\"\n    [attr.disabled]=\"node.count === 0 ? 'disabled' : null\">\n    <a\n      [attr.aria-label]=\"treeItemName(node) | syslang\"\n      [class]=\"\n        cn(\n          'flex grow items-center gap-2 p-1 leading-7',\n          node.count === 0 && 'disabled pointer-events-none',\n          applyOnSelect() && 'cursor-pointer',\n          (node.$selected || node.$selectedVisually) && ''\n        )\n      \"\n      (click)=\"onTreeItemRowClick(node, parent, $event)\">\n      <button\n        variant=\"none\"\n        [iconOnly]=\"true\"\n        (click)=\"toggleTreeNode($event, node)\"\n        class=\"transition-transform ease-in hover:scale-125\"\n        aria-label=\"Open\">\n        <ChevronRight\n          [class]=\"\n            cn(\n              'size-4 translate-x-1',\n              node.$opened && 'rotate-90',\n              !node.hasChildren && 'hidden'\n            )\n          \"\n          width=\"16\"\n          height=\"16\" />\n      </button>\n      @if (showCheckbox()) {\n        <input\n          type=\"checkbox\"\n          role=\"checkbox\"\n          value=\"{{ node.value }}\"\n          [attr.disabled]=\"node.count === 0 ? true : null\"\n          [attr.aria-disabled]=\"node.count === 0\"\n          (keydown.enter)=\"onTreeItemRowClick(node, parent, $event)\"\n          [checked]=\"node.$selected || node.$selectedVisually\" />\n      }\n      @if (resolvedItemTemplate(); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: node,\n            field: field,\n            selected: node.$selected || node.$selectedVisually || false,\n            count: node.count,\n            name: (treeItemName(node) | syslang) ?? '',\n            searchText: searchText(),\n            level: treeItemLevel(node),\n            expanded: node.$opened ?? false,\n            hasChildren: node.hasChildren ?? false\n          }\" />\n      } @else {\n        @let icon = node.icon;\n        @if (icon) {\n          <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\n        }\n        @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n        <span\n          [class]=\"\n            cn(\n              'line-clamp-1 break-all text-ellipsis',\n              appliesOnLabelClick && 'hover:underline'\n            )\n          \"\n          [title]=\"\n            appliesOnLabelClick\n              ? ((isTreeItemFiltered(node, field)\n                  ? 'filters.removeFilter'\n                  : 'filters.addFilter'\n                ) | transloco) +\n                ': ' +\n                (treeItemName(node) | syslang)\n              : (treeItemName(node) | syslang)\n          \"\n          (click)=\"onTreeItemTextClick(node, parent, $event)\">\n          @for (\n            chunk of (treeItemName(node) | syslang) ?? \"\"\n              | highlightWord: searchText() : 10;\n            track $index\n          ) {\n            <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n              chunk.text\n            }}</span>\n          }\n        </span>\n        @if (showCount() && node.count > 0) {\n          <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\n            node.count\n          }}</span>\n        }\n      }\n    </a>\n    @if (node.hasChildren && node.$opened) {\n      <div role=\"group\">\n        @for (child of node.items; track $index) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"{\n              node: child,\n              path: treeChildrenPath(node, path),\n              field: field,\n              tpl: tpl,\n              parent: node\n            }\">\n          </ng-container>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["div[role=treeitem]:has(+div[role=treeitem]){margin-bottom:var(--agg-item-gap, 0)}div[role=treeitem]{display:block;-webkit-user-select:none;user-select:none}div[role=treeitem] a{padding-left:calc(var(--agg-tree-indent, .5rem) * var(--level, 0));line-height:var(--agg-item-height, inherit)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: TriangleAlertIcon, selector: "triangle-alert-icon, TriangleAlertIcon", inputs: ["class"] }, { kind: "component", type: AggregationPanelComponent, selector: "AggregationPanel, aggregation-panel", inputs: ["id", "collapsible", "collapsed", "isDate", "isEmpty", "aggregation", "showFiltersCount", "filtersCount", "hasFilters", "selection", "isAllSelected", "searchText", "itemsLength", "hasMore", "searchedItemsLength"], outputs: ["searchTextChange", "cleared", "applied", "allSelected", "allUnselected", "loadedMore"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: HighlightWordPipe, name: "highlightWord" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: AggregationTreeComponent, isStandalone: true, selector: "AggregationTree, aggregation-tree, aggregationtree", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, showFiltersCount: { classPropertyName: "showFiltersCount", publicName: "showFiltersCount", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, applyOnSelect: { classPropertyName: "applyOnSelect", publicName: "applyOnSelect", isSignal: true, isRequired: false, transformFunction: null }, expandedLevel: { classPropertyName: "expandedLevel", publicName: "expandedLevel", 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 }, hideWhenEmpty: { classPropertyName: "hideWhenEmpty", publicName: "hideWhenEmpty", isSignal: true, isRequired: false, transformFunction: null }, itemTemplateInput: { classPropertyName: "itemTemplateInput", publicName: "itemTemplate", 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(\"block h-[inherit] max-h-[inherit] w-[inherit]\", class(), (isMissing() || (hideWhenEmpty() && isHidden())) && \"hidden\")" } }, queries: [{ propertyName: "itemDirective", first: true, predicate: AggregationItemDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "virtualItems", predicate: ["virtualItem"], descendants: true, isSignal: true }, { propertyName: "scrollElement", first: true, predicate: ["scrollElement"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!aggregation()?.isTree) {\n  <div class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1\" />\n    The aggregationTree component does not support list aggregations. Please use\n    the &lt;Aggregation /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div\n    #scrollElement\n    class=\"max-h-(--scroll-height,20rem) w-full scrollbar-thin overflow-auto\">\n    <div\n      class=\"relative w-full\"\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\n      role=\"tree\"\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n      <div\n        class=\"absolute top-0 left-0 w-full\"\n        [style.transform]=\"\n          'translateY(' +\n          (virtualizer.getVirtualItems()[0]\n            ? virtualizer.getVirtualItems()[0].start\n            : 0) +\n          'px)'\n        \">\n        @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\n          @let item = items()[vItem.index];\n          <div #virtualItem [attr.data-index]=\"vItem.index\">\n            <ng-container\n              [ngTemplateOutlet]=\"treeItemTpl\"\n              [ngTemplateOutletContext]=\"{\n                node: item,\n                path: [],\n                field: aggregation()?.column,\n                tpl: treeItemTpl,\n                parent: null\n              }\">\n            </ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</aggregation-panel>\n\n<ng-template\n  #treeItemTpl\n  let-node=\"node\"\n  let-path=\"path\"\n  let-field=\"field\"\n  let-tpl=\"tpl\"\n  let-parent=\"parent\">\n  <div\n    role=\"treeitem\"\n    [style.--level]=\"treeItemLevel(node)\"\n    [attr.aria-selected]=\"node.$selected ?? false\"\n    [attr.aria-expanded]=\"\n      node.hasChildren !== false ? (node.$opened ?? false) : null\n    \"\n    [attr.aria-disabled]=\"node.count === 0 ? 'true' : null\"\n    [attr.disabled]=\"node.count === 0 ? 'disabled' : null\">\n    <a\n      [attr.aria-label]=\"treeItemName(node) | syslang\"\n      [class]=\"\n        cn(\n          'flex grow items-center gap-2 p-1 leading-7',\n          node.count === 0 && 'disabled pointer-events-none',\n          applyOnSelect() && 'cursor-pointer',\n          (node.$selected || node.$selectedVisually) && ''\n        )\n      \"\n      (click)=\"onTreeItemRowClick(node, parent, $event)\">\n      <button\n        type=\"button\"\n        variant=\"none\"\n        [iconOnly]=\"true\"\n        (click)=\"toggleTreeNode($event, node)\"\n        class=\"transition-transform ease-in hover:scale-125\"\n        aria-label=\"Open\">\n        <ChevronRight\n          [class]=\"\n            cn(\n              'size-4 translate-x-1',\n              node.$opened && 'rotate-90',\n              !node.hasChildren && 'hidden'\n            )\n          \"\n          width=\"16\"\n          height=\"16\" />\n      </button>\n      @if (showCheckbox()) {\n        <input\n          type=\"checkbox\"\n          role=\"checkbox\"\n          value=\"{{ node.value }}\"\n          [attr.disabled]=\"node.count === 0 ? true : null\"\n          [attr.aria-disabled]=\"node.count === 0\"\n          (keydown.enter)=\"onTreeItemRowClick(node, parent, $event)\"\n          [checked]=\"node.$selected || node.$selectedVisually\" />\n      }\n      @if (resolvedItemTemplate(); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: node,\n            field: field,\n            selected: node.$selected || node.$selectedVisually || false,\n            count: node.count,\n            name: (treeItemName(node) | syslang) ?? '',\n            searchText: searchText(),\n            level: treeItemLevel(node),\n            expanded: node.$opened ?? false,\n            hasChildren: node.hasChildren ?? false\n          }\" />\n      } @else {\n        @let icon = node.icon;\n        @if (icon) {\n          <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\n        }\n        @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n        <span\n          [class]=\"\n            cn(\n              'line-clamp-1 break-all text-ellipsis',\n              appliesOnLabelClick && 'hover:underline'\n            )\n          \"\n          [title]=\"\n            appliesOnLabelClick\n              ? ((isTreeItemFiltered(node, field)\n                  ? 'filters.removeFilter'\n                  : 'filters.addFilter'\n                ) | transloco) +\n                ': ' +\n                (treeItemName(node) | syslang)\n              : (treeItemName(node) | syslang)\n          \"\n          (click)=\"onTreeItemTextClick(node, parent, $event)\">\n          @for (\n            chunk of (treeItemName(node) | syslang) ?? \"\"\n              | highlightWord: searchText() : 10;\n            track $index\n          ) {\n            <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n              chunk.text\n            }}</span>\n          }\n        </span>\n        @if (showCount() && node.count > 0) {\n          <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\n            node.count\n          }}</span>\n        }\n      }\n    </a>\n    @if (node.hasChildren && node.$opened) {\n      <div role=\"group\">\n        @for (child of node.items; track $index) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"{\n              node: child,\n              path: treeChildrenPath(node, path),\n              field: field,\n              tpl: tpl,\n              parent: node\n            }\">\n          </ng-container>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["div[role=treeitem]:has(+div[role=treeitem]){margin-bottom:var(--agg-item-gap, 0)}div[role=treeitem]{display:block;-webkit-user-select:none;user-select:none}div[role=treeitem] a{padding-left:calc(var(--agg-tree-indent, .5rem) * var(--level, 0));line-height:var(--agg-item-height, inherit)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: ChevronRightIcon, selector: "chevron-right, ChevronRight, chevronright, ChevronRightIcon, chevron-right-icon, chevronrighticon", inputs: ["class"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon, FaIcon", inputs: ["faClass", "class"] }, { kind: "component", type: TriangleAlertIcon, selector: "triangle-alert-icon, TriangleAlertIcon", inputs: ["class"] }, { kind: "component", type: AggregationPanelComponent, selector: "AggregationPanel, aggregation-panel", inputs: ["id", "collapsible", "collapsed", "isDate", "isEmpty", "aggregation", "showFiltersCount", "filtersCount", "hasFilters", "selection", "isAllSelected", "searchText", "itemsLength", "hasMore", "searchedItemsLength"], outputs: ["searchTextChange", "cleared", "applied", "allSelected", "allUnselected", "loadedMore"] }, { kind: "pipe", type: SyslangPipe, name: "syslang" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "pipe", type: HighlightWordPipe, name: "highlightWord" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: AggregationTreeComponent, decorators: [{
             type: Component,
@@ -15220,7 +15217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                         AggregationPanelComponent
                     ], standalone: true, host: {
                         "[class]": 'cn("block h-[inherit] max-h-[inherit] w-[inherit]", class(), (isMissing() || (hideWhenEmpty() && isHidden())) && "hidden")'
-                    }, template: "@if (!aggregation()?.isTree) {\n  <div class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1\" />\n    The aggregationTree component does not support list aggregations. Please use\n    the &lt;Aggregation /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div\n    #scrollElement\n    class=\"max-h-(--scroll-height,20rem) w-full scrollbar-thin overflow-auto\">\n    <div\n      class=\"relative w-full\"\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\n      role=\"tree\"\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n      <div\n        class=\"absolute top-0 left-0 w-full\"\n        [style.transform]=\"\n          'translateY(' +\n          (virtualizer.getVirtualItems()[0]\n            ? virtualizer.getVirtualItems()[0].start\n            : 0) +\n          'px)'\n        \">\n        @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\n          @let item = items()[vItem.index];\n          <div #virtualItem [attr.data-index]=\"vItem.index\">\n            <ng-container\n              [ngTemplateOutlet]=\"treeItemTpl\"\n              [ngTemplateOutletContext]=\"{\n                node: item,\n                path: [],\n                field: aggregation()?.column,\n                tpl: treeItemTpl,\n                parent: null\n              }\">\n            </ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</aggregation-panel>\n\n<ng-template\n  #treeItemTpl\n  let-node=\"node\"\n  let-path=\"path\"\n  let-field=\"field\"\n  let-tpl=\"tpl\"\n  let-parent=\"parent\">\n  <div\n    role=\"treeitem\"\n    [style.--level]=\"treeItemLevel(node)\"\n    [attr.aria-selected]=\"node.$selected ?? false\"\n    [attr.aria-expanded]=\"\n      node.hasChildren !== false ? (node.$opened ?? false) : null\n    \"\n    [attr.aria-disabled]=\"node.count === 0 ? 'true' : null\"\n    [attr.disabled]=\"node.count === 0 ? 'disabled' : null\">\n    <a\n      [attr.aria-label]=\"treeItemName(node) | syslang\"\n      [class]=\"\n        cn(\n          'flex grow items-center gap-2 p-1 leading-7',\n          node.count === 0 && 'disabled pointer-events-none',\n          applyOnSelect() && 'cursor-pointer',\n          (node.$selected || node.$selectedVisually) && ''\n        )\n      \"\n      (click)=\"onTreeItemRowClick(node, parent, $event)\">\n      <button\n        variant=\"none\"\n        [iconOnly]=\"true\"\n        (click)=\"toggleTreeNode($event, node)\"\n        class=\"transition-transform ease-in hover:scale-125\"\n        aria-label=\"Open\">\n        <ChevronRight\n          [class]=\"\n            cn(\n              'size-4 translate-x-1',\n              node.$opened && 'rotate-90',\n              !node.hasChildren && 'hidden'\n            )\n          \"\n          width=\"16\"\n          height=\"16\" />\n      </button>\n      @if (showCheckbox()) {\n        <input\n          type=\"checkbox\"\n          role=\"checkbox\"\n          value=\"{{ node.value }}\"\n          [attr.disabled]=\"node.count === 0 ? true : null\"\n          [attr.aria-disabled]=\"node.count === 0\"\n          (keydown.enter)=\"onTreeItemRowClick(node, parent, $event)\"\n          [checked]=\"node.$selected || node.$selectedVisually\" />\n      }\n      @if (resolvedItemTemplate(); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: node,\n            field: field,\n            selected: node.$selected || node.$selectedVisually || false,\n            count: node.count,\n            name: (treeItemName(node) | syslang) ?? '',\n            searchText: searchText(),\n            level: treeItemLevel(node),\n            expanded: node.$opened ?? false,\n            hasChildren: node.hasChildren ?? false\n          }\" />\n      } @else {\n        @let icon = node.icon;\n        @if (icon) {\n          <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\n        }\n        @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n        <span\n          [class]=\"\n            cn(\n              'line-clamp-1 break-all text-ellipsis',\n              appliesOnLabelClick && 'hover:underline'\n            )\n          \"\n          [title]=\"\n            appliesOnLabelClick\n              ? ((isTreeItemFiltered(node, field)\n                  ? 'filters.removeFilter'\n                  : 'filters.addFilter'\n                ) | transloco) +\n                ': ' +\n                (treeItemName(node) | syslang)\n              : (treeItemName(node) | syslang)\n          \"\n          (click)=\"onTreeItemTextClick(node, parent, $event)\">\n          @for (\n            chunk of (treeItemName(node) | syslang) ?? \"\"\n              | highlightWord: searchText() : 10;\n            track $index\n          ) {\n            <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n              chunk.text\n            }}</span>\n          }\n        </span>\n        @if (showCount() && node.count > 0) {\n          <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\n            node.count\n          }}</span>\n        }\n      }\n    </a>\n    @if (node.hasChildren && node.$opened) {\n      <div role=\"group\">\n        @for (child of node.items; track $index) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"{\n              node: child,\n              path: treeChildrenPath(node, path),\n              field: field,\n              tpl: tpl,\n              parent: node\n            }\">\n          </ng-container>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["div[role=treeitem]:has(+div[role=treeitem]){margin-bottom:var(--agg-item-gap, 0)}div[role=treeitem]{display:block;-webkit-user-select:none;user-select:none}div[role=treeitem] a{padding-left:calc(var(--agg-tree-indent, .5rem) * var(--level, 0));line-height:var(--agg-item-height, inherit)}\n"] }]
+                    }, template: "@if (!aggregation()?.isTree) {\n  <div class=\"p-2 text-sm text-red-500\">\n    <triangle-alert-icon class=\"mr-1\" />\n    The aggregationTree component does not support list aggregations. Please use\n    the &lt;Aggregation /&gt; component instead.\n  </div>\n}\n<aggregation-panel\n  [id]=\"id()\"\n  [collapsible]=\"collapsible()\"\n  [collapsed]=\"collapsed()\"\n  [isEmpty]=\"isEmpty()\"\n  [isDate]=\"isDate()\"\n  [aggregation]=\"aggregation()\"\n  [showFiltersCount]=\"showFiltersCount()\"\n  [filtersCount]=\"filtersCount()\"\n  [hasFilters]=\"hasFilters()\"\n  [selection]=\"selection()\"\n  [isAllSelected]=\"isAllSelected()\"\n  [(searchText)]=\"searchText\"\n  [itemsLength]=\"items().length\"\n  [hasMore]=\"aggregation()?.$hasMore ?? false\"\n  [searchedItemsLength]=\"searchedItems().length\"\n  (cleared)=\"clear()\"\n  (applied)=\"apply()\"\n  (allSelected)=\"selectAll()\"\n  (allUnselected)=\"unselectAll()\"\n  (loadedMore)=\"loadMore()\">\n  <!-- Relay the host's `label` projection into the panel's `label` slot. When the\n       host projects nothing, the local <ng-content> falls back to the icon + display\n       (mirrors AggregationPanel's own fallback), so the header is never empty. -->\n  <ng-container ngProjectAs=\"label\">\n    <ng-content select=\"label\">\n      @let labelIcon = aggregation()?.icon;\n      @if (labelIcon) {\n        <FaIcon [faClass]=\"labelIcon\" class=\"mr-1 shrink-0\" />\n      }\n      <span class=\"grow truncate\">{{\n        aggregation()?.display | syslang | transloco\n      }}</span>\n    </ng-content>\n  </ng-container>\n  <div\n    #scrollElement\n    class=\"max-h-(--scroll-height,20rem) w-full scrollbar-thin overflow-auto\">\n    <div\n      class=\"relative w-full\"\n      [style.height]=\"virtualizer.getTotalSize() + 'px'\"\n      role=\"tree\"\n      [attr.aria-label]=\"aggregation()?.display | syslang | transloco\">\n      <div\n        class=\"absolute top-0 left-0 w-full\"\n        [style.transform]=\"\n          'translateY(' +\n          (virtualizer.getVirtualItems()[0]\n            ? virtualizer.getVirtualItems()[0].start\n            : 0) +\n          'px)'\n        \">\n        @for (vItem of virtualizer.getVirtualItems(); track vItem.index) {\n          @let item = items()[vItem.index];\n          <div #virtualItem [attr.data-index]=\"vItem.index\">\n            <ng-container\n              [ngTemplateOutlet]=\"treeItemTpl\"\n              [ngTemplateOutletContext]=\"{\n                node: item,\n                path: [],\n                field: aggregation()?.column,\n                tpl: treeItemTpl,\n                parent: null\n              }\">\n            </ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</aggregation-panel>\n\n<ng-template\n  #treeItemTpl\n  let-node=\"node\"\n  let-path=\"path\"\n  let-field=\"field\"\n  let-tpl=\"tpl\"\n  let-parent=\"parent\">\n  <div\n    role=\"treeitem\"\n    [style.--level]=\"treeItemLevel(node)\"\n    [attr.aria-selected]=\"node.$selected ?? false\"\n    [attr.aria-expanded]=\"\n      node.hasChildren !== false ? (node.$opened ?? false) : null\n    \"\n    [attr.aria-disabled]=\"node.count === 0 ? 'true' : null\"\n    [attr.disabled]=\"node.count === 0 ? 'disabled' : null\">\n    <a\n      [attr.aria-label]=\"treeItemName(node) | syslang\"\n      [class]=\"\n        cn(\n          'flex grow items-center gap-2 p-1 leading-7',\n          node.count === 0 && 'disabled pointer-events-none',\n          applyOnSelect() && 'cursor-pointer',\n          (node.$selected || node.$selectedVisually) && ''\n        )\n      \"\n      (click)=\"onTreeItemRowClick(node, parent, $event)\">\n      <button\n        type=\"button\"\n        variant=\"none\"\n        [iconOnly]=\"true\"\n        (click)=\"toggleTreeNode($event, node)\"\n        class=\"transition-transform ease-in hover:scale-125\"\n        aria-label=\"Open\">\n        <ChevronRight\n          [class]=\"\n            cn(\n              'size-4 translate-x-1',\n              node.$opened && 'rotate-90',\n              !node.hasChildren && 'hidden'\n            )\n          \"\n          width=\"16\"\n          height=\"16\" />\n      </button>\n      @if (showCheckbox()) {\n        <input\n          type=\"checkbox\"\n          role=\"checkbox\"\n          value=\"{{ node.value }}\"\n          [attr.disabled]=\"node.count === 0 ? true : null\"\n          [attr.aria-disabled]=\"node.count === 0\"\n          (keydown.enter)=\"onTreeItemRowClick(node, parent, $event)\"\n          [checked]=\"node.$selected || node.$selectedVisually\" />\n      }\n      @if (resolvedItemTemplate(); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: node,\n            field: field,\n            selected: node.$selected || node.$selectedVisually || false,\n            count: node.count,\n            name: (treeItemName(node) | syslang) ?? '',\n            searchText: searchText(),\n            level: treeItemLevel(node),\n            expanded: node.$opened ?? false,\n            hasChildren: node.hasChildren ?? false\n          }\" />\n      } @else {\n        @let icon = node.icon;\n        @if (icon) {\n          <FaIcon [faClass]=\"icon\" class=\"self-center justify-self-center\" />\n        }\n        @let appliesOnLabelClick = quickFilter() || applyOnSelect();\n        <span\n          [class]=\"\n            cn(\n              'line-clamp-1 break-all text-ellipsis',\n              appliesOnLabelClick && 'hover:underline'\n            )\n          \"\n          [title]=\"\n            appliesOnLabelClick\n              ? ((isTreeItemFiltered(node, field)\n                  ? 'filters.removeFilter'\n                  : 'filters.addFilter'\n                ) | transloco) +\n                ': ' +\n                (treeItemName(node) | syslang)\n              : (treeItemName(node) | syslang)\n          \"\n          (click)=\"onTreeItemTextClick(node, parent, $event)\">\n          @for (\n            chunk of (treeItemName(node) | syslang) ?? \"\"\n              | highlightWord: searchText() : 10;\n            track $index\n          ) {\n            <span [class]=\"{ 'font-bold': chunk.match }\" aria-hidden=\"true\">{{\n              chunk.text\n            }}</span>\n          }\n        </span>\n        @if (showCount() && node.count > 0) {\n          <span class=\"ml-auto px-1 text-xs empty:hidden\" aria-hidden=\"true\">{{\n            node.count\n          }}</span>\n        }\n      }\n    </a>\n    @if (node.hasChildren && node.$opened) {\n      <div role=\"group\">\n        @for (child of node.items; track $index) {\n          <ng-container\n            [ngTemplateOutlet]=\"tpl\"\n            [ngTemplateOutletContext]=\"{\n              node: child,\n              path: treeChildrenPath(node, path),\n              field: field,\n              tpl: tpl,\n              parent: node\n            }\">\n          </ng-container>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["div[role=treeitem]:has(+div[role=treeitem]){margin-bottom:var(--agg-item-gap, 0)}div[role=treeitem]{display:block;-webkit-user-select:none;user-select:none}div[role=treeitem] a{padding-left:calc(var(--agg-tree-indent, .5rem) * var(--level, 0));line-height:var(--agg-item-height, inherit)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], 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 }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], applyOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyOnSelect", required: false }] }], expandedLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedLevel", 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 }] }], hideWhenEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenEmpty", 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"] }], virtualItems: [{ type: i0.ViewChildren, args: ["virtualItem", { isSignal: true }] }], scrollElement: [{ type: i0.ViewChild, args: ["scrollElement", { isSignal: true }] }], itemDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AggregationItemDirective), { isSignal: true }] }], itemTemplateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }, { type: i0.Output, args: ["searchTextChange"] }] } });
 
 class AggregationListComponent {