nuxeo-development-framework 5.5.3 → 5.5.5

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

@@ -12337,8 +12337,9 @@
       };
       DynamicFormSelectUsersComponent.prototype.ngOnInit = function () {
           var _this = this;
+          var _a;
           this.allUsers = this.deptTitle === 'all' ? true : false;
-          this.selection = this.multiple ? [] : undefined;
+          this.selection = (_a = this.selection) !== null && _a !== void 0 ? _a : (this.multiple ? [] : undefined);
           if (this.allUsers) {
               this.loadUsers();
           }
@@ -43490,7 +43491,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 +43548,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 +44211,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 +44229,7 @@
           if (fitsInside) {
               return {
                   x: dataPoint.x,
-                  y: dataPoint.y,
+                  y: dataPoint.y + textPadding / 2 + textMetrics.height / 2,
                   color: getTextColor(backgroundColor)
               };
           }
@@ -45356,6 +45357,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 +45488,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 +45499,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 +45530,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 +45553,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 });
@@ -45614,6 +45747,59 @@
               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() {
@@ -45768,6 +45954,7 @@
       }
       Object.defineProperty(BaseReport.prototype, "definition", {
           set: function (obj) {
+              this._definition = ___default["default"].cloneDeep(obj);
               if (obj) {
                   this._configSub.next(this._prepareConfig(obj));
               }
@@ -45862,6 +46049,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) {
@@ -46264,6 +46453,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;
@@ -46284,10 +46480,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: [{
@@ -46296,7 +46507,8 @@
                       styleUrls: ['./graph-report.component.scss'],
                       host: {
                           class: 'graph-report flex flex-col flex-grow'
-                      }
+                      },
+                      providers: [ChartThemeService]
                   }]
           }], propDecorators: { graphChartComponent: [{
                   type: i0.ViewChild,
@@ -46499,14 +46711,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
@@ -46529,10 +46748,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: [{
@@ -46543,7 +46777,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,
@@ -46589,50 +46823,6 @@
                   args: ['customChart']
               }] } });
 
-  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;
-  }
-
   var NdfReportComponent = /** @class */ (function (_super) {
       __extends(NdfReportComponent, _super);
       function NdfReportComponent() {
@@ -46643,6 +46833,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 });
@@ -48005,6 +48205,7 @@
   exports.ChartPanelModule = ChartPanelModule;
   exports.ChartPlugins = index;
   exports.ChartPluginsRegistry = ChartPluginsRegistry;
+  exports.ChartThemeService = ChartThemeService;
   exports.ChartUtils = index$2;
   exports.ChartsModule = ChartsModule;
   exports.CheckConditionPipe = CheckConditionPipe;