@codetectonics/mantle 2.0.0 → 2.0.1

package/fesm2022/codetectonics-mantle.mjs

@@ -2986,7 +2986,7 @@ class ChartConfigInputComponent {
     constructor(arrayService, localeService) {
         this.arrayService = arrayService;
         this.localeService = localeService;
-        this.value = { dataset: '', chart_type: '', x_axis: {}, y_axes: [], filters: [] };
+        this.value = { dataset_id: '', chart_type: '', x_axis: {}, y_axes: [], filters: [] };
         this.columnPickerOptions = { values: [] };
         this.chartTypes = [
             { label: 'mantle.chart_config.chart_types.column', value: 'column' },
@@ -3023,9 +3023,9 @@ class ChartConfigInputComponent {
         this.onChange(this.value);
     }
     applyChartOptions() {
-        this.datasets = this.options.datasets.map((dataset) => { return dataset.name; });
+        this.datasets = this.options.datasets.map((dataset) => { return { id: dataset.id, name: dataset.name }; });
         this.datasetColumns = [];
-        let config = this.arrayService.findByAttribute(this.options.datasets, 'name', this.value.dataset);
+        let config = this.arrayService.findByAttribute(this.options.datasets, 'id', this.value.dataset_id);
         if (!config)
             return;
         this.datasetColumns = config.columns.map((column) => {
@@ -3035,8 +3035,8 @@ class ChartConfigInputComponent {
             return { label: column.attr, value: column.attr, hidden: false };
         });
     }
-    setDataset(dataset) {
-        this.value.dataset = dataset;
+    setDatasetId(datasetId) {
+        this.value.dataset_id = datasetId;
         this.value.chart_type = '';
         this.value.x_axis = {};
         this.value.y_axes = [];
@@ -3275,8 +3275,8 @@ class ChartConfigInputComponent {
     }
     validate(control) {
         const errors = {};
-        if (!this.value.dataset) {
-            errors.dataset = 'Dataset is required';
+        if (!this.value.dataset_id) {
+            errors.dataset_id = 'Dataset is required';
         }
         if (!this.value.chart_type) {
             errors.chart_type = 'Chart Type is required';
@@ -3336,7 +3336,7 @@ class ChartConfigInputComponent {
                 useExisting: forwardRef(() => ChartConfigInputComponent),
                 multi: true,
             }
-        ], viewQueries: [{ propertyName: "yAxesContainer", first: true, predicate: ["yAxesContainer"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ["filterContainer"], descendants: true }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"chart-config-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n\n  <mantle-field-grid fxFlex=\"0 0 auto\">\n\n    <mat-form-field *mantleFieldGridItem=\"let _; colspan: 2;\" [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.dataset' | translate }}\n      </label>\n      <mtx-select\n          [(ngModel)]=\"value.dataset\"\n          (change)=\"setDataset($event)\"\n          appendTo=\"body\">\n        <mtx-option value=\"\"></mtx-option>\n        <mtx-option *ngFor=\"let option of datasets\" [value]=\"option\">\n          {{option}}\n        </mtx-option>\n      </mtx-select>\n    </mat-form-field>\n\n    <mat-form-field *mantleFieldGridItem [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.chart_type' | translate }}\n      </label>\n      <mtx-select\n          [(ngModel)]=\"value.chart_type\"\n          (change)=\"setChartType($event)\"\n          appendTo=\"body\">\n        <mtx-option value=\"\"></mtx-option>\n        <mtx-option *ngFor=\"let option of chartTypes\" [value]=\"option.value\">\n          {{ option.label | translate }}\n        </mtx-option>\n      </mtx-select>\n    </mat-form-field>\n\n    <mat-form-field *mantleFieldGridItem=\"let _; colspan: 2;\" [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.x_axis' | translate }}\n      </label>\n      <mtx-select\n          [(ngModel)]=\"value.x_axis.attr\"\n          appendTo=\"body\">\n        <mtx-option value=\"\"></mtx-option>\n        <mtx-option *ngFor=\"let option of columnPickerOptions.values\" [value]=\"option.value\">\n          {{option.label}}\n        </mtx-option>\n      </mtx-select>\n    </mat-form-field>\n\n    <mat-form-field *mantleFieldGridItem [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.x_axis_label' | translate }}\n      </label>\n      <input matInput\n          type=\"text\"\n          [(ngModel)]=\"value.x_axis.label\"\n          autocomplete=\"off\">\n    </mat-form-field>\n\n  </mantle-field-grid>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"chart-config-subsection-header\">{{ 'mantle.chart_config.y_axes' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"y-axes-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.column' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.aggregation' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.label' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #yAxesContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"y-axis-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let column of value.y_axes; let i = index\">\n\n        <ng-container [formGroup]=\"yAxisFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'yAxisName' + i\"\n                [formControlName]=\"'attr'\"\n                [options]=\"columnPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setYAxisColumn(column, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'yAxisAggregation' + i\"\n                [formControlName]=\"'aggregation'\"\n                [options]=\"column.options.aggregations\"\n                [required]=\"true\"\n                [disable]=\"!column.attr\"\n                (change)=\"setYAxisAggregation(column, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-text-input\n                [id]=\"'yAxisLabel' + i\"\n                [formControlName]=\"'label'\"\n                [required]=\"true\"\n                [disable]=\"!column.attr\">\n            </mantle-text-input>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeYAxis(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addYAxis()\">{{ 'mantle.chart_config.add_y_axis' | translate }}</button>\n\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"chart-config-subsection-header\">{{ 'mantle.chart_config.filters' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"filters-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.filter' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.operator' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.filter_value' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #filterContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"filter-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let filter of value.filters; let i = index\">\n\n        <ng-container [formGroup]=\"filterFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterAttr' + i\"\n                [formControlName]=\"'attr'\"\n                [options]=\"columnPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setFilterColumn(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterOperator' + i\"\n                [formControlName]=\"'operator'\"\n                [options]=\"filter.options.operators\"\n                [required]=\"true\"\n                [disable]=\"!filter.attr\"\n                (change)=\"setFilterOperator(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <ng-container [ngSwitch]=\"filter.type\">\n\n              <mantle-number-input *ngSwitchCase=\"'number'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-number-input>\n\n              <mantle-datepicker *ngSwitchCase=\"'date'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-datepicker>\n\n              <mantle-datetimepicker *ngSwitchCase=\"'datetime'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-datetimepicker>\n\n              <mantle-text-input *ngSwitchCase=\"'string'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-text-input>\n\n              <mantle-multiselect-input *ngSwitchCase=\"'dropdown'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [options]=\"filter.options.preSelectedValues\"\n                  [required]=\"true\">\n              </mantle-multiselect-input>\n\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeFilter(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addFilter()\">{{ 'mantle.chart_config.add_filter' | translate }}</button>\n\n  </div>\n\n  <mat-hint *ngIf=\"value.dataset && errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</div>\n", styles: [".chart-config-editor-wrapper{height:100%;width:100%}label{text-transform:uppercase}.chart-config-subsection-header{margin-top:16px;font-size:16px;font-weight:600}.items-container,.filters-container,.y-axes-container{width:100%;margin:0;border:1px solid #ccc;border-radius:8px;padding:8px}.items-container .header-row,.filters-container .header-row,.y-axes-container .header-row{align-items:center;padding:8px 12px;border-bottom:2px solid #ccc}.items-container .header-row .header-row-label,.filters-container .header-row .header-row-label,.y-axes-container .header-row .header-row-label{font-weight:700;font-size:14px;text-align:left}.field-rows,.filter-rows,.y-axis-rows{overflow-y:auto}.field-row{padding:8px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:14px}.error-message{color:#f44336;font-size:12px;margin-top:4px;width:100%;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i4$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5$2.MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "component", type: i5$2.MtxOption, selector: "mtx-option", inputs: ["value", "disabled"], exportAs: ["mtxOption"] }, { kind: "directive", type: FieldGridItemDirective, selector: "[mantleFieldGridItem]", inputs: ["mantleFieldGridItemColspan", "mantleFieldGridItemRowspan"] }, { kind: "component", type: DatepickerComponent, selector: "mantle-datepicker", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: DatetimepickerComponent, selector: "mantle-datetimepicker", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: DropdownComponent, selector: "mantle-dropdown", inputs: ["label", "tooltip", "options", "disable", "required", "error"], outputs: ["change"] }, { kind: "component", type: NumberInputComponent, selector: "mantle-number-input", inputs: ["label", "tooltip", "options", "disable", "required", "error"] }, { kind: "component", type: TextInputComponent, selector: "mantle-text-input", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: MultiselectInputComponent, selector: "mantle-multiselect-input", inputs: ["label", "tooltip", "options", "disable", "required", "error"] }, { kind: "component", type: FieldGridComponent, selector: "mantle-field-grid", inputs: ["singleColumn", "rowHeight"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "yAxesContainer", first: true, predicate: ["yAxesContainer"], descendants: true }, { propertyName: "filterContainer", first: true, predicate: ["filterContainer"], descendants: true }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"chart-config-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n\n  <mantle-field-grid fxFlex=\"0 0 auto\">\n\n    <mat-form-field *mantleFieldGridItem=\"let _; colspan: 2;\" [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.dataset' | translate }}\n      </label>\n      <mtx-select\n          [(ngModel)]=\"value.dataset_id\"\n          (change)=\"setDatasetId($event)\"\n          appendTo=\"body\">\n        <mtx-option value=\"\"></mtx-option>\n        <mtx-option *ngFor=\"let option of datasets\" [value]=\"option.id\">\n          {{option.name}}\n        </mtx-option>\n      </mtx-select>\n    </mat-form-field>\n\n    <mat-form-field *mantleFieldGridItem [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.chart_type' | translate }}\n      </label>\n      <mtx-select\n          [(ngModel)]=\"value.chart_type\"\n          (change)=\"setChartType($event)\"\n          appendTo=\"body\">\n        <mtx-option value=\"\"></mtx-option>\n        <mtx-option *ngFor=\"let option of chartTypes\" [value]=\"option.value\">\n          {{ option.label | translate }}\n        </mtx-option>\n      </mtx-select>\n    </mat-form-field>\n\n    <mat-form-field *mantleFieldGridItem=\"let _; colspan: 2;\" [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.x_axis' | translate }}\n      </label>\n      <mtx-select\n          [(ngModel)]=\"value.x_axis.attr\"\n          appendTo=\"body\">\n        <mtx-option value=\"\"></mtx-option>\n        <mtx-option *ngFor=\"let option of columnPickerOptions.values\" [value]=\"option.value\">\n          {{option.label}}\n        </mtx-option>\n      </mtx-select>\n    </mat-form-field>\n\n    <mat-form-field *mantleFieldGridItem [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.x_axis_label' | translate }}\n      </label>\n      <input matInput\n          type=\"text\"\n          [(ngModel)]=\"value.x_axis.label\"\n          autocomplete=\"off\">\n    </mat-form-field>\n\n  </mantle-field-grid>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"chart-config-subsection-header\">{{ 'mantle.chart_config.y_axes' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"y-axes-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.column' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.aggregation' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.label' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #yAxesContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"y-axis-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let column of value.y_axes; let i = index\">\n\n        <ng-container [formGroup]=\"yAxisFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'yAxisName' + i\"\n                [formControlName]=\"'attr'\"\n                [options]=\"columnPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setYAxisColumn(column, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'yAxisAggregation' + i\"\n                [formControlName]=\"'aggregation'\"\n                [options]=\"column.options.aggregations\"\n                [required]=\"true\"\n                [disable]=\"!column.attr\"\n                (change)=\"setYAxisAggregation(column, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-text-input\n                [id]=\"'yAxisLabel' + i\"\n                [formControlName]=\"'label'\"\n                [required]=\"true\"\n                [disable]=\"!column.attr\">\n            </mantle-text-input>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeYAxis(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addYAxis()\">{{ 'mantle.chart_config.add_y_axis' | translate }}</button>\n\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"chart-config-subsection-header\">{{ 'mantle.chart_config.filters' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"filters-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.filter' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.operator' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.filter_value' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #filterContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"filter-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let filter of value.filters; let i = index\">\n\n        <ng-container [formGroup]=\"filterFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterAttr' + i\"\n                [formControlName]=\"'attr'\"\n                [options]=\"columnPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setFilterColumn(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterOperator' + i\"\n                [formControlName]=\"'operator'\"\n                [options]=\"filter.options.operators\"\n                [required]=\"true\"\n                [disable]=\"!filter.attr\"\n                (change)=\"setFilterOperator(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <ng-container [ngSwitch]=\"filter.type\">\n\n              <mantle-number-input *ngSwitchCase=\"'number'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-number-input>\n\n              <mantle-datepicker *ngSwitchCase=\"'date'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-datepicker>\n\n              <mantle-datetimepicker *ngSwitchCase=\"'datetime'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-datetimepicker>\n\n              <mantle-text-input *ngSwitchCase=\"'string'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-text-input>\n\n              <mantle-multiselect-input *ngSwitchCase=\"'dropdown'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [options]=\"filter.options.preSelectedValues\"\n                  [required]=\"true\">\n              </mantle-multiselect-input>\n\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeFilter(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addFilter()\">{{ 'mantle.chart_config.add_filter' | translate }}</button>\n\n  </div>\n\n  <mat-hint *ngIf=\"value.dataset_id && errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</div>\n", styles: [".chart-config-editor-wrapper{height:100%;width:100%}label{text-transform:uppercase}.chart-config-subsection-header{margin-top:16px;font-size:16px;font-weight:600}.items-container,.filters-container,.y-axes-container{width:100%;margin:0;border:1px solid #ccc;border-radius:8px;padding:8px}.items-container .header-row,.filters-container .header-row,.y-axes-container .header-row{align-items:center;padding:8px 12px;border-bottom:2px solid #ccc}.items-container .header-row .header-row-label,.filters-container .header-row .header-row-label,.y-axes-container .header-row .header-row-label{font-weight:700;font-size:14px;text-align:left}.field-rows,.filter-rows,.y-axis-rows{overflow-y:auto}.field-row{padding:8px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:14px}.error-message{color:#f44336;font-size:12px;margin-top:4px;width:100%;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i4$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5$2.MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "component", type: i5$2.MtxOption, selector: "mtx-option", inputs: ["value", "disabled"], exportAs: ["mtxOption"] }, { kind: "directive", type: FieldGridItemDirective, selector: "[mantleFieldGridItem]", inputs: ["mantleFieldGridItemColspan", "mantleFieldGridItemRowspan"] }, { kind: "component", type: DatepickerComponent, selector: "mantle-datepicker", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: DatetimepickerComponent, selector: "mantle-datetimepicker", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: DropdownComponent, selector: "mantle-dropdown", inputs: ["label", "tooltip", "options", "disable", "required", "error"], outputs: ["change"] }, { kind: "component", type: NumberInputComponent, selector: "mantle-number-input", inputs: ["label", "tooltip", "options", "disable", "required", "error"] }, { kind: "component", type: TextInputComponent, selector: "mantle-text-input", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: MultiselectInputComponent, selector: "mantle-multiselect-input", inputs: ["label", "tooltip", "options", "disable", "required", "error"] }, { kind: "component", type: FieldGridComponent, selector: "mantle-field-grid", inputs: ["singleColumn", "rowHeight"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ChartConfigInputComponent, decorators: [{
             type: Component,
@@ -3351,7 +3351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                             useExisting: forwardRef(() => ChartConfigInputComponent),
                             multi: true,
                         }
-                    ], template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"chart-config-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n\n  <mantle-field-grid fxFlex=\"0 0 auto\">\n\n    <mat-form-field *mantleFieldGridItem=\"let _; colspan: 2;\" [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.dataset' | translate }}\n      </label>\n      <mtx-select\n          [(ngModel)]=\"value.dataset\"\n          (change)=\"setDataset($event)\"\n          appendTo=\"body\">\n        <mtx-option value=\"\"></mtx-option>\n        <mtx-option *ngFor=\"let option of datasets\" [value]=\"option\">\n          {{option}}\n        </mtx-option>\n      </mtx-select>\n    </mat-form-field>\n\n    <mat-form-field *mantleFieldGridItem [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.chart_type' | translate }}\n      </label>\n      <mtx-select\n          [(ngModel)]=\"value.chart_type\"\n          (change)=\"setChartType($event)\"\n          appendTo=\"body\">\n        <mtx-option value=\"\"></mtx-option>\n        <mtx-option *ngFor=\"let option of chartTypes\" [value]=\"option.value\">\n          {{ option.label | translate }}\n        </mtx-option>\n      </mtx-select>\n    </mat-form-field>\n\n    <mat-form-field *mantleFieldGridItem=\"let _; colspan: 2;\" [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.x_axis' | translate }}\n      </label>\n      <mtx-select\n          [(ngModel)]=\"value.x_axis.attr\"\n          appendTo=\"body\">\n        <mtx-option value=\"\"></mtx-option>\n        <mtx-option *ngFor=\"let option of columnPickerOptions.values\" [value]=\"option.value\">\n          {{option.label}}\n        </mtx-option>\n      </mtx-select>\n    </mat-form-field>\n\n    <mat-form-field *mantleFieldGridItem [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.x_axis_label' | translate }}\n      </label>\n      <input matInput\n          type=\"text\"\n          [(ngModel)]=\"value.x_axis.label\"\n          autocomplete=\"off\">\n    </mat-form-field>\n\n  </mantle-field-grid>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"chart-config-subsection-header\">{{ 'mantle.chart_config.y_axes' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"y-axes-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.column' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.aggregation' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.label' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #yAxesContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"y-axis-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let column of value.y_axes; let i = index\">\n\n        <ng-container [formGroup]=\"yAxisFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'yAxisName' + i\"\n                [formControlName]=\"'attr'\"\n                [options]=\"columnPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setYAxisColumn(column, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'yAxisAggregation' + i\"\n                [formControlName]=\"'aggregation'\"\n                [options]=\"column.options.aggregations\"\n                [required]=\"true\"\n                [disable]=\"!column.attr\"\n                (change)=\"setYAxisAggregation(column, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-text-input\n                [id]=\"'yAxisLabel' + i\"\n                [formControlName]=\"'label'\"\n                [required]=\"true\"\n                [disable]=\"!column.attr\">\n            </mantle-text-input>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeYAxis(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addYAxis()\">{{ 'mantle.chart_config.add_y_axis' | translate }}</button>\n\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"chart-config-subsection-header\">{{ 'mantle.chart_config.filters' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"filters-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.filter' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.operator' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.filter_value' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #filterContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"filter-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let filter of value.filters; let i = index\">\n\n        <ng-container [formGroup]=\"filterFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterAttr' + i\"\n                [formControlName]=\"'attr'\"\n                [options]=\"columnPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setFilterColumn(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterOperator' + i\"\n                [formControlName]=\"'operator'\"\n                [options]=\"filter.options.operators\"\n                [required]=\"true\"\n                [disable]=\"!filter.attr\"\n                (change)=\"setFilterOperator(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <ng-container [ngSwitch]=\"filter.type\">\n\n              <mantle-number-input *ngSwitchCase=\"'number'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-number-input>\n\n              <mantle-datepicker *ngSwitchCase=\"'date'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-datepicker>\n\n              <mantle-datetimepicker *ngSwitchCase=\"'datetime'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-datetimepicker>\n\n              <mantle-text-input *ngSwitchCase=\"'string'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-text-input>\n\n              <mantle-multiselect-input *ngSwitchCase=\"'dropdown'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [options]=\"filter.options.preSelectedValues\"\n                  [required]=\"true\">\n              </mantle-multiselect-input>\n\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeFilter(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addFilter()\">{{ 'mantle.chart_config.add_filter' | translate }}</button>\n\n  </div>\n\n  <mat-hint *ngIf=\"value.dataset && errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</div>\n", styles: [".chart-config-editor-wrapper{height:100%;width:100%}label{text-transform:uppercase}.chart-config-subsection-header{margin-top:16px;font-size:16px;font-weight:600}.items-container,.filters-container,.y-axes-container{width:100%;margin:0;border:1px solid #ccc;border-radius:8px;padding:8px}.items-container .header-row,.filters-container .header-row,.y-axes-container .header-row{align-items:center;padding:8px 12px;border-bottom:2px solid #ccc}.items-container .header-row .header-row-label,.filters-container .header-row .header-row-label,.y-axes-container .header-row .header-row-label{font-weight:700;font-size:14px;text-align:left}.field-rows,.filter-rows,.y-axis-rows{overflow-y:auto}.field-row{padding:8px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:14px}.error-message{color:#f44336;font-size:12px;margin-top:4px;width:100%;text-align:center}\n"] }]
+                    ], template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"chart-config-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n\n  <mantle-field-grid fxFlex=\"0 0 auto\">\n\n    <mat-form-field *mantleFieldGridItem=\"let _; colspan: 2;\" [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.dataset' | translate }}\n      </label>\n      <mtx-select\n          [(ngModel)]=\"value.dataset_id\"\n          (change)=\"setDatasetId($event)\"\n          appendTo=\"body\">\n        <mtx-option value=\"\"></mtx-option>\n        <mtx-option *ngFor=\"let option of datasets\" [value]=\"option.id\">\n          {{option.name}}\n        </mtx-option>\n      </mtx-select>\n    </mat-form-field>\n\n    <mat-form-field *mantleFieldGridItem [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.chart_type' | translate }}\n      </label>\n      <mtx-select\n          [(ngModel)]=\"value.chart_type\"\n          (change)=\"setChartType($event)\"\n          appendTo=\"body\">\n        <mtx-option value=\"\"></mtx-option>\n        <mtx-option *ngFor=\"let option of chartTypes\" [value]=\"option.value\">\n          {{ option.label | translate }}\n        </mtx-option>\n      </mtx-select>\n    </mat-form-field>\n\n    <mat-form-field *mantleFieldGridItem=\"let _; colspan: 2;\" [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.x_axis' | translate }}\n      </label>\n      <mtx-select\n          [(ngModel)]=\"value.x_axis.attr\"\n          appendTo=\"body\">\n        <mtx-option value=\"\"></mtx-option>\n        <mtx-option *ngFor=\"let option of columnPickerOptions.values\" [value]=\"option.value\">\n          {{option.label}}\n        </mtx-option>\n      </mtx-select>\n    </mat-form-field>\n\n    <mat-form-field *mantleFieldGridItem [class.mat-mdc-form-field-invalid]=\"error\">\n      <label>\n        {{ 'mantle.chart_config.x_axis_label' | translate }}\n      </label>\n      <input matInput\n          type=\"text\"\n          [(ngModel)]=\"value.x_axis.label\"\n          autocomplete=\"off\">\n    </mat-form-field>\n\n  </mantle-field-grid>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"chart-config-subsection-header\">{{ 'mantle.chart_config.y_axes' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"y-axes-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.column' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.aggregation' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.label' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #yAxesContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"y-axis-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let column of value.y_axes; let i = index\">\n\n        <ng-container [formGroup]=\"yAxisFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'yAxisName' + i\"\n                [formControlName]=\"'attr'\"\n                [options]=\"columnPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setYAxisColumn(column, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'yAxisAggregation' + i\"\n                [formControlName]=\"'aggregation'\"\n                [options]=\"column.options.aggregations\"\n                [required]=\"true\"\n                [disable]=\"!column.attr\"\n                (change)=\"setYAxisAggregation(column, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-text-input\n                [id]=\"'yAxisLabel' + i\"\n                [formControlName]=\"'label'\"\n                [required]=\"true\"\n                [disable]=\"!column.attr\">\n            </mantle-text-input>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeYAxis(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addYAxis()\">{{ 'mantle.chart_config.add_y_axis' | translate }}</button>\n\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"chart-config-subsection-header\">{{ 'mantle.chart_config.filters' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"filters-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.filter' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.operator' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.chart_config.filter_value' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #filterContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"filter-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let filter of value.filters; let i = index\">\n\n        <ng-container [formGroup]=\"filterFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterAttr' + i\"\n                [formControlName]=\"'attr'\"\n                [options]=\"columnPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setFilterColumn(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterOperator' + i\"\n                [formControlName]=\"'operator'\"\n                [options]=\"filter.options.operators\"\n                [required]=\"true\"\n                [disable]=\"!filter.attr\"\n                (change)=\"setFilterOperator(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <ng-container [ngSwitch]=\"filter.type\">\n\n              <mantle-number-input *ngSwitchCase=\"'number'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-number-input>\n\n              <mantle-datepicker *ngSwitchCase=\"'date'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-datepicker>\n\n              <mantle-datetimepicker *ngSwitchCase=\"'datetime'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-datetimepicker>\n\n              <mantle-text-input *ngSwitchCase=\"'string'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.attr\">\n              </mantle-text-input>\n\n              <mantle-multiselect-input *ngSwitchCase=\"'dropdown'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [options]=\"filter.options.preSelectedValues\"\n                  [required]=\"true\">\n              </mantle-multiselect-input>\n\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeFilter(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addFilter()\">{{ 'mantle.chart_config.add_filter' | translate }}</button>\n\n  </div>\n\n  <mat-hint *ngIf=\"value.dataset_id && errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</div>\n", styles: [".chart-config-editor-wrapper{height:100%;width:100%}label{text-transform:uppercase}.chart-config-subsection-header{margin-top:16px;font-size:16px;font-weight:600}.items-container,.filters-container,.y-axes-container{width:100%;margin:0;border:1px solid #ccc;border-radius:8px;padding:8px}.items-container .header-row,.filters-container .header-row,.y-axes-container .header-row{align-items:center;padding:8px 12px;border-bottom:2px solid #ccc}.items-container .header-row .header-row-label,.filters-container .header-row .header-row-label,.y-axes-container .header-row .header-row-label{font-weight:700;font-size:14px;text-align:left}.field-rows,.filter-rows,.y-axis-rows{overflow-y:auto}.field-row{padding:8px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:14px}.error-message{color:#f44336;font-size:12px;margin-top:4px;width:100%;text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: ArrayService }, { type: LocaleService }], propDecorators: { label: [{
                 type: Input
             }], tooltip: [{
@@ -3376,7 +3376,7 @@ class ReportConfigInputComponent {
     constructor(arrayService, localeService) {
         this.arrayService = arrayService;
         this.localeService = localeService;
-        this.value = { dataset: '', aggregated: false, columns: [], filters: [] };
+        this.value = { dataset_id: '', aggregated: false, columns: [], filters: [] };
         this.filterPickerOptions = { values: [] };
         this.filterFormArray = new FormArray([]);
         this.onChange = (newValue) => { };
@@ -3401,9 +3401,9 @@ class ReportConfigInputComponent {
         this.onChange(this.value);
     }
     applyReportOptions() {
-        this.datasets = this.options.datasets.map((dataset) => { return dataset.name; });
+        this.datasets = this.options.datasets.map((dataset) => { return { id: dataset.id, name: dataset.name }; });
         this.datasetColumns = [];
-        let config = this.arrayService.findByAttribute(this.options.datasets, 'name', this.value.dataset);
+        let config = this.arrayService.findByAttribute(this.options.datasets, 'id', this.value.dataset_id);
         if (!config)
             return;
         this.datasetColumns = config.columns.map((column) => {
@@ -3432,8 +3432,8 @@ class ReportConfigInputComponent {
             return column.selected;
         });
     }
-    setDataset(dataset) {
-        this.value.dataset = dataset;
+    setDatasetId(datasetId) {
+        this.value.dataset_id = datasetId;
         this.value.aggregated = false;
         this.value.columns = [];
         this.value.filters = [];
@@ -3618,8 +3618,8 @@ class ReportConfigInputComponent {
     }
     validate(control) {
         const errors = {};
-        if (!this.value.dataset) {
-            errors.dataset = 'Dataset is required';
+        if (!this.value.dataset_id) {
+            errors.dataset_id = 'Dataset is required';
         }
         if (this.value.columns.length === 0) {
             errors.columns = 'You must select at least one column';
@@ -3664,7 +3664,7 @@ class ReportConfigInputComponent {
                 useExisting: forwardRef(() => ReportConfigInputComponent),
                 multi: true,
             }
-        ], viewQueries: [{ propertyName: "filterContainer", first: true, predicate: ["filterContainer"], descendants: true }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"report-config-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n  <mat-form-field fxFlex=\"0 0 auto\" [class.mat-mdc-form-field-invalid]=\"error\">\n    <label>\n      {{ 'mantle.report_config.dataset' | translate }}\n    </label>\n    <mtx-select\n        [(ngModel)]=\"value.dataset\"\n        (change)=\"setDataset($event)\"\n        appendTo=\"body\">\n      <mtx-option value=\"\"></mtx-option>\n      <mtx-option *ngFor=\"let option of datasets\" [value]=\"option\">\n        {{option}}\n      </mtx-option>\n    </mtx-select>\n  </mat-form-field>\n\n  <div fxFlex=\"0 0 auto\">\n    <mat-checkbox [checked]=\"value.aggregated\" (change)=\"setAggregated($event.checked)\">\n      {{ 'mantle.report_config.use_aggregation' | translate }}\n    </mat-checkbox>\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.columns' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"items-container\">\n    \n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"0 0 24px\" class=\"header-row-label\"></div>\n      <div fxFlex=\"0 0 80px\" class=\"header-row-label selection-check-header\">{{ 'mantle.report_config.select' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.column' | translate }}</div>\n      <ng-container *ngIf=\"value.aggregated\">\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.group_by' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count_distinct' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.average' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.max' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.min' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.sum' | translate }}</div>\n      </ng-container>\n    </div>\n\n    <div fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"field-rows\"\n         cdkDropList [cdkDropListData]=\"value.columns\" (cdkDropListDropped)=\"drop($event)\">\n\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\" class=\"field-row\"\n           *ngFor=\"let item of datasetColumns; let i = index\" cdkDrag>\n\n        <!-- Drag handle -->\n        <div fxFlex=\"0 0 24px\" class=\"drag-handle\" cdkDragHandle>\n          <mat-icon>drag_indicator</mat-icon>\n        </div>\n\n        <!-- Left checkbox -->\n        <mat-checkbox fxFlex=\"0 0 80px\" class=\"selection-check\" [checked]=\"item.selected\" (change)=\"setSelected(item, $event.checked)\"></mat-checkbox>\n\n        <!-- Label -->\n        <div fxFlex=\"1 1 0\">{{ item.name }}</div>\n\n        <!-- Right checkboxes -->\n        <ng-container *ngIf=\"value.aggregated\">\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [checked]=\"item.group_by\" (change)=\"setGroupBy(item, $event.checked)\" [disabled]=\"!item.selected\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count_distinct\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.average\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.max\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.min\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.sum\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean', 'date', 'datetime'].includes(item.type)\"></mat-checkbox>\n        </ng-container>\n      </div>\n\n    </div>\n\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.filters' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"filters-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.operator' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter_value' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #filterContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"filter-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let filter of value.filters; let i = index\">\n\n        <ng-container [formGroup]=\"filterFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterName' + i\"\n                [formControlName]=\"'name'\"\n                [options]=\"filterPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setFilterColumn(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterOperator' + i\"\n                [formControlName]=\"'operator'\"\n                [options]=\"filter.options.operators\"\n                [required]=\"true\"\n                [disable]=\"!filter.name\"\n                (change)=\"setFilterOperator(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <ng-container [ngSwitch]=\"filter.type\">\n\n              <mantle-number-input *ngSwitchCase=\"'number'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-number-input>\n\n              <mantle-datepicker *ngSwitchCase=\"'date'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datepicker>\n\n              <mantle-datetimepicker *ngSwitchCase=\"'datetime'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datetimepicker>\n\n              <mantle-text-input *ngSwitchCase=\"'string'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-text-input>\n\n              <mantle-multiselect-input *ngSwitchCase=\"'dropdown'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [options]=\"filter.options.preSelectedValues\"\n                  [required]=\"true\">\n              </mantle-multiselect-input>\n\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeFilter(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addFilter()\">{{ 'mantle.report_config.add_filter' | translate }}</button>\n\n  </div>\n\n  <mat-hint *ngIf=\"value.dataset && errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</div>\n", styles: [".report-config-editor-wrapper{height:100%;width:100%}label{text-transform:uppercase}.report-config-subsection-header{margin-top:16px;font-size:16px;font-weight:600}.items-container,.filters-container{width:100%;margin:0;border:1px solid #ccc;border-radius:8px;padding:8px}.items-container .header-row,.filters-container .header-row{align-items:center;padding:8px 12px;border-bottom:2px solid #ccc}.items-container .header-row .header-row-label,.filters-container .header-row .header-row-label{font-weight:700;font-size:14px;text-align:left}.items-container .header-row .selection-check-header,.items-container .header-row .aggregation-check-header,.filters-container .header-row .selection-check-header,.filters-container .header-row .aggregation-check-header{text-align:center}.field-rows,.filter-rows{overflow-y:auto}.field-row{padding:8px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:14px}.field-row .drag-handle{cursor:grab;display:flex;align-items:center}.field-row .selection-check,.field-row .aggregation-check{text-align:center}.error-message{color:#f44336;font-size:12px;margin-top:4px;width:100%;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i4$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i5$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5$2.MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "component", type: i5$2.MtxOption, selector: "mtx-option", inputs: ["value", "disabled"], exportAs: ["mtxOption"] }, { kind: "component", type: DatepickerComponent, selector: "mantle-datepicker", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: DatetimepickerComponent, selector: "mantle-datetimepicker", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: DropdownComponent, selector: "mantle-dropdown", inputs: ["label", "tooltip", "options", "disable", "required", "error"], outputs: ["change"] }, { kind: "component", type: NumberInputComponent, selector: "mantle-number-input", inputs: ["label", "tooltip", "options", "disable", "required", "error"] }, { kind: "component", type: TextInputComponent, selector: "mantle-text-input", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: MultiselectInputComponent, selector: "mantle-multiselect-input", inputs: ["label", "tooltip", "options", "disable", "required", "error"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "filterContainer", first: true, predicate: ["filterContainer"], descendants: true }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"report-config-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n  <mat-form-field fxFlex=\"0 0 auto\" [class.mat-mdc-form-field-invalid]=\"error\">\n    <label>\n      {{ 'mantle.report_config.dataset' | translate }}\n    </label>\n    <mtx-select\n        [(ngModel)]=\"value.dataset_id\"\n        (change)=\"setDatasetId($event)\"\n        appendTo=\"body\">\n      <mtx-option value=\"\"></mtx-option>\n      <mtx-option *ngFor=\"let option of datasets\" [value]=\"option.id\">\n        {{option.name}}\n      </mtx-option>\n    </mtx-select>\n  </mat-form-field>\n\n  <div fxFlex=\"0 0 auto\">\n    <mat-checkbox [checked]=\"value.aggregated\" (change)=\"setAggregated($event.checked)\">\n      {{ 'mantle.report_config.use_aggregation' | translate }}\n    </mat-checkbox>\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.columns' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"items-container\">\n    \n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"0 0 24px\" class=\"header-row-label\"></div>\n      <div fxFlex=\"0 0 80px\" class=\"header-row-label selection-check-header\">{{ 'mantle.report_config.select' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.column' | translate }}</div>\n      <ng-container *ngIf=\"value.aggregated\">\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.group_by' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count_distinct' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.average' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.max' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.min' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.sum' | translate }}</div>\n      </ng-container>\n    </div>\n\n    <div fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"field-rows\"\n         cdkDropList [cdkDropListData]=\"value.columns\" (cdkDropListDropped)=\"drop($event)\">\n\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\" class=\"field-row\"\n           *ngFor=\"let item of datasetColumns; let i = index\" cdkDrag>\n\n        <!-- Drag handle -->\n        <div fxFlex=\"0 0 24px\" class=\"drag-handle\" cdkDragHandle>\n          <mat-icon>drag_indicator</mat-icon>\n        </div>\n\n        <!-- Left checkbox -->\n        <mat-checkbox fxFlex=\"0 0 80px\" class=\"selection-check\" [checked]=\"item.selected\" (change)=\"setSelected(item, $event.checked)\"></mat-checkbox>\n\n        <!-- Label -->\n        <div fxFlex=\"1 1 0\">{{ item.name }}</div>\n\n        <!-- Right checkboxes -->\n        <ng-container *ngIf=\"value.aggregated\">\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [checked]=\"item.group_by\" (change)=\"setGroupBy(item, $event.checked)\" [disabled]=\"!item.selected\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count_distinct\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.average\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.max\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.min\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.sum\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean', 'date', 'datetime'].includes(item.type)\"></mat-checkbox>\n        </ng-container>\n      </div>\n\n    </div>\n\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.filters' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"filters-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.operator' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter_value' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #filterContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"filter-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let filter of value.filters; let i = index\">\n\n        <ng-container [formGroup]=\"filterFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterName' + i\"\n                [formControlName]=\"'name'\"\n                [options]=\"filterPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setFilterColumn(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterOperator' + i\"\n                [formControlName]=\"'operator'\"\n                [options]=\"filter.options.operators\"\n                [required]=\"true\"\n                [disable]=\"!filter.name\"\n                (change)=\"setFilterOperator(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <ng-container [ngSwitch]=\"filter.type\">\n\n              <mantle-number-input *ngSwitchCase=\"'number'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-number-input>\n\n              <mantle-datepicker *ngSwitchCase=\"'date'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datepicker>\n\n              <mantle-datetimepicker *ngSwitchCase=\"'datetime'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datetimepicker>\n\n              <mantle-text-input *ngSwitchCase=\"'string'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-text-input>\n\n              <mantle-multiselect-input *ngSwitchCase=\"'dropdown'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [options]=\"filter.options.preSelectedValues\"\n                  [required]=\"true\">\n              </mantle-multiselect-input>\n\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeFilter(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addFilter()\">{{ 'mantle.report_config.add_filter' | translate }}</button>\n\n  </div>\n\n  <mat-hint *ngIf=\"value.dataset_id && errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</div>\n", styles: [".report-config-editor-wrapper{height:100%;width:100%}label{text-transform:uppercase}.report-config-subsection-header{margin-top:16px;font-size:16px;font-weight:600}.items-container,.filters-container{width:100%;margin:0;border:1px solid #ccc;border-radius:8px;padding:8px}.items-container .header-row,.filters-container .header-row{align-items:center;padding:8px 12px;border-bottom:2px solid #ccc}.items-container .header-row .header-row-label,.filters-container .header-row .header-row-label{font-weight:700;font-size:14px;text-align:left}.items-container .header-row .selection-check-header,.items-container .header-row .aggregation-check-header,.filters-container .header-row .selection-check-header,.filters-container .header-row .aggregation-check-header{text-align:center}.field-rows,.filter-rows{overflow-y:auto}.field-row{padding:8px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:14px}.field-row .drag-handle{cursor:grab;display:flex;align-items:center}.field-row .selection-check,.field-row .aggregation-check{text-align:center}.error-message{color:#f44336;font-size:12px;margin-top:4px;width:100%;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i4$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i5$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5$2.MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "component", type: i5$2.MtxOption, selector: "mtx-option", inputs: ["value", "disabled"], exportAs: ["mtxOption"] }, { kind: "component", type: DatepickerComponent, selector: "mantle-datepicker", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: DatetimepickerComponent, selector: "mantle-datetimepicker", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: DropdownComponent, selector: "mantle-dropdown", inputs: ["label", "tooltip", "options", "disable", "required", "error"], outputs: ["change"] }, { kind: "component", type: NumberInputComponent, selector: "mantle-number-input", inputs: ["label", "tooltip", "options", "disable", "required", "error"] }, { kind: "component", type: TextInputComponent, selector: "mantle-text-input", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: MultiselectInputComponent, selector: "mantle-multiselect-input", inputs: ["label", "tooltip", "options", "disable", "required", "error"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ReportConfigInputComponent, decorators: [{
             type: Component,
@@ -3679,7 +3679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                             useExisting: forwardRef(() => ReportConfigInputComponent),
                             multi: true,
                         }
-                    ], template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"report-config-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n  <mat-form-field fxFlex=\"0 0 auto\" [class.mat-mdc-form-field-invalid]=\"error\">\n    <label>\n      {{ 'mantle.report_config.dataset' | translate }}\n    </label>\n    <mtx-select\n        [(ngModel)]=\"value.dataset\"\n        (change)=\"setDataset($event)\"\n        appendTo=\"body\">\n      <mtx-option value=\"\"></mtx-option>\n      <mtx-option *ngFor=\"let option of datasets\" [value]=\"option\">\n        {{option}}\n      </mtx-option>\n    </mtx-select>\n  </mat-form-field>\n\n  <div fxFlex=\"0 0 auto\">\n    <mat-checkbox [checked]=\"value.aggregated\" (change)=\"setAggregated($event.checked)\">\n      {{ 'mantle.report_config.use_aggregation' | translate }}\n    </mat-checkbox>\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.columns' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"items-container\">\n    \n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"0 0 24px\" class=\"header-row-label\"></div>\n      <div fxFlex=\"0 0 80px\" class=\"header-row-label selection-check-header\">{{ 'mantle.report_config.select' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.column' | translate }}</div>\n      <ng-container *ngIf=\"value.aggregated\">\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.group_by' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count_distinct' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.average' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.max' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.min' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.sum' | translate }}</div>\n      </ng-container>\n    </div>\n\n    <div fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"field-rows\"\n         cdkDropList [cdkDropListData]=\"value.columns\" (cdkDropListDropped)=\"drop($event)\">\n\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\" class=\"field-row\"\n           *ngFor=\"let item of datasetColumns; let i = index\" cdkDrag>\n\n        <!-- Drag handle -->\n        <div fxFlex=\"0 0 24px\" class=\"drag-handle\" cdkDragHandle>\n          <mat-icon>drag_indicator</mat-icon>\n        </div>\n\n        <!-- Left checkbox -->\n        <mat-checkbox fxFlex=\"0 0 80px\" class=\"selection-check\" [checked]=\"item.selected\" (change)=\"setSelected(item, $event.checked)\"></mat-checkbox>\n\n        <!-- Label -->\n        <div fxFlex=\"1 1 0\">{{ item.name }}</div>\n\n        <!-- Right checkboxes -->\n        <ng-container *ngIf=\"value.aggregated\">\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [checked]=\"item.group_by\" (change)=\"setGroupBy(item, $event.checked)\" [disabled]=\"!item.selected\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count_distinct\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.average\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.max\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.min\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.sum\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean', 'date', 'datetime'].includes(item.type)\"></mat-checkbox>\n        </ng-container>\n      </div>\n\n    </div>\n\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.filters' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"filters-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.operator' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter_value' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #filterContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"filter-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let filter of value.filters; let i = index\">\n\n        <ng-container [formGroup]=\"filterFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterName' + i\"\n                [formControlName]=\"'name'\"\n                [options]=\"filterPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setFilterColumn(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterOperator' + i\"\n                [formControlName]=\"'operator'\"\n                [options]=\"filter.options.operators\"\n                [required]=\"true\"\n                [disable]=\"!filter.name\"\n                (change)=\"setFilterOperator(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <ng-container [ngSwitch]=\"filter.type\">\n\n              <mantle-number-input *ngSwitchCase=\"'number'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-number-input>\n\n              <mantle-datepicker *ngSwitchCase=\"'date'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datepicker>\n\n              <mantle-datetimepicker *ngSwitchCase=\"'datetime'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datetimepicker>\n\n              <mantle-text-input *ngSwitchCase=\"'string'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-text-input>\n\n              <mantle-multiselect-input *ngSwitchCase=\"'dropdown'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [options]=\"filter.options.preSelectedValues\"\n                  [required]=\"true\">\n              </mantle-multiselect-input>\n\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeFilter(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addFilter()\">{{ 'mantle.report_config.add_filter' | translate }}</button>\n\n  </div>\n\n  <mat-hint *ngIf=\"value.dataset && errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</div>\n", styles: [".report-config-editor-wrapper{height:100%;width:100%}label{text-transform:uppercase}.report-config-subsection-header{margin-top:16px;font-size:16px;font-weight:600}.items-container,.filters-container{width:100%;margin:0;border:1px solid #ccc;border-radius:8px;padding:8px}.items-container .header-row,.filters-container .header-row{align-items:center;padding:8px 12px;border-bottom:2px solid #ccc}.items-container .header-row .header-row-label,.filters-container .header-row .header-row-label{font-weight:700;font-size:14px;text-align:left}.items-container .header-row .selection-check-header,.items-container .header-row .aggregation-check-header,.filters-container .header-row .selection-check-header,.filters-container .header-row .aggregation-check-header{text-align:center}.field-rows,.filter-rows{overflow-y:auto}.field-row{padding:8px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:14px}.field-row .drag-handle{cursor:grab;display:flex;align-items:center}.field-row .selection-check,.field-row .aggregation-check{text-align:center}.error-message{color:#f44336;font-size:12px;margin-top:4px;width:100%;text-align:center}\n"] }]
+                    ], template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"report-config-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n  <mat-form-field fxFlex=\"0 0 auto\" [class.mat-mdc-form-field-invalid]=\"error\">\n    <label>\n      {{ 'mantle.report_config.dataset' | translate }}\n    </label>\n    <mtx-select\n        [(ngModel)]=\"value.dataset_id\"\n        (change)=\"setDatasetId($event)\"\n        appendTo=\"body\">\n      <mtx-option value=\"\"></mtx-option>\n      <mtx-option *ngFor=\"let option of datasets\" [value]=\"option.id\">\n        {{option.name}}\n      </mtx-option>\n    </mtx-select>\n  </mat-form-field>\n\n  <div fxFlex=\"0 0 auto\">\n    <mat-checkbox [checked]=\"value.aggregated\" (change)=\"setAggregated($event.checked)\">\n      {{ 'mantle.report_config.use_aggregation' | translate }}\n    </mat-checkbox>\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.columns' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"items-container\">\n    \n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"0 0 24px\" class=\"header-row-label\"></div>\n      <div fxFlex=\"0 0 80px\" class=\"header-row-label selection-check-header\">{{ 'mantle.report_config.select' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.column' | translate }}</div>\n      <ng-container *ngIf=\"value.aggregated\">\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.group_by' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count_distinct' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.average' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.max' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.min' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.sum' | translate }}</div>\n      </ng-container>\n    </div>\n\n    <div fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"field-rows\"\n         cdkDropList [cdkDropListData]=\"value.columns\" (cdkDropListDropped)=\"drop($event)\">\n\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\" class=\"field-row\"\n           *ngFor=\"let item of datasetColumns; let i = index\" cdkDrag>\n\n        <!-- Drag handle -->\n        <div fxFlex=\"0 0 24px\" class=\"drag-handle\" cdkDragHandle>\n          <mat-icon>drag_indicator</mat-icon>\n        </div>\n\n        <!-- Left checkbox -->\n        <mat-checkbox fxFlex=\"0 0 80px\" class=\"selection-check\" [checked]=\"item.selected\" (change)=\"setSelected(item, $event.checked)\"></mat-checkbox>\n\n        <!-- Label -->\n        <div fxFlex=\"1 1 0\">{{ item.name }}</div>\n\n        <!-- Right checkboxes -->\n        <ng-container *ngIf=\"value.aggregated\">\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [checked]=\"item.group_by\" (change)=\"setGroupBy(item, $event.checked)\" [disabled]=\"!item.selected\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count_distinct\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.average\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.max\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.min\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.sum\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean', 'date', 'datetime'].includes(item.type)\"></mat-checkbox>\n        </ng-container>\n      </div>\n\n    </div>\n\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.filters' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"filters-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.operator' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter_value' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #filterContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"filter-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let filter of value.filters; let i = index\">\n\n        <ng-container [formGroup]=\"filterFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterName' + i\"\n                [formControlName]=\"'name'\"\n                [options]=\"filterPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setFilterColumn(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterOperator' + i\"\n                [formControlName]=\"'operator'\"\n                [options]=\"filter.options.operators\"\n                [required]=\"true\"\n                [disable]=\"!filter.name\"\n                (change)=\"setFilterOperator(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <ng-container [ngSwitch]=\"filter.type\">\n\n              <mantle-number-input *ngSwitchCase=\"'number'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-number-input>\n\n              <mantle-datepicker *ngSwitchCase=\"'date'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datepicker>\n\n              <mantle-datetimepicker *ngSwitchCase=\"'datetime'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datetimepicker>\n\n              <mantle-text-input *ngSwitchCase=\"'string'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-text-input>\n\n              <mantle-multiselect-input *ngSwitchCase=\"'dropdown'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [options]=\"filter.options.preSelectedValues\"\n                  [required]=\"true\">\n              </mantle-multiselect-input>\n\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeFilter(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addFilter()\">{{ 'mantle.report_config.add_filter' | translate }}</button>\n\n  </div>\n\n  <mat-hint *ngIf=\"value.dataset_id && errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</div>\n", styles: [".report-config-editor-wrapper{height:100%;width:100%}label{text-transform:uppercase}.report-config-subsection-header{margin-top:16px;font-size:16px;font-weight:600}.items-container,.filters-container{width:100%;margin:0;border:1px solid #ccc;border-radius:8px;padding:8px}.items-container .header-row,.filters-container .header-row{align-items:center;padding:8px 12px;border-bottom:2px solid #ccc}.items-container .header-row .header-row-label,.filters-container .header-row .header-row-label{font-weight:700;font-size:14px;text-align:left}.items-container .header-row .selection-check-header,.items-container .header-row .aggregation-check-header,.filters-container .header-row .selection-check-header,.filters-container .header-row .aggregation-check-header{text-align:center}.field-rows,.filter-rows{overflow-y:auto}.field-row{padding:8px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:14px}.field-row .drag-handle{cursor:grab;display:flex;align-items:center}.field-row .selection-check,.field-row .aggregation-check{text-align:center}.error-message{color:#f44336;font-size:12px;margin-top:4px;width:100%;text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: ArrayService }, { type: LocaleService }], propDecorators: { label: [{
                 type: Input
             }], tooltip: [{