nuxeo-development-framework 5.4.9 → 5.5.1

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

@@ -4005,6 +4005,74 @@
               args: [{ providedIn: 'root' }]
           }], ctorParameters: function () { return [{ type: i0__namespace.Injector }]; } });
 
+  var BaseEditorConfigService = /** @class */ (function (_super) {
+      __extends(BaseEditorConfigService, _super);
+      function BaseEditorConfigService(injector) {
+          var _this = _super.call(this, injector) || this;
+          _this.injector = injector;
+          _this.appConfigService = _this.injector.get(AppConfigService);
+          return _this;
+      }
+      BaseEditorConfigService.prototype.fetchData = function (_b) {
+          var _this = this;
+          var key = _b.key, type = _b.type, app = _b.app, localPath = _b.localPath;
+          return this.request({
+              type: 'get',
+              endpoint: "/search/pp/PP_NDF_UI_Configurations/execute",
+              queryParams: Object.assign({ ndfuiconfig_type: type, ndfuiconfig_key: key }, (app ? { ndfuiconfig_app: app } : {})),
+              headers: {
+                  properties: 'ndfuiconfig,note'
+              }
+          }).pipe(operators.map(function (response) { var _a; return (_a = response.entries) === null || _a === void 0 ? void 0 : _a[0]; }), operators.switchMap(function (entry) {
+              var _a;
+              var content = _this._parseData((_a = entry === null || entry === void 0 ? void 0 : entry.properties) === null || _a === void 0 ? void 0 : _a['note:note']);
+              if (content) {
+                  return rxjs.of({
+                      submitted: true,
+                      uid: entry.uid,
+                      data: {
+                          key: key,
+                          type: type,
+                          app: entry.properties['ndfuiconfig:app'],
+                          config: content
+                      }
+                  });
+              }
+              var config = _this.appConfigService.myConfiguration || {};
+              var base = localPath ? ___default["default"].get(config, localPath) : config;
+              var data = _.cloneDeep(___default["default"].get(base, key));
+              return rxjs.of({
+                  submitted: false,
+                  data: {
+                      key: key,
+                      type: type,
+                      app: app,
+                      config: data
+                  }
+              });
+          }));
+      };
+      BaseEditorConfigService.prototype._parseData = function (data) {
+          if (!data) {
+              return null;
+          }
+          try {
+              return JSON.parse(data);
+          }
+          catch (error) {
+              console.warn('Error parsing data:', error);
+              return null;
+          }
+      };
+      return BaseEditorConfigService;
+  }(BaseService));
+  BaseEditorConfigService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseEditorConfigService, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  BaseEditorConfigService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseEditorConfigService, providedIn: 'root' });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BaseEditorConfigService, decorators: [{
+              type: i0.Injectable,
+              args: [{ providedIn: 'root' }]
+          }], ctorParameters: function () { return [{ type: i0__namespace.Injector }]; } });
+
   /**
    * Transforms URL into async safe URL to be rendered in the view
    *
@@ -21459,13 +21527,13 @@
   };
 
   var NDF_EDITOR_TYPE = {
-      REPORTS: 'reports',
-      TABLES: 'tables'
+      REPORTS: 'report',
+      TABLES: 'table'
   };
 
   var PARAMS_KEYS = {
       TYPE: 'type',
-      KEY: 'key'
+      KEY: 'key',
   };
 
   var DynamicTableService = /** @class */ (function () {
@@ -22234,18 +22302,27 @@
       function NdfTableConfigurationService(injector) {
           var _this = _super.call(this, injector) || this;
           _this.injector = injector;
-          _this.appConfigService = _this.injector.get(AppConfigService);
-          _this.configurationsUrl = 'assets/configs/configuration.json';
           return _this;
       }
-      NdfTableConfigurationService.prototype.getTableConfiguration = function (key, path) {
-          return rxjs.of(this.appConfigService.myConfiguration).pipe(operators.map(function (config) {
-              var base = path ? ___default["default"].get(config, path) : config;
-              return _.cloneDeep(___default["default"].get(base, key));
+      NdfTableConfigurationService.prototype.getTableConfiguration = function (key, localPath) {
+          var _a;
+          return this.fetchData({
+              key: key,
+              type: 'table',
+              app: (_a = this.environment) === null || _a === void 0 ? void 0 : _a.appKey,
+              localPath: localPath
+          }).pipe(operators.map(function (res) {
+              var _a;
+              if (!res.submitted) {
+                  console.warn('%c  \n--------------------------------------------------\n' +
+                      'Unsaved table configuration detected. Open the config editor to save it' +
+                      '\n--------------------------------------------------\n', 'font-size: 14px;');
+              }
+              return (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.config;
           }));
       };
       return NdfTableConfigurationService;
-  }(HttpBaseService));
+  }(BaseEditorConfigService));
   NdfTableConfigurationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfTableConfigurationService, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
   NdfTableConfigurationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfTableConfigurationService, providedIn: 'root' });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfTableConfigurationService, decorators: [{
@@ -22266,9 +22343,17 @@
           this.editorConfig = (_a = this.configService.myConfiguration) === null || _a === void 0 ? void 0 : _a.configEditor;
           this.isFeatureEnabled = environment.configEditor === 'YES';
       }
+      Object.defineProperty(EditorButtonComponent.prototype, "isEnabled", {
+          get: function () {
+              var _a, _b, _c, _d;
+              return ((_a = this.editorConfig) === null || _a === void 0 ? void 0 : _a.enabled) && ((_d = (_c = (_b = this.editorConfig) === null || _b === void 0 ? void 0 : _b.types) === null || _c === void 0 ? void 0 : _c[this.type]) === null || _d === void 0 ? void 0 : _d.enabled);
+          },
+          enumerable: false,
+          configurable: true
+      });
       EditorButtonComponent.prototype.ngOnInit = function () { };
       EditorButtonComponent.prototype.navigate = function () {
-          var _b;
+          var _e;
           var _a;
           var config = (_a = this.editorConfig) === null || _a === void 0 ? void 0 : _a.types[this.type];
           if (!config || !this.key || !this.type) {
@@ -22280,21 +22365,21 @@
           }
           var url = "" + (this.baseAppUrl || '') + navigateUrl;
           this.router.navigate([url], {
-              queryParams: (_b = {},
-                  _b[PARAMS_KEYS.TYPE] = this.type,
-                  _b[PARAMS_KEYS.KEY] = this.key,
-                  _b)
+              queryParams: (_e = {},
+                  _e[PARAMS_KEYS.TYPE] = this.type,
+                  _e[PARAMS_KEYS.KEY] = this.key,
+                  _e)
           });
       };
       return EditorButtonComponent;
   }());
   EditorButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: EditorButtonComponent, deps: [{ token: 'environment' }, { token: i1__namespace$5.Router }, { token: PROJECT_BASE_HREF }, { token: AppConfigService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  EditorButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorButtonComponent, selector: "app-editor-button", inputs: { type: "type", key: "key" }, ngImport: i0__namespace, template: "\n\t\t<ng-container *ngIf=\"isFeatureEnabled && editorConfig?.enabled && editorConfig?.types?.tables?.enabled\">\n\t\t\t<button\n\t\t\t\tmat-stroked-button\n\t\t\t\t[matTooltip]=\"'JSON_EDITOR.navigateToEditor' | translate\"\n\t\t\t\t(click)=\"navigate()\"\n\t\t\t\t*permission=\"{ name: item?.permission }\"\n\t\t\t>\n\t\t\t\t<mat-icon>edit</mat-icon>\n\t\t\t</button>\n\t\t</ng-container>\n\t", isInline: true, components: [{ 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"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: i7__namespace.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltipPosition", "matTooltipDisabled", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  EditorButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EditorButtonComponent, selector: "app-editor-button", inputs: { type: "type", key: "key" }, ngImport: i0__namespace, template: "\n\t\t<ng-container *ngIf=\"isFeatureEnabled && isEnabled\">\n\t\t\t<button\n\t\t\t\tmat-stroked-button\n\t\t\t\t[matTooltip]=\"'JSON_EDITOR.navigateToEditor' | translate\"\n\t\t\t\t(click)=\"navigate()\"\n\t\t\t\t*permission=\"{ name: item?.permission }\"\n\t\t\t>\n\t\t\t\t<mat-icon>edit</mat-icon>\n\t\t\t</button>\n\t\t</ng-container>\n\t", isInline: true, components: [{ 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"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { 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: EditorButtonComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: 'app-editor-button',
-                      template: "\n\t\t<ng-container *ngIf=\"isFeatureEnabled && editorConfig?.enabled && editorConfig?.types?.tables?.enabled\">\n\t\t\t<button\n\t\t\t\tmat-stroked-button\n\t\t\t\t[matTooltip]=\"'JSON_EDITOR.navigateToEditor' | translate\"\n\t\t\t\t(click)=\"navigate()\"\n\t\t\t\t*permission=\"{ name: item?.permission }\"\n\t\t\t>\n\t\t\t\t<mat-icon>edit</mat-icon>\n\t\t\t</button>\n\t\t</ng-container>\n\t"
+                      template: "\n\t\t<ng-container *ngIf=\"isFeatureEnabled && isEnabled\">\n\t\t\t<button\n\t\t\t\tmat-stroked-button\n\t\t\t\t[matTooltip]=\"'JSON_EDITOR.navigateToEditor' | translate\"\n\t\t\t\t(click)=\"navigate()\"\n\t\t\t\t*permission=\"{ name: item?.permission }\"\n\t\t\t>\n\t\t\t\t<mat-icon>edit</mat-icon>\n\t\t\t</button>\n\t\t</ng-container>\n\t"
                   }]
           }], ctorParameters: function () {
           return [{ type: undefined, decorators: [{
@@ -43376,6 +43461,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 +43625,7 @@
     createTint: createTint,
     createShade: createShade,
     createColorVariants: createColorVariants,
+    createConicGradient: createConicGradient,
     flatArray: flatArray,
     isObject: isObject,
     getCssVariable: getCssVariable,
@@ -44003,147 +44101,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 +44324,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 +44547,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 +44559,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 +44576,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 +44595,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 +44612,9 @@
                               display: true,
                               rtl: currentLang == 'ar',
                               position: currentLang == 'ar' ? 'right' : 'left'
-                          } }) }),
-                  plugins: [
+                          } })
+                  }, options),
+                  plugins: ___default["default"].merge([], [
                       chartDataLabels,
                       {
                           id: 'canvasBackgroundColor',
@@ -44468,7 +44639,7 @@
                               });
                           }
                       }
-                  ]
+                  ], plugins)
               });
               hiddenChart.render();
           });
@@ -44495,7 +44666,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 +45714,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 +45789,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 +46211,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 +46417,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 +46484,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 +46510,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 +46544,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 +46606,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 +46913,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 +46965,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 +47010,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,
@@ -46750,1355 +47037,35 @@
                   }]
           }] });
 
-  var TABLE_DATA = {
-      options: {
-          columns: {
-              toggle: true,
-              sortable: {
-                  enabled: true,
-              },
-          },
-          filters: {
-              mode: 'payload',
-              reload: {
-                  strategy: 'always',
-              },
-              panel: {
-                  visible: true,
-                  toggleButton: true,
-              },
-              fields: [
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'rmAdvancedSearch.recDefintionSystemName',
-                          aggregation: 'RecordDefinition_systemName_agg',
-                          fieldKey: 'recdef:systemName',
-                          dataTransformer: 'system',
-                          order: 0,
-                          sendMode: 'queryParam',
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'rmAdvancedSearch.gdocCategoryHierarchyCode',
-                          aggregation: 'generaldocument_categoryHierarchyCode_agg',
-                          fieldKey: 'gdoc:categoryHierarchyCode',
-                          dataTransformer: 'subject',
-                          order: 0,
-                          sendMode: 'queryParam',
-                          valueType: 'property',
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'rmAdvancedSearch.gdocCategoryHierarchyCode1',
-                          aggregation: 'generaldocument_categoryHierarchyCode_1_agg',
-                          fieldKey: 'gdoc:categoryHierarchyCode__1',
-                          order: 0,
-                          sendMode: 'queryParam',
-                          valueType: 'property',
-                          dataTransformer: 'subject',
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                                  collapse: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'rmAdvancedSearch.gdocDocumentTypeCode',
-                          aggregation: 'generaldocument_documentTypeCode_agg',
-                          fieldKey: 'gdoc:documentTypeCode',
-                          dataTransformer: 'documentTypee',
-                          sendMode: 'queryParam',
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                                  filter: true,
-                                  sort: true,
-                                  collapse: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'predicate',
-                      config: {
-                          label: 'FILTERS.gdocDocumentSubject',
-                          fieldKey: 'gdoc:documentSubject',
-                          sendMode: 'payload',
-                          valueType: 'valueObject',
-                          render: {
-                              type: 'input',
-                              options: {
-                                  delay: 300,
-                                  suffix: {
-                                      dropdown: {
-                                          items: [
-                                              {
-                                                  key: 'OPERATORS.equals',
-                                                  value: '=',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.notEquals',
-                                                  value: '!=',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.like',
-                                                  value: 'LIKE',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.iLike',
-                                                  value: 'ILIKE',
-                                              },
-                                          ],
-                                      },
-                                  },
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'predicate',
-                      config: {
-                          label: 'FILTERS.dcTitle',
-                          fieldKey: 'dc:title',
-                          sendMode: 'payload',
-                          valueType: 'valueObject',
-                          render: {
-                              type: 'input',
-                              options: {
-                                  delay: 300,
-                                  suffix: {
-                                      dropdown: {
-                                          items: [
-                                              {
-                                                  key: 'OPERATORS.equals',
-                                                  value: '=',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.notEquals',
-                                                  value: '!=',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.like',
-                                                  value: 'LIKE',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.iLike',
-                                                  value: 'ILIKE',
-                                              },
-                                          ],
-                                      },
-                                  },
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'predicate',
-                      config: {
-                          label: 'FILTERS.documentNumber',
-                          fieldKey: 'gdoc:documentReferenceNumber',
-                          sendMode: 'payload',
-                          valueType: 'valueObject',
-                          render: {
-                              type: 'input',
-                              options: {
-                                  debounceTime: 300,
-                                  suffix: {
-                                      dropdown: {
-                                          items: [
-                                              {
-                                                  key: 'OPERATORS.equals',
-                                                  value: '=',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.notEquals',
-                                                  value: '!=',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.like',
-                                                  value: 'LIKE',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.iLike',
-                                                  value: 'ILIKE',
-                                              },
-                                          ],
-                                      },
-                                  },
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'predicate',
-                      config: {
-                          label: 'FILTERS.recUnifiedNumber',
-                          fieldKey: 'recdef:unifiedNumber',
-                          sendMode: 'payload',
-                          valueType: 'valueObject',
-                          render: {
-                              type: 'input',
-                              options: {
-                                  delay: 300,
-                                  suffix: {
-                                      dropdown: {
-                                          items: [
-                                              {
-                                                  key: 'OPERATORS.equals',
-                                                  value: '=',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.notEquals',
-                                                  value: '!=',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.like',
-                                                  value: 'LIKE',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.iLike',
-                                                  value: 'ILIKE',
-                                              },
-                                          ],
-                                      },
-                                  },
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'FILTERS.recPhysicalOriginal',
-                          aggregation: 'RecordDefinition_physicalOriginal_agg',
-                          fieldKey: 'recdef:physicalOriginal',
-                          prefix: 'FILTERS.BUCKETS.physicalOriginal.',
-                          sendMode: 'queryParam',
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'rmAdvancedSearch.gdocSecrecyLevel',
-                          aggregation: 'generaldocument_secrecyLevel_agg',
-                          fieldKey: 'gdoc:secrecyLevel',
-                          prefix: 'search.buckets.',
-                          sendMode: 'queryParam',
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'predicate',
-                      config: {
-                          label: 'FILTERS.tags',
-                          fieldKey: 'ecm:tag',
-                          sendMode: 'payload',
-                          valueType: 'valueObject',
-                          render: {
-                              type: 'input',
-                              options: {
-                                  delay: 300,
-                                  suffix: {
-                                      dropdown: {
-                                          items: [
-                                              {
-                                                  key: 'OPERATORS.equals',
-                                                  value: '=',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.notEquals',
-                                                  value: '!=',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.like',
-                                                  value: 'LIKE',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.iLike',
-                                                  value: 'ILIKE',
-                                              },
-                                          ],
-                                      },
-                                  },
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'FILTERS.priority',
-                          aggregation: 'generaldocument_importance_agg',
-                          fieldKey: 'gdoc:importance',
-                          prefix: 'search.buckets.',
-                          sendMode: 'queryParam',
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'FILTERS.dcCreated',
-                          aggregation: 'dublincore_created_agg',
-                          fieldKey: 'dc:created',
-                          prefix: 'search.buckets.',
-                          sendMode: 'queryParam',
-                          tooltip: {
-                              type: 'date',
-                              properties: {
-                                  from: 'from',
-                                  to: 'to',
-                              },
-                          },
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'rmAdvancedSearch.gdocGDocumentDate',
-                          aggregation: 'generaldocument_gDocumentDate_agg',
-                          fieldKey: 'gdoc:gDocumentDate',
-                          prefix: 'search.buckets.',
-                          sendMode: 'custom',
-                          valueType: 'valueObject',
-                          render: {
-                              type: 'dateList',
-                              view: 'list',
-                              options: {
-                                  showTotal: true,
-                                  minMax: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'rmAdvancedSearch.saveTypee',
-                          aggregation: 'RetentionInfo_saveTypee_agg',
-                          fieldKey: 'retentioninfo:saveTypee',
-                          prefix: 'FILTERS.BUCKETS.physicalOriginal.',
-                          sendMode: 'queryParam',
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'rmAdvancedSearch.retentionPlan',
-                          aggregation: 'RetentionInfo_status_agg',
-                          fieldKey: 'retentioninfo:status',
-                          prefix: 'FILTERS.BUCKETS.physicalOriginal.',
-                          sendMode: 'queryParam',
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'FILTERS.startDateActiveRetention',
-                          aggregation: 'RetentionInfo_activeRetentionStartDateHijri_agg',
-                          fieldKey: 'retentioninfo:activeRetentionStartDateHijri',
-                          prefix: 'search.buckets.',
-                          sendMode: 'queryParam',
-                          permission: 'hasRoleOnArchiveOrLoan',
-                          tooltip: {
-                              type: 'date',
-                              properties: {
-                                  from: 'from',
-                                  to: 'to',
-                              },
-                          },
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'FILTERS.endDateActiveRetention',
-                          aggregation: 'RetentionInfo_activeRetentionEndDateHijri_agg',
-                          fieldKey: 'retentioninfo:activeRetentionEndDateHijri',
-                          prefix: 'search.buckets.',
-                          sendMode: 'queryParam',
-                          permission: 'hasRoleOnArchiveOrLoan',
-                          tooltip: {
-                              type: 'date',
-                              properties: {
-                                  from: 'from',
-                                  to: 'to',
-                              },
-                          },
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'FILTERS.endDateRetention',
-                          aggregation: 'RetentionInfo_retentionEndDateHijri_agg',
-                          fieldKey: 'retentioninfo:retentionEndDateHijri',
-                          prefix: 'search.buckets.',
-                          sendMode: 'queryParam',
-                          permission: 'hasRoleOnArchiveOrLoan',
-                          tooltip: {
-                              type: 'date',
-                              properties: {
-                                  from: 'from',
-                                  to: 'to',
-                              },
-                          },
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'rmAdvancedSearch.locationReference_site_agg',
-                          aggregation: 'LocationReferenceSchema_site_agg',
-                          permission: 'hasRoleOnArchiveOrLoan',
-                          fieldKey: 'locRef:site',
-                          order: 0,
-                          sendMode: 'queryParam',
-                          valueType: 'property',
-                          dataTransformer: 'site',
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'aggregation',
-                      config: {
-                          label: 'rmAdvancedSearch.locationReference_store_agg',
-                          aggregation: 'LocationReferenceSchema_store_agg',
-                          fieldKey: 'locRef:store',
-                          permission: 'hasRoleOnArchiveOrLoan',
-                          order: 0,
-                          sendMode: 'queryParam',
-                          valueType: 'property',
-                          dataTransformer: 'store',
-                          render: {
-                              type: 'checkbox',
-                              options: {
-                                  showTotal: true,
-                              },
-                          },
-                      },
-                  },
-                  {
-                      type: 'predicate',
-                      config: {
-                          label: 'rmAdvancedSearch.locationReference_box',
-                          fieldKey: 'locRef:boxCode',
-                          permission: 'hasRoleOnArchiveOrLoan',
-                          sendMode: 'payload',
-                          valueType: 'valueObject',
-                          render: {
-                              type: 'input',
-                              options: {
-                                  debounceTime: 400,
-                                  mask: {
-                                      mask: '00-00-00-00-000',
-                                      dropSpecialCharacters: false,
-                                      showMaskTyped: true,
-                                  },
-                                  suffix: {
-                                      dropdown: {
-                                          items: [
-                                              {
-                                                  key: 'OPERATORS.equals',
-                                                  value: '=',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.notEquals',
-                                                  value: '!=',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.like',
-                                                  value: 'LIKE',
-                                              },
-                                              {
-                                                  key: 'OPERATORS.iLike',
-                                                  value: 'ILIKE',
-                                              },
-                                          ],
-                                      },
-                                  },
-                              },
-                          },
-                      },
-                  },
-              ],
-          },
-          search: {
-              fieldKey: 'ecm:fulltext',
-              searchMode: 'triggered',
-              suffix: {
-                  dialog: {
-                      title: 'INFO.dialogTitle',
-                      content: [
-                          '##INFO.query_sequence##',
-                          '##INFO.query_and##',
-                          '##INFO.query_negation##',
-                          '##INFO.query_prefix##',
-                          '##INFO.query_historical##',
-                          '##INFO.query_or##',
-                          '##INFO.query_phrase##',
-                      ],
-                  },
-              },
-          },
-          tableMode: {
-              mode: 'list',
-              componentName: 'rms.components.advancedSearchCard',
-              toggleMode: true,
-              availableMode: [
-                  {
-                      value: 'list',
-                      icon: 'table_rows',
-                  },
-                  {
-                      value: 'custom',
-                      icon: 'rectangle',
-                  },
-              ],
-          },
-      },
-      scrollbarH: true,
-      pageNumber: 1,
-      pageSize: 10,
-      prefix: 'LISTING.',
-      pageProvider: 'PP_RM_Record',
-      customUrl: {
-          url: '/api/v1/custom-search/pp/PP_RM_Record/execute',
-          method: 'POST',
-      },
-      headers: {
-          properties: 'dublincore, file, generaldocument, RecordDefinition,RetentionInfo, LocationReferenceSchema, facetedTag',
-      },
-      quickFilters: 'After Archiving',
-      fullWidth: 'auto',
-      fields: {
-          systemName: 'recdef:systemName',
-          categoryHierarchyCode: 'gdoc:categoryHierarchyCode',
-          docTypee: 'gdoc:documentTypeCode',
-          subject: 'gdoc:documentSubject',
-          title: 'dc:title',
-          docNum: 'gdoc:documentReferenceNumber',
-          unifiedNumber: 'recdef:unifiedNumber',
-          physicalOriginal: 'recdef:physicalOriginal',
-          secrecyLevel: 'gdoc:secrecyLevel',
-          tags: 'ecm:tag',
-          importance: 'gdoc:importance',
-          created: 'dc:created',
-          gdocumentDate: 'gdoc:gDocumentDate',
-          saveTypee: 'retentioninfo:saveTypee',
-          retentioninfoStatus: 'retentioninfo:status',
-          activeRetentionStartDateHijri: 'retentioninfo:activeRetentionStartDateHijri',
-          activeRetentionEndDateHijri: 'retentioninfo:activeRetentionEndDateHijri',
-          retentionEndDateHijri: 'retentioninfo:retentionEndDateHijri',
-          site: 'locRef:site',
-          store: 'locRef:store',
-          box: 'locRef:boxCode',
-          file: 'file:content',
-      },
-      columns: [
-          {
-              name: 'systemName',
-              prop: 'properties.systemName',
-              display: true,
-              type: 'custom',
-              template: 'common.components.systemName',
-              translatePrefix: 'search.buckets',
-              isOrginalKey: true,
-              sortable: false,
-              headerClass: 'recdef:systemName',
-              defaultVisible: true,
-              minWidth: 150,
-          },
-          {
-              name: 'categoryHierarchyCode',
-              prop: 'properties.categoryHierarchyCode',
-              display: true,
-              type: 'custom',
-              template: 'rms.components.mainAndSecondaryCategory',
-              mainCategory: true,
-              sortable: true,
-              headerClass: 'gdoc:categoryHierarchyCode',
-              defaultVisible: true,
-          },
-          {
-              name: 'categoryHierarchyCode1',
-              prop: 'properties.categoryHierarchyCode',
-              display: true,
-              type: 'custom',
-              template: 'rms.components.mainAndSecondaryCategory',
-              mainCategory: false,
-              sortable: true,
-              headerClass: 'gdoc:categoryHierarchyCode',
-              defaultVisible: true,
-          },
-          {
-              name: 'Doc_Type',
-              prop: 'properties.docTypee',
-              display: true,
-              template: 'common.components.documentType',
-              type: 'custom',
-              headerClass: 'gdoc:documentTypeCode',
-              defaultVisible: true,
-          },
-          {
-              name: 'Doc_subject',
-              prop: 'properties.subject',
-              display: true,
-              type: 'text',
-              headerClass: 'gdoc:documentSubject',
-              defaultVisible: true,
-          },
-          {
-              name: 'Doc_Name',
-              prop: 'properties.title',
-              display: true,
-              type: 'custom',
-              template: 'common.components.titleWithIcon',
-              sortable: true,
-              headerClass: 'dc:title',
-              defaultVisible: false,
-          },
-          {
-              name: 'Doc_RefernceNum',
-              prop: 'properties.docNum',
-              display: true,
-              type: 'text',
-              sortable: true,
-              headerClass: 'gdoc:documentReferenceNumber',
-              defaultVisible: true,
-          },
-          {
-              name: 'unifiedNumber',
-              prop: 'properties.unifiedNumber',
-              display: true,
-              type: 'text',
-              sortable: true,
-              headerClass: 'recdef:unifiedNumber',
-              defaultVisible: true,
-          },
-          {
-              name: 'physicalOriginal',
-              prop: 'properties.physicalOriginal',
-              display: true,
-              type: 'custom',
-              template: 'rms.components.TranslatedValueColumn',
-              translatePrefix: 'rmDocumentUpload.hasPhysicalOriginal',
-              isBooleanValue: true,
-              sortable: false,
-              headerClass: 'recdef:physicalOriginal',
-              defaultVisible: false,
-              minWidth: 150,
-          },
-          {
-              name: 'secrecyLevel',
-              prop: 'properties.secrecyLevel',
-              display: true,
-              type: 'custom',
-              template: 'common.components.coloredSecrecyLevel',
-              headerClass: 'gdoc:secrecyLevel',
-              defaultVisible: true,
-              minWidth: 150,
-          },
-          {
-              name: 'tags',
-              prop: 'properties.tags',
-              display: true,
-              type: 'custom',
-              template: 'common.components.tags',
-              translatePrefix: 'search.buckets',
-              isOrginalKey: true,
-              sortable: false,
-              headerClass: 'ecm:tag',
-              defaultVisible: false,
-              minWidth: 150,
-          },
-          {
-              name: 'importance',
-              prop: 'properties.importance',
-              display: true,
-              translatePrefix: 'search.buckets',
-              type: 'custom',
-              template: 'rms.components.TranslatedValueColumn',
-              sortable: true,
-              isOrginalKey: true,
-              headerClass: 'gdoc:importance',
-              defaultVisible: false,
-          },
-          {
-              name: 'date_created',
-              prop: 'properties.created',
-              display: true,
-              type: 'custom',
-              template: 'common.components.dateWithoutTime',
-              headerClass: 'dc:created',
-              defaultVisible: false,
-              minWidth: 150,
-          },
-          {
-              name: 'docDate',
-              prop: 'properties.gdocumentDate',
-              display: true,
-              type: 'custom',
-              template: 'common.components.dateWithoutTime',
-              headerClass: 'gdoc:gDocumentDate',
-              defaultVisible: false,
-          },
-          {
-              name: 'retentionType',
-              prop: 'properties.saveTypee',
-              display: true,
-              translatePrefix: 'search.buckets',
-              type: 'custom',
-              template: 'rms.components.TranslatedValueColumn',
-              headerClass: 'retentioninfo:saveTypee',
-              defaultVisible: false,
-          },
-          {
-              name: 'retentioninfoStatus',
-              prop: 'properties.retentioninfoStatus',
-              display: true,
-              translatePrefix: 'search.buckets',
-              type: 'custom',
-              template: 'rms.components.TranslatedValueColumn',
-              headerClass: 'retentioninfo:status',
-              defaultVisible: false,
-          },
-          {
-              name: 'activeRetentionStartDateHijri',
-              prop: 'properties.activeRetentionStartDateHijri',
-              display: false,
-              type: 'custom',
-              template: 'common.components.hijri',
-              headerClass: 'retentioninfo:activeRetentionStartDateHijri',
-              defaultVisible: false,
-          },
-          {
-              name: 'activeRetentionEndDateHijri',
-              prop: 'properties.activeRetentionEndDateHijri',
-              display: false,
-              type: 'custom',
-              template: 'common.components.hijri',
-              headerClass: 'retentioninfo:activeRetentionEndDateHijri',
-              defaultVisible: false,
-          },
-          {
-              name: 'retentionEndDateHijri',
-              prop: 'properties.retentionEndDateHijri',
-              display: false,
-              type: 'custom',
-              template: 'common.components.hijri',
-              headerClass: 'retentioninfo:retentionEndDateHijri',
-              defaultVisible: true,
-          },
-          {
-              name: 'site',
-              prop: 'properties.site',
-              display: false,
-              type: 'custom',
-              template: 'common.components.site',
-              headerClass: 'locRef:site',
-              defaultVisible: true,
-          },
-          {
-              name: 'store',
-              prop: 'properties.store',
-              display: false,
-              type: 'custom',
-              template: 'common.components.store',
-              headerClass: 'locRef:store',
-              defaultVisible: true,
-          },
-          {
-              name: 'Box',
-              prop: 'properties.box',
-              display: false,
-              type: 'custom',
-              template: 'common.components.box',
-              headerClass: 'locRef:boxCode',
-              defaultVisible: true,
-          },
-      ],
-      columnsWithDynamicDisplay: [
-          'activeRetentionStartDateHijri',
-          'activeRetentionEndDateHijri',
-          'retentionEndDateHijri',
-          'site',
-          'store',
-          'Box',
-      ],
-  };
-  var REPORTS_DATA = {
-      request: {
-          pageProvider: 'PP_RPT_Expected_TransferArchive_Records',
-          customUrl: {
-              url: '/custom-search/pp/PP_RPT_Expected_TransferArchive_Records/execute',
-              method: 'post',
-          },
-          params: {
-              pageSize: 1,
-          },
-      },
-      filters: {
-          mode: 'payload',
-          visible: true,
-          togglePanel: true,
-          fields: [
-              {
-                  type: 'aggregation',
-                  config: {
-                      label: 'rmAdvancedSearch.gdocCategoryHierarchyCode',
-                      aggregation: 'generaldocument_categoryHierarchyCode_agg',
-                      fieldKey: 'gdoc:categoryHierarchyCode',
-                      dataTransformer: 'subject',
-                      order: 0,
-                      sendMode: 'queryParam',
-                      valueType: 'property',
-                      render: {
-                          type: 'checkbox',
-                          options: {
-                              showTotal: true,
-                          },
-                      },
-                  },
-              },
-              {
-                  type: 'aggregation',
-                  config: {
-                      label: 'rmAdvancedSearch.gdocCategoryHierarchyCode1',
-                      aggregation: 'generaldocument_categoryHierarchyCode_1_agg',
-                      fieldKey: 'gdoc:categoryHierarchyCode__1',
-                      order: 0,
-                      sendMode: 'queryParam',
-                      valueType: 'property',
-                      dataTransformer: 'subject',
-                      render: {
-                          type: 'checkbox',
-                          options: {
-                              showTotal: true,
-                              collapse: true,
-                          },
-                      },
-                  },
-              },
-          ],
-      },
-      reports: {
-          details: {
-              enabled: true,
-              prefix: 'LISTING.',
-              // quickFilters: 'After Archiving',
-              columnsOptions: {
-                  toggle: true,
-                  sortable: {
-                      enabled: true,
-                  },
-              },
-              request: {
-                  headers: {
-                      properties: 'dublincore, file, generaldocument, RecordDefinition,retentioninfo',
-                  },
-              },
-              fields: {
-                  title: 'dc:title',
-                  subject: 'gdoc:documentSubject',
-                  docTypee: 'gdoc:documentTypeCode',
-                  secrecyLevel: 'gdoc:secrecyLevel',
-                  docTypeId: 'documenttypee:documentTypeId',
-                  created: 'dc:created',
-                  department: 'department',
-                  file: 'file:content',
-                  systemName: 'recdef:systemName',
-                  docNum: 'gdoc:documentReferenceNumber',
-                  physicalOriginal: 'recdef:physicalOriginal',
-                  gdocumentDate: 'gdoc:gDocumentDate',
-                  importance: 'gdoc:importance',
-                  unifiedNumber: 'recdef:unifiedNumber',
-                  creator: 'dc:creator',
-                  saveTypee: 'retentioninfo:saveTypee',
-              },
-              columns: [
-                  {
-                      name: 'Doc_Name',
-                      prop: 'properties.title',
-                      display: true,
-                      type: 'custom',
-                      template: 'common.components.titleWithIcon',
-                      sortable: true,
-                      headerClass: 'dc:title',
-                      defaultVisible: true,
-                  },
-                  {
-                      name: 'systemName',
-                      prop: 'properties.systemName',
-                      display: true,
-                      type: 'custom',
-                      template: 'common.components.systemName',
-                      translatePrefix: 'search.buckets',
-                      isOrginalKey: true,
-                      sortable: false,
-                      headerClass: 'recdef:systemName',
-                      defaultVisible: true,
-                  },
-                  {
-                      name: 'Doc_RefernceNum',
-                      prop: 'properties.docNum',
-                      display: true,
-                      type: 'text',
-                      sortable: true,
-                      headerClass: 'gdoc:documentReferenceNumber',
-                      defaultVisible: true,
-                  },
-                  {
-                      name: 'Doc_Type',
-                      prop: 'properties.docTypee',
-                      display: true,
-                      template: 'common.components.documentType',
-                      type: 'custom',
-                      headerClass: 'gdoc:documentTypeCode',
-                      defaultVisible: false,
-                  },
-                  {
-                      name: 'retentionType',
-                      prop: 'properties.saveTypee',
-                      display: true,
-                      type: 'text',
-                      translatePrefix: 'vocabulary.VOC_SaveType',
-                      headerClass: 'retentioninfo:saveTypee',
-                      defaultVisible: false,
-                  },
-                  {
-                      name: 'physicalOriginal',
-                      prop: 'properties.physicalOriginal',
-                      display: true,
-                      type: 'custom',
-                      template: 'rms.components.TranslatedValueColumn',
-                      translatePrefix: 'rmDocumentUpload.hasPhysicalOriginal',
-                      isBooleanValue: true,
-                      sortable: false,
-                      headerClass: 'recdef:physicalOriginal',
-                      defaultVisible: false,
-                  },
-                  {
-                      name: 'mainTopic',
-                      prop: 'properties.subject',
-                      display: true,
-                      type: 'text',
-                      headerClass: 'gdoc:documentSubject',
-                      defaultVisible: false,
-                  },
-                  {
-                      name: 'docDate',
-                      prop: 'properties.gdocumentDate',
-                      display: true,
-                      type: 'custom',
-                      template: 'common.components.dateWithoutTime',
-                      headerClass: 'gdoc:gDocumentDate',
-                      defaultVisible: true,
-                  },
-                  {
-                      name: 'secrecyLevel',
-                      prop: 'properties.secrecyLevel',
-                      display: true,
-                      type: 'custom',
-                      template: 'common.components.coloredSecrecyLevel',
-                      headerClass: 'gdoc:secrecyLevel',
-                      defaultVisible: true,
-                  },
-                  {
-                      name: 'importance',
-                      prop: 'properties.importance',
-                      display: true,
-                      translatePrefix: 'search.buckets',
-                      type: 'custom',
-                      template: 'rms.components.TranslatedValueColumn',
-                      sortable: true,
-                      isOrginalKey: true,
-                      headerClass: 'gdoc:importance',
-                  },
-                  {
-                      name: 'unifiedNumber',
-                      prop: 'properties.unifiedNumber',
-                      display: true,
-                      type: 'text',
-                      sortable: true,
-                      headerClass: 'recdef:unifiedNumber',
-                  },
-                  {
-                      name: 'docDate',
-                      prop: 'properties.created',
-                      display: true,
-                      type: 'custom',
-                      template: 'common.components.dateWithoutTime',
-                      headerClass: 'dc:created',
-                      defaultVisible: false,
-                  },
-                  {
-                      name: 'creator',
-                      prop: 'properties.creator',
-                      display: true,
-                      type: 'text',
-                      sortable: true,
-                      headerClass: 'dc:creator',
-                      defaultVisible: false,
-                  },
-                  {
-                      name: 'documentType',
-                      prop: 'properties.docTypeId',
-                      display: true,
-                      type: 'custom',
-                      template: 'common.components.documentType',
-                      headerClass: 'gdoc:documentTypeCode',
-                      defaultVisible: false,
-                  },
-                  {
-                      name: 'orgUnit',
-                      prop: 'department.title',
-                      display: true,
-                      type: 'custom',
-                      template: 'common.components.departement',
-                      headerClass: 'recdef:departmentCode',
-                      sortable: false,
-                      defaultVisible: false,
-                  },
-              ],
-          },
-          items: [
-              {
-                  id: 'resultsCount',
-                  label: 'REPORTS.resultsCount',
-                  mode: 'digit',
-                  datasource: {
-                      propertyPath: 'resultsCount',
-                  },
-              },
-              {
-                  id: 'future__gdocCategoryHierarchyCode',
-                  label: 'REPORTS.gdocCategoryHierarchyCode',
-                  mode: 'graph',
-                  print: true,
-                  dialog: {
-                      active: true,
-                  },
-                  details: {
-                      enabled: true,
-                  },
-                  datasource: [
-                      {
-                          propertyPath: 'aggregations.generaldocument_categoryHierarchyCode_agg.buckets',
-                          dataFormat: 'subject',
-                          transformer: 'reduceData',
-                      },
-                  ],
-                  chart: {
-                      type: 'pie',
-                      plugins: [
-                          'chartDataLabels',
-                          'scrollableLegends',
-                          'doughnutEmptyState',
-                      ],
-                  },
-              },
-              {
-                  id: 'future__generaldocument_categoryHierarchyCode_1_agg',
-                  label: 'REPORTS.gdocCategoryHierarchyCode1',
-                  mode: 'graph',
-                  print: true,
-                  dialog: {
-                      active: true,
-                  },
-                  details: {
-                      enabled: true,
-                  },
-                  datasource: [
-                      {
-                          propertyPath: 'aggregations.generaldocument_categoryHierarchyCode_1_agg.buckets',
-                          dataFormat: 'subject',
-                          transformer: 'reduceData',
-                      },
-                  ],
-                  chart: {
-                      type: 'doughnut',
-                      plugins: [
-                          'chartDataLabels',
-                          'scrollableLegends',
-                          'doughnutEmptyState',
-                      ],
-                  },
-              },
-              {
-                  id: 'future__generaldocument_secrecyLevel_agg',
-                  label: 'REPORTS.gdocSecrecyLevel',
-                  mode: 'graph',
-                  print: true,
-                  dialog: {
-                      active: true,
-                  },
-                  prefix: 'search.buckets.',
-                  details: {
-                      enabled: true,
-                  },
-                  datasource: [
-                      {
-                          propertyPath: 'aggregations.generaldocument_secrecyLevel_agg.buckets',
-                          transformer: 'reduceData',
-                      },
-                  ],
-                  chart: {
-                      type: 'bar',
-                      options: {
-                          indexAxis: 'y',
-                          responsive: true,
-                          maintainAspectRatio: false,
-                          scales: {
-                              x: {
-                                  ticks: {
-                                      stepSize: 1,
-                                  },
-                                  grid: {
-                                      color: '#eee',
-                                  },
-                              },
-                              y: {
-                                  ticks: {
-                                      precision: 0,
-                                      stepSize: 1,
-                                      color: '#000',
-                                      crossAlign: 'far',
-                                      callback: function (_, index) {
-                                          var label = "" + this.getLabels()[index];
-                                          var maxLength = 18;
-                                          return (label === null || label === void 0 ? void 0 : label.length) > maxLength
-                                              ? label.substring(0, maxLength) + '...'
-                                              : label;
-                                      },
-                                  },
-                                  grid: {
-                                      color: '#000',
-                                  },
-                              },
-                          },
-                          plugins: {
-                              legend: {
-                                  display: false,
-                              },
-                          },
-                      },
-                      plugins: [
-                          'chartDataLabels',
-                          'scrollableLegends',
-                          'doughnutEmptyState',
-                      ],
-                  },
-              },
-              {
-                  id: 'future__RetentionInfo_saveTypee_agg',
-                  label: 'REPORTS.rinfoSaveTypee',
-                  mode: 'graph',
-                  print: true,
-                  prefix: 'search.buckets.',
-                  details: {
-                      enabled: true,
-                  },
-                  datasource: [
-                      {
-                          propertyPath: 'aggregations.RetentionInfo_saveTypee_agg.buckets',
-                          transformer: 'reduceData',
-                      },
-                  ],
-                  chart: {
-                      type: 'pie',
-                      plugins: [
-                          'chartDataLabels',
-                          'scrollableLegends',
-                          'doughnutEmptyState',
-                      ],
-                  },
-              },
-              {
-                  mode: 'dynamicLine',
-                  id: 'late_RetentionInfo_activeRetentionExpireDate_agg',
-                  label: 'REPORTS.expectedTransferDate',
-                  print: true,
-                  dialog: {
-                      active: true,
-                  },
-                  details: {
-                      enabled: true,
-                  },
-                  request: {
-                      pageProvider: 'PP_RPT_Expected_TransferArchive_Records',
-                      customUrl: {
-                          url: '/custom-search/pp/PP_RPT_Expected_TransferArchive_Records/execute',
-                          method: 'post',
-                      },
-                  },
-                  datasource: [
-                      {
-                          aggregation: 'RetentionInfo_activeRetentionExpireDate_agg',
-                          propertyPath: 'aggregations.RetentionInfo_activeRetentionExpireDate_agg.buckets',
-                          transformer: 'timeFormat',
-                      },
-                  ],
-                  chart: {
-                      type: 'line',
-                      options: {
-                          layout: {
-                              padding: {
-                                  right: 40,
-                                  left: 40,
-                              },
-                          },
-                      },
-                      datasets: [
-                          {
-                              borderWidth: 2,
-                              borderColor: '#000',
-                              pointBorderWidth: 0,
-                              pointBackgroundColor: '#000',
-                          },
-                      ],
-                  },
-              },
-              {
-                  id: 'future__RecordDefinition_systemName_agg',
-                  label: 'REPORTS.rdSystemName',
-                  mode: 'graph',
-                  print: true,
-                  dialog: {
-                      active: true,
-                  },
-                  prefix: 'search.buckets.',
-                  details: {
-                      enabled: true,
-                  },
-                  datasource: [
-                      {
-                          propertyPath: 'aggregations.RecordDefinition_systemName_agg.buckets',
-                          transformer: 'reduceData',
-                      },
-                  ],
-                  chart: {
-                      type: 'bar',
-                      direction: 'vertical',
-                      plugins: [
-                          'chartDataLabels',
-                          'scrollableLegends',
-                          'doughnutEmptyState',
-                      ],
-                  },
-              },
-          ],
-      },
-  };
-
   var DataAccessService = /** @class */ (function (_super) {
       __extends(DataAccessService, _super);
-      function DataAccessService() {
-          return _super !== null && _super.apply(this, arguments) || this;
+      function DataAccessService(injector) {
+          return _super.call(this, injector) || this;
       }
-      DataAccessService.prototype.getData = function (key, type) {
-          if (type == NDF_EDITOR_TYPE.REPORTS) {
-              return rxjs.of(JSON.stringify(REPORTS_DATA, null, 2));
-          }
-          return rxjs.of(JSON.stringify(TABLE_DATA, null, 2));
-      };
-      DataAccessService.prototype.saveData = function (key, data) {
-          return rxjs.of(JSON.stringify(TABLE_DATA, null, 2));
+      DataAccessService.prototype.saveData = function (payload) {
+          return this.customAutomation({
+              operation: 'AC_UA_Create_UI_Configuration',
+              context: payload
+          });
       };
       return DataAccessService;
-  }(BaseService));
-  DataAccessService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DataAccessService, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  }(BaseEditorConfigService));
+  DataAccessService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DataAccessService, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
   DataAccessService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DataAccessService, providedIn: 'root' });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DataAccessService, decorators: [{
               type: i0.Injectable,
               args: [{
                       providedIn: 'root'
                   }]
-          }] });
+          }], ctorParameters: function () { return [{ type: i0__namespace.Injector }]; } });
+
+  var METADATA_EDITOR_OPTIONS = new i0.InjectionToken('METADATA_EDITOR_CONFIG');
 
   var DataStoreService = /** @class */ (function () {
-      function DataStoreService(dataAccessService) {
+      function DataStoreService(dataAccessService, environment, options) {
           this.dataAccessService = dataAccessService;
+          this.environment = environment;
+          this.options = options;
           this._editorTypeSubject = new rxjs.BehaviorSubject(NDF_EDITOR_TYPE.TABLES);
           this.editorType$ = this._editorTypeSubject.asObservable();
           this._editorModeSubject = new rxjs.BehaviorSubject(CONFIG_EDITOR_MODE.EDIT);
@@ -48136,25 +47103,52 @@
       };
       DataStoreService.prototype.getData = function (key, type) {
           var _this = this;
-          return this.dataAccessService.getData(key, type).pipe(operators.switchMap(function (data) {
-              _this._dataSubject.next(data);
+          var _a, _b;
+          var metadata = ((_a = this.options) === null || _a === void 0 ? void 0 : _a[type]) || {};
+          return this.dataAccessService
+              .fetchData({
+              app: (_b = this.environment) === null || _b === void 0 ? void 0 : _b.appKey,
+              key: key,
+              type: type,
+              localPath: metadata === null || metadata === void 0 ? void 0 : metadata.localPath
+          })
+              .pipe(operators.switchMap(function (res) {
+              var _a, _b;
+              if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.config) {
+                  var data = JSON.stringify((_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.config, null, 2);
+                  _this._dataSubject.next(data || '{\n"key": "value"\n}');
+              }
               return _this.editorData$;
           }));
       };
-      DataStoreService.prototype.saveData = function (key) {
+      DataStoreService.prototype.saveData = function (key, type) {
+          var _a;
           var data = this._dataSubject.getValue();
-          return this.dataAccessService.saveData(key, data);
+          return this.dataAccessService.saveData({
+              app: (_a = this.environment) === null || _a === void 0 ? void 0 : _a.appKey,
+              key: key,
+              type: type,
+              content: data
+          });
       };
       DataStoreService.prototype.storeData = function (data) {
           this._dataSubject.next(data);
       };
       return DataStoreService;
   }());
-  DataStoreService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DataStoreService, deps: [{ token: DataAccessService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  DataStoreService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DataStoreService, deps: [{ token: DataAccessService }, { token: 'environment' }, { token: METADATA_EDITOR_OPTIONS }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
   DataStoreService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DataStoreService });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DataStoreService, decorators: [{
               type: i0.Injectable
-          }], ctorParameters: function () { return [{ type: DataAccessService }]; } });
+          }], ctorParameters: function () {
+          return [{ type: DataAccessService }, { type: undefined, decorators: [{
+                          type: i0.Inject,
+                          args: ['environment']
+                      }] }, { type: undefined, decorators: [{
+                          type: i0.Inject,
+                          args: [METADATA_EDITOR_OPTIONS]
+                      }] }];
+      } });
 
   // monaco-loader.service.ts
   var MonacoLoaderService = /** @class */ (function () {
@@ -48606,7 +47600,7 @@
 
   var NdfConfigEditorComponent = /** @class */ (function (_super) {
       __extends(NdfConfigEditorComponent, _super);
-      function NdfConfigEditorComponent(environment, dataStore, configService, matDialog, location) {
+      function NdfConfigEditorComponent(environment, dataStore, configService, matDialog, location, toastrService) {
           var _this = this;
           var _a;
           _this = _super.call(this) || this;
@@ -48615,6 +47609,7 @@
           _this.configService = configService;
           _this.matDialog = matDialog;
           _this.location = location;
+          _this.toastrService = toastrService;
           _this.isEditorHasErrors = false;
           _this._defaultEditorOptions = {
               value: "",
@@ -48643,7 +47638,7 @@
           var _this = this;
           this._dataKeySubject
               .pipe(operators.switchMap(function (key) { return _this.dataStore.getData(key, _this.metadata.type); }), operators.takeUntil(this.destroy$))
-              .subscribe(function (res) { });
+              .subscribe();
       };
       NdfConfigEditorComponent.prototype.onDataChanged = function (data) {
           this.dataStore.storeData(data);
@@ -48652,7 +47647,13 @@
           this.isEditorHasErrors = hasErrors;
       };
       NdfConfigEditorComponent.prototype.saveData = function () {
-          this.dataStore.saveData(this.metadata.key);
+          var _this = this;
+          this.dataStore
+              .saveData(this.metadata.key, this.metadata.type)
+              .pipe(operators.takeUntil(this.destroy$))
+              .subscribe(function (res) {
+              _this.toastrService.show('success', 'TOASTER.SUCCESS', 'JSON_EDITOR.MESSAGES.dataSaved');
+          });
       };
       NdfConfigEditorComponent.prototype.navigateBack = function () {
           this.location.back();
@@ -48698,7 +47699,7 @@
       };
       return NdfConfigEditorComponent;
   }(DestroySubject));
-  NdfConfigEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfConfigEditorComponent, deps: [{ token: 'environment' }, { token: DataStoreService }, { token: AppConfigService }, { token: i1__namespace$3.MatDialog }, { token: i4__namespace$1.Location }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  NdfConfigEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfConfigEditorComponent, deps: [{ token: 'environment' }, { token: DataStoreService }, { token: AppConfigService }, { token: i1__namespace$3.MatDialog }, { token: i4__namespace$1.Location }, { token: CustomToastrService }], target: i0__namespace.ɵɵFactoryTarget.Component });
   NdfConfigEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfConfigEditorComponent, selector: "app-ndf-config-editor", inputs: { metadata: "metadata", theme: "theme", options: "options" }, providers: [DataStoreService], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<ng-container *ngIf=\"config?.enabled && isFeatureEnabled; else emptyTpl\">\r\n\t<div class=\"ndf-config-editor\" ndfFluidHeight *permission=\"{ name: config?.types[metadata?.type]?.permission }\">\r\n\t\t<div class=\"ndf-config-editor__sidebar\">\r\n\t\t\t<app-editor-settings class=\"ndf-config-editor__setting\"></app-editor-settings>\r\n\t\t\t<app-config-editor-actions\r\n\t\t\t\tappItemHeight\r\n\t\t\t\tcssVar=\"--ndf-editor-actions-height\"\r\n\t\t\t\t[saveDisabled]=\"isEditorHasErrors || !(dataStore.editorData | isValidJson)\"\r\n\t\t\t\t[config]=\"config?.types[metadata?.type]\"\r\n\t\t\t\t(onInfo)=\"openInfoDialog($event)\"\r\n\t\t\t\t(onBack)=\"navigateBack()\"\r\n\t\t\t\t(onSave)=\"saveData()\"\r\n\t\t\t>\r\n\t\t\t</app-config-editor-actions>\r\n\t\t</div>\r\n\t\t<div class=\"ndf-config-editor__content\">\r\n\t\t\t<div class=\"ndf-config-editor__topbar\">\r\n\t\t\t\t<app-editor-mode-switch\r\n\t\t\t\t\t[mode]=\"dataStore.editorMode\"\r\n\t\t\t\t\t(changeMode)=\"dataStore.changeMode($event)\"\r\n\t\t\t\t></app-editor-mode-switch>\r\n\t\t\t</div>\r\n\t\t\t<app-config-preview\r\n\t\t\t\t*ngIf=\"dataStore.editorMode === modes.PREVIEW\"\r\n        [type]=\"dataStore.editorType$ | async\"\r\n\t\t\t\t[data]=\"previewData$ | async\"\r\n\t\t\t></app-config-preview>\r\n\t\t\t<ndf-monaco-editor\r\n\t\t\t\t*ngIf=\"dataStore.editorMode === modes.EDIT\"\r\n\t\t\t\t[value]=\"editorData$ | async\"\r\n\t\t\t\t[options]=\"options$ | async\"\r\n\t\t\t\t[theme]=\"theme$ | async\"\r\n\t\t\t\t(valueChange)=\"onDataChanged($event)\"\r\n\t\t\t\t(hasError)=\"onEditorErrors($event)\"\r\n\t\t\t\t(onInit)=\"onEditorReady($event)\"\r\n\t\t\t></ndf-monaco-editor>\r\n\t\t</div>\r\n\t</div>\r\n</ng-container>\r\n\r\n<ng-template #emptyTpl>\r\n\t<div class=\"ndf-empty-config\">\r\n\t\t<app-no-data-found message=\"JSON_EDITOR.MESSAGES.notAllowed\"></app-no-data-found>\r\n\t</div>\r\n</ng-template>\r\n", styles: [":host{display:var(--ndf-config-wrapper-display, flex);flex-direction:var(--ndf-config-wrapper-direction, column);grid-gap:var(--ndf-config-wrapper-gap, .5rem);gap:var(--ndf-config-wrapper-gap, .5rem);flex-grow:1;height:var(--ndf-config-wrapper-height, 100%)}.ndf-empty-config{justify-content:center;align-items:center}.ndf-empty-config,.ndf-config-editor{padding:var(--ndf-editor-padding, 1rem);background-color:var(--ndf-editor-background-color, #fff);color:var(--ndf-editor-color);border-radius:var(--ndf-editor-border-radius, .5rem);display:flex;flex-grow:1;max-height:var(--ndf-fluid-height, 100%)}.ndf-config-editor{grid-gap:var(--ndf-editor--gap, 1rem);gap:var(--ndf-editor--gap, 1rem)}.ndf-config-editor__sidebar{width:var(--ndf-editor-sidebar-width, 18rem);background:var(--ndf-editor-sidebar-background);border:var(--ndf-editor-sidebars-border, 0px solid transparent);border-radius:var(--ndf-editor-sidebar-radius, 0rem);display:grid;grid-template-rows:var(--ndf-editor-sidebar-rows, 1fr auto)}.ndf-config-editor__content{flex-grow:1;background:var(--ndf-editor-content-background);border:var(--ndf-editor-content-border, 0px solid transparent);border-radius:var(--ndf-editor-content-radius, 0rem);display:flex;flex-direction:column;grid-gap:var(--ndf-editor-content-gap, 1rem);gap:var(--ndf-editor-content-gap, 1rem)}.ndf-config-editor__topbar{display:var(--ndf-editor-topbar-display, flex);justify-content:var(--ndf-editor-topbar-justify-content, flex-end)}.ndf-config-editor__setting{max-height:var(--ndf-editor-content-max-height, calc(var(--ndf-fluid-height) - var(--ndf-editor-actions-height, 125px) - 2.5rem));overflow:auto}\n"], components: [{ type: EditorSettingsComponent, selector: "app-editor-settings" }, { type: ConfigEditorActionsComponent, selector: "app-config-editor-actions", inputs: ["saveDisabled", "config"], outputs: ["onSave", "onInfo", "onBack"] }, { type: EditorModeSwitchComponent, selector: "app-editor-mode-switch", inputs: ["mode"], outputs: ["changeMode"] }, { type: ConfigPreviewComponent, selector: "app-config-preview", inputs: ["type", "data"] }, { type: MonacoEditorComponent, selector: "ndf-monaco-editor", inputs: ["value", "options", "theme", "model"], outputs: ["onInit", "hasError", "valueChange"] }, { type: NoDataFoundComponent, selector: "app-no-data-found", inputs: ["message", "width", "height"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PermissionsDirective, selector: "[permission]", inputs: ["permission"] }, { type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "cssVar", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { type: ElementHeightDirective, selector: "[appItemHeight]", inputs: ["cssVar", "calculate", "inlineStyle"], exportAs: ["appItemHeight"] }], pipes: { "isValidJson": IsValidJsonPipe, "async": i4__namespace$1.AsyncPipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfConfigEditorComponent, decorators: [{
               type: i0.Component,
@@ -48712,7 +47713,7 @@
           return [{ type: undefined, decorators: [{
                           type: i0.Inject,
                           args: ['environment']
-                      }] }, { type: DataStoreService }, { type: AppConfigService }, { type: i1__namespace$3.MatDialog }, { type: i4__namespace$1.Location }];
+                      }] }, { type: DataStoreService }, { type: AppConfigService }, { type: i1__namespace$3.MatDialog }, { type: i4__namespace$1.Location }, { type: CustomToastrService }];
       }, propDecorators: { metadata: [{
                   type: i0.Input
               }], theme: [{
@@ -48866,9 +47867,11 @@
   exports.BaseChartComponent = BaseChartComponent;
   exports.BaseColumnComponent = BaseColumnComponent;
   exports.BaseComponent = BaseComponent;
+  exports.BaseCustomReport = BaseCustomReport;
   exports.BaseDatePicker = BaseDatePicker;
   exports.BaseDateValueAccessor = BaseDateValueAccessor;
   exports.BaseDialogComponent = BaseDialogComponent;
+  exports.BaseEditorConfigService = BaseEditorConfigService;
   exports.BaseNodeClass = BaseNodeClass;
   exports.BaseSelector = BaseSelector;
   exports.BaseService = BaseService;
@@ -49115,6 +48118,7 @@
   exports.MAT_MOMENT_DATE_ADAPTER_OPTIONS = MAT_MOMENT_DATE_ADAPTER_OPTIONS;
   exports.MAT_MOMENT_DATE_ADAPTER_OPTIONS_FACTORY = MAT_MOMENT_DATE_ADAPTER_OPTIONS_FACTORY;
   exports.MESSAGE_TYPE = MESSAGE_TYPE;
+  exports.METADATA_EDITOR_OPTIONS = METADATA_EDITOR_OPTIONS;
   exports.MIN_VISIBLE_COUNT = MIN_VISIBLE_COUNT;
   exports.MONACO_EDITOR_CONFIG = MONACO_EDITOR_CONFIG;
   exports.MY_MOMENT_FORMATS = MY_MOMENT_FORMATS;