nuxeo-development-framework 5.5.2 → 5.5.4

package/bundles/nuxeo-development-framework.umd.js

@@ -43490,7 +43490,7 @@
    * @returns {string | number} - The value of the CSS variable or the provided default value.
    */
   function getCssVariable(key, defaultValue) {
-      var root = document.documentElement;
+      var root = document.querySelector('[data-theme]') || document.documentElement;
       var computedStyle = getComputedStyle(root);
       return computedStyle.getPropertyValue(key).trim() || defaultValue;
   }
@@ -43547,7 +43547,7 @@
           '#3c3cf0',
           '#f17205' // Bright orange
       ]; }
-      var root = document.documentElement;
+      var root = document.querySelector('[data-theme]') || document.documentElement;
       var computedStyle = getComputedStyle(root);
       var colors = [];
       for (var index = 0; index < length; index++) {
@@ -44210,7 +44210,7 @@
           var fitsInside = textMetrics.width + textPadding * 2 <= dataPoint.width;
           if (fitsInside) {
               return {
-                  x: dataPoint.x + (isReversed ? textMetrics.width / 2 : -textMetrics.width / 2),
+                  x: dataPoint.x + (isReversed ? textMetrics.width / 2 + textPadding : -(textMetrics.width / 2 + textPadding)),
                   y: dataPoint.y,
                   color: getTextColor(backgroundColor)
               };
@@ -44228,7 +44228,7 @@
           if (fitsInside) {
               return {
                   x: dataPoint.x,
-                  y: dataPoint.y,
+                  y: dataPoint.y + textPadding / 2 + textMetrics.height / 2,
                   color: getTextColor(backgroundColor)
               };
           }
@@ -45356,6 +45356,122 @@
       };
   }
 
+  function mapToNdfTableConfig(report, details) {
+      var _a, _b, _c, _d;
+      var _request = report.request;
+      var _detailsConfig = details.source;
+      var customUrl = ___default["default"].merge({
+          url: "/api/v1" + (_request === null || _request === void 0 ? void 0 : _request.customUrl.url),
+          method: _request === null || _request === void 0 ? void 0 : _request.customUrl.method
+      }, ((_a = _detailsConfig === null || _detailsConfig === void 0 ? void 0 : _detailsConfig.request) === null || _a === void 0 ? void 0 : _a.customUrl) || {});
+      var _headers = ((_b = _detailsConfig.request) === null || _b === void 0 ? void 0 : _b.headers) || _request.headers || {};
+      var _queryParam = ((_c = _detailsConfig.request) === null || _c === void 0 ? void 0 : _c.params) || _request.params || {};
+      var _sortingBy = ___default["default"].merge({
+          sortBy: 'dc:modified',
+          sortOrder: 'desc'
+      }, _detailsConfig.sortingBy || {});
+      var data = {
+          options: {
+              columns: _detailsConfig.columnsOptions,
+              filters: {
+                  mode: 'payload',
+                  fields: [],
+                  panel: {
+                      visible: false,
+                      toggleButton: false
+                  }
+              },
+              export: _detailsConfig === null || _detailsConfig === void 0 ? void 0 : _detailsConfig.export
+          },
+          pageNumber: 1,
+          pageSize: 10,
+          fullWidth: 'auto',
+          prefix: _detailsConfig.prefix || '',
+          fields: (_detailsConfig === null || _detailsConfig === void 0 ? void 0 : _detailsConfig.fields) || {},
+          pageProvider: _request.pageProvider || _detailsConfig.request.pageProvider,
+          columns: _detailsConfig.columns || [],
+          customUrl: customUrl,
+          headers: _headers,
+          queryParam: _queryParam,
+          quickFilters: _detailsConfig.quickFilters,
+          sortingBy: _sortingBy,
+          requestActions: (_d = _detailsConfig === null || _detailsConfig === void 0 ? void 0 : _detailsConfig.request) === null || _d === void 0 ? void 0 : _d.actions
+      };
+      return data;
+  }
+
+  function replaceDatasetColors(datasets) {
+      if (!Array.isArray(datasets)) {
+          return datasets;
+      }
+      return datasets.map(function (dataset) {
+          var e_1, _a;
+          var newDataset = Object.assign({}, dataset);
+          try {
+              // Process each property that might contain colors
+              for (var _b = __values(Object.entries(dataset)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                  var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
+                  if (isColorProperty(key)) {
+                      newDataset[key] = replaceColors(value);
+                  }
+              }
+          }
+          catch (e_1_1) { e_1 = { error: e_1_1 }; }
+          finally {
+              try {
+                  if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+              }
+              finally { if (e_1) throw e_1.error; }
+          }
+          return newDataset;
+      });
+  }
+  // Helper function to identify color-related properties
+  function isColorProperty(propertyName) {
+      var colorProperties = [
+          'backgroundColor',
+          'borderColor',
+          'pointBackgroundColor',
+          'pointBorderColor',
+          'pointHoverBackgroundColor',
+          'pointHoverBorderColor',
+          'hoverBackgroundColor',
+          'hoverBorderColor',
+          'color'
+      ];
+      return colorProperties.includes(propertyName) || propertyName.toLowerCase().includes('color');
+  }
+  // Keep the original replaceColors for processing individual values
+  function replaceColors(data) {
+      var e_2, _a;
+      if (typeof data === 'string' && (data.startsWith('var') || data.startsWith('--'))) {
+          var match = data.match(/var\((--[^)]+)\)/);
+          var value = match ? match[1] : data;
+          return getColor(value);
+      }
+      if (data === null || typeof data !== 'object') {
+          return data;
+      }
+      if (Array.isArray(data)) {
+          return data.map(function (item) { return replaceColors(item); });
+      }
+      var newObject = {};
+      try {
+          for (var _b = __values(Object.entries(data)), _c = _b.next(); !_c.done; _c = _b.next()) {
+              var _d = __read(_c.value, 2), key = _d[0], value = _d[1];
+              newObject[key] = replaceColors(value);
+          }
+      }
+      catch (e_2_1) { e_2 = { error: e_2_1 }; }
+      finally {
+          try {
+              if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+          }
+          finally { if (e_2) throw e_2.error; }
+      }
+      return newObject;
+  }
+
   var ReportConfigMapperService = /** @class */ (function () {
       function ReportConfigMapperService(_chartPluginsRegistry) {
           this._chartPluginsRegistry = _chartPluginsRegistry;
@@ -45371,7 +45487,7 @@
           if (Array.isArray(plugins) && plugins.length > 0) {
               chart.plugins = this._preparePlugins(plugins);
           }
-          chart.colors = __spreadArray(__spreadArray([], __read((colors || []))), __read(getColors()));
+          chart.colors = this._prepareColors(colors);
           return Object.assign(Object.assign({}, config), { chart: chart });
       };
       /**
@@ -45382,11 +45498,13 @@
       ReportConfigMapperService.prototype.prepareGraphLineConfig = function (config) {
           var _a = config.chart, plugins = _a.plugins, options = _a.options, rest = __rest(_a, ["plugins", "options"]);
           var chart = Object.assign(Object.assign({}, rest), { options: getLineOptions(options) });
+          if (chart.datasets && !!chart.datasets.length) {
+              chart.datasets = replaceDatasetColors(chart.datasets);
+          }
           if (Array.isArray(plugins) && plugins.length > 0) {
               chart.plugins = this._preparePlugins(plugins);
           }
-          var _colors = __spreadArray(__spreadArray([], __read(((config === null || config === void 0 ? void 0 : config.colors) || []))), __read(getColors()));
-          return Object.assign(Object.assign({}, config), { colors: _colors, chart: chart });
+          return Object.assign(Object.assign({}, config), { colors: this._prepareColors(config === null || config === void 0 ? void 0 : config.colors), chart: chart });
       };
       /**
        * Prepares a custom chart configuration
@@ -45411,6 +45529,9 @@
       ReportConfigMapperService.prototype._preparePlugins = function (plugins) {
           var _this = this;
           return plugins.reduce(function (acc, plgName) {
+              if (!plgName || typeof plgName !== 'string') {
+                  return acc;
+              }
               var plugin = _this._chartPluginsRegistry.get(plgName);
               if (plugin) {
                   return __spreadArray(__spreadArray([], __read(acc)), [plugin]);
@@ -45431,6 +45552,17 @@
           var key = type === 'bar' ? direction + "Bar" : type;
           return ((_a = _optionsMap[key]) === null || _a === void 0 ? void 0 : _a.call(_optionsMap, options)) || {};
       };
+      ReportConfigMapperService.prototype._prepareColors = function (colors) {
+          var _colors = (colors || []).map(function (color) {
+              var str = "" + color;
+              if (str.startsWith('var(')) {
+                  var match = str.match(/^var\((--[^)]+)\)/);
+                  return match ? getColor(match[1]) : str;
+              }
+              return str.startsWith('--') ? getColor(str) : str;
+          });
+          return __spreadArray(__spreadArray([], __read(_colors)), __read(getColors()));
+      };
       return ReportConfigMapperService;
   }());
   ReportConfigMapperService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ReportConfigMapperService, deps: [{ token: ChartPluginsRegistry }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
@@ -45574,14 +45706,26 @@
                   }]
           }], ctorParameters: function () { return [{ type: i0__namespace.ComponentFactoryResolver }]; } });
 
-  var ReportDetailsService = /** @class */ (function (_super) {
-      __extends(ReportDetailsService, _super);
-      function ReportDetailsService(injector) {
+  var ReportConfigurationService = /** @class */ (function (_super) {
+      __extends(ReportConfigurationService, _super);
+      function ReportConfigurationService(injector) {
           var _this = _super.call(this, injector) || this;
           _this.injector = injector;
           return _this;
       }
-      ReportDetailsService.prototype.getTableConfiguration = function (key, localPath) {
+      ReportConfigurationService.prototype.getTableConfiguration = function (key, localPath) {
+          var _a;
+          return this.fetchData({
+              key: key,
+              type: NDF_EDITOR_TYPE.TABLES,
+              app: (_a = this.environment) === null || _a === void 0 ? void 0 : _a.appKey,
+              localPath: localPath
+          }).pipe(operators.map(function (res) {
+              var _a;
+              return (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.config;
+          }));
+      };
+      ReportConfigurationService.prototype.getReportsConfiguration = function (key, localPath) {
           var _a;
           return this.fetchData({
               key: key,
@@ -45593,15 +45737,68 @@
               return (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.config;
           }));
       };
-      return ReportDetailsService;
+      return ReportConfigurationService;
   }(BaseEditorConfigService));
-  ReportDetailsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ReportDetailsService, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-  ReportDetailsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ReportDetailsService, providedIn: 'root' });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ReportDetailsService, decorators: [{
+  ReportConfigurationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ReportConfigurationService, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  ReportConfigurationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ReportConfigurationService, providedIn: 'root' });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ReportConfigurationService, decorators: [{
               type: i0.Injectable,
               args: [{ providedIn: 'root' }]
           }], ctorParameters: function () { return [{ type: i0__namespace.Injector }]; } });
 
+  var ChartThemeService = /** @class */ (function () {
+      function ChartThemeService() {
+          this.currentTheme = new rxjs.BehaviorSubject('light');
+          this.theme$ = this.currentTheme.asObservable();
+          this._initializeThemeDetection();
+      }
+      ChartThemeService.prototype.getCurrentTheme = function () {
+          return this._getThemeFromBody();
+      };
+      ChartThemeService.prototype.destroy = function () {
+          if (this.observer) {
+              this.observer.disconnect();
+          }
+      };
+      ChartThemeService.prototype._initializeThemeDetection = function () {
+          var initialTheme = this._getThemeFromBody();
+          if (initialTheme !== this.currentTheme.value) {
+              this.currentTheme.next(initialTheme);
+          }
+          this._setupThemeWatcher();
+      };
+      ChartThemeService.prototype._getThemeFromBody = function () {
+          var bodyTheme = document.body.getAttribute('data-theme');
+          return bodyTheme === 'dark' || bodyTheme === 'light' ? bodyTheme : 'light';
+      };
+      ChartThemeService.prototype._setupThemeWatcher = function () {
+          var _this = this;
+          this.observer = new MutationObserver(function (mutations) {
+              mutations.forEach(function (mutation) {
+                  if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+                      var newTheme = _this._getThemeFromBody();
+                      if (newTheme !== _this.currentTheme.value) {
+                          _this.currentTheme.next(newTheme);
+                      }
+                  }
+              });
+          });
+          this.observer.observe(document.body, {
+              attributes: true,
+              attributeFilter: ['data-theme']
+          });
+      };
+      return ChartThemeService;
+  }());
+  ChartThemeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ChartThemeService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  ChartThemeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ChartThemeService, providedIn: 'root' });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ChartThemeService, decorators: [{
+              type: i0.Injectable,
+              args: [{
+                      providedIn: 'root'
+                  }]
+          }], ctorParameters: function () { return []; } });
+
   var DigitChartComponent = /** @class */ (function (_super) {
       __extends(DigitChartComponent, _super);
       function DigitChartComponent() {
@@ -45756,6 +45953,7 @@
       }
       Object.defineProperty(BaseReport.prototype, "definition", {
           set: function (obj) {
+              this._definition = ___default["default"].cloneDeep(obj);
               if (obj) {
                   this._configSub.next(this._prepareConfig(obj));
               }
@@ -45850,6 +46048,8 @@
       function BaseGraphReport() {
           var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
           _this._dialog = _this.injector.get(ReportsDialogService);
+          _this._chartThemeService = _this.injector.get(ChartThemeService);
+          _this._initialTheme = _this._chartThemeService.getCurrentTheme();
           return _this;
       }
       BaseGraphReport.prototype.openGraphDialog = function (component) {
@@ -46252,6 +46452,13 @@
           }));
           return _this;
       }
+      GraphReportComponent.prototype.ngAfterViewInit = function () {
+          this._setupThemeWatcher();
+      };
+      GraphReportComponent.prototype.ngOnDestroy = function () {
+          _super.prototype.ngOnDestroy.call(this);
+          this._chartThemeService.destroy();
+      };
       GraphReportComponent.prototype.changeChartType = function (type) {
           var _d;
           var _a, _b;
@@ -46272,10 +46479,25 @@
               this.graphChartComponent.printChart();
           }
       };
+      GraphReportComponent.prototype._setupThemeWatcher = function () {
+          var _this = this;
+          this._chartThemeService.theme$
+              .pipe(operators.filter(function (value) { return value !== _this._initialTheme && !!_this._definition; }), operators.takeUntil(this.destroy$))
+              .subscribe(function (theme) {
+              _this._initialTheme = theme;
+              var _a = _this._configSub.getValue(), chart = _a.chart, config = __rest(_a, ["chart"]);
+              var data = ___default["default"].merge({}, _this._definition, {
+                  chart: {
+                      type: chart.type
+                  }
+              });
+              _this._configSub.next(_this._prepareConfig(data));
+          });
+      };
       return GraphReportComponent;
   }(BaseGraphReport));
   GraphReportComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GraphReportComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  GraphReportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GraphReportComponent, selector: "app-graph-report", host: { classAttribute: "graph-report flex flex-col flex-grow" }, viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<chart-panel *ngIf=\"config$ | async as config\" class=\"ndf-report chart-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t<span>\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</span>\r\n\t\t<button\r\n\t\t\t*ngIf=\"config?.dialog?.active\"\r\n\t\t\tclass=\"dialog-button print:hidden\"\r\n\t\t\t(click)=\"openGraphDialog()\"\r\n\t\t\t[matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>fullscreen</mat-icon>\r\n\t\t</button>\r\n\t</chart-panel-header>\r\n\r\n\t<app-graph-chart\r\n\t\t#graphChart\r\n\t\tclass=\"ndf-report__content graph-chart\"\r\n\t\t[config]=\"config\"\r\n\t\t[data]=\"data\"\r\n\t></app-graph-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer flex-wrap\">\r\n\t\t<app-report-actions\r\n\t\t\t[config]=\"config\"\r\n\t\t\t(print)=\"printChart()\"\r\n\t\t\t(navigate)=\"navigate()\"\r\n\t\t\t(open)=\"onOpen.emit(null)\"\r\n\t\t></app-report-actions>\r\n\r\n\t\t<chart-type-selector\r\n      [config]=\"config?.typeConfig\"\r\n\t\t\t[direction]=\"direction\"\r\n\t\t\t[type]=\"chartType$ | async\"\r\n\t\t\t(typeChange)=\"changeChartType($event)\"\r\n\t\t></chart-type-selector>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n", styles: [".ndf-report{display:flex;flex-direction:column;min-width:0;max-width:100%;flex-grow:1}.ndf-report__content{position:relative;padding-block:.5rem;flex-grow:1;min-width:0;max-width:100%}.chart-actions{border:var(--chart-actions-border, 1px solid var(--border-color))}.chart-actions__item{background:var(--chart-actions-background, transparent);color:var(--chart-actions-color, currentColor);box-shadow:var(--chart-actions-shadow, unset);width:var(--chart-actions-width, 35px);height:var(--chart-actions-height, 35px);border-radius:var(--chart-actions-border-radius, 4px);flex-grow:1;display:grid;place-items:center}.chart-actions__item .mat-icon{color:var(--main-color, currentColor)}.chart-actions__item:hover{--chart-actions-shadow: var(--chart-actions-hover-shadow, 0 0 0 1px var(--main-color))}.chart-actions__item.selected{--chart-actions-background: var(--chart-actions-active-background, var(--main-color));--chart-actions-color: var(--chart-actions-active-color, var(--main-hover))}.chart-actions__item.selected .mat-icon{color:currentColor!important}@media print{.chart-actions{display:none}}:host{min-width:0;max-width:100%}\n"], components: [{ type: ChartPanel, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: ReportActionsComponent, selector: "app-report-actions", inputs: ["config"], outputs: ["navigate", "open", "print"] }, { type: ChartTypeSelectorComponent, selector: "chart-type-selector", inputs: ["direction", "config", "type"], outputs: ["typeChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe } });
+  GraphReportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: GraphReportComponent, selector: "app-graph-report", host: { classAttribute: "graph-report flex flex-col flex-grow" }, providers: [ChartThemeService], viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<chart-panel *ngIf=\"config$ | async as config\" class=\"ndf-report chart-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t<span>\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</span>\r\n\t\t<button\r\n\t\t\t*ngIf=\"config?.dialog?.active\"\r\n\t\t\tclass=\"dialog-button print:hidden\"\r\n\t\t\t(click)=\"openGraphDialog()\"\r\n\t\t\t[matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>fullscreen</mat-icon>\r\n\t\t</button>\r\n\t</chart-panel-header>\r\n\r\n\t<app-graph-chart\r\n\t\t#graphChart\r\n\t\tclass=\"ndf-report__content graph-chart\"\r\n\t\t[config]=\"config\"\r\n\t\t[data]=\"data\"\r\n\t></app-graph-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer flex-wrap\">\r\n\t\t<app-report-actions\r\n\t\t\t[config]=\"config\"\r\n\t\t\t(print)=\"printChart()\"\r\n\t\t\t(navigate)=\"navigate()\"\r\n\t\t\t(open)=\"onOpen.emit(null)\"\r\n\t\t></app-report-actions>\r\n\r\n\t\t<chart-type-selector\r\n      [config]=\"config?.typeConfig\"\r\n\t\t\t[direction]=\"direction\"\r\n\t\t\t[type]=\"chartType$ | async\"\r\n\t\t\t(typeChange)=\"changeChartType($event)\"\r\n\t\t></chart-type-selector>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n", styles: [".ndf-report{display:flex;flex-direction:column;min-width:0;max-width:100%;flex-grow:1}.ndf-report__content{position:relative;padding-block:.5rem;flex-grow:1;min-width:0;max-width:100%}.chart-actions{border:var(--chart-actions-border, 1px solid var(--border-color))}.chart-actions__item{background:var(--chart-actions-background, transparent);color:var(--chart-actions-color, currentColor);box-shadow:var(--chart-actions-shadow, unset);width:var(--chart-actions-width, 35px);height:var(--chart-actions-height, 35px);border-radius:var(--chart-actions-border-radius, 4px);flex-grow:1;display:grid;place-items:center}.chart-actions__item .mat-icon{color:var(--main-color, currentColor)}.chart-actions__item:hover{--chart-actions-shadow: var(--chart-actions-hover-shadow, 0 0 0 1px var(--main-color))}.chart-actions__item.selected{--chart-actions-background: var(--chart-actions-active-background, var(--main-color));--chart-actions-color: var(--chart-actions-active-color, var(--main-hover))}.chart-actions__item.selected .mat-icon{color:currentColor!important}@media print{.chart-actions{display:none}}:host{min-width:0;max-width:100%}\n"], components: [{ type: ChartPanel, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: ReportActionsComponent, selector: "app-report-actions", inputs: ["config"], outputs: ["navigate", "open", "print"] }, { type: ChartTypeSelectorComponent, selector: "chart-type-selector", inputs: ["direction", "config", "type"], outputs: ["typeChange"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GraphReportComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -46284,7 +46506,8 @@
                       styleUrls: ['./graph-report.component.scss'],
                       host: {
                           class: 'graph-report flex flex-col flex-grow'
-                      }
+                      },
+                      providers: [ChartThemeService]
                   }]
           }], propDecorators: { graphChartComponent: [{
                   type: i0.ViewChild,
@@ -46487,14 +46710,21 @@
           _this._timelineService = _this.injector.get(DynamicTimelineReportService);
           _this._criteria$ = _this.criteria$.pipe(operators.distinctUntilChanged(function (a, b) { return ___default["default"].isEqual(a, b); }));
           _this.selectedGroup$ = _this._timelineService.selectedGroup$;
-          _this.filterCriteria$ = rxjs.combineLatest([_this._criteria$, _this._timelineService.selectedGroup$]).pipe(operators.map(function (_a) {
-              var _b = __read(_a, 1), criteria = _b[0];
+          _this.filterCriteria$ = rxjs.combineLatest([_this._criteria$, _this._timelineService.selectedGroup$]).pipe(operators.map(function (_b) {
+              var _c = __read(_b, 1), criteria = _c[0];
               return ___default["default"].cloneDeep(___default["default"].merge(criteria || {}, _this._timelineService.prepareSelectedGroups(_this.config)));
           }));
           _this.report$ = rxjs.combineLatest([_this.config$, _this._criteria$, _this._timelineService.rebuild$]).pipe(_this._timelineService.prepareData());
           _this._subscribeToLanguage();
           return _this;
       }
+      DynamicTimelineReportComponent.prototype.ngAfterViewInit = function () {
+          this._setupThemeWatcher();
+      };
+      DynamicTimelineReportComponent.prototype.ngOnDestroy = function () {
+          _super.prototype.ngOnDestroy.call(this);
+          this._chartThemeService.destroy();
+      };
       DynamicTimelineReportComponent.prototype._subscribeToLanguage = function () {
           var _this = this;
           this._translateService.onLangChange
@@ -46517,10 +46747,25 @@
       DynamicTimelineReportComponent.prototype.openDetails = function () {
           this.onOpen.emit(this._timelineService.payload);
       };
+      DynamicTimelineReportComponent.prototype._setupThemeWatcher = function () {
+          var _this = this;
+          this._chartThemeService.theme$
+              .pipe(operators.filter(function (value) { return value !== _this._initialTheme && !!_this._definition; }), operators.takeUntil(this.destroy$))
+              .subscribe(function (theme) {
+              _this._initialTheme = theme;
+              var _a = _this._configSub.getValue(), chart = _a.chart, config = __rest(_a, ["chart"]);
+              var data = ___default["default"].merge({}, _this._definition, {
+                  chart: {
+                      type: chart.type
+                  }
+              });
+              _this._configSub.next(_this._prepareConfig(data));
+          });
+      };
       return DynamicTimelineReportComponent;
   }(BaseGraphReport));
   DynamicTimelineReportComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicTimelineReportComponent, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DynamicTimelineReportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicTimelineReportComponent, selector: "app-dynamic-timeline-report", host: { classAttribute: "timeline-report flex flex-col flex-grow" }, providers: [DynamicTimelineReportService], viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<chart-panel *ngIf=\"report$ | async as report; else noData\" class=\"ndf-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t<span>\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</span>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"config?.dialog?.active\"\r\n\t\t\tclass=\"dialog-button print:hidden\"\r\n\t\t\t(click)=\"openTimelineDialog()\"\r\n\t\t\t[matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>fullscreen</mat-icon>\r\n\t\t</button>\r\n\t</chart-panel-header>\r\n\r\n\t<app-graph-chart\r\n\t\t#graphChart\r\n\t\tclass=\"ndf-report__content ndf-report__content timeline-chart\"\r\n\t\t[config]=\"report.config\"\r\n\t\t[criteria]=\"filterCriteria$ | async\"\r\n\t\t[data]=\"report.data\"\r\n\t></app-graph-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer \">\r\n\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 flex-wrap p-1\">\r\n\t\t\t<button\r\n\t\t\t\tclass=\"print-button chart-actions__item\"\r\n\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t*ngIf=\"config?.print\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"navigate()\"\r\n\t\t\t\t*ngIf=\"config?.navigate?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.enabled' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>send</mat-icon>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"openDetails()\"\r\n\t\t\t\t*ngIf=\"config?.details?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.details' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>info</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<time-group-selector\r\n\t\t\t*ngIf=\"config?.group?.active ?? true\"\r\n\t\t\t[group]=\"selectedGroup$ | async\"\r\n\t\t\t(groupChange)=\"changeGroup($event)\"\r\n\t\t></time-group-selector>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n\r\n<ng-template #noData>\r\n\t<chart-panel class=\"ndf-report\">\r\n\t\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</chart-panel-header>\r\n\t\t<app-skeleton\r\n\t\t\tanimation=\"opacity\"\r\n\t\t\tclass=\"ndf-report__content ndf-report__content timeline-chart\"\r\n\t\t\theight=\"220px\"\r\n\t\t></app-skeleton>\r\n\t</chart-panel>\r\n</ng-template>\r\n", styles: [".ndf-report{display:flex;flex-direction:column;min-width:0;max-width:100%;flex-grow:1}.ndf-report__content{position:relative;padding-block:.5rem;flex-grow:1;min-width:0;max-width:100%}.chart-actions{border:var(--chart-actions-border, 1px solid var(--border-color))}.chart-actions__item{background:var(--chart-actions-background, transparent);color:var(--chart-actions-color, currentColor);box-shadow:var(--chart-actions-shadow, unset);width:var(--chart-actions-width, 35px);height:var(--chart-actions-height, 35px);border-radius:var(--chart-actions-border-radius, 4px);flex-grow:1;display:grid;place-items:center}.chart-actions__item .mat-icon{color:var(--main-color, currentColor)}.chart-actions__item:hover{--chart-actions-shadow: var(--chart-actions-hover-shadow, 0 0 0 1px var(--main-color))}.chart-actions__item.selected{--chart-actions-background: var(--chart-actions-active-background, var(--main-color));--chart-actions-color: var(--chart-actions-active-color, var(--main-hover))}.chart-actions__item.selected .mat-icon{color:currentColor!important}@media print{.chart-actions{display:none}}:host{min-width:0;max-width:100%}.timeline-chart{display:var(--ndf-report-display, flex);flex-direction:var(--ndf-report-direction, column);justify-content:var(--ndf-report-justify-content, center);align-items:var(--ndf-report-align-items, center)}\n"], components: [{ type: ChartPanel, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: TimeGroupSelectorComponent, selector: "time-group-selector", inputs: ["direction", "group"], outputs: ["groupChange"] }, { type: SkeletonComponent, selector: "app-skeleton", inputs: ["styleClass", "style", "shape", "animation", "radius", "size", "width", "height", "randomWidth"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  DynamicTimelineReportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicTimelineReportComponent, selector: "app-dynamic-timeline-report", host: { classAttribute: "timeline-report flex flex-col flex-grow" }, providers: [DynamicTimelineReportService, ChartThemeService], viewQueries: [{ propertyName: "graphChartComponent", first: true, predicate: ["graphChart"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<chart-panel *ngIf=\"report$ | async as report; else noData\" class=\"ndf-report\">\r\n\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t<span>\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</span>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"config?.dialog?.active\"\r\n\t\t\tclass=\"dialog-button print:hidden\"\r\n\t\t\t(click)=\"openTimelineDialog()\"\r\n\t\t\t[matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n\t\t>\r\n\t\t\t<mat-icon>fullscreen</mat-icon>\r\n\t\t</button>\r\n\t</chart-panel-header>\r\n\r\n\t<app-graph-chart\r\n\t\t#graphChart\r\n\t\tclass=\"ndf-report__content ndf-report__content timeline-chart\"\r\n\t\t[config]=\"report.config\"\r\n\t\t[criteria]=\"filterCriteria$ | async\"\r\n\t\t[data]=\"report.data\"\r\n\t></app-graph-chart>\r\n\r\n\t<chart-panel-footer class=\"ndf-report__footer \">\r\n\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 flex-wrap p-1\">\r\n\t\t\t<button\r\n\t\t\t\tclass=\"print-button chart-actions__item\"\r\n\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t*ngIf=\"config?.print\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"navigate()\"\r\n\t\t\t\t*ngIf=\"config?.navigate?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.enabled' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>send</mat-icon>\r\n\t\t\t</button>\r\n\r\n\t\t\t<button\r\n\t\t\t\tclass=\"navigate-button chart-actions__item\"\r\n\t\t\t\t(click)=\"openDetails()\"\r\n\t\t\t\t*ngIf=\"config?.details?.enabled\"\r\n\t\t\t\t[matTooltip]=\"'REPORTS.details' | translate\"\r\n\t\t\t>\r\n\t\t\t\t<mat-icon>info</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<time-group-selector\r\n\t\t\t*ngIf=\"config?.group?.active ?? true\"\r\n\t\t\t[group]=\"selectedGroup$ | async\"\r\n\t\t\t(groupChange)=\"changeGroup($event)\"\r\n\t\t></time-group-selector>\r\n\t</chart-panel-footer>\r\n</chart-panel>\r\n\r\n<ng-template #noData>\r\n\t<chart-panel class=\"ndf-report\">\r\n\t\t<chart-panel-header class=\"ndf-report__header mb-3\">\r\n\t\t\t{{ config.label | translate }}\r\n\t\t</chart-panel-header>\r\n\t\t<app-skeleton\r\n\t\t\tanimation=\"opacity\"\r\n\t\t\tclass=\"ndf-report__content ndf-report__content timeline-chart\"\r\n\t\t\theight=\"220px\"\r\n\t\t></app-skeleton>\r\n\t</chart-panel>\r\n</ng-template>\r\n", styles: [".ndf-report{display:flex;flex-direction:column;min-width:0;max-width:100%;flex-grow:1}.ndf-report__content{position:relative;padding-block:.5rem;flex-grow:1;min-width:0;max-width:100%}.chart-actions{border:var(--chart-actions-border, 1px solid var(--border-color))}.chart-actions__item{background:var(--chart-actions-background, transparent);color:var(--chart-actions-color, currentColor);box-shadow:var(--chart-actions-shadow, unset);width:var(--chart-actions-width, 35px);height:var(--chart-actions-height, 35px);border-radius:var(--chart-actions-border-radius, 4px);flex-grow:1;display:grid;place-items:center}.chart-actions__item .mat-icon{color:var(--main-color, currentColor)}.chart-actions__item:hover{--chart-actions-shadow: var(--chart-actions-hover-shadow, 0 0 0 1px var(--main-color))}.chart-actions__item.selected{--chart-actions-background: var(--chart-actions-active-background, var(--main-color));--chart-actions-color: var(--chart-actions-active-color, var(--main-hover))}.chart-actions__item.selected .mat-icon{color:currentColor!important}@media print{.chart-actions{display:none}}:host{min-width:0;max-width:100%}.timeline-chart{display:var(--ndf-report-display, flex);flex-direction:var(--ndf-report-direction, column);justify-content:var(--ndf-report-justify-content, center);align-items:var(--ndf-report-align-items, center)}\n"], components: [{ type: ChartPanel, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GraphChartComponent, selector: "app-graph-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: TimeGroupSelectorComponent, selector: "time-group-selector", inputs: ["direction", "group"], outputs: ["groupChange"] }, { type: SkeletonComponent, selector: "app-skeleton", inputs: ["styleClass", "style", "shape", "animation", "radius", "size", "width", "height", "randomWidth"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicTimelineReportComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -46531,7 +46776,7 @@
                       host: {
                           class: 'timeline-report flex flex-col flex-grow'
                       },
-                      providers: [DynamicTimelineReportService]
+                      providers: [DynamicTimelineReportService, ChartThemeService]
                   }]
           }], ctorParameters: function () { return [{ type: i0__namespace.Injector }]; }, propDecorators: { graphChartComponent: [{
                   type: i0.ViewChild,
@@ -46577,51 +46822,6 @@
                   args: ['customChart']
               }] } });
 
-  function mapToNdfTableConfig(report, details) {
-      var _a, _b, _c, _d, _e;
-      var _request = report.request;
-      var source = ___default["default"].merge((_a = report.reports) === null || _a === void 0 ? void 0 : _a.details, details).source;
-      var _detailsConfig = source;
-      var customUrl = ___default["default"].merge({
-          url: "/api/v1" + (_request === null || _request === void 0 ? void 0 : _request.customUrl.url),
-          method: _request === null || _request === void 0 ? void 0 : _request.customUrl.method
-      }, ((_b = _detailsConfig === null || _detailsConfig === void 0 ? void 0 : _detailsConfig.request) === null || _b === void 0 ? void 0 : _b.customUrl) || {});
-      var _headers = ((_c = _detailsConfig.request) === null || _c === void 0 ? void 0 : _c.headers) || _request.headers || {};
-      var _queryParam = ((_d = _detailsConfig.request) === null || _d === void 0 ? void 0 : _d.params) || _request.params || {};
-      var _sortingBy = ___default["default"].merge({
-          sortBy: 'dc:modified',
-          sortOrder: 'desc'
-      }, _detailsConfig.sortingBy || {});
-      var data = {
-          options: {
-              columns: _detailsConfig.columnsOptions,
-              filters: {
-                  mode: 'payload',
-                  fields: [],
-                  panel: {
-                      visible: false,
-                      toggleButton: false
-                  }
-              },
-              export: _detailsConfig === null || _detailsConfig === void 0 ? void 0 : _detailsConfig.export
-          },
-          pageNumber: 1,
-          pageSize: 10,
-          fullWidth: 'auto',
-          prefix: _detailsConfig.prefix || '',
-          fields: (_detailsConfig === null || _detailsConfig === void 0 ? void 0 : _detailsConfig.fields) || {},
-          pageProvider: _request.pageProvider || _detailsConfig.request.pageProvider,
-          columns: _detailsConfig.columns || [],
-          customUrl: customUrl,
-          headers: _headers,
-          queryParam: _queryParam,
-          quickFilters: _detailsConfig.quickFilters,
-          sortingBy: _sortingBy,
-          requestActions: (_e = _detailsConfig === null || _detailsConfig === void 0 ? void 0 : _detailsConfig.request) === null || _e === void 0 ? void 0 : _e.actions
-      };
-      return data;
-  }
-
   var NdfReportComponent = /** @class */ (function (_super) {
       __extends(NdfReportComponent, _super);
       function NdfReportComponent() {
@@ -46632,6 +46832,16 @@
           _this.onOpen = new i0.EventEmitter();
           return _this;
       }
+      Object.defineProperty(NdfReportComponent.prototype, "config", {
+          get: function () {
+              return this._config;
+          },
+          set: function (value) {
+              this._config = value;
+          },
+          enumerable: false,
+          configurable: true
+      });
       return NdfReportComponent;
   }(DestroySubject));
   NdfReportComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfReportComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
@@ -46701,7 +46911,7 @@
   ]);
   var NdfReportsComponent = /** @class */ (function (_super) {
       __extends(NdfReportsComponent, _super);
-      function NdfReportsComponent(_translateService, _filtersMapper, _ndfReportsService, _chartHelperService, _transformService, _cdr, _filterQueryService, _stateService, _router, _ngZone) {
+      function NdfReportsComponent(_translateService, _filtersMapper, _ndfReportsService, _chartHelperService, _transformService, _cdr, _filterQueryService, _stateService, _configurationService, _router, _ngZone) {
           var _this = _super.call(this) || this;
           _this._translateService = _translateService;
           _this._filtersMapper = _filtersMapper;
@@ -46711,6 +46921,7 @@
           _this._cdr = _cdr;
           _this._filterQueryService = _filterQueryService;
           _this._stateService = _stateService;
+          _this._configurationService = _configurationService;
           _this._router = _router;
           _this._ngZone = _ngZone;
           _this._isHeightUpdated = false;
@@ -46748,25 +46959,6 @@
           enumerable: false,
           configurable: true
       });
-      Object.defineProperty(NdfReportsComponent.prototype, "config", {
-          get: function () {
-              return this._configSubject.getValue();
-          },
-          set: function (config) {
-              var value = ___default["default"].cloneDeep(config);
-              this._checkConfigChange(value);
-              this._configSubject.next(value);
-              if (value === null || value === void 0 ? void 0 : value.activeQuery) {
-                  this._updateActiveQuery(value === null || value === void 0 ? void 0 : value.activeQuery);
-                  this._filtersCriteriaSubject.next(this._prepareMappedQuery(value === null || value === void 0 ? void 0 : value.activeQuery, this.filtersConfig.mode));
-              }
-              this.isPanelOpened = false;
-              this.isDetailsOpened = false;
-              this._reportDetailsSubject.next(null);
-          },
-          enumerable: false,
-          configurable: true
-      });
       Object.defineProperty(NdfReportsComponent.prototype, "filtersConfig", {
           get: function () {
               var _a;
@@ -46783,10 +46975,34 @@
           enumerable: false,
           configurable: true
       });
+      Object.defineProperty(NdfReportsComponent.prototype, "config", {
+          get: function () {
+              return this._configSubject.getValue();
+          },
+          set: function (config) {
+              this._config = config;
+          },
+          enumerable: false,
+          configurable: true
+      });
       NdfReportsComponent.prototype.ngOnInit = function () {
           this.reportsData$ = this._prepareReports();
           this._handleKeyboardEvent();
       };
+      NdfReportsComponent.prototype.ngOnChanges = function (changes) {
+          var _a, _b;
+          var reportsKey = (_a = changes.reportsKey) === null || _a === void 0 ? void 0 : _a.currentValue;
+          var config = (_b = changes.config) === null || _b === void 0 ? void 0 : _b.currentValue;
+          if (reportsKey && config) {
+              throw new Error('You cannot set both reportsKey and reports Config at the same time.');
+          }
+          if (config) {
+              this._initReportsConfig(config);
+          }
+          if (reportsKey) {
+              this._loadReportsConfig(reportsKey);
+          }
+      };
       NdfReportsComponent.prototype.onNavigate = function (data) {
           var _a, _b, _c;
           var report = data === null || data === void 0 ? void 0 : data.report;
@@ -46837,10 +47053,34 @@
               this.fluidDirective.scheduleSetHeight(100);
           }
       };
-      NdfReportsComponent.prototype.openReportDetails = function (_, rConfig) {
-          this._reportDetailsSubject.next({
-              config: mapToNdfTableConfig(this.config, rConfig.details),
-              label: rConfig.label
+      NdfReportsComponent.prototype.openReportDetails = function (criteriaModel, reportConfig) {
+          var _this = this;
+          var _a, _b;
+          if (!((_a = reportConfig === null || reportConfig === void 0 ? void 0 : reportConfig.details) === null || _a === void 0 ? void 0 : _a.enabled)) {
+              return;
+          }
+          var source = (_b = reportConfig === null || reportConfig === void 0 ? void 0 : reportConfig.details) === null || _b === void 0 ? void 0 : _b.source;
+          var config$ = source && typeof source === 'string'
+              ? this._configurationService.getTableConfiguration(source).pipe(operators.map(function (config) {
+                  return ___default["default"].merge(config, {
+                      options: {
+                          filters: {
+                              mode: 'payload',
+                              fields: [],
+                              panel: {
+                                  visible: false,
+                                  toggleButton: false
+                              }
+                          }
+                      }
+                  });
+              }))
+              : rxjs.of(mapToNdfTableConfig(this.config, reportConfig.details));
+          config$.pipe(operators.takeUntil(this.destroy$)).subscribe(function (config) {
+              _this._reportDetailsSubject.next({
+                  config: config,
+                  label: reportConfig.label
+              });
           });
       };
       NdfReportsComponent.prototype.closeDetailsPanel = function () {
@@ -46939,10 +47179,33 @@
           var _a = this._configSubject.getValue() || {}, aq = _a.activeQuery, currentConfig = __rest(_a, ["activeQuery"]);
           this._isConfigChanged = !___default["default"].isEqual(currentConfig, config);
       };
+      NdfReportsComponent.prototype._loadReportsConfig = function (key) {
+          var _this = this;
+          this._configurationService
+              .getReportsConfiguration(key)
+              .pipe(operators.takeUntil(this.destroy$))
+              .subscribe(function (config) {
+              if (config) {
+                  _this._initReportsConfig(config);
+              }
+          });
+      };
+      NdfReportsComponent.prototype._initReportsConfig = function (config) {
+          var value = ___default["default"].cloneDeep(config);
+          this._checkConfigChange(value);
+          this._configSubject.next(value);
+          if (value === null || value === void 0 ? void 0 : value.activeQuery) {
+              this._updateActiveQuery(value === null || value === void 0 ? void 0 : value.activeQuery);
+              this._filtersCriteriaSubject.next(this._prepareMappedQuery(value === null || value === void 0 ? void 0 : value.activeQuery, this.filtersConfig.mode));
+          }
+          this.isPanelOpened = false;
+          this.isDetailsOpened = false;
+          this._reportDetailsSubject.next(null);
+      };
       return NdfReportsComponent;
   }(DestroySubject));
-  NdfReportsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfReportsComponent, deps: [{ token: i1__namespace.TranslateService }, { token: FiltersMapperService }, { token: NdfReportsService }, { token: ChartManagerService }, { token: ReportTransformService }, { token: i0__namespace.ChangeDetectorRef }, { token: FilterQueryService }, { token: ReportsStateService }, { token: i1__namespace$5.Router }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NdfReportsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfReportsComponent, selector: "app-ndf-reports", inputs: { jsonEditorEnabled: "jsonEditorEnabled", reportsKey: "reportsKey", navigateRoute: "navigateRoute", config: "config" }, outputs: { onQueryChange: "onQueryChange" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-reports" }, viewQueries: [{ propertyName: "fluidDirective", first: true, predicate: FluidHeightDirective, descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<div\r\n\t*ngIf=\"reportsData$ | async as reports\"\r\n\tclass=\"ndf-reports__container\"\r\n\t[class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n\t[dir]=\"direction\"\r\n\tndfFluidHeight\r\n>\r\n\t<div class=\"ndf-reports__panel print:hidden\" *ngIf=\"!!filtersConfig?.fields?.length\">\r\n\t\t<app-filters-panel\r\n\t\t\t[fields]=\"filtersConfig?.fields\"\r\n\t\t\t[aggregations]=\"aggregations\"\r\n\t\t\t(filterChanged)=\"filterChanged($event)\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\tclass=\"ndf-reports__filters\"\r\n\t\t></app-filters-panel>\r\n\t</div>\r\n\r\n\t<div class=\"ndf-reports__content\" (scrolled)=\"onContentScroll($event)\">\r\n\t\t<div class=\"ndf-reports__header flex pt-4 print:hidden\">\r\n\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<app-editor-button\r\n\t\t\t\t*ngIf=\"jsonEditorEnabled && reportsKey\"\r\n\t\t\t\t[key]=\"reportsKey\"\r\n\t\t\t\t[type]=\"editorType\"\r\n\t\t\t></app-editor-button>\r\n\t\t\t<button mat-stroked-button *ngIf=\"config?.options?.print\" class=\"print-button\" (click)=\"printAll()\">\r\n\t\t\t\t<mat-icon> print</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<mat-spinner *ngIf=\"isLoadingResult\" class=\"mt-5 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n\r\n\t\t<div class=\"reports-grid\" *ngIf=\"!isLoadingResult\">\r\n\t\t\t<app-ndf-report\r\n\t\t\t\t*ngFor=\"let config of reportConfig.items; trackBy: trackByFn\"\r\n\t\t\t\t[config]=\"config\"\r\n\t\t\t\t[data]=\"reports?.response\"\r\n\t\t\t\t[criteria]=\"filtersParams$ | async\"\r\n\t\t\t\t[direction]=\"direction\"\r\n\t\t\t\t[attr.data-width]=\"config?.layout?.width || 4\"\r\n\t\t\t\t[attr.data-height]=\"config?.layout?.height || 'auto'\"\r\n\t\t\t\t[attr.data-start-column]=\"config?.layout?.columnPosition || 'auto'\"\r\n\t\t\t\t[attr.data-start-row]=\"config?.layout?.rowPosition || 'auto'\"\r\n\t\t\t\t[class.wide]=\"config?.layout?.width >= 6\"\r\n\t\t\t\tclass=\"reports-grid__item {{ config?.layout?.styleClass }} \"\r\n\t\t\t\t(onNavigate)=\"onNavigate($event)\"\r\n\t\t\t\t(onOpen)=\"openReportDetails($event, config)\"\r\n\t\t\t></app-ndf-report>\r\n\t\t</div>\r\n\t</div>\r\n\t<div\r\n\t\tclass=\"ndf-reports__details print:hidden\"\r\n\t\t[class.opened]=\"showDetails\"\r\n\t\t[@slideInOut]=\"showDetails ? 'open' : 'closed'\"\r\n\t\t(@slideInOut.done)=\"onDetailsAnimationEnd($event)\"\r\n\t>\r\n\t\t<app-ndf-table\r\n\t\t\t*ngIf=\"reportDetails$ | async as report\"\r\n\t\t\t[config]=\"report.config\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\t[customCriteria]=\"filtersParams$ | async\"\r\n\t\t>\r\n\t\t\t<ng-template searchTableTemplate>\r\n\t\t\t\t<div class=\"ndf-reports__details__header flex gap-2\">\r\n\t\t\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button mat-stroked-button class=\"close-button\" (click)=\"closeDetailsPanel()\">\r\n\t\t\t\t\t\t<mat-icon> close</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t{{ report.label | translate }}\r\n\t\t\t\t</h3>\r\n\t\t\t</ng-template>\r\n\t\t</app-ndf-table>\r\n\t</div>\r\n</div>\r\n", styles: [":host{padding-inline:var(--ndf-reports-inline-padding, 0);padding-block:var(--ndf-reports-block-padding, .5rem 0);height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--ndf-reports-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host:before,:host:after{box-sizing:border-box}:host[dir=ltr]{--ndf-reports-panel-translateX: -100%;--ndf-reports-details-translateX: 100%}.ndf-reports__header{background-color:var(--ndf-reports-background, #fff);flex-direction:var(--ndf-reports-header-direction, row);justify-content:var(--ndf-reports-header-justify, space-between);align-items:var(--ndf-reports-header-items, center);padding-inline:var(--ndf-reports-header-padding-inline, .5rem);padding-block:var(--ndf-reports-header-padding-block, 0 .5rem);position:var(--ndf-reports-header-position, sticky);top:0;z-index:1}.ndf-reports__header__actions{justify-content:var(--ndf-reports-actions-justify, flex-end)}.ndf-reports__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-reports__container{--panel-width: var(--ndf-reports-panel-width, 18rem);position:relative;overflow:var(--ndf-reports-container-overflow, hidden);display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-reports-height, calc(var(--ndf-fluid-height) - calc(var(--ndf-reports-block-padding, 1rem) * 2.5)));flex-grow:1;grid-gap:var(--ndf-table-container-gap, .5rem);gap:var(--ndf-table-container-gap, .5rem)}.ndf-reports__container.panel-opened{--ndf-details-margin: var(--panel-width);--ndf-reports-panel-translateX: 0;--ndf-reports-content-margin: var(--panel-width)}@media print{.ndf-reports__container{--ndf-reports-container-overflow: visible;height:100%}}.ndf-reports__panel,.ndf-reports__content .ndf-reports__details{overflow:auto;transition:all .2s}.ndf-reports__panel{position:absolute;width:var(--panel-width);height:100%;transform:translate(var(--ndf-reports-panel-translateX, 100%));padding-inline:var(--ndf-reports-panel-inline-padding, .5rem);padding-block:var(--ndf-reports-panel-block-padding, .5rem);background:var(--ndf-reports-panel-background, #fff);z-index:1}.ndf-reports__content{flex-grow:1;padding-inline-start:var(--ndf-reports-content-margin, 1rem);padding-inline-end:var(--ndf-reports-content-pie, 1rem);padding-block:var(--ndf-reports-content-pb, 0 1rem);overflow-y:var(--ndf-reports-content-overflow-y, auto);position:relative;display:flex;flex-direction:column}@media print{.ndf-reports__content{--ndf-reports-content-overflow-y: visible}}.ndf-reports__details{position:absolute;inset-inline-end:0;width:calc(100% - var(--ndf-details-margin, 0px));height:100%;transform:translate(var(--ndf-reports-details-translateX, -100%));padding-inline:var(--ndf-reports-details-inline-padding, 0rem);flex-grow:1;padding-block:var(--ndf-reports-details-block-padding, 0rem);background:var(--ndf-reports-details-background, #fff);z-index:1;transition:all .2s}.reports-grid{--grid-columns: 12;--column-width: calc(100% / var(--grid-columns));display:grid;grid-gap:var(--reports-grid-gap, 1.5rem);gap:var(--reports-grid-gap, 1.5rem);grid-template-columns:var(--rg-columns, repeat(var(--grid-columns), 1fr));margin-block:var(--reports-grid-margin-block, 1.25rem 0);padding-inline:var(--reports-grid-padding-inline, .5rem)}.reports-grid__item{display:grid;grid-gap:.3rem;gap:.3rem;min-width:0;text-align:center;vertical-align:middle}.reports-grid__item[data-width=\"1\"]{--col-span: span 1}.reports-grid__item[data-start-column=\"1\"]{--col-start: 1}.reports-grid__item[data-start-row=\"1\"]{--row-start: 1}.reports-grid__item[data-height=\"1\"]{--row-span: 1}.reports-grid__item[data-width=\"2\"]{--col-span: span 2}.reports-grid__item[data-start-column=\"2\"]{--col-start: 2}.reports-grid__item[data-start-row=\"2\"]{--row-start: 2}.reports-grid__item[data-height=\"2\"]{--row-span: 2}.reports-grid__item[data-width=\"3\"]{--col-span: span 3}.reports-grid__item[data-start-column=\"3\"]{--col-start: 3}.reports-grid__item[data-start-row=\"3\"]{--row-start: 3}.reports-grid__item[data-height=\"3\"]{--row-span: 3}.reports-grid__item[data-width=\"4\"]{--col-span: span 4}.reports-grid__item[data-start-column=\"4\"]{--col-start: 4}.reports-grid__item[data-start-row=\"4\"]{--row-start: 4}.reports-grid__item[data-height=\"4\"]{--row-span: 4}.reports-grid__item[data-width=\"5\"]{--col-span: span 5}.reports-grid__item[data-start-column=\"5\"]{--col-start: 5}.reports-grid__item[data-start-row=\"5\"]{--row-start: 5}.reports-grid__item[data-height=\"5\"]{--row-span: 5}.reports-grid__item[data-width=\"6\"]{--col-span: span 6}.reports-grid__item[data-start-column=\"6\"]{--col-start: 6}.reports-grid__item[data-start-row=\"6\"]{--row-start: 6}.reports-grid__item[data-height=\"6\"]{--row-span: 6}.reports-grid__item[data-width=\"7\"]{--col-span: span 7}.reports-grid__item[data-start-column=\"7\"]{--col-start: 7}.reports-grid__item[data-start-row=\"7\"]{--row-start: 7}.reports-grid__item[data-height=\"7\"]{--row-span: 7}.reports-grid__item[data-width=\"8\"]{--col-span: span 8}.reports-grid__item[data-start-column=\"8\"]{--col-start: 8}.reports-grid__item[data-start-row=\"8\"]{--row-start: 8}.reports-grid__item[data-height=\"8\"]{--row-span: 8}.reports-grid__item[data-width=\"9\"]{--col-span: span 9}.reports-grid__item[data-start-column=\"9\"]{--col-start: 9}.reports-grid__item[data-start-row=\"9\"]{--row-start: 9}.reports-grid__item[data-height=\"9\"]{--row-span: 9}.reports-grid__item[data-width=\"10\"]{--col-span: span 10}.reports-grid__item[data-start-column=\"10\"]{--col-start: 10}.reports-grid__item[data-start-row=\"10\"]{--row-start: 10}.reports-grid__item[data-height=\"10\"]{--row-span: 10}.reports-grid__item[data-width=\"11\"]{--col-span: span 11}.reports-grid__item[data-start-column=\"11\"]{--col-start: 11}.reports-grid__item[data-start-row=\"11\"]{--row-start: 11}.reports-grid__item[data-height=\"11\"]{--row-span: 11}.reports-grid__item[data-width=\"12\"]{--col-span: span 12}.reports-grid__item[data-start-column=\"12\"]{--col-start: 12}.reports-grid__item[data-start-row=\"12\"]{--row-start: 12}.reports-grid__item[data-height=\"12\"]{--row-span: 12}@media screen{.reports-grid__item{grid-column:var(--col-start, auto)/var(--col-span, span var(--grid-column, 2));grid-row:var(--row-start, auto)/span var(--row-span, 1);grid-template-rows:subgrid}}@media print{.reports-grid{--reports-grid-gap: 11mm;--reports-grid-margin-top: 9mm;--rg-columns: repeat(2, 1fr)}.reports-grid__item{--col-start: auto;--col-span: span 1;border:1px solid #f5f5f5;border-radius:var(--cp-radius, 1rem);page-break-inside:avoid;break-inside:avoid-page}}@media screen and (max-width: 1199px){.reports-grid__item[data-width=\"1\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"2\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"3\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"4\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"5\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"6\"]{--col-start: auto;--col-span: span 6}.reports-grid__item.wide{--col-start: 1;--col-span: -1}}@media screen and (max-width: 767px){.reports-grid__item[data-width]{--col-start: 1;--col-span: -1}}\n"], components: [{ type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { type: i1__namespace$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditorButtonComponent, selector: "app-editor-button", inputs: ["type", "key"] }, { type: i3__namespace$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NdfReportComponent, selector: "app-ndf-report", inputs: ["config", "direction", "data", "criteria"], outputs: ["onNavigate", "onOpen"] }, { type: NdfTableComponent, selector: "app-ndf-table", inputs: ["rows", "totalRecords", "autoCalculateHeight", "emptyMessage", "activeQuery", "configPath", "configTransformer", "tableKey", "jsonEditorEnabled", "config", "customCriteria", "searchTerm"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "onPage", "onInitialized", "onLoaded", "onQueryChange", "onSort"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "cssVar", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: ScrollableDivDirective, selector: "[scrolled]", inputs: ["scrollTop"], outputs: ["scrolled"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: SearchTableTemplateDirective, selector: "[searchTableTemplate]" }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe }, animations: [slideAnimation] });
+  NdfReportsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfReportsComponent, deps: [{ token: i1__namespace.TranslateService }, { token: FiltersMapperService }, { token: NdfReportsService }, { token: ChartManagerService }, { token: ReportTransformService }, { token: i0__namespace.ChangeDetectorRef }, { token: FilterQueryService }, { token: ReportsStateService }, { token: ReportConfigurationService }, { token: i1__namespace$5.Router }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  NdfReportsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfReportsComponent, selector: "app-ndf-reports", inputs: { jsonEditorEnabled: "jsonEditorEnabled", reportsKey: "reportsKey", navigateRoute: "navigateRoute", config: "config" }, outputs: { onQueryChange: "onQueryChange" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-reports" }, viewQueries: [{ propertyName: "fluidDirective", first: true, predicate: FluidHeightDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n\t*ngIf=\"reportsData$ | async as reports\"\r\n\tclass=\"ndf-reports__container\"\r\n\t[class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n\t[dir]=\"direction\"\r\n\tndfFluidHeight\r\n>\r\n\t<div class=\"ndf-reports__panel print:hidden\" *ngIf=\"!!filtersConfig?.fields?.length\">\r\n\t\t<app-filters-panel\r\n\t\t\t[fields]=\"filtersConfig?.fields\"\r\n\t\t\t[aggregations]=\"aggregations\"\r\n\t\t\t(filterChanged)=\"filterChanged($event)\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\tclass=\"ndf-reports__filters\"\r\n\t\t></app-filters-panel>\r\n\t</div>\r\n\r\n\t<div class=\"ndf-reports__content\" (scrolled)=\"onContentScroll($event)\">\r\n\t\t<div class=\"ndf-reports__header flex pt-4 print:hidden\">\r\n\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<app-editor-button\r\n\t\t\t\t*ngIf=\"jsonEditorEnabled && reportsKey\"\r\n\t\t\t\t[key]=\"reportsKey\"\r\n\t\t\t\t[type]=\"editorType\"\r\n\t\t\t></app-editor-button>\r\n\t\t\t<button mat-stroked-button *ngIf=\"config?.options?.print\" class=\"print-button\" (click)=\"printAll()\">\r\n\t\t\t\t<mat-icon> print</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<mat-spinner *ngIf=\"isLoadingResult\" class=\"mt-5 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n\r\n\t\t<div class=\"reports-grid\" *ngIf=\"!isLoadingResult\">\r\n\t\t\t<app-ndf-report\r\n\t\t\t\t*ngFor=\"let config of reportConfig.items; trackBy: trackByFn\"\r\n\t\t\t\t[config]=\"config\"\r\n\t\t\t\t[data]=\"reports?.response\"\r\n\t\t\t\t[criteria]=\"filtersParams$ | async\"\r\n\t\t\t\t[direction]=\"direction\"\r\n\t\t\t\t[attr.data-width]=\"config?.layout?.width || 4\"\r\n\t\t\t\t[attr.data-height]=\"config?.layout?.height || 'auto'\"\r\n\t\t\t\t[attr.data-start-column]=\"config?.layout?.columnPosition || 'auto'\"\r\n\t\t\t\t[attr.data-start-row]=\"config?.layout?.rowPosition || 'auto'\"\r\n\t\t\t\t[class.wide]=\"config?.layout?.width >= 6\"\r\n\t\t\t\tclass=\"reports-grid__item {{ config?.layout?.styleClass }} \"\r\n\t\t\t\t(onNavigate)=\"onNavigate($event)\"\r\n\t\t\t\t(onOpen)=\"openReportDetails($event, config)\"\r\n\t\t\t></app-ndf-report>\r\n\t\t</div>\r\n\t</div>\r\n\t<div\r\n\t\tclass=\"ndf-reports__details print:hidden\"\r\n\t\t[class.opened]=\"showDetails\"\r\n\t\t[@slideInOut]=\"showDetails ? 'open' : 'closed'\"\r\n\t\t(@slideInOut.done)=\"onDetailsAnimationEnd($event)\"\r\n\t>\r\n\t\t<app-ndf-table\r\n\t\t\t*ngIf=\"reportDetails$ | async as report\"\r\n\t\t\t[config]=\"report.config\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\t[customCriteria]=\"filtersParams$ | async\"\r\n\t\t>\r\n\t\t\t<ng-template searchTableTemplate>\r\n\t\t\t\t<div class=\"ndf-reports__details__header flex gap-2\">\r\n\t\t\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button mat-stroked-button class=\"close-button\" (click)=\"closeDetailsPanel()\">\r\n\t\t\t\t\t\t<mat-icon> close</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t{{ report.label | translate }}\r\n\t\t\t\t</h3>\r\n\t\t\t</ng-template>\r\n\t\t</app-ndf-table>\r\n\t</div>\r\n</div>\r\n", styles: [":host{padding-inline:var(--ndf-reports-inline-padding, 0);padding-block:var(--ndf-reports-block-padding, .5rem 0);height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--ndf-reports-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host:before,:host:after{box-sizing:border-box}:host[dir=ltr]{--ndf-reports-panel-translateX: -100%;--ndf-reports-details-translateX: 100%}.ndf-reports__header{background-color:var(--ndf-reports-background, #fff);flex-direction:var(--ndf-reports-header-direction, row);justify-content:var(--ndf-reports-header-justify, space-between);align-items:var(--ndf-reports-header-items, center);padding-inline:var(--ndf-reports-header-padding-inline, .5rem);padding-block:var(--ndf-reports-header-padding-block, 0 .5rem);position:var(--ndf-reports-header-position, sticky);top:0;z-index:1}.ndf-reports__header__actions{justify-content:var(--ndf-reports-actions-justify, flex-end)}.ndf-reports__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-reports__container{--panel-width: var(--ndf-reports-panel-width, 18rem);position:relative;overflow:var(--ndf-reports-container-overflow, hidden);display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-reports-height, calc(var(--ndf-fluid-height) - calc(var(--ndf-reports-block-padding, 1rem) * 2.5)));flex-grow:1;grid-gap:var(--ndf-table-container-gap, .5rem);gap:var(--ndf-table-container-gap, .5rem)}.ndf-reports__container.panel-opened{--ndf-details-margin: var(--panel-width);--ndf-reports-panel-translateX: 0;--ndf-reports-content-margin: var(--panel-width)}@media print{.ndf-reports__container{--ndf-reports-container-overflow: visible;height:100%}}.ndf-reports__panel,.ndf-reports__content .ndf-reports__details{overflow:auto;transition:all .2s}.ndf-reports__panel{position:absolute;width:var(--panel-width);height:100%;transform:translate(var(--ndf-reports-panel-translateX, 100%));padding-inline:var(--ndf-reports-panel-inline-padding, .5rem);padding-block:var(--ndf-reports-panel-block-padding, .5rem);background:var(--ndf-reports-panel-background, #fff);z-index:1}.ndf-reports__content{flex-grow:1;padding-inline-start:var(--ndf-reports-content-margin, 1rem);padding-inline-end:var(--ndf-reports-content-pie, 1rem);padding-block:var(--ndf-reports-content-pb, 0 1rem);overflow-y:var(--ndf-reports-content-overflow-y, auto);position:relative;display:flex;flex-direction:column}@media print{.ndf-reports__content{--ndf-reports-content-overflow-y: visible}}.ndf-reports__details{position:absolute;inset-inline-end:0;width:calc(100% - var(--ndf-details-margin, 0px));height:100%;transform:translate(var(--ndf-reports-details-translateX, -100%));padding-inline:var(--ndf-reports-details-inline-padding, 0rem);flex-grow:1;padding-block:var(--ndf-reports-details-block-padding, 0rem);background:var(--ndf-reports-details-background, #fff);z-index:1;transition:all .2s}.reports-grid{--grid-columns: 12;--column-width: calc(100% / var(--grid-columns));display:grid;grid-gap:var(--reports-grid-gap, 1.5rem);gap:var(--reports-grid-gap, 1.5rem);grid-template-columns:var(--rg-columns, repeat(var(--grid-columns), 1fr));margin-block:var(--reports-grid-margin-block, 1.25rem 0);padding-inline:var(--reports-grid-padding-inline, .5rem)}.reports-grid__item{display:grid;grid-gap:.3rem;gap:.3rem;min-width:0;text-align:center;vertical-align:middle}.reports-grid__item[data-width=\"1\"]{--col-span: span 1}.reports-grid__item[data-start-column=\"1\"]{--col-start: 1}.reports-grid__item[data-start-row=\"1\"]{--row-start: 1}.reports-grid__item[data-height=\"1\"]{--row-span: 1}.reports-grid__item[data-width=\"2\"]{--col-span: span 2}.reports-grid__item[data-start-column=\"2\"]{--col-start: 2}.reports-grid__item[data-start-row=\"2\"]{--row-start: 2}.reports-grid__item[data-height=\"2\"]{--row-span: 2}.reports-grid__item[data-width=\"3\"]{--col-span: span 3}.reports-grid__item[data-start-column=\"3\"]{--col-start: 3}.reports-grid__item[data-start-row=\"3\"]{--row-start: 3}.reports-grid__item[data-height=\"3\"]{--row-span: 3}.reports-grid__item[data-width=\"4\"]{--col-span: span 4}.reports-grid__item[data-start-column=\"4\"]{--col-start: 4}.reports-grid__item[data-start-row=\"4\"]{--row-start: 4}.reports-grid__item[data-height=\"4\"]{--row-span: 4}.reports-grid__item[data-width=\"5\"]{--col-span: span 5}.reports-grid__item[data-start-column=\"5\"]{--col-start: 5}.reports-grid__item[data-start-row=\"5\"]{--row-start: 5}.reports-grid__item[data-height=\"5\"]{--row-span: 5}.reports-grid__item[data-width=\"6\"]{--col-span: span 6}.reports-grid__item[data-start-column=\"6\"]{--col-start: 6}.reports-grid__item[data-start-row=\"6\"]{--row-start: 6}.reports-grid__item[data-height=\"6\"]{--row-span: 6}.reports-grid__item[data-width=\"7\"]{--col-span: span 7}.reports-grid__item[data-start-column=\"7\"]{--col-start: 7}.reports-grid__item[data-start-row=\"7\"]{--row-start: 7}.reports-grid__item[data-height=\"7\"]{--row-span: 7}.reports-grid__item[data-width=\"8\"]{--col-span: span 8}.reports-grid__item[data-start-column=\"8\"]{--col-start: 8}.reports-grid__item[data-start-row=\"8\"]{--row-start: 8}.reports-grid__item[data-height=\"8\"]{--row-span: 8}.reports-grid__item[data-width=\"9\"]{--col-span: span 9}.reports-grid__item[data-start-column=\"9\"]{--col-start: 9}.reports-grid__item[data-start-row=\"9\"]{--row-start: 9}.reports-grid__item[data-height=\"9\"]{--row-span: 9}.reports-grid__item[data-width=\"10\"]{--col-span: span 10}.reports-grid__item[data-start-column=\"10\"]{--col-start: 10}.reports-grid__item[data-start-row=\"10\"]{--row-start: 10}.reports-grid__item[data-height=\"10\"]{--row-span: 10}.reports-grid__item[data-width=\"11\"]{--col-span: span 11}.reports-grid__item[data-start-column=\"11\"]{--col-start: 11}.reports-grid__item[data-start-row=\"11\"]{--row-start: 11}.reports-grid__item[data-height=\"11\"]{--row-span: 11}.reports-grid__item[data-width=\"12\"]{--col-span: span 12}.reports-grid__item[data-start-column=\"12\"]{--col-start: 12}.reports-grid__item[data-start-row=\"12\"]{--row-start: 12}.reports-grid__item[data-height=\"12\"]{--row-span: 12}@media screen{.reports-grid__item{grid-column:var(--col-start, auto)/var(--col-span, span var(--grid-column, 2));grid-row:var(--row-start, auto)/span var(--row-span, 1);grid-template-rows:subgrid}}@media print{.reports-grid{--reports-grid-gap: 11mm;--reports-grid-margin-top: 9mm;--rg-columns: repeat(2, 1fr)}.reports-grid__item{--col-start: auto;--col-span: span 1;border:1px solid #f5f5f5;border-radius:var(--cp-radius, 1rem);page-break-inside:avoid;break-inside:avoid-page}}@media screen and (max-width: 1199px){.reports-grid__item[data-width=\"1\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"2\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"3\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"4\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"5\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"6\"]{--col-start: auto;--col-span: span 6}.reports-grid__item.wide{--col-start: 1;--col-span: -1}}@media screen and (max-width: 767px){.reports-grid__item[data-width]{--col-start: 1;--col-span: -1}}\n"], components: [{ type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { type: i1__namespace$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditorButtonComponent, selector: "app-editor-button", inputs: ["type", "key"] }, { type: i3__namespace$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NdfReportComponent, selector: "app-ndf-report", inputs: ["config", "direction", "data", "criteria"], outputs: ["onNavigate", "onOpen"] }, { type: NdfTableComponent, selector: "app-ndf-table", inputs: ["rows", "totalRecords", "autoCalculateHeight", "emptyMessage", "activeQuery", "configPath", "configTransformer", "tableKey", "jsonEditorEnabled", "config", "customCriteria", "searchTerm"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "onPage", "onInitialized", "onLoaded", "onQueryChange", "onSort"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "cssVar", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: ScrollableDivDirective, selector: "[scrolled]", inputs: ["scrollTop"], outputs: ["scrolled"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: SearchTableTemplateDirective, selector: "[searchTableTemplate]" }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe }, animations: [slideAnimation] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfReportsComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -46955,7 +47218,7 @@
                       },
                       animations: [slideAnimation]
                   }]
-          }], ctorParameters: function () { return [{ type: i1__namespace.TranslateService }, { type: FiltersMapperService }, { type: NdfReportsService }, { type: ChartManagerService }, { type: ReportTransformService }, { type: i0__namespace.ChangeDetectorRef }, { type: FilterQueryService }, { type: ReportsStateService }, { type: i1__namespace$5.Router }, { type: i0__namespace.NgZone }]; }, propDecorators: { fluidDirective: [{
+          }], ctorParameters: function () { return [{ type: i1__namespace.TranslateService }, { type: FiltersMapperService }, { type: NdfReportsService }, { type: ChartManagerService }, { type: ReportTransformService }, { type: i0__namespace.ChangeDetectorRef }, { type: FilterQueryService }, { type: ReportsStateService }, { type: ReportConfigurationService }, { type: i1__namespace$5.Router }, { type: i0__namespace.NgZone }]; }, propDecorators: { fluidDirective: [{
                   type: i0.ViewChild,
                   args: [FluidHeightDirective]
               }], jsonEditorEnabled: [{
@@ -46994,7 +47257,10 @@
           DynamicTimelineReportComponent,
           TimeGroupSelectorComponent,
           GraphDialogComponent,
-          TimelineDialogComponent, ScrollableDivDirective, GraphChartComponent, DigitChartComponent, ReportActionsComponent, CustomReportComponent, CustomChartComponent, CustomChartDialogComponent], imports: [i4.CommonModule,
+          TimelineDialogComponent, ScrollableDivDirective, GraphChartComponent, DigitChartComponent, ReportActionsComponent,
+          CustomReportComponent,
+          CustomChartComponent,
+          CustomChartDialogComponent], imports: [i4.CommonModule,
           i1.TranslateModule,
           i3$2.MatMenuModule,
           i2$2.MatIconModule,
@@ -47039,7 +47305,16 @@
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfReportsModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      declarations: [CONTAINERS, COMPONENTS, DIRECTIVES, CHARTS, ReportActionsComponent, CustomReportComponent, CustomChartComponent, CustomChartDialogComponent],
+                      declarations: [
+                          CONTAINERS,
+                          COMPONENTS,
+                          DIRECTIVES,
+                          CHARTS,
+                          ReportActionsComponent,
+                          CustomReportComponent,
+                          CustomChartComponent,
+                          CustomChartDialogComponent
+                      ],
                       imports: [
                           i4.CommonModule,
                           i1.TranslateModule,
@@ -47929,6 +48204,7 @@
   exports.ChartPanelModule = ChartPanelModule;
   exports.ChartPlugins = index;
   exports.ChartPluginsRegistry = ChartPluginsRegistry;
+  exports.ChartThemeService = ChartThemeService;
   exports.ChartUtils = index$2;
   exports.ChartsModule = ChartsModule;
   exports.CheckConditionPipe = CheckConditionPipe;
@@ -48257,7 +48533,7 @@
   exports.RemoveButtonComponent = RemoveButtonComponent;
   exports.RenameComponent = RenameComponent;
   exports.ReportConfigMapperService = ReportConfigMapperService;
-  exports.ReportDetailsService = ReportDetailsService;
+  exports.ReportConfigurationService = ReportConfigurationService;
   exports.ReportTransformService = ReportTransformService;
   exports.ReportsDataTransformers = ReportsDataTransformers;
   exports.ReportsStateService = ReportsStateService;