nuxeo-development-framework 5.4.9 → 5.5.0

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

@@ -43376,6 +43376,18 @@
           }
       }
       return variants;
+  }
+  function createConicGradient(chart, colors) {
+      var ctx = chart.ctx, chartArea = chart.chartArea;
+      if (!chartArea || !('createConicGradient' in ctx)) {
+          return null;
+      }
+      var left = chartArea.left, width = chartArea.width, top = chartArea.top, height = chartArea.height;
+      //@ts-ignore
+      var gradient = ctx.createConicGradient(0, left + width / 2, top + height / 2);
+      gradient.addColorStop(0, colors === null || colors === void 0 ? void 0 : colors.startColor);
+      gradient.addColorStop(1, colors === null || colors === void 0 ? void 0 : colors.endColor);
+      return gradient;
   }
 
   function flatArray(data) {
@@ -43528,6 +43540,7 @@
     createTint: createTint,
     createShade: createShade,
     createColorVariants: createColorVariants,
+    createConicGradient: createConicGradient,
     flatArray: flatArray,
     isObject: isObject,
     getCssVariable: getCssVariable,
@@ -44003,147 +44016,211 @@
       }
   };
 
+  // Configuration constants
+  var LABEL_CONFIG = {
+      minFontSize: 10,
+      maxFontSize: 16,
+      defaultFontSize: 12,
+      textPadding: 8,
+      minAngleForPieLabel: 0.3,
+      arcRadiusMultiplier: {
+          pie: 0.7,
+          doughnut: 0.8
+      },
+      fontSizeCalculation: {
+          percentageDivisor: 3,
+          maxPercentageForFontSize: 20
+      }
+  };
+  // Main plugin
   var chartDataLabels = {
       id: 'chartDataLabels',
       afterDatasetsDraw: function (chart, args, plugins) {
           var _a;
           var ctx = chart.ctx;
           ctx.save();
-          switch ((_a = chart.config) === null || _a === void 0 ? void 0 : _a.type) {
-              case 'bar':
-                  barChartLabels(chart);
-                  break;
-              case 'pie':
-                  pieChartLabels(chart);
-                  break;
-              case 'doughnut':
-                  doughnutChartLabels(chart);
-                  break;
+          var chartType = (_a = chart.config) === null || _a === void 0 ? void 0 : _a.type;
+          var renderer = getChartRenderer(chartType);
+          if (renderer) {
+              renderer(chart);
           }
           ctx.restore();
       }
   };
+  // Chart type router
+  function getChartRenderer(chartType) {
+      var renderers = {
+          bar: barChartLabels,
+          pie: pieChartLabels,
+          doughnut: doughnutChartLabels
+      };
+      return renderers[chartType];
+  }
+  // Core utility functions
+  function calculatePercentage(value, total) {
+      return total > 0 ? (value / total) * 100 : 0;
+  }
+  function calculateFontSize(percentage) {
+      var _c = LABEL_CONFIG.fontSizeCalculation, percentageDivisor = _c.percentageDivisor, maxPercentageForFontSize = _c.maxPercentageForFontSize;
+      var calculatedSize = Math.min(percentage / percentageDivisor, maxPercentageForFontSize);
+      return Math.max(LABEL_CONFIG.minFontSize, Math.min(calculatedSize, LABEL_CONFIG.maxFontSize));
+  }
+  function getTextMetrics(ctx, text, fontSize) {
+      ctx.font = "normal " + fontSize + "px sans-serif";
+      var metrics = ctx.measureText(text);
+      var height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent || LABEL_CONFIG.defaultFontSize;
+      return {
+          width: metrics.width,
+          height: height
+      };
+  }
+  function prepareCanvasForText(ctx, fontSize, color) {
+      ctx.font = "bold " + fontSize + "px sans-serif";
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillStyle = color;
+  }
+  function extractLabelData(dataset, index, totalSum, chart) {
+      var value = dataset.data[index];
+      var percentage = calculatePercentage(value, totalSum);
+      var isVisible = chart.getDataVisibility(index);
+      if (!percentage || !isVisible) {
+          return null;
+      }
+      return {
+          text: percentage.toFixed(1) + "%",
+          percentage: percentage,
+          backgroundColor: Array.isArray(dataset.backgroundColor) ? dataset.backgroundColor[index] : dataset.backgroundColor,
+          isVisible: isVisible
+      };
+  }
+  // Bar chart implementation
   function barChartLabels(chart) {
       var _a;
-      var ctx = chart.ctx, data = chart.data;
+      var ctx = chart.ctx;
       var isHorizontalChart = ((_a = chart.options) === null || _a === void 0 ? void 0 : _a.indexAxis) === 'y';
-      var isHorizontalReversed = isBarChartReversed(chart).isHorizontalReversed;
+      var isHorizontalReversed = getBarChartOrientation(chart).isHorizontalReversed;
       chart.data.datasets.forEach(function (dataset, datasetIndex) {
           var meta = chart.getDatasetMeta(datasetIndex);
-          var totalSum = dataset.data.reduce(function (sum, currentValue) { return sum + currentValue; }, 0);
+          var totalSum = dataset.data.reduce(function (sum, value) { return sum + value; }, 0);
           meta.data.forEach(function (dataPoint, index) {
               if (!dataPoint)
                   return;
-              var percentage = (dataset.data[index] / totalSum) * 100;
-              var isVisible = chart.getDataVisibility(index);
-              if (!percentage || !isVisible) {
+              var labelData = extractLabelData(dataset, index, totalSum, chart);
+              if (!labelData)
                   return;
-              }
-              var bgColor = dataset.backgroundColor[index];
-              var textColor = getTextColor(bgColor);
-              var fontSize = Math.max(12, Math.min(percentage / 2, 14));
-              ctx.textAlign = 'center';
-              ctx.textBaseline = 'middle';
-              ctx.font = "normal " + fontSize + "px sans-serif";
-              ctx.fillStyle = textColor;
-              var text = percentage.toFixed() + "%";
-              var _c = getTextMetrics(ctx, text), width = _c.width, height = _c.height;
-              var textHeight = height || 12;
-              var textWidth = width || 30;
-              if (isHorizontalChart) {
-                  if ((dataPoint === null || dataPoint === void 0 ? void 0 : dataPoint.width) > 0) {
-                      var textPadding = 20;
-                      var offset = textPadding + textWidth <= dataPoint.width ? textWidth : textWidth >= dataPoint.width ? 0 : 10;
-                      var x = dataPoint.x + (isHorizontalReversed ? offset : -offset);
-                      ctx.fillStyle = dataPoint.width <= textWidth ? getColor('--chart-value-default-color', '#000') : textColor;
-                      if (percentage) {
-                          ctx.fillText(text, x, dataPoint.y);
-                      }
-                  }
-              }
-              else {
-                  if ((dataPoint === null || dataPoint === void 0 ? void 0 : dataPoint.height) > 0) {
-                      var y = textHeight >= dataPoint.height ? dataPoint.y - 10 : dataPoint.y + 10;
-                      ctx.fillStyle = textHeight >= dataPoint.height ? getColor('--chart-value-default-color', '#000') : textColor;
-                      if (!percentage) {
-                          return;
-                      }
-                      ctx.fillText(text, dataPoint.x, y);
-                  }
+              var fontSize = calculateFontSize(labelData.percentage);
+              var textMetrics = getTextMetrics(ctx, labelData.text, fontSize);
+              var position = calculateBarLabelPosition(dataPoint, textMetrics, isHorizontalChart, isHorizontalReversed, labelData.backgroundColor);
+              if (position) {
+                  prepareCanvasForText(ctx, fontSize, position.color);
+                  ctx.fillText(labelData.text, position.x, position.y);
               }
           });
       });
   }
-  function doughnutChartLabels(chart) {
-      var ctx = chart.ctx, data = chart.data;
-      chart.data.datasets.forEach(function (dataset, datasetIndex) {
-          var meta = chart.getDatasetMeta(datasetIndex);
-          var totalSum = dataset.data.reduce(function (sum, currentValue) { return sum + currentValue; }, 0);
-          meta.data.forEach(function (arc, index) {
-              if (!arc)
-                  return;
-              var percentage = (dataset.data[index] / totalSum) * 100;
-              var isVisible = chart.getDataVisibility(index);
-              if (!percentage || !isVisible) {
-                  return;
-              }
-              var midAngle = (arc.startAngle + arc.endAngle) / 2;
-              var x = arc.x + Math.cos(midAngle) * (arc.outerRadius / 1.2);
-              var y = arc.y + Math.sin(midAngle) * (arc.outerRadius / 1.2);
-              var fontSize = Math.max(12, Math.min(percentage / 2, 14));
-              var bgColor = dataset.backgroundColor[index] || '#00000';
-              prepareText(ctx, fontSize, bgColor);
-              ctx.fillText(percentage.toFixed() + "%", x, y);
-          });
-      });
+  function calculateBarLabelPosition(dataPoint, textMetrics, isHorizontal, isReversed, backgroundColor) {
+      var textPadding = LABEL_CONFIG.textPadding;
+      if (isHorizontal) {
+          var fitsInside = textMetrics.width + textPadding * 2 <= dataPoint.width;
+          if (fitsInside) {
+              return {
+                  x: dataPoint.x + (isReversed ? textMetrics.width / 2 : -textMetrics.width / 2),
+                  y: dataPoint.y,
+                  color: getTextColor(backgroundColor)
+              };
+          }
+          else {
+              return {
+                  x: dataPoint.x + (isReversed ? -textMetrics.width / 2 - textPadding : textMetrics.width / 2 + textPadding),
+                  y: dataPoint.y,
+                  color: getColor('--chart-value-default-color', '#000')
+              };
+          }
+      }
+      else {
+          var fitsInside = textMetrics.height + textPadding * 2 <= dataPoint.height;
+          if (fitsInside) {
+              return {
+                  x: dataPoint.x,
+                  y: dataPoint.y,
+                  color: getTextColor(backgroundColor)
+              };
+          }
+          else {
+              return {
+                  x: dataPoint.x,
+                  y: dataPoint.y - textMetrics.height / 2 - textPadding,
+                  color: getColor('--chart-value-default-color', '#000')
+              };
+          }
+      }
   }
+  // Pie chart implementation
   function pieChartLabels(chart) {
-      var ctx = chart.ctx, data = chart.data;
+      renderArcLabels(chart, 'pie');
+  }
+  // Doughnut chart implementation
+  function doughnutChartLabels(chart) {
+      renderArcLabels(chart, 'doughnut');
+  }
+  function renderArcLabels(chart, chartType) {
+      var ctx = chart.ctx;
       chart.data.datasets.forEach(function (dataset, datasetIndex) {
           var meta = chart.getDatasetMeta(datasetIndex);
-          var totalSum = dataset.data.reduce(function (sum, currentValue) { return sum + currentValue; }, 0);
+          var totalSum = dataset.data.reduce(function (sum, value) { return sum + value; }, 0);
           meta.data.forEach(function (arc, index) {
               if (!arc)
                   return;
-              var percentage = (dataset.data[index] / totalSum) * 100;
-              var isVisible = chart.getDataVisibility(index);
-              if (!percentage || !isVisible) {
+              var labelData = extractLabelData(dataset, index, totalSum, chart);
+              if (!labelData)
                   return;
+              if (shouldShowArcLabel(arc, labelData.text, chartType)) {
+                  var position = calculateArcLabelPosition(arc, chartType);
+                  var fontSize = calculateFontSize(labelData.percentage);
+                  var textColor = getTextColor(labelData.backgroundColor || '#000000');
+                  prepareCanvasForText(ctx, fontSize, textColor);
+                  ctx.fillText(labelData.text, position.x, position.y);
               }
-              var midAngle = (arc.startAngle + arc.endAngle) / 2;
-              var x = arc.x + Math.cos(midAngle) * (arc.outerRadius / 1.5);
-              var y = arc.y + Math.sin(midAngle) * (arc.outerRadius / 1.5);
-              var fontSize = Math.max(12, Math.min(percentage / 2, 14));
-              var bgColor = dataset.backgroundColor[index] || '#00000';
-              prepareText(ctx, fontSize, bgColor);
-              ctx.fillText(percentage.toFixed() + "%", x, y);
           });
       });
   }
-  function isBarChartReversed(chart) {
-      var _a, _b;
-      var scales = chart.options.scales;
-      var isVerticalReversed = ((_a = scales === null || scales === void 0 ? void 0 : scales.y) === null || _a === void 0 ? void 0 : _a.reverse) === true;
-      var isHorizontalReversed = ((_b = scales === null || scales === void 0 ? void 0 : scales.x) === null || _b === void 0 ? void 0 : _b.reverse) === true;
+  function shouldShowArcLabel(arc, text, chartType) {
+      var arcAngle = Math.abs(arc.endAngle - arc.startAngle);
+      // Don't show labels for very small slices
+      if (arcAngle < LABEL_CONFIG.minAngleForPieLabel) {
+          return false;
+      }
+      // For doughnut charts, also check if there's enough radial space
+      if (chartType === 'doughnut') {
+          var radialSpace = arc.outerRadius - arc.innerRadius;
+          return radialSpace >= LABEL_CONFIG.defaultFontSize * 1.5;
+      }
+      return true;
+  }
+  function calculateArcLabelPosition(arc, chartType) {
+      var midAngle = (arc.startAngle + arc.endAngle) / 2;
+      var radiusMultiplier = LABEL_CONFIG.arcRadiusMultiplier[chartType];
+      var radius;
+      if (chartType === 'doughnut') {
+          radius = (arc.outerRadius + arc.innerRadius) / 2;
+      }
+      else {
+          radius = arc.outerRadius * radiusMultiplier;
+      }
       return {
-          isVerticalReversed: isVerticalReversed,
-          isHorizontalReversed: isHorizontalReversed
+          x: arc.x + Math.cos(midAngle) * radius,
+          y: arc.y + Math.sin(midAngle) * radius
       };
   }
-  function getTextMetrics(ctx, text) {
-      var metrics = ctx.measureText(text);
-      var textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+  // Utility functions
+  function getBarChartOrientation(chart) {
+      var _a, _b;
+      var scales = chart.options.scales;
       return {
-          height: textHeight,
-          width: metrics.width
+          isVerticalReversed: ((_a = scales === null || scales === void 0 ? void 0 : scales.y) === null || _a === void 0 ? void 0 : _a.reverse) === true,
+          isHorizontalReversed: ((_b = scales === null || scales === void 0 ? void 0 : scales.x) === null || _b === void 0 ? void 0 : _b.reverse) === true
       };
-  }
-  function prepareText(ctx, fontSize, bgColor) {
-      var textColor = getTextColor(bgColor || getColor('--chart-value-default-color', '#000'));
-      ctx.font = "bold " + fontSize + "px sans-serif";
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'middle';
-      ctx.fillStyle = textColor;
   }
 
   var index = /*#__PURE__*/Object.freeze({
@@ -44162,9 +44239,9 @@
           _this.injector = injector;
           _this._translateService = _this.injector.get(i1.TranslateService);
           _this._rebuildTriggerSub = new rxjs.BehaviorSubject(false);
-          _this._dataSub = new rxjs.ReplaySubject(null);
           _this._configSub = new rxjs.ReplaySubject(null);
           _this._isInitialized = false;
+          _this._dataSub = new rxjs.ReplaySubject(null);
           _this.onReady = new i0.EventEmitter();
           _this._subscribeToLanguage();
           return _this;
@@ -44385,7 +44462,9 @@
           });
           this._charts.clear();
       };
-      ChartManagerService.prototype.printChart = function (id, label) {
+      ChartManagerService.prototype.printChart = function (id, label, options, plugins) {
+          if (options === void 0) { options = {}; }
+          if (plugins === void 0) { plugins = []; }
           return __awaiter(this, void 0, void 0, function () {
               var _chart, _b, chart, destroyTempChart, imageLink, date;
               return __generator(this, function (_c) {
@@ -44395,7 +44474,7 @@
                           if (!_chart) {
                               return [2 /*return*/];
                           }
-                          return [4 /*yield*/, this._createHiddenCanvasForExport(_chart, label)];
+                          return [4 /*yield*/, this._createHiddenCanvasForExport(_chart, label, options, plugins)];
                       case 1:
                           _b = _c.sent(), chart = _b.chart, destroyTempChart = _b.destroy;
                           if (!chart) {
@@ -44412,8 +44491,10 @@
               });
           });
       };
-      ChartManagerService.prototype._createHiddenCanvasForExport = function (chart, label) {
+      ChartManagerService.prototype._createHiddenCanvasForExport = function (chart, label, options, plugins) {
           var _this = this;
+          if (options === void 0) { options = {}; }
+          if (plugins === void 0) { plugins = []; }
           var currentLang = this._translateService.currentLang;
           return new Promise(function (resolve) {
               var _a;
@@ -44429,9 +44510,13 @@
               var hiddenChart = new Chart.Chart(hiddenCanvas, {
                   type: (_a = chart.config) === null || _a === void 0 ? void 0 : _a.type,
                   data: chart.config.data,
-                  options: Object.assign(Object.assign({}, chart.config.options), { animation: false, responsive: false, layout: {
+                  options: ___default["default"].merge({}, chart.config.options, {
+                      animation: false,
+                      responsive: false,
+                      layout: {
                           padding: padding
-                      }, plugins: Object.assign(Object.assign({}, chart.config.options.plugins), { title: {
+                      },
+                      plugins: Object.assign(Object.assign({}, chart.config.options.plugins), { title: {
                               display: true,
                               text: label,
                               padding: {
@@ -44442,8 +44527,9 @@
                               display: true,
                               rtl: currentLang == 'ar',
                               position: currentLang == 'ar' ? 'right' : 'left'
-                          } }) }),
-                  plugins: [
+                          } })
+                  }, options),
+                  plugins: ___default["default"].merge([], [
                       chartDataLabels,
                       {
                           id: 'canvasBackgroundColor',
@@ -44468,7 +44554,7 @@
                               });
                           }
                       }
-                  ]
+                  ], plugins)
               });
               hiddenChart.render();
           });
@@ -44495,7 +44581,7 @@
       }
       ReportTransformService.prototype._extractDataFormats = function (data) {
           var extractedData = ___default["default"].flatMap(data, function (item) {
-              if (Array.isArray(item === null || item === void 0 ? void 0 : item.datasource)) {
+              if ('datasource' in item && Array.isArray(item === null || item === void 0 ? void 0 : item.datasource)) {
                   return ___default["default"].filter(item.datasource, function (source) { return source.dataFormat; });
               }
               return [];
@@ -45543,6 +45629,8 @@
       function BaseReport(injector) {
           var _this = _super.call(this) || this;
           _this.injector = injector;
+          _this._translateService = _this.injector.get(i1.TranslateService);
+          _this._cdr = _this.injector.get(i0.ChangeDetectorRef);
           _this._configMapperService = _this.injector.get(ReportConfigMapperService);
           _this._configSub = new rxjs.BehaviorSubject(null);
           _this.config$ = _this._configSub.asObservable();
@@ -45616,6 +45704,203 @@
                   type: i0.Output
               }] } });
 
+  var ReportsDialogService = /** @class */ (function () {
+      function ReportsDialogService(injector) {
+          this.injector = injector;
+          this._translateService = this.injector.get(i1.TranslateService);
+          this._dialog = this.injector.get(i1$4.MatDialog);
+      }
+      ReportsDialogService.prototype.open = function (component, options) {
+          var config = options.config, data = options.data, criteria = options.criteria, direction = options.direction;
+          var _a = (config === null || config === void 0 ? void 0 : config.dialog) || {}, active = _a.active, width = _a.width, height = _a.height, maxWidth = _a.maxWidth, resetOptions = __rest(_a, ["active", "width", "height", "maxWidth"]);
+          this._dialog.open(component, Object.assign(Object.assign({}, resetOptions), { width: width || '100%', height: height || '100%', maxWidth: maxWidth || '100%', direction: direction, data: {
+                  config: config,
+                  data: data,
+                  title: config.label,
+                  direction: direction,
+                  criteria: criteria
+              } }));
+      };
+      return ReportsDialogService;
+  }());
+  ReportsDialogService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ReportsDialogService, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  ReportsDialogService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ReportsDialogService, providedIn: 'root' });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ReportsDialogService, decorators: [{
+              type: i0.Injectable,
+              args: [{
+                      providedIn: 'root'
+                  }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.Injector }]; } });
+
+  var BaseGraphReport = /** @class */ (function (_super) {
+      __extends(BaseGraphReport, _super);
+      function BaseGraphReport() {
+          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+          _this._dialog = _this.injector.get(ReportsDialogService);
+          return _this;
+      }
+      BaseGraphReport.prototype.openGraphDialog = function (component) {
+          if (component === void 0) { component = GraphChartComponent; }
+          this._dialog.open(component, {
+              config: this.config,
+              data: this.data,
+              criteria: this.criteria,
+              direction: this.direction
+          });
+      };
+      return BaseGraphReport;
+  }(BaseReport));
+  BaseGraphReport.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseGraphReport, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+  BaseGraphReport.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseGraphReport, usesInheritance: true, ngImport: i0__namespace });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseGraphReport, decorators: [{
+              type: i0.Directive
+          }] });
+
+  var BaseCustomReport = /** @class */ (function (_super) {
+      __extends(BaseCustomReport, _super);
+      function BaseCustomReport(injector) {
+          var _this = _super.call(this) || this;
+          _this.injector = injector;
+          _this._chartHelperService = _this.injector.get(ChartManagerService);
+          _this.direction = 'rtl';
+          _this._dataSub = new rxjs.ReplaySubject(null);
+          _this._criteriaSub = new rxjs.ReplaySubject(null);
+          _this.criteria$ = _this._criteriaSub.asObservable();
+          _this._configSub = new rxjs.BehaviorSubject(null);
+          _this.config$ = _this._configSub.asObservable();
+          return _this;
+      }
+      Object.defineProperty(BaseCustomReport.prototype, "data", {
+          get: function () {
+              return this._data;
+          },
+          set: function (data) {
+              this._data = data;
+              this._dataSub.next(data);
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(BaseCustomReport.prototype, "criteria", {
+          get: function () {
+              return this._criteria;
+          },
+          set: function (value) {
+              this._criteria = ___default["default"].cloneDeep(value);
+              this._criteriaSub.next(this._criteria);
+          },
+          enumerable: false,
+          configurable: true
+      });
+      Object.defineProperty(BaseCustomReport.prototype, "config", {
+          get: function () {
+              return this._configSub.getValue();
+          },
+          set: function (obj) {
+              if (obj) {
+                  this._configSub.next(obj);
+              }
+          },
+          enumerable: false,
+          configurable: true
+      });
+      BaseCustomReport.prototype.chartReady = function (chart) {
+          var _this = this;
+          this.chart = chart;
+          this._chartHelperService.setChart(chart);
+          this._printListener = function (event) {
+              _this.chart.resize();
+          };
+          window.addEventListener('beforeprint', this._printListener);
+          queueMicrotask(function () {
+              _this.chart.resize();
+          });
+      };
+      return BaseCustomReport;
+  }(DestroySubject));
+  BaseCustomReport.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseCustomReport, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+  BaseCustomReport.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseCustomReport, inputs: { direction: "direction", definition: "definition", data: "data", criteria: "criteria", config: "config" }, usesInheritance: true, ngImport: i0__namespace });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseCustomReport, decorators: [{
+              type: i0.Directive
+          }], ctorParameters: function () { return [{ type: i0__namespace.Injector }]; }, propDecorators: { direction: [{
+                  type: i0.Input
+              }], definition: [{
+                  type: i0.Input
+              }], data: [{
+                  type: i0.Input
+              }], criteria: [{
+                  type: i0.Input
+              }], config: [{
+                  type: i0.Input
+              }] } });
+
+  var CustomChartComponent = /** @class */ (function (_super) {
+      __extends(CustomChartComponent, _super);
+      function CustomChartComponent() {
+          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+          _this._registeredComponents = _this.injector.get(CustomReportsRegistry);
+          return _this;
+      }
+      CustomChartComponent.prototype.ngOnInit = function () {
+          var _this = this;
+          var _a, _b;
+          var componentType = this._registeredComponents.getComponent((_a = this.config) === null || _a === void 0 ? void 0 : _a.type);
+          if (!componentType) {
+              console.warn("No component registered for type: " + ((_b = this.config) === null || _b === void 0 ? void 0 : _b.type));
+              return;
+          }
+          this._componentRef = this._registeredComponents.renderComponent(componentType.type, this.container);
+          rxjs.combineLatest([this._dataSub.asObservable(), this._configSub.asObservable(), this._criteriaSub.asObservable()])
+              .pipe(operators.takeUntil(this.destroy$))
+              .subscribe(function (res) {
+              _this._prepareComponent();
+          });
+      };
+      CustomChartComponent.prototype.ngOnChanges = function (changes) {
+          var _this = this;
+          if (!this._componentRef) {
+              return;
+          }
+          Object.keys(changes).forEach(function (key) {
+              _this._componentRef.instance[key] = changes[key].currentValue;
+          });
+          this._componentRef.changeDetectorRef.detectChanges();
+      };
+      CustomChartComponent.prototype.ngOnDestroy = function () {
+          if (this._componentRef) {
+              this._componentRef.destroy();
+          }
+      };
+      CustomChartComponent.prototype._prepareComponent = function () {
+          var instance = this._componentRef.instance;
+          instance.config = this.config;
+          instance.criteria = this.criteria;
+          instance.data = this.data;
+          instance.direction = this.direction;
+          this._componentRef.changeDetectorRef.detectChanges();
+      };
+      CustomChartComponent.prototype.print = function () {
+          var instance = this._componentRef.instance;
+          if (instance) {
+              instance.print();
+          }
+      };
+      return CustomChartComponent;
+  }(BaseCustomReport));
+  CustomChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomChartComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+  CustomChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomChartComponent, selector: "app-custom-chart", viewQueries: [{ propertyName: "container", first: true, predicate: ["dynamicContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: '<ng-container #dynamicContainer></ng-container>', isInline: true, styles: [""] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomChartComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'app-custom-chart',
+                      template: '<ng-container #dynamicContainer></ng-container>',
+                      styleUrls: ['./custom-chart.component.scss']
+                  }]
+          }], propDecorators: { container: [{
+                  type: i0.ViewChild,
+                  args: ['dynamicContainer', { read: i0.ViewContainerRef, static: true }]
+              }] } });
+
   var ChartPanel = /** @class */ (function () {
       function ChartPanel() {
       }
@@ -45841,6 +46126,58 @@
                   type: i0.Output
               }] } });
 
+  var GraphReportComponent = /** @class */ (function (_super) {
+      __extends(GraphReportComponent, _super);
+      function GraphReportComponent() {
+          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+          _this.chartType$ = _this.config$.pipe(operators.map(function (config) {
+              var _a, _b;
+              if (config.chart.type !== 'bar') {
+                  return config.chart.type;
+              }
+              return ((_b = (_a = config.chart) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.indexAxis) == 'y' ? CHARTS_TYPES.horizontalBar : CHARTS_TYPES.verticalBar;
+          }));
+          return _this;
+      }
+      GraphReportComponent.prototype.changeChartType = function (type) {
+          var _d;
+          var _a, _b;
+          var _c = this._configSub.getValue(), chart = _c.chart, config = __rest(_c, ["chart"]);
+          var options = chart.options, chartConfig = __rest(chart, ["options"]);
+          if (config.mode !== REPORT_MODE.graph) {
+              return;
+          }
+          var barTypes = (_d = {},
+              _d[CHARTS_TYPES.horizontalBar] = 'bar',
+              _d[CHARTS_TYPES.verticalBar] = 'bar',
+              _d);
+          var chartType = (_a = barTypes[type]) !== null && _a !== void 0 ? _a : type;
+          this._configSub.next(Object.assign(Object.assign({}, config), { chart: Object.assign(Object.assign({}, chartConfig), { type: chartType, options: (_b = chart.overrides) === null || _b === void 0 ? void 0 : _b[type] }) }));
+      };
+      GraphReportComponent.prototype.printChart = function () {
+          if (this.graphChartComponent) {
+              this.graphChartComponent.printChart();
+          }
+      };
+      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 } });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GraphReportComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'app-graph-report',
+                      templateUrl: './graph-report.component.html',
+                      styleUrls: ['./graph-report.component.scss'],
+                      host: {
+                          class: 'graph-report flex flex-col flex-grow'
+                      }
+                  }]
+          }], propDecorators: { graphChartComponent: [{
+                  type: i0.ViewChild,
+                  args: ['graphChart']
+              }] } });
+
   var TimeGroupSelectorComponent = /** @class */ (function () {
       function TimeGroupSelectorComponent() {
           this.groups = this._prepareGroups();
@@ -45995,89 +46332,38 @@
                   args: ['graphChart']
               }] } });
 
-  var BaseGraphReport = /** @class */ (function (_super) {
-      __extends(BaseGraphReport, _super);
-      function BaseGraphReport() {
-          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-          _this._translateService = _this.injector.get(i1.TranslateService);
-          _this._cdr = _this.injector.get(i0.ChangeDetectorRef);
-          _this._dialog = _this.injector.get(i1$4.MatDialog);
-          return _this;
-      }
-      BaseGraphReport.prototype.openGraphDialog = function (_options) {
-          var _a;
-          var _c = _options || {
-              config: this.config,
-              data: this.data,
-              component: GraphDialogComponent
-          }, config = _c.config, data = _c.data, component = _c.component, criteria = _c.criteria;
-          var _b = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.dialog) || {}, active = _b.active, width = _b.width, height = _b.height, maxWidth = _b.maxWidth, options = __rest(_b, ["active", "width", "height", "maxWidth"]);
-          this._dialog.open(component, Object.assign(Object.assign({}, options), { width: width || '100%', height: height || '100%', maxWidth: maxWidth || '100%', direction: this.direction, data: {
-                  config: config,
-                  data: data,
-                  title: config.label,
-                  direction: this.direction,
-                  criteria: criteria
-              } }));
-      };
-      return BaseGraphReport;
-  }(BaseReport));
-  BaseGraphReport.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseGraphReport, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
-  BaseGraphReport.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseGraphReport, usesInheritance: true, ngImport: i0__namespace });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseGraphReport, decorators: [{
-              type: i0.Directive
-          }] });
-
-  var GraphReportComponent = /** @class */ (function (_super) {
-      __extends(GraphReportComponent, _super);
-      function GraphReportComponent() {
-          var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-          _this.chartType$ = _this.config$.pipe(operators.map(function (config) {
-              var _a, _b;
-              if (config.chart.type !== 'bar') {
-                  return config.chart.type;
-              }
-              return ((_b = (_a = config.chart) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.indexAxis) == 'y' ? CHARTS_TYPES.horizontalBar : CHARTS_TYPES.verticalBar;
-          }));
-          return _this;
+  var CustomChartDialogComponent = /** @class */ (function () {
+      function CustomChartDialogComponent(dialogRef, chart) {
+          this.dialogRef = dialogRef;
+          this.chart = chart;
       }
-      GraphReportComponent.prototype.changeChartType = function (type) {
-          var _d;
-          var _a, _b;
-          var _c = this._configSub.getValue(), chart = _c.chart, config = __rest(_c, ["chart"]);
-          var options = chart.options, chartConfig = __rest(chart, ["options"]);
-          if (config.mode !== REPORT_MODE.graph) {
-              return;
-          }
-          var barTypes = (_d = {},
-              _d[CHARTS_TYPES.horizontalBar] = 'bar',
-              _d[CHARTS_TYPES.verticalBar] = 'bar',
-              _d);
-          var chartType = (_a = barTypes[type]) !== null && _a !== void 0 ? _a : type;
-          this._configSub.next(Object.assign(Object.assign({}, config), { chart: Object.assign(Object.assign({}, chartConfig), { type: chartType, options: (_b = chart.overrides) === null || _b === void 0 ? void 0 : _b[type] }) }));
+      CustomChartDialogComponent.prototype.close = function () {
+          this.dialogRef.close();
       };
-      GraphReportComponent.prototype.printChart = function () {
-          if (this.graphChartComponent) {
-              this.graphChartComponent.printChart();
+      CustomChartDialogComponent.prototype.printChart = function () {
+          if (this.customChartComponent) {
+              this.customChartComponent.print();
           }
       };
-      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 } });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GraphReportComponent, decorators: [{
+      return CustomChartDialogComponent;
+  }());
+  CustomChartDialogComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomChartDialogComponent, deps: [{ token: i1__namespace$3.MatDialogRef }, { token: i1$4.MAT_DIALOG_DATA }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  CustomChartDialogComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomChartDialogComponent, selector: "app-custom-chart-dialog", viewQueries: [{ propertyName: "customChartComponent", first: true, predicate: ["customChart"], descendants: true }], ngImport: i0__namespace, template: "<ndf-nuxeo-dialog dialogTitle=\"{{ chart?.title | translate }}\">\r\n\t<ng-template #contentTemplate>\r\n\t\t<app-custom-chart\r\n\t\t\t#customChart\r\n\t\t\tclass=\"ndf-report__content graph-chart\"\r\n\t\t\t[config]=\"config\"\r\n\t\t\t[data]=\"data\"\r\n\t\t\t[criteria]=\"criteria\"\r\n\t\t\t[direction]=\"direction\"\r\n\t\t></app-custom-chart>\r\n\t</ng-template>\r\n\t<ng-template #footerTemplate>\r\n\t\t<div class=\"flex gap-x-4\">\r\n\t\t\t<div class=\"chart-actions flex items-center rounded-lg gap-2 p-1\">\r\n\t\t\t\t<button\r\n\t\t\t\t\tclass=\"print-button chart-actions__item rounded\"\r\n\t\t\t\t\t(click)=\"printChart()\"\r\n\t\t\t\t\t[matTooltip]=\"'REPORTS.print' | translate\"\r\n\t\t\t\t\t*ngIf=\"chart.config?.print\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<mat-icon>print</mat-icon>\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n</ndf-nuxeo-dialog>\r\n", styles: [""], components: [{ type: NdfNuxeoDialog, selector: "ndf-nuxeo-dialog", inputs: ["dialogTitle", "subTitle", "panelClass", "loaderMode"] }, { type: CustomChartComponent, selector: "app-custom-chart" }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], 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: { "translate": i1__namespace.TranslatePipe } });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomChartDialogComponent, decorators: [{
               type: i0.Component,
               args: [{
-                      selector: 'app-graph-report',
-                      templateUrl: './graph-report.component.html',
-                      styleUrls: ['./graph-report.component.scss'],
-                      host: {
-                          class: 'graph-report flex flex-col flex-grow'
-                      }
+                      selector: 'app-custom-chart-dialog',
+                      templateUrl: './custom-chart-dialog.component.html',
+                      styleUrls: ['./custom-chart-dialog.component.scss']
                   }]
-          }], propDecorators: { graphChartComponent: [{
+          }], ctorParameters: function () {
+          return [{ type: i1__namespace$3.MatDialogRef }, { type: undefined, decorators: [{
+                          type: i0.Inject,
+                          args: [i1$4.MAT_DIALOG_DATA]
+                      }] }];
+      }, propDecorators: { customChartComponent: [{
                   type: i0.ViewChild,
-                  args: ['graphChart']
+                  args: ['customChart']
               }] } });
 
   var DynamicTimelineReportComponent = /** @class */ (function (_super) {
@@ -46113,11 +46399,7 @@
           this._timelineService.changeGroup(group);
       };
       DynamicTimelineReportComponent.prototype.openTimelineDialog = function () {
-          this.openGraphDialog({
-              config: this.config,
-              data: this.data,
-              component: TimelineDialogComponent
-          });
+          this.openGraphDialog(TimelineDialogComponent);
       };
       DynamicTimelineReportComponent.prototype.openDetails = function () {
           this.onOpen.emit(this._timelineService.payload);
@@ -46143,110 +46425,30 @@
                   args: ['graphChart']
               }] } });
 
-  var BaseCustomReport = /** @class */ (function (_super) {
-      __extends(BaseCustomReport, _super);
-      function BaseCustomReport(injector) {
-          var _this = _super.call(this) || this;
-          _this.injector = injector;
-          _this._chartHelperService = _this.injector.get(ChartManagerService);
-          _this.direction = 'rtl';
-          _this._criteriaSub = new rxjs.ReplaySubject(null);
-          _this.criteria$ = _this._criteriaSub.asObservable();
-          _this._configSub = new rxjs.BehaviorSubject(null);
-          _this.config$ = _this._configSub.asObservable();
-          return _this;
-      }
-      Object.defineProperty(BaseCustomReport.prototype, "criteria", {
-          set: function (value) {
-              this._criteria = ___default["default"].cloneDeep(value);
-              this._criteriaSub.next(this._criteria);
-          },
-          enumerable: false,
-          configurable: true
-      });
-      Object.defineProperty(BaseCustomReport.prototype, "config", {
-          get: function () {
-              return this._configSub.getValue();
-          },
-          set: function (obj) {
-              if (obj) {
-                  this._configSub.next(obj);
-              }
-          },
-          enumerable: false,
-          configurable: true
-      });
-      BaseCustomReport.prototype.chartReady = function (chart) {
-          var _this = this;
-          this.chart = chart;
-          this._chartHelperService.setChart(chart);
-          this._printListener = function (event) {
-              _this.chart.resize();
-          };
-          window.addEventListener('beforeprint', this._printListener);
-          queueMicrotask(function () {
-              _this.chart.resize();
-          });
-      };
-      return BaseCustomReport;
-  }(DestroySubject));
-  BaseCustomReport.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseCustomReport, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-  BaseCustomReport.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: BaseCustomReport, inputs: { direction: "direction", data: "data", criteria: "criteria", config: "config" }, usesInheritance: true, ngImport: i0__namespace });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseCustomReport, decorators: [{
-              type: i0.Directive
-          }], ctorParameters: function () { return [{ type: i0__namespace.Injector }]; }, propDecorators: { direction: [{
-                  type: i0.Input
-              }], data: [{
-                  type: i0.Input
-              }], criteria: [{
-                  type: i0.Input
-              }], config: [{
-                  type: i0.Input
-              }] } });
-
   var CustomReportComponent = /** @class */ (function (_super) {
       __extends(CustomReportComponent, _super);
       function CustomReportComponent() {
           var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-          _this._registeredComponents = _this.injector.get(CustomReportsRegistry);
+          _this._dialog = _this.injector.get(ReportsDialogService);
           return _this;
       }
-      CustomReportComponent.prototype.ngOnInit = function () {
-          var _a, _b;
-          var componentType = this._registeredComponents.getComponent((_a = this.config) === null || _a === void 0 ? void 0 : _a.type);
-          if (!componentType) {
-              console.warn("No component registered for type: " + ((_b = this.config) === null || _b === void 0 ? void 0 : _b.type));
-              return;
+      CustomReportComponent.prototype.printChart = function () {
+          if (this.customChartComponent) {
+              this.customChartComponent.print();
           }
-          this._componentRef = this._registeredComponents.renderComponent(componentType.type, this.container);
-          this._prepareComponent();
       };
-      CustomReportComponent.prototype.ngOnChanges = function (changes) {
-          var _this = this;
-          if (!this._componentRef) {
-              return;
-          }
-          Object.keys(changes).forEach(function (key) {
-              _this._componentRef.instance[key] = changes[key].currentValue;
+      CustomReportComponent.prototype.openDialog = function () {
+          this._dialog.open(CustomChartDialogComponent, {
+              config: this.config,
+              data: this.data,
+              criteria: this.criteria,
+              direction: this.direction
           });
-          this._componentRef.changeDetectorRef.markForCheck();
-      };
-      CustomReportComponent.prototype.ngOnDestroy = function () {
-          if (this._componentRef) {
-              this._componentRef.destroy();
-          }
-      };
-      CustomReportComponent.prototype._prepareComponent = function () {
-          var instance = this._componentRef.instance;
-          instance.config = this.config;
-          instance.criteria = this.criteria;
-          instance.data = this.data;
-          instance.direction = this.direction;
       };
       return CustomReportComponent;
   }(BaseReport));
   CustomReportComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomReportComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  CustomReportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomReportComponent, selector: "app-custom-report", host: { classAttribute: "custom-report flex flex-col flex-grow" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["dynamicContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: 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      *ngIf=\"config?.dialog?.active\"\r\n      class=\"dialog-button print:hidden\"\r\n      (click)=\"openGraphDialog()\"\r\n      [matTooltip]=\"'REPORTS.fullscreen' | translate\"\r\n    >\r\n      <mat-icon>fullscreen</mat-icon>\r\n    </button>-->\r\n\t</chart-panel-header>\r\n\r\n\t<ng-container #dynamicContainer></ng-container>\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\t</chart-panel-footer>\r\n</chart-panel>\r\n", styles: [""], components: [{ type: ChartPanel, selector: "chart-panel" }, { type: ChartPanelHeaderComponent, selector: "chart-panel-header" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: ReportActionsComponent, selector: "app-report-actions", inputs: ["config"], outputs: ["navigate", "open", "print"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe } });
+  CustomReportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomReportComponent, selector: "app-custom-report", host: { classAttribute: "custom-report flex flex-col flex-grow" }, viewQueries: [{ propertyName: "customChartComponent", first: true, predicate: ["customChart"], 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)=\"openDialog()\"\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-custom-chart\r\n\t\t#customChart\r\n\t\tclass=\"ndf-report__content graph-chart\"\r\n\t\t[config]=\"config\"\r\n\t\t[data]=\"data\"\r\n\t\t[criteria]=\"criteria\"\r\n\t\t[direction]=\"direction\"\r\n\t></app-custom-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\t</chart-panel-footer>\r\n</chart-panel>\r\n", styles: [""], 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: CustomChartComponent, selector: "app-custom-chart" }, { type: ChartPanelFooterComponent, selector: "chart-panel-footer" }, { type: ReportActionsComponent, selector: "app-report-actions", inputs: ["config"], outputs: ["navigate", "open", "print"] }], 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: CustomReportComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -46257,9 +46459,9 @@
                           class: 'custom-report flex flex-col flex-grow'
                       }
                   }]
-          }], propDecorators: { container: [{
+          }], propDecorators: { customChartComponent: [{
                   type: i0.ViewChild,
-                  args: ['dynamicContainer', { read: i0.ViewContainerRef, static: true }]
+                  args: ['customChart']
               }] } });
 
   function mapToNdfTableConfig(report, details) {
@@ -46319,7 +46521,7 @@
       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 });
-  NdfReportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfReportComponent, selector: "app-ndf-report", inputs: { config: "config", direction: "direction", data: "data", criteria: "criteria" }, outputs: { onNavigate: "onNavigate", onOpen: "onOpen" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"config\">\r\n\t<ng-container [ngSwitch]=\"config.mode\">\r\n\t\t<app-graph-report\r\n\t\t\t*ngSwitchCase=\"reportModes.graph\"\r\n\t\t\t[definition]=\"config\"\r\n\t\t\t[data]=\"data\"\r\n      [criteria]=\"criteria\"\r\n\t\t\t[direction]=\"direction\"\r\n\t\t\t(onNavigate)=\"onNavigate.emit($event)\"\r\n\t\t\t(onOpen)=\"onOpen.emit($event)\"\r\n\t\t></app-graph-report>\r\n\t\t<app-dynamic-timeline-report\r\n\t\t\t*ngSwitchCase=\"reportModes.dynamicLine\"\r\n\t\t\t[definition]=\"config\"\r\n\t\t\t[data]=\"data\"\r\n      [criteria]=\"criteria\"\r\n\t\t\t[direction]=\"direction\"\r\n      (onOpen)=\"onOpen.emit($event)\"\r\n\t\t></app-dynamic-timeline-report>\r\n\t\t<app-digit-report\r\n\t\t\t*ngSwitchCase=\"reportModes.digit\"\r\n\t\t\t[definition]=\"config\"\r\n\t\t\t[data]=\"data\"\r\n      [criteria]=\"criteria\"\r\n\t\t\t[direction]=\"direction\"\r\n      (onOpen)=\"onOpen.emit($event)\"\r\n\t\t></app-digit-report>\r\n\t</ng-container>\r\n</ng-container>\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}}\n"], components: [{ type: GraphReportComponent, selector: "app-graph-report" }, { type: DynamicTimelineReportComponent, selector: "app-dynamic-timeline-report" }, { type: DigitReportComponent, selector: "app-digit-report" }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+  NdfReportComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfReportComponent, selector: "app-ndf-report", inputs: { config: "config", direction: "direction", data: "data", criteria: "criteria" }, outputs: { onNavigate: "onNavigate", onOpen: "onOpen" }, usesInheritance: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"config\">\r\n\t<ng-container [ngSwitch]=\"config.mode\">\r\n\r\n\t\t<app-graph-report\r\n\t\t\t*ngSwitchCase=\"reportModes.graph\"\r\n\t\t\t[definition]=\"config\"\r\n\t\t\t[data]=\"data\"\r\n\t\t\t[criteria]=\"criteria\"\r\n\t\t\t[direction]=\"direction\"\r\n\t\t\t(onNavigate)=\"onNavigate.emit($event)\"\r\n\t\t\t(onOpen)=\"onOpen.emit($event)\"\r\n\t\t></app-graph-report>\r\n\r\n\t\t<app-dynamic-timeline-report\r\n\t\t\t*ngSwitchCase=\"reportModes.dynamicLine\"\r\n\t\t\t[definition]=\"config\"\r\n\t\t\t[data]=\"data\"\r\n\t\t\t[criteria]=\"criteria\"\r\n\t\t\t[direction]=\"direction\"\r\n\t\t\t(onOpen)=\"onOpen.emit($event)\"\r\n\t\t></app-dynamic-timeline-report>\r\n\r\n\t\t<app-digit-report\r\n\t\t\t*ngSwitchCase=\"reportModes.digit\"\r\n\t\t\t[definition]=\"config\"\r\n\t\t\t[data]=\"data\"\r\n\t\t\t[criteria]=\"criteria\"\r\n\t\t\t[direction]=\"direction\"\r\n\t\t\t(onOpen)=\"onOpen.emit($event)\"\r\n\t\t></app-digit-report>\r\n\r\n\t\t<app-custom-report\r\n\t\t\t*ngSwitchCase=\"reportModes.custom\"\r\n\t\t\t[definition]=\"config\"\r\n\t\t\t[data]=\"data\"\r\n\t\t\t[criteria]=\"criteria\"\r\n\t\t\t[direction]=\"direction\"\r\n\t\t\t(onOpen)=\"onOpen.emit($event)\"\r\n\t\t>\r\n\t\t</app-custom-report>\r\n\t</ng-container>\r\n</ng-container>\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}}\n"], components: [{ type: GraphReportComponent, selector: "app-graph-report" }, { type: DynamicTimelineReportComponent, selector: "app-dynamic-timeline-report" }, { type: DigitReportComponent, selector: "app-digit-report" }, { type: CustomReportComponent, selector: "app-custom-report" }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfReportComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -46626,7 +46828,7 @@
       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{background:#f5f5f5;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.ɵ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] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfReportsComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -46678,7 +46880,7 @@
           DynamicTimelineReportComponent,
           TimeGroupSelectorComponent,
           GraphDialogComponent,
-          TimelineDialogComponent, ScrollableDivDirective, GraphChartComponent, DigitChartComponent, ReportActionsComponent, CustomReportComponent], imports: [i4.CommonModule,
+          TimelineDialogComponent, ScrollableDivDirective, GraphChartComponent, DigitChartComponent, ReportActionsComponent, CustomReportComponent, CustomChartComponent, CustomChartDialogComponent], imports: [i4.CommonModule,
           i1.TranslateModule,
           i3$2.MatMenuModule,
           i2$2.MatIconModule,
@@ -46723,7 +46925,7 @@
   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],
+                      declarations: [CONTAINERS, COMPONENTS, DIRECTIVES, CHARTS, ReportActionsComponent, CustomReportComponent, CustomChartComponent, CustomChartDialogComponent],
                       imports: [
                           i4.CommonModule,
                           i1.TranslateModule,
@@ -48866,6 +49068,7 @@
   exports.BaseChartComponent = BaseChartComponent;
   exports.BaseColumnComponent = BaseColumnComponent;
   exports.BaseComponent = BaseComponent;
+  exports.BaseCustomReport = BaseCustomReport;
   exports.BaseDatePicker = BaseDatePicker;
   exports.BaseDateValueAccessor = BaseDateValueAccessor;
   exports.BaseDialogComponent = BaseDialogComponent;