nuxeo-development-framework 5.5.6 → 5.5.8

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

@@ -4021,9 +4021,16 @@
               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) {
+                  properties: 'ndfuiconfig,note',
+              },
+          }).pipe(operators.map(function (response) { var _a; return (_a = response.entries) === null || _a === void 0 ? void 0 : _a[0]; }), operators.catchError(function (error) {
+              return _this._getDataFromLocal({
+                  key: key,
+                  type: type,
+                  app: app,
+                  localPath: localPath,
+              });
+          }), 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) {
@@ -4034,24 +4041,33 @@
                           key: key,
                           type: type,
                           app: entry.properties['ndfuiconfig:app'],
-                          config: content
-                      }
+                          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
-                  }
+              return _this._getDataFromLocal({
+                  key: key,
+                  type: type,
+                  app: app,
+                  localPath: localPath,
               });
           }));
       };
+      BaseEditorConfigService.prototype._getDataFromLocal = function (_b) {
+          var key = _b.key, type = _b.type, app = _b.app, localPath = _b.localPath;
+          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;
@@ -14777,6 +14793,39 @@
       /**
        * Adds one or more new components to the existing set.
        * @param values The new components to add
+       * @deprecated This method is deprecated for column components and will be removed in a future version.
+       * Use `ColumnRendererRegistryService.register()` instead for registering column components.
+       *
+       * @example
+       * // For columns (deprecated)
+       * this.setComponents({ 'common.components.text': TextComponent, 'number': NumberComponent });
+       *
+       * // For columns (recommended - single)
+       * this.columnRegistry.register({
+       *   name: 'Text Column',
+       *   type: 'common.text',
+       *   category: 'basic',
+       *   component: TextComponent
+       * });
+       *
+       * // For columns (recommended - multiple)
+       * this.columnRegistry.register([
+       *   {
+       *     name: 'Text Column',
+       *     type: 'common.text',
+       *     category: 'basic',
+       *     component: TextComponent
+       *   },
+       *   {
+       *     name: 'Number Column',
+       *     type: 'common.number',
+       *     category: 'basic',
+       *     component: NumberComponent
+       *   }
+       * ]);
+       *
+       * // For viewer components (still supported)
+       * this.setComponents({ 'viewer.components.pdf': PdfViewerComponent });
        */
       ExtensionService.prototype.setComponents = function (values) {
           this.componentRegister.setComponents(values);
@@ -14788,9 +14837,7 @@
        */
       ExtensionService.prototype.getAuthGuards = function (ids) {
           var _this = this;
-          return (ids || [])
-              .map(function (id) { return _this.authGuards[id]; })
-              .filter(function (guard) { return guard; });
+          return (ids || []).map(function (id) { return _this.authGuards[id]; }).filter(function (guard) { return guard; });
       };
       /**
        * Retrieves a registered extension component using its ID value.
@@ -14846,14 +14893,203 @@
                       }] }];
       } });
 
+  var NdfTransformService = /** @class */ (function () {
+      function NdfTransformService() {
+          this._transformations = new Map();
+      }
+      NdfTransformService.prototype.register = function (arg1, arg2) {
+          var _this = this;
+          if (typeof arg1 === 'object') {
+              Object.entries(arg1).forEach(function (_a) {
+                  var _b = __read(_a, 2), key = _b[0], fn = _b[1];
+                  return _this._transformations.set(key, fn);
+              });
+              return;
+          }
+          if (typeof arg1 === 'string' && arg2) {
+              this._transformations.set(arg1, arg2);
+          }
+      };
+      /**
+       * Retrieves a transformer function by its key.
+       *
+       * @param {string} key - The key of the transformer function.
+       * @returns {NdfTransformerFunction | undefined} - The transformer function or undefined if not found.
+       */
+      NdfTransformService.prototype.get = function (key) {
+          return this._transformations.get(key);
+      };
+      /**
+       * Retrieves all registered transformer functions.
+       *
+       * @returns {Map<string, NdfTransformerFunction>} - A map of all transformer functions.
+       */
+      NdfTransformService.prototype.getAll = function () {
+          return this._transformations;
+      };
+      /**
+       * Clears all registered transformer functions.
+       */
+      NdfTransformService.prototype.clear = function () {
+          this._transformations.clear();
+      };
+      /**
+       * Checks if a transformer function is registered for a specific key.
+       *
+       * @param {string} key - The key to check.
+       * @returns {boolean} - True if the key exists, false otherwise.
+       */
+      NdfTransformService.prototype.has = function (key) {
+          return this._transformations.has(key);
+      };
+      /**
+       * Removes a transformer function by its key.
+       *
+       * @param {string} key - The key of the transformer function to remove.
+       */
+      NdfTransformService.prototype.remove = function (key) {
+          this._transformations.delete(key);
+      };
+      /**
+       * Executes a transformer function for a specific key with the provided input keys.
+       *
+       * @param {string} key - The key of the transformer function to execute.
+       * @param {string[]} keys - The input keys to pass to the transformer function.
+       * @throws {Error} - If no transformer function is registered for the key.
+       * @returns {Observable<NdfTransformerDataModel[]>} - The result of the transformer function.
+       */
+      NdfTransformService.prototype.transform = function (key, keys) {
+          var fn = this.get(key);
+          if (!fn) {
+              throw new Error("No transformer registered for key: " + key);
+          }
+          return fn(keys);
+      };
+      return NdfTransformService;
+  }());
+  NdfTransformService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfTransformService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  NdfTransformService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfTransformService, providedIn: 'root' });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfTransformService, decorators: [{
+              type: i0.Injectable,
+              args: [{
+                      providedIn: 'root'
+                  }]
+          }] });
+
+  var ColumnRendererRegistryService = /** @class */ (function () {
+      function ColumnRendererRegistryService() {
+          this.registry = new Map();
+      }
+      ColumnRendererRegistryService.prototype.register = function (columns) {
+          var _this = this;
+          if (Array.isArray(columns)) {
+              columns.forEach(function (def) { return _this._set(def); });
+          }
+          else {
+              this._set(columns);
+          }
+      };
+      /**
+       * Retrieves a column type definition by its unique type key.
+       * @param type The column type identifier
+       */
+      ColumnRendererRegistryService.prototype.get = function (type) {
+          return this.registry.get(type);
+      };
+      /**
+       * Returns all registered column type definitions.
+       */
+      ColumnRendererRegistryService.prototype.getAll = function () {
+          return Array.from(this.registry.values());
+      };
+      /**
+       * Gets column types filtered by app
+       */
+      ColumnRendererRegistryService.prototype.getByApp = function (app) {
+          return this.getAll().filter(function (def) { return (def === null || def === void 0 ? void 0 : def.app) === app; });
+      };
+      /**
+       * Returns only the component associated with a column type.
+       * @param type The column type identifier
+       */
+      ColumnRendererRegistryService.prototype.getComponent = function (type) {
+          var _a;
+          return (_a = this.registry.get(type)) === null || _a === void 0 ? void 0 : _a.component;
+      };
+      /**
+       * Gets all column types filtered by category
+       */
+      ColumnRendererRegistryService.prototype.getByCategory = function (category) {
+          return Array.from(this.registry.values()).filter(function (def) { return def.category === category; });
+      };
+      /**
+       * Returns all unique categories
+       */
+      ColumnRendererRegistryService.prototype.getCategories = function () {
+          var categories = Array.from(this.registry.values()).map(function (def) { return def.category; });
+          return __spreadArray([], __read(new Set(categories))).sort();
+      };
+      /**
+       * Returns column types grouped by category
+       */
+      ColumnRendererRegistryService.prototype.getGroupedByCategory = function () {
+          var grouped = {};
+          this.registry.forEach(function (definition) {
+              if (!grouped[definition.category]) {
+                  grouped[definition.category] = [];
+              }
+              grouped[definition.category].push(definition);
+          });
+          return grouped;
+      };
+      /**
+       * Gets column types filtered by multiple categories
+       */
+      ColumnRendererRegistryService.prototype.getByCategories = function (categories) {
+          return Array.from(this.registry.values()).filter(function (def) { return categories.includes(def.category); });
+      };
+      /**
+       * Checks if a column type exists
+       */
+      ColumnRendererRegistryService.prototype.has = function (type) {
+          return this.registry.has(type);
+      };
+      /**
+       * Clears all registered column types (mainly for testing or hot reload scenarios).
+       */
+      ColumnRendererRegistryService.prototype.clear = function () {
+          this.registry.clear();
+      };
+      ColumnRendererRegistryService.prototype._set = function (definition) {
+          if (!definition.type || !definition.name) {
+              throw new Error('[ColumnRendererRegistry] Type and name are required fields');
+          }
+          if (this.registry.has(definition.type)) {
+              console.warn("[ColumnRendererRegistry] Type '" + definition.type + "' is already registered. Overwriting...");
+          }
+          this.registry.set(definition.type, definition);
+      };
+      return ColumnRendererRegistryService;
+  }());
+  ColumnRendererRegistryService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ColumnRendererRegistryService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+  ColumnRendererRegistryService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ColumnRendererRegistryService, providedIn: 'root' });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ColumnRendererRegistryService, decorators: [{
+              type: i0.Injectable,
+              args: [{ providedIn: 'root' }]
+          }] });
+
   var DynamicColumnComponent = /** @class */ (function () {
-      function DynamicColumnComponent(extensions, componentFactoryResolver, cdr) {
+      function DynamicColumnComponent(extensions, _columnRegister, componentFactoryResolver, cdr) {
           this.extensions = extensions;
+          this._columnRegister = _columnRegister;
           this.componentFactoryResolver = componentFactoryResolver;
           this.cdr = cdr;
       }
       DynamicColumnComponent.prototype.ngOnInit = function () {
-          var componentType = this.extensions.getComponentById(this.id);
+          var isInRenderer = this._columnRegister.has(this.id);
+          var componentType = isInRenderer
+              ? this._columnRegister.getComponent(this.id)
+              : this.extensions.getComponentById(this.id);
           if (componentType) {
               var factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
               if (factory) {
@@ -14883,7 +15119,7 @@
       };
       return DynamicColumnComponent;
   }());
-  DynamicColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicColumnComponent, deps: [{ token: ExtensionService }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  DynamicColumnComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicColumnComponent, deps: [{ token: ExtensionService }, { token: ColumnRendererRegistryService }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
   DynamicColumnComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicColumnComponent, selector: "cts-dynamic-column", inputs: { id: "id", context: "context", column: "column" }, host: { classAttribute: "cts-dynamic-column" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, read: i0.ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: " <ng-container #content></ng-container> ", isInline: true, styles: ["\n\t\t\t.cts-dynamic-column {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\t\t"], encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicColumnComponent, decorators: [{
               type: i0.Component,
@@ -14896,7 +15132,7 @@
                           "\n\t\t\t.cts-dynamic-column {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\t\t"
                       ]
                   }]
-          }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { content: [{
+          }], ctorParameters: function () { return [{ type: ExtensionService }, { type: ColumnRendererRegistryService }, { type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { content: [{
                   type: i0.ViewChild,
                   args: ['content', { read: i0.ViewContainerRef, static: true }]
               }], id: [{
@@ -14908,12 +15144,16 @@
               }] } });
 
   var DynamicCustomComponent = /** @class */ (function () {
-      function DynamicCustomComponent(_extensions, _factoryResolver) {
+      function DynamicCustomComponent(_extensions, _columnRegister, _factoryResolver) {
           this._extensions = _extensions;
+          this._columnRegister = _columnRegister;
           this._factoryResolver = _factoryResolver;
       }
       DynamicCustomComponent.prototype.ngOnInit = function () {
-          var componentType = this._extensions.getComponentById(this.componentName);
+          var isInRenderer = this._columnRegister.has(this.componentName);
+          var componentType = isInRenderer
+              ? this._columnRegister.getComponent(this.componentName)
+              : this._extensions.getComponentById(this.componentName);
           if (componentType) {
               var factory = this._factoryResolver.resolveComponentFactory(componentType);
               if (factory) {
@@ -14941,7 +15181,7 @@
       };
       return DynamicCustomComponent;
   }());
-  DynamicCustomComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicCustomComponent, deps: [{ token: ExtensionService }, { token: i0__namespace.ComponentFactoryResolver }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  DynamicCustomComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicCustomComponent, deps: [{ token: ExtensionService }, { token: ColumnRendererRegistryService }, { token: i0__namespace.ComponentFactoryResolver }], target: i0__namespace.ɵɵFactoryTarget.Component });
   DynamicCustomComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicCustomComponent, selector: "app-dynamic-component", inputs: { componentName: "componentName", row: "row", rowAction: "rowAction", onClick: "onClick" }, host: { classAttribute: "dynamic-component" }, viewQueries: [{ propertyName: "_vcr", first: true, predicate: ["container"], descendants: true, read: i0.ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: " <ng-container #container></ng-container> ", isInline: true, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicCustomComponent, decorators: [{
               type: i0.Component,
@@ -14951,7 +15191,7 @@
                       encapsulation: i0.ViewEncapsulation.None,
                       host: { class: 'dynamic-component' }
                   }]
-          }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0__namespace.ComponentFactoryResolver }]; }, propDecorators: { _vcr: [{
+          }], ctorParameters: function () { return [{ type: ExtensionService }, { type: ColumnRendererRegistryService }, { type: i0__namespace.ComponentFactoryResolver }]; }, propDecorators: { _vcr: [{
                   type: i0.ViewChild,
                   args: ['container', { read: i0.ViewContainerRef, static: true }]
               }], componentName: [{
@@ -15014,7 +15254,7 @@
       return PageSizesListComponent;
   }());
   PageSizesListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageSizesListComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  PageSizesListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageSizesListComponent, selector: "ndf-page-sizes-list", inputs: { pageSizes: "pageSizes", selectedPageSize: "selectedPageSize" }, outputs: { onChangePageSize: "onChangePageSize" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"tablePageSizesWrapper\" *ngIf=\"pageSizes?.length\">\r\n\t<span class=\"tablePageSizeLabel\">\r\n\t\t{{ 'tablePageSizes' | translate }}\r\n\t</span>\r\n\t<ng-select\r\n\t\tclass=\"tablePageSizesList\"\r\n\t\t[dropdownPosition]=\"'top'\"\r\n\t\t[items]=\"pageSizes\"\r\n\t\tbindValue=\"size\"\r\n\t\tbindLabel=\"label\"\r\n\t\t[(ngModel)]=\"selectedPageSize\"\r\n\t\t(change)=\"changePageSize()\"\r\n\t>\r\n\t</ng-select>\r\n</div>\r\n", styles: [".tablePageSizesWrapper{display:flex;grid-column-gap:12px;column-gap:12px;align-items:center}.tablePageSizesWrapper .tablePageSizesList{width:100px}\n"], components: [{ type: i5__namespace.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
+  PageSizesListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PageSizesListComponent, selector: "ndf-page-sizes-list", inputs: { pageSizes: "pageSizes", selectedPageSize: "selectedPageSize" }, outputs: { onChangePageSize: "onChangePageSize" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"tablePageSizesWrapper\" *ngIf=\"pageSizes?.length\">\r\n\t<span class=\"tablePageSizeLabel\">\r\n\t\t{{ 'tablePageSizes' | translate }}\r\n\t</span>\r\n  <pre>{{selectedPageSize}}</pre>\r\n\t<ng-select\r\n\t\tclass=\"tablePageSizesList\"\r\n\t\t[dropdownPosition]=\"'top'\"\r\n\t\t[items]=\"pageSizes\"\r\n\t\tbindValue=\"size\"\r\n\t\tbindLabel=\"label\"\r\n\t\t[(ngModel)]=\"selectedPageSize\"\r\n\t\t(change)=\"changePageSize()\"\r\n    [searchable]=\"false\"\r\n\t>\r\n\t</ng-select>\r\n\r\n</div>\r\n", styles: [".tablePageSizesWrapper{display:flex;grid-column-gap:12px;column-gap:12px;align-items:center}.tablePageSizesWrapper .tablePageSizesList{width:100px}.tablePageSizesWrapper .ng-select-container .ng-value-container .ng-value{color:var(--ng-select-color, inherit)}\n"], components: [{ type: i5__namespace.NgSelectComponent, selector: "ng-select", inputs: ["markFirst", "dropdownPosition", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "bindLabel", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "virtualScroll", "openOnEnter", "appendTo", "bindValue", "appearance", "maxSelectedItems", "groupBy", "groupValue", "tabIndex", "typeahead"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "translate": i1__namespace.TranslatePipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PageSizesListComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -15030,89 +15270,6 @@
                   type: i0.Output
               }] } });
 
-  var NdfTransformService = /** @class */ (function () {
-      function NdfTransformService() {
-          this._transformations = new Map();
-      }
-      NdfTransformService.prototype.register = function (arg1, arg2) {
-          var _this = this;
-          if (typeof arg1 === 'object') {
-              Object.entries(arg1).forEach(function (_a) {
-                  var _b = __read(_a, 2), key = _b[0], fn = _b[1];
-                  return _this._transformations.set(key, fn);
-              });
-              return;
-          }
-          if (typeof arg1 === 'string' && arg2) {
-              this._transformations.set(arg1, arg2);
-          }
-      };
-      /**
-       * Retrieves a transformer function by its key.
-       *
-       * @param {string} key - The key of the transformer function.
-       * @returns {NdfTransformerFunction | undefined} - The transformer function or undefined if not found.
-       */
-      NdfTransformService.prototype.get = function (key) {
-          return this._transformations.get(key);
-      };
-      /**
-       * Retrieves all registered transformer functions.
-       *
-       * @returns {Map<string, NdfTransformerFunction>} - A map of all transformer functions.
-       */
-      NdfTransformService.prototype.getAll = function () {
-          return this._transformations;
-      };
-      /**
-       * Clears all registered transformer functions.
-       */
-      NdfTransformService.prototype.clear = function () {
-          this._transformations.clear();
-      };
-      /**
-       * Checks if a transformer function is registered for a specific key.
-       *
-       * @param {string} key - The key to check.
-       * @returns {boolean} - True if the key exists, false otherwise.
-       */
-      NdfTransformService.prototype.has = function (key) {
-          return this._transformations.has(key);
-      };
-      /**
-       * Removes a transformer function by its key.
-       *
-       * @param {string} key - The key of the transformer function to remove.
-       */
-      NdfTransformService.prototype.remove = function (key) {
-          this._transformations.delete(key);
-      };
-      /**
-       * Executes a transformer function for a specific key with the provided input keys.
-       *
-       * @param {string} key - The key of the transformer function to execute.
-       * @param {string[]} keys - The input keys to pass to the transformer function.
-       * @throws {Error} - If no transformer function is registered for the key.
-       * @returns {Observable<NdfTransformerDataModel[]>} - The result of the transformer function.
-       */
-      NdfTransformService.prototype.transform = function (key, keys) {
-          var fn = this.get(key);
-          if (!fn) {
-              throw new Error("No transformer registered for key: " + key);
-          }
-          return fn(keys);
-      };
-      return NdfTransformService;
-  }());
-  NdfTransformService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfTransformService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-  NdfTransformService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfTransformService, providedIn: 'root' });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfTransformService, decorators: [{
-              type: i0.Injectable,
-              args: [{
-                      providedIn: 'root'
-                  }]
-          }] });
-
   var _TableComponent_resizeObserver;
   var TABLE_MODE = {
       list: 'list',
@@ -15639,7 +15796,7 @@
       return TableColumnsTogglerComponent;
   }(BaseComponent));
   TableColumnsTogglerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TableColumnsTogglerComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  TableColumnsTogglerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableColumnsTogglerComponent, selector: "table-columns-toggler", inputs: { prefix: "prefix", sortable: "sortable", columns: "columns" }, outputs: { columnsChanged: "columnsChanged" }, host: { classAttribute: "columns-toggler" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<button mat-stroked-button [matMenuTriggerFor]=\"menu\" class=\"columns-toggler__button\">\r\n\t<mat-icon inline> tune </mat-icon>\r\n\t{{ 'TABLE.toggleColumns' | translate }}\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"p-0\" xPosition=\"before\">\r\n\t<div\r\n\t\tclass=\"flex justify-between mb-2 border-bottom border-primary-100 top-0 pb-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t>\r\n\t\t<mat-checkbox\r\n\t\t\t*ngIf=\"!!columns?.length && !enableSorting\"\r\n\t\t\t(change)=\"onCheckAllChange($event)\"\r\n\t\t\t[checked]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length === columns?.length\"\r\n\t\t\t[indeterminate]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length < columns?.length\"\r\n\t\t>\r\n\t\t\t{{ 'FILTERS.all' | translate }}\r\n\t\t</mat-checkbox>\r\n\r\n\t\t<button class=\"action-btn apply-sorting-btn\" *ngIf=\"enableSorting\" (click)=\"applySort()\">\r\n\t\t\t{{ 'TABLE.applySorting' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<mat-icon\r\n\t\t\trole=\"button\"\r\n\t\t\t(click)=\"toggleSorting()\"\r\n\t\t\t*ngIf=\"sortEnabled\"\r\n\t\t\t[title]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\t[matTooltip]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\tclass=\"columns-toggler__sort-icon\"\r\n\t\t>\r\n\t\t\t{{ enableSorting ? 'playlist_remove' : 'format_line_spacing' }}\r\n\t\t</mat-icon>\r\n\t</div>\r\n\r\n\t<ul\r\n\t\tclass=\"columns-toggler__columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t[dir]=\"direction\"\r\n\t\tcdkDropList\r\n\t\t[cdkDropListDisabled]=\"!enableSorting && !sortEnabled\"\r\n\t\t(cdkDropListDropped)=\"drop($event)\"\r\n\t>\r\n\t\t<li\r\n\t\t\t*ngFor=\"let col of columns\"\r\n\t\t\tclass=\"mb-2 column-control\"\r\n\t\t\tcdkDrag\r\n\t\t\t[cdkDragDisabled]=\"!enableSorting\"\r\n\t\t\t[class.sorting-enabled]=\"enableSorting\"\r\n\t\t\t[class.column-control__hidden]=\"!columnsSelection.isSelected(col)\"\r\n\t\t>\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n\t<ul\r\n\t\tclass=\"columns-toggler__frozen-columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t*ngIf=\"sortEnabled && frozenColumns?.length\"\r\n\t>\r\n\t\t<li *ngFor=\"let col of frozenColumns\" class=\"column-control\">\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n</mat-menu>\r\n", styles: [".columns-toggler__sort-icon{color:var(--sort-icon-color, #000)}.columns-toggler__columns{max-height:var(--cols-max-height, 275px);overflow-y:auto}.columns-toggler__columns .check-all-box{background:var(--check-background-color, #fff)}.columns-toggler__columns .column-control.sorting-enabled ::ng-deep,.columns-toggler__columns .column-control.sorting-enabled ::ng-deep .mat-checkbox-label{cursor:move}.columns-toggler__columns .column-control.sorting-enabled.cdk-drag-disabled{cursor:not-allowed;background:var(--drag-disabled-background, transparent);box-shadow:0 0 0 3px var(--drag-disabled-background, transparent)}.columns-toggler__columns .column-control__hidden{opacity:.7}.columns-toggler__columns .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}.columns-toggler__columns .cdk-drag-placeholder{opacity:0}.columns-toggler__frozen-columns{border-top:var(--frozen-cols-border-top, 2px solid #ccc);max-height:var(--frozen-cols--max-height, 150px);overflow-y:auto}::ng-deep .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columns-toggler__sort-icon{color:var(--icon-color)!important}.apply-sorting-btn{background-color:var(--logo-button-bg);color:var(--main-text)}\n"], 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"] }, { type: i3__namespace$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3__namespace$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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"] }, { type: i7__namespace$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7__namespace$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  TableColumnsTogglerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TableColumnsTogglerComponent, selector: "table-columns-toggler", inputs: { prefix: "prefix", sortable: "sortable", columns: "columns" }, outputs: { columnsChanged: "columnsChanged" }, host: { classAttribute: "columns-toggler" }, usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<button mat-stroked-button [matMenuTriggerFor]=\"menu\" class=\"columns-toggler__button\">\r\n\t<mat-icon inline> tune </mat-icon>\r\n\t{{ 'TABLE.toggleColumns' | translate }}\r\n</button>\r\n<mat-menu #menu=\"matMenu\" class=\"p-0\" xPosition=\"before\">\r\n\t<div\r\n\t\tclass=\"flex justify-between mb-2 columns-toggler__all top-0 pb-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t>\r\n\t\t<mat-checkbox\r\n\t\t\t*ngIf=\"!!columns?.length && !enableSorting\"\r\n\t\t\t(change)=\"onCheckAllChange($event)\"\r\n\t\t\t[checked]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length === columns?.length\"\r\n\t\t\t[indeterminate]=\"columnsSelection.selected.length > 0 && columnsSelection.selected.length < columns?.length\"\r\n\t\t>\r\n\t\t\t{{ 'FILTERS.all' | translate }}\r\n\t\t</mat-checkbox>\r\n\r\n\t\t<button class=\"action-btn apply-sorting-btn\" *ngIf=\"enableSorting\" (click)=\"applySort()\">\r\n\t\t\t{{ 'TABLE.applySorting' | translate }}\r\n\t\t</button>\r\n\r\n\t\t<mat-icon\r\n\t\t\trole=\"button\"\r\n\t\t\t(click)=\"toggleSorting()\"\r\n\t\t\t*ngIf=\"sortEnabled\"\r\n\t\t\t[title]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\t[matTooltip]=\"(enableSorting ? 'TABLE.disableSorting' : 'TABLE.enableSorting') | translate\"\r\n\t\t\tclass=\"columns-toggler__sort-icon\"\r\n\t\t>\r\n\t\t\t{{ enableSorting ? 'playlist_remove' : 'format_line_spacing' }}\r\n\t\t</mat-icon>\r\n\t</div>\r\n\r\n\t<ul\r\n\t\tclass=\"columns-toggler__columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t[dir]=\"direction\"\r\n\t\tcdkDropList\r\n\t\t[cdkDropListDisabled]=\"!enableSorting && !sortEnabled\"\r\n\t\t(cdkDropListDropped)=\"drop($event)\"\r\n\t>\r\n\t\t<li\r\n\t\t\t*ngFor=\"let col of columns\"\r\n\t\t\tclass=\"mb-2 column-control\"\r\n\t\t\tcdkDrag\r\n\t\t\t[cdkDragDisabled]=\"!enableSorting\"\r\n\t\t\t[class.sorting-enabled]=\"enableSorting\"\r\n\t\t\t[class.column-control__hidden]=\"!columnsSelection.isSelected(col)\"\r\n\t\t>\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n\t<ul\r\n\t\tclass=\"columns-toggler__frozen-columns py-2 px-3\"\r\n\t\t(click)=\"$event.stopPropagation()\"\r\n\t\t*ngIf=\"sortEnabled && frozenColumns?.length\"\r\n\t>\r\n\t\t<li *ngFor=\"let col of frozenColumns\" class=\"column-control\">\r\n\t\t\t<mat-checkbox [checked]=\"columnsSelection.isSelected(col)\" (change)=\"columnsSelection.toggle(col)\">\r\n\t\t\t\t{{ prefix + col.name | translate }}\r\n\t\t\t</mat-checkbox>\r\n\t\t</li>\r\n\t</ul>\r\n</mat-menu>\r\n", styles: [".columns-toggler__all{border-bottom:var(--columns-toggler-border, solid #f0f0f0)}.columns-toggler__sort-icon{color:var(--sort-icon-color, #000)}.columns-toggler__columns{max-height:var(--cols-max-height, 275px);overflow-y:auto}.columns-toggler__columns .check-all-box{background:var(--check-background-color, #fff)}.columns-toggler__columns .column-control.sorting-enabled ::ng-deep,.columns-toggler__columns .column-control.sorting-enabled ::ng-deep .mat-checkbox-label{cursor:move}.columns-toggler__columns .column-control.sorting-enabled.cdk-drag-disabled{cursor:not-allowed;background:var(--drag-disabled-background, transparent);box-shadow:0 0 0 3px var(--drag-disabled-background, transparent)}.columns-toggler__columns .column-control__hidden{opacity:.7}.columns-toggler__columns .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}.columns-toggler__columns .cdk-drag-placeholder{opacity:0}.columns-toggler__frozen-columns{border-top:var(--frozen-cols-border-top, 2px solid #ccc);max-height:var(--frozen-cols--max-height, 150px);overflow-y:auto}::ng-deep .column-control.cdk-drag-preview{box-sizing:border-box;list-style:none;background:var(--secondary-color);box-shadow:var(--drag-preview-shadow, 0 0 0 3px var(--secondary-color), 0 1px 12px -4px #b8b8b8)}::ng-deep .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.columns-toggler__sort-icon{color:var(--icon-color)!important}.apply-sorting-btn{background-color:var(--logo-button-bg);color:var(--main-text)}\n"], 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"] }, { type: i3__namespace$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3__namespace$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["matMenuTriggerRestoreFocus", "mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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"] }, { type: i7__namespace$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7__namespace$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TableColumnsTogglerComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -21406,14 +21563,14 @@
       return TextSearchComponent;
   }(DestroySubject));
   TextSearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextSearchComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-  TextSearchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextSearchComponent, selector: "app-text-search", inputs: { searchConfig: "searchConfig", search: "search" }, outputs: { searchChange: "searchChange", openModal: "openModal", clear: "clear" }, usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"global-search input-wrapper\">\r\n\t<label *ngIf=\"searchConfig?.label\">{{ searchConfig.label | translate }}</label>\r\n\r\n\t<div class=\"position-relative\">\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\tclass=\"global-search__input\"\r\n\t\t\t(keyup.enter)=\"onSearch()\"\r\n\t\t\t[formControl]=\"internalValue\"\r\n\t\t\t[placeholder]=\"searchConfig?.placeholder ?? 'FILTERS.enterText' | translate\"\r\n\t\t/>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"!!internalValue.value\"\r\n\t\t\tclass=\"global-search__suffix__item global-search__clear-button\"\r\n\t\t\t(click)=\"onReset()\"\r\n\t\t>\r\n\t\t\t<i class=\"bi icon-size-5 text-auroMetalSaurus bi-x-lg cursor-pointer\"></i>\r\n\t\t</button>\r\n\t</div>\r\n\r\n\t<div *ngIf=\"searchConfig?.suffix\" class=\"global-search__suffix\">\r\n\t\t<button *ngIf=\"dialogConfig\" class=\"global-search__suffix__item suffix-button\" (click)=\"openModal.emit()\">\r\n\t\t\t<mat-icon>help_outline</mat-icon>\r\n\t\t</button>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"showSendButton\"\r\n\t\t\tclass=\"global-search__suffix__item search-button\"\r\n\t\t\t(click)=\"onSearch()\"\r\n\t\t\t[disabled]=\"!internalValue.value\"\r\n\t\t>\r\n\t\t\t{{ searchConfig?.searchButtonLabel || 'FILTERS.search' | translate }}\r\n\t\t</button>\r\n\t</div>\r\n</div>\r\n", styles: [".global-search{--text-border-color: var(--gs-border-color, var(--border-color));display:var(--gs-display, inline-grid);grid-template-columns:var(--gs-columns, 1fr auto);align-items:var(--gs-align-items, center);border:var(--gs-border, 1px solid);border-color:var(--text-border-color);border-radius:var(--gs-radius, 4px);color:var(--gs-background, var(--main-text));background-color:var(--gs-background, transparent);height:var(--gs-height, calc(1.5em + .75rem + 2px));width:var(--gs-width, 100%)}.global-search:focus-within{--text-border-color: var(--gs-focus-border-color, var(--main-color))}.global-search__input{display:block;padding:var(--gs-input-padding, .375rem .75rem);font-size:1rem;font-weight:400;line-height:1.5;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;border-start-start-radius:var(--gs-radius, 4px);border-end-start-radius:var(--gs-radius, 4px);min-width:0}.global-search__clear-button{position:absolute;inset-inline-end:5px;inset-block-start:0;background-color:var(--gs-background, transparent)}.global-search__suffix{display:inline-flex;align-items:center;grid-gap:var(--gs-suffix-gap, 0 .2rem);gap:var(--gs-suffix-gap, 0 .2rem);border-inline-start:var(--gs-suffix-start-border, 1px solid var(--text-border-color))}.global-search__suffix__item{padding:var(--gs-item-padding, 0 .1rem);width:auto;height:100%;display:grid;place-items:center}.global-search__suffix .search-button{color:var(--gs-search-color, currentColor);background:var(--gs-search-background, transparent);padding:var(--gs-search-padding, 0 .5rem);border-inline-start:var(--gs-suffix-start-border, 1px solid var(--text-border-color));border-radius:var(--gs-search-radius, 3px)}.global-search__suffix .search-button:hover{--mi-search-color: var(--main-color)}\n"], components: [{ 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: i2__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  TextSearchComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TextSearchComponent, selector: "app-text-search", inputs: { searchConfig: "searchConfig", search: "search" }, outputs: { searchChange: "searchChange", openModal: "openModal", clear: "clear" }, usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"global-search input-wrapper\">\r\n\t<label *ngIf=\"searchConfig?.label\">{{ searchConfig.label | translate }}</label>\r\n\r\n\t<div class=\"global-search__container\">\r\n\t\t<input\r\n\t\t\ttype=\"text\"\r\n\t\t\tclass=\"global-search__input\"\r\n\t\t\t(keyup.enter)=\"onSearch()\"\r\n\t\t\t[formControl]=\"internalValue\"\r\n\t\t\t[placeholder]=\"searchConfig?.placeholder ?? 'FILTERS.enterText' | translate\"\r\n\t\t/>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"!!internalValue.value\"\r\n\t\t\tclass=\"global-search__suffix__item global-search__clear-button\"\r\n\t\t\t(click)=\"onReset()\"\r\n\t\t>\r\n\t\t\t<i class=\"bi icon-size-5 text-auroMetalSaurus bi-x-lg cursor-pointer\"></i>\r\n\t\t</button>\r\n\t</div>\r\n\r\n\t<div *ngIf=\"searchConfig?.suffix\" class=\"global-search__suffix\">\r\n\t\t<button *ngIf=\"dialogConfig\" class=\"global-search__suffix__item suffix-button\" (click)=\"openModal.emit()\">\r\n\t\t\t<mat-icon>help_outline</mat-icon>\r\n\t\t</button>\r\n\r\n\t\t<button\r\n\t\t\t*ngIf=\"showSendButton\"\r\n\t\t\tclass=\"global-search__suffix__item search-button\"\r\n\t\t\t(click)=\"onSearch()\"\r\n\t\t\t[disabled]=\"!internalValue.value\"\r\n\t\t>\r\n\t\t\t{{ searchConfig?.searchButtonLabel || 'FILTERS.search' | translate }}\r\n\t\t</button>\r\n\t</div>\r\n</div>\r\n", styles: [".global-search{--text-border-color: var(--gs-border-color, var(--border-color));display:var(--gs-display, inline-grid);grid-template-columns:var(--gs-columns, 1fr auto);align-items:var(--gs-align-items, center);border:var(--gs-border, 1px solid);border-color:var(--text-border-color);border-radius:var(--gs-radius, 4px);color:var(--gs-background, var(--main-text));background-color:var(--gs-background, transparent);height:var(--gs-height, calc(1.5em + .75rem + 2px));width:var(--gs-width, 100%)}.global-search:focus-within{--text-border-color: var(--gs-focus-border-color, var(--main-color))}.global-search__container{position:relative}.global-search__input{display:block;padding:var(--gs-input-padding, .375rem .75rem);font-size:1rem;font-weight:400;line-height:1.5;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;border-start-start-radius:var(--gs-radius, 4px);border-end-start-radius:var(--gs-radius, 4px);min-width:0}.global-search__clear-button{position:absolute;inset-inline-end:5px;inset-block-start:0;background-color:var(--gs-background, transparent)}.global-search__suffix{display:inline-flex;align-items:center;grid-gap:var(--gs-suffix-gap, 0 .2rem);gap:var(--gs-suffix-gap, 0 .2rem);border-inline-start:var(--gs-suffix-start-border, 1px solid var(--text-border-color))}.global-search__suffix__item{padding:var(--gs-item-padding, 0 .1rem);width:auto;height:100%;display:grid;place-items:center}.global-search__suffix .search-button{color:var(--gs-search-color, currentColor);background:var(--gs-search-background, transparent);padding:var(--gs-search-padding, 0 .5rem);border-inline-start:var(--gs-suffix-start-border, 1px solid var(--text-border-color));border-radius:var(--gs-search-radius, 3px)}.global-search__suffix .search-button:hover{--mi-search-color: var(--main-color)}\n"], components: [{ 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: i2__namespace$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$4.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i1__namespace.TranslatePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TextSearchComponent, decorators: [{
               type: i0.Component,
               args: [{
                       selector: 'app-text-search',
                       templateUrl: './text-search.component.html',
                       styleUrls: ['./text-search.component.scss'],
-                      changeDetection: i0.ChangeDetectionStrategy.OnPush
+                      changeDetection: i0.ChangeDetectionStrategy.OnPush,
                   }]
           }], propDecorators: { searchConfig: [{
                   type: i0.Input
@@ -22041,7 +22198,7 @@
       return DynamicTableComponent;
   }());
   DynamicTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicTableComponent, deps: [{ token: AdapterService }, { token: CallApiService }, { token: DynamicTableService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  DynamicTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", isLegacyMode: "isLegacyMode", showTotalRecord: "showTotalRecord", pageNumber: "pageNumber", sortingBy: "sortingBy", queryParam: "queryParam", customFilters: "customFilters", quickFilter: "quickFilter", report: "report", rowCursor: "rowCursor", fullWidth: "fullWidth", tableMode: "tableMode", componentName: "componentName", tableActions: "tableActions", defultSort: "defultSort", range: "range", isSearchPage: "isSearchPage", multiSelectRows: "multiSelectRows", customFirstRow: "customFirstRow", highlightSelectedCard: "highlightSelectedCard", showActionsAsMenu: "showActionsAsMenu", filterParams: "filterParams", skipAggregation: "skipAggregation", customUrl: "customUrl", format: "format", requestActions: "requestActions", pageSizes: "pageSizes" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", sortChanged: "sortChanged", onPageChange: "onPageChange", onPage: "onPage", onLoad: "onLoad", onInitialize: "onInitialize" }, host: { properties: { "class.loading-results": "loading", "class.no-data": "rows.length <= 0" } }, queries: [{ propertyName: "emptyTemplate", first: true, predicate: EMPTY_TEMPLATE, descendants: true, read: i0.TemplateRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"wrapping table-wrapping\">\r\n\t<ng-container *ngIf=\"isLegacyMode\">\r\n\t\t<div class=\"table-reposition\">\r\n\t\t\t<ng-container *ngIf=\"rows.length\" [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<cts-spinner></cts-spinner>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\r\n\t<div class=\"table-reposition\" *ngIf=\"!isLegacyMode\">\r\n\t\t<ng-container  [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"!initialized\"\r\n\t\t\t[ngTemplateOutlet]=\"skeleton\"\r\n\t\t\t[ngTemplateOutletContext]=\"{ $implicit: 10 }\"\r\n\t\t></ng-container>\r\n\t</div>\r\n\r\n\t<div\r\n\t\tclass=\"pagination-iner-wraper d-flex justify-content-center align-items-center my-3\"\r\n\t\t[ngClass]=\"{ relative: pageSizes?.length }\"\r\n\t\t*ngIf=\"rows.length && totalRecords > pageSize\"\r\n\t>\r\n\t\t<cts-pagination\r\n\t\t\t[page]=\"pageNum\"\r\n\t\t\t(change)=\"paginationChange($event)\"\r\n\t\t\t[size]=\"pageSize\"\r\n\t\t\t[count]=\"totalRecords\"\r\n\t\t></cts-pagination>\r\n\t\t<div class=\"absolute ndfPageSizes flex gap-x-3 items-center mt-2\">\r\n\t\t\t<ndf-page-sizes-list\r\n\t\t\t\t*ngIf=\"pageSizes?.length\"\r\n\t\t\t\t[pageSizes]=\"pageSizes\"\r\n\t\t\t\t[selectedPageSize]=\"pageSize\"\r\n\t\t\t\t(onChangePageSize)=\"onChangePageSize($event)\"\r\n\t\t\t>\r\n\t\t\t</ndf-page-sizes-list>\r\n\r\n\t\t\t<span *ngIf=\"showTotalRecord\">{{ 'TABLE.totalRecords' | translate: { count: totalRecords } }}</span>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || legacyDefaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{ $implicit: loading, rows: rows, initialized: initialized }\"\r\n\t></ng-container>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"!isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || defaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{ $implicit: loading, rows: rows, initialized: initialized }\"\r\n\t></ng-container>\r\n</div>\r\n\r\n<ng-template #table>\r\n\t<cts-table\r\n\t\t[rows]=\"rows\"\r\n\t\t[columns]=\"columns\"\r\n\t\t[responsiveColumns]=\"responsiveColumns\"\r\n\t\t[rowCursor]=\"rowCursor\"\r\n\t\t[fullWidth]=\"fullWidth\"\r\n\t\t[entityType]=\"entityType\"\r\n\t\t[prefix]=\"prefix\"\r\n\t\t[totalRecords]=\"totalRecords\"\r\n\t\t[tableMode]=\"tableMode\"\r\n\t\t[componentName]=\"componentName\"\r\n\t\t[multiSelectRows]=\"multiSelectRows\"\r\n\t\t[tableActions]=\"tableActions\"\r\n\t\t[showActionsAsMenu]=\"showActionsAsMenu\"\r\n\t\t[defultSort]=\"defultSort\"\r\n\t\t[format]=\"format\"\r\n\t\t[highlightSelectedCard]=\"highlightSelectedCard\"\r\n\t\t[customFirstRow]=\"customFirstRow\"\r\n\t\t(onRowSelected)=\"rowDetails($event)\"\r\n\t\t(onRowIndexSelected)=\"indexDetails($event)\"\r\n\t\t(onMultiRowSelected)=\"onMultiRowSelectValue($event)\"\r\n\t\t(actionOnRow)=\"performAction($event)\"\r\n\t\t(onSorting)=\"onSort($event)\"\r\n\t></cts-table>\r\n</ng-template>\r\n\r\n<ng-template #legacyDefaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"empty-state\" *ngIf=\"loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'gettingData' : 'gettingData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #defaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div *ngIf=\"loading && initialized\" class=\"loading-content\">\r\n\t\t<mat-spinner [diameter]=\"100\"></mat-spinner>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #skeleton let-rows>\r\n\t<table class=\"w-full\">\r\n\t\t<thead *ngIf=\"false\">\r\n\t\t\t<tr class=\"border-b border-green-900\">\r\n\t\t\t\t<th *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 60px\">\r\n\t\t\t\t\t<app-skeleton width=\"60px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t\t<th *ngFor=\"let num of [].constructor(columns?.length || 4); let i = index\" class=\"px-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.7rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t</tr>\r\n\t\t</thead>\r\n\t\t<tbody>\r\n\t\t\t<tr *ngFor=\"let row of [].constructor(rows || 10); let index = index\" class=\"border-b border-gray-200\">\r\n\t\t\t\t<td *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 50px\">\r\n\t\t\t\t\t<app-skeleton width=\"50px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t\t<td *ngFor=\"let col of [].constructor(columns?.length || 4); let i = index\" class=\"p-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</tbody>\r\n\t</table>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.wrapping{position:relative}.wrapping .table-reposition{overflow-y:var(--table-reposition-overflow-y, hidden);scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-x:hidden}.empty-state{padding:200px;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:bold}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#b4bac6}.dark-scroll::-webkit-scrollbar-thumb{background:#8f98aa}.ndfPageSizes{right:0;left:unset}.rtl .ndfPageSizes{right:unset;left:0}.loading-content{position:absolute;inset:0;display:grid;place-items:center;background:var(--loading-content-background, rgba(255, 255, 255, .2));-webkit-backdrop-filter:var(--loading-content-backdrop-filter, blur(3px));backdrop-filter:var(--loading-content-backdrop-filter, blur(3px))}\n"], components: [{ type: SpinnerComponent, selector: "cts-spinner" }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }, { type: PageSizesListComponent, selector: "ndf-page-sizes-list", inputs: ["pageSizes", "selectedPageSize"], outputs: ["onChangePageSize"] }, { type: TableComponent, selector: "cts-table", inputs: ["rows", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }, { type: i3__namespace$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: SkeletonComponent, selector: "app-skeleton", inputs: ["styleClass", "style", "shape", "animation", "radius", "size", "width", "height", "randomWidth"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
+  DynamicTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: { columns: "columns", responsiveColumns: "responsiveColumns", entityType: "entityType", prefix: "prefix", headers: "headers", fields: "fields", pageProvider: "pageProvider", pageSize: "pageSize", isLegacyMode: "isLegacyMode", showTotalRecord: "showTotalRecord", pageNumber: "pageNumber", sortingBy: "sortingBy", queryParam: "queryParam", customFilters: "customFilters", quickFilter: "quickFilter", report: "report", rowCursor: "rowCursor", fullWidth: "fullWidth", tableMode: "tableMode", componentName: "componentName", tableActions: "tableActions", defultSort: "defultSort", range: "range", isSearchPage: "isSearchPage", multiSelectRows: "multiSelectRows", customFirstRow: "customFirstRow", highlightSelectedCard: "highlightSelectedCard", showActionsAsMenu: "showActionsAsMenu", filterParams: "filterParams", skipAggregation: "skipAggregation", customUrl: "customUrl", format: "format", requestActions: "requestActions", pageSizes: "pageSizes" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", sortChanged: "sortChanged", onPageChange: "onPageChange", onPage: "onPage", onLoad: "onLoad", onInitialize: "onInitialize" }, host: { properties: { "class.loading-results": "loading", "class.no-data": "rows.length <= 0" } }, queries: [{ propertyName: "emptyTemplate", first: true, predicate: EMPTY_TEMPLATE, descendants: true, read: i0.TemplateRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"wrapping table-wrapping\">\r\n\t<ng-container *ngIf=\"isLegacyMode\">\r\n\t\t<div class=\"table-reposition\">\r\n\t\t\t<ng-container *ngIf=\"rows.length\" [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngIf=\"loading\">\r\n\t\t\t<cts-spinner></cts-spinner>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n\r\n\t<div class=\"table-reposition\" *ngIf=\"!isLegacyMode\">\r\n\t\t<ng-container  [ngTemplateOutlet]=\"table\"></ng-container>\r\n\t\t<ng-container\r\n\t\t\t*ngIf=\"!initialized\"\r\n\t\t\t[ngTemplateOutlet]=\"skeleton\"\r\n\t\t\t[ngTemplateOutletContext]=\"{ $implicit: 10 }\"\r\n\t\t></ng-container>\r\n\t</div>\r\n\r\n\t<div\r\n\t\tclass=\"pagination-iner-wraper my-3\"\r\n\t\t[ngClass]=\"{ relative: pageSizes?.length }\"\r\n\t\t*ngIf=\"rows.length \"\r\n\t>\r\n\t\t<cts-pagination\r\n      *ngIf=\"totalRecords > pageSize\"\r\n\t\t\t[page]=\"pageNum\"\r\n\t\t\t(change)=\"paginationChange($event)\"\r\n\t\t\t[size]=\"pageSize\"\r\n\t\t\t[count]=\"totalRecords\"\r\n\t\t></cts-pagination>\r\n\t\t<div class=\"absolute ndfPageSizes flex gap-x-3 items-center mt-2\">\r\n\t\t\t<ndf-page-sizes-list\r\n\t\t\t\t*ngIf=\"pageSizes?.length\"\r\n\t\t\t\t[pageSizes]=\"pageSizes\"\r\n\t\t\t\t[selectedPageSize]=\"pageSize\"\r\n\t\t\t\t(onChangePageSize)=\"onChangePageSize($event)\"\r\n\t\t\t>\r\n\t\t\t</ndf-page-sizes-list>\r\n\r\n\t\t\t<span *ngIf=\"showTotalRecord\">{{ 'TABLE.totalRecords' | translate: { count: totalRecords } }}</span>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || legacyDefaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{ $implicit: loading, rows: rows, initialized: initialized }\"\r\n\t></ng-container>\r\n\r\n\t<ng-container\r\n\t\t*ngIf=\"!isLegacyMode\"\r\n\t\t[ngTemplateOutlet]=\"emptyTemplate || defaultEmptyState\"\r\n\t\t[ngTemplateOutletContext]=\"{ $implicit: loading, rows: rows, initialized: initialized }\"\r\n\t></ng-container>\r\n</div>\r\n\r\n<ng-template #table>\r\n\t<cts-table\r\n\t\t[rows]=\"rows\"\r\n\t\t[columns]=\"columns\"\r\n\t\t[responsiveColumns]=\"responsiveColumns\"\r\n\t\t[rowCursor]=\"rowCursor\"\r\n\t\t[fullWidth]=\"fullWidth\"\r\n\t\t[entityType]=\"entityType\"\r\n\t\t[prefix]=\"prefix\"\r\n\t\t[totalRecords]=\"totalRecords\"\r\n\t\t[tableMode]=\"tableMode\"\r\n\t\t[componentName]=\"componentName\"\r\n\t\t[multiSelectRows]=\"multiSelectRows\"\r\n\t\t[tableActions]=\"tableActions\"\r\n\t\t[showActionsAsMenu]=\"showActionsAsMenu\"\r\n\t\t[defultSort]=\"defultSort\"\r\n\t\t[format]=\"format\"\r\n\t\t[highlightSelectedCard]=\"highlightSelectedCard\"\r\n\t\t[customFirstRow]=\"customFirstRow\"\r\n\t\t(onRowSelected)=\"rowDetails($event)\"\r\n\t\t(onRowIndexSelected)=\"indexDetails($event)\"\r\n\t\t(onMultiRowSelected)=\"onMultiRowSelectValue($event)\"\r\n\t\t(actionOnRow)=\"performAction($event)\"\r\n\t\t(onSorting)=\"onSort($event)\"\r\n\t></cts-table>\r\n</ng-template>\r\n\r\n<ng-template #legacyDefaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div class=\"empty-state\" *ngIf=\"loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'gettingData' : 'gettingData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #defaultEmptyState>\r\n\t<div class=\"empty-state\" *ngIf=\"!loading && rows.length === 0\">\r\n\t\t<div class=\"text\">\r\n\t\t\t{{ (prefix ? prefix + 'noData' : 'noData') | translate }}\r\n\t\t</div>\r\n\t</div>\r\n\t<div *ngIf=\"loading && initialized\" class=\"loading-content\">\r\n\t\t<mat-spinner [diameter]=\"100\"></mat-spinner>\r\n\t</div>\r\n</ng-template>\r\n\r\n<ng-template #skeleton let-rows>\r\n\t<table class=\"w-full\">\r\n\t\t<thead *ngIf=\"false\">\r\n\t\t\t<tr class=\"border-b border-green-900\">\r\n\t\t\t\t<th *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 60px\">\r\n\t\t\t\t\t<app-skeleton width=\"60px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t\t<th *ngFor=\"let num of [].constructor(columns?.length || 4); let i = index\" class=\"px-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.7rem\"></app-skeleton>\r\n\t\t\t\t</th>\r\n\t\t\t</tr>\r\n\t\t</thead>\r\n\t\t<tbody>\r\n\t\t\t<tr *ngFor=\"let row of [].constructor(rows || 10); let index = index\" class=\"border-b border-gray-200\">\r\n\t\t\t\t<td *ngIf=\"multiSelectRows\" class=\"p-3 py-4\" style=\"width: 50px\">\r\n\t\t\t\t\t<app-skeleton width=\"50px\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t\t<td *ngFor=\"let col of [].constructor(columns?.length || 4); let i = index\" class=\"p-3 py-4\">\r\n\t\t\t\t\t<app-skeleton [randomWidth]=\"true\" height=\"1.3rem\"></app-skeleton>\r\n\t\t\t\t</td>\r\n\t\t\t</tr>\r\n\t\t</tbody>\r\n\t</table>\r\n</ng-template>\r\n", styles: [".bi{margin:0!important}.memo-sorting-wrapper{width:265px;margin:0 10px;height:100%;display:flex}.memo-sorting-wrapper .sorting-direction{width:65px;height:40px;background-color:#465573;color:#fff;font-size:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.memo-sorting-wrapper .memo-sorting-trigger{width:calc(100% - 65px);height:100%;background-color:transparent;border:1px solid lightgrey;display:flex;justify-content:space-between;align-items:center;padding:0 15px;font-size:14px}.memo-sorting-wrapper .memo-sorting-trigger i{font-size:16px;color:gray}.memo-sorting-menu{width:200px}.my-button{border:1px solid #465573;color:#465573;border-radius:5px;background-color:transparent;font-weight:bold;min-width:80px;height:40px}.my-button.reset{border:none}.my-button:hover{color:#fff;background-color:#465573}.my-button:hover.reset{color:#465573;border:1px solid #465573;background-color:#fff}.app-property-value .app-input-wrapper label{color:#646f85;font-size:13px;margin-bottom:5px}.app-property-value .app-input-wrapper label .text-danger{font-size:16px;line-height:14px;margin:0 5px!important}.app-property-value .app-input-wrapper .form-control{border:1px solid #ccc;border-radius:5px;background-color:#8f98aa1a;height:40px}.app-property-value .app-input-wrapper .form-control:disabled{background-color:#e9ecef!important}.app-property-value .app-input-wrapper .form-control:focus{border:1px solid #1a96c6;box-shadow:0 0 4px #79c3c26b!important}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers{list-style:none;padding:0;margin:0;font-size:14px}.app-property-value .app-input-wrapper .app-textitem-editable-error .error-containers .error{margin-top:5px}.autocomplete-container .input-container input:focus,hijri-gregorian-datepicker .form-group .input-group .form-control:focus,.ng-select.ng-select-focused .ng-select-container{border:1px solid #1a96c6!important;box-shadow:0 0 4px #79c3c26b!important}input::placeholder{font-size:12px}.form-control:focus{box-shadow:none!important}.mat-stepper-horizontal{margin-top:-25px}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header.cdk-program-focused{background-color:transparent}.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-icon-selected{background-color:transparent;color:#fff;background-image:linear-gradient(to right,#0dbab5,#1a96c6)}@media only screen and (max-width: 576px){.mat-stepper-horizontal .mat-horizontal-stepper-header-container .mat-step-header .mat-step-label .mat-step-text-label{white-space:pre-wrap;overflow:visible}}.mat-stepper-horizontal .mat-horizontal-content-container{overflow:visible}@media only screen and (max-width: 768px){.mat-stepper-horizontal .mat-horizontal-content-container{padding:0 0 24px}}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:after,.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:before{display:none}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:first-child:before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);left:0}.mat-stepper-horizontal.rtl .mat-horizontal-stepper-header:last-child:after{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);right:0}.form-wrapper{padding:30px 15px;border:1px solid #dde0e2}.form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.form-wrapper .buttons-wrapper button:hover{opacity:.7}.form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.form-wrapper .upload-wrapper button span{margin:0 10px}.renameFileComponent .form-wrapper{padding:30px 15px;border:none!important}.renameFileComponent .form-wrapper .buttons-wrapper{display:flex;justify-content:space-between}.renameFileComponent .form-wrapper .buttons-wrapper .action-buttons-wrapper{display:flex}.renameFileComponent .form-wrapper .buttons-wrapper button{background-image:linear-gradient(to right,#0dbab5,#1a96c6);height:40px;color:#fff;border:none;width:125px;margin-top:20px;border-radius:5px}.renameFileComponent .form-wrapper .buttons-wrapper button:disabled{opacity:.4;cursor:not-allowed}.renameFileComponent .form-wrapper .buttons-wrapper button:hover{opacity:.7}.renameFileComponent .form-wrapper .upload-wrapper{display:flex;flex-direction:column;justify-content:flex-end}.renameFileComponent .form-wrapper .upload-wrapper label{color:#8f98aa;font-size:14px}.renameFileComponent .form-wrapper .upload-wrapper button{padding:10px;border:1px solid lightgray}.renameFileComponent .form-wrapper .upload-wrapper button span{margin:0 10px}.my-dynamic-viewer{display:flex;align-items:center;font-size:12px;min-height:30px}.my-dynamic-viewer .my-label{font-size:12px;font-weight:500;width:150px;word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-label{width:50%}}.my-dynamic-viewer .my-value{width:calc(100% - 150px);word-break:break-word}@media (max-width: 992px){.my-dynamic-viewer .my-value{width:50%}}.my-dynamic-viewer .direction-img{font-size:14px}.my-dynamic-viewer .direction-img .incoming{display:none}.my-dynamic-viewer .direction-img .outgoing{display:none}.my-dynamic-viewer .direction-img .internal{display:none}.my-dynamic-viewer.draft .my-value{color:#596973}.my-dynamic-viewer.inProgress .my-value{color:#3c3cf0}.my-dynamic-viewer.registered .my-value{color:#4f008c}.my-dynamic-viewer.archived .my-value{color:#fbb62c}.my-dynamic-viewer.closed .my-value{color:#00dca5}.my-dynamic-viewer.approved .my-value{color:#06a57e}.my-dynamic-viewer.assigned .my-value{color:#fd6670}.my-dynamic-viewer.sent .my-value{color:#3c3cf0}.my-dynamic-viewer.published .my-value{color:#00dca5}.my-dynamic-viewer.Outgoing .my-value{display:flex}.my-dynamic-viewer.Outgoing .my-value .direction-img .outgoing{color:#fbb62c;margin:1px 5px;display:flex}.my-dynamic-viewer.Outgoing .my-value .text{margin:0 5px}.my-dynamic-viewer.Internal .my-value{display:flex}.my-dynamic-viewer.Internal .my-value .direction-img .internal{color:#3c3cf0;margin:1px 5px;display:flex}.my-dynamic-viewer.Internal .my-value .text{margin:0 5px}.my-dynamic-viewer.Incoming .my-value{display:flex}.my-dynamic-viewer.Incoming .my-value .direction-img .incoming{color:#00dca5;display:flex}.my-dynamic-viewer.Incoming .my-value .text{margin:-3px 5px 0}.my-dynamic-viewer.vertical{display:block}.my-dynamic-viewer.vertical .my-label{width:auto}.my-dynamic-viewer.vertical .my-value{width:auto}.my-dynamic-viewer.with-out-label{width:100%!important}.wrapping{position:relative}.wrapping .table-reposition{overflow-y:var(--table-reposition-overflow-y, hidden);scrollbar-color:#b4bac6 transparent!important;scrollbar-width:thin!important;overflow-x:hidden}.empty-state{padding:200px;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:bold}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#b4bac6}.dark-scroll::-webkit-scrollbar-thumb{background:#8f98aa}.ndfPageSizes{right:0;left:unset}.rtl .ndfPageSizes{right:unset;left:0}.loading-content{position:var(--loading-content-position, absolute);inset:0;display:grid;place-items:center;background:var(--loading-content-background, rgba(255, 255, 255, .2));-webkit-backdrop-filter:var(--loading-content-backdrop-filter, blur(3px));backdrop-filter:var(--loading-content-backdrop-filter, blur(3px))}.pagination-iner-wraper{display:var(--pagination-inner-display, flex);justify-content:var(--pagination-inner-justify, center);align-items:var(--pagination-inner-align, center)}\n"], components: [{ type: SpinnerComponent, selector: "cts-spinner" }, { type: PaginationComponent, selector: "cts-pagination", inputs: ["size", "count", "page"], outputs: ["change"] }, { type: PageSizesListComponent, selector: "ndf-page-sizes-list", inputs: ["pageSizes", "selectedPageSize"], outputs: ["onChangePageSize"] }, { type: TableComponent, selector: "cts-table", inputs: ["rows", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }, { type: i3__namespace$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: SkeletonComponent, selector: "app-skeleton", inputs: ["styleClass", "style", "shape", "animation", "radius", "size", "width", "height", "randomWidth"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1__namespace.TranslatePipe }, encapsulation: i0__namespace.ViewEncapsulation.None });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: DynamicTableComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -22465,8 +22622,8 @@
           _this._customCriteriaSub = new rxjs.BehaviorSubject({
               params: {},
               payload: {
-                  predicateList: []
-              }
+                  predicateList: [],
+              },
           });
           _this.aggregations$ = _this._aggregationsSub.asObservable();
           _this.displayedColumns$ = _this._displayedColumnsSub.asObservable();
@@ -22474,10 +22631,14 @@
           _this.viewMode$ = _this._viewModeSub.asObservable();
           _this.customFilters$ = _this._customCriteriaSub.asObservable();
           _this.textSearch$ = _this._textSearchSub.asObservable();
-          _this.searchAndFilters$ = rxjs.combineLatest([_this.textSearch$, _this.customFilters$]).pipe(operators.map(function (res) { return _this._prepareSearch(res); }));
+          _this.searchAndFilters$ = rxjs.combineLatest([
+              _this.textSearch$,
+              _this.customFilters$,
+          ]).pipe(operators.map(function (res) { return _this._prepareSearch(res); }));
           _this.autoCalculateHeight = true;
           _this.emptyMessage = 'table_noData';
           _this.configPath = 'tables';
+          _this.styleClass = '';
           _this.jsonEditorEnabled = false;
           _this.onRowSelected = new i0.EventEmitter();
           _this.onRowIndexSelected = new i0.EventEmitter();
@@ -22501,7 +22662,7 @@
           _this._activePage = {
               pageIndex: 1,
               pageSize: 10,
-              length: 0
+              length: 0,
           };
           _this.editorType = NDF_EDITOR_TYPE.TABLES;
           _this._translateService.onLangChange
@@ -22651,11 +22812,14 @@
       NdfTableComponent.prototype.onLoad = function (data) {
           var _a, _b, _c;
           this.onLoaded.emit(data);
-          if (!this._tableInitialized || ((_a = this.filterReloadConfig) === null || _a === void 0 ? void 0 : _a.strategy) === 'never' || this._pageChanged) {
+          if (!this._tableInitialized ||
+              ((_a = this.filterReloadConfig) === null || _a === void 0 ? void 0 : _a.strategy) === 'never' ||
+              this._pageChanged) {
               this._pageChanged = false;
               return;
           }
-          if (this._isConfigChanged || ((_b = this.filterReloadConfig) === null || _b === void 0 ? void 0 : _b.strategy) === 'always') {
+          if (this._isConfigChanged ||
+              ((_b = this.filterReloadConfig) === null || _b === void 0 ? void 0 : _b.strategy) === 'always') {
               this._aggregationsSub.next(data === null || data === void 0 ? void 0 : data.aggregations);
               return;
           }
@@ -22702,7 +22866,9 @@
           var fields = columns.map(function (col) { return col.headerClass || (col === null || col === void 0 ? void 0 : col.filedKey); });
           var headers = columns.map(function (col) { return (_this.tableConfig.prefix || '') + col.name; });
           var criteria = this._customCriteriaSub.getValue();
-          request.params = Object.assign({}, criteria.params, this._sortValue || {}, ((_b = this.tableConfig) === null || _b === void 0 ? void 0 : _b.quickFilters) ? { quickFilters: this.tableConfig.quickFilters } : {}, request.params);
+          request.params = Object.assign({}, criteria.params, this._sortValue || {}, ((_b = this.tableConfig) === null || _b === void 0 ? void 0 : _b.quickFilters)
+              ? { quickFilters: this.tableConfig.quickFilters }
+              : {}, request.params);
           var blobNameKey = (_c = this.exportTableConfig) === null || _c === void 0 ? void 0 : _c.blobName;
           var payload = {
               predicateList: criteria.payload.predicateList || [],
@@ -22712,12 +22878,12 @@
                   fileType: type,
                   locale: ((_d = this.exportTableConfig) === null || _d === void 0 ? void 0 : _d.locale) || this._translateService.currentLang,
                   fields: ((_e = this.exportTableConfig) === null || _e === void 0 ? void 0 : _e.fields) || fields,
-                  headers: []
-              }
+                  headers: [],
+              },
           };
           rxjs.forkJoin({
               ar: this._translateService.getTranslation('ar'),
-              en: this._translateService.getTranslation('en')
+              en: this._translateService.getTranslation('en'),
           })
               .pipe(operators.switchMap(function (translations) {
               var currentTranslations = translations[_this._translateService.currentLang];
@@ -22743,7 +22909,9 @@
           this._triggerCriteriaChanges(criteria);
           if (((_a = this.filtersConfig) === null || _a === void 0 ? void 0 : _a.mode) !== 'payload') {
               var isStringifyParams = (_b = this.filtersConfig) === null || _b === void 0 ? void 0 : _b.stringifyParams;
-              var value = !isStringifyParams ? criteria : this._stringifyValues(criteria);
+              var value = !isStringifyParams
+                  ? criteria
+                  : this._stringifyValues(criteria);
               this._dynamicTableService.refreshData.next(value);
               return;
           }
@@ -22774,7 +22942,9 @@
           this._dialog.open(HtmlDialogComponent, Object.assign(Object.assign({ panelClass: 'p-0', minWidth: 'min(500px,60vw)', direction: this.direction }, options), { data: data }));
       };
       NdfTableComponent.prototype.onPageChanged = function (page) {
-          this._pageChanged = this._activePage.pageIndex !== page.pageIndex || this._activePage.pageSize !== page.pageSize;
+          this._pageChanged =
+              this._activePage.pageIndex !== page.pageIndex ||
+                  this._activePage.pageSize !== page.pageSize;
           if (this._pageChanged) {
               this.onPage.emit(page);
               this._activePage = page;
@@ -22798,7 +22968,7 @@
                       predicateList.push({
                           name: _key_1,
                           operator: ((_b = this.textSearchConfig) === null || _b === void 0 ? void 0 : _b.operator) || COMPARISON_OPERATOR.equals,
-                          value: "'" + search + "'"
+                          value: "'" + search + "'",
                       });
                   }
               }
@@ -22823,7 +22993,7 @@
           var previousValue = activatedQuery === null || activatedQuery === void 0 ? void 0 : activatedQuery.currentValue;
           this._activatedCriteriaSub.next({
               previousValue: previousValue,
-              currentValue: criteria
+              currentValue: criteria,
           });
       };
       /**
@@ -22872,7 +23042,7 @@
       return NdfTableComponent;
   }(DestroySubject));
   NdfTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfTableComponent, deps: [{ token: FiltersMapperService }, { token: DynamicTableService }, { token: i1__namespace.TranslateService }, { token: NdfTableService }, { token: CustomToastrService }, { token: NdfTableConfigurationService }, { token: i1__namespace$3.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NdfTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfTableComponent, selector: "app-ndf-table", inputs: { rows: "rows", totalRecords: "totalRecords", autoCalculateHeight: "autoCalculateHeight", emptyMessage: "emptyMessage", activeQuery: "activeQuery", configPath: "configPath", configTransformer: "configTransformer", tableKey: "tableKey", jsonEditorEnabled: "jsonEditorEnabled", config: "config", customCriteria: "customCriteria", searchTerm: "searchTerm" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", onPage: "onPage", onInitialized: "onInitialized", onLoaded: "onLoaded", onQueryChange: "onQueryChange", onSort: "onSort" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-table" }, queries: [{ propertyName: "actionsTableTemplate", first: true, predicate: ACTIONS_TABLE_TEMPLATE, descendants: true, read: i0.TemplateRef }, { propertyName: "searchTableTemplate", first: true, predicate: SEARCH_TABLE_TEMPLATE, descendants: true, read: i0.TemplateRef }, { propertyName: "filterCustomTemplate", first: true, predicate: FILTER_CUSTOM_TEMPLATE, descendants: true, read: i0.TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n\t*ngIf=\"tableConfig\"\r\n\tclass=\"ndf-table__container\"\r\n\t[class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n\t[dir]=\"direction\"\r\n\tndfFluidHeight\r\n\tcssVar=\"--ndf-table-height\"\r\n\t[calculate]=\"autoCalculateHeight\"\r\n>\r\n\t<div class=\"ndf-table__panel\" *ngIf=\"filtersConfig?.fields\">\r\n\t\t<app-filters-panel\r\n\t\t\t[fields]=\"filtersConfig.fields\"\r\n\t\t\t[aggregations]=\"aggregations$ | async\"\r\n\t\t\t(filterChanged)=\"filterChanged($event)\"\r\n\t\t\t[activeQuery]=\"activeQuery\"\r\n\t\t\tclass=\"ndf-table__filters\"\r\n\t\t\t[customTemplateRef]=\"filterCustomTemplate\"\r\n\t\t></app-filters-panel>\r\n\t</div>\r\n\t<div class=\"ndf-table__content\">\r\n\t\t<div class=\"ndf-table__header flex\">\r\n\t\t\t<div class=\"ndf-table__header__custom-actions flex gap-x-4 items-center\">\r\n\t\t\t\t<ng-container\r\n\t\t\t\t\t[ngTemplateOutlet]=\"searchTableTemplate || defaultActionTemplate\"\r\n\t\t\t\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t\t\t\t$implicit: tableConfig,\r\n\t\t\t\t\t\tpanelOpened: isPanelOpened,\r\n\t\t\t\t\t\ttogglePanel: togglePanel,\r\n\t\t\t\t\t\topenModal: openSearchModal,\r\n\t\t\t\t\t\tsearch: onTextSearch,\r\n\t\t\t\t\t\tclear: onClearSearch\r\n\t\t\t\t\t}\"\r\n\t\t\t\t></ng-container>\r\n\r\n\t\t\t\t<ng-template #defaultActionTemplate>\r\n\t\t\t\t\t<button mat-stroked-button *ngIf=\"isPanelToggleAvailable\" 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<app-text-search\r\n\t\t\t\t\t\t*ngIf=\"textSearchConfig\"\r\n\t\t\t\t\t\t[searchConfig]=\"textSearchConfig\"\r\n\t\t\t\t\t\t(openModal)=\"openSearchModal()\"\r\n\t\t\t\t\t\t[search]=\"textSearch$ | async\"\r\n\t\t\t\t\t\t(searchChange)=\"onTextSearch($event)\"\r\n\t\t\t\t\t\t(clear)=\"onClearSearch()\"\r\n\t\t\t\t\t></app-text-search>\r\n\t\t\t\t</ng-template>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"ndf-table__header__actions flex gap-x-4 items-center\">\r\n\t\t\t\t<app-editor-button\r\n\t\t\t\t\t*ngIf=\"jsonEditorEnabled && (tableKey || tableConfig?.key)\"\r\n\t\t\t\t\t[key]=\"tableKey || tableConfig?.key\"\r\n          [type]=\"editorType\"\r\n\t\t\t\t></app-editor-button>\r\n\t\t\t\t<ndf-table-export\r\n\t\t\t\t\t*ngIf=\"exportTableConfig?.enabled\"\r\n\t\t\t\t\t[config]=\"exportTableConfig\"\r\n\t\t\t\t\t(onExport)=\"exportTable($event)\"\r\n\t\t\t\t></ndf-table-export>\r\n\r\n\t\t\t\t<table-sorting-list\r\n\t\t\t\t\t*ngIf=\"!!sortList?.length\"\r\n\t\t\t\t\t[sortList]=\"sortList\"\r\n\t\t\t\t\t(sortChanged)=\"sortChanged($event)\"\r\n\t\t\t\t></table-sorting-list>\r\n\t\t\t\t<table-columns-toggler\r\n\t\t\t\t\t*ngIf=\"columnToggle\"\r\n\t\t\t\t\t[columns]=\"tableConfig.columns\"\r\n\t\t\t\t\t[prefix]=\"tableConfig.prefix\"\r\n\t\t\t\t\t[sortable]=\"columnsOptions?.sortable\"\r\n\t\t\t\t\t(columnsChanged)=\"columnsChanged($event)\"\r\n\t\t\t\t></table-columns-toggler>\r\n\t\t\t\t<mode-toggler\r\n\t\t\t\t\t*ngIf=\"tableMode?.toggleMode\"\r\n\t\t\t\t\t[mode]=\"tableMode.mode || 'list'\"\r\n\t\t\t\t\t[modesList]=\"tableMode?.availableMode\"\r\n\t\t\t\t\t(modeChanged)=\"modeChanged($event)\"\r\n\t\t\t\t></mode-toggler>\r\n\t\t\t\t<ng-container\r\n\t\t\t\t\t[ngTemplateOutlet]=\"actionsTableTemplate\"\r\n\t\t\t\t\t[ngTemplateOutletContext]=\"{\r\n\t\t\t\t\t\t$implicit: tableConfig,\r\n\t\t\t\t\t\tpanelOpened: isPanelOpened,\r\n\t\t\t\t\t\ttogglePanel: togglePanel,\r\n\t\t\t\t\t\topenModal: openSearchModal,\r\n\t\t\t\t\t\tsearch: onTextSearch,\r\n\t\t\t\t\t\tclear: onClearSearch\r\n\t\t\t\t\t}\"\r\n\t\t\t\t></ng-container>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<cts-dynamic-table\r\n\t\t\t*ngIf=\"!tableConfig.isDataProvided\"\r\n\t\t\tclass=\"ndf-table__table table-style\"\r\n\t\t\t[columns]=\"displayedColumns$ | async\"\r\n\t\t\t[responsiveColumns]=\"displayedColumns$ | async\"\r\n\t\t\t[fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n\t\t\t[pageSize]=\"tableConfig.pageSize || 10\"\r\n\t\t\t[pageNumber]=\"tableConfig.pageNumber || 1\"\r\n\t\t\t[pageProvider]=\"tableConfig.pageProvider\"\r\n\t\t\t[customUrl]=\"tableConfig.customUrl\"\r\n\t\t\t[quickFilter]=\"tableConfig.quickFilters ? { quickFilters: tableConfig.quickFilters } : undefined\"\r\n\t\t\t[defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n\t\t\t[sortingBy]=\"sortOption$ | async\"\r\n\t\t\t[entityType]=\"'all'\"\r\n\t\t\t[fields]=\"tableConfig.fields\"\r\n\t\t\t[tableMode]=\"viewMode$ | async\"\r\n\t\t\t[componentName]=\"tableMode?.['componentName']\"\r\n\t\t\t[range]=\"tableConfig?.range\"\r\n\t\t\t[isSearchPage]=\"tableConfig?.isSearchPage\"\r\n\t\t\t[multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n\t\t\t[customFirstRow]=\"tableConfig?.customFirstRow\"\r\n\t\t\t[highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n\t\t\t[showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n\t\t\t[filterParams]=\"tableConfig?.filterParams\"\r\n\t\t\t[format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n\t\t\t[pageSizes]=\"tableConfig?.pageSizes || defaultPageSizes\"\r\n\t\t\t[prefix]=\"tableConfig.prefix || ''\"\r\n\t\t\t[rowCursor]=\"true\"\r\n\t\t\t[queryParam]=\"tableConfig.queryParam\"\r\n\t\t\t[customFilters]=\"searchAndFilters$ | async\"\r\n\t\t\t[tableActions]=\"tableConfig.tableActions\"\r\n      [requestActions]=\"tableConfig?.requestActions\"\r\n\t\t\t[headers]=\"tableConfig.headers\"\r\n\t\t\t(onRowSelected)=\"onRowSelected.emit($event)\"\r\n\t\t\t(onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n\t\t\t(actionOnRow)=\"actionOnRow.emit($event)\"\r\n\t\t\t(onGettingData)=\"onGettingData.emit($event)\"\r\n\t\t\t(onLoad)=\"onLoad($event)\"\r\n\t\t\t(onInitialize)=\"onInitialize($event)\"\r\n\t\t\t(onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n\t\t\t(onLoading)=\"onLoading.emit($event)\"\r\n\t\t\t(onPage)=\"onPageChanged($event)\"\r\n\t\t\t[isLegacyMode]=\"false\"\r\n\t\t\t[showTotalRecord]=\"true\"\r\n\t\t\t(sortChanged)=\"onSortChanged($event)\"\r\n\t\t>\r\n\t\t\t<ng-template emptyTemplate let-isLoading let-rows=\"rows\" let-initialized=\"initialized\">\r\n\t\t\t\t<div class=\"loading-data\" *ngIf=\"isLoading && initialized\">\r\n\t\t\t\t\t<mat-spinner></mat-spinner>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t<div class=\"flex items-center justify-center h-5/6\" *ngIf=\"!isLoading && !rows.length\">\r\n\t\t\t\t\t<app-no-data-found class=\"mt-4\" [message]=\"emptyMessage\"></app-no-data-found>\r\n\t\t\t\t</div>\r\n\t\t\t</ng-template>\r\n\t\t</cts-dynamic-table>\r\n\r\n\t\t<cts-table\r\n\t\t\t*ngIf=\"tableConfig.isDataProvided\"\r\n\t\t\t[rows]=\"rows\"\r\n\t\t\t[totalRecords]=\"totalRecords\"\r\n\t\t\t[columns]=\"displayedColumns$ | async\"\r\n\t\t\t[responsiveColumns]=\"displayedColumns$ | async\"\r\n\t\t\t[rowCursor]=\"true\"\r\n\t\t\t[fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n\t\t\t[entityType]=\"'all'\"\r\n\t\t\t[prefix]=\"tableConfig.prefix || ''\"\r\n\t\t\t[tableMode]=\"viewMode$ | async\"\r\n\t\t\t[componentName]=\"tableMode?.['componentName']\"\r\n\t\t\t[multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n\t\t\t[customFirstRow]=\"tableConfig?.customFirstRow\"\r\n\t\t\t[tableActions]=\"tableConfig.tableActions\"\r\n\t\t\t[showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n\t\t\t[defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n\t\t\t[format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n\t\t\t[highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n\t\t\t(onRowSelected)=\"onRowSelected.emit($event)\"\r\n\t\t\t(onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n\t\t\t(onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n\t\t\t(actionOnRow)=\"actionOnRow.emit($event)\"\r\n\t\t\t(onSorting)=\"onSortChanged($event)\"\r\n\t\t></cts-table>\r\n\t</div>\r\n</div>\r\n", styles: [":host{padding-inline:var(--ndf-tbl-inline-padding, 1rem);padding-block:var(--ndf-tbl-block-padding, 1rem);border:var(--ndf-tbl-border, solid transparent);border-width:var(--ndf-table-border-width, 0);border-radius:var(--ndf-tbl-border-radius, 0);height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--ndf-tbl-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host [dir=ltr]{--ndf-tbl-panel-translateX: -100%}:host:before,:host:after{box-sizing:border-box}::ng-deep .wrapping,::ng-deep .wrapping .table-reposition{overflow:visible}.ndf-table__container{--table-div-height: auto;--table-reposition-overflow-y: visible;--table-div-overflow: visible;--panel-width: var(--ndf-tbl-panel-width, 18rem);position:relative;overflow:hidden;display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-tbl-height, calc(var(--ndf-table-height, auto) - calc(var(--ndf-tbl-block-padding, 1rem) * 2.5)));flex-grow:1;grid-gap:var(--ndf-table-container-gap, .5rem);gap:var(--ndf-table-container-gap, .5rem)}.ndf-table__container.panel-opened{--ndf-tbl-panel-translateX: 0;--ndf-tbl-content-pis: var(--panel-width)}.ndf-table__panel,.ndf-table__content{overflow:auto;transition:all .2s}.ndf-table__panel{position:absolute;width:var(--panel-width);height:100%;transform:translate(var(--ndf-tbl-panel-translateX, 100%));padding-inline:var(--ndf-tbl-panel-inline-padding, .5rem);padding-block:var(--ndf-tbl-panel-block-padding, .5rem);background:var(--ndf-tbl-panel-background, #fff);z-index:1}.ndf-table__content{flex-grow:1;padding-inline-start:var(--ndf-tbl-content-pis, 0);padding-block-end:var(--ndf-tbl-content-pbe, 1rem);overflow-y:var(--ndf-tbl-content-overflow-y, auto);max-height:var(--ndf-tbl-content-max-height, var(--ndf-table-height));display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content}.ndf-table__header{background-color:var(--ndf-tbl-background, #fff);flex-direction:var(--ndf-tbl-header-direction, row);justify-content:var(--ndf-tbl-header-justify, space-between);align-items:var(--ndf-tbl-header-items, center);padding-inline:var(--ndf-tbl-header-padding-inline, .5rem);padding-block:var(--ndf-tbl-header-padding-block, 0 .5rem);position:var(--ndf-tbl-header-position, sticky);top:0;z-index:1}.ndf-table__header__actions{justify-content:var(--ndf-tbl-actions-justify, flex-end)}.ndf-table__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-table__table{flex-grow:1;display:flex;flex-direction:column}.ndf-table__table.no-data{--table-div-height: auto}.loading-data{position:absolute;inset:0;display:grid;place-items:center;background:var(--loading-data-background, rgba(255, 255, 255, .2));-webkit-backdrop-filter:var(--loading-data-backdrop-filter, blur(3px));backdrop-filter:var(--loading-data-backdrop-filter, blur(3px))}\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: TextSearchComponent, selector: "app-text-search", inputs: ["searchConfig", "search"], outputs: ["searchChange", "openModal", "clear"] }, { type: EditorButtonComponent, selector: "app-editor-button", inputs: ["type", "key"] }, { type: TableExportComponent, selector: "ndf-table-export", inputs: ["config"], outputs: ["onExport"] }, { type: SortingListComponent, selector: "table-sorting-list", inputs: ["sortList"], outputs: ["sortChanged"] }, { type: TableColumnsTogglerComponent, selector: "table-columns-toggler", inputs: ["prefix", "sortable", "columns"], outputs: ["columnsChanged"] }, { type: ModeTogglerComponent, selector: "mode-toggler", inputs: ["modesList", "mode"], outputs: ["modeChanged"] }, { type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: ["columns", "responsiveColumns", "entityType", "prefix", "headers", "fields", "pageProvider", "pageSize", "isLegacyMode", "showTotalRecord", "pageNumber", "sortingBy", "queryParam", "customFilters", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "componentName", "tableActions", "defultSort", "range", "isSearchPage", "multiSelectRows", "customFirstRow", "highlightSelectedCard", "showActionsAsMenu", "filterParams", "skipAggregation", "customUrl", "format", "requestActions", "pageSizes"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "sortChanged", "onPageChange", "onPage", "onLoad", "onInitialize"] }, { type: i3__namespace$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NoDataFoundComponent, selector: "app-no-data-found", inputs: ["message", "width", "height"] }, { type: TableComponent, selector: "cts-table", inputs: ["rows", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }], 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: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: EmptyTemplateDirective, selector: "[emptyTemplate]" }], pipes: { "async": i4__namespace$1.AsyncPipe } });
+  NdfTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfTableComponent, selector: "app-ndf-table", inputs: { rows: "rows", totalRecords: "totalRecords", autoCalculateHeight: "autoCalculateHeight", emptyMessage: "emptyMessage", activeQuery: "activeQuery", configPath: "configPath", styleClass: "styleClass", configTransformer: "configTransformer", tableKey: "tableKey", jsonEditorEnabled: "jsonEditorEnabled", config: "config", customCriteria: "customCriteria", searchTerm: "searchTerm" }, outputs: { onRowSelected: "onRowSelected", onRowIndexSelected: "onRowIndexSelected", actionOnRow: "actionOnRow", onGettingData: "onGettingData", onMultiRowSelected: "onMultiRowSelected", onLoading: "onLoading", onPage: "onPage", onInitialized: "onInitialized", onLoaded: "onLoaded", onQueryChange: "onQueryChange", onSort: "onSort" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-table" }, queries: [{ propertyName: "actionsTableTemplate", first: true, predicate: ACTIONS_TABLE_TEMPLATE, descendants: true, read: i0.TemplateRef }, { propertyName: "searchTableTemplate", first: true, predicate: SEARCH_TABLE_TEMPLATE, descendants: true, read: i0.TemplateRef }, { propertyName: "filterCustomTemplate", first: true, predicate: FILTER_CUSTOM_TEMPLATE, descendants: true, read: i0.TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n  *ngIf=\"tableConfig\"\r\n  class=\"ndf-table__container\"\r\n  [class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n  [dir]=\"direction\"\r\n  ndfFluidHeight\r\n  cssVar=\"--ndf-table-height\"\r\n  [calculate]=\"autoCalculateHeight\"\r\n>\r\n  <div class=\"ndf-table__panel\" *ngIf=\"filtersConfig?.fields\">\r\n    <app-filters-panel\r\n      [fields]=\"filtersConfig.fields\"\r\n      [aggregations]=\"aggregations$ | async\"\r\n      (filterChanged)=\"filterChanged($event)\"\r\n      [activeQuery]=\"activeQuery\"\r\n      class=\"ndf-table__filters\"\r\n      [customTemplateRef]=\"filterCustomTemplate\"\r\n    ></app-filters-panel>\r\n  </div>\r\n  <div class=\"ndf-table__content\">\r\n    <div class=\"ndf-table__header flex\">\r\n      <div class=\"ndf-table__header__custom-actions flex gap-x-4 items-center\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"searchTableTemplate || defaultActionTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: tableConfig,\r\n            panelOpened: isPanelOpened,\r\n            togglePanel: togglePanel,\r\n            openModal: openSearchModal,\r\n            search: onTextSearch,\r\n            clear: onClearSearch\r\n          }\"\r\n        ></ng-container>\r\n\r\n        <ng-template #defaultActionTemplate>\r\n          <button\r\n            mat-stroked-button\r\n            *ngIf=\"isPanelToggleAvailable\"\r\n            class=\"toggle-button\"\r\n            (click)=\"togglePanel()\"\r\n          >\r\n            <mat-icon> filter_alt</mat-icon>\r\n          </button>\r\n          <app-text-search\r\n            *ngIf=\"textSearchConfig\"\r\n            [searchConfig]=\"textSearchConfig\"\r\n            (openModal)=\"openSearchModal()\"\r\n            [search]=\"textSearch$ | async\"\r\n            (searchChange)=\"onTextSearch($event)\"\r\n            (clear)=\"onClearSearch()\"\r\n          ></app-text-search>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"ndf-table__header__actions flex gap-x-4 items-center\">\r\n        <app-editor-button\r\n          *ngIf=\"jsonEditorEnabled && (tableKey || tableConfig?.key)\"\r\n          [key]=\"tableKey || tableConfig?.key\"\r\n          [type]=\"editorType\"\r\n        ></app-editor-button>\r\n        <ndf-table-export\r\n          *ngIf=\"exportTableConfig?.enabled\"\r\n          [config]=\"exportTableConfig\"\r\n          (onExport)=\"exportTable($event)\"\r\n        ></ndf-table-export>\r\n\r\n        <table-sorting-list\r\n          *ngIf=\"!!sortList?.length\"\r\n          [sortList]=\"sortList\"\r\n          (sortChanged)=\"sortChanged($event)\"\r\n        ></table-sorting-list>\r\n        <table-columns-toggler\r\n          *ngIf=\"columnToggle\"\r\n          [columns]=\"tableConfig.columns\"\r\n          [prefix]=\"tableConfig.prefix\"\r\n          [sortable]=\"columnsOptions?.sortable\"\r\n          (columnsChanged)=\"columnsChanged($event)\"\r\n        ></table-columns-toggler>\r\n        <mode-toggler\r\n          *ngIf=\"tableMode?.toggleMode\"\r\n          [mode]=\"tableMode.mode || 'list'\"\r\n          [modesList]=\"tableMode?.availableMode\"\r\n          (modeChanged)=\"modeChanged($event)\"\r\n        ></mode-toggler>\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"actionsTableTemplate\"\r\n          [ngTemplateOutletContext]=\"{\r\n            $implicit: tableConfig,\r\n            panelOpened: isPanelOpened,\r\n            togglePanel: togglePanel,\r\n            openModal: openSearchModal,\r\n            search: onTextSearch,\r\n            clear: onClearSearch\r\n          }\"\r\n        ></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <cts-dynamic-table\r\n      *ngIf=\"!tableConfig.isDataProvided\"\r\n      class=\"ndf-table__table table-style\"\r\n      [ngClass]=\"styleClass\"\r\n      [columns]=\"displayedColumns$ | async\"\r\n      [responsiveColumns]=\"displayedColumns$ | async\"\r\n      [fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n      [pageSize]=\"tableConfig.pageSize || 10\"\r\n      [pageNumber]=\"tableConfig.pageNumber || 1\"\r\n      [pageProvider]=\"tableConfig.pageProvider\"\r\n      [customUrl]=\"tableConfig.customUrl\"\r\n      [quickFilter]=\"\r\n        tableConfig.quickFilters\r\n          ? { quickFilters: tableConfig.quickFilters }\r\n          : undefined\r\n      \"\r\n      [defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n      [sortingBy]=\"sortOption$ | async\"\r\n      [entityType]=\"'all'\"\r\n      [fields]=\"tableConfig.fields\"\r\n      [tableMode]=\"viewMode$ | async\"\r\n      [componentName]=\"tableMode?.['componentName']\"\r\n      [range]=\"tableConfig?.range\"\r\n      [isSearchPage]=\"tableConfig?.isSearchPage\"\r\n      [multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n      [customFirstRow]=\"tableConfig?.customFirstRow\"\r\n      [highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n      [showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n      [filterParams]=\"tableConfig?.filterParams\"\r\n      [format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n      [pageSizes]=\"tableConfig?.pageSizes || defaultPageSizes\"\r\n      [prefix]=\"tableConfig.prefix || ''\"\r\n      [rowCursor]=\"true\"\r\n      [queryParam]=\"tableConfig.queryParam\"\r\n      [customFilters]=\"searchAndFilters$ | async\"\r\n      [tableActions]=\"tableConfig.tableActions\"\r\n      [requestActions]=\"tableConfig?.requestActions\"\r\n      [headers]=\"tableConfig.headers\"\r\n      (onRowSelected)=\"onRowSelected.emit($event)\"\r\n      (onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n      (actionOnRow)=\"actionOnRow.emit($event)\"\r\n      (onGettingData)=\"onGettingData.emit($event)\"\r\n      (onLoad)=\"onLoad($event)\"\r\n      (onInitialize)=\"onInitialize($event)\"\r\n      (onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n      (onLoading)=\"onLoading.emit($event)\"\r\n      (onPage)=\"onPageChanged($event)\"\r\n      [isLegacyMode]=\"false\"\r\n      [showTotalRecord]=\"true\"\r\n      (sortChanged)=\"onSortChanged($event)\"\r\n    >\r\n      <ng-template\r\n        emptyTemplate\r\n        let-isLoading\r\n        let-rows=\"rows\"\r\n        let-initialized=\"initialized\"\r\n      >\r\n        <div class=\"loading-data\" *ngIf=\"isLoading && initialized\">\r\n          <mat-spinner></mat-spinner>\r\n        </div>\r\n\r\n        <div\r\n          class=\"flex items-center justify-center h-5/6\"\r\n          *ngIf=\"!isLoading && !rows.length\"\r\n        >\r\n          <app-no-data-found\r\n            class=\"mt-4\"\r\n            [message]=\"emptyMessage\"\r\n          ></app-no-data-found>\r\n        </div>\r\n      </ng-template>\r\n    </cts-dynamic-table>\r\n\r\n    <cts-table\r\n      *ngIf=\"tableConfig.isDataProvided\"\r\n      [ngClass]=\"styleClass\"\r\n      [rows]=\"rows\"\r\n      [totalRecords]=\"totalRecords\"\r\n      [columns]=\"displayedColumns$ | async\"\r\n      [responsiveColumns]=\"displayedColumns$ | async\"\r\n      [rowCursor]=\"true\"\r\n      [fullWidth]=\"tableConfig.fullWidth || 'auto'\"\r\n      [entityType]=\"'all'\"\r\n      [prefix]=\"tableConfig.prefix || ''\"\r\n      [tableMode]=\"viewMode$ | async\"\r\n      [componentName]=\"tableMode?.['componentName']\"\r\n      [multiSelectRows]=\"tableConfig?.multiSelectRows\"\r\n      [customFirstRow]=\"tableConfig?.customFirstRow\"\r\n      [tableActions]=\"tableConfig.tableActions\"\r\n      [showActionsAsMenu]=\"tableConfig?.showActionsAsMenu\"\r\n      [defultSort]=\"tableConfig.defaultSort || defaultSort\"\r\n      [format]=\"tableConfig?.format || 'MMMM d, y'\"\r\n      [highlightSelectedCard]=\"tableConfig?.highlightSelectedCard\"\r\n      (onRowSelected)=\"onRowSelected.emit($event)\"\r\n      (onRowIndexSelected)=\"onRowIndexSelected.emit($event)\"\r\n      (onMultiRowSelected)=\"onMultiRowSelected.emit($event)\"\r\n      (actionOnRow)=\"actionOnRow.emit($event)\"\r\n      (onSorting)=\"onSortChanged($event)\"\r\n    ></cts-table>\r\n  </div>\r\n</div>\r\n", styles: [":host{padding-inline:var(--ndf-tbl-inline-padding, 1rem);padding-block:var(--ndf-tbl-block-padding, 1rem);border:var(--ndf-tbl-border, solid transparent);border-width:var(--ndf-table-border-width, 0);border-radius:var(--ndf-tbl-border-radius, 0);height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--ndf-tbl-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host [dir=ltr]{--ndf-tbl-panel-translateX: -100%}:host:before,:host:after{box-sizing:border-box}::ng-deep .wrapping,::ng-deep .wrapping .table-reposition{overflow:visible}.ndf-table__container{--table-div-height: auto;--table-reposition-overflow-y: visible;--table-div-overflow: visible;--panel-width: var(--ndf-tbl-panel-width, 18rem);position:relative;overflow:hidden;display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-tbl-height, calc(var(--ndf-table-height, auto) - calc(var(--ndf-tbl-block-padding, 1rem) * 2.5)));flex-grow:1;grid-gap:var(--ndf-table-container-gap, .5rem);gap:var(--ndf-table-container-gap, .5rem)}.ndf-table__container.panel-opened{--ndf-tbl-panel-translateX: 0;--ndf-tbl-content-pis: var(--panel-width)}.ndf-table__panel,.ndf-table__content{overflow:auto;transition:all .2s}.ndf-table__panel{position:absolute;width:var(--panel-width);height:100%;transform:translate(var(--ndf-tbl-panel-translateX, 100%));padding-inline:var(--ndf-tbl-panel-inline-padding, .5rem);padding-block:var(--ndf-tbl-panel-block-padding, .5rem);background:var(--ndf-tbl-panel-background, #fff);z-index:1}.ndf-table__content{flex-grow:1;padding-inline-start:var(--ndf-tbl-content-pis, 0);padding-block-end:var(--ndf-tbl-content-pbe, 1rem);overflow-y:var(--ndf-tbl-content-overflow-y, auto);max-height:var(--ndf-tbl-content-max-height, var(--ndf-table-height));display:flex;flex-direction:column;height:var(--ndf-tbl-content-height, auto)}.ndf-table__header{background-color:var(--ndf-tbl-background, #fff);flex-direction:var(--ndf-tbl-header-direction, row);justify-content:var(--ndf-tbl-header-justify, space-between);align-items:var(--ndf-tbl-header-items, center);padding-inline:var(--ndf-tbl-header-padding-inline, .5rem);padding-block:var(--ndf-tbl-header-padding-block, 0 .5rem);position:var(--ndf-tbl-header-position, sticky);top:0;z-index:1}.ndf-table__header__actions{justify-content:var(--ndf-tbl-actions-justify, flex-end)}.ndf-table__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-table__table{flex-grow:1;display:flex;flex-direction:column}.ndf-table__table.no-data{--table-div-height: auto}.loading-data{position:absolute;inset:0;display:grid;place-items:center;background:var(--loading-data-background, rgba(255, 255, 255, .2));-webkit-backdrop-filter:var(--loading-data-backdrop-filter, blur(3px));backdrop-filter:var(--loading-data-backdrop-filter, blur(3px))}\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: TextSearchComponent, selector: "app-text-search", inputs: ["searchConfig", "search"], outputs: ["searchChange", "openModal", "clear"] }, { type: EditorButtonComponent, selector: "app-editor-button", inputs: ["type", "key"] }, { type: TableExportComponent, selector: "ndf-table-export", inputs: ["config"], outputs: ["onExport"] }, { type: SortingListComponent, selector: "table-sorting-list", inputs: ["sortList"], outputs: ["sortChanged"] }, { type: TableColumnsTogglerComponent, selector: "table-columns-toggler", inputs: ["prefix", "sortable", "columns"], outputs: ["columnsChanged"] }, { type: ModeTogglerComponent, selector: "mode-toggler", inputs: ["modesList", "mode"], outputs: ["modeChanged"] }, { type: DynamicTableComponent, selector: "cts-dynamic-table", inputs: ["columns", "responsiveColumns", "entityType", "prefix", "headers", "fields", "pageProvider", "pageSize", "isLegacyMode", "showTotalRecord", "pageNumber", "sortingBy", "queryParam", "customFilters", "quickFilter", "report", "rowCursor", "fullWidth", "tableMode", "componentName", "tableActions", "defultSort", "range", "isSearchPage", "multiSelectRows", "customFirstRow", "highlightSelectedCard", "showActionsAsMenu", "filterParams", "skipAggregation", "customUrl", "format", "requestActions", "pageSizes"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "sortChanged", "onPageChange", "onPage", "onLoad", "onInitialize"] }, { type: i3__namespace$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NoDataFoundComponent, selector: "app-no-data-found", inputs: ["message", "width", "height"] }, { type: TableComponent, selector: "cts-table", inputs: ["rows", "columns", "responsiveColumns", "entityType", "prefix", "pageCount", "totalRecords", "rowCursor", "fullWidth", "vocItemTranslationPrefix", "tableMode", "componentName", "tableActions", "format", "defultSort", "highlightSelectedCard", "multiSelectRows", "customFirstRow", "showActionsAsMenu", "messages", "defaultColumnSize"], outputs: ["onRowSelected", "onRowIndexSelected", "onIconSelected", "actionOnRow", "onSorting", "onMultiRowSelected"] }], 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: i4__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: EmptyTemplateDirective, selector: "[emptyTemplate]" }], pipes: { "async": i4__namespace$1.AsyncPipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: NdfTableComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -22881,8 +23051,8 @@
                       styleUrls: ['./ndf-table.component.scss'],
                       host: {
                           class: 'ndf-table',
-                          '[dir]': 'direction'
-                      }
+                          '[dir]': 'direction',
+                      },
                   }]
           }], ctorParameters: function () { return [{ type: FiltersMapperService }, { type: DynamicTableService }, { type: i1__namespace.TranslateService }, { type: NdfTableService }, { type: CustomToastrService }, { type: NdfTableConfigurationService }, { type: i1__namespace$3.MatDialog }]; }, propDecorators: { rows: [{
                   type: i0.Input
@@ -22896,6 +23066,8 @@
                   type: i0.Input
               }], configPath: [{
                   type: i0.Input
+              }], styleClass: [{
+                  type: i0.Input
               }], configTransformer: [{
                   type: i0.Input
               }], tableKey: [{
@@ -47219,7 +47391,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: ReportConfigurationService }, { token: i1__namespace$5.Router }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  NdfReportsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfReportsComponent, selector: "app-ndf-reports", inputs: { jsonEditorEnabled: "jsonEditorEnabled", reportsKey: "reportsKey", navigateRoute: "navigateRoute", config: "config" }, outputs: { onQueryChange: "onQueryChange" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-reports" }, viewQueries: [{ propertyName: "fluidDirective", first: true, predicate: FluidHeightDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n\t*ngIf=\"reportsData$ | async as reports\"\r\n\tclass=\"ndf-reports__container\"\r\n\t[class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n\t[dir]=\"direction\"\r\n\tndfFluidHeight\r\n>\r\n\t<div class=\"ndf-reports__panel print:hidden\" *ngIf=\"!!filtersConfig?.fields?.length\">\r\n\t\t<app-filters-panel\r\n\t\t\t[fields]=\"filtersConfig?.fields\"\r\n\t\t\t[aggregations]=\"aggregations\"\r\n\t\t\t(filterChanged)=\"filterChanged($event)\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\tclass=\"ndf-reports__filters\"\r\n\t\t></app-filters-panel>\r\n\t</div>\r\n\r\n\t<div class=\"ndf-reports__content\" (scrolled)=\"onContentScroll($event)\">\r\n\t\t<div class=\"ndf-reports__header flex pt-4 print:hidden\">\r\n\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<app-editor-button\r\n\t\t\t\t*ngIf=\"jsonEditorEnabled && reportsKey\"\r\n\t\t\t\t[key]=\"reportsKey\"\r\n\t\t\t\t[type]=\"editorType\"\r\n\t\t\t></app-editor-button>\r\n\t\t\t<button mat-stroked-button *ngIf=\"config?.options?.print\" class=\"print-button\" (click)=\"printAll()\">\r\n\t\t\t\t<mat-icon> print</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<mat-spinner *ngIf=\"isLoadingResult\" class=\"mt-5 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n\r\n\t\t<div class=\"reports-grid\" *ngIf=\"!isLoadingResult\">\r\n\t\t\t<app-ndf-report\r\n\t\t\t\t*ngFor=\"let config of reportConfig.items; trackBy: trackByFn\"\r\n\t\t\t\t[config]=\"config\"\r\n\t\t\t\t[data]=\"reports?.response\"\r\n\t\t\t\t[criteria]=\"filtersParams$ | async\"\r\n\t\t\t\t[direction]=\"direction\"\r\n\t\t\t\t[attr.data-width]=\"config?.layout?.width || 4\"\r\n\t\t\t\t[attr.data-height]=\"config?.layout?.height || 'auto'\"\r\n\t\t\t\t[attr.data-start-column]=\"config?.layout?.columnPosition || 'auto'\"\r\n\t\t\t\t[attr.data-start-row]=\"config?.layout?.rowPosition || 'auto'\"\r\n\t\t\t\t[class.wide]=\"config?.layout?.width >= 6\"\r\n\t\t\t\tclass=\"reports-grid__item {{ config?.layout?.styleClass }} \"\r\n\t\t\t\t(onNavigate)=\"onNavigate($event)\"\r\n\t\t\t\t(onOpen)=\"openReportDetails($event, config)\"\r\n\t\t\t></app-ndf-report>\r\n\t\t</div>\r\n\t</div>\r\n\t<div\r\n\t\tclass=\"ndf-reports__details print:hidden\"\r\n\t\t[class.opened]=\"showDetails\"\r\n\t\t[@slideInOut]=\"showDetails ? 'open' : 'closed'\"\r\n\t\t(@slideInOut.done)=\"onDetailsAnimationEnd($event)\"\r\n\t>\r\n\t\t<app-ndf-table\r\n\t\t\t*ngIf=\"reportDetails$ | async as report\"\r\n\t\t\t[config]=\"report.config\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\t[customCriteria]=\"filtersParams$ | async\"\r\n\t\t>\r\n\t\t\t<ng-template searchTableTemplate>\r\n\t\t\t\t<div class=\"ndf-reports__details__header flex gap-2\">\r\n\t\t\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button mat-stroked-button class=\"close-button\" (click)=\"closeDetailsPanel()\">\r\n\t\t\t\t\t\t<mat-icon> close</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t{{ report.label | translate }}\r\n\t\t\t\t</h3>\r\n\t\t\t</ng-template>\r\n\t\t</app-ndf-table>\r\n\t</div>\r\n</div>\r\n", styles: [":host{padding-inline:var(--ndf-reports-inline-padding, 0);padding-block:var(--ndf-reports-block-padding, .5rem 0);height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--ndf-reports-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host:before,:host:after{box-sizing:border-box}:host[dir=ltr]{--ndf-reports-panel-translateX: -100%;--ndf-reports-details-translateX: 100%}.ndf-reports__header{background-color:var(--ndf-reports-background, #fff);flex-direction:var(--ndf-reports-header-direction, row);justify-content:var(--ndf-reports-header-justify, space-between);align-items:var(--ndf-reports-header-items, center);padding-inline:var(--ndf-reports-header-padding-inline, .5rem);padding-block:var(--ndf-reports-header-padding-block, 0 .5rem);position:var(--ndf-reports-header-position, sticky);top:0;z-index:1}.ndf-reports__header__actions{justify-content:var(--ndf-reports-actions-justify, flex-end)}.ndf-reports__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-reports__container{--panel-width: var(--ndf-reports-panel-width, 18rem);position:relative;overflow:var(--ndf-reports-container-overflow, hidden);display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-reports-height, calc(var(--ndf-fluid-height) - calc(var(--ndf-reports-block-padding, 1rem) * 2.5)));flex-grow:1;grid-gap:var(--ndf-table-container-gap, .5rem);gap:var(--ndf-table-container-gap, .5rem)}.ndf-reports__container.panel-opened{--ndf-details-margin: var(--panel-width);--ndf-reports-panel-translateX: 0;--ndf-reports-content-margin: var(--panel-width)}@media print{.ndf-reports__container{--ndf-reports-container-overflow: visible;height:100%}}.ndf-reports__panel,.ndf-reports__content .ndf-reports__details{overflow:auto;transition:all .2s}.ndf-reports__panel{position:absolute;width:var(--panel-width);height:100%;transform:translate(var(--ndf-reports-panel-translateX, 100%));padding-inline:var(--ndf-reports-panel-inline-padding, .5rem);padding-block:var(--ndf-reports-panel-block-padding, .5rem);background:var(--ndf-reports-panel-background, #fff);z-index:1}.ndf-reports__content{flex-grow:1;padding-inline-start:var(--ndf-reports-content-margin, 1rem);padding-inline-end:var(--ndf-reports-content-pie, 1rem);padding-block:var(--ndf-reports-content-pb, 0 1rem);overflow-y:var(--ndf-reports-content-overflow-y, auto);position:relative;display:flex;flex-direction:column}@media print{.ndf-reports__content{--ndf-reports-content-overflow-y: visible}}.ndf-reports__details{position:absolute;inset-inline-end:0;width:calc(100% - var(--ndf-details-margin, 0px));height:100%;transform:translate(var(--ndf-reports-details-translateX, -100%));padding-inline:var(--ndf-reports-details-inline-padding, 0rem);flex-grow:1;padding-block:var(--ndf-reports-details-block-padding, 0rem);background:var(--ndf-reports-details-background, #fff);z-index:1;transition:all .2s}.reports-grid{--grid-columns: 12;--column-width: calc(100% / var(--grid-columns));display:grid;grid-gap:var(--reports-grid-gap, 1.5rem);gap:var(--reports-grid-gap, 1.5rem);grid-template-columns:var(--rg-columns, repeat(var(--grid-columns), 1fr));margin-block:var(--reports-grid-margin-block, 1.25rem 0);padding-inline:var(--reports-grid-padding-inline, .5rem)}.reports-grid__item{display:grid;grid-gap:.3rem;gap:.3rem;min-width:0;text-align:center;vertical-align:middle}.reports-grid__item[data-width=\"1\"]{--col-span: span 1}.reports-grid__item[data-start-column=\"1\"]{--col-start: 1}.reports-grid__item[data-start-row=\"1\"]{--row-start: 1}.reports-grid__item[data-height=\"1\"]{--row-span: 1}.reports-grid__item[data-width=\"2\"]{--col-span: span 2}.reports-grid__item[data-start-column=\"2\"]{--col-start: 2}.reports-grid__item[data-start-row=\"2\"]{--row-start: 2}.reports-grid__item[data-height=\"2\"]{--row-span: 2}.reports-grid__item[data-width=\"3\"]{--col-span: span 3}.reports-grid__item[data-start-column=\"3\"]{--col-start: 3}.reports-grid__item[data-start-row=\"3\"]{--row-start: 3}.reports-grid__item[data-height=\"3\"]{--row-span: 3}.reports-grid__item[data-width=\"4\"]{--col-span: span 4}.reports-grid__item[data-start-column=\"4\"]{--col-start: 4}.reports-grid__item[data-start-row=\"4\"]{--row-start: 4}.reports-grid__item[data-height=\"4\"]{--row-span: 4}.reports-grid__item[data-width=\"5\"]{--col-span: span 5}.reports-grid__item[data-start-column=\"5\"]{--col-start: 5}.reports-grid__item[data-start-row=\"5\"]{--row-start: 5}.reports-grid__item[data-height=\"5\"]{--row-span: 5}.reports-grid__item[data-width=\"6\"]{--col-span: span 6}.reports-grid__item[data-start-column=\"6\"]{--col-start: 6}.reports-grid__item[data-start-row=\"6\"]{--row-start: 6}.reports-grid__item[data-height=\"6\"]{--row-span: 6}.reports-grid__item[data-width=\"7\"]{--col-span: span 7}.reports-grid__item[data-start-column=\"7\"]{--col-start: 7}.reports-grid__item[data-start-row=\"7\"]{--row-start: 7}.reports-grid__item[data-height=\"7\"]{--row-span: 7}.reports-grid__item[data-width=\"8\"]{--col-span: span 8}.reports-grid__item[data-start-column=\"8\"]{--col-start: 8}.reports-grid__item[data-start-row=\"8\"]{--row-start: 8}.reports-grid__item[data-height=\"8\"]{--row-span: 8}.reports-grid__item[data-width=\"9\"]{--col-span: span 9}.reports-grid__item[data-start-column=\"9\"]{--col-start: 9}.reports-grid__item[data-start-row=\"9\"]{--row-start: 9}.reports-grid__item[data-height=\"9\"]{--row-span: 9}.reports-grid__item[data-width=\"10\"]{--col-span: span 10}.reports-grid__item[data-start-column=\"10\"]{--col-start: 10}.reports-grid__item[data-start-row=\"10\"]{--row-start: 10}.reports-grid__item[data-height=\"10\"]{--row-span: 10}.reports-grid__item[data-width=\"11\"]{--col-span: span 11}.reports-grid__item[data-start-column=\"11\"]{--col-start: 11}.reports-grid__item[data-start-row=\"11\"]{--row-start: 11}.reports-grid__item[data-height=\"11\"]{--row-span: 11}.reports-grid__item[data-width=\"12\"]{--col-span: span 12}.reports-grid__item[data-start-column=\"12\"]{--col-start: 12}.reports-grid__item[data-start-row=\"12\"]{--row-start: 12}.reports-grid__item[data-height=\"12\"]{--row-span: 12}@media screen{.reports-grid__item{grid-column:var(--col-start, auto)/var(--col-span, span var(--grid-column, 2));grid-row:var(--row-start, auto)/span var(--row-span, 1);grid-template-rows:subgrid}}@media print{.reports-grid{--reports-grid-gap: 11mm;--reports-grid-margin-top: 9mm;--rg-columns: repeat(2, 1fr)}.reports-grid__item{--col-start: auto;--col-span: span 1;border:1px solid #f5f5f5;border-radius:var(--cp-radius, 1rem);page-break-inside:avoid;break-inside:avoid-page}}@media screen and (max-width: 1199px){.reports-grid__item[data-width=\"1\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"2\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"3\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"4\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"5\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"6\"]{--col-start: auto;--col-span: span 6}.reports-grid__item.wide{--col-start: 1;--col-span: -1}}@media screen and (max-width: 767px){.reports-grid__item[data-width]{--col-start: 1;--col-span: -1}}\n"], components: [{ type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { type: i1__namespace$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditorButtonComponent, selector: "app-editor-button", inputs: ["type", "key"] }, { type: i3__namespace$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NdfReportComponent, selector: "app-ndf-report", inputs: ["config", "direction", "data", "criteria"], outputs: ["onNavigate", "onOpen"] }, { type: NdfTableComponent, selector: "app-ndf-table", inputs: ["rows", "totalRecords", "autoCalculateHeight", "emptyMessage", "activeQuery", "configPath", "configTransformer", "tableKey", "jsonEditorEnabled", "config", "customCriteria", "searchTerm"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "onPage", "onInitialized", "onLoaded", "onQueryChange", "onSort"] }], directives: [{ type: i4__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FluidHeightDirective, selector: "[ndfFluidHeight]", inputs: ["minHeight", "ndfFluidHeight", "subtractItems", "decrease", "delay", "cssVar", "calculate", "inlineStyle"], exportAs: ["ndfFluidHeight"] }, { type: i4__namespace.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { type: ScrollableDivDirective, selector: "[scrolled]", inputs: ["scrollTop"], outputs: ["scrolled"] }, { type: i4__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: SearchTableTemplateDirective, selector: "[searchTableTemplate]" }], pipes: { "async": i4__namespace$1.AsyncPipe, "translate": i1__namespace.TranslatePipe }, animations: [slideAnimation] });
+  NdfReportsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: NdfReportsComponent, selector: "app-ndf-reports", inputs: { jsonEditorEnabled: "jsonEditorEnabled", reportsKey: "reportsKey", navigateRoute: "navigateRoute", config: "config" }, outputs: { onQueryChange: "onQueryChange" }, host: { properties: { "dir": "direction" }, classAttribute: "ndf-reports" }, viewQueries: [{ propertyName: "fluidDirective", first: true, predicate: FluidHeightDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div\r\n\t*ngIf=\"reportsData$ | async as reports\"\r\n\tclass=\"ndf-reports__container\"\r\n\t[class.panel-opened]=\"isPanelOpened && filtersConfig\"\r\n\t[dir]=\"direction\"\r\n\tndfFluidHeight\r\n>\r\n\t<div class=\"ndf-reports__panel print:hidden\" *ngIf=\"!!filtersConfig?.fields?.length\">\r\n\t\t<app-filters-panel\r\n\t\t\t[fields]=\"filtersConfig?.fields\"\r\n\t\t\t[aggregations]=\"aggregations\"\r\n\t\t\t(filterChanged)=\"filterChanged($event)\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\tclass=\"ndf-reports__filters\"\r\n\t\t></app-filters-panel>\r\n\t</div>\r\n\r\n\t<div class=\"ndf-reports__content\" (scrolled)=\"onContentScroll($event)\">\r\n\t\t<div class=\"ndf-reports__header flex pt-4 print:hidden\">\r\n\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t</button>\r\n\t\t\t<app-editor-button\r\n\t\t\t\t*ngIf=\"jsonEditorEnabled && reportsKey\"\r\n\t\t\t\t[key]=\"reportsKey\"\r\n\t\t\t\t[type]=\"editorType\"\r\n\t\t\t></app-editor-button>\r\n\t\t\t<button mat-stroked-button *ngIf=\"config?.options?.print\" class=\"print-button\" (click)=\"printAll()\">\r\n\t\t\t\t<mat-icon> print</mat-icon>\r\n\t\t\t</button>\r\n\t\t</div>\r\n\t\t<mat-spinner *ngIf=\"isLoadingResult\" class=\"mt-5 mx-auto\" [diameter]=\"48\"></mat-spinner>\r\n\r\n\t\t<div class=\"reports-grid\" *ngIf=\"!isLoadingResult\">\r\n\t\t\t<app-ndf-report\r\n\t\t\t\t*ngFor=\"let config of reportConfig.items; trackBy: trackByFn\"\r\n\t\t\t\t[config]=\"config\"\r\n\t\t\t\t[data]=\"reports?.response\"\r\n\t\t\t\t[criteria]=\"filtersParams$ | async\"\r\n\t\t\t\t[direction]=\"direction\"\r\n\t\t\t\t[attr.data-width]=\"config?.layout?.width || 4\"\r\n\t\t\t\t[attr.data-height]=\"config?.layout?.height || 'auto'\"\r\n\t\t\t\t[attr.data-start-column]=\"config?.layout?.columnPosition || 'auto'\"\r\n\t\t\t\t[attr.data-start-row]=\"config?.layout?.rowPosition || 'auto'\"\r\n\t\t\t\t[class.wide]=\"config?.layout?.width >= 6\"\r\n\t\t\t\tclass=\"reports-grid__item {{ config?.layout?.styleClass }} \"\r\n\t\t\t\t(onNavigate)=\"onNavigate($event)\"\r\n\t\t\t\t(onOpen)=\"openReportDetails($event, config)\"\r\n\t\t\t></app-ndf-report>\r\n\t\t</div>\r\n\t</div>\r\n\t<div\r\n\t\tclass=\"ndf-reports__details print:hidden\"\r\n\t\t[class.opened]=\"showDetails\"\r\n\t\t[@slideInOut]=\"showDetails ? 'open' : 'closed'\"\r\n\t\t(@slideInOut.done)=\"onDetailsAnimationEnd($event)\"\r\n\t>\r\n\t\t<app-ndf-table\r\n\t\t\t*ngIf=\"reportDetails$ | async as report\"\r\n\t\t\t[config]=\"report.config\"\r\n\t\t\t[activeQuery]=\"activeFiltersQuery$ | async\"\r\n\t\t\t[customCriteria]=\"filtersParams$ | async\"\r\n\t\t>\r\n\t\t\t<ng-template searchTableTemplate>\r\n\t\t\t\t<div class=\"ndf-reports__details__header flex gap-2\">\r\n\t\t\t\t\t<button mat-stroked-button class=\"toggle-button\" (click)=\"togglePanel()\">\r\n\t\t\t\t\t\t<mat-icon> filter_alt</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t\t<button mat-stroked-button class=\"close-button\" (click)=\"closeDetailsPanel()\">\r\n\t\t\t\t\t\t<mat-icon> close</mat-icon>\r\n\t\t\t\t\t</button>\r\n\t\t\t\t</div>\r\n\t\t\t\t<h3>\r\n\t\t\t\t\t{{ report.label | translate }}\r\n\t\t\t\t</h3>\r\n\t\t\t</ng-template>\r\n\t\t</app-ndf-table>\r\n\t</div>\r\n</div>\r\n", styles: [":host{padding-inline:var(--ndf-reports-inline-padding, 0);padding-block:var(--ndf-reports-block-padding, .5rem 0);height:100%;position:relative;display:flex;flex-direction:column;background-color:var(--ndf-reports-background, #fff);box-sizing:border-box;max-width:100%;flex:0 0 100%}:host:before,:host:after{box-sizing:border-box}:host[dir=ltr]{--ndf-reports-panel-translateX: -100%;--ndf-reports-details-translateX: 100%}.ndf-reports__header{background-color:var(--ndf-reports-background, #fff);flex-direction:var(--ndf-reports-header-direction, row);justify-content:var(--ndf-reports-header-justify, space-between);align-items:var(--ndf-reports-header-items, center);padding-inline:var(--ndf-reports-header-padding-inline, .5rem);padding-block:var(--ndf-reports-header-padding-block, 0 .5rem);position:var(--ndf-reports-header-position, sticky);top:0;z-index:1}.ndf-reports__header__actions{justify-content:var(--ndf-reports-actions-justify, flex-end)}.ndf-reports__header__custom-actions .toggle-button{min-width:0;padding:0 10px}.ndf-reports__container{--panel-width: var(--ndf-reports-panel-width, 18rem);position:relative;overflow:var(--ndf-reports-container-overflow, hidden);display:grid;transition:all .2s;max-width:100%;width:100%;height:var(--ndf-reports-height, calc(var(--ndf-fluid-height) - calc(var(--ndf-reports-block-padding, 1rem) * 2.5)));flex-grow:1;grid-gap:var(--ndf-table-container-gap, .5rem);gap:var(--ndf-table-container-gap, .5rem)}.ndf-reports__container.panel-opened{--ndf-details-margin: var(--panel-width);--ndf-reports-panel-translateX: 0;--ndf-reports-content-margin: var(--panel-width)}@media print{.ndf-reports__container{--ndf-reports-container-overflow: visible;height:100%}}.ndf-reports__panel,.ndf-reports__content .ndf-reports__details{overflow:auto;transition:all .2s}.ndf-reports__panel{position:absolute;width:var(--panel-width);height:100%;transform:translate(var(--ndf-reports-panel-translateX, 100%));padding-inline:var(--ndf-reports-panel-inline-padding, .5rem);padding-block:var(--ndf-reports-panel-block-padding, .5rem);background:var(--ndf-reports-panel-background, #fff);z-index:1}.ndf-reports__content{flex-grow:1;padding-inline-start:var(--ndf-reports-content-margin, 1rem);padding-inline-end:var(--ndf-reports-content-pie, 1rem);padding-block:var(--ndf-reports-content-pb, 0 1rem);overflow-y:var(--ndf-reports-content-overflow-y, auto);position:relative;display:flex;flex-direction:column}@media print{.ndf-reports__content{--ndf-reports-content-overflow-y: visible}}.ndf-reports__details{position:absolute;inset-inline-end:0;width:calc(100% - var(--ndf-details-margin, 0px));height:100%;transform:translate(var(--ndf-reports-details-translateX, -100%));padding-inline:var(--ndf-reports-details-inline-padding, 0rem);flex-grow:1;padding-block:var(--ndf-reports-details-block-padding, 0rem);background:var(--ndf-reports-details-background, #fff);z-index:1;transition:all .2s}.reports-grid{--grid-columns: 12;--column-width: calc(100% / var(--grid-columns));display:grid;grid-gap:var(--reports-grid-gap, 1.5rem);gap:var(--reports-grid-gap, 1.5rem);grid-template-columns:var(--rg-columns, repeat(var(--grid-columns), 1fr));margin-block:var(--reports-grid-margin-block, 1.25rem 0);padding-inline:var(--reports-grid-padding-inline, .5rem)}.reports-grid__item{display:grid;grid-gap:.3rem;gap:.3rem;min-width:0;text-align:center;vertical-align:middle}.reports-grid__item[data-width=\"1\"]{--col-span: span 1}.reports-grid__item[data-start-column=\"1\"]{--col-start: 1}.reports-grid__item[data-start-row=\"1\"]{--row-start: 1}.reports-grid__item[data-height=\"1\"]{--row-span: 1}.reports-grid__item[data-width=\"2\"]{--col-span: span 2}.reports-grid__item[data-start-column=\"2\"]{--col-start: 2}.reports-grid__item[data-start-row=\"2\"]{--row-start: 2}.reports-grid__item[data-height=\"2\"]{--row-span: 2}.reports-grid__item[data-width=\"3\"]{--col-span: span 3}.reports-grid__item[data-start-column=\"3\"]{--col-start: 3}.reports-grid__item[data-start-row=\"3\"]{--row-start: 3}.reports-grid__item[data-height=\"3\"]{--row-span: 3}.reports-grid__item[data-width=\"4\"]{--col-span: span 4}.reports-grid__item[data-start-column=\"4\"]{--col-start: 4}.reports-grid__item[data-start-row=\"4\"]{--row-start: 4}.reports-grid__item[data-height=\"4\"]{--row-span: 4}.reports-grid__item[data-width=\"5\"]{--col-span: span 5}.reports-grid__item[data-start-column=\"5\"]{--col-start: 5}.reports-grid__item[data-start-row=\"5\"]{--row-start: 5}.reports-grid__item[data-height=\"5\"]{--row-span: 5}.reports-grid__item[data-width=\"6\"]{--col-span: span 6}.reports-grid__item[data-start-column=\"6\"]{--col-start: 6}.reports-grid__item[data-start-row=\"6\"]{--row-start: 6}.reports-grid__item[data-height=\"6\"]{--row-span: 6}.reports-grid__item[data-width=\"7\"]{--col-span: span 7}.reports-grid__item[data-start-column=\"7\"]{--col-start: 7}.reports-grid__item[data-start-row=\"7\"]{--row-start: 7}.reports-grid__item[data-height=\"7\"]{--row-span: 7}.reports-grid__item[data-width=\"8\"]{--col-span: span 8}.reports-grid__item[data-start-column=\"8\"]{--col-start: 8}.reports-grid__item[data-start-row=\"8\"]{--row-start: 8}.reports-grid__item[data-height=\"8\"]{--row-span: 8}.reports-grid__item[data-width=\"9\"]{--col-span: span 9}.reports-grid__item[data-start-column=\"9\"]{--col-start: 9}.reports-grid__item[data-start-row=\"9\"]{--row-start: 9}.reports-grid__item[data-height=\"9\"]{--row-span: 9}.reports-grid__item[data-width=\"10\"]{--col-span: span 10}.reports-grid__item[data-start-column=\"10\"]{--col-start: 10}.reports-grid__item[data-start-row=\"10\"]{--row-start: 10}.reports-grid__item[data-height=\"10\"]{--row-span: 10}.reports-grid__item[data-width=\"11\"]{--col-span: span 11}.reports-grid__item[data-start-column=\"11\"]{--col-start: 11}.reports-grid__item[data-start-row=\"11\"]{--row-start: 11}.reports-grid__item[data-height=\"11\"]{--row-span: 11}.reports-grid__item[data-width=\"12\"]{--col-span: span 12}.reports-grid__item[data-start-column=\"12\"]{--col-start: 12}.reports-grid__item[data-start-row=\"12\"]{--row-start: 12}.reports-grid__item[data-height=\"12\"]{--row-span: 12}@media screen{.reports-grid__item{grid-column:var(--col-start, auto)/var(--col-span, span var(--grid-column, 2));grid-row:var(--row-start, auto)/span var(--row-span, 1);grid-template-rows:subgrid}}@media print{.reports-grid{--reports-grid-gap: 11mm;--reports-grid-margin-top: 9mm;--rg-columns: repeat(2, 1fr)}.reports-grid__item{--col-start: auto;--col-span: span 1;border:1px solid #f5f5f5;border-radius:var(--cp-radius, 1rem);page-break-inside:avoid;break-inside:avoid-page}}@media screen and (max-width: 1199px){.reports-grid__item[data-width=\"1\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"2\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"3\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"4\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"5\"]{--col-start: auto;--col-span: span 6}.reports-grid__item[data-width=\"6\"]{--col-start: auto;--col-span: span 6}.reports-grid__item.wide{--col-start: 1;--col-span: -1}}@media screen and (max-width: 767px){.reports-grid__item[data-width]{--col-start: 1;--col-span: -1}}\n"], components: [{ type: FiltersPanelComponent, selector: "app-filters-panel", inputs: ["aggregations", "fields", "activeQuery"], outputs: ["filterChanged"] }, { type: i1__namespace$c.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2__namespace$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: EditorButtonComponent, selector: "app-editor-button", inputs: ["type", "key"] }, { type: i3__namespace$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: NdfReportComponent, selector: "app-ndf-report", inputs: ["config", "direction", "data", "criteria"], outputs: ["onNavigate", "onOpen"] }, { type: NdfTableComponent, selector: "app-ndf-table", inputs: ["rows", "totalRecords", "autoCalculateHeight", "emptyMessage", "activeQuery", "configPath", "styleClass", "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: [{
@@ -47688,7 +47860,7 @@
       return ConfigPreviewComponent;
   }());
   ConfigPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ConfigPreviewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  ConfigPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ConfigPreviewComponent, selector: "app-config-preview", inputs: { type: "type", data: "data" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"data | validateObject\">\r\n\t<ng-container [ngSwitch]=\"type\">\r\n\t\t<app-ndf-table *ngSwitchCase=\"types.TABLES\" [config]=\"data\"></app-ndf-table>\r\n\t\t<app-ndf-reports *ngSwitchCase=\"types.REPORTS\" [config]=\"data\"></app-ndf-reports>\r\n\t</ng-container>\r\n</ng-container>\r\n", styles: [":host{display:block;height:var(--monaco-config-editor-height, 100%);border:var(--monaco-config-editor-border, 1px solid var(--monaco-border-color, #bbb))}\n"], components: [{ 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"] }, { type: NdfReportsComponent, selector: "app-ndf-reports", inputs: ["jsonEditorEnabled", "reportsKey", "navigateRoute", "config"], outputs: ["onQueryChange"] }], 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"] }], pipes: { "validateObject": ValidateObjectPipe } });
+  ConfigPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ConfigPreviewComponent, selector: "app-config-preview", inputs: { type: "type", data: "data" }, ngImport: i0__namespace, template: "<ng-container *ngIf=\"data | validateObject\">\r\n\t<ng-container [ngSwitch]=\"type\">\r\n\t\t<app-ndf-table *ngSwitchCase=\"types.TABLES\" [config]=\"data\"></app-ndf-table>\r\n\t\t<app-ndf-reports *ngSwitchCase=\"types.REPORTS\" [config]=\"data\"></app-ndf-reports>\r\n\t</ng-container>\r\n</ng-container>\r\n", styles: [":host{display:block;height:var(--monaco-config-editor-height, 100%);border:var(--monaco-config-editor-border, 1px solid var(--monaco-border-color, #bbb))}\n"], components: [{ type: NdfTableComponent, selector: "app-ndf-table", inputs: ["rows", "totalRecords", "autoCalculateHeight", "emptyMessage", "activeQuery", "configPath", "styleClass", "configTransformer", "tableKey", "jsonEditorEnabled", "config", "customCriteria", "searchTerm"], outputs: ["onRowSelected", "onRowIndexSelected", "actionOnRow", "onGettingData", "onMultiRowSelected", "onLoading", "onPage", "onInitialized", "onLoaded", "onQueryChange", "onSort"] }, { type: NdfReportsComponent, selector: "app-ndf-reports", inputs: ["jsonEditorEnabled", "reportsKey", "navigateRoute", "config"], outputs: ["onQueryChange"] }], 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"] }], pipes: { "validateObject": ValidateObjectPipe } });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ConfigPreviewComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -48227,6 +48399,7 @@
   exports.CircleNodeComponent = CircleNodeComponent;
   exports.ClickOutsideDirective = ClickOutsideDirective;
   exports.ClipboardComponent = ClipboardComponent;
+  exports.ColumnRendererRegistryService = ColumnRendererRegistryService;
   exports.CommentApiService = CommentApiService;
   exports.CommentsDashletComponent = CommentsDashletComponent;
   exports.CommentsModule = CommentsModule;