@codetectonics/mantle 2.0.2 → 2.0.3

package/fesm2022/codetectonics-mantle.mjs

@@ -3430,6 +3430,15 @@ class ReportConfigInputComponent {
             datasetColumn.max = valueColumn.max || false;
             datasetColumn.min = valueColumn.min || false;
             datasetColumn.sum = valueColumn.sum || false;
+            datasetColumn.index = this.value.columns.length;
+            if (!datasetColumn.selected)
+                return;
+            datasetColumn.index = this.value.columns.findIndex((column) => {
+                return column.name == datasetColumn.name;
+            });
+        });
+        this.datasetColumns.sort((a, b) => {
+            return (a.index || 0) - (b.index || 0);
         });
     }
     refreshValueColumns() {
@@ -3490,9 +3499,7 @@ class ReportConfigInputComponent {
         this.onChange(this.value);
     }
     drop(event) {
-        const list = [...this.value.columns];
-        moveItemInArray(list, event.previousIndex, event.currentIndex);
-        this.datasetColumns = list;
+        moveItemInArray(this.datasetColumns, event.previousIndex, event.currentIndex);
         this.refreshValueColumns();
     }
     addFilter() {
@@ -3669,7 +3676,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_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" }] }); }
+        ], 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]=\"datasetColumns\" (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,
@@ -3684,7 +3691,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_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"] }]
+                    ], 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]=\"datasetColumns\" (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: [{